@cuipengyu5/bling-renderer-core 0.0.1

package/es/hoc/leaf.js

@@ -0,0 +1,521 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/extends";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+var _excluded = ["visible"],
+  _excluded2 = ["forwardedRef"];
+import { GlobalEvent, IPublicEnumTransformStage } from '@alilc/lowcode-types';
+import { isReactComponent, cloneEnumerableProperty } from '@alilc/lowcode-utils';
+import { debounce } from '../utils/common';
+import adapter from '../adapter';
+import logger from '../utils/logger';
+var RerenderType = /*#__PURE__*/function (RerenderType) {
+  RerenderType["All"] = "All";
+  RerenderType["ChildChanged"] = "ChildChanged";
+  RerenderType["PropsChanged"] = "PropsChanged";
+  RerenderType["VisibleChanged"] = "VisibleChanged";
+  RerenderType["MinimalRenderUnit"] = "MinimalRenderUnit";
+  return RerenderType;
+}(RerenderType || {}); // 缓存 Leaf 层组件，防止重新渲染问题
+var LeafCache = function LeafCache(documentId, device) {
+  this.documentId = documentId;
+  this.device = device;
+  /** 组件缓存 */
+  this.component = new Map();
+  /**
+   * 状态缓存，场景：属性变化后，改组件被销毁，state 为空，没有展示修改后的属性
+   */
+  this.state = new Map();
+  /**
+   * 订阅事件缓存，导致 rerender 的订阅事件
+   */
+  this.event = new Map();
+  this.ref = new Map();
+};
+var cache;
+
+/** 部分没有渲染的 node 节点进行兜底处理 or 渲染方式没有渲染 LeafWrapper */
+function initRerenderEvent(_ref) {
+  var _cache$event$get, _cache$event$get2, _leaf$onPropChange, _leaf$onChildrenChang, _leaf$onVisibleChange;
+  var schema = _ref.schema,
+    __debug = _ref.__debug,
+    container = _ref.container,
+    getNode = _ref.getNode;
+  var leaf = getNode === null || getNode === void 0 ? void 0 : getNode(schema.id);
+  if (!leaf || (_cache$event$get = cache.event.get(schema.id)) !== null && _cache$event$get !== void 0 && _cache$event$get.clear || leaf === cache.event.get(schema.id)) {
+    return;
+  }
+  (_cache$event$get2 = cache.event.get(schema.id)) === null || _cache$event$get2 === void 0 ? void 0 : _cache$event$get2.dispose.forEach(function (disposeFn) {
+    return disposeFn && disposeFn();
+  });
+  var debounceRerender = debounce(function () {
+    container.rerender();
+  }, 20);
+  cache.event.set(schema.id, {
+    clear: false,
+    leaf: leaf,
+    dispose: [leaf === null || leaf === void 0 ? void 0 : (_leaf$onPropChange = leaf.onPropChange) === null || _leaf$onPropChange === void 0 ? void 0 : _leaf$onPropChange.call(leaf, function () {
+      if (!container.autoRepaintNode) {
+        return;
+      }
+      __debug(schema.componentName + "[" + schema.id + "] leaf not render in SimulatorRendererView, leaf onPropsChange make rerender");
+      debounceRerender();
+    }), leaf === null || leaf === void 0 ? void 0 : (_leaf$onChildrenChang = leaf.onChildrenChange) === null || _leaf$onChildrenChang === void 0 ? void 0 : _leaf$onChildrenChang.call(leaf, function () {
+      if (!container.autoRepaintNode) {
+        return;
+      }
+      __debug(schema.componentName + "[" + schema.id + "] leaf not render in SimulatorRendererView, leaf onChildrenChange make rerender");
+      debounceRerender();
+    }), leaf === null || leaf === void 0 ? void 0 : (_leaf$onVisibleChange = leaf.onVisibleChange) === null || _leaf$onVisibleChange === void 0 ? void 0 : _leaf$onVisibleChange.call(leaf, function () {
+      if (!container.autoRepaintNode) {
+        return;
+      }
+      __debug(schema.componentName + "[" + schema.id + "] leaf not render in SimulatorRendererView, leaf onVisibleChange make rerender");
+      debounceRerender();
+    })]
+  });
+}
+
+/** 渲染的 node 节点全局注册事件清除 */
+function clearRerenderEvent(id) {
+  var _cache$event$get3, _cache$event$get4, _cache$event$get4$dis;
+  if ((_cache$event$get3 = cache.event.get(id)) !== null && _cache$event$get3 !== void 0 && _cache$event$get3.clear) {
+    return;
+  }
+  (_cache$event$get4 = cache.event.get(id)) === null || _cache$event$get4 === void 0 ? void 0 : (_cache$event$get4$dis = _cache$event$get4.dispose) === null || _cache$event$get4$dis === void 0 ? void 0 : _cache$event$get4$dis.forEach(function (disposeFn) {
+    return disposeFn && disposeFn();
+  });
+  cache.event.set(id, {
+    clear: true,
+    dispose: []
+  });
+}
+
+// 给每个组件包裹一个 HOC Leaf，支持组件内部属性变化，自响应渲染
+export function leafWrapper(Comp, _ref2) {
+  var _baseRenderer$props, _baseRenderer$props$d, _baseRenderer$props2, _baseRenderer$props$d2, _baseRenderer$props3, _baseRenderer$props4, _baseRenderer$props5, _baseRenderer$props6, _host$designer;
+  var schema = _ref2.schema,
+    baseRenderer = _ref2.baseRenderer,
+    componentInfo = _ref2.componentInfo,
+    scope = _ref2.scope;
+  var __debug = baseRenderer.__debug,
+    getProps = baseRenderer.__getComponentProps,
+    getChildren = baseRenderer.__getSchemaChildrenVirtualDom,
+    __parseData = baseRenderer.__parseData;
+  var engine = baseRenderer.context.engine;
+  var host = (_baseRenderer$props = baseRenderer.props) === null || _baseRenderer$props === void 0 ? void 0 : _baseRenderer$props.__host;
+  var curDocumentId = (_baseRenderer$props$d = (_baseRenderer$props2 = baseRenderer.props) === null || _baseRenderer$props2 === void 0 ? void 0 : _baseRenderer$props2.documentId) !== null && _baseRenderer$props$d !== void 0 ? _baseRenderer$props$d : '';
+  var curDevice = (_baseRenderer$props$d2 = (_baseRenderer$props3 = baseRenderer.props) === null || _baseRenderer$props3 === void 0 ? void 0 : _baseRenderer$props3.device) !== null && _baseRenderer$props$d2 !== void 0 ? _baseRenderer$props$d2 : '';
+  var getNode = (_baseRenderer$props4 = baseRenderer.props) === null || _baseRenderer$props4 === void 0 ? void 0 : _baseRenderer$props4.getNode;
+  var container = (_baseRenderer$props5 = baseRenderer.props) === null || _baseRenderer$props5 === void 0 ? void 0 : _baseRenderer$props5.__container;
+  var setSchemaChangedSymbol = (_baseRenderer$props6 = baseRenderer.props) === null || _baseRenderer$props6 === void 0 ? void 0 : _baseRenderer$props6.setSchemaChangedSymbol;
+  var editor = host === null || host === void 0 ? void 0 : (_host$designer = host.designer) === null || _host$designer === void 0 ? void 0 : _host$designer.editor;
+  var runtime = adapter.getRuntime();
+  var forwardRef = runtime.forwardRef,
+    createElement = runtime.createElement;
+  var Component = runtime.Component;
+  var componentCacheId = schema.id;
+  if (!cache || curDocumentId && curDocumentId !== cache.documentId || curDevice && curDevice !== cache.device) {
+    var _cache;
+    (_cache = cache) === null || _cache === void 0 ? void 0 : _cache.event.forEach(function (event) {
+      var _event$dispose;
+      (_event$dispose = event.dispose) === null || _event$dispose === void 0 ? void 0 : _event$dispose.forEach(function (disposeFn) {
+        return disposeFn && disposeFn();
+      });
+    });
+    cache = new LeafCache(curDocumentId, curDevice);
+  }
+  if (!isReactComponent(Comp)) {
+    logger.error(schema.componentName + " component may be has errors: ", Comp);
+  }
+  initRerenderEvent({
+    schema: schema,
+    __debug: __debug,
+    container: container,
+    getNode: getNode
+  });
+  if (curDocumentId && cache.component.has(componentCacheId) && cache.component.get(componentCacheId).Comp === Comp) {
+    return cache.component.get(componentCacheId).LeafWrapper;
+  }
+  var LeafHoc = /*#__PURE__*/function (_Component) {
+    function LeafHoc(props, context) {
+      var _this;
+      _this = _Component.call(this, props, context) || this;
+      // 监听以下事件，当变化时更新自己
+      _this.recordInfo = {};
+      _this.curEventLeaf = void 0;
+      _this.disposeFunctions = [];
+      _this.__component_tag = 'leafWrapper';
+      _this.renderUnitInfo = void 0;
+      // 最小渲染单元做防抖处理
+      _this.makeUnitRenderDebounced = debounce(function () {
+        var _this$leaf, _this$leaf$export, _this$leaf2;
+        _this.beforeRender(RerenderType.MinimalRenderUnit);
+        var schema = (_this$leaf = _this.leaf) === null || _this$leaf === void 0 ? void 0 : (_this$leaf$export = _this$leaf["export"]) === null || _this$leaf$export === void 0 ? void 0 : _this$leaf$export.call(_this$leaf, IPublicEnumTransformStage.Render);
+        if (!schema) {
+          return;
+        }
+        var nextProps = getProps(schema, scope, Comp, componentInfo);
+        var children = getChildren(schema, scope, Comp);
+        var nextState = {
+          nodeProps: nextProps,
+          nodeChildren: children,
+          childrenInState: true
+        };
+        if ('children' in nextProps) {
+          nextState.nodeChildren = nextProps.children;
+        }
+        __debug(((_this$leaf2 = _this.leaf) === null || _this$leaf2 === void 0 ? void 0 : _this$leaf2.componentName) + "(" + _this.props.componentId + ") MinimalRenderUnit Render!");
+        _this.setState(nextState);
+      }, 20);
+      _this.recordTime = function () {
+        var _host$designer2, _host$designer2$curre, _host$designer2$curre2, _this$recordInfo$node, _this$leaf3;
+        if (!_this.recordInfo.startTime) {
+          return;
+        }
+        var endTime = Date.now();
+        var nodeCount = host === null || host === void 0 ? void 0 : (_host$designer2 = host.designer) === null || _host$designer2 === void 0 ? void 0 : (_host$designer2$curre = _host$designer2.currentDocument) === null || _host$designer2$curre === void 0 ? void 0 : (_host$designer2$curre2 = _host$designer2$curre.getNodeCount) === null || _host$designer2$curre2 === void 0 ? void 0 : _host$designer2$curre2.call(_host$designer2$curre);
+        var componentName = ((_this$recordInfo$node = _this.recordInfo.node) === null || _this$recordInfo$node === void 0 ? void 0 : _this$recordInfo$node.componentName) || ((_this$leaf3 = _this.leaf) === null || _this$leaf3 === void 0 ? void 0 : _this$leaf3.componentName) || 'UnknownComponent';
+        editor === null || editor === void 0 ? void 0 : editor.eventBus.emit(GlobalEvent.Node.Rerender, {
+          componentName: componentName,
+          time: endTime - _this.recordInfo.startTime,
+          type: _this.recordInfo.type,
+          nodeCount: nodeCount
+        });
+        _this.recordInfo.startTime = null;
+      };
+      _this.makeUnitRender = function () {
+        _this.makeUnitRenderDebounced();
+      };
+      __debug(schema.componentName + "[" + _this.props.componentId + "] leaf render in SimulatorRendererView");
+      clearRerenderEvent(componentCacheId);
+      _this.curEventLeaf = _this.leaf;
+      cache.ref.set(componentCacheId, {
+        makeUnitRender: _this.makeUnitRender
+      });
+      var cacheState = cache.state.get(componentCacheId);
+      if (!cacheState || cacheState.__tag !== props.__tag) {
+        cacheState = _this.getDefaultState(props);
+      }
+      _this.state = cacheState;
+      return _this;
+    }
+    _inheritsLoose(LeafHoc, _Component);
+    var _proto = LeafHoc.prototype;
+    _proto.componentDidUpdate = function componentDidUpdate() {
+      this.recordTime();
+    };
+    _proto.componentDidMount = function componentDidMount() {
+      var _leaf = this.leaf;
+      this.initOnPropsChangeEvent(_leaf);
+      this.initOnChildrenChangeEvent(_leaf);
+      this.initOnVisibleChangeEvent(_leaf);
+      this.recordTime();
+    };
+    _proto.getDefaultState = function getDefaultState(nextProps) {
+      var _this$leaf4, _this$leaf4$export;
+      var _ref3 = nextProps.__inner__ || ((_this$leaf4 = this.leaf) === null || _this$leaf4 === void 0 ? void 0 : (_this$leaf4$export = _this$leaf4["export"]) === null || _this$leaf4$export === void 0 ? void 0 : _this$leaf4$export.call(_this$leaf4, IPublicEnumTransformStage.Render)) || {},
+        _ref3$hidden = _ref3.hidden,
+        hidden = _ref3$hidden === void 0 ? false : _ref3$hidden,
+        _ref3$condition = _ref3.condition,
+        condition = _ref3$condition === void 0 ? true : _ref3$condition;
+      return {
+        nodeChildren: null,
+        childrenInState: false,
+        visible: !hidden,
+        condition: __parseData === null || __parseData === void 0 ? void 0 : __parseData(condition, scope),
+        nodeCacheProps: {},
+        nodeProps: {}
+      };
+    };
+    _proto.setState = function setState(state) {
+      cache.state.set(componentCacheId, _extends({}, this.state, state, {
+        __tag: this.props.__tag
+      }));
+      _Component.prototype.setState.call(this, state);
+    }
+
+    /** 由于内部属性变化，在触发渲染前，会执行该函数 */;
+    _proto.beforeRender = function beforeRender(type, node) {
+      this.recordInfo.startTime = Date.now();
+      this.recordInfo.type = type;
+      this.recordInfo.node = node;
+      setSchemaChangedSymbol === null || setSchemaChangedSymbol === void 0 ? void 0 : setSchemaChangedSymbol(true);
+    };
+    _proto.judgeMiniUnitRender = function judgeMiniUnitRender() {
+      var _this$leaf5;
+      if (!this.renderUnitInfo) {
+        this.getRenderUnitInfo();
+      }
+      var renderUnitInfo = this.renderUnitInfo || {
+        singleRender: true
+      };
+      if (renderUnitInfo.singleRender) {
+        return;
+      }
+      var ref = cache.ref.get(renderUnitInfo.minimalUnitId);
+      if (!ref) {
+        __debug('Cant find minimalRenderUnit ref! This make rerender!');
+        container === null || container === void 0 ? void 0 : container.rerender();
+        return;
+      }
+      __debug(((_this$leaf5 = this.leaf) === null || _this$leaf5 === void 0 ? void 0 : _this$leaf5.componentName) + "(" + this.props.componentId + ") need render, make its minimalRenderUnit " + renderUnitInfo.minimalUnitName + "(" + renderUnitInfo.minimalUnitId + ")");
+      ref.makeUnitRender();
+    };
+    _proto.getRenderUnitInfo = function getRenderUnitInfo(leaf) {
+      if (leaf === void 0) {
+        leaf = this.leaf;
+      }
+      // leaf 在低代码组件中存在 mock 的情况，退出最小渲染单元判断
+      if (!leaf || typeof leaf.isRoot !== 'function') {
+        return;
+      }
+      if (leaf.isRootNode) {
+        this.renderUnitInfo = _extends({
+          singleRender: true
+        }, this.renderUnitInfo || {});
+      }
+      if (leaf.componentMeta.isMinimalRenderUnit) {
+        this.renderUnitInfo = {
+          minimalUnitId: leaf.id,
+          minimalUnitName: leaf.componentName,
+          singleRender: false
+        };
+      }
+      if (leaf.hasLoop()) {
+        var _leaf2, _leaf2$parent, _leaf3, _leaf3$parent;
+        // 含有循环配置的元素，父元素是最小渲染单元
+        this.renderUnitInfo = {
+          minimalUnitId: (_leaf2 = leaf) === null || _leaf2 === void 0 ? void 0 : (_leaf2$parent = _leaf2.parent) === null || _leaf2$parent === void 0 ? void 0 : _leaf2$parent.id,
+          minimalUnitName: (_leaf3 = leaf) === null || _leaf3 === void 0 ? void 0 : (_leaf3$parent = _leaf3.parent) === null || _leaf3$parent === void 0 ? void 0 : _leaf3$parent.componentName,
+          singleRender: false
+        };
+      }
+      if (leaf.parent) {
+        this.getRenderUnitInfo(leaf.parent);
+      }
+    };
+    _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
+      var componentId = nextProps.componentId;
+      if (nextProps.__tag === this.props.__tag) {
+        return null;
+      }
+      var _leaf = getNode === null || getNode === void 0 ? void 0 : getNode(componentId);
+      if (_leaf && this.curEventLeaf && _leaf !== this.curEventLeaf) {
+        this.disposeFunctions.forEach(function (fn) {
+          return fn();
+        });
+        this.disposeFunctions = [];
+        this.initOnChildrenChangeEvent(_leaf);
+        this.initOnPropsChangeEvent(_leaf);
+        this.initOnVisibleChangeEvent(_leaf);
+        this.curEventLeaf = _leaf;
+      }
+      var _this$getDefaultState = this.getDefaultState(nextProps),
+        visible = _this$getDefaultState.visible,
+        resetState = _objectWithoutPropertiesLoose(_this$getDefaultState, _excluded);
+      this.setState(resetState);
+    }
+
+    /** 监听参数变化 */;
+    _proto.initOnPropsChangeEvent = function initOnPropsChangeEvent(leaf) {
+      var _this2 = this,
+        _leaf5,
+        _leaf5$onPropChange;
+      if (leaf === void 0) {
+        leaf = this.leaf;
+      }
+      var handlePropsChange = debounce(function (propChangeInfo) {
+        var _node$export, _leaf4;
+        var key = propChangeInfo.key,
+          _propChangeInfo$newVa = propChangeInfo.newValue,
+          newValue = _propChangeInfo$newVa === void 0 ? null : _propChangeInfo$newVa;
+        var node = leaf;
+        if (key === '___condition___') {
+          var _this2$leaf;
+          var _ref4 = ((_this2$leaf = _this2.leaf) === null || _this2$leaf === void 0 ? void 0 : _this2$leaf["export"](IPublicEnumTransformStage.Render)) || {},
+            _ref4$condition = _ref4.condition,
+            condition = _ref4$condition === void 0 ? true : _ref4$condition;
+          var conditionValue = __parseData === null || __parseData === void 0 ? void 0 : __parseData(condition, scope);
+          __debug("key is ___condition___, change condition value to [" + condition + "]");
+          // 条件表达式改变
+          _this2.setState({
+            condition: conditionValue
+          });
+          return;
+        }
+
+        // 如果循坏条件变化，从根节点重新渲染
+        // 目前多层循坏无法判断需要从哪一层开始渲染，故先粗暴解决
+        if (key === '___loop___') {
+          __debug('key is ___loop___, render a page!');
+          container === null || container === void 0 ? void 0 : container.rerender();
+          // 由于 scope 变化，需要清空缓存，使用新的 scope
+          cache.component["delete"](componentCacheId);
+          return;
+        }
+        _this2.beforeRender(RerenderType.PropsChanged);
+        var state = _this2.state;
+        var nodeCacheProps = state.nodeCacheProps;
+        var nodeProps = getProps(node === null || node === void 0 ? void 0 : (_node$export = node["export"]) === null || _node$export === void 0 ? void 0 : _node$export.call(node, IPublicEnumTransformStage.Render), scope, Comp, componentInfo);
+        if (key && !(key in nodeProps) && key in _this2.props) {
+          // 当 key 在 this.props 中时，且不存在在计算值中，需要用 newValue 覆盖掉 this.props 的取值
+          nodeCacheProps[key] = newValue;
+        }
+        __debug(((_leaf4 = leaf) === null || _leaf4 === void 0 ? void 0 : _leaf4.componentName) + "[" + _this2.props.componentId + "] component trigger onPropsChange!", nodeProps, nodeCacheProps, key, newValue);
+        _this2.setState('children' in nodeProps ? {
+          nodeChildren: nodeProps.children,
+          nodeProps: nodeProps,
+          childrenInState: true,
+          nodeCacheProps: nodeCacheProps
+        } : {
+          nodeProps: nodeProps,
+          nodeCacheProps: nodeCacheProps
+        });
+        _this2.judgeMiniUnitRender();
+      });
+      var dispose = (_leaf5 = leaf) === null || _leaf5 === void 0 ? void 0 : (_leaf5$onPropChange = _leaf5.onPropChange) === null || _leaf5$onPropChange === void 0 ? void 0 : _leaf5$onPropChange.call(_leaf5, function (propChangeInfo) {
+        if (!_this2.autoRepaintNode) {
+          return;
+        }
+        handlePropsChange(propChangeInfo);
+      });
+      dispose && this.disposeFunctions.push(dispose);
+    }
+
+    /**
+     * 监听显隐变化
+     */;
+    _proto.initOnVisibleChangeEvent = function initOnVisibleChangeEvent(leaf) {
+      var _leaf6,
+        _leaf6$onVisibleChang,
+        _this3 = this;
+      if (leaf === void 0) {
+        leaf = this.leaf;
+      }
+      var dispose = (_leaf6 = leaf) === null || _leaf6 === void 0 ? void 0 : (_leaf6$onVisibleChang = _leaf6.onVisibleChange) === null || _leaf6$onVisibleChang === void 0 ? void 0 : _leaf6$onVisibleChang.call(_leaf6, function (flag) {
+        var _leaf7;
+        if (!_this3.autoRepaintNode) {
+          return;
+        }
+        if (_this3.state.visible === flag) {
+          return;
+        }
+        __debug(((_leaf7 = leaf) === null || _leaf7 === void 0 ? void 0 : _leaf7.componentName) + "[" + _this3.props.componentId + "] component trigger onVisibleChange(" + flag + ") event");
+        _this3.beforeRender(RerenderType.VisibleChanged);
+        _this3.setState({
+          visible: flag
+        });
+        _this3.judgeMiniUnitRender();
+      });
+      dispose && this.disposeFunctions.push(dispose);
+    }
+
+    /**
+     * 监听子元素变化（拖拽，删除...）
+     */;
+    _proto.initOnChildrenChangeEvent = function initOnChildrenChangeEvent(leaf) {
+      var _leaf8,
+        _leaf8$onChildrenChan,
+        _this4 = this;
+      if (leaf === void 0) {
+        leaf = this.leaf;
+      }
+      var dispose = (_leaf8 = leaf) === null || _leaf8 === void 0 ? void 0 : (_leaf8$onChildrenChan = _leaf8.onChildrenChange) === null || _leaf8$onChildrenChan === void 0 ? void 0 : _leaf8$onChildrenChan.call(_leaf8, function (param) {
+        var _leaf9, _leaf9$export;
+        if (!_this4.autoRepaintNode) {
+          return;
+        }
+        var _ref5 = param || {},
+          type = _ref5.type,
+          node = _ref5.node;
+        _this4.beforeRender(RerenderType.ChildChanged + "-" + type, node);
+        // TODO: 缓存同级其他元素的 children。
+        // 缓存二级 children Next 查询筛选组件有问题
+        // 缓存一级 children Next Tab 组件有问题
+        var nextChild = getChildren((_leaf9 = leaf) === null || _leaf9 === void 0 ? void 0 : (_leaf9$export = _leaf9["export"]) === null || _leaf9$export === void 0 ? void 0 : _leaf9$export.call(_leaf9, IPublicEnumTransformStage.Render), scope, Comp);
+        __debug(schema.componentName + "[" + _this4.props.componentId + "] component trigger onChildrenChange event", nextChild);
+        _this4.setState({
+          nodeChildren: nextChild,
+          childrenInState: true
+        });
+        _this4.judgeMiniUnitRender();
+      });
+      dispose && this.disposeFunctions.push(dispose);
+    };
+    _proto.componentWillUnmount = function componentWillUnmount() {
+      this.disposeFunctions.forEach(function (fn) {
+        return fn();
+      });
+    };
+    _proto.render = function render() {
+      if (!this.state.visible || !this.state.condition) {
+        return null;
+      }
+      var _this$props = this.props,
+        forwardedRef = _this$props.forwardedRef,
+        rest = _objectWithoutPropertiesLoose(_this$props, _excluded2);
+      var compProps = _extends({}, rest, this.state.nodeCacheProps || {}, this.state.nodeProps || {}, {
+        children: [],
+        __id: this.props.componentId,
+        ref: forwardedRef
+      });
+      delete compProps.__inner__;
+      if (this.hasChildren) {
+        return engine.createElement(Comp, compProps, this.children);
+      }
+      return engine.createElement(Comp, compProps);
+    };
+    return _createClass(LeafHoc, [{
+      key: "autoRepaintNode",
+      get: function get() {
+        return container === null || container === void 0 ? void 0 : container.autoRepaintNode;
+      }
+    }, {
+      key: "hasChildren",
+      get: function get() {
+        if (!this.state.childrenInState) {
+          return 'children' in this.props;
+        }
+        return true;
+      }
+    }, {
+      key: "children",
+      get: function get() {
+        if (this.state.childrenInState) {
+          return this.state.nodeChildren;
+        }
+        if (this.props.children && !Array.isArray(this.props.children)) {
+          return [this.props.children];
+        }
+        if (this.props.children && this.props.children.length) {
+          return this.props.children;
+        }
+        return this.props.children;
+      }
+    }, {
+      key: "leaf",
+      get: function get() {
+        var _this$props$_leaf;
+        if ((_this$props$_leaf = this.props._leaf) !== null && _this$props$_leaf !== void 0 && _this$props$_leaf.isMock) {
+          // 低代码组件作为一个整体更新，其内部的组件不需要监听相关事件
+          return undefined;
+        }
+        return getNode === null || getNode === void 0 ? void 0 : getNode(componentCacheId);
+      }
+    }]);
+  }(Component);
+  LeafHoc.displayName = schema.componentName;
+  var LeafWrapper = forwardRef(function (props, ref) {
+    return createElement(LeafHoc, _extends({}, props, {
+      forwardedRef: ref
+    }));
+  });
+  LeafWrapper = cloneEnumerableProperty(LeafWrapper, Comp);
+  LeafWrapper.displayName = Comp.displayName;
+  cache.component.set(componentCacheId, {
+    LeafWrapper: LeafWrapper,
+    Comp: Comp
+  });
+  return LeafWrapper;
+}

package/es/index.d.ts

@@ -0,0 +1,7 @@
+import adapter from './adapter';
+import contextFactory from './context';
+export { adapter, contextFactory };
+export * from './renderer';
+export * as types from './types';
+export * as utils from './utils';
+export * from './hoc';

package/es/index.js

@@ -0,0 +1,9 @@
+import adapter from './adapter';
+import contextFactory from './context';
+export { adapter, contextFactory };
+export * from './renderer';
+import * as _types from './types';
+export { _types as types };
+import * as _utils from './utils';
+export { _utils as utils };
+export * from './hoc';

package/es/renderer/addon.d.ts

@@ -0,0 +1,2 @@
+import { IBaseRenderComponent } from '../types';
+export default function addonRendererFactory(): IBaseRenderComponent;

package/es/renderer/addon.js

@@ -0,0 +1,107 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import PropTypes from 'prop-types';
+import baseRendererFactory from './base';
+import { isEmpty } from '../utils';
+import logger from '../utils/logger';
+export default function addonRendererFactory() {
+  var _AddonRenderer;
+  var BaseRenderer = baseRendererFactory();
+  return _AddonRenderer = /*#__PURE__*/function (_BaseRenderer) {
+    function AddonRenderer() {
+      var _this;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      _this = _BaseRenderer.call.apply(_BaseRenderer, [this].concat(args)) || this;
+      _this.__namespace = 'addon';
+      _this.addonKey = void 0;
+      _this.appHelper = void 0;
+      _this.open = void 0;
+      _this.close = void 0;
+      return _this;
+    }
+    _inheritsLoose(AddonRenderer, _BaseRenderer);
+    var _proto = AddonRenderer.prototype;
+    _proto.__afterInit = function __afterInit(props) {
+      var _props$config;
+      this.__generateCtx({
+        component: this
+      });
+      var schema = props.__schema || {};
+      this.state = this.__parseData(schema.state || {});
+      if (isEmpty(props.config) || !((_props$config = props.config) !== null && _props$config !== void 0 && _props$config.addonKey)) {
+        logger.warn('lce addon has wrong config');
+        this.setState({
+          __hasError: true
+        });
+        return;
+      }
+      // 注册插件
+      this.addonKey = props.config.addonKey;
+      this.appHelper.addons = this.appHelper.addons || {};
+      this.appHelper.addons[this.addonKey] = this;
+      this.__initDataSource(props);
+      this.open = this.open || function () {};
+      this.close = this.close || function () {};
+      this.__executeLifeCycleMethod('constructor', Array.prototype.slice.call(arguments));
+    };
+    _proto.componentWillUnmount = /*#__PURE__*/function () {
+      var _componentWillUnmount = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var _BaseRenderer$prototy;
+        var config,
+          _args = arguments;
+        return _regeneratorRuntime.wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              (_BaseRenderer$prototy = _BaseRenderer.prototype.componentWillUnmount) === null || _BaseRenderer$prototy === void 0 ? void 0 : _BaseRenderer$prototy.apply(this, Array.prototype.slice.call(_args));
+              // 注销插件
+              config = this.props.config || {};
+              if (config && this.appHelper.addons) {
+                delete this.appHelper.addons[config.addonKey];
+              }
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function componentWillUnmount() {
+        return _componentWillUnmount.apply(this, arguments);
+      }
+      return componentWillUnmount;
+    }();
+    _proto.render = function render() {
+      var __schema = this.props.__schema;
+      if (this.__checkSchema(__schema)) {
+        return '插件 schema 结构异常！';
+      }
+      this.__debug(AddonRenderer.displayName + " render - " + __schema.fileName);
+      this.__generateCtx({
+        component: this
+      });
+      this.__render();
+      return this.__renderContent(this.__renderContextProvider({
+        compContext: this
+      }));
+    };
+    return _createClass(AddonRenderer, [{
+      key: "utils",
+      get: function get() {
+        var _ref = this.context.config || {},
+          _ref$utils = _ref.utils,
+          utils = _ref$utils === void 0 ? {} : _ref$utils;
+        return _extends({}, this.appHelper.utils, utils);
+      }
+    }]);
+  }(BaseRenderer), _AddonRenderer.displayName = 'AddonRenderer', _AddonRenderer.propTypes = {
+    config: PropTypes.object,
+    __schema: PropTypes.object
+  }, _AddonRenderer.defaultProps = {
+    config: {},
+    __schema: {}
+  }, _AddonRenderer;
+}

package/es/renderer/base.d.ts

@@ -0,0 +1,13 @@
+import { IPublicTypeNodeSchema, IPublicTypeNodeData } from '@alilc/lowcode-types';
+import { IBaseRenderComponent } from '../types';
+/**
+ * execute method in schema.lifeCycles with context
+ * @PRIVATE
+ */
+export declare function executeLifeCycleMethod(context: any, schema: IPublicTypeNodeSchema, method: string, args: any, thisRequiredInJSE: boolean | undefined): any;
+/**
+ * get children from a node schema
+ * @PRIVATE
+ */
+export declare function getSchemaChildren(schema: IPublicTypeNodeSchema | undefined): IPublicTypeNodeData | IPublicTypeNodeData[];
+export default function baseRendererFactory(): IBaseRenderComponent;