diff --git a/packages/rax-provider/src/provider.ts b/packages/rax-provider/src/provider.ts index 7e8cd9ca2..2412fb55d 100644 --- a/packages/rax-provider/src/provider.ts +++ b/packages/rax-provider/src/provider.ts @@ -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; } diff --git a/packages/rax-render/src/engine/base.tsx b/packages/rax-render/src/engine/base.tsx index c4d970bf3..4a46634ec 100644 --- a/packages/rax-render/src/engine/base.tsx +++ b/packages/rax-render/src/engine/base.tsx @@ -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(); diff --git a/packages/rax-simulator-renderer/src/renderer-view.tsx b/packages/rax-simulator-renderer/src/renderer-view.tsx index 8056a9644..34fd78054 100644 --- a/packages/rax-simulator-renderer/src/renderer-view.tsx +++ b/packages/rax-simulator-renderer/src/renderer-view.tsx @@ -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} diff --git a/packages/rax-simulator-renderer/src/renderer.ts b/packages/rax-simulator-renderer/src/renderer.ts index b7f7ef82d..dd50dc918 100644 --- a/packages/rax-simulator-renderer/src/renderer.ts +++ b/packages/rax-simulator-renderer/src/renderer.ts @@ -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, }; }); } diff --git a/packages/react-provider/src/provider.tsx b/packages/react-provider/src/provider.tsx index aedc00ee7..377f3359a 100644 --- a/packages/react-provider/src/provider.tsx +++ b/packages/react-provider/src/provider.tsx @@ -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, { diff --git a/packages/react-renderer/src/renderer/base.tsx b/packages/react-renderer/src/renderer/base.tsx index ea6a6d8af..bda0956f5 100644 --- a/packages/react-renderer/src/renderer/base.tsx +++ b/packages/react-renderer/src/renderer/base.tsx @@ -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; } diff --git a/packages/react-simulator-renderer/src/renderer-view.tsx b/packages/react-simulator-renderer/src/renderer-view.tsx index 0587d8f51..8d7599ef7 100644 --- a/packages/react-simulator-renderer/src/renderer-view.tsx +++ b/packages/react-simulator-renderer/src/renderer-view.tsx @@ -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 (