@easy-editor/react-renderer 0.0.1

package/dist/index.js

@@ -0,0 +1,2113 @@
+import { observer } from 'mobx-react';
+import { createContext, useContext, useMemo, Component, forwardRef, createElement, PureComponent } from 'react';
+import { isSetterConfig, createLogger, isJSExpression, TRANSFORM_STAGE, DESIGNER_EVENT, isJSFunction, logger as logger$1 } from '@easy-editor/core';
+import { debounce, isEmpty, forEach } from 'lodash-es';
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+const SettingRendererContext = /*#__PURE__*/createContext({});
+const useSettingRendererContext = () => {
+  try {
+    return useContext(SettingRendererContext);
+  } catch (error) {
+    console.warn('useSettingRendererContext must be used within a SettingRendererContextProvider');
+  }
+  return {};
+};
+
+const getSetterInfo = field => {
+  const {
+    extraProps,
+    setter
+  } = field;
+  const {
+    defaultValue
+  } = extraProps;
+  let setterProps = {};
+  let setterType;
+  let initialValue = null;
+  if (isSetterConfig(setter)) {
+    setterType = setter.componentName;
+    if (setter.props) {
+      setterProps = setter.props;
+      if (typeof setterProps === 'function') {
+        setterProps = setterProps(field);
+      }
+    }
+    if (setter.defaultValue != null) {
+      initialValue = setter.defaultValue;
+    }
+  } else if (setter) {
+    setterType = setter;
+  }
+  if (defaultValue != null && !('defaultValue' in setterProps)) {
+    setterProps.defaultValue = defaultValue;
+    if (initialValue == null) {
+      initialValue = defaultValue;
+    }
+  }
+  if (field.valueState === -1) {
+    setterProps.multiValue = true;
+  }
+
+  // 根据是否支持变量配置做相应的更改
+  const supportVariable = field.extraProps?.supportVariable;
+  const isUseVariableSetter = supportVariable;
+  if (isUseVariableSetter === false) {
+    return {
+      setterProps,
+      initialValue,
+      setterType
+    };
+  }
+  return {
+    setterProps,
+    setterType,
+    initialValue
+  };
+};
+const SettingSetter = observer(({
+  field,
+  children
+}) => {
+  const {
+    setterManager
+  } = useSettingRendererContext();
+  const {
+    extraProps
+  } = field;
+  const visible = extraProps?.condition && typeof extraProps.condition === 'function' ? extraProps.condition(field) !== false : true;
+  if (!visible) {
+    return null;
+  }
+  const {
+    setterProps = {},
+    setterType,
+    initialValue = null
+  } = getSetterInfo(field);
+  const onChange = extraProps?.onChange;
+  const value = field.valueState === -1 ? null : field.getValue();
+  const {
+    component: SetterComponent,
+    props: mixedSetterProps
+  } = setterManager.createSetterContent(setterType, setterProps);
+  return /*#__PURE__*/React.createElement(SetterComponent, _extends({
+    key: field.id,
+    field: field,
+    selected: field.top?.getNode(),
+    initialValue: initialValue,
+    value: value,
+    onChange: newVal => {
+      field.setValue(newVal);
+      onChange?.(field, newVal);
+    },
+    onInitial: () => {
+      if (initialValue == null) {
+        return;
+      }
+      const value = typeof initialValue === 'function' ? initialValue(field) : initialValue;
+      field.setValue(value, true);
+    },
+    removeProp: () => {
+      if (field.name) {
+        field.parent.clearPropValue(field.name);
+      }
+    }
+  }, mixedSetterProps), children);
+});
+
+const SettingFieldItem = observer(({
+  field
+}) => {
+  const {
+    customFieldItem
+  } = useSettingRendererContext();
+  if (customFieldItem) {
+    return customFieldItem(field, /*#__PURE__*/React.createElement(SettingSetter, {
+      field: field
+    }));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "space-y-2"
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: field.id,
+    className: "block text-sm font-medium text-gray-700"
+  }, field.title), /*#__PURE__*/React.createElement(SettingSetter, {
+    field: field
+  }));
+});
+const SettingFieldGroup = observer(({
+  field
+}) => {
+  const {
+    customFieldGroup
+  } = useSettingRendererContext();
+  if (customFieldGroup) {
+    return customFieldGroup(field, /*#__PURE__*/React.createElement(SettingSetter, {
+      field: field
+    }, field.items?.map(item => /*#__PURE__*/React.createElement(SettingFieldView, {
+      key: item.id,
+      field: item
+    }))));
+  }
+  return /*#__PURE__*/React.createElement(SettingSetter, {
+    field: field
+  }, field.items?.map(item => /*#__PURE__*/React.createElement(SettingFieldView, {
+    key: item.id,
+    field: item
+  })));
+});
+const SettingFieldView = ({
+  field
+}) => {
+  if (field.isGroup) {
+    return /*#__PURE__*/React.createElement(SettingFieldGroup, {
+      field: field,
+      key: field.id
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(SettingFieldItem, {
+      field: field,
+      key: field.id
+    });
+  }
+};
+const SettingRender = observer(props => {
+  const {
+    editor,
+    customFieldItem,
+    customFieldGroup
+  } = props;
+  const designer = editor.get('designer');
+  const setterManager = editor.get('setterManager');
+  const {
+    settingsManager
+  } = designer;
+  const {
+    settings
+  } = settingsManager;
+  const items = settings?.items;
+  const ctx = useMemo(() => {
+    const ctx = {};
+    ctx.setterManager = setterManager;
+    ctx.settingsManager = settingsManager;
+    ctx.customFieldItem = customFieldItem;
+    ctx.customFieldGroup = customFieldGroup;
+    return ctx;
+  }, [setterManager, settingsManager, customFieldItem, customFieldGroup]);
+  if (!settings) {
+    // 未选中节点，提示选中 或者 显示根节点设置
+    return /*#__PURE__*/React.createElement("div", {
+      className: "lc-settings-main"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "lc-settings-notice"
+    }, /*#__PURE__*/React.createElement("p", null, "Please select a node in canvas")));
+  }
+
+  // 当节点被锁定，且未开启锁定后容器可设置属性
+  if (settings.isLocked) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "lc-settings-main"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "lc-settings-notice"
+    }, /*#__PURE__*/React.createElement("p", null, "Current node is locked")));
+  }
+  if (Array.isArray(settings.items) && settings.items.length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "lc-settings-main"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "lc-settings-notice"
+    }, /*#__PURE__*/React.createElement("p", null, "No config found for this type of component")));
+  }
+  if (!settings.isSameComponent) {
+    // TODO: future support 获取设置项交集编辑
+    return /*#__PURE__*/React.createElement("div", {
+      className: "lc-settings-main"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "lc-settings-notice"
+    }, /*#__PURE__*/React.createElement("p", null, "Please select same kind of components")));
+  }
+  return /*#__PURE__*/React.createElement(SettingRendererContext.Provider, {
+    value: ctx
+  }, items?.map(item => /*#__PURE__*/React.createElement(SettingFieldView, {
+    key: item.id,
+    field: item
+  })));
+});
+
+class Adapter {
+  renderers = {};
+  setRenderers(renderers) {
+    this.renderers = renderers;
+  }
+  setBaseRenderer(BaseRenderer) {
+    this.renderers.BaseRenderer = BaseRenderer;
+  }
+  setPageRenderer(PageRenderer) {
+    this.renderers.PageRenderer = PageRenderer;
+  }
+  setComponentRenderer(ComponentRenderer) {
+    this.renderers.ComponentRenderer = ComponentRenderer;
+  }
+  getRenderers() {
+    return this.renderers || {};
+  }
+}
+const adapter = new Adapter();
+
+const RendererContext = /*#__PURE__*/createContext({});
+const useRendererContext = () => {
+  try {
+    return useContext(RendererContext);
+  } catch (error) {
+    console.warn('useRendererContext must be used within a RendererContextProvider');
+  }
+  return {};
+};
+function contextFactory() {
+  let context = window.__appContext;
+  if (!context) {
+    context = /*#__PURE__*/createContext({});
+    window.__appContext = context;
+  }
+  return context;
+}
+
+const classnames = (...args) => {
+  return args.filter(Boolean).join(' ');
+};
+
+const logger = createLogger('Renderer');
+
+const PropTypes2 = true;
+function inSameDomain() {
+  try {
+    return window.parent !== window && window.parent.location.host === window.location.host;
+  } catch (e) {
+    return false;
+  }
+}
+function getFileCssName(fileName) {
+  if (!fileName) {
+    return;
+  }
+  const name = fileName.replace(/([A-Z])/g, '-$1').toLowerCase();
+  return `lce-${name}`.split('-').filter(p => !!p).join('-');
+}
+const isSchema = schema => {
+  if (!schema) {
+    return false;
+  }
+  if (schema.componentName === 'Leaf' || schema.componentName === 'Slot') {
+    return true;
+  }
+  if (Array.isArray(schema)) {
+    return schema.every(item => isSchema(item));
+  }
+  const isValidProps = props => {
+    if (!props) {
+      return false;
+    }
+    return typeof schema.props === 'object' && !Array.isArray(props);
+  };
+  return !!(schema.componentName && isValidProps(schema.props));
+};
+const getValue = (obj, path, defaultValue = {}) => {
+  if (Array.isArray(obj)) {
+    return defaultValue;
+  }
+  if (!obj || typeof obj !== 'object') {
+    return defaultValue;
+  }
+  const res = path.split('.').reduce((pre, cur) => {
+    return pre && pre[cur];
+  }, obj);
+  if (res === undefined) {
+    return defaultValue;
+  }
+  return res;
+};
+function transformArrayToMap(arr, key, overwrite = true) {
+  if (!arr || !Array.isArray(arr)) {
+    return {};
+  }
+  const res = {};
+  arr.forEach(item => {
+    const curKey = item[key];
+    if (item[key] === undefined) {
+      return;
+    }
+    if (res[curKey] && !overwrite) {
+      return;
+    }
+    res[curKey] = item;
+  });
+  return res;
+}
+const parseData = (schema, self, options = {}) => {
+  if (isJSExpression(schema)) {
+    return parseExpression({
+      str: schema,
+      self,
+      thisRequired: options.thisRequiredInJSE,
+      logScope: options.logScope
+    });
+  }
+  if (typeof schema === 'string') {
+    return schema.trim();
+  } else if (Array.isArray(schema)) {
+    return schema.map(item => parseData(item, self, options));
+  } else if (typeof schema === 'function') {
+    return schema.bind(self);
+  } else if (typeof schema === 'object') {
+    if (!schema) {
+      return schema;
+    }
+    const res = {};
+    Object.entries(schema).forEach(([key, val]) => {
+      if (key.startsWith('__')) {
+        return;
+      }
+      res[key] = parseData(val, self, options);
+    });
+    return res;
+  }
+  return schema;
+};
+const isUseLoop = (loop, isDesignMode) => {
+  if (!isDesignMode) {
+    return true;
+  }
+  if (!Array.isArray(loop)) {
+    return false;
+  }
+  return loop.length > 0;
+};
+function checkPropTypes(value, name, rule, componentName) {
+  let ruleFunction = rule;
+  if (typeof rule === 'string') {
+    ruleFunction = new Function(`"use strict"; const PropTypes = arguments[0]; return ${rule}`)(PropTypes2);
+  }
+  if (!ruleFunction || typeof ruleFunction !== 'function') {
+    logger.warn('checkPropTypes should have a function type rule argument');
+    return true;
+  }
+  const err = ruleFunction({
+    [name]: value
+  }, name, componentName, 'prop', null
+  );
+  if (err) {
+    logger.warn(err);
+  }
+  return !err;
+}
+function transformStringToFunction(str) {
+  if (typeof str !== 'string') {
+    return str;
+  }
+  if (inSameDomain() && window.parent.__newFunc) {
+    return window.parent.__newFunc(`"use strict"; return ${str}`)();
+  } else {
+    return new Function(`"use strict"; return ${str}`)();
+  }
+}
+function parseExpression(a, b, c = false) {
+  let str;
+  let self;
+  let thisRequired;
+  let logScope;
+  if (typeof a === 'object' && b === undefined) {
+    str = a.str;
+    self = a.self;
+    thisRequired = a.thisRequired;
+    logScope = a.logScope;
+  } else {
+    str = a;
+    self = b;
+    thisRequired = c;
+  }
+  try {
+    const contextArr = ['"use strict";', 'var __self = arguments[0];'];
+    contextArr.push('return ');
+    let tarStr;
+    tarStr = (str.value || '').trim();
+    tarStr = tarStr.replace(/this(\W|$)/g, (_a, b) => `__self${b}`);
+    tarStr = contextArr.join('\n') + tarStr;
+    if (inSameDomain() && window.parent.__newFunc) {
+      return window.parent.__newFunc(tarStr)(self);
+    }
+    const code = `with(${thisRequired ? '{}' : '$scope || {}'}) { ${tarStr} }`;
+    return new Function('$scope', code)(self);
+  } catch (err) {
+    logger.error(`${logScope || ''} parseExpression.error`, err, str, self?.__self ?? self);
+    return undefined;
+  }
+}
+function parseThisRequiredExpression(str, self) {
+  return parseExpression(str, self, true);
+}
+function isString(str) {
+  return {}.toString.call(str) === '[object String]';
+}
+function capitalizeFirstLetter(word) {
+  if (!word || !isString(word) || word.length === 0) {
+    return word;
+  }
+  return word[0].toUpperCase() + word.slice(1);
+}
+const isReactClass = obj => {
+  return obj && obj.prototype && (obj.prototype.isReactComponent || obj.prototype instanceof Component);
+};
+function isReactComponent(obj) {
+  return obj && (isReactClass(obj) || typeof obj === 'function');
+}
+
+const excludePropertyNames = ['$$typeof', 'render', 'defaultProps', 'props', 'length', 'prototype', 'name', 'caller', 'callee', 'arguments'];
+const cloneEnumerableProperty = (target, origin, excludes = excludePropertyNames) => {
+  const compExtraPropertyNames = Object.keys(origin).filter(d => !excludes.includes(d));
+  compExtraPropertyNames.forEach(d => {
+    target[d] = origin[d];
+  });
+  return target;
+};
+const createForwardRefHocElement = (Wrapper, Comp) => {
+  const WrapperComponent = cloneEnumerableProperty(/*#__PURE__*/forwardRef((props, ref) => {
+    return /*#__PURE__*/createElement(Wrapper, {
+      ...props,
+      forwardRef: ref
+    });
+  }), Comp);
+  WrapperComponent.displayName = Comp.displayName;
+  return WrapperComponent;
+};
+
+const patchDidCatch = (Comp, {
+  baseRenderer
+}) => {
+  if (Comp.patchedCatch) {
+    return;
+  }
+  Comp.patchedCatch = true;
+  const originalDidCatch = Comp.prototype.componentDidCatch;
+  Comp.prototype.componentDidCatch = function didCatch(error, errorInfo) {
+    this.setState({
+      engineRenderError: true,
+      error
+    });
+    if (originalDidCatch && typeof originalDidCatch === 'function') {
+      originalDidCatch.call(this, error, errorInfo);
+    }
+  };
+  const {
+    engine
+  } = baseRenderer.context;
+  const originRender = Comp.prototype.render;
+  Comp.prototype.render = function () {
+    if (this.state && this.state.engineRenderError) {
+      this.state.engineRenderError = false;
+      return engine.createElement(engine.getFaultComponent(), {
+        ...this.props,
+        error: this.state.error,
+        componentName: this.props._componentName
+      });
+    }
+    return originRender.call(this);
+  };
+  if (!(Comp.prototype instanceof PureComponent)) {
+    const originShouldComponentUpdate = Comp.prototype.shouldComponentUpdate;
+    Comp.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+      if (nextState && nextState.engineRenderError) {
+        return true;
+      }
+      return originShouldComponentUpdate ? originShouldComponentUpdate.call(this, nextProps, nextState) : true;
+    };
+  }
+};
+const cache$1 = new Map();
+const compWrapper = (Comp, info) => {
+  if (Comp?.prototype?.isReactComponent || Comp?.prototype instanceof Component) {
+    patchDidCatch(Comp, info);
+    return Comp;
+  }
+  if (info.schema.id && cache$1.has(info.schema.id) && cache$1.get(info.schema.id)?.Comp === Comp) {
+    return cache$1.get(info.schema.id)?.WrapperComponent;
+  }
+  class Wrapper extends Component {
+    static displayName = Comp.displayName;
+    render() {
+      const {
+        forwardRef,
+        ...rest
+      } = this.props;
+      // @ts-ignore
+      return /*#__PURE__*/createElement(Comp, {
+        ...rest,
+        ref: forwardRef
+      });
+    }
+  }
+  patchDidCatch(Wrapper, info);
+  const WrapperComponent = createForwardRefHocElement(Wrapper, Comp);
+  info.schema.id && cache$1.set(info.schema.id, {
+    WrapperComponent,
+    Comp
+  });
+  return WrapperComponent;
+};
+
+var RerenderType = /*#__PURE__*/function (RerenderType) {
+  RerenderType["All"] = "All";
+  RerenderType["ChildChanged"] = "ChildChanged";
+  RerenderType["PropsChanged"] = "PropsChanged";
+  RerenderType["VisibleChanged"] = "VisibleChanged";
+  RerenderType["MinimalRenderUnit"] = "MinimalRenderUnit";
+  return RerenderType;
+}(RerenderType || {}); // 缓存 Leaf 层组件，防止重新渲染问题
+class LeafCache {
+  /** 组件缓存 */
+  component = new Map();
+
+  /**
+   * 状态缓存，场景：属性变化后，改组件被销毁，state 为空，没有展示修改后的属性
+   */
+  state = new Map();
+
+  /**
+   * 订阅事件缓存，导致 rerender 的订阅事件
+   */
+  event = new Map();
+  ref = new Map();
+  constructor(documentId, device) {
+    this.documentId = documentId;
+    this.device = device;
+  }
+}
+let cache;
+
+/** 部分没有渲染的 node 节点进行兜底处理 or 渲染方式没有渲染 LeafWrapper */
+const initRerenderEvent = ({
+  schema,
+  container,
+  getNode
+}) => {
+  const leaf = getNode?.(schema.id);
+  if (!leaf || cache.event.get(schema.id)?.clear || leaf === cache.event.get(schema.id)) {
+    return;
+  }
+  cache.event.get(schema.id)?.dispose.forEach(disposeFn => disposeFn && disposeFn());
+  const debounceRerender = debounce(() => {
+    container.rerender();
+  }, 20);
+  cache.event.set(schema.id, {
+    clear: false,
+    leaf,
+    dispose: [leaf?.onPropChange?.(() => {
+      if (!container.autoRepaintNode) {
+        return;
+      }
+      logger.log(`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onPropsChange make rerender`);
+      debounceRerender();
+    }), leaf?.onChildrenChange?.(() => {
+      if (!container.autoRepaintNode) {
+        return;
+      }
+      logger.log(`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onChildrenChange make rerender`);
+      debounceRerender();
+    }), leaf?.onVisibleChange?.(() => {
+      if (!container.autoRepaintNode) {
+        return;
+      }
+      logger.log(`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onVisibleChange make rerender`);
+      debounceRerender();
+    })]
+  });
+};
+
+/** 渲染的 node 节点全局注册事件清除 */
+const clearRerenderEvent = id => {
+  if (cache.event.get(id)?.clear) {
+    return;
+  }
+  cache.event.get(id)?.dispose?.forEach(disposeFn => disposeFn && disposeFn());
+  cache.event.set(id, {
+    clear: true,
+    dispose: []
+  });
+};
+
+// 给每个组件包裹一个 HOC Leaf，支持组件内部属性变化，自响应渲染
+const leafWrapper = (Comp, {
+  schema,
+  baseRenderer,
+  componentInfo,
+  scope
+}) => {
+  const {
+    __getComponentProps: getProps,
+    __getSchemaChildrenVirtualDom: getChildren,
+    __parseData
+  } = baseRenderer;
+  const {
+    engine
+  } = baseRenderer.context;
+  const host = baseRenderer.props?.__host;
+  const curDocumentId = baseRenderer.props?.documentId ?? '';
+  const curDevice = baseRenderer.props?.device ?? '';
+  const getNode = baseRenderer.props?.getNode;
+  const container = baseRenderer.props?.__container;
+  const setSchemaChangedSymbol = baseRenderer.props?.setSchemaChangedSymbol;
+  const designer = host?.designer;
+  const componentCacheId = schema.id;
+  if (!cache || curDocumentId && curDocumentId !== cache.documentId || curDevice && curDevice !== cache.device) {
+    cache?.event.forEach(event => {
+      event.dispose?.forEach(disposeFn => disposeFn && disposeFn());
+    });
+    cache = new LeafCache(curDocumentId, curDevice);
+  }
+
+  // if (!isReactComponent(Comp)) {
+  //   logger.error(`${schema.componentName} component may be has errors: `, Comp)
+  // }
+
+  initRerenderEvent({
+    schema,
+    container,
+    getNode
+  });
+  if (curDocumentId && cache.component.has(componentCacheId) && cache.component.get(componentCacheId).Comp === Comp) {
+    return cache.component.get(componentCacheId).LeafWrapper;
+  }
+  class LeafHoc extends Component {
+    recordInfo = {};
+    curEventLeaf;
+    static displayName = schema.componentName;
+    disposeFunctions = [];
+    __component_tag = 'leafWrapper';
+    renderUnitInfo;
+
+    // 最小渲染单元做防抖处理
+    makeUnitRenderDebounced = debounce(() => {
+      this.beforeRender(RerenderType.MinimalRenderUnit);
+      const schema = this.leaf?.export?.(TRANSFORM_STAGE.RENDER);
+      if (!schema) {
+        return;
+      }
+      const nextProps = getProps(schema, scope, Comp, componentInfo);
+      const children = getChildren(schema, scope, Comp);
+      const nextState = {
+        nodeProps: nextProps,
+        nodeChildren: children,
+        childrenInState: true
+      };
+      if ('children' in nextProps) {
+        nextState.nodeChildren = nextProps.children;
+      }
+      logger.log(`${this.leaf?.componentName}(${this.leaf?.id}) MinimalRenderUnit Render!`);
+      this.setState(nextState);
+    }, 20);
+    constructor(props) {
+      super(props);
+      // 监听以下事件，当变化时更新自己
+      logger.log(`${schema.componentName}[${this.leaf?.id}] leaf render in SimulatorRendererView`);
+      componentCacheId && clearRerenderEvent(componentCacheId);
+      this.curEventLeaf = this.leaf;
+      cache.ref.set(componentCacheId, {
+        makeUnitRender: this.makeUnitRender
+      });
+      let cacheState = cache.state.get(componentCacheId);
+      if (!cacheState || cacheState.__tag !== props.__tag) {
+        cacheState = this.getDefaultState(props);
+      }
+      this.state = cacheState;
+    }
+    recordTime = () => {
+      if (!this.recordInfo.startTime) {
+        return;
+      }
+      const endTime = Date.now();
+      const nodeCount = host?.designer?.currentDocument?.getNodeCount?.();
+      const componentName = this.recordInfo.node?.componentName || this.leaf?.componentName || 'UnknownComponent';
+      designer?.postEvent(DESIGNER_EVENT.NODE_RENDER, {
+        componentName,
+        time: endTime - this.recordInfo.startTime,
+        type: this.recordInfo.type,
+        nodeCount
+      });
+      this.recordInfo.startTime = null;
+    };
+    makeUnitRender = () => {
+      this.makeUnitRenderDebounced();
+    };
+    get autoRepaintNode() {
+      return container?.autoRepaintNode;
+    }
+    componentDidUpdate() {
+      this.recordTime();
+    }
+    componentDidMount() {
+      const _leaf = this.leaf;
+      this.initOnPropsChangeEvent(_leaf);
+      this.initOnChildrenChangeEvent(_leaf);
+      this.initOnVisibleChangeEvent(_leaf);
+      this.recordTime();
+    }
+    getDefaultState(nextProps) {
+      const {
+        hidden = false,
+        condition = true
+      } = nextProps.__inner__ || this.leaf?.export?.(TRANSFORM_STAGE.RENDER) || {};
+      return {
+        nodeChildren: null,
+        childrenInState: false,
+        visible: !hidden,
+        condition: __parseData?.(condition, scope),
+        nodeCacheProps: {},
+        nodeProps: {}
+      };
+    }
+    setState(state) {
+      cache.state.set(componentCacheId, {
+        ...this.state,
+        ...state,
+        __tag: this.props.__tag
+      });
+      super.setState(state);
+    }
+
+    /** 由于内部属性变化，在触发渲染前，会执行该函数 */
+    beforeRender(type, node) {
+      this.recordInfo.startTime = Date.now();
+      this.recordInfo.type = type;
+      this.recordInfo.node = node;
+      setSchemaChangedSymbol?.(true);
+    }
+    judgeMiniUnitRender() {
+      if (!this.renderUnitInfo) {
+        this.getRenderUnitInfo();
+      }
+      const renderUnitInfo = this.renderUnitInfo || {
+        singleRender: true
+      };
+      if (renderUnitInfo.singleRender) {
+        return;
+      }
+      const ref = cache.ref.get(renderUnitInfo.minimalUnitId);
+      if (!ref) {
+        logger.log('Cant find minimalRenderUnit ref! This make rerender!');
+        container?.rerender();
+        return;
+      }
+      logger.log(`${this.leaf?.componentName}(${this.leaf?.id}) need render, make its minimalRenderUnit ${renderUnitInfo.minimalUnitName}(${renderUnitInfo.minimalUnitId})`);
+      ref.makeUnitRender();
+    }
+    getRenderUnitInfo(leaf = this.leaf) {
+      // leaf 在低代码组件中存在 mock 的情况，退出最小渲染单元判断
+      if (!leaf || typeof leaf.isRoot !== 'function') {
+        return;
+      }
+      if (leaf.isRoot) {
+        this.renderUnitInfo = {
+          singleRender: true,
+          ...(this.renderUnitInfo || {})
+        };
+      }
+      if (leaf.componentMeta.isMinimalRenderUnit) {
+        this.renderUnitInfo = {
+          minimalUnitId: leaf.id,
+          minimalUnitName: leaf.componentName,
+          singleRender: false
+        };
+      }
+      if (leaf.hasLoop()) {
+        // 含有循环配置的元素，父元素是最小渲染单元
+        this.renderUnitInfo = {
+          minimalUnitId: leaf?.parent?.id,
+          minimalUnitName: leaf?.parent?.componentName,
+          singleRender: false
+        };
+      }
+      if (leaf.parent) {
+        this.getRenderUnitInfo(leaf.parent);
+      }
+    }
+    UNSAFE_componentWillReceiveProps(nextProps) {
+      const {
+        componentId
+      } = nextProps;
+      if (nextProps.__tag === this.props.__tag) {
+        return null;
+      }
+      const _leaf = getNode?.(componentId);
+      if (_leaf && this.curEventLeaf && _leaf !== this.curEventLeaf) {
+        this.disposeFunctions.forEach(fn => fn());
+        this.disposeFunctions = [];
+        this.initOnChildrenChangeEvent(_leaf);
+        this.initOnPropsChangeEvent(_leaf);
+        this.initOnVisibleChangeEvent(_leaf);
+        this.curEventLeaf = _leaf;
+      }
+      const {
+        visible,
+        ...resetState
+      } = this.getDefaultState(nextProps);
+      this.setState(resetState);
+    }
+
+    /** 监听参数变化 */
+    initOnPropsChangeEvent(leaf = this.leaf) {
+      // const handlePropsChange = debounce((propChangeInfo: PropChangeInfo) => {
+      const handlePropsChange = debounce(propChangeInfo => {
+        const {
+          key,
+          newValue = null
+        } = propChangeInfo;
+        const node = leaf;
+        if (key === '___condition___') {
+          const {
+            condition = true
+          } = this.leaf?.export(TRANSFORM_STAGE.RENDER) || {};
+          const conditionValue = __parseData?.(condition, scope);
+          logger.log(`key is ___condition___, change condition value to [${condition}]`);
+          // 条件表达式改变
+          this.setState({
+            condition: conditionValue
+          });
+          return;
+        }
+
+        // 如果循坏条件变化，从根节点重新渲染
+        // 目前多层循坏无法判断需要从哪一层开始渲染，故先粗暴解决
+        if (key === '___loop___') {
+          logger.log('key is ___loop___, render a page!');
+          container?.rerender();
+          // 由于 scope 变化，需要清空缓存，使用新的 scope
+          cache.component.delete(componentCacheId);
+          return;
+        }
+        this.beforeRender(RerenderType.PropsChanged);
+        const {
+          state
+        } = this;
+        const {
+          nodeCacheProps
+        } = state;
+        const nodeProps = getProps(node?.export?.(TRANSFORM_STAGE.RENDER), scope, Comp, componentInfo);
+        if (key && !(key in nodeProps) && key in this.props) {
+          // 当 key 在 this.props 中时，且不存在在计算值中，需要用 newValue 覆盖掉 this.props 的取值
+          nodeCacheProps[key] = newValue;
+        }
+        logger.log(`${leaf?.componentName}[${this.leaf?.id}] component trigger onPropsChange!`, nodeProps, nodeCacheProps, key, newValue);
+        this.setState('children' in nodeProps ? {
+          nodeChildren: nodeProps.children,
+          nodeProps,
+          childrenInState: true,
+          nodeCacheProps
+        } : {
+          nodeProps,
+          nodeCacheProps
+        });
+        this.judgeMiniUnitRender();
+      });
+      // const dispose = leaf?.onPropChange?.((propChangeInfo: IPublicTypePropChangeOptions) => {
+      const dispose = leaf?.onPropChange?.(propChangeInfo => {
+        if (!this.autoRepaintNode) {
+          return;
+        }
+        handlePropsChange(propChangeInfo);
+      });
+      dispose && this.disposeFunctions.push(dispose);
+    }
+
+    /**
+     * 监听显隐变化
+     */
+    initOnVisibleChangeEvent(leaf = this.leaf) {
+      const dispose = leaf?.onVisibleChange?.(flag => {
+        if (!this.autoRepaintNode) {
+          return;
+        }
+        if (this.state.visible === flag) {
+          return;
+        }
+        logger.log(`${leaf?.componentName}[${this.leaf?.id}] component trigger onVisibleChange(${flag}) event`);
+        this.beforeRender(RerenderType.VisibleChanged);
+        this.setState({
+          visible: flag
+        });
+        this.judgeMiniUnitRender();
+      });
+      dispose && this.disposeFunctions.push(dispose);
+    }
+
+    /**
+     * 监听子元素变化（拖拽，删除...）
+     */
+    initOnChildrenChangeEvent(leaf = this.leaf) {
+      const dispose = leaf?.onChildrenChange?.(param => {
+        if (!this.autoRepaintNode) {
+          return;
+        }
+        const {
+          type,
+          node
+        } = param || {};
+        this.beforeRender(`${RerenderType.ChildChanged}-${type}`, node);
+        // TODO: 缓存同级其他元素的 children。
+        // 缓存二级 children Next 查询筛选组件有问题
+        // 缓存一级 children Next Tab 组件有问题
+        const nextChild = getChildren(leaf?.export?.(TRANSFORM_STAGE.RENDER), scope, Comp);
+        logger.log(`${schema.componentName}[${this.leaf?.id}] component trigger onChildrenChange event`, nextChild);
+        this.setState({
+          nodeChildren: nextChild,
+          childrenInState: true
+        });
+        this.judgeMiniUnitRender();
+      });
+      dispose && this.disposeFunctions.push(dispose);
+    }
+    componentWillUnmount() {
+      this.disposeFunctions.forEach(fn => fn());
+    }
+    get hasChildren() {
+      if (!this.state.childrenInState) {
+        return 'children' in this.props;
+      }
+      return true;
+    }
+    get children() {
+      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;
+    }
+    get leaf() {
+      // if (this.props._leaf?.isMock) {
+      //   // 低代码组件作为一个整体更新，其内部的组件不需要监听相关事件
+      //   return undefined
+      // }
+
+      return getNode?.(componentCacheId);
+    }
+    render() {
+      if (!this.state.visible || !this.state.condition) {
+        return null;
+      }
+      const {
+        forwardRef,
+        ...rest
+      } = this.props;
+      const compProps = {
+        ...rest,
+        ...(this.state.nodeCacheProps || {}),
+        ...(this.state.nodeProps || {}),
+        children: [],
+        __id: this.leaf?.id,
+        ref: forwardRef
+      };
+      delete compProps.__inner__;
+      if (this.hasChildren) {
+        return engine.createElement(Comp, compProps, this.children);
+      }
+      return engine.createElement(Comp, compProps);
+    }
+  }
+  const LeafWrapper = createForwardRefHocElement(LeafHoc, Comp);
+  cache.component.set(componentCacheId, {
+    LeafWrapper,
+    Comp
+  });
+  return LeafWrapper;
+};
+
+/**
+ * execute method in schema.lifeCycles with context
+ */
+function executeLifeCycleMethod(context, schema, method, args, thisRequiredInJSE) {
+  if (!context || !isSchema(schema) || !method) {
+    return;
+  }
+  const lifeCycleMethods = getValue(schema, 'lifeCycles', {});
+  let fn = lifeCycleMethods[method];
+  if (!fn) {
+    return;
+  }
+
+  // TODO: cache
+  if (isJSExpression(fn) || isJSFunction(fn)) {
+    fn = thisRequiredInJSE ? parseThisRequiredExpression(fn, context) : parseExpression(fn, context);
+  }
+  if (typeof fn !== 'function') {
+    logger.error(`生命周期${method}类型不符`, fn);
+    return;
+  }
+  try {
+    return fn.apply(context, args);
+  } catch (e) {
+    logger.error(`[${schema.componentName}]生命周期${method}出错`, e);
+  }
+}
+
+/**
+ * get children from a node schema
+ */
+function getSchemaChildren(schema) {
+  if (!schema) {
+    return;
+  }
+  return schema.children;
+}
+function baseRendererFactory() {
+  const {
+    BaseRenderer: customBaseRenderer
+  } = adapter.getRenderers();
+  if (customBaseRenderer) {
+    return customBaseRenderer;
+  }
+  const DEFAULT_LOOP_ARG_ITEM = 'item';
+  const DEFAULT_LOOP_ARG_INDEX = 'index';
+  // const scopeIdx = 0
+
+  return class BaseRenderer extends Component {
+    static displayName = 'BaseRenderer';
+    static defaultProps = {
+      __schema: {}
+    };
+    static contextType = RendererContext;
+    dataSourceMap = {};
+    __namespace = 'base';
+    __compScopes = {};
+    __instanceMap = {};
+    __dataHelper;
+
+    /**
+     * keep track of customMethods added to this context
+     *
+     * @type {any}
+     */
+    __customMethodsList = [];
+    __parseExpression;
+    __ref;
+
+    /**
+     * reference of style element contains schema.css
+     *
+     * @type {any}
+     */
+    __styleElement;
+    constructor(props) {
+      super(props);
+      this.__parseExpression = (str, self) => {
+        return parseExpression({
+          str,
+          self,
+          thisRequired: props?.thisRequiredInJSE,
+          logScope: props.componentName
+        });
+      };
+      this.__beforeInit(props);
+      this.__init(props);
+      this.__afterInit(props);
+      logger.log(`constructor - ${props?.__schema?.fileName}`);
+    }
+    __beforeInit(props) {}
+    __init(props) {
+      this.__compScopes = {};
+      this.__instanceMap = {};
+      this.__bindCustomMethods(props);
+    }
+    __afterInit(props) {}
+    static getDerivedStateFromProps(props, state) {
+      const result = executeLifeCycleMethod(this, props?.__schema, 'getDerivedStateFromProps', [props, state], props.thisRequiredInJSE);
+      return result === undefined ? null : result;
+    }
+    async getSnapshotBeforeUpdate(...args) {
+      this.__executeLifeCycleMethod('getSnapshotBeforeUpdate', args);
+      logger.log(`getSnapshotBeforeUpdate - ${this.props?.__schema?.componentName}`);
+    }
+    async componentDidMount(...args) {
+      this.reloadDataSource();
+      this.__executeLifeCycleMethod('componentDidMount', args);
+      logger.log(`componentDidMount - ${this.props?.__schema?.componentName}`);
+    }
+    async componentDidUpdate(...args) {
+      this.__executeLifeCycleMethod('componentDidUpdate', args);
+      logger.log(`componentDidUpdate - ${this.props.__schema.componentName}`);
+    }
+    async componentWillUnmount(...args) {
+      this.__executeLifeCycleMethod('componentWillUnmount', args);
+      logger.log(`componentWillUnmount - ${this.props?.__schema?.componentName}`);
+    }
+    async componentDidCatch(...args) {
+      this.__executeLifeCycleMethod('componentDidCatch', args);
+      logger.warn(args);
+    }
+    reloadDataSource = () => new Promise((resolve, reject) => {
+      logger.log('reload data source');
+      if (!this.__dataHelper) {
+        return resolve({});
+      }
+      this.__dataHelper.getInitData().then(res => {
+        if (isEmpty(res)) {
+          this.forceUpdate();
+          return resolve({});
+        }
+        this.setState(res, resolve);
+      }).catch(err => {
+        reject(err);
+      });
+    });
+    shouldComponentUpdate() {
+      if (this.props.getSchemaChangedSymbol?.() && this.props.__container?.rerender) {
+        this.props.__container?.rerender();
+        return false;
+      }
+      return true;
+    }
+    forceUpdate() {
+      if (this.shouldComponentUpdate()) {
+        super.forceUpdate();
+      }
+    }
+
+    /**
+     * execute method in schema.lifeCycles
+     */
+    __executeLifeCycleMethod = (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
+     */
+    __getComponentView = () => {
+      const {
+        __components,
+        __schema
+      } = this.props;
+      if (!__components) {
+        return;
+      }
+      return __components[__schema.componentName];
+    };
+    __bindCustomMethods = props => {
+      const {
+        __schema
+      } = props;
+      const customMethodsList = Object.keys(__schema.methods || {}) || [];
+      (this.__customMethodsList || []).forEach(item => {
+        if (!customMethodsList.includes(item)) {
+          delete this[item];
+        }
+      });
+      this.__customMethodsList = customMethodsList;
+      forEach(__schema.methods, (val, key) => {
+        let value = val;
+        if (isJSExpression(value) || isJSFunction(value)) {
+          value = this.__parseExpression(value, this);
+        }
+        if (typeof value !== 'function') {
+          logger.error(`custom method ${key} can not be parsed to a valid function`, value);
+          return;
+        }
+        this[key] = value.bind(this);
+      });
+    };
+    __generateCtx = ctx => {
+      const {
+        pageContext,
+        compContext
+      } = this.context;
+      const obj = {
+        page: pageContext,
+        component: compContext,
+        ...ctx
+      };
+      forEach(obj, (val, key) => {
+        this[key] = val;
+      });
+    };
+    __parseData = (data, ctx) => {
+      const {
+        __ctx,
+        thisRequiredInJSE,
+        componentName
+      } = this.props;
+      return parseData(data, ctx || __ctx || this, {
+        thisRequiredInJSE,
+        logScope: componentName
+      });
+    };
+    __initDataSource = props => {
+      if (!props) {
+        return;
+      }
+      // TODO: 数据源引擎方案
+      // const schema = props.__schema || {}
+      // const defaultDataSource: DataSource = {
+      //   list: [],
+      // }
+      // const dataSource = schema.dataSource || defaultDataSource
+      // // requestHandlersMap 存在才走数据源引擎方案
+      // // TODO: 下面if else 抽成独立函数
+      // const useDataSourceEngine = !!props.__appHelper?.requestHandlersMap
+      // if (useDataSourceEngine) {
+      //   this.__dataHelper = {
+      //     updateConfig: (updateDataSource: any) => {
+      //       const { dataSourceMap, reloadDataSource } = createDataSourceEngine(
+      //         updateDataSource ?? {},
+      //         this,
+      //         props.__appHelper.requestHandlersMap
+      //           ? { requestHandlersMap: props.__appHelper.requestHandlersMap }
+      //           : undefined,
+      //       )
+
+      //       this.reloadDataSource = () =>
+      //         new Promise(resolve => {
+      //           logger.log('reload data source')
+      //           reloadDataSource().then(() => {
+      //             resolve({})
+      //           })
+      //         })
+      //       return dataSourceMap
+      //     },
+      //   }
+      //   this.dataSourceMap = this.__dataHelper.updateConfig(dataSource)
+      // } else {
+      //   const appHelper = props.__appHelper
+      //   this.__dataHelper = new DataHelper(this, dataSource, appHelper, (config: any) => this.__parseData(config))
+      //   this.dataSourceMap = this.__dataHelper.dataSourceMap
+      //   this.reloadDataSource = () =>
+      //     new Promise((resolve, reject) => {
+      //       logger.log('reload data source')
+      //       if (!this.__dataHelper) {
+      //         return resolve({})
+      //       }
+      //       this.__dataHelper
+      //         .getInitData()
+      //         .then((res: any) => {
+      //           if (isEmpty(res)) {
+      //             return resolve({})
+      //           }
+      //           this.setState(res, resolve as () => void)
+      //         })
+      //         .catch((err: Error) => {
+      //           reject(err)
+      //         })
+      //     })
+      // }
+    };
+
+    /**
+     * write props.__schema.css to document as a style element,
+     * which will be added once and only once.
+     * @PRIVATE
+     */
+    __writeCss = props => {
+      const css = getValue(props.__schema, 'css', '');
+      logger.log('create this.styleElement with css', css);
+      let style = this.__styleElement;
+      if (!this.__styleElement) {
+        style = document.createElement('style');
+        style.type = 'text/css';
+        style.setAttribute('from', 'style-sheet');
+        const head = document.head || document.getElementsByTagName('head')[0];
+        head.appendChild(style);
+        this.__styleElement = style;
+        logger.log('this.styleElement is created', this.__styleElement);
+      }
+      if (style.innerHTML === css) {
+        return;
+      }
+      style.innerHTML = css;
+    };
+    __render = () => {
+      const schema = this.props.__schema;
+      this.__executeLifeCycleMethod('render');
+      this.__writeCss(this.props);
+      const {
+        engine
+      } = this.context;
+      if (engine) {
+        engine.props.onCompGetCtx(schema, this);
+        // 画布场景才需要每次渲染bind自定义方法
+        if (this.__designModeIsDesign) {
+          this.__bindCustomMethods(this.props);
+          this.dataSourceMap = this.__dataHelper?.updateConfig(schema.dataSource);
+        }
+      }
+    };
+    __getRef = ref => {
+      const {
+        engine
+      } = this.context;
+      const {
+        __schema
+      } = this.props;
+      // ref && engine?.props?.onCompGetRef(__schema, ref)
+      // TODO: 只在 ref 存在执行，会影响 documentInstance 的卸载
+      engine?.props?.onCompGetRef(__schema, ref);
+      this.__ref = ref;
+    };
+    __createDom = () => {
+      const {
+        __schema,
+        __ctx
+      } = this.props;
+      // merge defaultProps
+      const scopeProps = {
+        ...__schema.defaultProps,
+        ...this.props
+      };
+      const scope = {
+        props: scopeProps
+      };
+      scope.__proto__ = __ctx || this;
+      const _children = getSchemaChildren(__schema);
+      const Comp = this.__getComponentView();
+      if (!Comp) {
+        logger.log(`${__schema.componentName} is invalid!`);
+      }
+      const parentNodeInfo = {
+        schema: __schema,
+        Comp: this.__getHOCWrappedComponent(Comp, {
+          schema: __schema,
+          scope
+        })
+      };
+      return this.__createVirtualDom(_children, scope, parentNodeInfo);
+    };
+
+    /**
+     * 将模型结构转换成react Element
+     * @param originalSchema schema
+     * @param originalScope scope
+     * @param parentInfo 父组件的信息，包含schema和Comp
+     * @param idx 为循环渲染的循环Index
+     */
+    __createVirtualDom = (originalSchema, originalScope, parentInfo, idx = '') => {
+      if (originalSchema === null || originalSchema === undefined) {
+        return null;
+      }
+      const scope = originalScope;
+      const schema = originalSchema;
+      const {
+        engine
+      } = this.context || {};
+      if (!engine) {
+        logger.log('this.context.engine is invalid!');
+        return null;
+      }
+      try {
+        const {
+          __appHelper: appHelper,
+          __components: components = {}
+        } = this.props || {};
+        if (isJSExpression(schema)) {
+          return this.__parseExpression(schema, scope);
+        }
+        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((item, idy) => this.__createVirtualDom(item, scope, parentInfo, item?.__ctx?.lceKey ? '' : String(idy)));
+        }
+        if (schema.$$typeof) {
+          return schema;
+        }
+        if (!schema.componentName) {
+          logger.error('The componentName in the schema is invalid, please check the schema: ', schema);
+          return;
+        }
+        if (!isSchema(schema)) {
+          return null;
+        }
+        let Comp = components[schema.componentName] || this.props.__container?.components?.[schema.componentName];
+
+        // 容器类组件的上下文通过props传递，避免context传递带来的嵌套问题
+        const otherProps = isSchema(schema) ? {
+          __schema: schema,
+          __appHelper: appHelper,
+          __components: components
+        } : {};
+        if (!Comp) {
+          logger.error(`${schema.componentName} component is not found in components list! component list is:`, components || this.props.__container?.components);
+          return engine.createElement(engine.getNotFoundComponent(), {
+            componentName: schema.componentName,
+            componentId: schema.id,
+            enableStrictNotFoundMode: engine.props.enableStrictNotFoundMode,
+            ref: ref => {
+              ref && engine.props?.onCompGetRef(schema, ref);
+            }
+          }, this.__getSchemaChildrenVirtualDom(schema, scope, Comp));
+        }
+        if (schema.loop != null) {
+          const loop = this.__parseData(schema.loop, scope);
+          if (Array.isArray(loop) && loop.length === 0) return null;
+          const useLoop = isUseLoop(loop, this.__designModeIsDesign);
+          if (useLoop) {
+            return this.__createLoopVirtualDom({
+              ...schema,
+              loop
+            }, scope, parentInfo, idx);
+          }
+        }
+        const condition = schema.condition == null ? true : this.__parseData(schema.condition, scope);
+
+        // DesignMode 为 design 情况下，需要进入 leaf Hoc，进行相关事件注册
+        const displayInHook = this.__designModeIsDesign;
+        if (!condition && !displayInHook) {
+          return null;
+        }
+
+        // TODO: scope
+        // let scopeKey = ''
+        // // 判断组件是否需要生成scope，且只生成一次，挂在this.__compScopes上
+        // if (Comp.generateScope) {
+        //   const key = this.__parseExpression(schema.props?.key, scope)
+        //   if (key) {
+        //     // 如果组件自己设置key则使用组件自己的key
+        //     scopeKey = key
+        //   } else if (schema.__ctx) {
+        //     // 需要判断循环的情况
+        //     scopeKey = schema.__ctx.lceKey + (idx !== undefined ? `_${idx}` : '')
+        //   } else {
+        //     // 在生产环境schema没有__ctx上下文，需要手动生成一个lceKey
+        //     schema.__ctx = {
+        //       lceKey: `lce${++scopeIdx}`,
+        //     }
+        //     scopeKey = schema.__ctx.lceKey
+        //   }
+        //   if (!this.__compScopes[scopeKey]) {
+        //     this.__compScopes[scopeKey] = Comp.generateScope(this, schema)
+        //   }
+        // }
+        // // 如果组件有设置scope，需要为组件生成一个新的scope上下文
+        // if (scopeKey && this.__compScopes[scopeKey]) {
+        //   const compSelf = { ...this.__compScopes[scopeKey] }
+        //   compSelf.__proto__ = scope
+        //   scope = compSelf
+        // }
+
+        if (engine.props?.designMode) {
+          otherProps.__designMode = engine.props.designMode;
+        }
+        if (this.__designModeIsDesign) {
+          otherProps.__tag = Math.random();
+        }
+        const componentInfo = {};
+        const props = this.__getComponentProps(schema, scope, Comp, {
+          ...componentInfo,
+          props: transformArrayToMap(componentInfo.props, 'name')
+        }) || {};
+        Comp = this.__getHOCWrappedComponent(Comp, {
+          schema,
+          componentInfo,
+          baseRenderer: this,
+          scope
+        });
+        otherProps.ref = ref => {
+          this.$(schema.id || props.ref, ref); // 收集ref
+          const refProps = props.ref;
+          if (refProps && typeof refProps === 'string') {
+            this[refProps] = ref;
+          }
+          ref && engine.props?.onCompGetRef(schema, ref);
+        };
+
+        // scope需要传入到组件上
+        // if (scopeKey && this.__compScopes[scopeKey]) {
+        //   props.__scope = this.__compScopes[scopeKey]
+        // }
+        if (schema?.__ctx?.lceKey) {
+          if (!isSchema(schema)) {
+            engine.props?.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;
+        }
+        return engine.createElement(Comp, {
+          ...props,
+          ...otherProps,
+          // TODO: 看看这里需要怎么处理简洁
+          __inner__: {
+            hidden: schema.hidden,
+            condition
+          }
+        }, this.__getSchemaChildrenVirtualDom(schema, scope, Comp, condition));
+      } catch (e) {
+        return engine.createElement(engine.getFaultComponent(), {
+          error: e,
+          schema,
+          self: scope,
+          parentInfo,
+          idx
+        });
+      }
+    };
+
+    /**
+     * get Component HOCs
+     *
+     * @readonly
+     * @type {ComponentConstruct[]}
+     */
+    get __componentHOCs() {
+      if (this.__designModeIsDesign) {
+        return [leafWrapper, compWrapper];
+      }
+      return [compWrapper];
+    }
+    __getSchemaChildrenVirtualDom = (schema, scope, Comp, condition = true) => {
+      let children = condition ? getSchemaChildren(schema) : null;
+      const result = [];
+      if (children) {
+        if (!Array.isArray(children)) {
+          children = [children];
+        }
+        children.forEach(child => {
+          const childVirtualDom = this.__createVirtualDom(isJSExpression(child) ? this.__parseExpression(child, scope) : child, scope, {
+            schema,
+            Comp
+          });
+          result.push(childVirtualDom);
+        });
+      }
+      if (result && result.length > 0) {
+        return result;
+      }
+      return null;
+    };
+    __getComponentProps = (schema, scope, Comp, componentInfo) => {
+      if (!schema) {
+        return {};
+      }
+      return this.__parseProps(schema?.props, scope, '', {
+        schema,
+        Comp,
+        componentInfo: {
+          ...(componentInfo || {}),
+          props: transformArrayToMap((componentInfo || {}).props, 'name')
+        }
+      }) || {};
+    };
+    __createLoopVirtualDom = (schema, scope, parentInfo, idx) => {
+      // TODO
+      // if (isSchema(schema)) {
+      //   logger.warn('file type not support Loop')
+      //   return null
+      // }
+      if (!Array.isArray(schema.loop)) {
+        return null;
+      }
+      const itemArg = schema.loopArgs && schema.loopArgs[0] || DEFAULT_LOOP_ARG_ITEM;
+      const indexArg = schema.loopArgs && schema.loopArgs[1] || DEFAULT_LOOP_ARG_INDEX;
+      const {
+        loop
+      } = schema;
+      return loop.map((item, i) => {
+        const loopSelf = {
+          [itemArg]: item,
+          [indexArg]: i
+        };
+        loopSelf.__proto__ = scope;
+        return this.__createVirtualDom({
+          ...schema,
+          loop: undefined,
+          props: {
+            ...schema.props,
+            // 循环下 key 不能为常量，这样会造成 key 值重复，渲染异常
+            key: isJSExpression(schema.props?.key) ? schema.props?.key : null
+          }
+        }, loopSelf, parentInfo, idx ? `${idx}_${i}` : i);
+      });
+    };
+    get __designModeIsDesign() {
+      const {
+        engine
+      } = this.context || {};
+      return engine?.props?.designMode === 'design';
+    }
+    __parseProps = (originalProps, scope, path, info) => {
+      let props = originalProps;
+      const {
+        schema,
+        Comp,
+        componentInfo = {}
+      } = info;
+      const propInfo = getValue(componentInfo.props, path);
+      // FIXME: 将这行逻辑外置，解耦，线上环境不要验证参数，调试环境可以有，通过传参自定义
+      const propType = propInfo?.extra?.propType;
+      const checkProps = value => {
+        if (!propType) {
+          return value;
+        }
+        return checkPropTypes(value, path, propType, componentInfo.name) ? value : undefined;
+      };
+      const parseReactNode = (data, params) => {
+        if (isEmpty(params)) {
+          const virtualDom = this.__createVirtualDom(data, scope, {
+            schema,
+            Comp
+          });
+          return checkProps(virtualDom);
+        }
+        return checkProps((...argValues) => {
+          const args = {};
+          if (Array.isArray(params) && params.length) {
+            params.forEach((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,
+            Comp
+          });
+        });
+      };
+      if (isJSExpression(props)) {
+        props = this.__parseExpression(props, scope);
+        // 只有当变量解析出来为模型结构的时候才会继续解析
+        if (!isSchema(props)) {
+          return checkProps(props);
+        }
+      }
+      if (isJSFunction(props)) {
+        props = transformStringToFunction(props.value);
+      }
+
+      // 兼容通过componentInfo判断的情况
+      if (isSchema(props)) {
+        const isReactNodeFunction = !!(propInfo?.type === 'ReactNode' && propInfo?.props?.type === 'function');
+        const isMixinReactNodeFunction = !!(propInfo?.type === 'Mixin' && propInfo?.props?.types?.indexOf('ReactNode') > -1 && propInfo?.props?.reactNodeProps?.type === 'function');
+        let params = null;
+        if (isReactNodeFunction) {
+          params = propInfo?.props?.params;
+        } else if (isMixinReactNodeFunction) {
+          params = propInfo?.props?.reactNodeProps?.params;
+        }
+        return parseReactNode(props, params);
+      }
+      if (Array.isArray(props)) {
+        return checkProps(props.map((item, idx) => 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);
+        }
+        const res = {};
+        forEach(props, (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);
+    };
+    $(id, instance) {
+      this.__instanceMap = this.__instanceMap || {};
+      if (!id || typeof id !== 'string') {
+        return this.__instanceMap;
+      }
+      if (instance) {
+        this.__instanceMap[id] = instance;
+      }
+      return this.__instanceMap[id];
+    }
+    __renderContextProvider = (customProps, children) => {
+      return /*#__PURE__*/React.createElement(RendererContext.Provider, {
+        value: {
+          ...this.context,
+          blockContext: this,
+          ...(customProps || {})
+        }
+      }, children || this.__createDom());
+    };
+    __renderContextConsumer = children => {
+      return /*#__PURE__*/React.createElement(RendererContext.Consumer, null, children);
+    };
+    __getHOCWrappedComponent(OriginalComp, info) {
+      let Comp = OriginalComp;
+      this.__componentHOCs.forEach(ComponentConstruct => {
+        Comp = ComponentConstruct(Comp, {
+          componentInfo: {},
+          baseRenderer: this,
+          ...info
+        });
+      });
+      return Comp;
+    }
+    __renderComp(OriginalComp, ctxProps) {
+      let Comp = OriginalComp;
+      const {
+        __schema,
+        __ctx
+      } = this.props;
+      const scope = {};
+      scope.__proto__ = __ctx || this;
+      Comp = this.__getHOCWrappedComponent(Comp, {
+        schema: __schema,
+        scope
+      });
+      const data = this.__parseProps(__schema?.props, scope, '', {
+        schema: __schema,
+        Comp,
+        componentInfo: {}
+      });
+      const {
+        className
+      } = data;
+      const otherProps = {};
+      const {
+        engine
+      } = this.context || {};
+      if (!engine) {
+        return null;
+      }
+      if (this.__designModeIsDesign) {
+        otherProps.__tag = Math.random();
+      }
+      const child = engine.createElement(Comp, {
+        ...data,
+        ...this.props,
+        ref: this.__getRef,
+        className: classnames(__schema?.fileName && getFileCssName(__schema.fileName), className, this.props.className),
+        __id: __schema?.id,
+        ...otherProps
+      }, this.__createDom());
+      return this.__renderContextProvider(ctxProps, child);
+    }
+    __renderContent(children) {
+      const {
+        __schema
+      } = this.props;
+      const parsedProps = this.__parseData(__schema.props);
+      const className = classnames(`lce-${this.__namespace}`, __schema?.fileName && getFileCssName(__schema.fileName), parsedProps.className, this.props.className);
+      const style = {
+        ...(parsedProps.style || {}),
+        ...(typeof this.props.style === 'object' ? this.props.style : {})
+      };
+      const id = this.props.id || parsedProps.id;
+      return /*#__PURE__*/React.createElement("div", {
+        ref: this.__getRef,
+        className: className,
+        id: id,
+        style: style
+      }, children);
+    }
+    __checkSchema = (schema, originalExtraComponents = []) => {
+      let extraComponents = originalExtraComponents;
+      if (typeof extraComponents === 'string') {
+        extraComponents = [extraComponents];
+      }
+
+      // const builtin = capitalizeFirstLetter(this.__namespace)
+      // const componentNames = [builtin, ...extraComponents]
+      const componentNames = [...Object.keys(this.props.__components), ...extraComponents];
+      return !isSchema(schema) || !componentNames.includes(schema?.componentName ?? '');
+    };
+    get appHelper() {
+      return this.props.__appHelper;
+    }
+    get requestHandlersMap() {
+      return this.appHelper?.requestHandlersMap;
+    }
+    get utils() {
+      return this.appHelper?.utils;
+    }
+    get constants() {
+      return this.appHelper?.constants;
+    }
+
+    // render() {
+    //   return null
+    // }
+  };
+}
+
+function componentRendererFactory() {
+  const BaseRenderer = baseRendererFactory();
+  return class CompRenderer extends BaseRenderer {
+    static displayName = 'CompRenderer';
+    __namespace = 'component';
+    __afterInit(props, ...rest) {
+      this.__generateCtx({
+        component: this
+      });
+      const schema = props.__schema || {};
+      this.state = this.__parseData(schema.state || {});
+      this.__initDataSource(props);
+      this.__executeLifeCycleMethod('constructor', [props, ...rest]);
+    }
+    render() {
+      const {
+        __schema
+      } = this.props;
+      if (this.__checkSchema(__schema)) {
+        return '自定义组件 schema 结构异常！';
+      }
+      logger.log(`${CompRenderer.displayName} render - ${__schema.componentName}`);
+      this.__generateCtx({
+        component: this
+      });
+      this.__render();
+      const noContainer = this.__parseData(__schema.props?.noContainer);
+      this.__bindCustomMethods(this.props);
+      if (noContainer) {
+        return this.__renderContextProvider({
+          compContext: this
+        });
+      }
+      const Comp = this.__getComponentView();
+      if (!Comp) {
+        return this.__renderContent(this.__renderContextProvider({
+          compContext: this
+        }));
+      }
+      return this.__renderComp(Comp, {
+        compContext: this
+      });
+    }
+  };
+}
+
+function pageRendererFactory() {
+  const BaseRenderer = baseRendererFactory();
+  return class PageRenderer extends BaseRenderer {
+    static displayName = 'PageRenderer';
+    __namespace = 'page';
+    __afterInit(props, ...rest) {
+      const schema = props.__schema || {};
+      this.state = this.__parseData(schema.state || {});
+      this.__initDataSource(props);
+      this.__executeLifeCycleMethod('constructor', [props, ...rest]);
+    }
+    async componentDidUpdate(prevProps, _prevState, snapshot) {
+      const {
+        __ctx
+      } = this.props;
+      // 当编排的时候修改 schema.state 值，需要将最新 schema.state 值 setState
+      if (JSON.stringify(prevProps.__schema.state) !== JSON.stringify(this.props.__schema.state)) {
+        const newState = this.__parseData(this.props.__schema.state, __ctx);
+        this.setState(newState);
+      }
+      super.componentDidUpdate?.(prevProps, _prevState, snapshot);
+    }
+    setState(state, callback) {
+      logger.log('page set state', state);
+      super.setState(state, callback);
+    }
+    render() {
+      const {
+        __schema
+      } = this.props;
+      if (this.__checkSchema(__schema)) {
+        return '页面schema结构异常！';
+      }
+      logger.log(`${PageRenderer.displayName} render - ${__schema.componentName}`);
+      this.__bindCustomMethods(this.props);
+      this.__initDataSource(this.props);
+      this.__generateCtx({
+        page: this
+      });
+      this.__render();
+      const Comp = this.__getComponentView();
+      if (!Comp) {
+        return this.__renderContent(this.__renderContextProvider({
+          pageContext: this
+        }));
+      }
+      return this.__renderComp(Comp, {
+        pageContext: this
+      });
+    }
+  };
+}
+
+const FaultComponent = ({
+  componentName = '',
+  error
+}) => {
+  logger.error(`${componentName} 组件渲染异常, 异常原因: ${error?.message || error || '未知'}`);
+  return /*#__PURE__*/React.createElement("div", {
+    role: "alert",
+    "aria-label": `${componentName} 组件渲染异常`,
+    style: {
+      width: '100%',
+      height: '50px',
+      lineHeight: '50px',
+      textAlign: 'center',
+      fontSize: '15px',
+      color: '#ef4444',
+      border: '2px solid #ef4444'
+    }
+  }, componentName, " \u7EC4\u4EF6\u6E32\u67D3\u5F02\u5E38\uFF0C\u8BF7\u67E5\u770B\u63A7\u5236\u53F0\u65E5\u5FD7");
+};
+
+const NotFoundComponent = ({
+  componentName = '',
+  enableStrictNotFoundMode,
+  children
+}) => {
+  logger.warn(`Component ${componentName} not found`);
+  if (enableStrictNotFoundMode) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, `${componentName} Component Not Found`);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    role: "alert",
+    "aria-label": `${componentName} component not found`,
+    style: {
+      width: '100%',
+      height: '50px',
+      lineHeight: '50px',
+      textAlign: 'center',
+      fontSize: '15px',
+      color: '#eab308',
+      border: '2px solid #eab308'
+    }
+  }, `${componentName} Component Not Found`);
+};
+
+function rendererFactory() {
+  const RENDERER_COMPS = adapter.getRenderers();
+  return class Renderer extends Component {
+    static displayName = 'Renderer';
+    state = {};
+    __ref;
+    static defaultProps = {
+      appHelper: undefined,
+      components: {},
+      designMode: 'live',
+      suspended: false,
+      schema: {},
+      onCompGetRef: () => {},
+      onCompGetCtx: () => {},
+      thisRequiredInJSE: true
+    };
+    constructor(props) {
+      super(props);
+      this.state = {};
+      logger$1.log(`entry.constructor - ${props?.schema?.componentName}`);
+    }
+    async componentDidMount() {
+      logger$1.log(`entry.componentDidMount - ${this.props.schema && this.props.schema.componentName}`);
+    }
+    async componentDidUpdate() {
+      logger$1.log(`entry.componentDidUpdate - ${this.props?.schema?.componentName}`);
+    }
+    async componentWillUnmount() {
+      logger$1.log(`entry.componentWillUnmount - ${this.props?.schema?.componentName}`);
+    }
+    componentDidCatch(error) {
+      this.state.engineRenderError = true;
+      this.state.error = error;
+    }
+    shouldComponentUpdate(nextProps) {
+      return !nextProps.suspended;
+    }
+    __getRef = ref => {
+      this.__ref = ref;
+      if (ref) {
+        this.props.onCompGetRef?.(this.props.schema, ref);
+      }
+    };
+    isValidComponent(SetComponent) {
+      return SetComponent;
+    }
+    createElement(SetComponent, props, children) {
+      return (this.props.customCreateElement || createElement)(SetComponent, props, children);
+    }
+    getNotFoundComponent() {
+      return this.props.notFoundComponent || NotFoundComponent;
+    }
+    getFaultComponent() {
+      return this.props.faultComponent || FaultComponent;
+    }
+    render() {
+      const {
+        schema,
+        designMode,
+        appHelper,
+        components
+      } = this.props;
+      if (isEmpty(schema)) {
+        return null;
+      }
+      if (!isSchema(schema)) {
+        logger$1.error('The root component name needs to be one of Page、Block、Component, please check the schema: ', schema);
+        return '模型结构异常';
+      }
+      logger$1.log('entry.render');
+      const allComponents = {
+        ...components,
+        ...RENDERER_COMPS
+      };
+      // TODO: 默认最顶层使用 PageRenderer
+      const Comp = allComponents.PageRenderer;
+      if (this.state && this.state.engineRenderError) {
+        return /*#__PURE__*/createElement(this.getFaultComponent(), {
+          componentName: schema.componentName,
+          error: this.state.error
+        });
+      }
+      if (!Comp) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(RendererContext.Provider, {
+        value: {
+          appHelper,
+          components: allComponents,
+          engine: this
+        }
+      }, /*#__PURE__*/React.createElement(Comp, _extends({
+        key: schema.__ctx && `${schema.__ctx.lceKey}_${schema.__ctx.idx || '0'}`
+        // ref={this.__getRef}
+        ,
+        __appHelper: appHelper,
+        __components: allComponents,
+        __schema: schema,
+        __designMode: designMode
+      }, this.props)));
+    }
+  };
+}
+
+const DEV = '_EASY_EDITOR_DEV_';
+
+export { DEV, RendererContext, SettingFieldView, SettingRender, adapter, baseRendererFactory, capitalizeFirstLetter, checkPropTypes, classnames, cloneEnumerableProperty, compWrapper, componentRendererFactory, contextFactory, createForwardRefHocElement, executeLifeCycleMethod, getFileCssName, getSchemaChildren, getValue, inSameDomain, isReactClass, isReactComponent, isSchema, isString, isUseLoop, leafWrapper, logger, pageRendererFactory, parseData, parseExpression, parseThisRequiredExpression, rendererFactory, transformArrayToMap, transformStringToFunction, useRendererContext };