@luck-design-biz/luckda 0.0.24-2 → 0.0.25-2

package/es/lowcode/engine/provider/ContextProvider/index.js

@@ -0,0 +1,177 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { createContext, useContext as useReactContext, useRef } from 'react';
+import { history } from 'umi';
+import { useMemoizedFn, useSetState } from 'ahooks';
+import { get, isNil, isArray, isFunction, isObject, isString, reduce } from 'lodash';
+import { useLDEventBus } from "../EventBusProvider";
+import RemoteSourceProvider, { RemoteSourceContext } from "../RemoteSourceProvider";
+import useTodo from "../../tools/useTodo";
+import { findNodeAndParent } from "../../tools/dataProcess";
+import * as topics from "../../../constants/event-topics";
+export var Context = /*#__PURE__*/createContext(null);
+export var useContext = function useContext() {
+  return useReactContext(Context);
+};
+export var usePageData = function usePageData(_) {
+  var _useReactContext = useReactContext(RemoteSourceContext),
+    pageData = _useReactContext.pageData,
+    loading = _useReactContext.loading,
+    setPageData = _useReactContext.setPageData,
+    back = _useReactContext.back,
+    forward = _useReactContext.forward,
+    backLength = _useReactContext.backLength,
+    forwardLength = _useReactContext.forwardLength;
+  var _pageData;
+  if (isNil(_)) {
+    _pageData = pageData;
+  } else if (isFunction(_)) {
+    _pageData = _(pageData);
+  } else if (isArray(_)) {
+    _pageData = reduce(_, function (r, k) {
+      r.push(get(pageData, k));
+      return r;
+    }, []);
+  } else if (isObject(_) && _.id) {
+    var _findNodeAndParent;
+    _pageData = (_findNodeAndParent = findNodeAndParent(_.id, pageData)) === null || _findNodeAndParent === void 0 ? void 0 : _findNodeAndParent.node;
+  } else if (isString(_)) {
+    _pageData = get(pageData, _);
+  }
+  return [_pageData, {
+    loading: loading,
+    setPageData: setPageData,
+    back: back,
+    forward: forward,
+    backLength: backLength,
+    forwardLength: forwardLength
+  }];
+};
+export var useRemoteSource = function useRemoteSource() {
+  return useReactContext(RemoteSourceContext);
+};
+var PRIVATE_KEYS = ['componentList', 'componentMap'];
+export default (function (_ref) {
+  var children = _ref.children,
+    code = _ref.code;
+  var eventBus = useLDEventBus();
+  var _useTodo = useTodo(),
+    _useTodo2 = _slicedToArray(_useTodo, 2),
+    todo = _useTodo2[0],
+    callBehavior = _useTodo2[1];
+
+  /**
+   * 页面公共资源
+   */
+  var _useSetState = useSetState(null),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    pagePublicResource = _useSetState2[0],
+    _setPagePublicResource = _useSetState2[1];
+
+  /**
+   * 组件列表
+   */
+  var _componentList = useRef([]);
+  var _privateGetter = useRef({
+    componentList: function componentList() {
+      return _componentList.current;
+    },
+    componentMap: function componentMap() {
+      return new Map(_componentList.current);
+    }
+  });
+
+  /**
+   * 注册组件
+   * id:string 组件id
+   * component:ReactNode 组件
+   */
+  var _register = useMemoizedFn(function (id, component) {
+    _componentList.current.push([id, component]);
+  });
+
+  /**
+   * 注销组件
+   * id:string 组件id
+   */
+  var _unregister = useMemoizedFn(function (id) {
+    _componentList.current = _componentList.current.filter(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 1),
+        _id = _ref3[0];
+      return _id !== id;
+    });
+  });
+
+  /**
+   * 根据组件id获取组件
+   * compId:string 组件id
+   * return:ReactNode
+   */
+  var getElementById = useMemoizedFn(function (compId) {});
+
+  /**
+   * 根据组件id获取父组件
+   * compId:string 组件id
+   * return:ReactNode
+   */
+  var getParentElement = useMemoizedFn(function (compId) {});
+
+  /**
+   * 根据组件id获取组件路径
+   * compId:string 组件id
+   * return:ReactNode
+   */
+  var getElementPathById = useMemoizedFn(function (compId) {});
+
+  /**
+   * 获取url参数
+   * return:object
+   */
+  var getUrlParams = useMemoizedFn(function () {});
+  var ctx = new Proxy(_objectSpread({
+    _setPagePublicResource: _setPagePublicResource,
+    _register: _register,
+    _unregister: _unregister,
+    pagePublicResource: pagePublicResource,
+    history: history,
+    callBehavior: callBehavior,
+    topics: topics,
+    getElementById: getElementById,
+    /**
+     * @method
+     * @param {string} id - 组件id
+     * @return {object}
+     */
+    getParentElement: getParentElement,
+    getElementPathById: getElementPathById,
+    doAction: function doAction(actionPool, args) {
+      return todo(this, actionPool, args);
+    },
+    /**
+     * @method
+     * @return {object}
+     */
+    getUrlParams: getUrlParams
+  }, eventBus), {
+    get: function get(target, property, receiver) {
+      if (PRIVATE_KEYS.includes(property)) {
+        var _privateGetter$curren;
+        return (_privateGetter$curren = _privateGetter.current) === null || _privateGetter$curren === void 0 ? void 0 : _privateGetter$curren[property]();
+      }
+      return Reflect.get(target, property, receiver);
+    },
+    set: function set(target, property, receiver) {
+      if (PRIVATE_KEYS.includes(property)) {
+        throw new Error("\u5C5E\u6027 \"".concat(property, "\" \u662F\u53EA\u8BFB\u7684"));
+      } else {
+        return Reflect.set(target, property, receiver);
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: ctx
+  }, /*#__PURE__*/React.createElement(RemoteSourceProvider, {
+    code: code,
+    runtime: eventBus.runtime
+  }, children));
+});

package/es/lowcode/engine/provider/RemoteSourceProvider.js

@@ -0,0 +1,174 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["source"];
+import React, { createContext, useRef } from 'react';
+import { useRequest, useSetState, useAsyncEffect, useMemoizedFn, useCookieState, useCreation, useUnmount } from 'ahooks';
+import { LuckDaContext } from "../../../components/Builder";
+import { doAction as doActionUtils } from "../../../helper/action";
+import usePromiseState from "../tools/usePromiseState";
+import { decompress } from "../tools/dataProcess";
+import { fetchPageData, fetchDesignModlueData, fetchPreviewModlueData, fetchModlueData, fetchAllDataset, fetchAllSerials } from "../../constants/api-url";
+import { RUNTIME, COOKIE_RUNTIME_KEY, DATA_MODEL_CODE_KEY } from "../../constants";
+export var RemoteSourceContext = /*#__PURE__*/createContext(null);
+export default (function (_ref) {
+  var children = _ref.children,
+    code = _ref.code,
+    runtime = _ref.runtime;
+  var _usePromiseState = usePromiseState(null),
+    _usePromiseState2 = _slicedToArray(_usePromiseState, 3),
+    pageData = _usePromiseState2[0],
+    setPageData = _usePromiseState2[1],
+    _usePromiseState2$ = _usePromiseState2[2],
+    back = _usePromiseState2$.back,
+    forward = _usePromiseState2$.forward,
+    backLength = _usePromiseState2$.backLength,
+    forwardLength = _usePromiseState2$.forwardLength;
+  var _useSetState = useSetState({}),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    remoteSource = _useSetState2[0],
+    setRemoteSource = _useSetState2[1];
+  var _useCookieState = useCookieState(COOKIE_RUNTIME_KEY),
+    _useCookieState2 = _slicedToArray(_useCookieState, 2),
+    cookieRuntime = _useCookieState2[0],
+    setRuntime = _useCookieState2[1];
+  var prevRuntime = useRef(cookieRuntime);
+  useCreation(function () {
+    if (runtime !== cookieRuntime) {
+      prevRuntime.current = cookieRuntime;
+      setRuntime(runtime);
+    }
+  }, []);
+  useUnmount(function () {
+    setRuntime(prevRuntime.current);
+  });
+
+  // 获取页面数据
+  var _useRequest = useRequest(fetchPageData, {
+      manual: true
+    }),
+    fetchPageDataLoading = _useRequest.loading,
+    runFetchPageData = _useRequest.runAsync;
+  // 获取模块数据
+  var _useRequest2 = useRequest(_defineProperty(_defineProperty(_defineProperty({}, RUNTIME.DESIGN, fetchDesignModlueData), RUNTIME.PREVIEW, fetchPreviewModlueData), RUNTIME.LIVE, fetchModlueData)[runtime], {
+      manual: true,
+      onSuccess: function onSuccess(_ref2) {
+        var code = _ref2.code,
+          data = _ref2.data;
+        if (code === 1) {
+          setRemoteSource({
+            module: data
+          });
+        }
+      }
+    }),
+    fetchModlueDataLoading = _useRequest2.loading,
+    runFetchModlueData = _useRequest2.runAsync,
+    refreshModlueData = _useRequest2.refreshAsync;
+  // 获取数据集数据
+  var _useRequest3 = useRequest(fetchAllDataset, {
+      manual: true,
+      onSuccess: function onSuccess(_ref3) {
+        var code = _ref3.code,
+          data = _ref3.data;
+        if (code === 1) {
+          setRemoteSource({
+            dataset: data
+          });
+        }
+      }
+    }),
+    fetchAllDatasetLoading = _useRequest3.loading,
+    runFetchAllDataset = _useRequest3.run,
+    refreshDataset = _useRequest3.refreshAsync;
+  // 获取资源串数据
+  var _useRequest4 = useRequest(fetchAllSerials, {
+      manual: true,
+      onSuccess: function onSuccess(_ref4) {
+        var code = _ref4.code,
+          list = _ref4.list,
+          detail = _ref4.detail;
+        if (code === 1) {
+          setRemoteSource({
+            serials: list.map(function (id) {
+              return detail[id];
+            })
+          });
+        }
+      }
+    }),
+    fetchAllSerialsLoading = _useRequest4.loading,
+    runFetchAllSerials = _useRequest4.run,
+    refreshSerials = _useRequest4.refreshAsync;
+  useAsyncEffect( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var fetchPageDataRes, data, list, detail, _detail$list$, source, info;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return runFetchPageData({
+            code: code
+          });
+        case 2:
+          fetchPageDataRes = _context.sent;
+          if (!(fetchPageDataRes.code === 1)) {
+            _context.next = 13;
+            break;
+          }
+          data = fetchPageDataRes.data, list = fetchPageDataRes.list, detail = fetchPageDataRes.detail;
+          _detail$list$ = detail[list[0]], source = _detail$list$.source, info = _objectWithoutProperties(_detail$list$, _excluded);
+          window[DATA_MODEL_CODE_KEY] = data.dataModelKey;
+          _context.next = 9;
+          return runFetchModlueData(data.dataModelKey, {
+            moduleCode: data.moduleCode
+          });
+        case 9:
+          runFetchAllDataset({
+            dataModelKey: data.dataModelKey
+          });
+          runFetchAllSerials({
+            uid: data.moduleId
+          });
+          setRemoteSource({
+            pageinfo: _objectSpread({
+              relationship: data
+            }, info)
+          });
+          setPageData(decompress(source));
+        case 13:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [code]);
+  var doAction = useMemoizedFn(function (_action, _data, _params) {
+    doActionUtils(_action, _data, _params, {
+      actions: remoteSource.module.actions,
+      moduleCode: remoteSource.module.moduleCode
+    });
+  });
+  return /*#__PURE__*/React.createElement(RemoteSourceContext.Provider, {
+    value: _objectSpread(_objectSpread({
+      pageData: pageData
+    }, remoteSource), {}, {
+      loading: fetchPageDataLoading || fetchModlueDataLoading,
+      fetchAllDatasetLoading: fetchAllDatasetLoading,
+      fetchAllSerialsLoading: fetchAllSerialsLoading,
+      refreshModlueData: refreshModlueData,
+      refreshDataset: refreshDataset,
+      refreshSerials: refreshSerials,
+      setPageData: setPageData,
+      back: back,
+      forward: forward,
+      backLength: backLength,
+      forwardLength: forwardLength
+    })
+  }, /*#__PURE__*/React.createElement(LuckDaContext.Provider, {
+    value: _objectSpread(_objectSpread({}, remoteSource.module), {}, {
+      doAction: doAction
+    })
+  }, children));
+});

package/es/lowcode/engine/tools/dataProcess.js

@@ -3,7 +3,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import * as LZString from 'lz-string';
-import { CELL_KEY } from "../../constants";
+import { LC_BUILDIN_UNIT_KEY } from "../../constants";
 
 /**
  * 数据压缩
@@ -149,6 +149,68 @@ export function add(json, parentId, id, data) {
   process(json, getPathById(json, parentId), id, data);
 }
 
+/**
+ * 移动指定的节点到另一个节点的指定位置。
+ *
+ * @param {Object} json - 要操作的JSON对象。
+ * @param {string} sid - 被移动的节点id
+ * @param {string} tid - 目标节点id
+ * @param {string} action - 'left': 往节点前面插入，'right'：往节点后面插，'inside'：往节点子节点插
+ */
+export function move(json, sid, tid, action) {
+  // 验证节点存在性
+  var _findNodeAndParent3 = findNodeAndParent(sid, json),
+    sourceNode = _findNodeAndParent3.node,
+    sourceParent = _findNodeAndParent3.parent;
+  var _findNodeAndParent4 = findNodeAndParent(tid, json),
+    targetNode = _findNodeAndParent4.node,
+    targetParent = _findNodeAndParent4.parent;
+  if (!sourceNode || !targetNode) {
+    throw new Error('Source or target node does not exist.');
+  }
+
+  // 从原父节点中移除
+  if (sourceParent) {
+    sourceParent.children = sourceParent.children.filter(function (id) {
+      return id !== sid;
+    });
+    if (sourceParent.children.length === 0) {
+      delete sourceParent.children;
+    }
+    delete sourceParent[sid];
+  }
+  switch (action) {
+    case 'inside':
+      // 插入到目标节点的children数组
+      if (!targetNode.children) {
+        targetNode.children = [];
+      }
+      targetNode.children.push(sid);
+      sourceNode.props.parentId = tid;
+      targetNode[sid] = sourceNode;
+      break;
+    case 'left':
+    case 'right':
+      if (!targetParent) {
+        throw new Error('Target node must have a parent for left or right operations.');
+      }
+      // 插入到目标节点同级的前面或后面
+      var idx = targetParent.children.indexOf(tid);
+      if (idx === -1) {
+        throw new Error("Target node is not found in its parent's children list.");
+      }
+      if (action === 'right') {
+        idx++;
+      }
+      targetParent.children.splice(idx, 0, sid);
+      sourceNode.props.parentId = targetParent.props.id;
+      targetParent[sid] = sourceNode;
+      break;
+    default:
+      throw new Error('Invalid action type.');
+  }
+}
+
 /**
  * 对指定的JSON结构进行节点的修改操作。
  *
@@ -181,7 +243,7 @@ export function deleteById(json, id) {
 export function getPathById(json, id) {
   var currentPath = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   for (var key in json) {
-    if (id === CELL_KEY.PAGE_ROOT) return '/';
+    if (id === LC_BUILDIN_UNIT_KEY.PAGE_ROOT) return '/';
     var newPath = currentPath ? "".concat(currentPath, "/").concat(key) : key;
     if (json[key].props && json[key].props.id === id) {
       return newPath;

package/es/lowcode/engine/tools/helper.js

@@ -1,7 +1,9 @@
+import _construct from "@babel/runtime/helpers/esm/construct";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
-import { omit } from 'lodash';
+import { omit, omitBy, startsWith, isNil, isString, isArray } from 'lodash';
+import postcss from 'postcss';
 export function isPromise(value) {
   return !!value && _typeof(value) === 'object' && typeof value.then === 'function';
 }
@@ -11,62 +13,139 @@ export function omitBadProps(props) {
 }
 export function listReducer(state, action) {
   switch (action.type) {
-    case 'add':
+    case 'insert':
       {
         var _action$callback;
-        var newState = [].concat(_toConsumableArray(state), [action.payload]);
+        var newState = _toConsumableArray(state);
+        newState.splice(action.payload.index + 1, 0, action.payload.data);
         (_action$callback = action.callback) === null || _action$callback === void 0 || _action$callback.call(action, newState);
         return newState;
       }
-    case 'delete':
+    case 'add':
       {
         var _action$callback2;
-        var _newState = state.filter(function (item) {
-          return item.id !== action.payload;
-        });
+        var _newState = [].concat(_toConsumableArray(state), [action.payload]);
         (_action$callback2 = action.callback) === null || _action$callback2 === void 0 || _action$callback2.call(action, _newState);
         return _newState;
       }
-    case 'edit':
+    case 'delete':
       {
         var _action$callback3;
-        var _newState2 = state.map(function (item) {
-          return item.id === action.payload.id ? _objectSpread(_objectSpread({}, item), action.payload.data) : item;
+        var _newState2 = state.filter(function (item) {
+          return item.id !== action.payload;
         });
         (_action$callback3 = action.callback) === null || _action$callback3 === void 0 || _action$callback3.call(action, _newState2);
         return _newState2;
       }
-    case 'active':
+    case 'edit':
       {
         var _action$callback4;
         var _newState3 = state.map(function (item) {
-          item.active = false;
           return item.id === action.payload.id ? _objectSpread(_objectSpread({}, item), action.payload.data) : item;
         });
         (_action$callback4 = action.callback) === null || _action$callback4 === void 0 || _action$callback4.call(action, _newState3);
         return _newState3;
       }
-    case 'new':
+    case 'batchEdit':
       {
         var _action$callback5;
-        var _newState4 = _toConsumableArray(action.payload);
+        var _newState4 = state.map(function (item) {
+          var newItem = action.payload.items.find(function (_id) {
+            return _id === item.id;
+          });
+          if (newItem) {
+            return _objectSpread(_objectSpread({}, item), action.payload.data);
+          }
+          return item;
+        });
         (_action$callback5 = action.callback) === null || _action$callback5 === void 0 || _action$callback5.call(action, _newState4);
         return _newState4;
       }
-    case 'sort':
+    case 'active':
       {
         var _action$callback6;
+        var _newState5 = state.map(function (item) {
+          item.active = false;
+          return item.id === action.payload.id ? _objectSpread(_objectSpread({}, item), action.payload.data) : item;
+        });
+        (_action$callback6 = action.callback) === null || _action$callback6 === void 0 || _action$callback6.call(action, _newState5);
+        return _newState5;
+      }
+    case 'init':
+    case 'new':
+      {
+        var _action$callback7;
+        (_action$callback7 = action.callback) === null || _action$callback7 === void 0 || _action$callback7.call(action, action.payload);
+        return action.payload;
+      }
+    case 'sort':
+      {
+        var _action$callback8;
         var sortItems = action.payload;
         var newItems = state.sort(function (a, b) {
           var indexA = sortItems.indexOf(a.id);
           var indexB = sortItems.indexOf(b.id);
           return indexA - indexB;
         });
-        (_action$callback6 = action.callback) === null || _action$callback6 === void 0 || _action$callback6.call(action, _newState5);
-        var _newState5 = _toConsumableArray(newItems);
-        return _newState5;
+        var _newState6 = _toConsumableArray(newItems);
+        (_action$callback8 = action.callback) === null || _action$callback8 === void 0 || _action$callback8.call(action, _newState6);
+        return _newState6;
       }
     default:
       throw new Error();
   }
+}
+export function getCtx(context) {
+  return omitBy(context, function (_, key) {
+    return startsWith(key, '_');
+  });
+}
+export function getFuncBody(funcCode) {
+  var regex = /{([\s\S]*?)}(?![\s\S]*})/;
+  var matches = funcCode.match(regex);
+  if (matches) {
+    return matches[1].replace(/\s*\n\s*/g, ' ').trim();
+  }
+  return '';
+}
+export function executeCode(context, code, argsName) {
+  if (!isString(code)) {
+    throw new Error('executeCode编码参数无效');
+  }
+  for (var _len = arguments.length, args = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
+    args[_key - 3] = arguments[_key];
+  }
+  if (isNil(argsName) && args.length > 0 || !isNil(argsName) && !isArray(argsName) || isArray(argsName) && argsName.length !== (args === null || args === void 0 ? void 0 : args.length)) {
+    throw new Error('executeCode参数不匹配');
+  }
+  var ctx = getCtx(context);
+  var func = _construct(Function, _toConsumableArray(argsName || []).concat(['ctx', getFuncBody(code)]));
+  return func.apply(void 0, args.concat([ctx]));
+}
+export function parseCSS(cssString) {
+  // 创建一个空对象来存储解析后的样式
+  var parsedStyles = {};
+  if (cssString) {
+    try {
+      // 解析CSS字符串
+      var ast = postcss.parse(cssString);
+
+      // 遍历AST中的每个规则
+      ast.walkDecls(function (decl) {
+        // 将每个声明的属性和值存储在对象中
+        parsedStyles[decl.prop] = decl.value;
+      });
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  // 返回包含所有样式的对象
+  return parsedStyles;
+}
+;
+export function isColor(str) {
+  var hexRegex = /^#(?:[A-Fa-f0-9]{3,4}){1,2}$/;
+  var rgbaRegex = /^rgba?\(\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(,\s*(0|1|0?\.\d+))?\s*\)$/;
+  return hexRegex.test(str) || rgbaRegex.test(str);
 }

package/es/lowcode/engine/tools/useCanvasRender.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["props", "children"],
+  _excluded2 = ["id", "component", "name", "desc", "icon", "group", "groupName", "order"];
+import React, { useRef } from 'react';
+import { dynamic } from 'umi';
+import { useMemoizedFn, useCreation } from 'ahooks';
+import { upperFirst } from 'lodash';
+import { useContext } from "../provider/ContextProvider";
+import { LC_BUILDIN_UNIT_KEY_LIST } from "../../constants";
+export default function useCanvasRender(data, deps) {
+  var dynamicCompMap = useRef({});
+  var ctx = useContext();
+  var render = useMemoizedFn(function (_ref) {
+    var props = _ref.props,
+      children = _ref.children,
+      childrenMap = _objectWithoutProperties(_ref, _excluded);
+    if (props && !LC_BUILDIN_UNIT_KEY_LIST.includes(props.id)) {
+      var id = props.id,
+        component = props.component,
+        name = props.name,
+        desc = props.desc,
+        icon = props.icon,
+        group = props.group,
+        groupName = props.groupName,
+        order = props.order,
+        rest = _objectWithoutProperties(props, _excluded2);
+      if (!dynamicCompMap.current[component]) {
+        dynamicCompMap.current[component] = dynamic({
+          loader: function () {
+            var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+              var _runtime, _yield$import, _Comp;
+              return _regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    _runtime = upperFirst(ctx.runtime);
+                    _context.next = 3;
+                    return import("../../view/lc-components/".concat(component, "/Function").concat(_runtime));
+                  case 3:
+                    _yield$import = _context.sent;
+                    _Comp = _yield$import.default;
+                    return _context.abrupt("return", _Comp);
+                  case 6:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            }));
+            function loader() {
+              return _loader.apply(this, arguments);
+            }
+            return loader;
+          }()
+        });
+      }
+      var Comp = dynamicCompMap.current[component];
+      return /*#__PURE__*/React.createElement(Comp, _extends({
+        key: id,
+        id: id
+      }, rest), (children === null || children === void 0 ? void 0 : children.length) > 0 ? children.map(function (_id) {
+        return render(childrenMap[_id]);
+      }) : null);
+    }
+    return (children === null || children === void 0 ? void 0 : children.length) > 0 ? children.map(function (_id) {
+      return render(childrenMap[_id]);
+    }) : null;
+  });
+  return useCreation(function () {
+    return render(data);
+  }, deps || [data]);
+}