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

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;
   }
 

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) {
+    if (props?.__appHelper?.requestHandlersMap) {
-      const { dataSourceMap, reloadDataSource } = createInterpret(dataSource, this, {
+      const { dataSourceMap, reloadDataSource } = createDataSourceEngine(dataSource, this, {
-        requestHandlersMap: props.requestHandlersMap,
+        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();

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}

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,
       };
     });
   }

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, {

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 { create as createDataSourceEngine } from '@ali/lowcode-datasource-engine/interpret';
-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 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 (props?.__appHelper?.requestHandlersMap) {
-    if (true) {
+      const { dataSourceMap, reloadDataSource } = createDataSourceEngine(dataSource, this, {
-      const { dataSourceMap, reloadDataSource } = createInterpret(dataSource, this, {
+        requestHandlersMap: props?.__appHelper?.requestHandlersMap,
-        // requestHandlersMap: props.requestHandlersMap,
-        requestHandlersMap: {
-          mtop: createMtopHandler(),
-          fetch: createFetchHandler(),
-          jsonp: createJsonpHandler(),
-        },
       });
       this.dataSourceMap = dataSourceMap;
       this.reloadDataSource = () => new Promise((resolve) => {
         debug('reload data source');
-        this.__showPlaceholder = true;
+        // this.__showPlaceholder = true;
         reloadDataSource().then(() => {
-          this.__showPlaceholder = false;
+          // this.__showPlaceholder = false;
-          // this.forceUpdate();
           // @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;
   }

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 (
       <LowCodeRenderer
         schema={renderer.schema}
         components={renderer.components}
         appHelper={renderer.context}
         // context={renderer.context}
-        requestHandlersMap={requestHandlersMap}
         designMode={designMode}
         device={device}
         suspended={renderer.suspended}

packages/react-simulator-renderer/src/renderer.ts

@@ -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,
       };
     });
   }

packages/runtime/src/core/provider.ts

@@ -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;
   }