@cuipengyu5/bling-renderer-core 0.0.1

package/lib/renderer/base.js

@@ -0,0 +1,1126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = baseRendererFactory;
+exports.executeLifeCycleMethod = executeLifeCycleMethod;
+exports.getSchemaChildren = getSchemaChildren;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _interpret = require("@alilc/lowcode-datasource-engine/interpret");
+var _lowcodeUtils = require("@alilc/lowcode-utils");
+var _adapter = _interopRequireDefault(require("../adapter"));
+var _Div = _interopRequireDefault(require("../components/Div"));
+var _VisualDom = _interopRequireDefault(require("../components/VisualDom"));
+var _context6 = _interopRequireDefault(require("../context"));
+var _utils = require("../utils");
+var _hoc = require("../hoc");
+var _leaf = require("../hoc/leaf");
+var _logger = _interopRequireDefault(require("../utils/logger"));
+var _isUseLoop = _interopRequireDefault(require("../utils/is-use-loop"));
+var _excluded = ["ref"];
+/* eslint-disable no-console */
+/* eslint-disable max-len */
+/* eslint-disable react/prop-types */
+/**
+ * execute method in schema.lifeCycles with context
+ * @PRIVATE
+ */
+function executeLifeCycleMethod(context, schema, method, args, thisRequiredInJSE) {
+  if (!context || !(0, _utils.isSchema)(schema) || !method) {
+    return;
+  }
+  var lifeCycleMethods = (0, _utils.getValue)(schema, 'lifeCycles', {});
+  var fn = lifeCycleMethods[method];
+  if (!fn) {
+    return;
+  }
+
+  // TODO: cache
+  if ((0, _lowcodeUtils.isJSExpression)(fn) || (0, _lowcodeUtils.isJSFunction)(fn)) {
+    fn = thisRequiredInJSE ? (0, _utils.parseThisRequiredExpression)(fn, context) : (0, _utils.parseExpression)(fn, context);
+  }
+  if (typeof fn !== 'function') {
+    _logger["default"].error("\u751F\u547D\u5468\u671F" + method + "\u7C7B\u578B\u4E0D\u7B26", fn);
+    return;
+  }
+  try {
+    return fn.apply(context, args);
+  } catch (e) {
+    _logger["default"].error("[" + schema.componentName + "]\u751F\u547D\u5468\u671F" + method + "\u51FA\u9519", e);
+  }
+}
+
+/**
+ * get children from a node schema
+ * @PRIVATE
+ */
+function getSchemaChildren(schema) {
+  if (!schema) {
+    return;
+  }
+  if (!schema.props) {
+    return schema.children;
+  }
+  if (!schema.children) {
+    return schema.props.children;
+  }
+  if (!schema.props.children) {
+    return schema.children;
+  }
+  var result = [].concat(schema.children);
+  if (Array.isArray(schema.props.children)) {
+    result = result.concat(schema.props.children);
+  } else {
+    result.push(schema.props.children);
+  }
+  return result;
+}
+function baseRendererFactory() {
+  var _BaseRenderer;
+  var _adapter$getRenderers = _adapter["default"].getRenderers(),
+    customBaseRenderer = _adapter$getRenderers.BaseRenderer;
+  if (customBaseRenderer) {
+    return customBaseRenderer;
+  }
+  var _adapter$getRuntime = _adapter["default"].getRuntime(),
+    Component = _adapter$getRuntime.Component,
+    createElement = _adapter$getRuntime.createElement;
+  var Div = (0, _Div["default"])();
+  var VisualDom = (0, _VisualDom["default"])();
+  var AppContext = (0, _context6["default"])();
+  var DESIGN_MODE = {
+    EXTEND: 'extend',
+    BORDER: 'border',
+    PREVIEW: 'preview'
+  };
+  var OVERLAY_LIST = ['Dialog', 'Overlay', 'Animate', 'ConfigProvider'];
+  var DEFAULT_LOOP_ARG_ITEM = 'item';
+  var DEFAULT_LOOP_ARG_INDEX = 'index';
+  var scopeIdx = 0;
+  return _BaseRenderer = /*#__PURE__*/function (_Component) {
+    function BaseRenderer(_props2, context) {
+      var _props2$__schema;
+      var _this;
+      _this = _Component.call(this, _props2, context) || this;
+      _this.i18n = void 0;
+      _this.getLocale = void 0;
+      _this.setLocale = void 0;
+      _this.dataSourceMap = {};
+      _this.__namespace = 'base';
+      _this.__compScopes = {};
+      _this.__instanceMap = {};
+      _this.__dataHelper = void 0;
+      /**
+       * keep track of customMethods added to this context
+       *
+       * @type {any}
+       */
+      _this.__customMethodsList = [];
+      _this.__parseExpression = void 0;
+      _this.__ref = void 0;
+      /**
+       * reference of style element contains schema.css
+       *
+       * @type {any}
+       */
+      _this.__styleElement = void 0;
+      _this.reloadDataSource = function () {
+        return new Promise(function (resolve, reject) {
+          _this.__debug('reload data source');
+          if (!_this.__dataHelper) {
+            return resolve({});
+          }
+          _this.__dataHelper.getInitData().then(function (res) {
+            if ((0, _utils.isEmpty)(res)) {
+              _this.forceUpdate();
+              return resolve({});
+            }
+            _this.setState(res, resolve);
+          })["catch"](function (err) {
+            reject(err);
+          });
+        });
+      };
+      /**
+       * execute method in schema.lifeCycles
+       * @PRIVATE
+       */
+      _this.__executeLifeCycleMethod = function (method, args) {
+        executeLifeCycleMethod(_this, _this.props.__schema, method, args, _this.props.thisRequiredInJSE);
+      };
+      /**
+       * this method is for legacy purpose only, which used _ prefix instead of __ as private for some historical reasons
+       * @LEGACY
+       */
+      _this._getComponentView = function (componentName) {
+        var __components = _this.props.__components;
+        if (!__components) {
+          return;
+        }
+        return __components[componentName];
+      };
+      _this.__bindCustomMethods = function (props) {
+        var __schema = props.__schema;
+        var customMethodsList = Object.keys(__schema.methods || {}) || [];
+        (_this.__customMethodsList || []).forEach(function (item) {
+          if (!customMethodsList.includes(item)) {
+            delete _this[item];
+          }
+        });
+        _this.__customMethodsList = customMethodsList;
+        (0, _utils.forEach)(__schema.methods, function (val, key) {
+          var value = val;
+          if ((0, _lowcodeUtils.isJSExpression)(value) || (0, _lowcodeUtils.isJSFunction)(value)) {
+            value = _this.__parseExpression(value, _this);
+          }
+          if (typeof value !== 'function') {
+            _logger["default"].error("custom method " + key + " can not be parsed to a valid function", value);
+            return;
+          }
+          _this[key] = value.bind(_this);
+        });
+      };
+      _this.__generateCtx = function (ctx) {
+        var _this$context = _this.context,
+          pageContext = _this$context.pageContext,
+          compContext = _this$context.compContext;
+        var obj = (0, _extends2["default"])({
+          page: pageContext,
+          component: compContext
+        }, ctx);
+        (0, _utils.forEach)(obj, function (val, key) {
+          _this[key] = val;
+        });
+      };
+      _this.__parseData = function (data, ctx) {
+        var _this$props = _this.props,
+          __ctx = _this$props.__ctx,
+          thisRequiredInJSE = _this$props.thisRequiredInJSE,
+          componentName = _this$props.componentName;
+        return (0, _utils.parseData)(data, ctx || __ctx || _this, {
+          thisRequiredInJSE: thisRequiredInJSE,
+          logScope: componentName
+        });
+      };
+      _this.__initDataSource = function (props) {
+        var _props$__appHelper;
+        if (!props) {
+          return;
+        }
+        var schema = props.__schema || {};
+        var defaultDataSource = {
+          list: []
+        };
+        var dataSource = schema.dataSource || defaultDataSource;
+        // requestHandlersMap 存在才走数据源引擎方案
+        // TODO: 下面if else 抽成独立函数
+        var useDataSourceEngine = !!((_props$__appHelper = props.__appHelper) !== null && _props$__appHelper !== void 0 && _props$__appHelper.requestHandlersMap);
+        if (useDataSourceEngine) {
+          _this.__dataHelper = {
+            updateConfig: function updateConfig(updateDataSource) {
+              var _createDataSourceEngi = (0, _interpret.create)(updateDataSource !== null && updateDataSource !== void 0 ? updateDataSource : {}, _this, props.__appHelper.requestHandlersMap ? {
+                  requestHandlersMap: props.__appHelper.requestHandlersMap
+                } : undefined),
+                dataSourceMap = _createDataSourceEngi.dataSourceMap,
+                reloadDataSource = _createDataSourceEngi.reloadDataSource;
+              _this.reloadDataSource = function () {
+                return new Promise(function (resolve) {
+                  _this.__debug('reload data source');
+                  reloadDataSource().then(function () {
+                    resolve({});
+                  });
+                });
+              };
+              return dataSourceMap;
+            }
+          };
+          _this.dataSourceMap = _this.__dataHelper.updateConfig(dataSource);
+        } else {
+          var appHelper = props.__appHelper;
+          _this.__dataHelper = new _utils.DataHelper(_this, dataSource, appHelper, function (config) {
+            return _this.__parseData(config);
+          });
+          _this.dataSourceMap = _this.__dataHelper.dataSourceMap;
+          _this.reloadDataSource = function () {
+            return new Promise(function (resolve, reject) {
+              _this.__debug('reload data source');
+              if (!_this.__dataHelper) {
+                return resolve({});
+              }
+              _this.__dataHelper.getInitData().then(function (res) {
+                if ((0, _utils.isEmpty)(res)) {
+                  return resolve({});
+                }
+                _this.setState(res, resolve);
+              })["catch"](function (err) {
+                reject(err);
+              });
+            });
+          };
+        }
+      };
+      /**
+       * init i18n apis
+       * @PRIVATE
+       */
+      _this.__initI18nAPIs = function () {
+        _this.i18n = function (key, values) {
+          if (values === void 0) {
+            values = {};
+          }
+          var _this$props2 = _this.props,
+            locale = _this$props2.locale,
+            messages = _this$props2.messages;
+          return (0, _utils.getI18n)(key, values, locale, messages);
+        };
+        _this.getLocale = function () {
+          return _this.props.locale;
+        };
+        _this.setLocale = function (loc) {
+          var _this$appHelper, _this$appHelper$utils, _this$appHelper$utils2;
+          var setLocaleFn = (_this$appHelper = _this.appHelper) === null || _this$appHelper === void 0 ? void 0 : (_this$appHelper$utils = _this$appHelper.utils) === null || _this$appHelper$utils === void 0 ? void 0 : (_this$appHelper$utils2 = _this$appHelper$utils.i18n) === null || _this$appHelper$utils2 === void 0 ? void 0 : _this$appHelper$utils2.setLocale;
+          if (!setLocaleFn || typeof setLocaleFn !== 'function') {
+            _logger["default"].warn('initI18nAPIs Failed, i18n only works when appHelper.utils.i18n.setLocale() exists');
+            return undefined;
+          }
+          return setLocaleFn(loc);
+        };
+      };
+      /**
+       * write props.__schema.css to document as a style element,
+       * which will be added once and only once.
+       * @PRIVATE
+       */
+      _this.__writeCss = function (props) {
+        var css = (0, _utils.getValue)(props.__schema, 'css', '');
+        _this.__debug('create this.styleElement with css', css);
+        var style = _this.__styleElement;
+        if (!_this.__styleElement) {
+          style = document.createElement('style');
+          style.type = 'text/css';
+          style.setAttribute('from', 'style-sheet');
+          var head = document.head || document.getElementsByTagName('head')[0];
+          head.appendChild(style);
+          _this.__styleElement = style;
+          _this.__debug('this.styleElement is created', _this.__styleElement);
+        }
+        if (style.innerHTML === css) {
+          return;
+        }
+        style.innerHTML = css;
+      };
+      _this.__render = function () {
+        var schema = _this.props.__schema;
+        _this.__executeLifeCycleMethod('render');
+        _this.__writeCss(_this.props);
+        var engine = _this.context.engine;
+        if (engine) {
+          engine.props.onCompGetCtx(schema, _this);
+          // 画布场景才需要每次渲染bind自定义方法
+          if (_this.__designModeIsDesign) {
+            var _this$__dataHelper;
+            _this.__bindCustomMethods(_this.props);
+            _this.dataSourceMap = (_this$__dataHelper = _this.__dataHelper) === null || _this$__dataHelper === void 0 ? void 0 : _this$__dataHelper.updateConfig(schema.dataSource);
+          }
+        }
+      };
+      _this.__getRef = function (ref) {
+        var _engine$props;
+        var engine = _this.context.engine;
+        var __schema = _this.props.__schema;
+        ref && (engine === null || engine === void 0 ? void 0 : (_engine$props = engine.props) === null || _engine$props === void 0 ? void 0 : _engine$props.onCompGetRef(__schema, ref));
+        _this.__ref = ref;
+      };
+      _this.__createDom = function () {
+        var _this$props3 = _this.props,
+          __schema = _this$props3.__schema,
+          __ctx = _this$props3.__ctx,
+          _this$props3$__compon = _this$props3.__components,
+          __components = _this$props3$__compon === void 0 ? {} : _this$props3$__compon;
+        // merge defaultProps
+        var scopeProps = (0, _extends2["default"])({}, __schema.defaultProps, _this.props);
+        var scope = {
+          props: scopeProps
+        };
+        scope.__proto__ = __ctx || _this;
+        var _children = getSchemaChildren(__schema);
+        var Comp = __components[__schema.componentName];
+        if (!Comp) {
+          _this.__debug(__schema.componentName + " is invalid!");
+        }
+        var parentNodeInfo = {
+          schema: __schema,
+          Comp: _this.__getHOCWrappedComponent(Comp, __schema, scope)
+        };
+        return _this.__createVirtualDom(_children, scope, parentNodeInfo);
+      };
+      /**
+       * 将模型结构转换成react Element
+       * @param originalSchema schema
+       * @param originalScope scope
+       * @param parentInfo 父组件的信息，包含schema和Comp
+       * @param idx 为循环渲染的循环Index
+       */
+      _this.__createVirtualDom = function (originalSchema, originalScope, parentInfo, idx) {
+        if (idx === void 0) {
+          idx = '';
+        }
+        if (originalSchema === null || originalSchema === undefined) {
+          return null;
+        }
+        var scope = originalScope;
+        var schema = originalSchema;
+        var _ref = _this.context || {},
+          engine = _ref.engine;
+        if (!engine) {
+          _this.__debug('this.context.engine is invalid!');
+          return null;
+        }
+        try {
+          var _schema$props, _this$props$__contain, _this$props$__contain2, _engine$props3, _schema, _schema$__ctx;
+          var _ref2 = _this.props || {},
+            appHelper = _ref2.__appHelper,
+            _ref2$__components = _ref2.__components,
+            components = _ref2$__components === void 0 ? {} : _ref2$__components;
+          if ((0, _lowcodeUtils.isJSExpression)(schema)) {
+            return _this.__parseExpression(schema, scope);
+          }
+          if ((0, _lowcodeUtils.isI18nData)(schema)) {
+            return (0, _utils.parseI18n)(schema, scope);
+          }
+          if ((0, _utils.isJSSlot)(schema)) {
+            return _this.__createVirtualDom(schema.value, scope, parentInfo);
+          }
+          if (typeof schema === 'string') {
+            return schema;
+          }
+          if (typeof schema === 'number' || typeof schema === 'boolean') {
+            return String(schema);
+          }
+          if (Array.isArray(schema)) {
+            if (schema.length === 1) {
+              return _this.__createVirtualDom(schema[0], scope, parentInfo);
+            }
+            return schema.map(function (item, idy) {
+              var _ctx;
+              return _this.__createVirtualDom(item, scope, parentInfo, item !== null && item !== void 0 && (_ctx = item.__ctx) !== null && _ctx !== void 0 && _ctx.lceKey ? '' : String(idy));
+            });
+          }
+
+          // @ts-expect-error 如果直接转换好了，可以返回
+          if (schema.$$typeof) {
+            return schema;
+          }
+          var _children = getSchemaChildren(schema);
+          if (!schema.componentName) {
+            _logger["default"].error('The componentName in the schema is invalid, please check the schema: ', schema);
+            return;
+          }
+          // 解析占位组件
+          if (schema.componentName === 'Fragment' && _children) {
+            var tarChildren = (0, _lowcodeUtils.isJSExpression)(_children) ? _this.__parseExpression(_children, scope) : _children;
+            return _this.__createVirtualDom(tarChildren, scope, parentInfo);
+          }
+          if (schema.componentName === 'Text' && typeof ((_schema$props = schema.props) === null || _schema$props === void 0 ? void 0 : _schema$props.text) === 'string') {
+            var _schema$props2;
+            var text = (_schema$props2 = schema.props) === null || _schema$props2 === void 0 ? void 0 : _schema$props2.text;
+            schema = (0, _extends2["default"])({}, schema);
+            schema.children = [text];
+          }
+          if (!(0, _utils.isSchema)(schema)) {
+            return null;
+          }
+          var Comp = components[schema.componentName] || ((_this$props$__contain = _this.props.__container) === null || _this$props$__contain === void 0 ? void 0 : (_this$props$__contain2 = _this$props$__contain.components) === null || _this$props$__contain2 === void 0 ? void 0 : _this$props$__contain2[schema.componentName]);
+
+          // 容器类组件的上下文通过props传递，避免context传递带来的嵌套问题
+          var otherProps = (0, _utils.isFileSchema)(schema) ? {
+            __schema: schema,
+            __appHelper: appHelper,
+            __components: components
+          } : {};
+          if (!Comp) {
+            var _this$props$__contain3;
+            _logger["default"].error(schema.componentName + " component is not found in components list! component list is:", components || ((_this$props$__contain3 = _this.props.__container) === null || _this$props$__contain3 === void 0 ? void 0 : _this$props$__contain3.components));
+            return engine.createElement(engine.getNotFoundComponent(), {
+              componentName: schema.componentName,
+              componentId: schema.id,
+              enableStrictNotFoundMode: engine.props.enableStrictNotFoundMode,
+              ref: function ref(_ref3) {
+                var _engine$props2;
+                _ref3 && ((_engine$props2 = engine.props) === null || _engine$props2 === void 0 ? void 0 : _engine$props2.onCompGetRef(schema, _ref3));
+              }
+            }, _this.__getSchemaChildrenVirtualDom(schema, scope, Comp));
+          }
+          if (schema.loop != null) {
+            var loop = _this.__parseData(schema.loop, scope);
+            if (Array.isArray(loop) && loop.length === 0) return null;
+            var useLoop = (0, _isUseLoop["default"])(loop, _this.__designModeIsDesign);
+            if (useLoop) {
+              return _this.__createLoopVirtualDom((0, _extends2["default"])({}, schema, {
+                loop: loop
+              }), scope, parentInfo, idx);
+            }
+          }
+          var condition = schema.condition == null ? true : _this.__parseData(schema.condition, scope);
+
+          // DesignMode 为 design 情况下，需要进入 leaf Hoc，进行相关事件注册
+          var displayInHook = _this.__designModeIsDesign;
+          if (!condition && !displayInHook) {
+            return null;
+          }
+          var scopeKey = '';
+          // 判断组件是否需要生成scope，且只生成一次，挂在this.__compScopes上
+          if (Comp.generateScope) {
+            var _schema$props3;
+            var _key = _this.__parseExpression((_schema$props3 = schema.props) === null || _schema$props3 === void 0 ? void 0 : _schema$props3.key, scope);
+            if (_key) {
+              // 如果组件自己设置key则使用组件自己的key
+              scopeKey = _key;
+            } else if (!schema.__ctx) {
+              // 在生产环境schema没有__ctx上下文，需要手动生成一个lceKey
+              schema.__ctx = {
+                lceKey: "lce" + ++scopeIdx
+              };
+              scopeKey = schema.__ctx.lceKey;
+            } else {
+              // 需要判断循环的情况
+              scopeKey = schema.__ctx.lceKey + (idx !== undefined ? "_" + idx : '');
+            }
+            if (!_this.__compScopes[scopeKey]) {
+              _this.__compScopes[scopeKey] = Comp.generateScope(_this, schema);
+            }
+          }
+          // 如果组件有设置scope，需要为组件生成一个新的scope上下文
+          if (scopeKey && _this.__compScopes[scopeKey]) {
+            var compSelf = (0, _extends2["default"])({}, _this.__compScopes[scopeKey]);
+            compSelf.__proto__ = scope;
+            scope = compSelf;
+          }
+          if ((_engine$props3 = engine.props) !== null && _engine$props3 !== void 0 && _engine$props3.designMode) {
+            otherProps.__designMode = engine.props.designMode;
+          }
+          if (_this.__designModeIsDesign) {
+            otherProps.__tag = Math.random();
+          }
+          var componentInfo = {};
+          var props = _this.__getComponentProps(schema, scope, Comp, (0, _extends2["default"])({}, componentInfo, {
+            props: (0, _utils.transformArrayToMap)(componentInfo.props, 'name')
+          })) || {};
+          _this.__componentHOCs.forEach(function (ComponentConstruct) {
+            Comp = ComponentConstruct(Comp, {
+              schema: schema,
+              componentInfo: componentInfo,
+              baseRenderer: _this,
+              scope: scope
+            });
+          });
+          otherProps.ref = function (ref) {
+            var _engine$props4;
+            _this.$(props.fieldId || props.ref, ref); // 收集ref
+            var refProps = props.ref;
+            if (refProps && typeof refProps === 'string') {
+              _this[refProps] = ref;
+            }
+            ref && ((_engine$props4 = engine.props) === null || _engine$props4 === void 0 ? void 0 : _engine$props4.onCompGetRef(schema, ref));
+          };
+
+          // scope需要传入到组件上
+          if (scopeKey && _this.__compScopes[scopeKey]) {
+            props.__scope = _this.__compScopes[scopeKey];
+          }
+          if ((_schema = schema) !== null && _schema !== void 0 && (_schema$__ctx = _schema.__ctx) !== null && _schema$__ctx !== void 0 && _schema$__ctx.lceKey) {
+            if (!(0, _utils.isFileSchema)(schema)) {
+              var _engine$props5;
+              (_engine$props5 = engine.props) === null || _engine$props5 === void 0 ? void 0 : _engine$props5.onCompGetCtx(schema, scope);
+            }
+            props.key = props.key || schema.__ctx.lceKey + "_" + (schema.__ctx.idx || 0) + "_" + (idx !== undefined ? idx : '');
+          } else if ((typeof idx === 'number' || typeof idx === 'string') && !props.key) {
+            // 仅当循环场景走这里
+            props.key = idx;
+          }
+          props.__id = schema.id;
+          if (!props.key) {
+            props.key = props.__id;
+          }
+          var child = _this.__getSchemaChildrenVirtualDom(schema, scope, Comp, condition);
+          var renderComp = function renderComp(innerProps) {
+            return engine.createElement(Comp, innerProps, child);
+          };
+          // 设计模式下的特殊处理
+          if (engine && [DESIGN_MODE.EXTEND, DESIGN_MODE.BORDER].includes(engine.props.designMode)) {
+            // 对于overlay,dialog等组件为了使其在设计模式下显示，外层需要增加一个div容器
+            if (OVERLAY_LIST.includes(schema.componentName)) {
+              var ref = otherProps.ref,
+                overlayProps = (0, _objectWithoutPropertiesLoose2["default"])(otherProps, _excluded);
+              return createElement(Div, {
+                ref: ref,
+                __designMode: engine.props.designMode
+              }, renderComp((0, _extends2["default"])({}, props, overlayProps)));
+            }
+            // 虚拟dom显示
+            if (componentInfo !== null && componentInfo !== void 0 && componentInfo.parentRule) {
+              var parentList = componentInfo.parentRule.split(',');
+              var _parentInfo$schema = parentInfo.schema,
+                parentSchema = _parentInfo$schema === void 0 ? {
+                  componentName: ''
+                } : _parentInfo$schema,
+                parentComp = parentInfo.Comp;
+              if (!parentList.includes(parentSchema.componentName) || parentComp !== components[parentSchema.componentName]) {
+                props.__componentName = schema.componentName;
+                Comp = VisualDom;
+              } else {
+                // 若虚拟dom在正常的渲染上下文中，就不显示设计模式了
+                props.__disableDesignMode = true;
+              }
+            }
+          }
+          return renderComp((0, _extends2["default"])({}, props, otherProps, {
+            __inner__: {
+              hidden: schema.hidden,
+              condition: condition
+            }
+          }));
+        } catch (e) {
+          return engine.createElement(engine.getFaultComponent(), {
+            error: e,
+            schema: schema,
+            self: scope,
+            parentInfo: parentInfo,
+            idx: idx
+          });
+        }
+      };
+      _this.__getSchemaChildrenVirtualDom = function (schema, scope, Comp, condition) {
+        if (condition === void 0) {
+          condition = true;
+        }
+        var children = condition ? getSchemaChildren(schema) : null;
+
+        // @todo 补完这里的 Element 定义 @承虎
+        var result = [];
+        if (children) {
+          if (!Array.isArray(children)) {
+            children = [children];
+          }
+          children.forEach(function (child) {
+            var childVirtualDom = _this.__createVirtualDom((0, _lowcodeUtils.isJSExpression)(child) ? _this.__parseExpression(child, scope) : child, scope, {
+              schema: schema,
+              Comp: Comp
+            });
+            result.push(childVirtualDom);
+          });
+        }
+        if (result && result.length > 0) {
+          return result;
+        }
+        return null;
+      };
+      _this.__getComponentProps = function (schema, scope, Comp, componentInfo) {
+        if (!schema) {
+          return {};
+        }
+        return _this.__parseProps(schema === null || schema === void 0 ? void 0 : schema.props, scope, '', {
+          schema: schema,
+          Comp: Comp,
+          componentInfo: (0, _extends2["default"])({}, componentInfo || {}, {
+            props: (0, _utils.transformArrayToMap)((componentInfo || {}).props, 'name')
+          })
+        }) || {};
+      };
+      _this.__createLoopVirtualDom = function (schema, scope, parentInfo, idx) {
+        if ((0, _utils.isFileSchema)(schema)) {
+          _logger["default"].warn('file type not support Loop');
+          return null;
+        }
+        if (!Array.isArray(schema.loop)) {
+          return null;
+        }
+        var itemArg = schema.loopArgs && schema.loopArgs[0] || DEFAULT_LOOP_ARG_ITEM;
+        var indexArg = schema.loopArgs && schema.loopArgs[1] || DEFAULT_LOOP_ARG_INDEX;
+        var loop = schema.loop;
+        return loop.map(function (item, i) {
+          var _loopSelf, _schema$props4, _schema$props5;
+          var loopSelf = (_loopSelf = {}, _loopSelf[itemArg] = item, _loopSelf[indexArg] = i, _loopSelf);
+          loopSelf.__proto__ = scope;
+          return _this.__createVirtualDom((0, _extends2["default"])({}, schema, {
+            loop: undefined,
+            props: (0, _extends2["default"])({}, schema.props, {
+              // 循环下 key 不能为常量，这样会造成 key 值重复，渲染异常
+              key: (0, _lowcodeUtils.isJSExpression)((_schema$props4 = schema.props) === null || _schema$props4 === void 0 ? void 0 : _schema$props4.key) ? (_schema$props5 = schema.props) === null || _schema$props5 === void 0 ? void 0 : _schema$props5.key : null
+            })
+          }), loopSelf, parentInfo, idx ? idx + "_" + i : i);
+        });
+      };
+      _this.__parseProps = function (originalProps, scope, path, info) {
+        var _propInfo$extra;
+        var props = originalProps;
+        var schema = info.schema,
+          Comp = info.Comp,
+          _info$componentInfo = info.componentInfo,
+          componentInfo = _info$componentInfo === void 0 ? {} : _info$componentInfo;
+        var propInfo = (0, _utils.getValue)(componentInfo.props, path);
+        // FIXME: 将这行逻辑外置，解耦，线上环境不要验证参数，调试环境可以有，通过传参自定义
+        var propType = propInfo === null || propInfo === void 0 ? void 0 : (_propInfo$extra = propInfo.extra) === null || _propInfo$extra === void 0 ? void 0 : _propInfo$extra.propType;
+        var checkProps = function checkProps(value) {
+          if (!propType) {
+            return value;
+          }
+          return (0, _lowcodeUtils.checkPropTypes)(value, path, propType, componentInfo.name) ? value : undefined;
+        };
+        var parseReactNode = function parseReactNode(data, params) {
+          if ((0, _utils.isEmpty)(params)) {
+            var virtualDom = _this.__createVirtualDom(data, scope, {
+              schema: schema,
+              Comp: Comp
+            });
+            return checkProps(virtualDom);
+          }
+          return checkProps(function () {
+            for (var _len = arguments.length, argValues = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {
+              argValues[_key2] = arguments[_key2];
+            }
+            var args = {};
+            if (Array.isArray(params) && params.length) {
+              params.forEach(function (item, idx) {
+                if (typeof item === 'string') {
+                  args[item] = argValues[idx];
+                } else if (item && typeof item === 'object') {
+                  args[item.name] = argValues[idx];
+                }
+              });
+            }
+            args.__proto__ = scope;
+            return scope.__createVirtualDom(data, args, {
+              schema: schema,
+              Comp: Comp
+            });
+          });
+        };
+        if ((0, _lowcodeUtils.isJSExpression)(props)) {
+          props = _this.__parseExpression(props, scope);
+          // 只有当变量解析出来为模型结构的时候才会继续解析
+          if (!(0, _utils.isSchema)(props) && !(0, _utils.isJSSlot)(props)) {
+            return checkProps(props);
+          }
+        }
+        var handleI18nData = function handleI18nData(innerProps) {
+          return innerProps[innerProps.use || _this.getLocale && _this.getLocale() || 'zh-CN'];
+        };
+
+        // @LEGACY 兼容老平台设计态 i18n 数据
+        if ((0, _lowcodeUtils.isI18nData)(props)) {
+          var i18nProp = handleI18nData(props);
+          if (i18nProp) {
+            props = i18nProp;
+          } else {
+            return (0, _utils.parseI18n)(props, scope);
+          }
+        }
+
+        // @LEGACY 兼容老平台设计态的变量绑定
+        if ((0, _utils.isVariable)(props)) {
+          props = props.value;
+          if ((0, _lowcodeUtils.isI18nData)(props)) {
+            props = handleI18nData(props);
+          }
+        }
+        if ((0, _lowcodeUtils.isJSFunction)(props)) {
+          props = (0, _utils.transformStringToFunction)(props.value);
+        }
+        if ((0, _utils.isJSSlot)(props)) {
+          var _props3 = props,
+            params = _props3.params,
+            value = _props3.value;
+          if (!(0, _utils.isSchema)(value) || (0, _utils.isEmpty)(value)) {
+            return undefined;
+          }
+          return parseReactNode(value, params);
+        }
+
+        // 兼容通过componentInfo判断的情况
+        if ((0, _utils.isSchema)(props)) {
+          var _propInfo$props, _propInfo$props2, _propInfo$props2$type, _propInfo$props3, _propInfo$props3$reac;
+          var isReactNodeFunction = !!((propInfo === null || propInfo === void 0 ? void 0 : propInfo.type) === 'ReactNode' && (propInfo === null || propInfo === void 0 ? void 0 : (_propInfo$props = propInfo.props) === null || _propInfo$props === void 0 ? void 0 : _propInfo$props.type) === 'function');
+          var isMixinReactNodeFunction = !!((propInfo === null || propInfo === void 0 ? void 0 : propInfo.type) === 'Mixin' && (propInfo === null || propInfo === void 0 ? void 0 : (_propInfo$props2 = propInfo.props) === null || _propInfo$props2 === void 0 ? void 0 : (_propInfo$props2$type = _propInfo$props2.types) === null || _propInfo$props2$type === void 0 ? void 0 : _propInfo$props2$type.indexOf('ReactNode')) > -1 && (propInfo === null || propInfo === void 0 ? void 0 : (_propInfo$props3 = propInfo.props) === null || _propInfo$props3 === void 0 ? void 0 : (_propInfo$props3$reac = _propInfo$props3.reactNodeProps) === null || _propInfo$props3$reac === void 0 ? void 0 : _propInfo$props3$reac.type) === 'function');
+          var _params = null;
+          if (isReactNodeFunction) {
+            var _propInfo$props4;
+            _params = propInfo === null || propInfo === void 0 ? void 0 : (_propInfo$props4 = propInfo.props) === null || _propInfo$props4 === void 0 ? void 0 : _propInfo$props4.params;
+          } else if (isMixinReactNodeFunction) {
+            var _propInfo$props5, _propInfo$props5$reac;
+            _params = propInfo === null || propInfo === void 0 ? void 0 : (_propInfo$props5 = propInfo.props) === null || _propInfo$props5 === void 0 ? void 0 : (_propInfo$props5$reac = _propInfo$props5.reactNodeProps) === null || _propInfo$props5$reac === void 0 ? void 0 : _propInfo$props5$reac.params;
+          }
+          return parseReactNode(props, _params);
+        }
+        if (Array.isArray(props)) {
+          return checkProps(props.map(function (item, idx) {
+            return _this.__parseProps(item, scope, path ? path + "." + idx : "" + idx, info);
+          }));
+        }
+        if (typeof props === 'function') {
+          return checkProps(props.bind(scope));
+        }
+        if (props && typeof props === 'object') {
+          if (props.$$typeof) {
+            return checkProps(props);
+          }
+          var res = {};
+          (0, _utils.forEach)(props, function (val, key) {
+            if (key.startsWith('__')) {
+              res[key] = val;
+              return;
+            }
+            res[key] = _this.__parseProps(val, scope, path ? path + "." + key : key, info);
+          });
+          return checkProps(res);
+        }
+        return checkProps(props);
+      };
+      _this.__debug = function () {
+        _logger["default"].debug.apply(_logger["default"], arguments);
+      };
+      _this.__renderContextProvider = function (customProps, children) {
+        return createElement(AppContext.Provider, {
+          value: (0, _extends2["default"])({}, _this.context, {
+            blockContext: _this
+          }, customProps || {}),
+          children: children || _this.__createDom()
+        });
+      };
+      _this.__renderContextConsumer = function (children) {
+        return createElement(AppContext.Consumer, {}, children);
+      };
+      _this.__checkSchema = function (schema, originalExtraComponents) {
+        var _schema$componentName;
+        if (originalExtraComponents === void 0) {
+          originalExtraComponents = [];
+        }
+        var extraComponents = originalExtraComponents;
+        if (typeof extraComponents === 'string') {
+          extraComponents = [extraComponents];
+        }
+        var builtin = (0, _utils.capitalizeFirstLetter)(_this.__namespace);
+        var componentNames = [builtin].concat(extraComponents);
+        return !(0, _utils.isSchema)(schema) || !componentNames.includes((_schema$componentName = schema === null || schema === void 0 ? void 0 : schema.componentName) !== null && _schema$componentName !== void 0 ? _schema$componentName : '');
+      };
+      _this.context = context;
+      _this.__parseExpression = function (str, self) {
+        return (0, _utils.parseExpression)({
+          str: str,
+          self: self,
+          thisRequired: _props2 === null || _props2 === void 0 ? void 0 : _props2.thisRequiredInJSE,
+          logScope: _props2.componentName
+        });
+      };
+      _this.__beforeInit(_props2);
+      _this.__init(_props2);
+      _this.__afterInit(_props2);
+      _this.__debug("constructor - " + (_props2 === null || _props2 === void 0 ? void 0 : (_props2$__schema = _props2.__schema) === null || _props2$__schema === void 0 ? void 0 : _props2$__schema.fileName));
+      return _this;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    (0, _inheritsLoose2["default"])(BaseRenderer, _Component);
+    var _proto = BaseRenderer.prototype;
+    _proto.__beforeInit = function __beforeInit(_props) {};
+    _proto.__init = function __init(props) {
+      this.__compScopes = {};
+      this.__instanceMap = {};
+      this.__bindCustomMethods(props);
+      this.__initI18nAPIs();
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ;
+    _proto.__afterInit = function __afterInit(_props) {};
+    BaseRenderer.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+      var result = executeLifeCycleMethod(this, props === null || props === void 0 ? void 0 : props.__schema, 'getDerivedStateFromProps', [props, state], props.thisRequiredInJSE);
+      return result === undefined ? null : result;
+    };
+    _proto.getSnapshotBeforeUpdate = /*#__PURE__*/function () {
+      var _getSnapshotBeforeUpdate = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        var _this$props4, _this$props4$__schema;
+        var _len2,
+          args,
+          _key3,
+          _args = arguments;
+        return _regenerator["default"].wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              for (_len2 = _args.length, args = new Array(_len2), _key3 = 0; _key3 < _len2; _key3++) {
+                args[_key3] = _args[_key3];
+              }
+              this.__executeLifeCycleMethod('getSnapshotBeforeUpdate', args);
+              this.__debug("getSnapshotBeforeUpdate - " + ((_this$props4 = this.props) === null || _this$props4 === void 0 ? void 0 : (_this$props4$__schema = _this$props4.__schema) === null || _this$props4$__schema === void 0 ? void 0 : _this$props4$__schema.fileName));
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function getSnapshotBeforeUpdate() {
+        return _getSnapshotBeforeUpdate.apply(this, arguments);
+      }
+      return getSnapshotBeforeUpdate;
+    }();
+    _proto.componentDidMount = /*#__PURE__*/function () {
+      var _componentDidMount = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+        var _this$props5, _this$props5$__schema;
+        var _len3,
+          args,
+          _key4,
+          _args2 = arguments;
+        return _regenerator["default"].wrap(function (_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              this.reloadDataSource();
+              for (_len3 = _args2.length, args = new Array(_len3), _key4 = 0; _key4 < _len3; _key4++) {
+                args[_key4] = _args2[_key4];
+              }
+              this.__executeLifeCycleMethod('componentDidMount', args);
+              this.__debug("componentDidMount - " + ((_this$props5 = this.props) === null || _this$props5 === void 0 ? void 0 : (_this$props5$__schema = _this$props5.__schema) === null || _this$props5$__schema === void 0 ? void 0 : _this$props5$__schema.fileName));
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function componentDidMount() {
+        return _componentDidMount.apply(this, arguments);
+      }
+      return componentDidMount;
+    }();
+    _proto.componentDidUpdate = /*#__PURE__*/function () {
+      var _componentDidUpdate = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+        var _len4,
+          args,
+          _key5,
+          _args3 = arguments;
+        return _regenerator["default"].wrap(function (_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              for (_len4 = _args3.length, args = new Array(_len4), _key5 = 0; _key5 < _len4; _key5++) {
+                args[_key5] = _args3[_key5];
+              }
+              this.__executeLifeCycleMethod('componentDidUpdate', args);
+              this.__debug("componentDidUpdate - " + this.props.__schema.fileName);
+            case 1:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
+      }));
+      function componentDidUpdate() {
+        return _componentDidUpdate.apply(this, arguments);
+      }
+      return componentDidUpdate;
+    }();
+    _proto.componentWillUnmount = /*#__PURE__*/function () {
+      var _componentWillUnmount = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+        var _this$props6, _this$props6$__schema;
+        var _len5,
+          args,
+          _key6,
+          _args4 = arguments;
+        return _regenerator["default"].wrap(function (_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              for (_len5 = _args4.length, args = new Array(_len5), _key6 = 0; _key6 < _len5; _key6++) {
+                args[_key6] = _args4[_key6];
+              }
+              this.__executeLifeCycleMethod('componentWillUnmount', args);
+              this.__debug("componentWillUnmount - " + ((_this$props6 = this.props) === null || _this$props6 === void 0 ? void 0 : (_this$props6$__schema = _this$props6.__schema) === null || _this$props6$__schema === void 0 ? void 0 : _this$props6$__schema.fileName));
+            case 1:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4, this);
+      }));
+      function componentWillUnmount() {
+        return _componentWillUnmount.apply(this, arguments);
+      }
+      return componentWillUnmount;
+    }();
+    _proto.componentDidCatch = /*#__PURE__*/function () {
+      var _componentDidCatch = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+        var _len6,
+          args,
+          _key7,
+          _args5 = arguments;
+        return _regenerator["default"].wrap(function (_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              for (_len6 = _args5.length, args = new Array(_len6), _key7 = 0; _key7 < _len6; _key7++) {
+                args[_key7] = _args5[_key7];
+              }
+              this.__executeLifeCycleMethod('componentDidCatch', args);
+              _logger["default"].warn(args);
+            case 1:
+            case "end":
+              return _context5.stop();
+          }
+        }, _callee5, this);
+      }));
+      function componentDidCatch() {
+        return _componentDidCatch.apply(this, arguments);
+      }
+      return componentDidCatch;
+    }();
+    _proto.shouldComponentUpdate = function shouldComponentUpdate() {
+      var _this$props$getSchema, _this$props7, _this$props$__contain4;
+      if ((_this$props$getSchema = (_this$props7 = this.props).getSchemaChangedSymbol) !== null && _this$props$getSchema !== void 0 && _this$props$getSchema.call(_this$props7) && (_this$props$__contain4 = this.props.__container) !== null && _this$props$__contain4 !== void 0 && _this$props$__contain4.rerender) {
+        var _this$props$__contain5;
+        (_this$props$__contain5 = this.props.__container) === null || _this$props$__contain5 === void 0 ? void 0 : _this$props$__contain5.rerender();
+        return false;
+      }
+      return true;
+    };
+    _proto.forceUpdate = function forceUpdate() {
+      if (this.shouldComponentUpdate()) {
+        _Component.prototype.forceUpdate.call(this);
+      }
+    };
+    _proto.$ = function $(filedId, instance) {
+      this.__instanceMap = this.__instanceMap || {};
+      if (!filedId || typeof filedId !== 'string') {
+        return this.__instanceMap;
+      }
+      if (instance) {
+        this.__instanceMap[filedId] = instance;
+      }
+      return this.__instanceMap[filedId];
+    };
+    _proto.__getHOCWrappedComponent = function __getHOCWrappedComponent(OriginalComp, schema, scope) {
+      var _this2 = this;
+      var Comp = OriginalComp;
+      this.__componentHOCs.forEach(function (ComponentConstruct) {
+        Comp = ComponentConstruct(Comp || Div, {
+          schema: schema,
+          componentInfo: {},
+          baseRenderer: _this2,
+          scope: scope
+        });
+      });
+      return Comp;
+    };
+    _proto.__renderComp = function __renderComp(OriginalComp, ctxProps) {
+      var Comp = OriginalComp;
+      var _this$props8 = this.props,
+        __schema = _this$props8.__schema,
+        __ctx = _this$props8.__ctx;
+      var scope = {};
+      scope.__proto__ = __ctx || this;
+      Comp = this.__getHOCWrappedComponent(Comp, __schema, scope);
+      var data = this.__parseProps(__schema === null || __schema === void 0 ? void 0 : __schema.props, scope, '', {
+        schema: __schema,
+        Comp: Comp,
+        componentInfo: {}
+      });
+      var className = data.className;
+      var otherProps = {};
+      var _ref4 = this.context || {},
+        engine = _ref4.engine;
+      if (!engine) {
+        return null;
+      }
+      if (this.__designModeIsDesign) {
+        otherProps.__tag = Math.random();
+      }
+      var child = engine.createElement(Comp, (0, _extends2["default"])({}, data, this.props, {
+        ref: this.__getRef,
+        className: (0, _classnames["default"])((0, _utils.getFileCssName)(__schema === null || __schema === void 0 ? void 0 : __schema.fileName), className, this.props.className),
+        __id: __schema === null || __schema === void 0 ? void 0 : __schema.id
+      }, otherProps), this.__createDom());
+      return this.__renderContextProvider(ctxProps, child);
+    };
+    _proto.__renderContent = function __renderContent(children) {
+      var __schema = this.props.__schema;
+      var parsedProps = this.__parseData(__schema.props);
+      var className = (0, _classnames["default"])("lce-" + this.__namespace, (0, _utils.getFileCssName)(__schema.fileName), parsedProps.className, this.props.className);
+      var style = (0, _extends2["default"])({}, parsedProps.style || {}, typeof this.props.style === 'object' ? this.props.style : {});
+      var id = this.props.id || parsedProps.id;
+      return createElement('div', {
+        ref: this.__getRef,
+        className: className,
+        id: id,
+        style: style
+      }, children);
+    };
+    _proto.render = function render() {
+      return null;
+    };
+    return (0, _createClass2["default"])(BaseRenderer, [{
+      key: "__componentHOCs",
+      get:
+      /**
+       * get Component HOCs
+       *
+       * @readonly
+       * @type {IComponentConstruct[]}
+       */
+      function get() {
+        if (this.__designModeIsDesign) {
+          return [_leaf.leafWrapper, _hoc.compWrapper];
+        }
+        return [_hoc.compWrapper];
+      }
+    }, {
+      key: "__designModeIsDesign",
+      get: function get() {
+        var _engine$props6;
+        var _ref5 = this.context || {},
+          engine = _ref5.engine;
+        return (engine === null || engine === void 0 ? void 0 : (_engine$props6 = engine.props) === null || _engine$props6 === void 0 ? void 0 : _engine$props6.designMode) === 'design';
+      }
+    }, {
+      key: "appHelper",
+      get: function get() {
+        return this.props.__appHelper;
+      }
+    }, {
+      key: "requestHandlersMap",
+      get: function get() {
+        var _this$appHelper2;
+        return (_this$appHelper2 = this.appHelper) === null || _this$appHelper2 === void 0 ? void 0 : _this$appHelper2.requestHandlersMap;
+      }
+    }, {
+      key: "utils",
+      get: function get() {
+        var _this$appHelper3;
+        return (_this$appHelper3 = this.appHelper) === null || _this$appHelper3 === void 0 ? void 0 : _this$appHelper3.utils;
+      }
+    }, {
+      key: "constants",
+      get: function get() {
+        var _this$appHelper4;
+        return (_this$appHelper4 = this.appHelper) === null || _this$appHelper4 === void 0 ? void 0 : _this$appHelper4.constants;
+      }
+    }, {
+      key: "history",
+      get: function get() {
+        var _this$appHelper5;
+        return (_this$appHelper5 = this.appHelper) === null || _this$appHelper5 === void 0 ? void 0 : _this$appHelper5.history;
+      }
+    }, {
+      key: "location",
+      get: function get() {
+        var _this$appHelper6;
+        return (_this$appHelper6 = this.appHelper) === null || _this$appHelper6 === void 0 ? void 0 : _this$appHelper6.location;
+      }
+    }, {
+      key: "match",
+      get: function get() {
+        var _this$appHelper7;
+        return (_this$appHelper7 = this.appHelper) === null || _this$appHelper7 === void 0 ? void 0 : _this$appHelper7.match;
+      }
+    }]);
+  }(Component), _BaseRenderer.displayName = 'BaseRenderer', _BaseRenderer.defaultProps = {
+    __schema: {}
+  }, _BaseRenderer.contextType = AppContext, _BaseRenderer;
+}