@easy-editor/react-renderer 0.0.18 → 1.0.1

package/dist/index.js

@@ -1,261 +1,8 @@
-import { observer } from 'mobx-react';
-import { createContext, useContext, useMemo, Component, forwardRef, createElement, PureComponent } from 'react';
-import { isSetterConfig, isJSExpression, isJSFunction, createLogger, DESIGNER_EVENT, TRANSFORM_STAGE, logger as logger$1 } from '@easy-editor/core';
+import { DESIGNER_EVENT, TRANSFORM_STAGE, isJSExpression, isJSFunction, isSetterConfig } from '@easy-editor/core';
+import { logger, isSchema, getValue as getValue$1, parseExpression, parseData, DataHelper, isUseLoop, transformArrayToMap, transformStringToFunction, classnames, getFileCssName, checkPropTypes } from '@easy-editor/renderer-core';
+import { createContext, useContext, forwardRef, createElement, Component, PureComponent, useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-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__*/jsx(SetterComponent, {
-    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: children
-  }, field.id);
-});
-
-const SettingFieldItem = observer(({
-  field
-}) => {
-  const {
-    customFieldItem
-  } = useSettingRendererContext();
-  if (customFieldItem) {
-    return customFieldItem(field, /*#__PURE__*/jsx(SettingSetter, {
-      field: field
-    }));
-  }
-  return /*#__PURE__*/jsxs("div", {
-    className: "space-y-2",
-    children: [/*#__PURE__*/jsx("label", {
-      htmlFor: field.id,
-      className: "block text-sm font-medium text-gray-700",
-      children: field.title
-    }), /*#__PURE__*/jsx(SettingSetter, {
-      field: field
-    })]
-  });
-});
-const SettingFieldGroup = observer(({
-  field
-}) => {
-  const {
-    customFieldGroup
-  } = useSettingRendererContext();
-  if (customFieldGroup) {
-    return customFieldGroup(field, /*#__PURE__*/jsx(SettingSetter, {
-      field: field,
-      children: field.items?.map(item => /*#__PURE__*/jsx(SettingFieldView, {
-        field: item
-      }, item.id))
-    }));
-  }
-
-  // 如果 field 没有 setter，则理解为其 父级 field 的 items 数据
-  if (!field.setter) {
-    return field.items?.map(item => /*#__PURE__*/jsx(SettingFieldView, {
-      field: item
-    }, item.id));
-  }
-  return /*#__PURE__*/jsx(SettingSetter, {
-    field: field,
-    children: field.items?.map(item => /*#__PURE__*/jsx(SettingFieldView, {
-      field: item
-    }, item.id))
-  });
-});
-const SettingFieldView = ({
-  field
-}) => {
-  if (field.isGroup) {
-    return /*#__PURE__*/jsx(SettingFieldGroup, {
-      field: field
-    }, field.id);
-  } else {
-    return /*#__PURE__*/jsx(SettingFieldItem, {
-      field: field
-    }, 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__*/jsx("div", {
-      className: "lc-settings-main",
-      children: /*#__PURE__*/jsx("div", {
-        className: "lc-settings-notice",
-        children: /*#__PURE__*/jsx("p", {
-          children: "Please select a node in canvas"
-        })
-      })
-    });
-  }
-
-  // 当节点被锁定，且未开启锁定后容器可设置属性
-  if (settings.isLocked) {
-    return /*#__PURE__*/jsx("div", {
-      className: "lc-settings-main",
-      children: /*#__PURE__*/jsx("div", {
-        className: "lc-settings-notice",
-        children: /*#__PURE__*/jsx("p", {
-          children: "Current node is locked"
-        })
-      })
-    });
-  }
-  if (Array.isArray(settings.items) && settings.items.length === 0) {
-    return /*#__PURE__*/jsx("div", {
-      className: "lc-settings-main",
-      children: /*#__PURE__*/jsx("div", {
-        className: "lc-settings-notice",
-        children: /*#__PURE__*/jsx("p", {
-          children: "No config found for this type of component"
-        })
-      })
-    });
-  }
-  if (!settings.isSameComponent) {
-    // TODO: future support 获取设置项交集编辑
-    return /*#__PURE__*/jsx("div", {
-      className: "lc-settings-main",
-      children: /*#__PURE__*/jsx("div", {
-        className: "lc-settings-notice",
-        children: /*#__PURE__*/jsx("p", {
-          children: "Please select same kind of components"
-        })
-      })
-    });
-  }
-  return /*#__PURE__*/jsx(SettingRendererContext.Provider, {
-    value: ctx,
-    children: items?.map(item => /*#__PURE__*/jsx(SettingFieldView, {
-      field: item
-    }, item.id))
-  });
-});
+import { observer } from 'mobx-react';
 
 class Adapter {
   renderers = {};
@@ -284,12 +31,12 @@ var root = freeGlobal || freeSelf || Function('return this')();
 
 var Symbol = root.Symbol;
 
-var objectProto$c = Object.prototype;
-var hasOwnProperty$a = objectProto$c.hasOwnProperty;
-var nativeObjectToString$1 = objectProto$c.toString;
+var objectProto$7 = Object.prototype;
+var hasOwnProperty$5 = objectProto$7.hasOwnProperty;
+var nativeObjectToString$1 = objectProto$7.toString;
 var symToStringTag$1 = Symbol ? Symbol.toStringTag : undefined;
 function getRawTag(value) {
-  var isOwn = hasOwnProperty$a.call(value, symToStringTag$1),
+  var isOwn = hasOwnProperty$5.call(value, symToStringTag$1),
     tag = value[symToStringTag$1];
   try {
     value[symToStringTag$1] = undefined;
@@ -306,8 +53,8 @@ function getRawTag(value) {
   return result;
 }
 
-var objectProto$b = Object.prototype;
-var nativeObjectToString = objectProto$b.toString;
+var objectProto$6 = Object.prototype;
+var nativeObjectToString = objectProto$6.toString;
 function objectToString(value) {
   return nativeObjectToString.call(value);
 }
@@ -345,7 +92,7 @@ function baseTrim(string) {
   return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '') : string;
 }
 
-function isObject$1(value) {
+function isObject(value) {
   var type = typeof value;
   return value != null && (type == 'object' || type == 'function');
 }
@@ -362,9 +109,9 @@ function toNumber(value) {
   if (isSymbol(value)) {
     return NAN;
   }
-  if (isObject$1(value)) {
+  if (isObject(value)) {
     var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
-    value = isObject$1(other) ? other + '' : other;
+    value = isObject(other) ? other + '' : other;
   }
   if (typeof value != 'string') {
     return value === 0 ? value : +value;
@@ -383,7 +130,7 @@ var asyncTag = '[object AsyncFunction]',
   genTag = '[object GeneratorFunction]',
   proxyTag = '[object Proxy]';
 function isFunction(value) {
-  if (!isObject$1(value)) {
+  if (!isObject(value)) {
     return false;
   }
   var tag = baseGetTag(value);
@@ -400,12 +147,12 @@ function isMasked(func) {
   return !!maskSrcKey && maskSrcKey in func;
 }
 
-var funcProto$2 = Function.prototype;
-var funcToString$2 = funcProto$2.toString;
+var funcProto$1 = Function.prototype;
+var funcToString$1 = funcProto$1.toString;
 function toSource(func) {
   if (func != null) {
     try {
-      return funcToString$2.call(func);
+      return funcToString$1.call(func);
     } catch (e) {}
     try {
       return func + '';
@@ -416,117 +163,30 @@ function toSource(func) {
 
 var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
 var reIsHostCtor = /^\[object .+?Constructor\]$/;
-var funcProto$1 = Function.prototype,
-  objectProto$a = Object.prototype;
-var funcToString$1 = funcProto$1.toString;
-var hasOwnProperty$9 = objectProto$a.hasOwnProperty;
-var reIsNative = RegExp('^' + funcToString$1.call(hasOwnProperty$9).replace(reRegExpChar, '\\$&').replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$');
+var funcProto = Function.prototype,
+  objectProto$5 = Object.prototype;
+var funcToString = funcProto.toString;
+var hasOwnProperty$4 = objectProto$5.hasOwnProperty;
+var reIsNative = RegExp('^' + funcToString.call(hasOwnProperty$4).replace(reRegExpChar, '\\$&').replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$');
 function baseIsNative(value) {
-  if (!isObject$1(value) || isMasked(value)) {
+  if (!isObject(value) || isMasked(value)) {
     return false;
   }
   var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
   return pattern.test(toSource(value));
 }
 
-function getValue$1(object, key) {
+function getValue(object, key) {
   return object == null ? undefined : object[key];
 }
 
 function getNative(object, key) {
-  var value = getValue$1(object, key);
+  var value = getValue(object, key);
   return baseIsNative(value) ? value : undefined;
 }
 
 var WeakMap = getNative(root, 'WeakMap');
 
-var objectCreate = Object.create;
-var baseCreate = function () {
-  function object() {}
-  return function (proto) {
-    if (!isObject$1(proto)) {
-      return {};
-    }
-    if (objectCreate) {
-      return objectCreate(proto);
-    }
-    object.prototype = proto;
-    var result = new object();
-    object.prototype = undefined;
-    return result;
-  };
-}();
-
-function apply(func, thisArg, args) {
-  switch (args.length) {
-    case 0:
-      return func.call(thisArg);
-    case 1:
-      return func.call(thisArg, args[0]);
-    case 2:
-      return func.call(thisArg, args[0], args[1]);
-    case 3:
-      return func.call(thisArg, args[0], args[1], args[2]);
-  }
-  return func.apply(thisArg, args);
-}
-
-function copyArray(source, array) {
-  var index = -1,
-    length = source.length;
-  array || (array = Array(length));
-  while (++index < length) {
-    array[index] = source[index];
-  }
-  return array;
-}
-
-var HOT_COUNT = 800,
-  HOT_SPAN = 16;
-var nativeNow = Date.now;
-function shortOut(func) {
-  var count = 0,
-    lastCalled = 0;
-  return function () {
-    var stamp = nativeNow(),
-      remaining = HOT_SPAN - (stamp - lastCalled);
-    lastCalled = stamp;
-    if (remaining > 0) {
-      if (++count >= HOT_COUNT) {
-        return arguments[0];
-      }
-    } else {
-      count = 0;
-    }
-    return func.apply(undefined, arguments);
-  };
-}
-
-function constant(value) {
-  return function () {
-    return value;
-  };
-}
-
-var defineProperty = function () {
-  try {
-    var func = getNative(Object, 'defineProperty');
-    func({}, '', {});
-    return func;
-  } catch (e) {}
-}();
-
-var baseSetToString = !defineProperty ? identity : function (func, string) {
-  return defineProperty(func, 'toString', {
-    'configurable': true,
-    'enumerable': false,
-    'value': constant(string),
-    'writable': true
-  });
-};
-
-var setToString = shortOut(baseSetToString);
-
 function arrayEach(array, iteratee) {
   var index = -1,
     length = array == null ? 0 : array.length;
@@ -546,77 +206,6 @@ function isIndex(value, length) {
   return !!length && (type == 'number' || type != 'symbol' && reIsUint.test(value)) && value > -1 && value % 1 == 0 && value < length;
 }
 
-function baseAssignValue(object, key, value) {
-  if (key == '__proto__' && defineProperty) {
-    defineProperty(object, key, {
-      'configurable': true,
-      'enumerable': true,
-      'value': value,
-      'writable': true
-    });
-  } else {
-    object[key] = value;
-  }
-}
-
-function eq(value, other) {
-  return value === other || value !== value && other !== other;
-}
-
-var objectProto$9 = Object.prototype;
-var hasOwnProperty$8 = objectProto$9.hasOwnProperty;
-function assignValue(object, key, value) {
-  var objValue = object[key];
-  if (!(hasOwnProperty$8.call(object, key) && eq(objValue, value)) || value === undefined && !(key in object)) {
-    baseAssignValue(object, key, value);
-  }
-}
-
-function copyObject(source, props, object, customizer) {
-  var isNew = !object;
-  object || (object = {});
-  var index = -1,
-    length = props.length;
-  while (++index < length) {
-    var key = props[index];
-    var newValue = undefined;
-    if (newValue === undefined) {
-      newValue = source[key];
-    }
-    if (isNew) {
-      baseAssignValue(object, key, newValue);
-    } else {
-      assignValue(object, key, newValue);
-    }
-  }
-  return object;
-}
-
-var nativeMax$1 = Math.max;
-function overRest(func, start, transform) {
-  start = nativeMax$1(start === undefined ? func.length - 1 : start, 0);
-  return function () {
-    var args = arguments,
-      index = -1,
-      length = nativeMax$1(args.length - start, 0),
-      array = Array(length);
-    while (++index < length) {
-      array[index] = args[start + index];
-    }
-    index = -1;
-    var otherArgs = Array(start + 1);
-    while (++index < start) {
-      otherArgs[index] = args[index];
-    }
-    otherArgs[start] = transform(array);
-    return apply(func, this, otherArgs);
-  };
-}
-
-function baseRest(func, start) {
-  return setToString(overRest(func, start, identity), func + '');
-}
-
 var MAX_SAFE_INTEGER = 9007199254740991;
 function isLength(value) {
   return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
@@ -626,43 +215,10 @@ function isArrayLike(value) {
   return value != null && isLength(value.length) && !isFunction(value);
 }
 
-function isIterateeCall(value, index, object) {
-  if (!isObject$1(object)) {
-    return false;
-  }
-  var type = typeof index;
-  if (type == 'number' ? isArrayLike(object) && isIndex(index, object.length) : type == 'string' && index in object) {
-    return eq(object[index], value);
-  }
-  return false;
-}
-
-function createAssigner(assigner) {
-  return baseRest(function (object, sources) {
-    var index = -1,
-      length = sources.length,
-      customizer = length > 1 ? sources[length - 1] : undefined,
-      guard = length > 2 ? sources[2] : undefined;
-    customizer = assigner.length > 3 && typeof customizer == 'function' ? (length--, customizer) : undefined;
-    if (guard && isIterateeCall(sources[0], sources[1], guard)) {
-      customizer = length < 3 ? undefined : customizer;
-      length = 1;
-    }
-    object = Object(object);
-    while (++index < length) {
-      var source = sources[index];
-      if (source) {
-        assigner(object, source, index, customizer);
-      }
-    }
-    return object;
-  });
-}
-
-var objectProto$8 = Object.prototype;
+var objectProto$4 = Object.prototype;
 function isPrototype(value) {
   var Ctor = value && value.constructor,
-    proto = typeof Ctor == 'function' && Ctor.prototype || objectProto$8;
+    proto = typeof Ctor == 'function' && Ctor.prototype || objectProto$4;
   return value === proto;
 }
 
@@ -680,24 +236,24 @@ function baseIsArguments(value) {
   return isObjectLike(value) && baseGetTag(value) == argsTag$1;
 }
 
-var objectProto$7 = Object.prototype;
-var hasOwnProperty$7 = objectProto$7.hasOwnProperty;
-var propertyIsEnumerable = objectProto$7.propertyIsEnumerable;
+var objectProto$3 = Object.prototype;
+var hasOwnProperty$3 = objectProto$3.hasOwnProperty;
+var propertyIsEnumerable = objectProto$3.propertyIsEnumerable;
 var isArguments = baseIsArguments(function () {
   return arguments;
 }()) ? baseIsArguments : function (value) {
-  return isObjectLike(value) && hasOwnProperty$7.call(value, 'callee') && !propertyIsEnumerable.call(value, 'callee');
+  return isObjectLike(value) && hasOwnProperty$3.call(value, 'callee') && !propertyIsEnumerable.call(value, 'callee');
 };
 
 function stubFalse() {
   return false;
 }
 
-var freeExports$2 = typeof exports == 'object' && exports && !exports.nodeType && exports;
-var freeModule$2 = freeExports$2 && typeof module == 'object' && module && !module.nodeType && module;
-var moduleExports$2 = freeModule$2 && freeModule$2.exports === freeExports$2;
-var Buffer$1 = moduleExports$2 ? root.Buffer : undefined;
-var nativeIsBuffer = Buffer$1 ? Buffer$1.isBuffer : undefined;
+var freeExports$1 = typeof exports == 'object' && exports && !exports.nodeType && exports;
+var freeModule$1 = freeExports$1 && typeof module == 'object' && module && !module.nodeType && module;
+var moduleExports$1 = freeModule$1 && freeModule$1.exports === freeExports$1;
+var Buffer = moduleExports$1 ? root.Buffer : undefined;
+var nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined;
 var isBuffer = nativeIsBuffer || stubFalse;
 
 var argsTag = '[object Arguments]',
@@ -708,7 +264,7 @@ var argsTag = '[object Arguments]',
   funcTag = '[object Function]',
   mapTag$2 = '[object Map]',
   numberTag = '[object Number]',
-  objectTag$2 = '[object Object]',
+  objectTag$1 = '[object Object]',
   regexpTag = '[object RegExp]',
   setTag$2 = '[object Set]',
   stringTag = '[object String]',
@@ -726,7 +282,7 @@ var arrayBufferTag = '[object ArrayBuffer]',
   uint32Tag = '[object Uint32Array]';
 var typedArrayTags = {};
 typedArrayTags[float32Tag] = typedArrayTags[float64Tag] = typedArrayTags[int8Tag] = typedArrayTags[int16Tag] = typedArrayTags[int32Tag] = typedArrayTags[uint8Tag] = typedArrayTags[uint8ClampedTag] = typedArrayTags[uint16Tag] = typedArrayTags[uint32Tag] = true;
-typedArrayTags[argsTag] = typedArrayTags[arrayTag] = typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] = typedArrayTags[dataViewTag$1] = typedArrayTags[dateTag] = typedArrayTags[errorTag] = typedArrayTags[funcTag] = typedArrayTags[mapTag$2] = typedArrayTags[numberTag] = typedArrayTags[objectTag$2] = typedArrayTags[regexpTag] = typedArrayTags[setTag$2] = typedArrayTags[stringTag] = typedArrayTags[weakMapTag$1] = false;
+typedArrayTags[argsTag] = typedArrayTags[arrayTag] = typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] = typedArrayTags[dataViewTag$1] = typedArrayTags[dateTag] = typedArrayTags[errorTag] = typedArrayTags[funcTag] = typedArrayTags[mapTag$2] = typedArrayTags[numberTag] = typedArrayTags[objectTag$1] = typedArrayTags[regexpTag] = typedArrayTags[setTag$2] = typedArrayTags[stringTag] = typedArrayTags[weakMapTag$1] = false;
 function baseIsTypedArray(value) {
   return isObjectLike(value) && isLength(value.length) && !!typedArrayTags[baseGetTag(value)];
 }
@@ -737,13 +293,13 @@ function baseUnary(func) {
   };
 }
 
-var freeExports$1 = typeof exports == 'object' && exports && !exports.nodeType && exports;
-var freeModule$1 = freeExports$1 && typeof module == 'object' && module && !module.nodeType && module;
-var moduleExports$1 = freeModule$1 && freeModule$1.exports === freeExports$1;
-var freeProcess = moduleExports$1 && freeGlobal.process;
+var freeExports = typeof exports == 'object' && exports && !exports.nodeType && exports;
+var freeModule = freeExports && typeof module == 'object' && module && !module.nodeType && module;
+var moduleExports = freeModule && freeModule.exports === freeExports;
+var freeProcess = moduleExports && freeGlobal.process;
 var nodeUtil = function () {
   try {
-    var types = freeModule$1 && freeModule$1.require && freeModule$1.require('util').types;
+    var types = freeModule && freeModule.require && freeModule.require('util').types;
     if (types) {
       return types;
     }
@@ -754,8 +310,8 @@ var nodeUtil = function () {
 var nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;
 var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;
 
-var objectProto$6 = Object.prototype;
-var hasOwnProperty$6 = objectProto$6.hasOwnProperty;
+var objectProto$2 = Object.prototype;
+var hasOwnProperty$2 = objectProto$2.hasOwnProperty;
 function arrayLikeKeys(value, inherited) {
   var isArr = isArray(value),
     isArg = !isArr && isArguments(value),
@@ -765,7 +321,7 @@ function arrayLikeKeys(value, inherited) {
     result = skipIndexes ? baseTimes(value.length, String) : [],
     length = result.length;
   for (var key in value) {
-    if ((inherited || hasOwnProperty$6.call(value, key)) && !(skipIndexes && (
+    if ((hasOwnProperty$2.call(value, key)) && !(skipIndexes && (
     key == 'length' ||
     isBuff && (key == 'offset' || key == 'parent') ||
     isType && (key == 'buffer' || key == 'byteLength' || key == 'byteOffset') ||
@@ -784,15 +340,15 @@ function overArg(func, transform) {
 
 var nativeKeys = overArg(Object.keys, Object);
 
-var objectProto$5 = Object.prototype;
-var hasOwnProperty$5 = objectProto$5.hasOwnProperty;
+var objectProto$1 = Object.prototype;
+var hasOwnProperty$1 = objectProto$1.hasOwnProperty;
 function baseKeys(object) {
   if (!isPrototype(object)) {
     return nativeKeys(object);
   }
   var result = [];
   for (var key in Object(object)) {
-    if (hasOwnProperty$5.call(object, key) && key != 'constructor') {
+    if (hasOwnProperty$1.call(object, key) && key != 'constructor') {
       result.push(key);
     }
   }
@@ -803,297 +359,8 @@ function keys(object) {
   return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);
 }
 
-function nativeKeysIn(object) {
-  var result = [];
-  if (object != null) {
-    for (var key in Object(object)) {
-      result.push(key);
-    }
-  }
-  return result;
-}
-
-var objectProto$4 = Object.prototype;
-var hasOwnProperty$4 = objectProto$4.hasOwnProperty;
-function baseKeysIn(object) {
-  if (!isObject$1(object)) {
-    return nativeKeysIn(object);
-  }
-  var isProto = isPrototype(object),
-    result = [];
-  for (var key in object) {
-    if (!(key == 'constructor' && (isProto || !hasOwnProperty$4.call(object, key)))) {
-      result.push(key);
-    }
-  }
-  return result;
-}
-
-function keysIn(object) {
-  return isArrayLike(object) ? arrayLikeKeys(object, true) : baseKeysIn(object);
-}
-
-var nativeCreate = getNative(Object, 'create');
-
-function hashClear() {
-  this.__data__ = nativeCreate ? nativeCreate(null) : {};
-  this.size = 0;
-}
-
-function hashDelete(key) {
-  var result = this.has(key) && delete this.__data__[key];
-  this.size -= result ? 1 : 0;
-  return result;
-}
-
-var HASH_UNDEFINED$1 = '__lodash_hash_undefined__';
-var objectProto$3 = Object.prototype;
-var hasOwnProperty$3 = objectProto$3.hasOwnProperty;
-function hashGet(key) {
-  var data = this.__data__;
-  if (nativeCreate) {
-    var result = data[key];
-    return result === HASH_UNDEFINED$1 ? undefined : result;
-  }
-  return hasOwnProperty$3.call(data, key) ? data[key] : undefined;
-}
-
-var objectProto$2 = Object.prototype;
-var hasOwnProperty$2 = objectProto$2.hasOwnProperty;
-function hashHas(key) {
-  var data = this.__data__;
-  return nativeCreate ? data[key] !== undefined : hasOwnProperty$2.call(data, key);
-}
-
-var HASH_UNDEFINED = '__lodash_hash_undefined__';
-function hashSet(key, value) {
-  var data = this.__data__;
-  this.size += this.has(key) ? 0 : 1;
-  data[key] = nativeCreate && value === undefined ? HASH_UNDEFINED : value;
-  return this;
-}
-
-function Hash(entries) {
-  var index = -1,
-    length = entries == null ? 0 : entries.length;
-  this.clear();
-  while (++index < length) {
-    var entry = entries[index];
-    this.set(entry[0], entry[1]);
-  }
-}
-Hash.prototype.clear = hashClear;
-Hash.prototype['delete'] = hashDelete;
-Hash.prototype.get = hashGet;
-Hash.prototype.has = hashHas;
-Hash.prototype.set = hashSet;
-
-function listCacheClear() {
-  this.__data__ = [];
-  this.size = 0;
-}
-
-function assocIndexOf(array, key) {
-  var length = array.length;
-  while (length--) {
-    if (eq(array[length][0], key)) {
-      return length;
-    }
-  }
-  return -1;
-}
-
-var arrayProto = Array.prototype;
-var splice = arrayProto.splice;
-function listCacheDelete(key) {
-  var data = this.__data__,
-    index = assocIndexOf(data, key);
-  if (index < 0) {
-    return false;
-  }
-  var lastIndex = data.length - 1;
-  if (index == lastIndex) {
-    data.pop();
-  } else {
-    splice.call(data, index, 1);
-  }
-  --this.size;
-  return true;
-}
-
-function listCacheGet(key) {
-  var data = this.__data__,
-    index = assocIndexOf(data, key);
-  return index < 0 ? undefined : data[index][1];
-}
-
-function listCacheHas(key) {
-  return assocIndexOf(this.__data__, key) > -1;
-}
-
-function listCacheSet(key, value) {
-  var data = this.__data__,
-    index = assocIndexOf(data, key);
-  if (index < 0) {
-    ++this.size;
-    data.push([key, value]);
-  } else {
-    data[index][1] = value;
-  }
-  return this;
-}
-
-function ListCache(entries) {
-  var index = -1,
-    length = entries == null ? 0 : entries.length;
-  this.clear();
-  while (++index < length) {
-    var entry = entries[index];
-    this.set(entry[0], entry[1]);
-  }
-}
-ListCache.prototype.clear = listCacheClear;
-ListCache.prototype['delete'] = listCacheDelete;
-ListCache.prototype.get = listCacheGet;
-ListCache.prototype.has = listCacheHas;
-ListCache.prototype.set = listCacheSet;
-
 var Map$1 = getNative(root, 'Map');
 
-function mapCacheClear() {
-  this.size = 0;
-  this.__data__ = {
-    'hash': new Hash(),
-    'map': new (Map$1 || ListCache)(),
-    'string': new Hash()
-  };
-}
-
-function isKeyable(value) {
-  var type = typeof value;
-  return type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean' ? value !== '__proto__' : value === null;
-}
-
-function getMapData(map, key) {
-  var data = map.__data__;
-  return isKeyable(key) ? data[typeof key == 'string' ? 'string' : 'hash'] : data.map;
-}
-
-function mapCacheDelete(key) {
-  var result = getMapData(this, key)['delete'](key);
-  this.size -= result ? 1 : 0;
-  return result;
-}
-
-function mapCacheGet(key) {
-  return getMapData(this, key).get(key);
-}
-
-function mapCacheHas(key) {
-  return getMapData(this, key).has(key);
-}
-
-function mapCacheSet(key, value) {
-  var data = getMapData(this, key),
-    size = data.size;
-  data.set(key, value);
-  this.size += data.size == size ? 0 : 1;
-  return this;
-}
-
-function MapCache(entries) {
-  var index = -1,
-    length = entries == null ? 0 : entries.length;
-  this.clear();
-  while (++index < length) {
-    var entry = entries[index];
-    this.set(entry[0], entry[1]);
-  }
-}
-MapCache.prototype.clear = mapCacheClear;
-MapCache.prototype['delete'] = mapCacheDelete;
-MapCache.prototype.get = mapCacheGet;
-MapCache.prototype.has = mapCacheHas;
-MapCache.prototype.set = mapCacheSet;
-
-var getPrototype = overArg(Object.getPrototypeOf, Object);
-
-var objectTag$1 = '[object Object]';
-var funcProto = Function.prototype,
-  objectProto$1 = Object.prototype;
-var funcToString = funcProto.toString;
-var hasOwnProperty$1 = objectProto$1.hasOwnProperty;
-var objectCtorString = funcToString.call(Object);
-function isPlainObject(value) {
-  if (!isObjectLike(value) || baseGetTag(value) != objectTag$1) {
-    return false;
-  }
-  var proto = getPrototype(value);
-  if (proto === null) {
-    return true;
-  }
-  var Ctor = hasOwnProperty$1.call(proto, 'constructor') && proto.constructor;
-  return typeof Ctor == 'function' && Ctor instanceof Ctor && funcToString.call(Ctor) == objectCtorString;
-}
-
-function stackClear() {
-  this.__data__ = new ListCache();
-  this.size = 0;
-}
-
-function stackDelete(key) {
-  var data = this.__data__,
-    result = data['delete'](key);
-  this.size = data.size;
-  return result;
-}
-
-function stackGet(key) {
-  return this.__data__.get(key);
-}
-
-function stackHas(key) {
-  return this.__data__.has(key);
-}
-
-var LARGE_ARRAY_SIZE = 200;
-function stackSet(key, value) {
-  var data = this.__data__;
-  if (data instanceof ListCache) {
-    var pairs = data.__data__;
-    if (!Map$1 || pairs.length < LARGE_ARRAY_SIZE - 1) {
-      pairs.push([key, value]);
-      this.size = ++data.size;
-      return this;
-    }
-    data = this.__data__ = new MapCache(pairs);
-  }
-  data.set(key, value);
-  this.size = data.size;
-  return this;
-}
-
-function Stack(entries) {
-  var data = this.__data__ = new ListCache(entries);
-  this.size = data.size;
-}
-Stack.prototype.clear = stackClear;
-Stack.prototype['delete'] = stackDelete;
-Stack.prototype.get = stackGet;
-Stack.prototype.has = stackHas;
-Stack.prototype.set = stackSet;
-
-var freeExports = typeof exports == 'object' && exports && !exports.nodeType && exports;
-var freeModule = freeExports && typeof module == 'object' && module && !module.nodeType && module;
-var moduleExports = freeModule && freeModule.exports === freeExports;
-var Buffer = moduleExports ? root.Buffer : undefined;
-  Buffer ? Buffer.allocUnsafe : undefined;
-function cloneBuffer(buffer, isDeep) {
-  {
-    return buffer.slice();
-  }
-}
-
 var DataView = getNative(root, 'DataView');
 
 var Promise$1 = getNative(root, 'Promise');
@@ -1135,23 +402,6 @@ if (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag || Map$1
   };
 }
 
-var Uint8Array = root.Uint8Array;
-
-function cloneArrayBuffer(arrayBuffer) {
-  var result = new arrayBuffer.constructor(arrayBuffer.byteLength);
-  new Uint8Array(result).set(new Uint8Array(arrayBuffer));
-  return result;
-}
-
-function cloneTypedArray(typedArray, isDeep) {
-  var buffer = cloneArrayBuffer(typedArray.buffer) ;
-  return new typedArray.constructor(buffer, typedArray.byteOffset, typedArray.length);
-}
-
-function initCloneObject(object) {
-  return typeof object.constructor == 'function' && !isPrototype(object) ? baseCreate(getPrototype(object)) : {};
-}
-
 function createBaseFor(fromRight) {
   return function (object, iteratee, keysFunc) {
     var index = -1,
@@ -1218,7 +468,7 @@ function debounce(func, wait, options) {
     throw new TypeError(FUNC_ERROR_TEXT);
   }
   wait = toNumber(wait) || 0;
-  if (isObject$1(options)) {
+  if (isObject(options)) {
     leading = !!options.leading;
     maxing = 'maxWait' in options;
     maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
@@ -1284,109 +534,19 @@ function debounce(func, wait, options) {
         return leadingEdge(lastCallTime);
       }
       if (maxing) {
-        clearTimeout(timerId);
-        timerId = setTimeout(timerExpired, wait);
-        return invokeFunc(lastCallTime);
-      }
-    }
-    if (timerId === undefined) {
-      timerId = setTimeout(timerExpired, wait);
-    }
-    return result;
-  }
-  debounced.cancel = cancel;
-  debounced.flush = flush;
-  return debounced;
-}
-
-function assignMergeValue(object, key, value) {
-  if (value !== undefined && !eq(object[key], value) || value === undefined && !(key in object)) {
-    baseAssignValue(object, key, value);
-  }
-}
-
-function isArrayLikeObject(value) {
-  return isObjectLike(value) && isArrayLike(value);
-}
-
-function safeGet(object, key) {
-  if (key === 'constructor' && typeof object[key] === 'function') {
-    return;
-  }
-  if (key == '__proto__') {
-    return;
-  }
-  return object[key];
-}
-
-function toPlainObject(value) {
-  return copyObject(value, keysIn(value));
-}
-
-function baseMergeDeep(object, source, key, srcIndex, mergeFunc, customizer, stack) {
-  var objValue = safeGet(object, key),
-    srcValue = safeGet(source, key),
-    stacked = stack.get(srcValue);
-  if (stacked) {
-    assignMergeValue(object, key, stacked);
-    return;
-  }
-  var newValue = customizer ? customizer(objValue, srcValue, key + '', object, source, stack) : undefined;
-  var isCommon = newValue === undefined;
-  if (isCommon) {
-    var isArr = isArray(srcValue),
-      isBuff = !isArr && isBuffer(srcValue),
-      isTyped = !isArr && !isBuff && isTypedArray(srcValue);
-    newValue = srcValue;
-    if (isArr || isBuff || isTyped) {
-      if (isArray(objValue)) {
-        newValue = objValue;
-      } else if (isArrayLikeObject(objValue)) {
-        newValue = copyArray(objValue);
-      } else if (isBuff) {
-        isCommon = false;
-        newValue = cloneBuffer(srcValue);
-      } else if (isTyped) {
-        isCommon = false;
-        newValue = cloneTypedArray(srcValue);
-      } else {
-        newValue = [];
-      }
-    } else if (isPlainObject(srcValue) || isArguments(srcValue)) {
-      newValue = objValue;
-      if (isArguments(objValue)) {
-        newValue = toPlainObject(objValue);
-      } else if (!isObject$1(objValue) || isFunction(objValue)) {
-        newValue = initCloneObject(srcValue);
-      }
-    } else {
-      isCommon = false;
-    }
-  }
-  if (isCommon) {
-    stack.set(srcValue, newValue);
-    mergeFunc(newValue, srcValue, srcIndex, customizer, stack);
-    stack['delete'](srcValue);
-  }
-  assignMergeValue(object, key, newValue);
-}
-
-function baseMerge(object, source, srcIndex, customizer, stack) {
-  if (object === source) {
-    return;
-  }
-  baseFor(source, function (srcValue, key) {
-    stack || (stack = new Stack());
-    if (isObject$1(srcValue)) {
-      baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack);
-    } else {
-      var newValue = customizer ? customizer(safeGet(object, key), srcValue, key + '', object, source, stack) : undefined;
-      if (newValue === undefined) {
-        newValue = srcValue;
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
       }
-      assignMergeValue(object, key, newValue);
     }
-  }, keysIn);
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
 }
 
 function castFunction(value) {
@@ -1424,367 +584,6 @@ function isEmpty(value) {
   return true;
 }
 
-var merge = createAssigner(function (object, source, srcIndex) {
-  baseMerge(object, source, srcIndex);
-});
-
-let RuntimeDataSourceStatus = /*#__PURE__*/function (RuntimeDataSourceStatus) {
-  RuntimeDataSourceStatus["Initial"] = "init";
-  RuntimeDataSourceStatus["Loading"] = "loading";
-  RuntimeDataSourceStatus["Loaded"] = "loaded";
-  RuntimeDataSourceStatus["Error"] = "error";
-  return RuntimeDataSourceStatus;
-}({});
-
-class RuntimeDataSourceItem {
-  _data;
-  _error;
-  _status = RuntimeDataSourceStatus.Initial;
-  _dataSourceConfig;
-  _request;
-  _context;
-  _options;
-  constructor(dataSourceConfig, request, context) {
-    this._dataSourceConfig = dataSourceConfig;
-    this._request = request;
-    this._context = context;
-  }
-  get data() {
-    return this._data;
-  }
-  get error() {
-    return this._error;
-  }
-  get status() {
-    return this._status;
-  }
-  get isLoading() {
-    return this._status === RuntimeDataSourceStatus.Loading;
-  }
-  async load(params) {
-    if (!this._dataSourceConfig) return;
-    if (!this._request) {
-      this._error = new Error(`no ${this._dataSourceConfig.type} handler provide`);
-      this._status = RuntimeDataSourceStatus.Error;
-      throw this._error;
-    }
-    if (this._dataSourceConfig.type === 'urlParams') {
-      const response = await this._request(this._context);
-      this._context.setState({
-        [this._dataSourceConfig.id]: response
-      });
-      this._data = response;
-      this._status = RuntimeDataSourceStatus.Loaded;
-      return response;
-    }
-    if (!this._dataSourceConfig.options) {
-      throw new Error(`${this._dataSourceConfig.id} has no options`);
-    }
-    if (typeof this._dataSourceConfig.options === 'function') {
-      this._options = this._dataSourceConfig.options();
-    }
-    if (!this._options) {
-      throw new Error(`${this._dataSourceConfig.id} options transform error`);
-    }
-    let shouldFetch = true;
-    let fetchOptions = this._options;
-    if (params) {
-      fetchOptions.params = merge(fetchOptions.params, params);
-    }
-    if (this._dataSourceConfig.shouldFetch) {
-      if (typeof this._dataSourceConfig.shouldFetch === 'function') {
-        shouldFetch = this._dataSourceConfig.shouldFetch(fetchOptions);
-      } else if (typeof this._dataSourceConfig.shouldFetch === 'boolean') {
-        shouldFetch = this._dataSourceConfig.shouldFetch;
-      }
-    }
-    if (!shouldFetch) {
-      this._status = RuntimeDataSourceStatus.Error;
-      this._error = new Error(`the ${this._dataSourceConfig.id} request should not fetch, please check the condition`);
-      console.warn(this.error);
-      return;
-    }
-    if (this._dataSourceConfig.willFetch) {
-      try {
-        fetchOptions = await this._dataSourceConfig.willFetch(this._options);
-      } catch (error) {
-        console.error(error);
-      }
-    }
-    const dataHandler = this._dataSourceConfig.dataHandler;
-    const {
-      errorHandler
-    } = this._dataSourceConfig;
-    try {
-      this._status = RuntimeDataSourceStatus.Loading;
-      const result = await this._request(fetchOptions, this._context).then(dataHandler, errorHandler);
-      this._data = result;
-      this._status = RuntimeDataSourceStatus.Loaded;
-      this._context.setState({
-        UNSTABLE_dataSourceUpdatedAt: Date.now(),
-        [this._dataSourceConfig.id]: result
-      });
-      return this._data;
-    } catch (error) {
-      this._error = error;
-      this._status = RuntimeDataSourceStatus.Error;
-      this._context.setState({
-        UNSTABLE_dataSourceUpdatedAt: Date.now(),
-        [`UNSTABLE_${this._dataSourceConfig.id}_error`]: error
-      });
-      throw error;
-    }
-  }
-}
-
-const defaultDataHandler = async response => response.data;
-const defaultWillFetch = options => options;
-const getRequestHandler = (ds, requestHandlersMap) => {
-  if (ds.type === 'custom') {
-    return ds.requestHandler;
-  }
-  return requestHandlersMap[ds.type || 'fetch'];
-};
-const promiseSettled = (Promise.allSettled ? Promise.allSettled.bind(Promise) : null) || (promises => {
-  return Promise.all(promises.map(p => {
-    return p.then(v => ({
-      status: 'fulfilled',
-      value: v
-    })).catch(e => ({
-      status: 'rejected',
-      reason: e
-    }));
-  }));
-});
-
-function isObject(obj) {
-  return Object.prototype.toString.call(obj).indexOf('Object') !== -1;
-}
-const transformExpression = (code, context) => {
-  if (code === undefined) {
-    return () => {};
-  }
-  if (code === '') {
-    return () => '';
-  }
-  try {
-    return new Function(`return (${code})`).call(context);
-  } catch (error) {
-    console.error(`transformExpression error, code is ${code}, context is ${context}, error is ${error}`);
-  }
-};
-const transformFunction = (code, context) => {
-  if (code === undefined) {
-    return () => {};
-  }
-  if (code === '') {
-    return () => '';
-  }
-  try {
-    return new Function(`return (${code})`).call(context).bind(context);
-  } catch (error) {
-    console.error(`transformFunction error, code is ${code}, context is ${context}, error is ${error}`);
-  }
-};
-const transformBoolStr = str => {
-  return str !== 'false';
-};
-const getRuntimeJsValue = (value, context) => {
-  if (!['JSExpression', 'JSFunction'].includes(value.type)) {
-    console.error(`translate error, value is ${JSON.stringify(value)}`);
-    return '';
-  }
-  const code = value.compiled || value.value;
-  return value.type === 'JSFunction' ? transformFunction(code, context) : transformExpression(code, context);
-};
-const getRuntimeBaseValue = (type, value) => {
-  switch (type) {
-    case 'string':
-      return `${value}`;
-    case 'boolean':
-      return typeof value === 'string' ? transformBoolStr(value) : !!value;
-    case 'number':
-      return Number(value);
-    default:
-      return value;
-  }
-};
-const getRuntimeValueFromConfig = (type, value, context) => {
-  if (value === undefined) {
-    return undefined;
-  }
-  if (isJSExpression(value) || isJSFunction(value)) {
-    return getRuntimeBaseValue(type, getRuntimeJsValue(value, context));
-  }
-  return value;
-};
-const buildJsonObj = (params, context) => {
-  if (isJSExpression(params)) {
-    return transformExpression(params.value, context);
-  } else if (isObject(params)) {
-    const newParams = {};
-    for (const [name, param] of Object.entries(params)) {
-      if (isJSExpression(param)) {
-        newParams[name] = transformExpression(param?.value, context);
-      } else if (isObject(param)) {
-        newParams[name] = buildJsonObj(param, context);
-      } else {
-        newParams[name] = param;
-      }
-    }
-    return newParams;
-  }
-  return params;
-};
-const buildShouldFetch = (ds, context) => {
-  if (!ds.options || !ds.shouldFetch) {
-    return true;
-  }
-  if (isJSExpression(ds.shouldFetch) || isJSFunction(ds.shouldFetch)) {
-    return getRuntimeJsValue(ds.shouldFetch, context);
-  }
-  return getRuntimeBaseValue('boolean', ds.shouldFetch);
-};
-const buildOptions = (ds, context) => {
-  const {
-    options
-  } = ds;
-  if (!options) return undefined;
-  return () => {
-    const fetchOptions = {
-      uri: '',
-      params: {},
-      method: 'GET',
-      isCors: true,
-      timeout: 5000,
-      headers: undefined,
-      v: '1.0'
-    };
-    Object.keys(options).forEach(key => {
-      switch (key) {
-        case 'uri':
-          fetchOptions.uri = getRuntimeValueFromConfig('string', options.uri, context);
-          break;
-        case 'params':
-          fetchOptions.params = buildJsonObj(options.params, context);
-          break;
-        case 'method':
-          fetchOptions.method = getRuntimeValueFromConfig('string', options.method, context);
-          break;
-        case 'isCors':
-          fetchOptions.isCors = getRuntimeValueFromConfig('boolean', options.isCors, context);
-          break;
-        case 'timeout':
-          fetchOptions.timeout = getRuntimeValueFromConfig('number', options.timeout, context);
-          break;
-        case 'headers':
-          fetchOptions.headers = buildJsonObj(options.headers, context);
-          break;
-        case 'v':
-          fetchOptions.v = getRuntimeValueFromConfig('string', options.v, context);
-          break;
-        default:
-          fetchOptions[key] = getRuntimeValueFromConfig('unknown', options[key], context);
-      }
-    });
-    return fetchOptions;
-  };
-};
-
-const adapt2Runtime = (dataSource, context, extraConfig) => {
-  const {
-    list: interpretConfigList,
-    dataHandler: interpretDataHandler
-  } = dataSource;
-  const dataHandler = interpretDataHandler ? getRuntimeJsValue(interpretDataHandler, context) : undefined;
-  if (!interpretConfigList || !interpretConfigList.length) {
-    return {
-      list: [],
-      dataHandler
-    };
-  }
-  const list = interpretConfigList.map(el => {
-    const {
-      defaultDataHandler: customDataHandler
-    } = extraConfig;
-    const finalDataHandler = customDataHandler || defaultDataHandler;
-    return {
-      id: el.id,
-      isInit: getRuntimeValueFromConfig('boolean', el.isInit, context),
-      isSync: getRuntimeValueFromConfig('boolean', el.isSync, context),
-      type: el.type || 'fetch',
-      willFetch: el.willFetch ? getRuntimeJsValue(el.willFetch, context) : defaultWillFetch,
-      shouldFetch: buildShouldFetch(el, context),
-      dataHandler: el.dataHandler ? getRuntimeJsValue(el.dataHandler, context) : finalDataHandler,
-      errorHandler: el.errorHandler ? getRuntimeJsValue(el.errorHandler, context) : undefined,
-      requestHandler: el.requestHandler ? getRuntimeJsValue(el.requestHandler, context) : undefined,
-      options: buildOptions(el, context)
-    };
-  });
-  return {
-    list,
-    dataHandler
-  };
-};
-
-const reloadDataSourceFactory = (dataSource, dataSourceMap, dataHandler) => {
-  return async () => {
-    const allAsyncLoadings = [];
-    dataSource.list.filter(el => el.type === 'urlParams' && isInit(el)).forEach(el => {
-      dataSourceMap[el.id].load();
-    });
-    const remainRuntimeDataSourceList = dataSource.list.filter(el => el.type !== 'urlParams');
-    for (const ds of remainRuntimeDataSourceList) {
-      if (!ds.options) {
-        continue;
-      }
-      if (
-      isInit(ds) && !ds.isSync) {
-        allAsyncLoadings.push(dataSourceMap[ds.id].load());
-      }
-    }
-    for (const ds of remainRuntimeDataSourceList) {
-      if (!ds.options) {
-        continue;
-      }
-      if (
-      isInit(ds) && ds.isSync) {
-        try {
-          await dataSourceMap[ds.id].load();
-        } catch (e) {
-          console.error(e);
-        }
-      }
-    }
-    await promiseSettled(allAsyncLoadings);
-    if (dataHandler) {
-      dataHandler(dataSourceMap);
-    }
-  };
-};
-function isInit(ds) {
-  return typeof ds.isInit === 'function' ? ds.isInit() : ds.isInit ?? true;
-}
-
-var createDataSourceEngine = (dataSource, context, extraConfig = {
-  requestHandlersMap: {}
-}) => {
-  const {
-    requestHandlersMap
-  } = extraConfig;
-  const runtimeDataSource = adapt2Runtime(dataSource, context, {
-    defaultDataHandler: extraConfig.defaultDataHandler
-  });
-  const dataSourceMap = runtimeDataSource.list.reduce((prev, current) => {
-    prev[current.id] = new RuntimeDataSourceItem(current, getRequestHandler(current, requestHandlersMap), context);
-    return prev;
-  }, {});
-  return {
-    dataSourceMap,
-    reloadDataSource: reloadDataSourceFactory(runtimeDataSource, dataSourceMap, runtimeDataSource.dataHandler)
-  };
-};
-
 const RendererContext = /*#__PURE__*/createContext({});
 const useRendererContext = () => {
   try {
@@ -1803,209 +602,6 @@ function contextFactory() {
   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: true,
-      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');
-}
-function serializeParams(obj) {
-  const result = [];
-  forEach(obj, (val, key) => {
-    if (val === null || val === undefined || val === '') {
-      return;
-    }
-    if (typeof val === 'object') {
-      result.push(`${key}=${encodeURIComponent(JSON.stringify(val))}`);
-    } else {
-      result.push(`${key}=${encodeURIComponent(val)}`);
-    }
-  });
-  return result.join('&');
-}
-
 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));
@@ -2025,6 +621,13 @@ const createForwardRefHocElement = (Wrapper, Comp) => {
   return WrapperComponent;
 };
 
+const isReactClass = obj => {
+  return obj && obj.prototype && (obj.prototype.isReactComponent || obj.prototype instanceof Component);
+};
+const isReactComponent = obj => {
+  return obj && (isReactClass(obj) || typeof obj === 'function');
+};
+
 const patchDidCatch = (Comp, {
   baseRenderer
 }) => {
@@ -2554,7 +1157,7 @@ const leafWrapper = (Comp, {
         __id: this.leaf?.id,
         ref: forwardRef
       };
-      delete compProps.__inner__;
+      compProps.__inner__ = undefined;
       if (this.hasChildren) {
         return engine.createElement(Comp, compProps, this.children);
       }
@@ -2562,350 +1165,21 @@ const leafWrapper = (Comp, {
     }
   }
   const LeafWrapper = createForwardRefHocElement(LeafHoc, Comp);
-  cache.component.set(componentCacheId, {
-    LeafWrapper,
-    Comp
-  });
-  return LeafWrapper;
-};
-
-function buildUrl(dataAPI, params) {
-  const paramStr = serializeParams(params);
-  if (paramStr) {
-    return dataAPI.indexOf('?') > 0 ? `${dataAPI}&${paramStr}` : `${dataAPI}?${paramStr}`;
-  }
-  return dataAPI;
-}
-function get(dataAPI, params = {}, headers = {}, otherProps = {}) {
-  const processedHeaders = {
-    Accept: 'application/json',
-    ...headers
-  };
-  const url = buildUrl(dataAPI, params);
-  return request(url, 'GET', null, processedHeaders, otherProps);
-}
-function post(dataAPI, params = {}, headers = {}, otherProps = {}) {
-  const processedHeaders = {
-    Accept: 'application/json',
-    'Content-Type': 'application/x-www-form-urlencoded',
-    ...headers
-  };
-  const body = processedHeaders['Content-Type'].indexOf('application/json') > -1 || Array.isArray(params) ? JSON.stringify(params) : serializeParams(params);
-  return request(dataAPI, 'POST', body, processedHeaders, otherProps);
-}
-function request(dataAPI, method = 'GET', data, headers = {}, otherProps = {}) {
-  let processedHeaders = headers || {};
-  let payload = data;
-  if (method === 'PUT' || method === 'DELETE') {
-    processedHeaders = {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-      ...processedHeaders
-    };
-    payload = JSON.stringify(payload || {});
-  }
-  return new Promise((resolve, reject) => {
-    if (otherProps.timeout) {
-      setTimeout(() => {
-        reject(new Error('timeout'));
-      }, otherProps.timeout);
-    }
-    fetch(dataAPI, {
-      method,
-      credentials: 'include',
-      headers: processedHeaders,
-      body: payload,
-      ...otherProps
-    }).then(response => {
-      switch (response.status) {
-        case 200:
-        case 201:
-        case 202:
-          return response.json();
-        case 204:
-          if (method === 'DELETE') {
-            return {
-              success: true
-            };
-          } else {
-            return {
-              __success: false,
-              code: response.status
-            };
-          }
-        case 400:
-        case 401:
-        case 403:
-        case 404:
-        case 406:
-        case 410:
-        case 422:
-        case 500:
-          return response.json().then(res => {
-            return {
-              __success: false,
-              code: response.status,
-              data: res
-            };
-          }).catch(() => {
-            return {
-              __success: false,
-              code: response.status
-            };
-          });
-      }
-      return null;
-    }).then(json => {
-      if (!json) {
-        reject(json);
-        return;
-      }
-      if (json.__success !== false) {
-        resolve(json);
-      } else {
-        delete json.__success;
-        reject(json);
-      }
-    }).catch(err => {
-      reject(err);
-    });
-  });
-}
-
-const DS_STATUS = {
-  INIT: 'init',
-  LOADING: 'loading',
-  LOADED: 'loaded',
-  ERROR: 'error'
-};
-function doRequest(type, options) {
-  let {
-    uri,
-    url,
-    method = 'GET',
-    headers,
-    params,
-    ...otherProps
-  } = options;
-  otherProps = otherProps || {};
-  if (type === 'fetch') {
-    switch (method.toUpperCase()) {
-      case 'GET':
-        return get(uri, params, headers, otherProps);
-      case 'POST':
-        return post(uri, params, headers, otherProps);
-      default:
-        return request(uri, method, params, headers, otherProps);
-    }
-  }
-  logger.log(`Engine default dataSource does not support type:[${type}] dataSource request!`, options);
-}
-class DataHelper {
-  host;
-  config;
-  parser;
-  ajaxList;
-  dataHandler;
-  ajaxMap;
-  dataSourceMap;
-  appHelper;
-  constructor(comp, config, appHelper, parser) {
-    this.host = comp;
-    this.config = config || {};
-    this.parser = parser;
-    this.ajaxList = config?.list || [];
-    this.ajaxMap = transformArrayToMap(this.ajaxList, 'id');
-    this.dataSourceMap = this.generateDataSourceMap();
-    this.appHelper = appHelper;
-    this.dataHandler = config?.dataHandler ? parseExpression(config?.dataHandler, comp, true) : undefined;
-  }
-  updateConfig(config = {}) {
-    this.config = config;
-    this.ajaxList = config?.list || [];
-    const ajaxMap = transformArrayToMap(this.ajaxList, 'id');
-    Object.keys(this.ajaxMap).forEach(key => {
-      if (!ajaxMap[key]) {
-        delete this.dataSourceMap[key];
-      }
-    });
-    this.ajaxMap = ajaxMap;
-    this.ajaxList.forEach(item => {
-      if (!this.dataSourceMap[item.id]) {
-        this.dataSourceMap[item.id] = {
-          status: DS_STATUS.INIT,
-          load: (...args) => {
-            return this.getDataSource(item.id, ...args);
-          }
-        };
-      }
-    });
-    return this.dataSourceMap;
-  }
-  generateDataSourceMap() {
-    const res = {};
-    this.ajaxList.forEach(item => {
-      res[item.id] = {
-        status: DS_STATUS.INIT,
-        load: (...args) => {
-          return this.getDataSource(item.id, ...args);
-        }
-      };
-    });
-    return res;
-  }
-  updateDataSourceMap(id, data, error) {
-    this.dataSourceMap[id].error = error || undefined;
-    this.dataSourceMap[id].data = data;
-    this.dataSourceMap[id].status = error ? DS_STATUS.ERROR : DS_STATUS.LOADED;
-  }
-  getInitDataSourseConfigs() {
-    const initConfigs = this.parser(this.ajaxList).filter(item => {
-      if (item.isInit === true) {
-        this.dataSourceMap[item.id].status = DS_STATUS.LOADING;
-        return true;
-      }
-      return false;
-    });
-    return initConfigs;
-  }
-  getInitData() {
-    const initSyncData = this.getInitDataSourseConfigs();
-    return this.asyncDataHandler(initSyncData).then(res => {
-      const {
-        dataHandler
-      } = this.config;
-      return this.handleData(null, dataHandler, res, null);
-    });
-  }
-  async reloadDataSource() {
-    const dataSourceMap = await this.getInitData();
-    if (isEmpty(dataSourceMap)) {
-      return;
-    }
-    this.host.setState(dataSourceMap);
-    if (this.dataHandler) {
-      this.dataHandler(dataSourceMap);
-    }
-  }
-  getDataSource(id, params, otherOptions, callback) {
-    const req = this.parser(this.ajaxMap[id]);
-    const options = req.options || {};
-    let callbackFn = callback;
-    let otherOptionsObj = otherOptions;
-    if (typeof otherOptions === 'function') {
-      callbackFn = otherOptions;
-      otherOptionsObj = {};
-    }
-    const {
-      headers,
-      ...otherProps
-    } = otherOptionsObj || {};
-    if (!req) {
-      logger.warn(`getDataSource API named ${id} not exist`);
-      return;
-    }
-    return this.asyncDataHandler([{
-      ...req,
-      options: {
-        ...options,
-        params: Array.isArray(options.params) || Array.isArray(params) ? params || options.params : {
-          ...options.params,
-          ...params
-        },
-        headers: {
-          ...options.headers,
-          ...headers
-        },
-        ...otherProps
-      }
-    }]).then(res => {
-      try {
-        callbackFn && callbackFn(res && res[id]);
-      } catch (e) {
-        logger.error('load请求回调函数报错', e);
-      }
-      return res && res[id];
-    }).catch(err => {
-      try {
-        callbackFn && callbackFn(null, err);
-      } catch (e) {
-        logger.error('load请求回调函数报错', e);
-      }
-      return err;
-    });
-  }
-  asyncDataHandler(asyncDataList) {
-    return new Promise((resolve, reject) => {
-      const allReq = [];
-      asyncDataList.forEach(req => {
-        const {
-          id,
-          type
-        } = req;
-        if (!id || !type || type === 'legao') {
-          return;
-        }
-        allReq.push(req);
-      });
-      if (allReq.length === 0) {
-        resolve({});
-      }
-      const res = {};
-      Promise.all(allReq.map(item => {
-        return new Promise(innerResolve => {
-          const {
-            type,
-            id,
-            dataHandler,
-            options
-          } = item;
-          const fetchHandler = (data, error) => {
-            res[id] = this.handleData(id, dataHandler, data, error);
-            this.updateDataSourceMap(id, res[id], error);
-            innerResolve({});
-          };
-          const doFetch = (innerType, innerOptions) => {
-            doRequest(innerType, innerOptions)?.then(data => {
-              fetchHandler(data, undefined);
-            }).catch(err => {
-              fetchHandler(undefined, err);
-            });
-          };
-          this.dataSourceMap[id].status = DS_STATUS.LOADING;
-          doFetch(type, options);
-        });
-      })).then(() => {
-        resolve(res);
-      }).catch(e => {
-        reject(e);
-      });
-    });
-  }
-  handleData(id, dataHandler, data, error) {
-    let dataHandlerFun = dataHandler;
-    if (isJSFunction(dataHandler)) {
-      dataHandlerFun = transformStringToFunction(dataHandler.value);
-    }
-    if (!dataHandlerFun || typeof dataHandlerFun !== 'function') {
-      return data;
-    }
-    try {
-      return dataHandlerFun.call(this.host, data, error);
-    } catch (e) {
-      if (id) {
-        logger.error(`[${id}]单个请求数据处理函数运行出错`, e);
-      } else {
-        logger.error('请求数据处理函数运行出错', e);
-      }
-    }
-  }
-}
+  cache.component.set(componentCacheId, {
+    LeafWrapper,
+    Comp
+  });
+  return LeafWrapper;
+};
 
+/**
+ * execute method in schema.lifeCycles with context
+ */
 function executeLifeCycleMethod(context, schema, method, args) {
   if (!context || !isSchema(schema) || !method) {
     return;
   }
-  const lifeCycleMethods = getValue(schema, 'lifeCycles', {});
+  const lifeCycleMethods = getValue$1(schema, 'lifeCycles', {});
   let fn = lifeCycleMethods[method];
   if (!fn) {
     return;
@@ -3131,18 +1405,23 @@ function baseRendererFactory() {
         list: []
       };
       const dataSource = schema.dataSource || defaultDataSource;
-      // requestHandlersMap 存在才走数据源引擎方案
-      // TODO: 下面if else 抽成独立函数
-      const useDataSourceEngine = !!props.__appHelper?.requestHandlersMap;
+      const useDataSourceEngine = !!props.__appHelper?.dataSourceEngine;
       if (useDataSourceEngine) {
+        const dataSourceEngine = props.__appHelper?.dataSourceEngine;
+        // TODO: 优化
+        if (!dataSourceEngine || !dataSourceEngine.createDataSourceEngine) {
+          logger.error('dataSourceEngine is not found in appHelper, please check your configuration');
+          return;
+        }
+        const {
+          createDataSourceEngine
+        } = dataSourceEngine;
         this.__dataHelper = {
           updateConfig: updateDataSource => {
             const {
               dataSourceMap,
               reloadDataSource
-            } = createDataSourceEngine(updateDataSource ?? {}, this, props.__appHelper?.requestHandlersMap ? {
-              requestHandlersMap: props.__appHelper.requestHandlersMap
-            } : undefined);
+            } = createDataSourceEngine(updateDataSource ?? {}, this);
             this.reloadDataSource = () => new Promise(resolve => {
               logger.log('reload data source');
               reloadDataSource().then(() => {
@@ -3172,7 +1451,7 @@ function baseRendererFactory() {
      * @PRIVATE
      */
     __writeCss = props => {
-      const css = getValue(props.__schema, 'css', '');
+      const css = getValue$1(props.__schema, 'css', '');
       logger.log('create this.styleElement with css', css);
       let style = this.__styleElement;
       if (!this.__styleElement) {
@@ -3515,7 +1794,7 @@ function baseRendererFactory() {
         Comp,
         componentInfo = {}
       } = info;
-      const propInfo = getValue(componentInfo.props, path);
+      const propInfo = getValue$1(componentInfo.props, path);
       // FIXME: 将这行逻辑外置，解耦，线上环境不要验证参数，调试环境可以有，通过传参自定义
       const propType = propInfo?.extra?.propType;
       const checkProps = value => {
@@ -3704,8 +1983,8 @@ function baseRendererFactory() {
     get appHelper() {
       return this.props.__appHelper;
     }
-    get requestHandlersMap() {
-      return this.appHelper?.requestHandlersMap;
+    get dataSourceEngine() {
+      return this.appHelper?.dataSourceEngine;
     }
     get utils() {
       return this.appHelper?.utils;
@@ -3886,16 +2165,16 @@ function rendererFactory() {
     constructor(props) {
       super(props);
       this.state = {};
-      logger$1.log(`entry.constructor - ${props?.schema?.componentName}`);
+      logger.log(`entry.constructor - ${props?.schema?.componentName}`);
     }
     async componentDidMount() {
-      logger$1.log(`entry.componentDidMount - ${this.props.schema && this.props.schema.componentName}`);
+      logger.log(`entry.componentDidMount - ${this.props.schema && this.props.schema.componentName}`);
     }
     async componentDidUpdate() {
-      logger$1.log(`entry.componentDidUpdate - ${this.props?.schema?.componentName}`);
+      logger.log(`entry.componentDidUpdate - ${this.props?.schema?.componentName}`);
     }
     async componentWillUnmount() {
-      logger$1.log(`entry.componentWillUnmount - ${this.props?.schema?.componentName}`);
+      logger.log(`entry.componentWillUnmount - ${this.props?.schema?.componentName}`);
     }
     componentDidCatch(error) {
       this.state.engineRenderError = true;
@@ -3933,10 +2212,10 @@ function rendererFactory() {
         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);
+        logger.error('The root component name needs to be one of Page、Block、Component, please check the schema: ', schema);
         return '模型结构异常';
       }
-      logger$1.log('entry.render');
+      logger.log('entry.render');
       const allComponents = {
         ...components,
         ...RENDERER_COMPS
@@ -3971,6 +2250,257 @@ function rendererFactory() {
   };
 }
 
-const DEV = '_EASY_EDITOR_DEV_';
+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 {
+    setters
+  } = 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
+  } = setters.createSetterContent(setterType, setterProps);
+  return /*#__PURE__*/jsx(SetterComponent, {
+    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: children
+  }, field.id);
+});
+
+const SettingFieldItem = observer(({
+  field
+}) => {
+  const {
+    customFieldItem
+  } = useSettingRendererContext();
+  if (customFieldItem) {
+    return customFieldItem(field, /*#__PURE__*/jsx(SettingSetter, {
+      field: field
+    }));
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: "space-y-2",
+    children: [/*#__PURE__*/jsx("label", {
+      htmlFor: field.id,
+      className: "block text-sm font-medium text-gray-700",
+      children: field.title
+    }), /*#__PURE__*/jsx(SettingSetter, {
+      field: field
+    })]
+  });
+});
+const SettingFieldGroup = observer(({
+  field
+}) => {
+  const {
+    customFieldGroup
+  } = useSettingRendererContext();
+  if (customFieldGroup) {
+    return customFieldGroup(field, /*#__PURE__*/jsx(SettingSetter, {
+      field: field,
+      children: field.items?.map(item => /*#__PURE__*/jsx(SettingFieldView, {
+        field: item
+      }, item.id))
+    }));
+  }
+
+  // 如果 field 没有 setter，则理解为其 父级 field 的 items 数据
+  if (!field.setter) {
+    return field.items?.map(item => /*#__PURE__*/jsx(SettingFieldView, {
+      field: item
+    }, item.id));
+  }
+  return /*#__PURE__*/jsx(SettingSetter, {
+    field: field,
+    children: field.items?.map(item => /*#__PURE__*/jsx(SettingFieldView, {
+      field: item
+    }, item.id))
+  });
+});
+const SettingFieldView = ({
+  field
+}) => {
+  if (field.isGroup) {
+    return /*#__PURE__*/jsx(SettingFieldGroup, {
+      field: field
+    }, field.id);
+  } else {
+    return /*#__PURE__*/jsx(SettingFieldItem, {
+      field: field
+    }, field.id);
+  }
+};
+const SettingRenderer = observer(props => {
+  const {
+    designer,
+    customFieldItem,
+    customFieldGroup
+  } = props;
+  const setters = designer.editor.get('setters');
+  const {
+    settingsManager
+  } = designer;
+  const {
+    settings
+  } = settingsManager;
+  const items = settings?.items;
+  const ctx = useMemo(() => {
+    const ctx = {};
+    ctx.setters = setters;
+    ctx.settingsManager = settingsManager;
+    ctx.customFieldItem = customFieldItem;
+    ctx.customFieldGroup = customFieldGroup;
+    return ctx;
+  }, [setters, settingsManager, customFieldItem, customFieldGroup]);
+  if (!settings) {
+    // 未选中节点，提示选中 或者 显示根节点设置
+    return /*#__PURE__*/jsx("div", {
+      className: "lc-settings-main",
+      children: /*#__PURE__*/jsx("div", {
+        className: "lc-settings-notice",
+        children: /*#__PURE__*/jsx("p", {
+          children: "Please select a node in canvas"
+        })
+      })
+    });
+  }
+
+  // 当节点被锁定，且未开启锁定后容器可设置属性
+  if (settings.isLocked) {
+    return /*#__PURE__*/jsx("div", {
+      className: "lc-settings-main",
+      children: /*#__PURE__*/jsx("div", {
+        className: "lc-settings-notice",
+        children: /*#__PURE__*/jsx("p", {
+          children: "Current node is locked"
+        })
+      })
+    });
+  }
+  if (Array.isArray(settings.items) && settings.items.length === 0) {
+    return /*#__PURE__*/jsx("div", {
+      className: "lc-settings-main",
+      children: /*#__PURE__*/jsx("div", {
+        className: "lc-settings-notice",
+        children: /*#__PURE__*/jsx("p", {
+          children: "No config found for this type of component"
+        })
+      })
+    });
+  }
+  if (!settings.isSameComponent) {
+    // TODO: future support 获取设置项交集编辑
+    return /*#__PURE__*/jsx("div", {
+      className: "lc-settings-main",
+      children: /*#__PURE__*/jsx("div", {
+        className: "lc-settings-notice",
+        children: /*#__PURE__*/jsx("p", {
+          children: "Please select same kind of components"
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/jsx(SettingRendererContext.Provider, {
+    value: ctx,
+    children: items?.map(item => /*#__PURE__*/jsx(SettingFieldView, {
+      field: item
+    }, item.id))
+  });
+});
 
-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, serializeParams, transformArrayToMap, transformStringToFunction, useRendererContext };
+export { RendererContext, SettingFieldView, SettingRenderer, adapter, baseRendererFactory, cloneEnumerableProperty, compWrapper, componentRendererFactory, contextFactory, createForwardRefHocElement, executeLifeCycleMethod, getSchemaChildren, isReactClass, isReactComponent, leafWrapper, pageRendererFactory, rendererFactory, useRendererContext };