Merge branch 'release/1.0.5'

2026-01-26 20:38:11 +00:00 · 2022-04-11 15:54:02 +08:00 · 2022-04-11 15:54:02 +08:00 · a78f31ae20
commit a78f31ae20
parent 0b85cb357f 70cf733b11
69 changed files with 1374 additions and 156 deletions
--- a/.github/workflows/test
+++ b/.github/workflows/test
@ -0,0 +1,44 @@
+name: lint & test
+
+on:
+  push:
+    paths:
+      - 'modules/**'
+      - '!modules/**.md'
+  pull_request:
+    paths:
+      - 'modules/**'
+      - '!modules/**.md'
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: install
+        run: npm i
+
+      - name: lint
+        run: npm run lint:modules
+
+  test-code-generator:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: install
+        run: npm i && npm run setup:skip-build
+
+      - name: test
+        run: cd modules/code-generator && npm i && npm run build && npm test
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -1,6 +1,14 @@
 name: lint & test

-on: [push, pull_request]
+on:
+  push:
+    paths:
+      - 'packages/**'
+      - '!packages/**.md'
+  pull_request:
+    paths:
+      - 'packages/**'
+      - '!packages/**.md'

 jobs:
  lint:
--- a/lerna.json
+++ b/lerna.json
@ -1,6 +1,6 @@
 {
  "lerna": "4.0.0",
-  "version": "1.0.3",
+  "version": "1.0.5",
  "npmClient": "yarn",
  "useWorkspaces": true,
  "packages": [
--- a/modules/code-generator/CHANGELOG.md
+++ b/modules/code-generator/CHANGELOG.md
@ -2,6 +2,27 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

+### [1.0.3](https://github.com/alibaba/lowcode-engine/compare/@alilc/lowcode-code-generator@1.0.2...@alilc/lowcode-code-generator@1.0.3) (2022-03-29)
+
+
+### Features
+
+* add getConvertedExtraKey / getOriginalExtraKey to utils ([8e7bb9d](https://github.com/alibaba/lowcode-engine/commit/8e7bb9d4b86454dd77c6928eb769cd764cad8630))
+
+
+### Bug Fixes
+
+* 🐛 出码: 解决 componentName 和 exportName 不一致时生成的 import 语句的问题 ([eefc091](https://github.com/alibaba/lowcode-engine/commit/eefc091ee7e86d6214d20d486212cb5aff237946))
+* component cannot be redisplayed by configuration after rendering is closed ([c54f369](https://github.com/alibaba/lowcode-engine/commit/c54f369e1860d818479dda9d6429f851c0b08fa6))
+* fix loop configuration auto fill empty array issue ([d087092](https://github.com/alibaba/lowcode-engine/commit/d087092fd712eff0556adacda692d3ff6f2f9f22))
+* make important true by default ([c63b6e1](https://github.com/alibaba/lowcode-engine/commit/c63b6e1bfadc3fc87ed41840952e02ffbff24fab))
+* make insertAfter & insertBefore work ([70fd372](https://github.com/alibaba/lowcode-engine/commit/70fd3720d098d6e227acb9281ee22feee66b9c0b))
+* npm源 ([437adcc](https://github.com/alibaba/lowcode-engine/commit/437adccf5f2dbb400de6e2bef10cfc4b65286f2b))
+* prop should return undefined when all items are undefined ([5bb9ec7](https://github.com/alibaba/lowcode-engine/commit/5bb9ec7a1dfaabfdb5369226b54d5f63a7999e59))
+* should not create new prop while querying fileName ([19c207d](https://github.com/alibaba/lowcode-engine/commit/19c207d29de045f473ba73baaf34e7294d40261a))
+* variable binding lost after modify the mock value ([ef95b56](https://github.com/alibaba/lowcode-engine/commit/ef95b5683273d8302bde1582de8afe3d87a808d8))
+* Workbench should receive the original skeleton other than shell skeleton ([d5c3ca1](https://github.com/alibaba/lowcode-engine/commit/d5c3ca1068ce2c2140980bd059d0da333574dc34))
+
 ### [1.0.2](https://github.com/alibaba/lowcode-engine/compare/@alilc/lowcode-code-generator@1.0.2-beta.1...@alilc/lowcode-code-generator@1.0.2) (2022-03-08)

 ### [1.0.2-beta.1](https://github.com/alibaba/lowcode-engine/compare/@alilc/lowcode-code-generator@1.0.2-beta.0...@alilc/lowcode-code-generator@1.0.2-beta.1) (2022-03-08)
--- a/modules/code-generator/package.json
+++ b/modules/code-generator/package.json
@ -1,6 +1,6 @@
 {
  "name": "@alilc/lowcode-code-generator",
-  "version": "1.0.2",
+  "version": "1.0.3",
  "description": "出码引擎 for LowCode Engine",
  "license": "MIT",
  "main": "lib/index.js",
--- a/modules/code-generator/src/cli/index.ts
+++ b/modules/code-generator/src/cli/index.ts
@ -1,2 +1,2 @@
 export * from './run';
-export * from './init-solution';
+export * from './init-solution';
--- a/modules/code-generator/src/plugins/common/esmodule.ts
+++ b/modules/code-generator/src/plugins/common/esmodule.ts
@ -1,4 +1,4 @@
-import { flatMap } from 'lodash';
+import { flatMap, camelCase, get } from 'lodash';
 import { COMMON_CHUNK_NAME } from '../../const/generator';

 import {
@ -71,6 +71,37 @@ function getDependencyIdentifier(info: IDependencyItem): string {
  return info.aliasName || info.exportName;
 }

+function getExportNameOfDep(dep: IDependency): string {
+  if (dep.destructuring) {
+    return (
+      dep.exportName ||
+      dep.componentName ||
+      throwNewError('destructuring dependency must have exportName or componentName')
+    );
+  }
+
+  if (!dep.subName) {
+    return (
+      dep.componentName ||
+      dep.exportName ||
+      throwNewError('dependency item must have componentName or exportName')
+    );
+  }
+
+  return (
+    dep.exportName ||
+    `__$${camelCase(
+      get(dep, 'moduleName') ||
+        get(dep, 'package') ||
+        throwNewError('dep.moduleName or dep.package is undefined'),
+    )}_default`
+  );
+}
+
+function throwNewError(msg: string): never {
+  throw new Error(msg);
+}
+
 function buildPackageImport(
  pkg: string,
  deps: IDependency[],
@ -90,7 +121,7 @@ function buildPackageImport(

  const depsInfo: IDependencyItem[] = deps.map((dep) => {
    const info: IDependencyItem = {
-      exportName: dep.exportName,
+      exportName: getExportNameOfDep(dep),
      isDefault: !dep.destructuring,
      subName: dep.subName || undefined,
      nodeIdentifier: dep.componentName || undefined,
@ -171,24 +202,21 @@ function buildPackageImport(

  // 发现 nodeIdentifier 与 exportName 或者 aliasName 冲突的场景
  const nodeIdentifiers = depsInfo.map((info) => info.nodeIdentifier).filter(Boolean);
-  const conflictInfos = flatMap(
-    Object.keys(exportItems),
-    (exportName) => {
-      const exportItem = exportItems[exportName];
-      const usedNames = [
-        ...exportItem.aliasNames,
-        ...(exportItem.needOriginExport || exportItem.aliasNames.length <= 0 ? [exportName] : []),
+  const conflictInfos = flatMap(Object.keys(exportItems), (exportName) => {
+    const exportItem = exportItems[exportName];
+    const usedNames = [
+      ...exportItem.aliasNames,
+      ...(exportItem.needOriginExport || exportItem.aliasNames.length <= 0 ? [exportName] : []),
+    ];
+    const conflictNames = usedNames.filter((n) => nodeIdentifiers.indexOf(n) >= 0);
+    if (conflictNames.length > 0) {
+      return [
+        ...(conflictNames.indexOf(exportName) >= 0 ? [[exportName, true, exportItem]] : []),
+        ...conflictNames.filter((n) => n !== exportName).map((n) => [n, false, exportItem]),
      ];
-      const conflictNames = usedNames.filter((n) => nodeIdentifiers.indexOf(n) >= 0);
-      if (conflictNames.length > 0) {
-        return [
-          ...(conflictNames.indexOf(exportName) >= 0 ? [[exportName, true, exportItem]] : []),
-          ...conflictNames.filter((n) => n !== exportName).map((n) => [n, false, exportItem]),
-        ];
-      }
-      return [];
-    },
-  );
+    }
+    return [];
+  });

  const conflictExports = conflictInfos.filter((c) => c[1]).map((c) => c[0] as string);
  const conflictAlias = conflictInfos.filter((c) => !c[1]).map((c) => c[0] as string);
@ -282,6 +310,12 @@ function buildPackageImport(
        },
      });
    } else if (info.aliasName) {
+      // default 方式的导入会生成单独de import 语句，无需生成赋值语句
+      if (info.isDefault && defaultExportNames.find((n) => n === info.aliasName)) {
+        delete aliasDefineStatements[info.aliasName];
+        return;
+      }
+
      let contentStatement = '';
      if (aliasDefineStatements[info.aliasName]) {
        contentStatement = aliasDefineStatements[info.aliasName];
--- a/modules/code-generator/test-cases/react-app/demo3/expected/demo-project/src/pages/Test/index.jsx
+++ b/modules/code-generator/test-cases/react-app/demo3/expected/demo-project/src/pages/Test/index.jsx
@ -9,6 +9,8 @@ import Super, {
  SearchTable as SearchTableExport,
 } from "@alifd/next";

+import SuperOther from "@alifd/next";
+
 import utils from "../../utils";

 import { i18n as _$$i18n } from "../../i18n";
@ -17,8 +19,6 @@ import "./index.css";

 const SuperSub = Super.Sub;

-const SuperOther = Super;
-
 const SelectOption = Select.Option;

 const SearchTable = SearchTableExport.default;
--- a/modules/code-generator/tests/bugfix/icejs-import-wrong-naming.schema.json
+++ b/modules/code-generator/tests/bugfix/icejs-import-wrong-naming.schema.json
@ -0,0 +1,34 @@
+{
+  "version": "1.0.0",
+  "componentsMap": [
+    {
+      "package": "example-package",
+      "version": "1.2.3",
+      "exportName": "Bar",
+      "main": "lib/index.js",
+      "destructuring": false,
+      "subName": "",
+      "componentName": "Foo"
+    }
+  ],
+  "componentsTree": [
+    {
+      "componentName": "Page",
+      "id": "node_ocl137q7oc1",
+      "fileName": "test",
+      "props": { "style": {} },
+      "lifeCycles": {},
+      "dataSource": { "list": [] },
+      "state": {},
+      "methods": {},
+      "children": [
+        {
+          "componentName": "Foo",
+          "id": "node_ocl137q7oc4",
+          "props": {}
+        }
+      ]
+    }
+  ],
+  "i18n": {}
+}
--- a/modules/code-generator/tests/bugfix/icejs-import-wrong-naming.test.ts
+++ b/modules/code-generator/tests/bugfix/icejs-import-wrong-naming.test.ts
@ -0,0 +1,221 @@
+import CodeGenerator from '../../src';
+import * as fs from 'fs';
+import * as path from 'path';
+import { ProjectSchema } from '@alilc/lowcode-types';
+
+const testCaseBaseName = path.basename(__filename, '.test.ts');
+const inputSchemaJsonFile = path.join(__dirname, `${testCaseBaseName}.schema.json`);
+const outputDir = path.join(__dirname, `${testCaseBaseName}.generated`);
+
+jest.setTimeout(60 * 60 * 1000);
+
+describe(testCaseBaseName, () => {
+  test('default import', async () => {
+    await exportProject(inputSchemaJsonFile, outputDir, {
+      componentsMap: [
+        {
+          package: 'example-package',
+          version: '1.2.3',
+          exportName: 'Bar',
+          main: 'lib/index.js',
+          destructuring: false,
+          subName: '',
+          componentName: 'Foo',
+        },
+      ],
+    });
+
+    const generatedPageFileContent = readOutputTextFile('demo-project/src/pages/Test/index.jsx');
+    expect(generatedPageFileContent).toContain(`import Foo from "example-package/lib/index.js";`);
+  });
+
+  test('named import with no alias', async () => {
+    await exportProject(inputSchemaJsonFile, outputDir, {
+      componentsMap: [
+        {
+          package: 'example-package',
+          version: '1.2.3',
+          exportName: 'Foo',
+          main: 'lib/index.js',
+          destructuring: true,
+          subName: '',
+          componentName: 'Foo',
+        },
+      ],
+    });
+
+    const generatedPageFileContent = readOutputTextFile('demo-project/src/pages/Test/index.jsx');
+    expect(generatedPageFileContent).toContain(
+      `import { Foo } from "example-package/lib/index.js";`,
+    );
+  });
+
+  test('named import with alias', async () => {
+    await exportProject(inputSchemaJsonFile, outputDir, {
+      componentsMap: [
+        {
+          package: 'example-package',
+          version: '1.2.3',
+          exportName: 'Bar',
+          main: 'lib/index.js',
+          destructuring: true,
+          subName: '',
+          componentName: 'Foo',
+        },
+      ],
+    });
+
+    const generatedPageFileContent = readOutputTextFile('demo-project/src/pages/Test/index.jsx');
+    expect(generatedPageFileContent).toContain(
+      `import { Bar as Foo } from "example-package/lib/index.js";`,
+    );
+  });
+
+  test('default import with same name', async () => {
+    await exportProject(inputSchemaJsonFile, outputDir, {
+      componentsMap: [
+        {
+          package: 'example-package',
+          version: '1.2.3',
+          exportName: 'Foo',
+          main: 'lib/index.js',
+          destructuring: false,
+          subName: '',
+          componentName: 'Foo',
+        },
+      ],
+    });
+
+    const generatedPageFileContent = readOutputTextFile('demo-project/src/pages/Test/index.jsx');
+    expect(generatedPageFileContent).toContain(`import Foo from "example-package/lib/index.js";`);
+  });
+
+  test('default import with sub name and export name', async () => {
+    await exportProject(inputSchemaJsonFile, outputDir, {
+      componentsMap: [
+        {
+          package: 'example-package',
+          version: '1.2.3',
+          exportName: 'Bar',
+          main: 'lib/index.js',
+          destructuring: false,
+          subName: 'Baz',
+          componentName: 'Foo',
+        },
+      ],
+    });
+
+    const generatedPageFileContent = readOutputTextFile('demo-project/src/pages/Test/index.jsx');
+    expect(generatedPageFileContent).toContain(`import Bar from "example-package/lib/index.js";`);
+
+    expect(generatedPageFileContent).toContain(`const Foo = Bar.Baz;`);
+  });
+
+  test('default import with sub name without export name', async () => {
+    await exportProject(inputSchemaJsonFile, outputDir, {
+      componentsMap: [
+        {
+          package: 'example-package',
+          version: '1.2.3',
+          main: 'lib/index.js',
+          destructuring: false,
+          exportName: '',
+          subName: 'Baz',
+          componentName: 'Foo',
+        },
+      ],
+    });
+
+    const generatedPageFileContent = readOutputTextFile('demo-project/src/pages/Test/index.jsx');
+    expect(generatedPageFileContent).toContain(
+      `import __$examplePackage_default from "example-package/lib/index.js";`,
+    );
+
+    expect(generatedPageFileContent).toContain(`const Foo = __$examplePackage_default.Baz;`);
+  });
+
+  test('named import with sub name', async () => {
+    await exportProject(inputSchemaJsonFile, outputDir, {
+      componentsMap: [
+        {
+          package: 'example-package',
+          version: '1.2.3',
+          exportName: 'Bar',
+          main: 'lib/index.js',
+          destructuring: true,
+          subName: 'Baz',
+          componentName: 'Foo',
+        },
+      ],
+    });
+
+    const generatedPageFileContent = readOutputTextFile('demo-project/src/pages/Test/index.jsx');
+    expect(generatedPageFileContent).toContain(
+      `import { Bar } from "example-package/lib/index.js";`,
+    );
+
+    expect(generatedPageFileContent).toContain(`const Foo = Bar.Baz;`);
+  });
+
+  test('default imports with different componentName', async () => {
+    await exportProject(inputSchemaJsonFile, outputDir, {
+      componentsMap: [
+        {
+          package: 'example-package',
+          version: '1.2.3',
+          exportName: 'Bar',
+          destructuring: false,
+          componentName: 'Foo',
+        },
+        {
+          package: 'example-package',
+          version: '1.2.3',
+          exportName: 'Bar',
+          destructuring: false,
+          componentName: 'Baz',
+        },
+      ],
+      componentsTree: [
+        {
+          componentName: 'Page',
+          fileName: 'test',
+          dataSource: { list: [] },
+          children: [{ componentName: 'Foo' }, { componentName: 'Baz' }],
+        },
+      ],
+    });
+
+    const generatedPageFileContent = readOutputTextFile('demo-project/src/pages/Test/index.jsx');
+    expect(generatedPageFileContent).toContain(`import Foo from "example-package";`);
+    expect(generatedPageFileContent).toContain(`import Baz from "example-package";`);
+
+    expect(generatedPageFileContent).not.toContain(`const Foo =`);
+    expect(generatedPageFileContent).not.toContain(`const Baz =`);
+  });
+});
+
+function exportProject(
+  importPath: string,
+  outputPath: string,
+  mergeSchema?: Partial<ProjectSchema>,
+) {
+  const schemaJsonStr = fs.readFileSync(importPath, { encoding: 'utf8' });
+  const schema = { ...JSON.parse(schemaJsonStr), ...mergeSchema };
+  const builder = CodeGenerator.solutions.icejs();
+
+  return builder.generateProject(schema).then(async (result) => {
+    // displayResultInConsole(result);
+    const publisher = CodeGenerator.publishers.disk();
+    await publisher.publish({
+      project: result,
+      outputPath,
+      projectSlug: 'demo-project',
+      createProjectFolder: true,
+    });
+    return result;
+  });
+}
+
+function readOutputTextFile(outputFilePath: string): string {
+  return fs.readFileSync(path.resolve(outputDir, outputFilePath), 'utf-8');
+}
--- a/modules/material-parser/README.md
+++ b/modules/material-parser/README.md
@ -1,16 +1,22 @@
-# @ali/lowcode-material-parser
+# @alilc/lowcode-material-parser

 > 入料模块

 本模块负责物料接入，能自动扫描、解析源码组件，并最终产出一份符合《中后台搭建组件描述协议》的 **JSON Schema**。

-详见[文档](https://yuque.antfin-inc.com/ali-lowcode/docs/tyktrt)。
+详见[文档](https://lowcode-engine.cn/docV2/yhgcqb)。

 ## demo

 ```shell
 cd demo
-node index.js
+
+// parse jsx
+node parse-jsx.js
+
+// parse tsx
+node parse-tsx.js
+
 ```

 ## API
--- a/modules/material-parser/demo/component.tsx
+++ b/modules/material-parser/demo/component.tsx
@ -0,0 +1,54 @@
+/* eslint-disable react/forbid-prop-types,react/no-unused-prop-types */
+import React from 'react';
+
+import './main.scss';
+
+interface DemoProps {
+  optionalArray?: [],
+  optionalBool: boolean,
+  optionalFunc: Function,
+  optionalNumber: number,
+  optionalObject: object,
+  optionalString: string,
+  optionalSymbol: symbol,
+
+  // Anything that can be rendered: numbers, strings, elements or an array
+  // (or fragment) containing these types.
+  optionalNode: React.ReactNode,
+
+  // A React element (ie. <MyComponent />).
+  optionalElement: React.ReactElement,
+
+  // A React element type (ie. MyComponent).
+  optionalElementType: React.ElementType,
+
+  // You can also declare that a prop is an instance of a class. This uses
+  // JS's instanceof operator.
+  optionalMessage: React.ReactInstance,
+
+  // You can ensure that your prop is limited to specific values by treating
+  // it as an enum.
+  optionalEnum: 'News'|'Photos',
+
+  // An object that could be one of many types
+  optionalUnion: string|number|React.ReactInstance,
+
+  // An array of a certain type
+  optionalArrayOf: number[],
+
+  // An object with property values of a certain type
+  optionalObjectOf: Record<number, any>,
+
+  // You can chain any of the above with `isRequired` to make sure a warning
+  // is shown if the prop isn't provided.
+}
+
+const Demo = (props: DemoProps) => {
+  return <div> Test </div>;
+}
+
+Demo.defaultProps = {
+  optionalString: 'optionalString'
+};
+
+export default Demo;
--- a/modules/material-parser/demo/parse-jsx.js
+++ b/modules/material-parser/demo/parse-jsx.js
--- a/modules/material-parser/demo/parse-tsx.js
+++ b/modules/material-parser/demo/parse-tsx.js
@ -0,0 +1,11 @@
+const parse = require('../lib').default;
+
+(async () => {
+  const options = {
+    entry: './component.tsx',
+    accesser: 'local',
+  };
+
+  const actual = await parse(options);
+  console.log(JSON.stringify(actual, null, 2));
+})();
--- a/modules/material-parser/package.json
+++ b/modules/material-parser/package.json
@ -1,6 +1,6 @@
 {
  "name": "@alilc/lowcode-material-parser",
-  "version": "1.0.1",
+  "version": "1.0.3",
  "description": "material parser for Ali lowCode engine",
  "main": "lib/index.js",
  "files": [
@ -18,6 +18,8 @@
    "@types/prop-types": "^15.7.3",
    "copy-webpack-plugin": "^9.1.0",
    "copyfiles": "^2.4.1",
+    "eslint": "^8.12.0",
+    "eslint-config-ali": "^14.0.0",
    "jest": "^26.6.3",
    "js-yaml": "^3.13.1",
    "json-schema-to-typescript": "^8.2.0",
--- a/modules/material-parser/src/parse/transform.ts
+++ b/modules/material-parser/src/parse/transform.ts
@ -282,21 +282,21 @@ export function transformItem(name: string, item: any) {
  if (!isNil(defaultValue) && typeof defaultValue === 'object' && isEvaluable(defaultValue)) {
    if (defaultValue === null) {
      result.defaultValue = defaultValue;
-    } else {
-      // if ('computed' in defaultValue) {
-      // val = val.value;
+    } else if ('computed' in defaultValue) {
+      // parsed data from react-docgen
      try {
-        const value = safeEval(defaultValue.value);
-        if (isEvaluable(value)) {
-          result.defaultValue = value;
+        if (isEvaluable(defaultValue.value)) {
+          result.defaultValue = safeEval(defaultValue.value);
+        } else {
+          result.defaultValue = defaultValue.value;
        }
      } catch (e) {
        log(e);
      }
+    } else {
+      // parsed data from react-docgen-typescript
+      result.defaultValue = defaultValue.value;
    }
-    // else {
-    //   result.defaultValue = defaultValue.value;
-    // }
  }
  if (result.propType === undefined) {
    delete result.propType;
--- a/modules/material-parser/src/utils.ts
+++ b/modules/material-parser/src/utils.ts
@ -13,6 +13,14 @@ export async function isNPMInstalled(args: {
  return pathExists(path.join(args.workDir, 'node_modules'));
 }

+export async function isNPMModuleInstalled(
+  args: { workDir: string; moduleDir: string; npmClient?: string },
+  name: string,
+) {
+  const modulePkgJsonPath = path.resolve(args.workDir, 'node_modules', name, 'package.json');
+  return pathExists(modulePkgJsonPath);
+}
+
 export async function install(args: { workDir: string; moduleDir: string; npmClient?: string }) {
  if (await isNPMInstalled(args)) return;
  const { workDir, npmClient = 'tnpm' } = args;
@ -27,6 +35,7 @@ export async function installModule(
  args: { workDir: string; moduleDir: string; npmClient?: string },
  name: string,
 ) {
+  if (await isNPMModuleInstalled(args, name)) return;
  const { workDir, npmClient = 'tnpm' } = args;
  try {
    await spawn(npmClient, ['i', name], { stdio: 'inherit', cwd: workDir } as any);
--- a/package.json
+++ b/package.json
@ -16,6 +16,8 @@
    "clean": "rm -rf ./packages/*/lib ./packages/*/es ./packages/*/dist ./packages/*/build",
    "lint": "f2elint scan -q -i ./packages/*/src",
    "lint:fix": "f2elint fix -i ./packages/*/src",
+    "lint:modules": "f2elint scan -q -i ./modules/*/src",
+    "lint:modules:fix": "f2elint fix -i ./modules/*/src",
    "pub": "npm run watchdog:build && lerna publish patch --force-publish --exact --no-changelog",
    "pub:premajor": "npm run watchdog:build && lerna publish premajor --force-publish --exact --dist-tag beta --preid beta --no-changelog",
    "pub:prepatch": "npm run watchdog:build && lerna publish prepatch --force-publish --exact --dist-tag beta --preid beta --no-changelog",
--- a/packages/designer/jest.config.js
+++ b/packages/designer/jest.config.js
@ -31,6 +31,7 @@ const jestConfig = {
    '!src/builtin-simulator/live-editing/live-editing.ts',
    '!src/designer/offset-observer.ts',
    '!src/designer/clipboard.ts',
+    '!src/builtin-simulator/host.ts',
    '!**/node_modules/**',
    '!**/vendor/**',
  ],
--- a/packages/designer/package.json
+++ b/packages/designer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@alilc/lowcode-designer",
-  "version": "1.0.3",
+  "version": "1.0.5",
  "description": "Designer for Ali LowCode Engine",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -15,10 +15,10 @@
  },
  "license": "MIT",
  "dependencies": {
-    "@alilc/lowcode-editor-core": "1.0.3",
-    "@alilc/lowcode-shell": "1.0.3",
-    "@alilc/lowcode-types": "1.0.3",
-    "@alilc/lowcode-utils": "1.0.3",
+    "@alilc/lowcode-editor-core": "1.0.5",
+    "@alilc/lowcode-shell": "1.0.5",
+    "@alilc/lowcode-types": "1.0.5",
+    "@alilc/lowcode-utils": "1.0.5",
    "classnames": "^2.2.6",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.5",
--- a/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx
+++ b/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx
@ -98,7 +98,7 @@ class Toolbar extends Component<{ observed: OffsetObserver }> {
    const { node } = observed;
    const actions: ReactNodeArray = [];
    node.componentMeta.availableActions.forEach((action) => {
-      const { important, condition, content, name } = action;
+      const { important = true, condition, content, name } = action;
      if (node.isSlot() && (name === 'copy' || name === 'remove')) {
        // FIXME: need this?
        return;
--- a/packages/designer/src/designer/drag-ghost/index.tsx
+++ b/packages/designer/src/designer/drag-ghost/index.tsx
@ -26,7 +26,7 @@ export default class DragGhost extends Component<{ designer: Designer }> {
    makeObservable(this);
    this.dispose = [
      this.dragon.onDragstart(e => {
-        if (e.originalEvent.type.substr(0, 4) === 'drag') {
+        if (e.originalEvent.type.slice(0, 4) === 'drag') {
          return;
        }
        this.dragObject = e.dragObject;
--- a/packages/designer/src/designer/setting/setting-prop-entry.ts
+++ b/packages/designer/src/designer/setting/setting-prop-entry.ts
@ -56,7 +56,7 @@ export class SettingPropEntry implements SettingEntry {
  constructor(readonly parent: SettingEntry, name: string | number, type?: 'field' | 'group') {
    makeObservable(this);
    if (type == null) {
-      const c = typeof name === 'string' ? name.substr(0, 1) : '';
+      const c = typeof name === 'string' ? name.slice(0, 1) : '';
      if (c === '#') {
        this.type = 'group';
      } else {
--- a/packages/designer/src/document/node/props/props.ts
+++ b/packages/designer/src/document/node/props/props.ts
@ -14,7 +14,7 @@ export function getConvertedExtraKey(key: string): string {
  if (key.indexOf('.') > 0) {
    _key = key.split('.')[0];
  }
-  return EXTRA_KEY_PREFIX + _key + EXTRA_KEY_PREFIX + key.substr(_key.length);
+  return EXTRA_KEY_PREFIX + _key + EXTRA_KEY_PREFIX + key.slice(_key.length);
 }
 export function getOriginalExtraKey(key: string): string {
  return key.replace(new RegExp(`${EXTRA_KEY_PREFIX}`, 'g'), '');
--- a/packages/designer/src/document/node/props/value-to-source.ts
+++ b/packages/designer/src/document/node/props/value-to-source.ts
@ -66,7 +66,7 @@ export function valueToSource(
            indentString,
            lineEnding,
            visitedObjects: new Set([value, ...visitedObjects]),
-          }).substr(indentLevel * indentString.length)})`
+          }).slice(indentLevel * indentString.length)})`
          : `${indentString.repeat(indentLevel)}new Map()`;
      }

@ -85,7 +85,7 @@ export function valueToSource(
            indentString,
            lineEnding,
            visitedObjects: new Set([value, ...visitedObjects]),
-          }).substr(indentLevel * indentString.length)})`
+          }).slice(indentLevel * indentString.length)})`
          : `${indentString.repeat(indentLevel)}new Set()`;
      }

@ -129,7 +129,7 @@ export function valueToSource(
          if (item === null) {
            items.push(indentString.repeat(indentLevel + 1));
          } else if (itemsStayOnTheSameLine) {
-            items.push(item.substr(indentLevel * indentString.length));
+            items.push(item.slice(indentLevel * indentString.length));
          } else {
            items.push(item);
          }
@ -166,11 +166,11 @@ export function valueToSource(
              doubleQuote,
            })
            : propertyName;
-          const trimmedPropertyValueString = propertyValueString.substr((indentLevel + 1) * indentString.length);
+          const trimmedPropertyValueString = propertyValueString.slice((indentLevel + 1) * indentString.length);

          if (typeof propertyValue === 'function' && trimmedPropertyValueString.startsWith(`${propertyName}()`)) {
            entries.push(
-              `${indentString.repeat(indentLevel + 1)}${quotedPropertyName} ${trimmedPropertyValueString.substr(
+              `${indentString.repeat(indentLevel + 1)}${quotedPropertyName} ${trimmedPropertyValueString.slice(
                propertyName.length,
              )}`,
            );
--- a/packages/designer/src/project/project.ts
+++ b/packages/designer/src/project/project.ts
@ -2,7 +2,7 @@ import { EventEmitter } from 'events';
 import { obx, computed, makeObservable, action } from '@alilc/lowcode-editor-core';
 import { Designer } from '../designer';
 import { DocumentModel, isDocumentModel, isPageSchema } from '../document';
-import { ProjectSchema, RootSchema } from '@alilc/lowcode-types';
+import { ProjectSchema, RootSchema, TransformStage } from '@alilc/lowcode-types';
 import { ISimulatorHost } from '../simulator';

 export class Project {
@ -52,12 +52,12 @@ export class Project {
  /**
   * 获取项目整体 schema
   */
-  getSchema(): ProjectSchema {
+  getSchema(stage: TransformStage = TransformStage.Render): ProjectSchema {
    return {
      ...this.data,
      // TODO: future change this filter
      componentsMap: this.currentDocument?.getComponentsMap(),
-      componentsTree: this.documents.filter((doc) => !doc.isBlank()).map((doc) => doc.schema),
+      componentsTree: this.documents.filter((doc) => !doc.isBlank()).map((doc) => doc.export(stage)),
      i18n: this.i18n,
    };
  }
--- a/packages/editor-core/package.json
+++ b/packages/editor-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@alilc/lowcode-editor-core",
-  "version": "1.0.3",
+  "version": "1.0.5",
  "description": "Core Api for Ali lowCode engine",
  "license": "MIT",
  "main": "lib/index.js",
@ -14,8 +14,8 @@
  },
  "dependencies": {
    "@alifd/next": "^1.19.16",
-    "@alilc/lowcode-types": "1.0.3",
-    "@alilc/lowcode-utils": "1.0.3",
+    "@alilc/lowcode-types": "1.0.5",
+    "@alilc/lowcode-utils": "1.0.5",
    "classnames": "^2.2.6",
    "debug": "^4.1.1",
    "intl-messageformat": "^9.3.1",
--- a/packages/editor-core/src/widgets/tip/utils.ts
+++ b/packages/editor-core/src/widgets/tip/utils.ts
@ -79,7 +79,7 @@ function resolvePrefer(prefer: any, targetRect: any, bounds: any) {
  }
  const force = prefer[0] === '!';
  if (force) {
-    prefer = prefer.substr(1);
+    prefer = prefer.slice(1);
  }
  let [dir, offset] = prefer.split(/\s+/);
  let forceDirection = false;
--- a/packages/editor-skeleton/package.json
+++ b/packages/editor-skeleton/package.json
@ -1,6 +1,6 @@
 {
  "name": "@alilc/lowcode-editor-skeleton",
-  "version": "1.0.3",
+  "version": "1.0.5",
  "description": "alibaba lowcode editor skeleton",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -18,10 +18,10 @@
  ],
  "dependencies": {
    "@alifd/next": "^1.20.12",
-    "@alilc/lowcode-designer": "1.0.3",
-    "@alilc/lowcode-editor-core": "1.0.3",
-    "@alilc/lowcode-types": "1.0.3",
-    "@alilc/lowcode-utils": "1.0.3",
+    "@alilc/lowcode-designer": "1.0.5",
+    "@alilc/lowcode-editor-core": "1.0.5",
+    "@alilc/lowcode-types": "1.0.5",
+    "@alilc/lowcode-utils": "1.0.5",
    "classnames": "^2.2.6",
    "react": "^16.8.1",
    "react-dom": "^16.8.1"
--- a/packages/engine/README-zh_CN.md
+++ b/packages/engine/README-zh_CN.md
@ -29,7 +29,7 @@

 </div>

-[![](https://img.alicdn.com/imgextra/i4/O1CN01GhzQuE1rnenyCCQTF_!!6000000005676-0-tps-2878-1588.jpg)](https://lowcode-engine.cn)
+[![](https://img.alicdn.com/imgextra/i2/O1CN01UhoS7C1sNNhySvfWi_!!6000000005754-2-tps-2878-1588.png)](https://lowcode-engine.cn)

 简体中文 | [English](./README.md)

@ -47,9 +47,9 @@

 ## 📚 引擎协议

-引擎完整实现了《阿里巴巴中后台前端基础搭建协议规范》和《阿里巴巴中后台前端物料协议规范》，协议栈是低代码领域的物料能否流通的关键部分。
+引擎完整实现了《低代码引擎搭建协议规范》和《低代码引擎物料协议规范》，协议栈是低代码领域的物料能否流通的关键部分。

-![image](https://user-images.githubusercontent.com/1195765/150266126-fef3e3a9-d6a4-4f8e-8592-745f1a344162.png)
+![image](https://img.alicdn.com/imgextra/i3/O1CN01IisBcy1dNBIg16QFM_!!6000000003723-2-tps-1916-1070.png)

 ## 🌰 使用示例

@ -152,4 +152,4 @@ lowcode-engine 启动后，提供了几个 umd 文件，可以结合 [lowcode-de
 2. [关于引擎的研发协作流程](https://www.yuque.com/lce/doc/contributing)
 3. [引擎的工程化配置](https://www.yuque.com/lce/doc/gxwqg6)

-> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。（此段参考 [antd](https://github.com/ant-design/ant-design)）
+> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。（此段参考 [antd](https://github.com/ant-design/ant-design)）
--- a/packages/engine/README.md
+++ b/packages/engine/README.md
@ -8,7 +8,7 @@

 <div align="center">

-An enterprise-class low-code technology stack for scale-out design
+An enterprise-class low-code technology stack with scale-out design

 [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]

@ -29,7 +29,7 @@ An enterprise-class low-code technology stack for scale-out design

 </div>

-[![](https://img.alicdn.com/imgextra/i4/O1CN01GhzQuE1rnenyCCQTF_!!6000000005676-0-tps-2878-1588.jpg)](http://lowcode-engine.cn)
+[![](https://img.alicdn.com/imgextra/i2/O1CN01UhoS7C1sNNhySvfWi_!!6000000005754-2-tps-2878-1588.png)](http://lowcode-engine.cn)

 English | [简体中文](./packages/engine/README-zh_CN.md)

@ -47,9 +47,9 @@ English | [简体中文](./packages/engine/README-zh_CN.md)

 ## 📚 Engine Protocol

-The engine fully implements the "Alibaba Mid-Backend Front-End Basic Construction Protocol Specification" and "Alibaba Mid-Backend Front-End Material Protocol Specification". The protocol stack is a key part of whether materials in the low-code field can be circulated.
+The engine fully implements the "LowCodeEngine Basic Construction Protocol Specification" and "LowCodeEngine Material Protocol Specification". The protocol stack is a key part of whether materials in the low-code field can be circulated.

-![image](https://user-images.githubusercontent.com/1195765/150266126-fef3e3a9-d6a4-4f8e-8592-745f1a344162.png)
+![image](https://img.alicdn.com/imgextra/i3/O1CN01IisBcy1dNBIg16QFM_!!6000000003723-2-tps-1916-1070.png)

 ## 🌰 Usage example

@ -141,15 +141,18 @@ $ npm start
 >
 > 📢 node version limited to 14
 >
-> 📢 Windows environment must use [WSL](https://docs.microsoft.com/zh-cn/windows/wsl/install), other terminals are not guaranteed to work normally
+> 📢 Windows environment must use [WSL](https://docs.microsoft.com/en-us/windows/wsl/install), other terminals are not guaranteed to work normally

 After lowcode-engine is started, several umd files are provided, which can be debugged in combination with the [lowcode-demo](https://github.com/alibaba/lowcode-demo) project. Refer to the file proxy rules [here](https:/ /www.yuque.com/lce/doc/glz0fx).

-## 🤝 Participate in co-construction
+## 🤝 Participation

 Please read first:
 1. [How to configure the engine debugging environment? ](https://www.yuque.com/lce/doc/glz0fx)
 2. [About the R&D collaboration process of the engine](https://www.yuque.com/lce/doc/contributing)
 3. [Engineering Configuration of Engine](https://www.yuque.com/lce/doc/gxwqg6)

-> Strongly recommend reading ["The Wisdom of Asking Questions"](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way), ["How to Ask Questions to the Open Source Community"](https: //github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html), [ "How to Submit Unanswerable Questions to Open Source Projects"](https://zhuanlan.zhihu.com/p/25795393), better questions are easier to get help. (This paragraph refers to [antd](https://github.com/ant-design/ant-design))
+> Strongly recommend reading ["The Wisdom of Asking Questions"](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way), ["How to Ask Questions to the Open Source Community"](https: //github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html), [ "How to Submit Unanswerable Questions to Open Source Projects"](https://zhuanlan.zhihu.com/p/25795393), better questions are easier to get help. (This paragraph refers to [antd](https://github.com/ant-design/ant-design))
+
+About Pull Request:
+- set the target branch to **develop** other than **main**
--- a/packages/engine/package.json
+++ b/packages/engine/package.json
@ -1,7 +1,7 @@
 {
  "name": "@alilc/lowcode-engine",
-  "version": "1.0.3",
-  "description": "Universal API for AliLowCode engine",
+  "version": "1.0.5",
+  "description": "An enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系",
  "main": "lib/engine-core.js",
  "module": "es/engine-core.js",
  "files": [
@ -19,14 +19,14 @@
  "license": "MIT",
  "dependencies": {
    "@alifd/next": "^1.19.12",
-    "@alilc/lowcode-designer": "1.0.3",
-    "@alilc/lowcode-editor-core": "1.0.3",
-    "@alilc/lowcode-editor-skeleton": "1.0.3",
+    "@alilc/lowcode-designer": "1.0.5",
+    "@alilc/lowcode-editor-core": "1.0.5",
+    "@alilc/lowcode-editor-skeleton": "1.0.5",
    "@alilc/lowcode-engine-ext": "^1.0.0",
-    "@alilc/lowcode-plugin-designer": "1.0.3",
-    "@alilc/lowcode-plugin-outline-pane": "1.0.3",
-    "@alilc/lowcode-shell": "1.0.3",
-    "@alilc/lowcode-utils": "1.0.3",
+    "@alilc/lowcode-plugin-designer": "1.0.5",
+    "@alilc/lowcode-plugin-outline-pane": "1.0.5",
+    "@alilc/lowcode-shell": "1.0.5",
+    "@alilc/lowcode-utils": "1.0.5",
    "react": "^16.8.1",
    "react-dom": "^16.8.1"
  },
--- a/packages/engine/src/modules/utils.ts
+++ b/packages/engine/src/modules/utils.ts
@ -1,11 +1,14 @@
 import { isFormEvent, compatibleLegaoSchema, getNodeSchemaById } from '@alilc/lowcode-utils';
 import { isNodeSchema } from '@alilc/lowcode-types';
+import { getConvertedExtraKey, getOriginalExtraKey } from '@alilc/lowcode-designer';

 const utils = {
  isNodeSchema,
  isFormEvent,
  compatibleLegaoSchema,
  getNodeSchemaById,
+  getConvertedExtraKey,
+  getOriginalExtraKey,
 };

 export default utils;
--- a/packages/ignitor/package.json
+++ b/packages/ignitor/package.json
@ -1,6 +1,6 @@
 {
  "name": "@alilc/lowcode-ignitor",
-  "version": "1.0.3",
+  "version": "1.0.5",
  "description": "点火器，bootstrap lce project",
  "main": "lib/index.js",
  "private": true,
--- a/packages/plugin-designer/package.json
+++ b/packages/plugin-designer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@alilc/lowcode-plugin-designer",
-  "version": "1.0.3",
+  "version": "1.0.5",
  "description": "alibaba lowcode editor designer plugin",
  "files": [
    "es",
@ -18,7 +18,9 @@
  ],
  "author": "xiayang.xy",
  "dependencies": {
-    "@alilc/lowcode-editor-core": "1.0.3",
+    "@alilc/lowcode-designer": "1.0.5",
+    "@alilc/lowcode-editor-core": "1.0.5",
+    "@alilc/lowcode-utils": "1.0.5",
    "react": "^16.8.1",
    "react-dom": "^16.8.1"
  },
--- a/packages/plugin-outline-pane/package.json
+++ b/packages/plugin-outline-pane/package.json
@ -1,6 +1,6 @@
 {
  "name": "@alilc/lowcode-plugin-outline-pane",
-  "version": "1.0.3",
+  "version": "1.0.5",
  "description": "Outline pane for Ali lowCode engine",
  "files": [
    "es",
@ -13,10 +13,10 @@
  },
  "dependencies": {
    "@alifd/next": "^1.19.16",
-    "@alilc/lowcode-designer": "1.0.3",
-    "@alilc/lowcode-editor-core": "1.0.3",
-    "@alilc/lowcode-types": "1.0.3",
-    "@alilc/lowcode-utils": "1.0.3",
+    "@alilc/lowcode-designer": "1.0.5",
+    "@alilc/lowcode-editor-core": "1.0.5",
+    "@alilc/lowcode-types": "1.0.5",
+    "@alilc/lowcode-utils": "1.0.5",
    "classnames": "^2.2.6",
    "react": "^16",
    "react-dom": "^16.7.0"
--- a/packages/rax-renderer/package.json
+++ b/packages/rax-renderer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@alilc/lowcode-rax-renderer",
-  "version": "1.0.3",
+  "version": "1.0.5",
  "description": "Rax renderer for Ali lowCode engine",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -30,8 +30,8 @@
    "build": "build-scripts build"
  },
  "dependencies": {
-    "@alilc/lowcode-renderer-core": "1.0.3",
-    "@alilc/lowcode-utils": "1.0.3",
+    "@alilc/lowcode-renderer-core": "1.0.5",
+    "@alilc/lowcode-utils": "1.0.5",
    "rax-find-dom-node": "^1.0.1"
  },
  "devDependencies": {
--- a/packages/rax-simulator-renderer/package.json
+++ b/packages/rax-simulator-renderer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@alilc/lowcode-rax-simulator-renderer",
-  "version": "1.0.3",
+  "version": "1.0.5",
  "description": "rax simulator renderer for alibaba lowcode designer",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -13,10 +13,10 @@
    "build:umd": "build-scripts build --config build.umd.json"
  },
  "dependencies": {
-    "@alilc/lowcode-designer": "1.0.3",
-    "@alilc/lowcode-rax-renderer": "1.0.3",
-    "@alilc/lowcode-types": "1.0.3",
-    "@alilc/lowcode-utils": "1.0.3",
+    "@alilc/lowcode-designer": "1.0.5",
+    "@alilc/lowcode-rax-renderer": "1.0.5",
+    "@alilc/lowcode-types": "1.0.5",
+    "@alilc/lowcode-utils": "1.0.5",
    "classnames": "^2.2.6",
    "driver-universal": "^3.1.3",
    "history": "^5.0.0",
--- a/packages/rax-simulator-renderer/src/rax-use-router.js
+++ b/packages/rax-simulator-renderer/src/rax-use-router.js
@ -59,7 +59,7 @@ function matchPath(route, pathname, parentParams) {
  }

  return {
-    path: !end && url.charAt(url.length - 1) === '/' ? url.substr(1) : url,
+    path: !end && url.charAt(url.length - 1) === '/' ? url.slice(1) : url,
    params,
  };
 }
@ -96,7 +96,7 @@ function matchRoute(route, baseUrl, pathname, parentParams) {
            childMatches = matchRoute(
              childRoute,
              baseUrl + matched.path,
-              pathname.substr(matched.path.length),
+              pathname.slice(matched.path.length),
              matched.params,
            );
          }
--- a/packages/rax-simulator-renderer/src/renderer.ts
+++ b/packages/rax-simulator-renderer/src/renderer.ts
@ -291,7 +291,7 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
    });
    this.history = history;
    history.listen(({ location }) => {
-      host.project.open(location.pathname.substr(1));
+      host.project.open(location.pathname.slice(1));
    });
    host.componentsConsumer.consume(async (componentsAsset) => {
      if (componentsAsset) {
--- a/packages/react-renderer/jest.config.js
+++ b/packages/react-renderer/jest.config.js
@ -1,5 +1,3 @@
-const esModules = ['@recore/obx-react'].join('|');
-
 module.exports = {
  // transform: {
  //   '^.+\\.[jt]sx?$': 'babel-jest',
@ -7,9 +5,6 @@ module.exports = {
  //   // '^.+\\.(js|jsx)$': 'babel-jest',
  // },
  // testMatch: ['(/tests?/.*(test))\\.[jt]s$'],
-  transformIgnorePatterns: [
-    `/node_modules/(?!${esModules})/`,
-  ],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
  collectCoverage: true,
  collectCoverageFrom: [
--- a/packages/react-renderer/package.json
+++ b/packages/react-renderer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@alilc/lowcode-react-renderer",
-  "version": "1.0.3",
+  "version": "1.0.5",
  "description": "react renderer for ali lowcode engine",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -22,7 +22,7 @@
  ],
  "dependencies": {
    "@alifd/next": "^1.21.16",
-    "@alilc/lowcode-renderer-core": "1.0.3"
+    "@alilc/lowcode-renderer-core": "1.0.5"
  },
  "devDependencies": {
    "@alib/build-scripts": "^0.1.18",
--- a/packages/react-simulator-renderer/package.json
+++ b/packages/react-simulator-renderer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@alilc/lowcode-react-simulator-renderer",
-  "version": "1.0.3",
+  "version": "1.0.5",
  "description": "react simulator renderer for alibaba lowcode designer",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -15,10 +15,10 @@
    "build:umd": "NODE_OPTIONS=--max_old_space_size=8192 build-scripts build --config build.umd.json"
  },
  "dependencies": {
-    "@alilc/lowcode-designer": "1.0.3",
-    "@alilc/lowcode-react-renderer": "1.0.3",
-    "@alilc/lowcode-types": "1.0.3",
-    "@alilc/lowcode-utils": "1.0.3",
+    "@alilc/lowcode-designer": "1.0.5",
+    "@alilc/lowcode-react-renderer": "1.0.5",
+    "@alilc/lowcode-types": "1.0.5",
+    "@alilc/lowcode-utils": "1.0.5",
    "classnames": "^2.2.6",
    "mobx": "^6.3.0",
    "mobx-react": "^7.2.0",
--- a/packages/react-simulator-renderer/src/renderer.ts
+++ b/packages/react-simulator-renderer/src/renderer.ts
@ -264,7 +264,7 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
    });
    this.history = history;
    history.listen((location, action) => {
-      const docId = location.pathname.substr(1);
+      const docId = location.pathname.slice(1);
      docId && host.project.open(docId);
    });
    host.componentsConsumer.consume(async (componentsAsset) => {
--- a/packages/renderer-core/build.test.json
+++ b/packages/renderer-core/build.test.json
@ -0,0 +1,6 @@
+{
+  "plugins": [
+    "build-plugin-component",
+    "@alilc/lowcode-test-mate/plugin/index.ts"
+  ]
+}
--- a/packages/renderer-core/jest.config.js
+++ b/packages/renderer-core/jest.config.js
@ -1,8 +1,3 @@
-const esModules = [
-  '@recore/obx-react',
-  '@alilc/lowcode-datasource-engine',
-].join('|');
-
 module.exports = {
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
--- a/packages/renderer-core/package.json
+++ b/packages/renderer-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@alilc/lowcode-renderer-core",
-  "version": "1.0.3",
+  "version": "1.0.5",
  "description": "renderer core",
  "license": "MIT",
  "main": "lib/index.js",
@ -10,12 +10,13 @@
    "es"
  ],
  "scripts": {
+    "test": "build-scripts test --config build.test.json",
    "build": "build-scripts build --skip-demo"
  },
  "dependencies": {
    "@alilc/lowcode-datasource-engine": "^1.0.0",
-    "@alilc/lowcode-types": "1.0.3",
-    "@alilc/lowcode-utils": "1.0.3",
+    "@alilc/lowcode-types": "1.0.5",
+    "@alilc/lowcode-utils": "1.0.5",
    "classnames": "^2.2.6",
    "debug": "^4.1.1",
    "fetch-jsonp": "^1.1.3",
--- a/packages/renderer-core/src/hoc/leaf.tsx
+++ b/packages/renderer-core/src/hoc/leaf.tsx
@ -238,7 +238,7 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
      const {
        hidden = false,
        condition = true,
-      } = this.leaf?.schema || {};
+      } = this.leaf?.export(TransformStage.Render) || {};
      return {
        nodeChildren: null,
        childrenInState: false,
--- a/packages/renderer-core/src/renderer/base.tsx
+++ b/packages/renderer-core/src/renderer/base.tsx
@ -565,7 +565,7 @@ export default function baseRendererFactory(): IBaseRenderComponent {
            engine?.props?.onCompGetCtx(schema, scope);
          }
          props.key = props.key || `${schema.__ctx.lceKey}_${schema.__ctx.idx || 0}_${idx !== undefined ? idx : ''}`;
-        } else if (typeof idx === 'number' && !props.key) {
+        } else if ((typeof idx === 'number' || typeof idx === 'string') && !props.key) {
          // 仅当循环场景走这里
          props.key = idx;
        }
--- a/packages/renderer-core/src/renderer/component.tsx
+++ b/packages/renderer-core/src/renderer/component.tsx
@ -30,7 +30,7 @@ export default function componentRendererFactory(): IBaseRenderComponent {
      });
      this.__render();

-      const { noContainer } = this.__parseData(__schema.props);
+      const noContainer = this.__parseData(__schema.props?.noContainer);

      if (noContainer) {
        return this.__renderContextProvider({ compContext: this });
--- a/packages/renderer-core/src/utils/data-helper.ts
+++ b/packages/renderer-core/src/utils/data-helper.ts
@ -179,7 +179,7 @@ export class DataHelper {
      const _tb_token_ = (csrfInput as any)?.value;
      asyncDataList.forEach((req) => {
        const { id, type, options } = req;
-        if (!id || !type || type === 'legao') return;
+        if (!id || !type) return;
        if (type === 'doServer') {
          const { uri, params } = options || {};
          if (!uri) return;
@ -314,4 +314,4 @@ export class DataHelper {
  }
 }

-type DataSourceType = 'fetch' | 'jsonp';
+type DataSourceType = 'fetch' | 'jsonp';
--- a/packages/renderer-core/test/hoc/snapshots/leaf.test.tsx.snap
+++ b/packages/renderer-core/test/hoc/snapshots/leaf.test.tsx.snap
@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`leafWrapper base 1`] = `
+<div
+  _leaf={
+    Node {
+      "emitter": EventEmitter {
+        "_events": Object {
+          "onChildrenChange": [Function],
+          "onPropChange": [Function],
+          "onVisibleChange": [Function],
+        },
+        "_eventsCount": 3,
+        "_maxListeners": undefined,
+        Symbol(kCapture): false,
+      },
+      "hasLoop": false,
+      "schema": Object {},
+    }
+  }
+>
+  <div>
+    content
+  </div>
+</div>
+`;
+
+exports[`leafWrapper change props 1`] = `
+<div
+  _leaf={
+    Node {
+      "emitter": EventEmitter {
+        "_events": Object {
+          "onChildrenChange": [Function],
+          "onPropChange": [Function],
+          "onVisibleChange": [Function],
+        },
+        "_eventsCount": 3,
+        "_maxListeners": undefined,
+        Symbol(kCapture): false,
+      },
+      "hasLoop": false,
+      "schema": Object {},
+    }
+  }
+>
+  <div>
+    new content
+  </div>
+</div>
+`;
--- a/packages/renderer-core/test/hoc/leaf.test.tsx
+++ b/packages/renderer-core/test/hoc/leaf.test.tsx
@ -0,0 +1,108 @@
+import renderer from 'react-test-renderer';
+import React from 'react';
+import { createElement } from 'react';
+import '../utils/react-env-init';
+import { leafWrapper } from '../../src/hoc/leaf';
+import components from '../utils/components';
+import Node from '../utils/node';
+
+
+const baseRenderer: any = {
+  __debug () {},
+  __getComponentProps (schema: any) {
+    return schema.props;
+  },
+  __getSchemaChildrenVirtualDom () {},
+  context: {
+    engine: {
+      createElement,
+    }
+  },
+  props: {
+    __host: {},
+    getNode: () => {},
+    __container: () => {},
+  }
+}
+
+describe('leafWrapper', () => {
+  const Div = leafWrapper(components.Div as any, {
+    schema: {
+      id: 'div',
+    },
+    baseRenderer,
+    componentInfo: {},
+    scope: {},
+  });
+
+  const DivNode = new Node({});
+  const TextNode = new Node({});
+
+  const Text = leafWrapper(components.Text as any, {
+    schema: {
+      id: 'div',
+      props: {
+        content: 'content'
+      }
+    },
+    baseRenderer,
+    componentInfo: {},
+    scope: {},
+  });
+
+  const component = renderer.create(
+    // @ts-ignore
+    <Div _leaf={DivNode}>
+      <Text _leaf={TextNode} content="content"></Text>
+    </Div>
+  );
+
+  it('base', () => {
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('change props', () => {
+    TextNode.emitPropChange({
+      key: 'content',
+      newValue: 'new content',
+    } as any);
+
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
+
+
+describe('loop', () => {
+  const Div = leafWrapper(components.Div as any, {
+    schema: {
+      id: 'div',
+    },
+    baseRenderer,
+    componentInfo: {},
+    scope: {},
+  });
+
+  const DivNode = new Node({});
+  const TextNode = new Node({});
+
+  const Text = leafWrapper(components.Text as any, {
+    schema: {
+      id: 'div',
+      props: {
+        content: 'content'
+      }
+    },
+    baseRenderer,
+    componentInfo: {},
+    scope: {},
+  });
+
+  const component = renderer.create(
+    // @ts-ignore
+    <Div _leaf={DivNode}>
+      <Text _leaf={TextNode} content="content"></Text>
+    </Div>
+  );
+})
--- a/packages/renderer-core/test/mock/loop.ts
+++ b/packages/renderer-core/test/mock/loop.ts
@ -0,0 +1,221 @@
+const schema = {
+    "componentName": "Page",
+    "id": "node_ocl1djd9o41",
+    "docId": "docl1djd9o4",
+    "props": {
+        "templateVersion": "1.0.0",
+        "containerStyle": {},
+        "pageStyle": {
+            "backgroundColor": "#f2f3f5"
+        },
+        "className": "_css_pseudo_node_ocl1djd9o41"
+    },
+    "dataSource": {
+        "offline": [],
+        "globalConfig": {},
+        "online": [
+            {
+                "gmtModified": 1639385418000,
+                "initialData": "",
+                "globalUid": "AY866BC1ERSVK0BE55NU364515LH3NM0RF4XK61",
+                "formUuid": "FORM-3KYJN7RV-J47BPFK63W2PHAGPO1VC3-B4H1WE5K-131",
+                "name": "locale",
+                "description": "当前语种（在 window.g_config 中设置）",
+                "id": "AY866BC1ERSVK0BE55NU364515LH3NM0RF4XK61",
+                "protocal": "VALUE",
+                "shareType": "APP"
+            },
+            {
+                "gmtModified": 1639385418000,
+                "initialData": "",
+                "globalUid": "AY866BC1ERSVK0BE55NU364515LH3SM0RF4XK71",
+                "formUuid": "FORM-RFYJTWKV-D47BWO6R0QHA74R062FN2-R5IPXK4K-0H",
+                "name": "appType",
+                "description": "应用的唯一 code",
+                "id": "AY866BC1ERSVK0BE55NU364515LH3SM0RF4XK71",
+                "protocal": "VALUE",
+                "shareType": "APP"
+            },
+            {
+                "gmtModified": 1639385418000,
+                "initialData": "",
+                "globalUid": "AY866BC1ERSVK0BE55NU364515LH3XM0RF4XK81",
+                "formUuid": "FORM-RFYJTWKV-D47BWO6R0QHA74R062FN2-R5IPXK4K-0H",
+                "name": "version",
+                "description": "应该版本，默认 0.1.0",
+                "id": "AY866BC1ERSVK0BE55NU364515LH3XM0RF4XK81",
+                "protocal": "VALUE",
+                "shareType": "APP"
+            },
+            {
+                "gmtModified": 1639385418000,
+                "initialData": "",
+                "globalUid": "AY866BC1ERSVK0BE55NU364515LH33N0RF4XK91",
+                "formUuid": "FORM-RFYJTWKV-D47BWO6R0QHA74R062FN2-R5IPXK4K-0H",
+                "name": "apiPrefix",
+                "description": "",
+                "id": "AY866BC1ERSVK0BE55NU364515LH33N0RF4XK91",
+                "protocal": "VALUE",
+                "shareType": "APP"
+            }
+        ],
+        "sync": true,
+        "list": [
+            {
+                "gmtModified": 1639385418000,
+                "initialData": "",
+                "globalUid": "AY866BC1ERSVK0BE55NU364515LH3NM0RF4XK61",
+                "formUuid": "FORM-3KYJN7RV-J47BPFK63W2PHAGPO1VC3-B4H1WE5K-131",
+                "name": "locale",
+                "description": "当前语种（在 window.g_config 中设置）",
+                "id": "AY866BC1ERSVK0BE55NU364515LH3NM0RF4XK61",
+                "protocal": "VALUE",
+                "shareType": "APP"
+            },
+            {
+                "gmtModified": 1639385418000,
+                "initialData": "",
+                "globalUid": "AY866BC1ERSVK0BE55NU364515LH3SM0RF4XK71",
+                "formUuid": "FORM-RFYJTWKV-D47BWO6R0QHA74R062FN2-R5IPXK4K-0H",
+                "name": "appType",
+                "description": "应用的唯一 code",
+                "id": "AY866BC1ERSVK0BE55NU364515LH3SM0RF4XK71",
+                "protocal": "VALUE",
+                "shareType": "APP"
+            },
+            {
+                "gmtModified": 1639385418000,
+                "initialData": "",
+                "globalUid": "AY866BC1ERSVK0BE55NU364515LH3XM0RF4XK81",
+                "formUuid": "FORM-RFYJTWKV-D47BWO6R0QHA74R062FN2-R5IPXK4K-0H",
+                "name": "version",
+                "description": "应该版本，默认 0.1.0",
+                "id": "AY866BC1ERSVK0BE55NU364515LH3XM0RF4XK81",
+                "protocal": "VALUE",
+                "shareType": "APP"
+            },
+            {
+                "gmtModified": 1639385418000,
+                "initialData": "",
+                "globalUid": "AY866BC1ERSVK0BE55NU364515LH33N0RF4XK91",
+                "formUuid": "FORM-RFYJTWKV-D47BWO6R0QHA74R062FN2-R5IPXK4K-0H",
+                "name": "apiPrefix",
+                "description": "",
+                "id": "AY866BC1ERSVK0BE55NU364515LH33N0RF4XK91",
+                "protocal": "VALUE",
+                "shareType": "APP"
+            }
+        ]
+    },
+    "methods": {},
+    "hidden": false,
+    "title": "",
+    "isLocked": false,
+    "condition": true,
+    "conditionGroup": "",
+    "children": [
+        {
+            "componentName": "RootHeader",
+            "id": "node_ocl1djd9o42",
+            "docId": "docl1djd9o4",
+            "props": {},
+            "hidden": false,
+            "title": "",
+            "isLocked": false,
+            "condition": true,
+            "conditionGroup": ""
+        },
+        {
+            "componentName": "RootContent",
+            "id": "node_ocl1djd9o43",
+            "docId": "docl1djd9o4",
+            "props": {
+                "contentMargin": "20",
+                "contentPadding": "20",
+                "contentBgColor": "white"
+            },
+            "hidden": false,
+            "title": "",
+            "isLocked": false,
+            "condition": true,
+            "conditionGroup": "",
+            "children": [
+                {
+                    "componentName": "Div",
+                    "id": "node_ocl1djd9o45",
+                    "docId": "docl1djd9o4",
+                    "props": {
+                        "behavior": "NORMAL",
+                        "__style__": {},
+                        "fieldId": "div_l1djdj1n",
+                        "events": {
+                            "ignored": true
+                        },
+                        "useFieldIdAsDomId": false,
+                        "customClassName": "",
+                        "className": "_css_pseudo_node_ocl1djd9o45"
+                    },
+                    "hidden": false,
+                    "title": "",
+                    "isLocked": false,
+                    "condition": true,
+                    "conditionGroup": "",
+                    "loop": [
+                        1,
+                        2,
+                        3
+                    ],
+                    "loopArgs": [
+                        null,
+                        null
+                    ],
+                    "children": [
+                        {
+                            "componentName": "Div",
+                            "id": "node_ocl1djd9o46",
+                            "docId": "docl1djd9o4",
+                            "props": {
+                                "behavior": "NORMAL",
+                                "__style__": {},
+                                "fieldId": "div_l1djdj1o",
+                                "events": {
+                                    "ignored": true
+                                },
+                                "useFieldIdAsDomId": false,
+                                "customClassName": "",
+                                "className": "_css_pseudo_node_ocl1djd9o46"
+                            },
+                            "hidden": false,
+                            "title": "",
+                            "isLocked": false,
+                            "condition": true,
+                            "conditionGroup": "",
+                            "loop": [
+                                1,
+                                2,
+                                3
+                            ],
+                            "loopArgs": [
+                                null,
+                                null
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "componentName": "RootFooter",
+            "id": "node_ocl1djd9o44",
+            "docId": "docl1djd9o4",
+            "props": {},
+            "hidden": false,
+            "title": "",
+            "isLocked": false,
+            "condition": true,
+            "conditionGroup": ""
+        }
+    ]
+};
+
+export default schema;
--- a/packages/renderer-core/test/renderer/snapshots/base.test.tsx.snap
+++ b/packages/renderer-core/test/renderer/snapshots/base.test.tsx.snap
@ -1,5 +1,234 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`loop schema loop key 1`] = `
+<div
+  className="lce-page _css_pseudo_node_ocl1djd9o41"
+  style={Object {}}
+>
+  <div
+    __componentName="RootHeader"
+    __id="node_ocl1djd9o42"
+  >
+    Component Not Found
+  </div>
+  <div
+    __componentName="RootContent"
+    __id="node_ocl1djd9o43"
+    contentBgColor="white"
+    contentMargin="20"
+    contentPadding="20"
+  >
+    <div
+      __componentName="Div"
+      __id="node_ocl1djd9o45"
+      __style__={Object {}}
+      behavior="NORMAL"
+      className="_css_pseudo_node_ocl1djd9o45"
+      customClassName=""
+      events={
+        Object {
+          "ignored": true,
+        }
+      }
+      fieldId="div_l1djdj1n"
+      useFieldIdAsDomId={false}
+    >
+      <div
+        __componentName="Div"
+        __id="node_ocl1djd9o46"
+        __style__={Object {}}
+        behavior="NORMAL"
+        className="_css_pseudo_node_ocl1djd9o46"
+        customClassName=""
+        events={
+          Object {
+            "ignored": true,
+          }
+        }
+        fieldId="div_l1djdj1o"
+        useFieldIdAsDomId={false}
+      >
+        Component Not Found
+      </div>
+      <div
+        __componentName="Div"
+        __id="node_ocl1djd9o46"
+        __style__={Object {}}
+        behavior="NORMAL"
+        className="_css_pseudo_node_ocl1djd9o46"
+        customClassName=""
+        events={
+          Object {
+            "ignored": true,
+          }
+        }
+        fieldId="div_l1djdj1o"
+        useFieldIdAsDomId={false}
+      >
+        Component Not Found
+      </div>
+      <div
+        __componentName="Div"
+        __id="node_ocl1djd9o46"
+        __style__={Object {}}
+        behavior="NORMAL"
+        className="_css_pseudo_node_ocl1djd9o46"
+        customClassName=""
+        events={
+          Object {
+            "ignored": true,
+          }
+        }
+        fieldId="div_l1djdj1o"
+        useFieldIdAsDomId={false}
+      >
+        Component Not Found
+      </div>
+    </div>
+    <div
+      __componentName="Div"
+      __id="node_ocl1djd9o45"
+      __style__={Object {}}
+      behavior="NORMAL"
+      className="_css_pseudo_node_ocl1djd9o45"
+      customClassName=""
+      events={
+        Object {
+          "ignored": true,
+        }
+      }
+      fieldId="div_l1djdj1n"
+      useFieldIdAsDomId={false}
+    >
+      <div
+        __componentName="Div"
+        __id="node_ocl1djd9o46"
+        __style__={Object {}}
+        behavior="NORMAL"
+        className="_css_pseudo_node_ocl1djd9o46"
+        customClassName=""
+        events={
+          Object {
+            "ignored": true,
+          }
+        }
+        fieldId="div_l1djdj1o"
+        useFieldIdAsDomId={false}
+      >
+        Component Not Found
+      </div>
+      <div
+        __componentName="Div"
+        __id="node_ocl1djd9o46"
+        __style__={Object {}}
+        behavior="NORMAL"
+        className="_css_pseudo_node_ocl1djd9o46"
+        customClassName=""
+        events={
+          Object {
+            "ignored": true,
+          }
+        }
+        fieldId="div_l1djdj1o"
+        useFieldIdAsDomId={false}
+      >
+        Component Not Found
+      </div>
+      <div
+        __componentName="Div"
+        __id="node_ocl1djd9o46"
+        __style__={Object {}}
+        behavior="NORMAL"
+        className="_css_pseudo_node_ocl1djd9o46"
+        customClassName=""
+        events={
+          Object {
+            "ignored": true,
+          }
+        }
+        fieldId="div_l1djdj1o"
+        useFieldIdAsDomId={false}
+      >
+        Component Not Found
+      </div>
+    </div>
+    <div
+      __componentName="Div"
+      __id="node_ocl1djd9o45"
+      __style__={Object {}}
+      behavior="NORMAL"
+      className="_css_pseudo_node_ocl1djd9o45"
+      customClassName=""
+      events={
+        Object {
+          "ignored": true,
+        }
+      }
+      fieldId="div_l1djdj1n"
+      useFieldIdAsDomId={false}
+    >
+      <div
+        __componentName="Div"
+        __id="node_ocl1djd9o46"
+        __style__={Object {}}
+        behavior="NORMAL"
+        className="_css_pseudo_node_ocl1djd9o46"
+        customClassName=""
+        events={
+          Object {
+            "ignored": true,
+          }
+        }
+        fieldId="div_l1djdj1o"
+        useFieldIdAsDomId={false}
+      >
+        Component Not Found
+      </div>
+      <div
+        __componentName="Div"
+        __id="node_ocl1djd9o46"
+        __style__={Object {}}
+        behavior="NORMAL"
+        className="_css_pseudo_node_ocl1djd9o46"
+        customClassName=""
+        events={
+          Object {
+            "ignored": true,
+          }
+        }
+        fieldId="div_l1djdj1o"
+        useFieldIdAsDomId={false}
+      >
+        Component Not Found
+      </div>
+      <div
+        __componentName="Div"
+        __id="node_ocl1djd9o46"
+        __style__={Object {}}
+        behavior="NORMAL"
+        className="_css_pseudo_node_ocl1djd9o46"
+        customClassName=""
+        events={
+          Object {
+            "ignored": true,
+          }
+        }
+        fieldId="div_l1djdj1o"
+        useFieldIdAsDomId={false}
+      >
+        Component Not Found
+      </div>
+    </div>
+  </div>
+  <div
+    __componentName="RootFooter"
+    __id="node_ocl1djd9o44"
+  >
+    Component Not Found
+  </div>
+</div>
+`;
+
 exports[`notFountComponent not found snapshot 1`] = `
 <div
  className="lce-page _css_pseudo_node_ockyigdqxl1"
--- a/packages/renderer-core/test/renderer/base.test.tsx
+++ b/packages/renderer-core/test/renderer/base.test.tsx
@ -3,6 +3,7 @@ import React from 'react';
 import '../utils/react-env-init';
 import pageRendererFactory from '../../src/renderer/renderer';
 import { sampleSchema } from '../mock/sample';
+import loopSchema from '../mock/loop';

 describe('notFountComponent', () => {
  const Render = pageRendererFactory();
@ -20,4 +21,22 @@ describe('notFountComponent', () => {
    let tree = component.toJSON();
    expect(tree).toMatchSnapshot();
  });
+});
+
+describe('loop schema', () => {
+  it('loop key', () => {
+    const Render = pageRendererFactory();
+
+    const component = renderer.create(
+      // @ts-ignore
+      <Render
+        schema={loopSchema as any}
+        components={{}}
+        appHelper={{}}
+      />,
+    );
+
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  })
 })
--- a/packages/renderer-core/test/setup.ts
+++ b/packages/renderer-core/test/setup.ts
@ -1,12 +0,0 @@
-jest.mock('zen-logger', () => {
-  class Logger {
-    log() {}
-    error() {}
-    warn() {}
-    debug() {}
-  }
-  return {
-    __esModule: true,
-    default: Logger,
-  };
-});
--- a/packages/renderer-core/test/utils/components.tsx
+++ b/packages/renderer-core/test/utils/components.tsx
@ -0,0 +1,29 @@
+import React from 'react';
+import { Box, Breadcrumb, Form, Select, Input, Button, Table, Pagination, Dialog } from '@alifd/next';
+
+const Div = (props: any) => (<div {...props}>{props.children}</div>);
+
+const Text = (props: any) => (<div>{props.content}</div>);
+
+const SlotComponent = (props: any) => props.mobileSlot;
+
+const components = {
+  Box,
+  Breadcrumb,
+  'Breadcrumb.Item': Breadcrumb.Item,
+  Form,
+  'Form.Item': Form.Item,
+  Select,
+  Input,
+  Button,
+  'Button.Group': Button.Group,
+  Table,
+  Pagination,
+  Dialog,
+  ErrorComponent: Select,
+  Div,
+  SlotComponent,
+  Text,
+};
+
+export default components;
--- a/packages/renderer-core/test/utils/node.ts
+++ b/packages/renderer-core/test/utils/node.ts
@ -0,0 +1,55 @@
+import { PropChangeOptions } from "@ali/lowcode-designer";
+import EventEmitter from "events";
+
+export default class Node {
+  private emitter: EventEmitter;
+  schema: any = {
+    props: {},
+  };
+  hasLoop = false;
+
+  constructor(schema: any) {
+    this.emitter = new EventEmitter();
+    this.schema = schema;
+  }
+
+  mockLoop() {
+    this.hasLoop = true;
+  }
+
+  onChildrenChange(fn: any) {
+    this.emitter.on('onChildrenChange', fn);
+    return () => {
+      this.emitter.off('onChildrenChange', fn);
+    }
+  }
+
+  onPropChange(fn: any) {
+    this.emitter.on('onPropChange', fn);
+    return () => {
+      this.emitter.off('onPropChange', fn);
+    }
+  }
+
+  emitPropChange(val: PropChangeOptions) {
+    this.schema.props = {
+      ...this.schema.props,
+      [val.key + '']: val.newValue,
+    }
+    this.emitter?.emit('onPropChange', val);
+  }
+
+  onVisibleChange(fn: any) {
+    this.emitter.on('onVisibleChange', fn);
+    return () => {
+      this.emitter.off('onVisibleChange', fn);
+    }
+  }
+
+  emitVisibleChange(val: boolean) {
+    this.emitter?.emit('onVisibleChange', val);
+  }
+  export() {
+    return this.schema;
+  }
+}
--- a/packages/shell/package.json
+++ b/packages/shell/package.json
@ -1,6 +1,6 @@
 {
  "name": "@alilc/lowcode-shell",
-  "version": "1.0.3",
+  "version": "1.0.5",
  "description": "Shell Layer for AliLowCodeEngine",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -15,11 +15,11 @@
  },
  "license": "MIT",
  "dependencies": {
-    "@alilc/lowcode-designer": "1.0.3",
-    "@alilc/lowcode-editor-core": "1.0.3",
-    "@alilc/lowcode-editor-skeleton": "1.0.3",
-    "@alilc/lowcode-types": "1.0.3",
-    "@alilc/lowcode-utils": "1.0.3",
+    "@alilc/lowcode-designer": "1.0.5",
+    "@alilc/lowcode-editor-core": "1.0.5",
+    "@alilc/lowcode-editor-skeleton": "1.0.5",
+    "@alilc/lowcode-types": "1.0.5",
+    "@alilc/lowcode-utils": "1.0.5",
    "classnames": "^2.2.6",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.5",
--- a/packages/shell/src/material.ts
+++ b/packages/shell/src/material.ts
@ -34,8 +34,8 @@ export default class Material {
   * @param assets
   * @returns
   */
-  setAssets(assets: AssetsJson) {
-    return this[editorSymbol].setAssets(assets);
+  async setAssets(assets: AssetsJson) {
+    return await this[editorSymbol].setAssets(assets);
  }

  /**
--- a/packages/shell/src/project.ts
+++ b/packages/shell/src/project.ts
@ -103,8 +103,8 @@ export default class Project {
   * 导出 project
   * @returns
   */
-  exportSchema() {
-    return this[projectSymbol].getSchema();
+  exportSchema(stage: TransformStage = TransformStage.Render) {
+    return this[projectSymbol].getSchema(stage);
  }

  /**
--- a/packages/types/package.json
+++ b/packages/types/package.json
@ -1,6 +1,6 @@
 {
  "name": "@alilc/lowcode-types",
-  "version": "1.0.3",
+  "version": "1.0.5",
  "description": "Types for Ali lowCode engine",
  "files": [
    "es",
@ -13,7 +13,7 @@
  },
  "dependencies": {
    "@alilc/lowcode-datasource-types": "^1.0.0",
-    "react": "^16.9 || ^17",
+    "react": "^16.9",
    "strict-event-emitter-types": "^2.0.0"
  },
  "devDependencies": {
--- a/packages/utils/build.test.json
+++ b/packages/utils/build.test.json
@ -0,0 +1,6 @@
+{
+  "plugins": [
+    "build-plugin-component",
+    "@alilc/lowcode-test-mate/plugin/index.ts"
+  ]
+}
--- a/packages/utils/jest.config.js
+++ b/packages/utils/jest.config.js
@ -0,0 +1,9 @@
+module.exports = {
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
+  collectCoverage: true,
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!**/node_modules/**',
+    '!**/vendor/**',
+  ],
+};
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@ -1,6 +1,6 @@
 {
  "name": "@alilc/lowcode-utils",
-  "version": "1.0.3",
+  "version": "1.0.5",
  "description": "Utils for Ali lowCode engine",
  "files": [
    "lib",
@ -9,11 +9,12 @@
  "main": "lib/index.js",
  "module": "es/index.js",
  "scripts": {
+    "test": "build-scripts test --config build.test.json",
    "build": "build-scripts build --skip-demo"
  },
  "dependencies": {
    "@alifd/next": "^1.19.16",
-    "@alilc/lowcode-types": "1.0.3",
+    "@alilc/lowcode-types": "1.0.5",
    "lodash": "^4.17.21",
    "react": "^16",
    "zen-logger": "^1.1.0"
--- a/packages/utils/src/schema.ts
+++ b/packages/utils/src/schema.ts
@ -26,7 +26,7 @@ export function compatibleLegaoSchema(props: any): any {
        type: 'JSSlot',
        title: (props.value.props as any)?.slotTitle,
        name: (props.value.props as any)?.slotName,
-        value: props.value.children,
+        value: compatibleLegaoSchema(props.value.children),
        params: (props.value.props as any)?.slotParams,
      };
    } else {
--- a/packages/utils/test/src/snapshots/schema.test.ts.snap
+++ b/packages/utils/test/src/snapshots/schema.test.ts.snap
@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Schema Ut props 1`] = `
+Object {
+  "props": Object {
+    "mobileSlot": Object {
+      "name": undefined,
+      "params": undefined,
+      "title": undefined,
+      "type": "JSSlot",
+      "value": Array [
+        Object {
+          "loop": Object {
+            "mock": undefined,
+            "type": "JSExpression",
+            "value": "props.content",
+          },
+        },
+      ],
+    },
+  },
+}
+`;
--- a/packages/utils/test/src/schema.test.ts
+++ b/packages/utils/test/src/schema.test.ts
@ -0,0 +1,27 @@
+import { compatibleLegaoSchema } from '../../src/schema';
+describe('Schema Ut', () => {
+  it('props', () => {
+    const schema = {
+      props: {
+        mobileSlot: {
+          type: "JSBlock",
+          value: {
+            componentName: "Slot",
+            children: [
+              {
+                loop: {
+                  variable: "props.content",
+                  type: "variable"
+                },
+              }
+            ],
+          }
+        },
+      },
+  };
+
+    const result = compatibleLegaoSchema(schema);
+    expect(result).toMatchSnapshot();
+    expect(result.props.mobileSlot.value[0].loop.type).toBe('JSExpression');
+  });
+})