Merge pull request #138 from webzard-io/feat/dependency

Allow add custom dependencies for eval

packages/editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sunmao-ui/editor",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "sunmao-ui editor",
   "author": "sunmao-ui developers",
   "homepage": "https://github.com/webzard-io/sunmao-ui#readme",
@@ -36,7 +36,7 @@
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "@sunmao-ui/core": "^0.3.0",
-    "@sunmao-ui/runtime": "^0.3.2",
+    "@sunmao-ui/runtime": "^0.3.3",
     "codemirror": "^5.63.3",
     "formik": "^2.2.9",
     "framer-motion": "^4",

packages/runtime/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sunmao-ui/runtime",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "sunmao-ui runtime",
   "author": "sunmao-ui developers",
   "homepage": "https://github.com/webzard-io/sunmao-ui#readme",
@@ -45,7 +45,6 @@
     "mitt": "^3.0.0",
     "nanoid": "^3.1.23",
     "path-to-regexp": "^6.2.0",
-    "performant-array-to-tree": "^1.9.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-grid-layout": "^1.3.0",

packages/runtime/src/index.ts

@@ -1,13 +1,13 @@
-import { initStateManager } from './services/stateStore';
+import { StateManager } from './services/stateStore';
 import { genApp } from './App';
 import { initRegistry } from './services/registry';
 import { initApiService } from './services/apiService';
 import { mountUtilMethods } from './services/util-methods';
 import { initGlobalHandlerMap } from './services/handler';
 
-export function initSunmaoUI() {
+export function initSunmaoUI(dependencies = {}) {
   const registry = initRegistry();
-  const stateManager = initStateManager();
+  const stateManager = new StateManager(dependencies);
   const globalHandlerMap = initGlobalHandlerMap();
   const apiService = initApiService();
   mountUtilMethods(apiService);

packages/runtime/src/services/stateStore.ts

@@ -5,8 +5,8 @@ import isLeapYear from 'dayjs/plugin/isLeapYear';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import LocalizedFormat from 'dayjs/plugin/localizedFormat';
 import { reactive } from '@vue/reactivity';
-import { arrayToTree } from 'performant-array-to-tree';
 import { watch } from '../utils/watchReactivity';
+import { isNumeric } from '../utils/isNumeric';
 import { LIST_ITEM_EXP, LIST_ITEM_INDEX_EXP } from '../constants';
 
 dayjs.extend(relativeTime);
@@ -17,25 +17,21 @@ dayjs.locale('zh-cn');
 type ExpChunk = string | ExpChunk[];
 
 // TODO: use web worker
-const builtIn = {
+const DefaultDependencies = {
   dayjs,
   _,
-  // TODO: It is a custom dependency, should not be add here
-  arrayToTree,
 };
 
-function isNumeric(x: string | number) {
-  return !isNaN(Number(x)) && x !== '';
-}
-
-export function initStateManager() {
-  return new StateManager();
-}
-
 export class StateManager {
   store = reactive<Record<string, any>>({});
 
-  evalExp(expChunk: ExpChunk, scopeObject = {}): unknown {
+  dependencies: Record<string, unknown>;
+
+  constructor(dependencies: Record<string, unknown> = {}) {
+    this.dependencies = { ...DefaultDependencies, ...dependencies };
+  }
+
+  evalExp = (expChunk: ExpChunk, scopeObject = {}): unknown => {
     if (typeof expChunk === 'string') {
       return expChunk;
     }
@@ -45,14 +41,14 @@ export class StateManager {
     try {
       evaled = new Function(`with(this) { return ${evalText} }`).call({
         ...this.store,
-        ...builtIn,
+        ...this.dependencies,
         ...scopeObject,
       });
     } catch (e: any) {
       return `{{ ${evalText} }}`;
     }
     return evaled;
-  }
+  };
 
   maskedEval(raw: string, evalListItem = false, scopeObject = {}) {
     if (isNumeric(raw)) {
@@ -105,7 +101,9 @@ export class StateManager {
 
     const evaluated = this.mapValuesDeep(obj, ({ value: v, path }) => {
       if (typeof v === 'string') {
-        const isDynamicExpression = parseExpression(v).some(exp => typeof exp !== 'string');
+        const isDynamicExpression = parseExpression(v).some(
+          exp => typeof exp !== 'string'
+        );
         const result = this.maskedEval(v);
         if (isDynamicExpression && watcher) {
           const stop = watch(

packages/runtime/src/utils/isNumeric.ts

@@ -0,0 +1,3 @@
+export function isNumeric(x: string | number) {
+  return !isNaN(Number(x)) && x !== '';
+}