fix: 修复从 schema2code 时, state 恢复错误的问题

LeoYuan · LeoYuan · commit 9bdc7fd10331 · 2022-11-18T11:00:31.000+08:00
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -31,6 +31,16 @@ module.exports = {
     '@typescript-eslint/indent': 0,
     'import/no-cycle': 0,
     '@typescript-eslint/no-shadow': 0,
-    'max-len': ["error", {"code": 180}]
-  }
+    'max-len': ['error', { code: 180 }],
+    'comma-dangle': [
+      'warn',
+      {
+        objects: 'always',
+        arrays: 'always',
+        imports: 'never',
+        functions: 'never',
+      },
+    ],
+    semi: ['error', 'always'],
+  },
 };
diff --git a/packages/plugin-code-editor/.editorconfig b/packages/plugin-code-editor/.editorconfig
@@ -0,0 +1,13 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+quote_type = single
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/packages/plugin-code-editor/.eslintignore b/packages/plugin-code-editor/.eslintignore
@@ -0,0 +1,7 @@
+node_modules/
+build/
+dist/
+**/*.min.js
+**/*-min.js
+**/*.bundle.js
+*.js
diff --git a/packages/plugin-code-editor/.eslintrc.js b/packages/plugin-code-editor/.eslintrc.js
@@ -0,0 +1,11 @@
+module.exports = {
+  extends: [
+    'eslint-config-ali/typescript/react',
+    'prettier',
+    'prettier/@typescript-eslint',
+    'prettier/react',
+  ],
+  rules: {
+    'no-param-reassign': 0,
+  },
+};
diff --git a/packages/plugin-code-editor/CHANGELOG.md b/packages/plugin-code-editor/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 1.0.4 / 2022-11-18
+
+- 修复从 schema2code 时, state 恢复错误的问题
+
 ## 1.0.3 / 2022-07-11
 
 - Fix 源码面板高度塌陷的 [bug](https://github.com/alibaba/lowcode-engine/issues/803)
diff --git a/packages/plugin-code-editor/package.json b/packages/plugin-code-editor/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@alilc/lowcode-plugin-code-editor",
   "author": "59174526@qq.com & humphry.huang9@gmail.com",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "CodeEditor",
   "files": [
     "es",
diff --git a/packages/plugin-code-editor/src/config/default-code.ts b/packages/plugin-code-editor/src/config/default-code.ts
@@ -1,5 +1,5 @@
 export const defaultCode = `
-  export default class LowcodeComponent extends Component {
+  export default class Page extends Component {
     // 可以在 state 中定义搭建所需要的 State
     state = {
       test: 1,
diff --git a/packages/plugin-code-editor/src/index.tsx b/packages/plugin-code-editor/src/index.tsx
@@ -14,7 +14,7 @@ const plugin = (ctx: ILowCodePluginContext) => {
     },
     // 插件的初始化函数，在引擎初始化之后会立刻调用
     init() {
-      const schemaDock = ctx.skeleton.add({
+      const codeEditorDock = ctx.skeleton.add({
         area: 'leftArea',
         name: 'codeEditor',
         type: 'PanelDock',
@@ -35,9 +35,9 @@ const plugin = (ctx: ILowCodePluginContext) => {
         ),
       });
 
-      schemaDock && schemaDock.disable();
+      codeEditorDock && codeEditorDock.disable();
       project.onSimulatorRendererReady(() => {
-        schemaDock.enable();
+        codeEditorDock.enable();
       });
     },
   };
diff --git a/packages/plugin-code-editor/src/types/methods.ts b/packages/plugin-code-editor/src/types/methods.ts
@@ -1,7 +1,8 @@
+import { JSFunction, JSExpression } from '@alilc/lowcode-types';
+export type Method = JSExpression | JSFunction & {
+  source: string;
+}
+
 export interface Methods {
-  [key: string]: {
-    type: 'JSFunction';
-    value: string;
-    originalCode: string;
-  };
+  [key: string]: Method;
 }
diff --git a/packages/plugin-code-editor/src/types/state.ts b/packages/plugin-code-editor/src/types/state.ts
@@ -1,6 +1,6 @@
 import { JSExpression } from '@alilc/lowcode-types';
 
-export interface IState extends JSExpression{
-    // 原始代码
-    originCode: string;
+export interface IState extends JSExpression {
+  // 原始代码
+  source: string;
 }
diff --git a/packages/plugin-code-editor/src/typings.d.ts b/packages/plugin-code-editor/src/typings.d.ts
diff --git a/packages/plugin-code-editor/src/utils/evaluate.ts b/packages/plugin-code-editor/src/utils/evaluate.ts
@@ -0,0 +1,32 @@
+interface Expr {
+  type: string;
+  value: string | number;
+  extType?: string;
+}
+
+type ExprType = Expr | string;
+
+function getExprStr(expr: ExprType) {
+  if (typeof expr === 'string') {
+    return expr;
+  }
+  return expr && (expr as Expr).value;
+}
+
+function getEvalExpressionStr(expr: ExprType): string | undefined {
+  const exprStr = getExprStr(expr);
+  if (exprStr == undefined) {
+    return exprStr;
+  } else if (exprStr === '') {
+    return undefined;
+  }
+  return `(function(){return (${exprStr})}).call($scope)`;
+}
+
+export function evaluate(expr: ExprType) {
+  const evalExprStr = getEvalExpressionStr(expr);
+  const code = `with($scope || {}) { return ${evalExprStr} }`;
+  const fn = new Function('$scope', code);
+  // 暂时不传递 $scope
+  return fn();
+}
diff --git a/packages/plugin-code-editor/src/utils/get-methods.ts b/packages/plugin-code-editor/src/utils/get-methods.ts
@@ -54,8 +54,7 @@ export const getMethods = (ast: Node) => {
       methods[name] = {
         type: 'JSFunction',
         value: compiledCode,
-        // 这里的 originalCode 直接放在全局，不挂在局部
-        // originalCode: codeStr,
+        source: codeStr,
       };
     },
   });
diff --git a/packages/plugin-code-editor/src/utils/schema-to-code.ts b/packages/plugin-code-editor/src/utils/schema-to-code.ts
@@ -1,14 +1,14 @@
-
 import { js_beautify, css_beautify } from 'js-beautify';
-import { isJSExpression, ProjectSchema, RootSchema, JSFunction, JSExpression } from '@alilc/lowcode-types';
+import { isJSExpression, ProjectSchema, RootSchema } from '@alilc/lowcode-types';
 import { Dialog } from '@alifd/next';
 import { IState } from '../types';
-import { defaultStateCode, WORDS } from '../config';
+import { WORDS } from '../config';
+import type { Method } from '../types/methods';
 
 const js_beautify_config = { indent_size: 2, indent_empty_lines: true, e4x: true };
 
 const initCode = (componentSchema: RootSchema | undefined) => {
-  const code = `class LowcodeComponent extends Component {
+  const code = `class Page extends Component {
     ${initStateCode(componentSchema)}
     ${initLifeCycleCode(componentSchema)}
     ${initMethodsCode(componentSchema)}
@@ -30,34 +30,35 @@ export const schema2CssCode = (schema: ProjectSchema) => {
 };
 
 export const beautifyCSS = (input?: string): string => {
-  return input ? css_beautify(input, { indent_size: 2 }) : ''
+  return input ? css_beautify(input, { indent_size: 2 }) : '';
 }
 
 function initStateCode(componentSchema: RootSchema | undefined) {
   if (componentSchema?.state) {
-    let states: Record<string, any> = {};
+    let statesStr = 'state = {\n';
     let needNotice = false;
-    Object.keys(componentSchema.state).forEach((item) => {
-      const state = componentSchema.state?.[item];
+    Object.keys(componentSchema.state).forEach((key) => {
+      const state = componentSchema.state?.[key];
       if (typeof state === 'object' && isJSExpression(state)) {
-        states[item] = (state as IState).originCode || state.value; // 兼容历史数据
-        if (!(state as IState).originCode) {
+        if (!(state as IState).source) {
           needNotice = true;
         }
+        statesStr += `"${key}": ${(state as IState).source || state.value},\n`;
       } else {
-        states[item] = state; // 兼容历史数据
+        statesStr += `"${key}": ${typeof state === 'string' ? '"' + state + '"' : state},,\n`;
       }
+
     });
     if (needNotice) {
       Dialog.alert({
         title: WORDS.title,
         content: WORDS.irreparableState,
       });
     }
-    return `state = ${JSON.stringify(states)}`;
+    statesStr += '}';
+    return statesStr;
   }
 
-  return defaultStateCode;
 }
 
 function initLifeCycleCode(componentSchema: RootSchema | undefined) {
@@ -100,10 +101,10 @@ function initMethodsCode(componentSchema: RootSchema | undefined) {
   }
 }
 
-function createFunctionCode(functionName: string, functionNode: JSFunction | JSExpression) {
+function createFunctionCode(functionName: string, functionNode: Method) {
   if (functionNode?.type === 'JSExpression' || functionNode?.type === 'JSFunction') {
     // 读取原始代码
-    let functionCode = functionNode.originalCode;
+    let functionCode = functionNode.source;
     if (functionCode) {
       functionCode = functionCode.replace(/function/, '');
     } else {
diff --git a/packages/plugin-code-editor/src/utils/state-parser.ts b/packages/plugin-code-editor/src/utils/state-parser.ts
@@ -18,15 +18,14 @@ export const stateParser = (ast: Node) => {
       // get state identifier or literal
       if (path.isIdentifier({ name: 'state' }) || path.isLiteral({ value: 'state' })) {
         const properties = path.container?.value?.properties;
-        // console.log('properties', properties);
         if (properties) {
           properties.forEach((property) => {
             // creat empty AST
             const code = parse('');
             code.program.body.push(t.variableDeclaration('var', [
               t.variableDeclarator(t.identifier('name'), property.value),
             ]));
-            
+
             const codeStr = babelTransformFromAst(code).code;
             const compiledCode = transformJS(codeStr, defaultBabelConfig).code;
             if (compiledCode) {
diff --git a/packages/plugin-code-editor/src/utils/transform.ts b/packages/plugin-code-editor/src/utils/transform.ts
@@ -1,4 +1,3 @@
-
 import { transform } from './babel';
 import { TransformResult } from '../types';
 

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@alilc/lowcode-plugin-code-editor",`
`3`	`3`	`"author": "59174526@qq.com & humphry.huang9@gmail.com",`
`4`		`- "version": "1.0.3",`
	`4`	`+ "version": "1.0.4",`
`5`	`5`	`"description": "CodeEditor",`
`6`	`6`	`"files": [`
`7`	`7`	`"es",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`import { JSExpression } from '@alilc/lowcode-types';`
`2`	`2`
`3`		`-export interface IState extends JSExpression{`
`4`		`- // 原始代码`
`5`		`- originCode: string;`
	`3`	`+export interface IState extends JSExpression {`
	`4`	`+ // 原始代码`
	`5`	`+ source: string;`
`6`	`6`	`}`