feat: renderer 接入数据源引擎

packages/rax-render/package.json

@@ -36,6 +36,7 @@
     "@ali/b3-one": "^0.0.17",
     "@ali/bzb-request": "2.6.1",
     "@ali/lib-mtop": "^2.5.1",
+    "@ali/lowcode-datasource-engine": "1.0.7-0",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "events": "^3.0.0",

packages/rax-render/src/engine/base.jsx

@@ -2,6 +2,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 DataHelper from '../utils/dataHelper';
 import {
   forEach,
@@ -84,31 +85,6 @@ export default class BaseEngine extends Component {
     console.warn(e);
   }
 
-  reloadDataSource = () => new Promise((resolve, reject) => {
-      debug('reload data source');
-      if (!this.__dataHelper) {
-        this.__showPlaceholder = false;
-        return resolve();
-      }
-      this.__dataHelper
-        .getInitData()
-        .then((res) => {
-          this.__showPlaceholder = false;
-          if (isEmpty(res)) {
-            this.forceUpdate();
-            return resolve();
-          }
-          this.setState(res, resolve);
-        })
-        .catch((err) => {
-          if (this.__showPlaceholder) {
-            this.__showPlaceholder = false;
-            this.forceUpdate();
-          }
-          reject(err);
-        });
-    });
-
   __setLifeCycleMethods = (method, args) => {
     const lifeCycleMethods = getValue(this.props.__schema, 'lifeCycles', {});
     if (lifeCycleMethods[method]) {
@@ -154,17 +130,58 @@ export default class BaseEngine extends Component {
 
   __initDataSource = (props = this.props) => {
     const schema = props.__schema || {};
-    const appHelper = props.__appHelper;
     const dataSource = (schema && schema.dataSource) || {};
-    this.__dataHelper = new DataHelper(this, dataSource, appHelper, (config) => this.__parseData(config));
+    // requestHandlersMap 存在才走数据源引擎方案
-    this.dataSourceMap = this.__dataHelper.dataSourceMap;
+    if (props.requestHandlersMap) {
+      const { dataSourceMap, reloadDataSource } = createInterpret(dataSource, this, {
+        requestHandlersMap: {
+          mtop: createMtopHandler(),
+          fetch: createFetchHandler(),
+        }
+      });
+      this.dataSourceMap = dataSourceMap;
+      this.reloadDataSource = () => new Promise((resolve, reject) => {
+        debug('reload data source');
+        this.__showPlaceholder = true;
+        reloadDataSource().then(() => {
+          this.__showPlaceholder = false;
+          // @TODO 是否需要 forceUpate
+          resolve();
+        })
+      });
+    } else {
+      const appHelper = props.__appHelper;
+      this.__dataHelper = new DataHelper(this, dataSource, appHelper, (config) => this.__parseData(config));
+      this.dataSourceMap = this.__dataHelper.dataSourceMap;
+      this.reloadDataSource = () => new Promise((resolve, reject) => {
+        debug('reload data source');
+        if (!this.__dataHelper) {
+          this.__showPlaceholder = false;
+          return resolve();
+        }
+        this.__dataHelper
+          .getInitData()
+          .then((res) => {
+            this.__showPlaceholder = false;
+            if (isEmpty(res)) {
+              this.forceUpdate();
+              return resolve();
+            }
+            this.setState(res, resolve);
+          })
+          .catch((err) => {
+            if (this.__showPlaceholder) {
+              this.__showPlaceholder = false;
+              this.forceUpdate();
+            }
+            reject(err);
+          });
+      });
+    }
     // 设置容器组件占位，若设置占位则在初始异步请求完成之前用loading占位且不渲染容器组件内部内容
     if (this.__parseData(schema.props && schema.props.autoLoading)) {
       this.__showPlaceholder = (dataSource.list || []).some((item) => !!this.__parseData(item.isInit));
     }
-    // this.__showPlaceholder = this.__parseData(schema.props && schema.props.autoLoading) && (dataSource.list || []).some(
-    //   (item) => !!this.__parseData(item.isInit),
-    // );
   };
 
   __render = () => {

packages/react-renderer/package.json

@@ -28,6 +28,7 @@
     "@ali/bzb-request": "^2.6.0-beta.13",
     "@ali/lib-mtop": "^2.5.1",
     "@alifd/next": "^1.19.17",
+    "@ali/lowcode-datasource-engine": "1.0.7-0",
     "debug": "^4.1.1",
     "events": "^3.0.0",
     "fetch-jsonp": "^1.1.3",

packages/react-renderer/src/renderer/base.jsx

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Debug from 'debug';
+import { createInterpret } from '@ali/lowcode-datasource-engine';
 import Div from '../components/Div';
 import VisualDom from '../components/VisualDom';
 import AppContext from '../context/appContext';
@@ -81,31 +82,6 @@ export default class BaseRender extends PureComponent {
     console.warn(e);
   }
 
-  reloadDataSource = () => new Promise((resolve, reject) => {
-      debug('reload data source');
-      if (!this.__dataHelper) {
-        this.__showPlaceholder = false;
-        return resolve();
-      }
-      this.__dataHelper
-        .getInitData()
-        .then((res) => {
-          this.__showPlaceholder = false;
-          if (isEmpty(res)) {
-            this.forceUpdate();
-            return resolve();
-          }
-          this.setState(res, resolve);
-        })
-        .catch((err) => {
-          if (this.__showPlaceholder) {
-            this.__showPlaceholder = false;
-            this.forceUpdate();
-          }
-          reject(err);
-        });
-    });
-
   __setLifeCycleMethods = (method, args) => {
     const lifeCycleMethods = getValue(this.props.__schema, 'lifeCycles', {});
     let fn = lifeCycleMethods[method];
@@ -167,10 +143,54 @@ export default class BaseRender extends PureComponent {
 
   __initDataSource = (props = this.props) => {
     const schema = props.__schema || {};
-    const appHelper = props.__appHelper;
     const dataSource = (schema && schema.dataSource) || {};
-    this.__dataHelper = new DataHelper(this, dataSource, appHelper, (config) => this.__parseData(config));
+    // requestHandlersMap 存在才走数据源引擎方案
-    this.dataSourceMap = this.__dataHelper.dataSourceMap;
+    if (props.requestHandlersMap) {
+      const { dataSourceMap, reloadDataSource } = createInterpret(dataSource, this, {
+        requestHandlersMap: {
+          mtop: createMtopHandler(),
+          fetch: createFetchHandler(),
+        }
+      });
+      this.dataSourceMap = dataSourceMap;
+      this.reloadDataSource = () => new Promise((resolve, reject) => {
+        debug('reload data source');
+        this.__showPlaceholder = true;
+        reloadDataSource().then(() => {
+          this.__showPlaceholder = false;
+          // @TODO 是否需要 forceUpate
+          resolve();
+        })
+      });
+    } else {
+      const appHelper = props.__appHelper;
+      this.__dataHelper = new DataHelper(this, dataSource, appHelper, (config) => this.__parseData(config));
+      this.dataSourceMap = this.__dataHelper.dataSourceMap;
+      this.reloadDataSource = () => new Promise((resolve, reject) => {
+        debug('reload data source');
+        if (!this.__dataHelper) {
+          this.__showPlaceholder = false;
+          return resolve();
+        }
+        this.__dataHelper
+          .getInitData()
+          .then((res) => {
+            this.__showPlaceholder = false;
+            if (isEmpty(res)) {
+              this.forceUpdate();
+              return resolve();
+            }
+            this.setState(res, resolve);
+          })
+          .catch((err) => {
+            if (this.__showPlaceholder) {
+              this.__showPlaceholder = false;
+              this.forceUpdate();
+            }
+            reject(err);
+          });
+      });
+    }
     // 设置容器组件占位，若设置占位则在初始异步请求完成之前用loading占位且不渲染容器组件内部内容
     this.__showPlaceholder = this.__parseData(schema.props && schema.props.autoLoading) && (dataSource.list || []).some(
       (item) => !!this.__parseData(item.isInit),