fix: 设计和预览两种场景下 requestHandlersMap 的接入

This commit is contained in:
muyun.my 2020-11-10 09:55:42 +08:00
parent aa7896090d
commit 707de45211
9 changed files with 58 additions and 30 deletions

View File

@ -1,6 +1,7 @@
import { createElement, render } from 'rax';
import UniversalDriver from 'driver-universal';
import { app, Provider } from '@ali/lowcode-runtime';
import { AppHelper } from '@ali/lowcode-utils';
import LazyComponent from './lazy-component';
import getRouter from './router';
@ -80,7 +81,12 @@ export default class RaxProvider extends Provider {
history: this.getHistory(),
routes,
});
const RouterView = (props) => createElement(Router, props);
const appHelper = new AppHelper({});
appHelper.set('requestHandlersMap', this.getRequestHandlersMap());
const RouterView = (props) => createElement(Router, {
appHelper,
...props,
});
return RouterView;
}

View File

@ -3,7 +3,7 @@ import { Component, createElement } from 'rax';
import PropTypes from 'prop-types';
import Debug from 'debug';
import classnames from 'classnames';
import { createInterpret } from '@ali/lowcode-datasource-engine';
import { create as createDataSourceEngine } from '@ali/lowcode-datasource-engine/interpret';
import DataHelper from '../utils/dataHelper';
import {
forEach,
@ -134,16 +134,16 @@ export default class BaseEngine extends Component {
const schema = props.__schema || {};
const dataSource = (schema && schema.dataSource) || {};
// requestHandlersMap 存在才走数据源引擎方案
if (props.requestHandlersMap) {
const { dataSourceMap, reloadDataSource } = createInterpret(dataSource, this, {
requestHandlersMap: props.requestHandlersMap,
if (props?.__appHelper?.requestHandlersMap) {
const { dataSourceMap, reloadDataSource } = createDataSourceEngine(dataSource, this, {
requestHandlersMap: props?.__appHelper?.requestHandlersMap,
});
this.dataSourceMap = dataSourceMap;
this.reloadDataSource = () => new Promise((resolve, reject) => {
debug('reload data source');
this.__showPlaceholder = true;
// this.__showPlaceholder = true;
reloadDataSource().then(() => {
this.__showPlaceholder = false;
// this.__showPlaceholder = false;
// @TODO 是否需要 forceUpate
resolve();
});
@ -155,13 +155,13 @@ export default class BaseEngine extends Component {
this.reloadDataSource = () => new Promise((resolve, reject) => {
debug('reload data source');
if (!this.__dataHelper) {
this.__showPlaceholder = false;
// this.__showPlaceholder = false;
return resolve();
}
this.__dataHelper
.getInitData()
.then((res) => {
this.__showPlaceholder = false;
// this.__showPlaceholder = false;
if (isEmpty(res)) {
this.forceUpdate();
return resolve();

View File

@ -113,7 +113,7 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
schema={renderer.schema}
components={renderer.components}
context={renderer.context}
requestHandlersMap={host.requestHandlersMap}
appHelper={renderer.context}
device={device}
designMode={renderer.designMode}
suspended={renderer.suspended}

View File

@ -65,6 +65,12 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
return this._designMode;
}
@obx.ref private _requestHandlersMap = null;
@computed get requestHandlersMap(): any {
return this._requestHandlersMap;
}
@obx.ref private _componentsMap = {};
@computed get componentsMap(): any {
@ -120,6 +126,9 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
// sync designMode
this._designMode = host.designMode;
// sync requestHandlersMap
this._requestHandlersMap = host.requestHandlersMap;
// sync suspended
// sync scope
@ -142,6 +151,7 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
constants: {
name: 'demo',
},
requestHandlersMap: this._requestHandlersMap,
};
});
}

View File

@ -87,6 +87,7 @@ export default class ReactProvider extends Provider {
const appHelper = new AppHelper({});
appHelper.set('utils', this.getUtils());
appHelper.set('constants', this.getConstants());
appHelper.set('requestHandlersMap', this.getRequestHandlersMap());
const self = this;
const RouterView = (props: any) => {
return createElement(Router as any, {

View File

@ -2,10 +2,7 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Debug from 'debug';
import { createInterpret } from '@ali/lowcode-datasource-engine';
import { createMtopHandler } from '@ali/lowcode-datasource-mtop-handler';
import { createFetchHandler } from '@ali/lowcode-datasource-fetch-handler';
import { createJsonpHandler } from '@ali/lowcode-datasource-jsonp-handler';
import { create as createDataSourceEngine } from '@ali/lowcode-datasource-engine/interpret';
import Div from '../components/Div';
import VisualDom from '../components/VisualDom';
import AppContext from '../context/appContext';
@ -149,24 +146,18 @@ export default class BaseRender extends PureComponent {
const schema = props.__schema || {};
const dataSource = (schema && schema.dataSource) || {};
// requestHandlersMap 存在才走数据源引擎方案
// if (props.requestHandlersMap) {
if (true) {
const { dataSourceMap, reloadDataSource } = createInterpret(dataSource, this, {
// requestHandlersMap: props.requestHandlersMap,
requestHandlersMap: {
mtop: createMtopHandler(),
fetch: createFetchHandler(),
jsonp: createJsonpHandler(),
},
if (props?.__appHelper?.requestHandlersMap) {
const { dataSourceMap, reloadDataSource } = createDataSourceEngine(dataSource, this, {
requestHandlersMap: props?.__appHelper?.requestHandlersMap,
});
this.dataSourceMap = dataSourceMap;
this.reloadDataSource = () => new Promise((resolve) => {
debug('reload data source');
this.__showPlaceholder = true;
// this.__showPlaceholder = true;
reloadDataSource().then(() => {
this.__showPlaceholder = false;
// this.forceUpdate();
// this.__showPlaceholder = false;
// @TODO 是否需要 forceUpate
// this.forceUpdate();
resolve();
});
});
@ -177,13 +168,13 @@ export default class BaseRender extends PureComponent {
this.reloadDataSource = () => new Promise((resolve, reject) => {
debug('reload data source');
if (!this.__dataHelper) {
this.__showPlaceholder = false;
// this.__showPlaceholder = false;
return resolve();
}
this.__dataHelper
.getInitData()
.then((res) => {
this.__showPlaceholder = false;
// this.__showPlaceholder = false;
if (isEmpty(res)) {
this.forceUpdate();
return resolve();
@ -574,6 +565,10 @@ export default class BaseRender extends PureComponent {
return checkProps(props);
};
get requestHandlersMap() {
return this.appHelper && this.appHelper.requestHandlersMap;
}
get utils() {
return this.appHelper && this.appHelper.utils;
}

View File

@ -98,14 +98,13 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
render() {
const { renderer } = this.props;
const { device, designMode, requestHandlersMap } = renderer;
const { device, designMode } = renderer;
return (
<LowCodeRenderer
schema={renderer.schema}
components={renderer.components}
appHelper={renderer.context}
// context={renderer.context}
requestHandlersMap={requestHandlersMap}
designMode={designMode}
device={device}
suspended={renderer.suspended}

View File

@ -48,6 +48,7 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
// sync designMode
this._designMode = host.designMode;
// sync requestHandlersMap
this._requestHandlersMap = host.requestHandlersMap;
// sync suspended
@ -71,6 +72,7 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
constants: {
name: 'demo',
},
requestHandlersMap: this._requestHandlersMap,
};
});
}

View File

@ -35,6 +35,7 @@ export interface IAppData {
containerId?: string;
components?: IComponents;
componentsMap?: IComponentMap[];
requestHandlersMap?: any;
utils?: IUtils;
constants?: IConstants;
i18n?: I18n;
@ -147,6 +148,7 @@ export default class Provider {
containerId,
components,
componentsMap,
requestHandlersMap,
utils,
constants,
i18n,
@ -160,11 +162,13 @@ export default class Provider {
this.registerComponentsMap(componentsMap);
this.registerUtils(utils);
this.registerContants(constants);
this.registerRequestHandlersMap(requestHandlersMap);
resolve({
history: this.getHistory(),
components: this.getComponents(),
utils: this.getUtils(),
containerId: this.getContainerId(),
requestHandlersMap: this.getRequestHandlersMap(),
});
} catch (err) {
reject(err);
@ -288,6 +292,13 @@ export default class Provider {
this.constants = constants;
}
registerRequestHandlersMap(requestHandlersMap: any) {
if (!requestHandlersMap) {
return;
}
this.requestHandlersMap = requestHandlersMap;
}
setLayoutConfig(config: ILayoutConfig | undefined) {
if (!config) {
return;
@ -355,6 +366,10 @@ export default class Provider {
return this.constants;
}
getRequestHandlersMap() {
return this.requestHandlersMap;
}
getComponentsMap() {
return this.componentsMap;
}