From 20c0953e0d5866ebb75fb1640e643cd56b76b7da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Tue, 11 Aug 2020 19:59:41 +0800
Subject: [PATCH 01/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20rax=20code?=
 =?UTF-8?q?=20generator=20solution=20and=20test=20case?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/package.json          |  2 +-
 .../src/generator/ProjectBuilder.ts           | 18 ++++
 packages/code-generator/src/index.ts          |  8 +-
 .../plugins/project/framework/rax/index.ts    | 17 ++++
 .../framework/rax/plugins/appConfig.ts        | 45 +++++++++
 .../project/framework/rax/plugins/entry.ts    | 51 ++++++++++
 .../framework/rax/plugins/entryDocument.ts    | 59 ++++++++++++
 .../framework/rax/plugins/globalStyle.ts      | 55 +++++++++++
 .../framework/rax/plugins/packageJSON.ts      | 89 ++++++++++++++++++
 .../rax/template/files/.editorconfig.ts       | 28 ++++++
 .../rax/template/files/.eslintignore.ts       | 27 ++++++
 .../rax/template/files/.eslintrc.js.ts        | 19 ++++
 .../rax/template/files/.gitignore.ts          | 33 +++++++
 .../framework/rax/template/files/README.md.ts | 31 ++++++
 .../framework/rax/template/files/abc.json.ts  | 23 +++++
 .../rax/template/files/build.json.ts          | 28 ++++++
 .../rax/template/files/package.json.ts        | 46 +++++++++
 .../rax/template/files/src/app.js.ts          | 20 ++++
 .../rax/template/files/src/app.json.ts        | 27 ++++++
 .../template/files/src/document/index.jsx.ts  | 40 ++++++++
 .../rax/template/files/src/global.less.ts     | 16 ++++
 .../files/src/pages/Home/index.css.ts         | 16 ++++
 .../files/src/pages/Home/index.jsx.ts         | 34 +++++++
 .../rax/template/files/src/utils.js.ts        | 17 ++++
 .../project/framework/rax/template/index.ts   | 94 +++++++++++++++++++
 .../code-generator/src/solutions/rax-app.ts   | 63 +++++++++++++
 packages/code-generator/test-cases/.gitignore |  1 +
 .../demo1/expected/demo-project/.editorconfig | 12 +++
 .../demo1/expected/demo-project/.eslintignore | 11 +++
 .../demo1/expected/demo-project/.eslintrc.js  |  3 +
 .../demo1/expected/demo-project/.gitignore    | 17 ++++
 .../demo1/expected/demo-project/README.md     | 15 +++
 .../demo1/expected/demo-project/abc.json      |  7 ++
 .../demo1/expected/demo-project/build.json    | 12 +++
 .../demo1/expected/demo-project/package.json  | 30 ++++++
 .../demo1/expected/demo-project/src/app.js    |  4 +
 .../demo1/expected/demo-project/src/app.json  | 11 +++
 .../demo-project/src/document/index.jsx       | 25 +++++
 .../expected/demo-project/src/global.less     |  0
 .../demo-project/src/pages/Home/index.css     |  0
 .../demo-project/src/pages/Home/index.jsx     | 18 ++++
 .../demo1/expected/demo-project/src/utils.js  |  1 +
 .../test-cases/rax-app/demo1/schema.json5     | 51 ++++++++++
 packages/code-generator/test/rax-app.test.ts  | 60 ++++++++++++
 44 files changed, 1179 insertions(+), 5 deletions(-)
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/index.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/plugins/appConfig.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/plugins/entry.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/plugins/entryDocument.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/plugins/globalStyle.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/.editorconfig.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintignore.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintrc.js.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/.gitignore.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/README.md.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/abc.json.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/build.json.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/package.json.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/src/app.js.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/src/app.json.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/src/document/index.jsx.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/src/global.less.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/src/pages/Home/index.css.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/src/pages/Home/index.jsx.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/src/utils.js.ts
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/index.ts
 create mode 100644 packages/code-generator/src/solutions/rax-app.ts
 create mode 100644 packages/code-generator/test-cases/.gitignore
 create mode 100644 packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/.editorconfig
 create mode 100644 packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/.eslintignore
 create mode 100644 packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/.eslintrc.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/.gitignore
 create mode 100644 packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/README.md
 create mode 100644 packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/abc.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/build.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/app.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/app.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/document/index.jsx
 create mode 100644 packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/global.less
 create mode 100644 packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.css
 create mode 100644 packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
 create mode 100644 packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/utils.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo1/schema.json5
 create mode 100644 packages/code-generator/test/rax-app.test.ts

diff --git a/packages/code-generator/package.json b/packages/code-generator/package.json
index 4f3b87d88..45cb02d76 100644
--- a/packages/code-generator/package.json
+++ b/packages/code-generator/package.json
@@ -41,7 +41,7 @@
       "ts"
     ],
     "require": [
-      "ts-node/register"
+      "ts-node/register/transpile-only"
     ]
   },
   "publishConfig": {
diff --git a/packages/code-generator/src/generator/ProjectBuilder.ts b/packages/code-generator/src/generator/ProjectBuilder.ts
index ec1c897b6..0538f4b88 100644
--- a/packages/code-generator/src/generator/ProjectBuilder.ts
+++ b/packages/code-generator/src/generator/ProjectBuilder.ts
@@ -121,6 +121,19 @@ export class ProjectBuilder implements IProjectBuilder {
         files,
       });
     }
+
+    // appConfig
+    if (parseResult.project && builders.appConfig) {
+      const { files } = await builders.appConfig.generateModule(
+        parseResult.project,
+      );
+
+      buildResult.push({
+        path: this.template.slots.appConfig.path,
+        files,
+      });
+    }
+
     // constants?
     if (
       parseResult.project &&
@@ -136,6 +149,7 @@ export class ProjectBuilder implements IProjectBuilder {
         files,
       });
     }
+
     // utils?
     if (
       parseResult.globalUtils &&
@@ -151,6 +165,7 @@ export class ProjectBuilder implements IProjectBuilder {
         files,
       });
     }
+
     // i18n?
     if (parseResult.globalI18n && builders.i18n && this.template.slots.i18n) {
       const { files } = await builders.i18n.generateModule(
@@ -162,6 +177,7 @@ export class ProjectBuilder implements IProjectBuilder {
         files,
       });
     }
+
     // globalStyle
     if (parseResult.project && builders.globalStyle) {
       const { files } = await builders.globalStyle.generateModule(
@@ -173,6 +189,7 @@ export class ProjectBuilder implements IProjectBuilder {
         files,
       });
     }
+
     // htmlEntry
     if (parseResult.project && builders.htmlEntry) {
       const { files } = await builders.htmlEntry.generateModule(
@@ -184,6 +201,7 @@ export class ProjectBuilder implements IProjectBuilder {
         files,
       });
     }
+
     // packageJSON
     if (parseResult.project && builders.packageJSON) {
       const { files } = await builders.packageJSON.generateModule(
diff --git a/packages/code-generator/src/index.ts b/packages/code-generator/src/index.ts
index 5d670b5ab..87df670ee 100644
--- a/packages/code-generator/src/index.ts
+++ b/packages/code-generator/src/index.ts
@@ -6,8 +6,8 @@ import { createProjectBuilder } from './generator/ProjectBuilder';
 import { createModuleBuilder } from './generator/ModuleBuilder';
 import { createDiskPublisher } from './publisher/disk';
 import { createZipPublisher } from './publisher/zip';
-import createIceJsProjectBuilder from './solutions/icejs';
-import createRecoreProjectBuilder from './solutions/recore';
+// import createIceJsProjectBuilder from './solutions/icejs';
+// import createRecoreProjectBuilder from './solutions/recore';
 
 // 引入说明
 import { REACT_CHUNK_NAME } from './plugins/component/react/const';
@@ -50,8 +50,8 @@ export default {
   createProjectBuilder,
   createModuleBuilder,
   solutions: {
-    icejs: createIceJsProjectBuilder,
-    recore: createRecoreProjectBuilder,
+    // icejs: createIceJsProjectBuilder,
+    // recore: createRecoreProjectBuilder,
   },
   solutionParts: {
     icejs,
diff --git a/packages/code-generator/src/plugins/project/framework/rax/index.ts b/packages/code-generator/src/plugins/project/framework/rax/index.ts
new file mode 100644
index 000000000..3f9080565
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/index.ts
@@ -0,0 +1,17 @@
+import template from './template';
+import entry from './plugins/entry';
+import appConfig from './plugins/appConfig';
+import entryDocument from './plugins/entryDocument';
+import globalStyle from './plugins/globalStyle';
+import packageJSON from './plugins/packageJSON';
+
+export default {
+  template,
+  plugins: {
+    appConfig,
+    entry,
+    entryDocument,
+    globalStyle,
+    packageJSON,
+  },
+};
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/appConfig.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/appConfig.ts
new file mode 100644
index 000000000..7df09a0f1
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/appConfig.ts
@@ -0,0 +1,45 @@
+import { COMMON_CHUNK_NAME } from '../../../../../const/generator';
+
+import {
+  BuilderComponentPlugin,
+  BuilderComponentPluginFactory,
+  ChunkType,
+  FileType,
+  ICodeStruct,
+  IRouterInfo,
+} from '../../../../../types';
+
+const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
+  const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+    const next: ICodeStruct = {
+      ...pre,
+    };
+
+    const ir = next.ir as IRouterInfo;
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JSON,
+      name: COMMON_CHUNK_NAME.CustomContent,
+      content: `
+{
+  "routes": [
+    {
+      "path": "/",
+      "source": "pages/Home/index"
+    }
+  ],
+  "window": {
+    "title": "Rax App Demo"
+  }
+}
+      `,
+      linkAfter: [],
+    });
+
+    return next;
+  };
+  return plugin;
+};
+
+export default pluginFactory;
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/entry.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/entry.ts
new file mode 100644
index 000000000..09bc07af8
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/entry.ts
@@ -0,0 +1,51 @@
+import { COMMON_CHUNK_NAME } from '../../../../../const/generator';
+
+import {
+  BuilderComponentPlugin,
+  BuilderComponentPluginFactory,
+  ChunkType,
+  FileType,
+  ICodeStruct,
+  IProjectInfo,
+} from '../../../../../types';
+
+const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
+  const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+    const next: ICodeStruct = {
+      ...pre,
+    };
+
+    const ir = next.ir as IProjectInfo;
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JS,
+      name: COMMON_CHUNK_NAME.ExternalDepsImport,
+      content: `
+import { runApp } from 'rax-app';
+import appConfig from './app.json';
+`,
+      linkAfter: [],
+    });
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JS,
+      name: COMMON_CHUNK_NAME.FileMainContent,
+      content: `
+runApp(appConfig);
+`,
+      linkAfter: [
+        COMMON_CHUNK_NAME.ExternalDepsImport,
+        COMMON_CHUNK_NAME.InternalDepsImport,
+        COMMON_CHUNK_NAME.FileVarDefine,
+        COMMON_CHUNK_NAME.FileUtilDefine,
+      ],
+    });
+
+    return next;
+  };
+  return plugin;
+};
+
+export default pluginFactory;
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/entryDocument.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/entryDocument.ts
new file mode 100644
index 000000000..ba8488c00
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/entryDocument.ts
@@ -0,0 +1,59 @@
+import { COMMON_CHUNK_NAME } from '../../../../../const/generator';
+
+import {
+  BuilderComponentPlugin,
+  BuilderComponentPluginFactory,
+  ChunkType,
+  FileType,
+  ICodeStruct,
+  IProjectInfo,
+} from '../../../../../types';
+
+const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
+  const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+    const next: ICodeStruct = {
+      ...pre,
+    };
+
+    const ir = next.ir as IProjectInfo;
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JSX,
+      name: COMMON_CHUNK_NAME.CustomContent,
+      content: `
+import { createElement } from 'rax';
+import { Root, Style, Script } from 'rax-document';
+
+function Document() {
+  return (
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"
+        />
+        <title>${ir.meta.name}</title>
+        <Style />
+      </head>
+      <body>
+        {/* root container */}
+        <Root />
+        <Script />
+      </body>
+    </html>
+  );
+}
+
+export default Document;
+`,
+      linkAfter: [],
+    });
+
+    return next;
+  };
+  return plugin;
+};
+
+export default pluginFactory;
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/globalStyle.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/globalStyle.ts
new file mode 100644
index 000000000..51c872320
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/globalStyle.ts
@@ -0,0 +1,55 @@
+import { COMMON_CHUNK_NAME } from '../../../../../const/generator';
+
+import {
+  BuilderComponentPlugin,
+  BuilderComponentPluginFactory,
+  ChunkType,
+  FileType,
+  ICodeStruct,
+  IProjectInfo,
+} from '../../../../../types';
+
+const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
+  const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+    const next: ICodeStruct = {
+      ...pre,
+    };
+
+    const ir = next.ir as IProjectInfo;
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.SCSS,
+      name: COMMON_CHUNK_NAME.StyleDepsImport,
+      content: `
+// TODO: 引入默认全局样式
+`,
+      linkAfter: [],
+    });
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.SCSS,
+      name: COMMON_CHUNK_NAME.StyleCssContent,
+      content: `
+body {
+  -webkit-font-smoothing: antialiased;
+}
+`,
+      linkAfter: [COMMON_CHUNK_NAME.StyleDepsImport],
+    });
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.SCSS,
+      name: COMMON_CHUNK_NAME.StyleCssContent,
+      content: ir.css || '',
+      linkAfter: [COMMON_CHUNK_NAME.StyleDepsImport],
+    });
+
+    return next;
+  };
+  return plugin;
+};
+
+export default pluginFactory;
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
new file mode 100644
index 000000000..a79dc3481
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
@@ -0,0 +1,89 @@
+import { COMMON_CHUNK_NAME } from '../../../../../const/generator';
+
+import {
+  BuilderComponentPlugin,
+  BuilderComponentPluginFactory,
+  ChunkType,
+  FileType,
+  ICodeStruct,
+  IPackageJSON,
+  IProjectInfo,
+} from '../../../../../types';
+
+interface IIceJsPackageJSON extends IPackageJSON {
+  ideMode: {
+    name: string;
+  };
+  iceworks: {
+    type: string;
+    adapter: string;
+  };
+  originTemplate: string;
+}
+
+const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
+  const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+    const next: ICodeStruct = {
+      ...pre,
+    };
+
+    const ir = next.ir as IProjectInfo;
+
+    const packageJson: IIceJsPackageJSON = {
+      name: '@alifd/scaffold-lite-js',
+      version: '0.1.5',
+      description: '轻量级模板，使用 JavaScript，仅包含基础的 Layout。',
+      dependencies: {
+        moment: '^2.24.0',
+        react: '^16.4.1',
+        'react-dom': '^16.4.1',
+        '@alifd/theme-design-pro': '^0.x',
+      },
+      devDependencies: {
+        '@ice/spec': '^1.0.0',
+        'build-plugin-fusion': '^0.1.0',
+        'build-plugin-moment-locales': '^0.1.0',
+        eslint: '^6.0.1',
+        'ice.js': '^1.0.0',
+        stylelint: '^13.2.0',
+        '@ali/build-plugin-ice-def': '^0.1.0',
+      },
+      scripts: {
+        start: 'icejs start',
+        build: 'icejs build',
+        lint: 'npm run eslint && npm run stylelint',
+        eslint: 'eslint --cache --ext .js,.jsx ./',
+        stylelint: 'stylelint ./**/*.scss',
+      },
+      ideMode: {
+        name: 'ice-react',
+      },
+      iceworks: {
+        type: 'react',
+        adapter: 'adapter-react-v3',
+      },
+      engines: {
+        node: '>=8.0.0',
+      },
+      repository: {
+        type: 'git',
+        url: 'http://gitlab.alibaba-inc.com/msd/leak-scan/tree/master',
+      },
+      private: true,
+      originTemplate: '@alifd/scaffold-lite-js',
+    };
+
+    next.chunks.push({
+      type: ChunkType.JSON,
+      fileType: FileType.JSON,
+      name: COMMON_CHUNK_NAME.FileMainContent,
+      content: packageJson,
+      linkAfter: [],
+    });
+
+    return next;
+  };
+  return plugin;
+};
+
+export default pluginFactory;
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/.editorconfig.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/.editorconfig.ts
new file mode 100644
index 000000000..00762837a
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/.editorconfig.ts
@@ -0,0 +1,28 @@
+
+import ResultFile from '../../../../../../model/ResultFile';
+import { IResultFile } from '../../../../../../types';
+
+export default function getFile(): [string[], IResultFile] {
+  const file = new ResultFile(
+    '.editorconfig',
+    '',
+    `
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+    `,
+  );
+
+  return [[], file];
+}
+  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintignore.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintignore.ts
new file mode 100644
index 000000000..d0c775445
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintignore.ts
@@ -0,0 +1,27 @@
+
+import ResultFile from '../../../../../../model/ResultFile';
+import { IResultFile } from '../../../../../../types';
+
+export default function getFile(): [string[], IResultFile] {
+  const file = new ResultFile(
+    '.eslintignore',
+    '',
+    `
+# 忽略目录
+build/
+tests/
+demo/
+
+# node 覆盖率文件
+coverage/
+
+# 忽略文件
+**/*-min.js
+**/*.min.js
+
+    `,
+  );
+
+  return [[], file];
+}
+  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintrc.js.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintrc.js.ts
new file mode 100644
index 000000000..7bef18c04
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintrc.js.ts
@@ -0,0 +1,19 @@
+
+import ResultFile from '../../../../../../model/ResultFile';
+import { IResultFile } from '../../../../../../types';
+
+export default function getFile(): [string[], IResultFile] {
+  const file = new ResultFile(
+    '.eslintrc',
+    'js',
+    `
+module.exports = {
+  extends: ['rax'],
+};
+
+    `,
+  );
+
+  return [[], file];
+}
+  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/.gitignore.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/.gitignore.ts
new file mode 100644
index 000000000..9e84e430e
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/.gitignore.ts
@@ -0,0 +1,33 @@
+
+import ResultFile from '../../../../../../model/ResultFile';
+import { IResultFile } from '../../../../../../types';
+
+export default function getFile(): [string[], IResultFile] {
+  const file = new ResultFile(
+    '.gitignore',
+    '',
+    `
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+*~
+*.swp
+*.log
+
+.DS_Store
+.idea/
+.temp/
+
+build/
+dist/
+lib/
+coverage/
+node_modules/
+
+template.yml
+
+    `,
+  );
+
+  return [[], file];
+}
+  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/README.md.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/README.md.ts
new file mode 100644
index 000000000..924588d20
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/README.md.ts
@@ -0,0 +1,31 @@
+
+import ResultFile from '../../../../../../model/ResultFile';
+import { IResultFile } from '../../../../../../types';
+
+export default function getFile(): [string[], IResultFile] {
+  const file = new ResultFile(
+    'README',
+    'md',
+    `
+# @ali/rax-component-demo
+
+## Getting Started
+
+### `npm run start`
+
+Runs the app in development mode.
+
+Open [http://localhost:9999](http://localhost:9999) to view it in the browser.
+
+The page will reload if you make edits.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.
+
+    `,
+  );
+
+  return [[], file];
+}
+  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/abc.json.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/abc.json.ts
new file mode 100644
index 000000000..779320ba4
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/abc.json.ts
@@ -0,0 +1,23 @@
+
+import ResultFile from '../../../../../../model/ResultFile';
+import { IResultFile } from '../../../../../../types';
+
+export default function getFile(): [string[], IResultFile] {
+  const file = new ResultFile(
+    'abc',
+    'json',
+    `
+{
+  "type": "rax",
+  "builder": "@ali/builder-rax-v1",
+  "info": {
+    "raxVersion": "1.x"
+  }
+}
+
+    `,
+  );
+
+  return [[], file];
+}
+  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/build.json.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/build.json.ts
new file mode 100644
index 000000000..c16e2adc5
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/build.json.ts
@@ -0,0 +1,28 @@
+
+import ResultFile from '../../../../../../model/ResultFile';
+import { IResultFile } from '../../../../../../types';
+
+export default function getFile(): [string[], IResultFile] {
+  const file = new ResultFile(
+    'build',
+    'json',
+    `
+{
+  "inlineStyle": false,
+  "plugins": [
+    [
+      "build-plugin-rax-app",
+      {
+        "targets": ["web", "miniapp"]
+      }
+    ],
+    "@ali/build-plugin-rax-app-def"
+  ]
+}
+
+    `,
+  );
+
+  return [[], file];
+}
+  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/package.json.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/package.json.ts
new file mode 100644
index 000000000..15d113845
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/package.json.ts
@@ -0,0 +1,46 @@
+
+import ResultFile from '../../../../../../model/ResultFile';
+import { IResultFile } from '../../../../../../types';
+
+export default function getFile(): [string[], IResultFile] {
+  const file = new ResultFile(
+    'package',
+    'json',
+    `
+{
+  "name": "@ali/rax-component-demo",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "rm -f ./dist/miniapp.tar.gz && npm run build:miniapp && cd build/miniapp && tar czf ../../dist/miniapp.tar.gz *",
+    "build:miniapp": "build-scripts build",
+    "start": "build-scripts start",
+    "lint": "eslint --ext .js --ext .jsx ./"
+  },
+  "dependencies": {
+    "rax": "^1.1.0",
+    "rax-app": "^2.0.0",
+    "rax-document": "^0.1.0",
+    "rax-text": "^1.0.0",
+    "rax-view": "^1.0.0"
+  },
+  "devDependencies": {
+    "build-plugin-rax-app": "^5.0.0",
+    "@alib/build-scripts": "^0.1.0",
+    "@typescript-eslint/eslint-plugin": "^2.11.0",
+    "@typescript-eslint/parser": "^2.11.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.8.0",
+    "eslint-config-rax": "^0.1.0",
+    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-module": "^0.1.0",
+    "eslint-plugin-react": "^7.18.0",
+    "@ali/build-plugin-rax-app-def": "^1.0.0"
+  }
+}
+
+    `,
+  );
+
+  return [[], file];
+}
+  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/app.js.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/app.js.ts
new file mode 100644
index 000000000..49a113445
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/app.js.ts
@@ -0,0 +1,20 @@
+
+import ResultFile from '../../../../../../../model/ResultFile';
+import { IResultFile } from '../../../../../../../types';
+
+export default function getFile(): [string[], IResultFile] {
+  const file = new ResultFile(
+    'app',
+    'js',
+    `
+import { runApp } from 'rax-app';
+import appConfig from './app.json';
+
+runApp(appConfig);
+
+    `,
+  );
+
+  return [['src'], file];
+}
+  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/app.json.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/app.json.ts
new file mode 100644
index 000000000..3f9c5d4a2
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/app.json.ts
@@ -0,0 +1,27 @@
+
+import ResultFile from '../../../../../../../model/ResultFile';
+import { IResultFile } from '../../../../../../../types';
+
+export default function getFile(): [string[], IResultFile] {
+  const file = new ResultFile(
+    'app',
+    'json',
+    `
+{
+  "routes": [
+    {
+      "path": "/",
+      "source": "pages/Home/index"
+    }
+  ],
+  "window": {
+    "title": "Rax App Demo"
+  }
+}
+
+    `,
+  );
+
+  return [['src'], file];
+}
+  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/document/index.jsx.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/document/index.jsx.ts
new file mode 100644
index 000000000..2092778f8
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/document/index.jsx.ts
@@ -0,0 +1,40 @@
+
+import ResultFile from '../../../../../../../../model/ResultFile';
+import { IResultFile } from '../../../../../../../../types';
+
+export default function getFile(): [string[], IResultFile] {
+  const file = new ResultFile(
+    'index',
+    'jsx',
+    `
+import { createElement } from 'rax';
+import { Root, Style, Script } from 'rax-document';
+
+function Document() {
+  return (
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"
+        />
+        <title>Rax App Demo</title>
+        <Style />
+      </head>
+      <body>
+        {/* root container */}
+        <Root />
+        <Script />
+      </body>
+    </html>
+  );
+}
+
+export default Document;
+
+    `,
+  );
+
+  return [['src','document'], file];
+}
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/global.less.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/global.less.ts
new file mode 100644
index 000000000..688dfdc5d
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/global.less.ts
@@ -0,0 +1,16 @@
+
+import ResultFile from '../../../../../../../model/ResultFile';
+import { IResultFile } from '../../../../../../../types';
+
+export default function getFile(): [string[], IResultFile] {
+  const file = new ResultFile(
+    'global',
+    'less',
+    `
+
+    `,
+  );
+
+  return [['src'], file];
+}
+  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/pages/Home/index.css.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/pages/Home/index.css.ts
new file mode 100644
index 000000000..90ce110ba
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/pages/Home/index.css.ts
@@ -0,0 +1,16 @@
+
+import ResultFile from '../../../../../../../../../model/ResultFile';
+import { IResultFile } from '../../../../../../../../../types';
+
+export default function getFile(): [string[], IResultFile] {
+  const file = new ResultFile(
+    'index',
+    'css',
+    `
+
+    `,
+  );
+
+  return [['src','pages','Home'], file];
+}
+  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/pages/Home/index.jsx.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/pages/Home/index.jsx.ts
new file mode 100644
index 000000000..1fd5fcf12
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/pages/Home/index.jsx.ts
@@ -0,0 +1,34 @@
+
+import ResultFile from '../../../../../../../../../model/ResultFile';
+import { IResultFile } from '../../../../../../../../../types';
+
+export default function getFile(): [string[], IResultFile] {
+  const file = new ResultFile(
+    'index',
+    'jsx',
+    `
+import { createElement, Component } from 'rax';
+
+import Page from 'rax-view';
+import Text from 'rax-text';
+
+import './index.css';
+
+class Home$$Page extends Component {
+  render() {
+    return (
+      <Page>
+        <Text>Hello world!</Text>
+      </Page>
+    );
+  }
+}
+
+export default Home$$Page;
+
+    `,
+  );
+
+  return [['src','pages','Home'], file];
+}
+  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/utils.js.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/utils.js.ts
new file mode 100644
index 000000000..62871c0a7
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/utils.js.ts
@@ -0,0 +1,17 @@
+
+import ResultFile from '../../../../../../../model/ResultFile';
+import { IResultFile } from '../../../../../../../types';
+
+export default function getFile(): [string[], IResultFile] {
+  const file = new ResultFile(
+    'utils',
+    'js',
+    `
+export default {};
+
+    `,
+  );
+
+  return [['src'], file];
+}
+  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/index.ts b/packages/code-generator/src/plugins/project/framework/rax/template/index.ts
new file mode 100644
index 000000000..06f6dadcb
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/index.ts
@@ -0,0 +1,94 @@
+import ResultDir from '../../../../../model/ResultDir';
+import {
+  IProjectTemplate,
+  IResultDir,
+} from '../../../../../types';
+
+import { runFileGenerator } from '../../../../../utils/templateHelper';
+
+import file0 from './files/.editorconfig'
+import file1 from './files/.eslintignore'
+import file2 from './files/.eslintrc.js'
+import file3 from './files/.gitignore'
+import file4 from './files/README.md'
+import file5 from './files/abc.json'
+import file6 from './files/build.json'
+import file7 from './files/package.json'
+import file8 from './files/src/app.js'
+import file9 from './files/src/app.json'
+import file10 from './files/src/document/index.jsx'
+import file11 from './files/src/global.less'
+import file12 from './files/src/pages/Home/index.css'
+import file13 from './files/src/pages/Home/index.jsx'
+import file14 from './files/src/utils.js'
+
+const raxAppTemplate: IProjectTemplate = {
+  slots: {
+    components: {
+      path: ['src', 'components'],
+    },
+    pages: {
+      path: ['src', 'pages'],
+    },
+    router: {
+      path: ['src'],
+      fileName: 'router',
+    },
+    entry: {
+      path: ['src'],
+      fileName: 'app',
+    },
+    appConfig: {
+      path: ['src'],
+      fileName: 'app',
+    },
+    constants: {
+      path: ['src'],
+      fileName: 'constants',
+    },
+    utils: {
+      path: ['src'],
+      fileName: 'utils',
+    },
+    i18n: {
+      path: ['src'],
+      fileName: 'i18n',
+    },
+    globalStyle: {
+      path: ['src'],
+      fileName: 'global',
+    },
+    htmlEntry: {
+      path: ['src', 'document'],
+      fileName: 'index',
+    },
+    packageJSON: {
+      path: [],
+      fileName: 'package',
+    },
+  },
+
+  generateTemplate(): IResultDir {
+    const root = new ResultDir('.');
+
+    runFileGenerator(root, file0);
+    runFileGenerator(root, file1);
+    runFileGenerator(root, file2);
+    runFileGenerator(root, file3);
+    runFileGenerator(root, file4);
+    runFileGenerator(root, file5);
+    runFileGenerator(root, file6);
+    runFileGenerator(root, file7);
+    runFileGenerator(root, file8);
+    runFileGenerator(root, file9);
+    runFileGenerator(root, file10);
+    runFileGenerator(root, file11);
+    runFileGenerator(root, file12);
+    runFileGenerator(root, file13);
+    runFileGenerator(root, file14);
+
+    return root;
+  },
+};
+
+export default raxAppTemplate;
diff --git a/packages/code-generator/src/solutions/rax-app.ts b/packages/code-generator/src/solutions/rax-app.ts
new file mode 100644
index 000000000..e0e89b8c5
--- /dev/null
+++ b/packages/code-generator/src/solutions/rax-app.ts
@@ -0,0 +1,63 @@
+import { IProjectBuilder } from '../types';
+
+import { createProjectBuilder } from '../generator/ProjectBuilder';
+
+import esModule from '../plugins/common/esmodule';
+import containerClass from '../plugins/component/react/containerClass';
+import containerInitState from '../plugins/component/react/containerInitState';
+import containerInjectUtils from '../plugins/component/react/containerInjectUtils';
+import containerLifeCycle from '../plugins/component/react/containerLifeCycle';
+import containerMethod from '../plugins/component/react/containerMethod';
+import jsx from '../plugins/component/react/jsx';
+import reactCommonDeps from '../plugins/component/react/reactCommonDeps';
+import css from '../plugins/component/style/css';
+import constants from '../plugins/project/constants';
+import i18n from '../plugins/project/i18n';
+import utils from '../plugins/project/utils';
+
+import raxApp from '../plugins/project/framework/rax';
+
+import { prettier } from '../postprocessor';
+
+export default function createIceJsProjectBuilder(): IProjectBuilder {
+  return createProjectBuilder({
+    template: raxApp.template,
+    plugins: {
+      components: [
+        reactCommonDeps(),
+        esModule({
+          fileType: 'jsx',
+        }),
+        containerClass(),
+        containerInjectUtils(),
+        containerInitState(),
+        containerLifeCycle(),
+        containerMethod(),
+        jsx(),
+        css(),
+      ],
+      pages: [
+        reactCommonDeps(),
+        esModule({
+          fileType: 'jsx',
+        }),
+        containerClass(),
+        containerInjectUtils(),
+        containerInitState(),
+        containerLifeCycle(),
+        containerMethod(),
+        jsx(),
+        css(),
+      ],
+      appConfig: [raxApp.plugins.appConfig()],
+      entry: [raxApp.plugins.entry()],
+      constants: [constants()],
+      utils: [esModule(), utils()],
+      i18n: [i18n()],
+      globalStyle: [raxApp.plugins.globalStyle()],
+      htmlEntry: [raxApp.plugins.entryDocument()],
+      packageJSON: [raxApp.plugins.packageJSON()],
+    },
+    postProcessors: [prettier()],
+  });
+}
diff --git a/packages/code-generator/test-cases/.gitignore b/packages/code-generator/test-cases/.gitignore
new file mode 100644
index 000000000..b36969646
--- /dev/null
+++ b/packages/code-generator/test-cases/.gitignore
@@ -0,0 +1 @@
+actual/
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/.editorconfig b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/.editorconfig
new file mode 100644
index 000000000..5760be583
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/.editorconfig
@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/.eslintignore b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/.eslintignore
new file mode 100644
index 000000000..3b437e614
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/.eslintignore
@@ -0,0 +1,11 @@
+# 忽略目录
+build/
+tests/
+demo/
+
+# node 覆盖率文件
+coverage/
+
+# 忽略文件
+**/*-min.js
+**/*.min.js
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/.eslintrc.js b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/.eslintrc.js
new file mode 100644
index 000000000..e2a7c5b54
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['rax'],
+};
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/.gitignore b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/.gitignore
new file mode 100644
index 000000000..50a53dace
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/.gitignore
@@ -0,0 +1,17 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+*~
+*.swp
+*.log
+
+.DS_Store
+.idea/
+.temp/
+
+build/
+dist/
+lib/
+coverage/
+node_modules/
+
+template.yml
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/README.md b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/README.md
new file mode 100644
index 000000000..6eff85d41
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/README.md
@@ -0,0 +1,15 @@
+# @ali/rax-component-demo
+
+## Getting Started
+
+### `npm run start`
+
+Runs the app in development mode.
+
+Open [http://localhost:9999](http://localhost:9999) to view it in the browser.
+
+The page will reload if you make edits.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/abc.json b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/abc.json
new file mode 100644
index 000000000..f9ee40f71
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/abc.json
@@ -0,0 +1,7 @@
+{
+  "type": "rax",
+  "builder": "@ali/builder-rax-v1",
+  "info": {
+    "raxVersion": "1.x"
+  }
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/build.json b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/build.json
new file mode 100644
index 000000000..f3e9b9323
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/build.json
@@ -0,0 +1,12 @@
+{
+  "inlineStyle": false,
+  "plugins": [
+    [
+      "build-plugin-rax-app",
+      {
+        "targets": ["web", "miniapp"]
+      }
+    ],
+    "@ali/build-plugin-rax-app-def"
+  ]
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
new file mode 100644
index 000000000..33f6c7c85
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@ali/rax-component-demo",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "rm -f ./dist/miniapp.tar.gz && npm run build:miniapp && cd build/miniapp && tar czf ../../dist/miniapp.tar.gz *",
+    "build:miniapp": "build-scripts build",
+    "start": "build-scripts start",
+    "lint": "eslint --ext .js --ext .jsx ./"
+  },
+  "dependencies": {
+    "rax": "^1.1.0",
+    "rax-app": "^2.0.0",
+    "rax-document": "^0.1.0",
+    "rax-text": "^1.0.0",
+    "rax-view": "^1.0.0"
+  },
+  "devDependencies": {
+    "build-plugin-rax-app": "^5.0.0",
+    "@alib/build-scripts": "^0.1.0",
+    "@typescript-eslint/eslint-plugin": "^2.11.0",
+    "@typescript-eslint/parser": "^2.11.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.8.0",
+    "eslint-config-rax": "^0.1.0",
+    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-module": "^0.1.0",
+    "eslint-plugin-react": "^7.18.0",
+    "@ali/build-plugin-rax-app-def": "^1.0.0"
+  }
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/app.js b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/app.js
new file mode 100644
index 000000000..f04a4233b
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/app.js
@@ -0,0 +1,4 @@
+import { runApp } from 'rax-app';
+import appConfig from './app.json';
+
+runApp(appConfig);
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/app.json b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/app.json
new file mode 100644
index 000000000..63dec4d7d
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/app.json
@@ -0,0 +1,11 @@
+{
+  "routes": [
+    {
+      "path": "/",
+      "source": "pages/Home/index"
+    }
+  ],
+  "window": {
+    "title": "Rax App Demo"
+  }
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/document/index.jsx b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/document/index.jsx
new file mode 100644
index 000000000..50569a9b6
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/document/index.jsx
@@ -0,0 +1,25 @@
+import { createElement } from 'rax';
+import { Root, Style, Script } from 'rax-document';
+
+function Document() {
+  return (
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"
+        />
+        <title>Rax App Demo</title>
+        <Style />
+      </head>
+      <body>
+        {/* root container */}
+        <Root />
+        <Script />
+      </body>
+    </html>
+  );
+}
+
+export default Document;
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/global.less b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/global.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.css b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
new file mode 100644
index 000000000..68fb698e4
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
@@ -0,0 +1,18 @@
+import { createElement, Component } from 'rax';
+
+import Page from 'rax-view';
+import Text from 'rax-text';
+
+import './index.css';
+
+class Home$$Page extends Component {
+  render() {
+    return (
+      <Page>
+        <Text>Hello world!</Text>
+      </Page>
+    );
+  }
+}
+
+export default Home$$Page;
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/utils.js b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/utils.js
new file mode 100644
index 000000000..ff8b4c563
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/utils.js
@@ -0,0 +1 @@
+export default {};
diff --git a/packages/code-generator/test-cases/rax-app/demo1/schema.json5 b/packages/code-generator/test-cases/rax-app/demo1/schema.json5
new file mode 100644
index 000000000..b33ccf620
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo1/schema.json5
@@ -0,0 +1,51 @@
+{
+  // Schema 参见：https://yuque.antfin-inc.com/mo/spec/spec-materials#eNCJr
+  version: '1.0.0',
+  componentsMap: [
+    {
+      componentName: 'Page',
+      package: 'rax-view',
+      version: '^1.0.0',
+      destructuring: false,
+      exportName: 'Page',
+    },
+    {
+      componentName: 'Text',
+      package: 'rax-text',
+      version: '^1.0.0',
+      destructuring: false,
+      exportName: 'Text',
+    },
+  ],
+  componentsTree: [
+    {
+      componentName: 'Page',
+      props: {},
+      lifeCycles: {},
+      fileName: 'home',
+      dataSource: {
+        list: [],
+      },
+      children: [
+        {
+          componentName: 'Text',
+          props: {},
+          children: 'Hello world!',
+        },
+      ],
+    },
+  ],
+  config: {
+    sdkVersion: '1.0.3',
+    historyMode: 'hash',
+    targetRootID: 'root',
+  },
+  meta: {
+    name: '示例应用',
+    git_group: 'demo-group',
+    project_name: 'demo-project',
+    description: '这是一个示例应用',
+    spma: 'spmademo',
+    creator: '张三',
+  },
+}
diff --git a/packages/code-generator/test/rax-app.test.ts b/packages/code-generator/test/rax-app.test.ts
new file mode 100644
index 000000000..aabbb5319
--- /dev/null
+++ b/packages/code-generator/test/rax-app.test.ts
@@ -0,0 +1,60 @@
+import test from 'ava';
+import { spawnSync } from 'child_process';
+import fs from 'fs';
+import glob from 'glob';
+import JSON from 'json5';
+import path from 'path';
+
+import CodeGenerator from '../src';
+import createRaxAppBuilder from '../src/solutions/rax-app';
+import { IProjectSchema } from '../src/types/schema';
+
+const TEST_CASES_DIR = path.join(__dirname, '../test-cases/rax-app');
+
+async function exportProject(schemaJson: IProjectSchema, targetPath: string, projectName: string) {
+  const raxAppBuilder = createRaxAppBuilder();
+  const result = await raxAppBuilder.generateProject(schemaJson);
+  const publisher = CodeGenerator.publishers.disk();
+  await publisher.publish({
+    project: result,
+    outputPath: targetPath,
+    projectSlug: projectName,
+    createProjectFolder: true,
+  });
+}
+
+const defineTest = (caseDirName: string) => {
+  test(`rax-app ${caseDirName} should works`, async (t) => {
+    const caseFullDir = path.join(TEST_CASES_DIR, caseDirName);
+    const schema = JSON.parse(fs.readFileSync(path.join(caseFullDir, 'schema.json5'), 'utf-8'));
+    const actualDir = path.join(caseFullDir, 'actual');
+
+    await exportProject(schema, actualDir, 'demo-project');
+
+    const actualFiles = glob.sync('**/*.{js,jsx,json,ts,tsx,less,css,scss,sass}', { cwd: actualDir });
+
+    t.true(actualFiles.length > 0)
+
+    spawnSync('npx', ['prettier', '--write', ...actualFiles], {
+      stdio: 'inherit',
+      shell: true,
+      cwd: actualDir,
+    });
+
+    const diffRes = spawnSync('diff', ['-bur', 'actual', 'expected'], {
+      stdio: 'pipe',
+      shell: true,
+      cwd: caseFullDir,
+      encoding: 'utf-8',
+    });
+
+    t.is(diffRes.stdout, '')
+  });
+};
+
+test('simple truth should pass', async (t) => {
+  t.is(0, 0);
+});
+
+fs.readdirSync(TEST_CASES_DIR).forEach(defineTest);
+

From 084c37c40bc3fa5d56089bcf4294b16b7d45d87b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 12 Aug 2020 00:08:54 +0800
Subject: [PATCH 02/80] =?UTF-8?q?chore:=20=F0=9F=A4=96=20=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=AF=B9=E4=BA=8E=E5=87=BA=E7=A0=81=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E7=9A=84=E8=B0=83=E8=AF=95=E7=9B=B8=E5=85=B3=E7=9A=84=20VSCode?=
 =?UTF-8?q?=20=E7=9A=84=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/launch.json | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index f242fc1f3..45107d361 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -10,6 +10,15 @@
       "request": "launch",
       "runtimeExecutable": "${workspaceFolder}/packages/material-parser/node_modules/.bin/ava",
       "runtimeArgs": ["debug", "--break", "${file}"]
-    }
+    },
+    {
+      "name": "ava code-gen",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "node",
+      "runtimeArgs": ["${workspaceFolder}/node_modules/.bin/ava", "--serial", "${file}"],
+      "cwd": "${workspaceFolder}/packages/code-generator",
+      "outputCapture": "std"
+    },
   ]
 }

From d834653b20dccbbb6eeab3afadb7405f8c641fce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 12 Aug 2020 00:29:57 +0800
Subject: [PATCH 03/80] =?UTF-8?q?test:=20=F0=9F=92=8D=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=20Rax=20=E5=87=BA=E7=A0=81=E7=9A=84=E6=B5=8B=E8=AF=95=E7=94=A8?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/package.json          |  3 +
 .../expected/demo-project/src/global.less     |  0
 .../expected/demo-project/src/global.scss     |  5 ++
 .../demo-project/src/pages/Home/index.jsx     |  1 +
 .../test-cases/rax-app/demo1/schema.json5     |  2 +-
 packages/code-generator/test/rax-app.test.ts  | 82 +++++++++++++++----
 6 files changed, 74 insertions(+), 19 deletions(-)
 delete mode 100644 packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/global.less
 create mode 100644 packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/global.scss

diff --git a/packages/code-generator/package.json b/packages/code-generator/package.json
index 45cb02d76..5da8251f0 100644
--- a/packages/code-generator/package.json
+++ b/packages/code-generator/package.json
@@ -37,6 +37,9 @@
   "ava": {
     "compileEnhancements": false,
     "snapshotDir": "test/fixtures/__snapshots__",
+    "files": [
+      "test/*.test.ts"
+    ],
     "extensions": [
       "ts"
     ],
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/global.less b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/global.less
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/global.scss b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/global.scss
new file mode 100644
index 000000000..5a853d5a9
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/global.scss
@@ -0,0 +1,5 @@
+// TODO: 引入默认全局样式
+
+body {
+  -webkit-font-smoothing: antialiased;
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
index 68fb698e4..acb73cdd4 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
@@ -1,6 +1,7 @@
 import { createElement, Component } from 'rax';
 
 import Page from 'rax-view';
+
 import Text from 'rax-text';
 
 import './index.css';
diff --git a/packages/code-generator/test-cases/rax-app/demo1/schema.json5 b/packages/code-generator/test-cases/rax-app/demo1/schema.json5
index b33ccf620..510b70006 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo1/schema.json5
@@ -41,7 +41,7 @@
     targetRootID: 'root',
   },
   meta: {
-    name: '示例应用',
+    name: 'Rax App Demo',
     git_group: 'demo-group',
     project_name: 'demo-project',
     description: '这是一个示例应用',
diff --git a/packages/code-generator/test/rax-app.test.ts b/packages/code-generator/test/rax-app.test.ts
index aabbb5319..fce62e545 100644
--- a/packages/code-generator/test/rax-app.test.ts
+++ b/packages/code-generator/test/rax-app.test.ts
@@ -4,6 +4,7 @@ import fs from 'fs';
 import glob from 'glob';
 import JSON from 'json5';
 import path from 'path';
+import chalk from 'chalk';
 
 import CodeGenerator from '../src';
 import createRaxAppBuilder from '../src/solutions/rax-app';
@@ -25,30 +26,30 @@ async function exportProject(schemaJson: IProjectSchema, targetPath: string, pro
 
 const defineTest = (caseDirName: string) => {
   test(`rax-app ${caseDirName} should works`, async (t) => {
-    const caseFullDir = path.join(TEST_CASES_DIR, caseDirName);
-    const schema = JSON.parse(fs.readFileSync(path.join(caseFullDir, 'schema.json5'), 'utf-8'));
-    const actualDir = path.join(caseFullDir, 'actual');
+    try {
+      const caseFullDir = path.join(TEST_CASES_DIR, caseDirName);
+      const schema = JSON.parse(fs.readFileSync(path.join(caseFullDir, 'schema.json5'), 'utf-8'));
+      const actualDir = path.join(caseFullDir, 'actual');
 
-    await exportProject(schema, actualDir, 'demo-project');
+      removeActualDirRecursiveSync(actualDir, caseFullDir);
 
-    const actualFiles = glob.sync('**/*.{js,jsx,json,ts,tsx,less,css,scss,sass}', { cwd: actualDir });
+      await exportProject(schema, actualDir, 'demo-project');
 
-    t.true(actualFiles.length > 0)
+      const actualFiles = glob.sync('**/*.{js,jsx,json,ts,tsx,less,css,scss,sass}', { cwd: actualDir });
 
-    spawnSync('npx', ['prettier', '--write', ...actualFiles], {
-      stdio: 'inherit',
-      shell: true,
-      cwd: actualDir,
-    });
+      t.true(actualFiles.length > 0)
 
-    const diffRes = spawnSync('diff', ['-bur', 'actual', 'expected'], {
-      stdio: 'pipe',
-      shell: true,
-      cwd: caseFullDir,
-      encoding: 'utf-8',
-    });
+      runPrettierSync(actualFiles, actualDir);
 
-    t.is(diffRes.stdout, '')
+      const diffRes = diffActualAndExpectedSync(caseFullDir);
+      if (diffRes) {
+        t.fail(diffRes);
+      } else {
+        t.pass();
+      }
+    } catch(e){
+      throw e; // just for debugger
+    }
   });
 };
 
@@ -58,3 +59,48 @@ test('simple truth should pass', async (t) => {
 
 fs.readdirSync(TEST_CASES_DIR).forEach(defineTest);
 
+function removeActualDirRecursiveSync(actualDir: string, caseFullDir: string) {
+  spawnSync('rm', ['-rf', actualDir], {
+    stdio: 'inherit',
+    shell: true,
+    cwd: caseFullDir
+  });
+}
+
+function runPrettierSync(files: string[], cwd: string) {
+  spawnSync('npx', ['prettier', '--write', ...files], {
+    stdio: 'inherit',
+    shell: true,
+    cwd,
+  });
+}
+
+function diffActualAndExpectedSync(caseFullDir: string): string {
+  const res = spawnSync('diff', ['-wur', 'expected', 'actual'], {
+    stdio: 'pipe',
+    shell: true,
+    cwd: caseFullDir,
+    encoding: 'utf-8',
+  });
+
+  return colorizeDiffOutput(res.stdout);
+}
+
+function colorizeDiffOutput(output: string): string {
+  if (!output){
+    return output;
+  }
+
+  return output.split('\n').map(line => {
+    if (/^Only/i.test(line)){
+      return chalk.red(line);
+    } else if (line[0] === '+'){
+      return chalk.yellow(line);
+    } else if (line[0] === '-'){
+      return chalk.red(line);
+    } else {
+      return line;
+    }
+  }).join('\n');
+}
+

From c3d909aaf577e3e57b277569457be47e0330b286 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 12 Aug 2020 00:30:52 +0800
Subject: [PATCH 04/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84=20Rax=20=E5=87=BA=E7=A0=81=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E7=9A=84=E6=A8=A1=E6=9D=BF=E5=92=8C=E6=8F=92=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../framework/rax/plugins/appConfig.ts        |  1 +
 .../framework/rax/plugins/globalStyle.ts      |  2 +-
 .../framework/rax/plugins/packageJSON.ts      | 75 +++++++------------
 .../rax/template/files/.editorconfig.ts       |  7 +-
 .../rax/template/files/.eslintignore.ts       |  7 +-
 .../rax/template/files/.eslintrc.js.ts        |  7 +-
 .../rax/template/files/.gitignore.ts          |  7 +-
 .../framework/rax/template/files/README.md.ts | 13 ++--
 .../framework/rax/template/files/abc.json.ts  |  7 +-
 .../rax/template/files/build.json.ts          |  7 +-
 .../rax/template/files/package.json.ts        | 46 ------------
 .../rax/template/files/src/app.js.ts          | 20 -----
 .../rax/template/files/src/app.json.ts        | 27 -------
 .../template/files/src/document/index.jsx.ts  | 40 ----------
 .../rax/template/files/src/global.less.ts     | 16 ----
 .../files/src/pages/Home/index.css.ts         | 16 ----
 .../files/src/pages/Home/index.jsx.ts         | 34 ---------
 .../rax/template/files/src/utils.js.ts        | 17 -----
 .../project/framework/rax/template/index.ts   | 35 ++-------
 19 files changed, 53 insertions(+), 331 deletions(-)
 delete mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/package.json.ts
 delete mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/src/app.js.ts
 delete mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/src/app.json.ts
 delete mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/src/document/index.jsx.ts
 delete mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/src/global.less.ts
 delete mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/src/pages/Home/index.css.ts
 delete mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/src/pages/Home/index.jsx.ts
 delete mode 100644 packages/code-generator/src/plugins/project/framework/rax/template/files/src/utils.js.ts

diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/appConfig.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/appConfig.ts
index 7df09a0f1..2d630c407 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/appConfig.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/appConfig.ts
@@ -17,6 +17,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
 
     const ir = next.ir as IRouterInfo;
 
+    // TODO: 如何生成路由?
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: FileType.JSON,
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/globalStyle.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/globalStyle.ts
index 51c872320..a990947a9 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/globalStyle.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/globalStyle.ts
@@ -19,7 +19,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
 
     next.chunks.push({
       type: ChunkType.STRING,
-      fileType: FileType.SCSS,
+      fileType: FileType.SCSS, // TODO: 样式文件的类型定制化？
       name: COMMON_CHUNK_NAME.StyleDepsImport,
       content: `
 // TODO: 引入默认全局样式
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
index a79dc3481..e8e0b5d48 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
@@ -10,17 +10,6 @@ import {
   IProjectInfo,
 } from '../../../../../types';
 
-interface IIceJsPackageJSON extends IPackageJSON {
-  ideMode: {
-    name: string;
-  };
-  iceworks: {
-    type: string;
-    adapter: string;
-  };
-  originTemplate: string;
-}
-
 const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
   const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
     const next: ICodeStruct = {
@@ -29,48 +18,36 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
 
     const ir = next.ir as IProjectInfo;
 
-    const packageJson: IIceJsPackageJSON = {
-      name: '@alifd/scaffold-lite-js',
-      version: '0.1.5',
-      description: '轻量级模板，使用 JavaScript，仅包含基础的 Layout。',
+    const packageJson: IPackageJSON = {
+      name: '@ali/rax-component-demo',
+      version: '1.0.0',
+      scripts: {
+        build:
+          'rm -f ./dist/miniapp.tar.gz && npm run build:miniapp && cd build/miniapp && tar czf ../../dist/miniapp.tar.gz *',
+        'build:miniapp': 'build-scripts build',
+        start: 'build-scripts start',
+        lint: 'eslint --ext .js --ext .jsx ./',
+      },
       dependencies: {
-        moment: '^2.24.0',
-        react: '^16.4.1',
-        'react-dom': '^16.4.1',
-        '@alifd/theme-design-pro': '^0.x',
+        rax: '^1.1.0',
+        'rax-app': '^2.0.0',
+        'rax-document': '^0.1.0',
+        'rax-text': '^1.0.0',
+        'rax-view': '^1.0.0',
       },
       devDependencies: {
-        '@ice/spec': '^1.0.0',
-        'build-plugin-fusion': '^0.1.0',
-        'build-plugin-moment-locales': '^0.1.0',
-        eslint: '^6.0.1',
-        'ice.js': '^1.0.0',
-        stylelint: '^13.2.0',
-        '@ali/build-plugin-ice-def': '^0.1.0',
+        'build-plugin-rax-app': '^5.0.0',
+        '@alib/build-scripts': '^0.1.0',
+        '@typescript-eslint/eslint-plugin': '^2.11.0',
+        '@typescript-eslint/parser': '^2.11.0',
+        'babel-eslint': '^10.0.3',
+        eslint: '^6.8.0',
+        'eslint-config-rax': '^0.1.0',
+        'eslint-plugin-import': '^2.20.0',
+        'eslint-plugin-module': '^0.1.0',
+        'eslint-plugin-react': '^7.18.0',
+        '@ali/build-plugin-rax-app-def': '^1.0.0',
       },
-      scripts: {
-        start: 'icejs start',
-        build: 'icejs build',
-        lint: 'npm run eslint && npm run stylelint',
-        eslint: 'eslint --cache --ext .js,.jsx ./',
-        stylelint: 'stylelint ./**/*.scss',
-      },
-      ideMode: {
-        name: 'ice-react',
-      },
-      iceworks: {
-        type: 'react',
-        adapter: 'adapter-react-v3',
-      },
-      engines: {
-        node: '>=8.0.0',
-      },
-      repository: {
-        type: 'git',
-        url: 'http://gitlab.alibaba-inc.com/msd/leak-scan/tree/master',
-      },
-      private: true,
-      originTemplate: '@alifd/scaffold-lite-js',
     };
 
     next.chunks.push({
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/.editorconfig.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/.editorconfig.ts
index 00762837a..a2550904c 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/.editorconfig.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/.editorconfig.ts
@@ -6,8 +6,7 @@ export default function getFile(): [string[], IResultFile] {
   const file = new ResultFile(
     '.editorconfig',
     '',
-    `
-# http://editorconfig.org
+    `# http://editorconfig.org
 root = true
 
 [*]
@@ -19,10 +18,8 @@ insert_final_newline = true
 
 [*.md]
 trim_trailing_whitespace = false
-
-    `,
+`,
   );
 
   return [[], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintignore.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintignore.ts
index d0c775445..0295fefe1 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintignore.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintignore.ts
@@ -6,8 +6,7 @@ export default function getFile(): [string[], IResultFile] {
   const file = new ResultFile(
     '.eslintignore',
     '',
-    `
-# 忽略目录
+    `# 忽略目录
 build/
 tests/
 demo/
@@ -18,10 +17,8 @@ coverage/
 # 忽略文件
 **/*-min.js
 **/*.min.js
-
-    `,
+`,
   );
 
   return [[], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintrc.js.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintrc.js.ts
index 7bef18c04..558fa1338 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintrc.js.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintrc.js.ts
@@ -6,14 +6,11 @@ export default function getFile(): [string[], IResultFile] {
   const file = new ResultFile(
     '.eslintrc',
     'js',
-    `
-module.exports = {
+    `module.exports = {
   extends: ['rax'],
 };
-
-    `,
+`,
   );
 
   return [[], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/.gitignore.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/.gitignore.ts
index 9e84e430e..bea5e6f48 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/.gitignore.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/.gitignore.ts
@@ -6,8 +6,7 @@ export default function getFile(): [string[], IResultFile] {
   const file = new ResultFile(
     '.gitignore',
     '',
-    `
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+    `# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 *~
 *.swp
@@ -24,10 +23,8 @@ coverage/
 node_modules/
 
 template.yml
-
-    `,
+`,
   );
 
   return [[], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/README.md.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/README.md.ts
index 924588d20..773161d02 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/README.md.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/README.md.ts
@@ -6,12 +6,11 @@ export default function getFile(): [string[], IResultFile] {
   const file = new ResultFile(
     'README',
     'md',
-    `
-# @ali/rax-component-demo
+    `# @ali/rax-component-demo
 
 ## Getting Started
 
-### `npm run start`
+### \`npm run start\`
 
 Runs the app in development mode.
 
@@ -19,13 +18,11 @@ Open [http://localhost:9999](http://localhost:9999) to view it in the browser.
 
 The page will reload if you make edits.
 
-### `npm run build`
+### \`npm run build\`
 
-Builds the app for production to the `build` folder.
-
-    `,
+Builds the app for production to the \`build\` folder.
+`,
   );
 
   return [[], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/abc.json.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/abc.json.ts
index 779320ba4..303bc583c 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/abc.json.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/abc.json.ts
@@ -6,18 +6,15 @@ export default function getFile(): [string[], IResultFile] {
   const file = new ResultFile(
     'abc',
     'json',
-    `
-{
+    `{
   "type": "rax",
   "builder": "@ali/builder-rax-v1",
   "info": {
     "raxVersion": "1.x"
   }
 }
-
-    `,
+`,
   );
 
   return [[], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/build.json.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/build.json.ts
index c16e2adc5..bce5df835 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/build.json.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/build.json.ts
@@ -6,8 +6,7 @@ export default function getFile(): [string[], IResultFile] {
   const file = new ResultFile(
     'build',
     'json',
-    `
-{
+    `{
   "inlineStyle": false,
   "plugins": [
     [
@@ -19,10 +18,8 @@ export default function getFile(): [string[], IResultFile] {
     "@ali/build-plugin-rax-app-def"
   ]
 }
-
-    `,
+`,
   );
 
   return [[], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/package.json.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/package.json.ts
deleted file mode 100644
index 15d113845..000000000
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/package.json.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
-    'package',
-    'json',
-    `
-{
-  "name": "@ali/rax-component-demo",
-  "version": "1.0.0",
-  "scripts": {
-    "build": "rm -f ./dist/miniapp.tar.gz && npm run build:miniapp && cd build/miniapp && tar czf ../../dist/miniapp.tar.gz *",
-    "build:miniapp": "build-scripts build",
-    "start": "build-scripts start",
-    "lint": "eslint --ext .js --ext .jsx ./"
-  },
-  "dependencies": {
-    "rax": "^1.1.0",
-    "rax-app": "^2.0.0",
-    "rax-document": "^0.1.0",
-    "rax-text": "^1.0.0",
-    "rax-view": "^1.0.0"
-  },
-  "devDependencies": {
-    "build-plugin-rax-app": "^5.0.0",
-    "@alib/build-scripts": "^0.1.0",
-    "@typescript-eslint/eslint-plugin": "^2.11.0",
-    "@typescript-eslint/parser": "^2.11.0",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.8.0",
-    "eslint-config-rax": "^0.1.0",
-    "eslint-plugin-import": "^2.20.0",
-    "eslint-plugin-module": "^0.1.0",
-    "eslint-plugin-react": "^7.18.0",
-    "@ali/build-plugin-rax-app-def": "^1.0.0"
-  }
-}
-
-    `,
-  );
-
-  return [[], file];
-}
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/app.js.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/app.js.ts
deleted file mode 100644
index 49a113445..000000000
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/app.js.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-
-import ResultFile from '../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
-    'app',
-    'js',
-    `
-import { runApp } from 'rax-app';
-import appConfig from './app.json';
-
-runApp(appConfig);
-
-    `,
-  );
-
-  return [['src'], file];
-}
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/app.json.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/app.json.ts
deleted file mode 100644
index 3f9c5d4a2..000000000
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/app.json.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-
-import ResultFile from '../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
-    'app',
-    'json',
-    `
-{
-  "routes": [
-    {
-      "path": "/",
-      "source": "pages/Home/index"
-    }
-  ],
-  "window": {
-    "title": "Rax App Demo"
-  }
-}
-
-    `,
-  );
-
-  return [['src'], file];
-}
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/document/index.jsx.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/document/index.jsx.ts
deleted file mode 100644
index 2092778f8..000000000
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/document/index.jsx.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-
-import ResultFile from '../../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
-    'index',
-    'jsx',
-    `
-import { createElement } from 'rax';
-import { Root, Style, Script } from 'rax-document';
-
-function Document() {
-  return (
-    <html>
-      <head>
-        <meta charset="utf-8" />
-        <meta
-          name="viewport"
-          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"
-        />
-        <title>Rax App Demo</title>
-        <Style />
-      </head>
-      <body>
-        {/* root container */}
-        <Root />
-        <Script />
-      </body>
-    </html>
-  );
-}
-
-export default Document;
-
-    `,
-  );
-
-  return [['src','document'], file];
-}
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/global.less.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/global.less.ts
deleted file mode 100644
index 688dfdc5d..000000000
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/global.less.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-
-import ResultFile from '../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
-    'global',
-    'less',
-    `
-
-    `,
-  );
-
-  return [['src'], file];
-}
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/pages/Home/index.css.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/pages/Home/index.css.ts
deleted file mode 100644
index 90ce110ba..000000000
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/pages/Home/index.css.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-
-import ResultFile from '../../../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
-    'index',
-    'css',
-    `
-
-    `,
-  );
-
-  return [['src','pages','Home'], file];
-}
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/pages/Home/index.jsx.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/pages/Home/index.jsx.ts
deleted file mode 100644
index 1fd5fcf12..000000000
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/pages/Home/index.jsx.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-
-import ResultFile from '../../../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
-    'index',
-    'jsx',
-    `
-import { createElement, Component } from 'rax';
-
-import Page from 'rax-view';
-import Text from 'rax-text';
-
-import './index.css';
-
-class Home$$Page extends Component {
-  render() {
-    return (
-      <Page>
-        <Text>Hello world!</Text>
-      </Page>
-    );
-  }
-}
-
-export default Home$$Page;
-
-    `,
-  );
-
-  return [['src','pages','Home'], file];
-}
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/utils.js.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/src/utils.js.ts
deleted file mode 100644
index 62871c0a7..000000000
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/src/utils.js.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-
-import ResultFile from '../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
-    'utils',
-    'js',
-    `
-export default {};
-
-    `,
-  );
-
-  return [['src'], file];
-}
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/index.ts b/packages/code-generator/src/plugins/project/framework/rax/template/index.ts
index 06f6dadcb..12e3e65dd 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/template/index.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/index.ts
@@ -1,26 +1,15 @@
 import ResultDir from '../../../../../model/ResultDir';
-import {
-  IProjectTemplate,
-  IResultDir,
-} from '../../../../../types';
+import { IProjectTemplate, IResultDir } from '../../../../../types';
 
 import { runFileGenerator } from '../../../../../utils/templateHelper';
 
-import file0 from './files/.editorconfig'
-import file1 from './files/.eslintignore'
-import file2 from './files/.eslintrc.js'
-import file3 from './files/.gitignore'
-import file4 from './files/README.md'
-import file5 from './files/abc.json'
-import file6 from './files/build.json'
-import file7 from './files/package.json'
-import file8 from './files/src/app.js'
-import file9 from './files/src/app.json'
-import file10 from './files/src/document/index.jsx'
-import file11 from './files/src/global.less'
-import file12 from './files/src/pages/Home/index.css'
-import file13 from './files/src/pages/Home/index.jsx'
-import file14 from './files/src/utils.js'
+import file0 from './files/.editorconfig';
+import file1 from './files/.eslintignore';
+import file2 from './files/.eslintrc.js';
+import file3 from './files/.gitignore';
+import file4 from './files/README.md';
+import file5 from './files/abc.json';
+import file6 from './files/build.json';
 
 const raxAppTemplate: IProjectTemplate = {
   slots: {
@@ -78,14 +67,6 @@ const raxAppTemplate: IProjectTemplate = {
     runFileGenerator(root, file4);
     runFileGenerator(root, file5);
     runFileGenerator(root, file6);
-    runFileGenerator(root, file7);
-    runFileGenerator(root, file8);
-    runFileGenerator(root, file9);
-    runFileGenerator(root, file10);
-    runFileGenerator(root, file11);
-    runFileGenerator(root, file12);
-    runFileGenerator(root, file13);
-    runFileGenerator(root, file14);
 
     return root;
   },

From 965ef4a4edb9ac60327205568d060978b83fd61a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 12 Aug 2020 00:31:30 +0800
Subject: [PATCH 05/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=20ResultDir=20=E7=9A=84=E6=8A=A5=E9=94=99=E4=BF=A1=E6=81=AF,?=
 =?UTF-8?q?=20=E6=9B=B4=E6=96=B9=E4=BE=BF=E5=AE=9A=E4=BD=8D=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/src/model/ResultDir.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/code-generator/src/model/ResultDir.ts b/packages/code-generator/src/model/ResultDir.ts
index 3888859c1..9a9bbc558 100644
--- a/packages/code-generator/src/model/ResultDir.ts
+++ b/packages/code-generator/src/model/ResultDir.ts
@@ -15,7 +15,7 @@ export default class ResultDir implements IResultDir {
     if (this.dirs.findIndex(d => d.name === dir.name) < 0) {
       this.dirs.push(dir);
     } else {
-      throw new CodeGeneratorError('Adding same directory to one directory');
+      throw new CodeGeneratorError(`Adding same directory to one directory: ${dir.name} -> ${this.name}`);
     }
   }
 
@@ -25,7 +25,7 @@ export default class ResultDir implements IResultDir {
     ) {
       this.files.push(file);
     } else {
-      throw new CodeGeneratorError('Adding same file to one directory');
+      throw new CodeGeneratorError(`Adding same file to one directory: ${file.name} -> ${this.name}`);
     }
   }
 }

From 42f7bdbe42562dbcaf54e34f4f2dee5bde2d117b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 12 Aug 2020 00:32:48 +0800
Subject: [PATCH 06/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E5=AE=B9=E5=99=A8?=
 =?UTF-8?q?=E7=9A=84=E6=A8=A1=E5=9D=97=E5=90=8D=E7=BB=9F=E4=B8=80=E9=83=BD?=
 =?UTF-8?q?=E7=94=A8=20PascalCase,=20=E5=B9=B6=E4=B8=BA=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=89=B9=E5=AE=9A=E5=90=8E=E7=BC=80=E9=98=B2?=
 =?UTF-8?q?=E6=AD=A2=E4=B8=8E=E7=BB=84=E4=BB=B6=E5=90=8D=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/src/parser/SchemaParser.ts        | 4 ++--
 .../src/plugins/component/react/containerClass.ts         | 8 ++++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/code-generator/src/parser/SchemaParser.ts b/packages/code-generator/src/parser/SchemaParser.ts
index d6b679ff0..fa1ece2a0 100644
--- a/packages/code-generator/src/parser/SchemaParser.ts
+++ b/packages/code-generator/src/parser/SchemaParser.ts
@@ -2,7 +2,7 @@
  * 解析器是对输入的固定格式数据做拆解，使其符合引擎后续步骤预期，完成统一处理逻辑的步骤。
  * 本解析器面向的是标准 schema 协议。
  */
-
+import changeCase from 'change-case';
 import { SUPPORT_SCHEMA_VERSION_LIST } from '../const';
 
 import { handleChildren } from '../utils/nodeToJSX';
@@ -90,7 +90,7 @@ class SchemaParser implements ISchemaParser {
           const container: IContainerInfo = {
             ...subRoot,
             containerType: subRoot.componentName,
-            moduleName: subRoot.fileName, // TODO: 驼峰化名称
+            moduleName: changeCase.pascalCase(subRoot.fileName),
           };
           return container;
         });
diff --git a/packages/code-generator/src/plugins/component/react/containerClass.ts b/packages/code-generator/src/plugins/component/react/containerClass.ts
index 7ca5e685f..5dae325c7 100644
--- a/packages/code-generator/src/plugins/component/react/containerClass.ts
+++ b/packages/code-generator/src/plugins/component/react/containerClass.ts
@@ -1,3 +1,4 @@
+import changeCase from 'change-case';
 import { COMMON_CHUNK_NAME, CLASS_DEFINE_CHUNK_NAME } from '../../../const/generator';
 import { REACT_CHUNK_NAME } from './const';
 
@@ -18,11 +19,14 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
 
     const ir = next.ir as IContainerInfo;
 
+    // 将模块名转换成 PascalCase 的格式，并添加特定后缀，防止命名冲突
+    const componentClassName = `${changeCase.pascalCase(ir.moduleName)}$$Page`;
+
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: FileType.JSX,
       name: CLASS_DEFINE_CHUNK_NAME.Start,
-      content: `class ${ir.moduleName} extends React.Component {`,
+      content: `class ${componentClassName} extends React.Component {`,
       linkAfter: [
         COMMON_CHUNK_NAME.ExternalDepsImport,
         COMMON_CHUNK_NAME.InternalDepsImport,
@@ -86,7 +90,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       type: ChunkType.STRING,
       fileType: FileType.JSX,
       name: COMMON_CHUNK_NAME.FileExport,
-      content: `export default ${ir.moduleName};`,
+      content: `export default ${componentClassName};`,
       linkAfter: [
         COMMON_CHUNK_NAME.ExternalDepsImport,
         COMMON_CHUNK_NAME.InternalDepsImport,

From b7c4854fb132dd3c688427a47945d093d8532da8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 12 Aug 2020 00:33:27 +0800
Subject: [PATCH 07/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=AF=B9=20JSON=20=E6=96=87=E4=BB=B6=E8=BF=9B=E8=A1=8C=20prett?=
 =?UTF-8?q?ier=20=E6=A0=BC=E5=BC=8F=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/src/postprocessor/prettier/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/code-generator/src/postprocessor/prettier/index.ts b/packages/code-generator/src/postprocessor/prettier/index.ts
index 85c2f9741..988a23fde 100644
--- a/packages/code-generator/src/postprocessor/prettier/index.ts
+++ b/packages/code-generator/src/postprocessor/prettier/index.ts
@@ -21,6 +21,8 @@ const factory: PostProcessorFactory<ProcessorConfig> = (config?: ProcessorConfig
       parser = 'babel';
     } else if (fileType === 'ts' || fileType === 'tsx') {
       parser = 'typescript';
+    } else if (fileType === 'json') {
+      parser = 'json';
     } else if (PARSERS.indexOf(fileType) >= 0) {
       parser = fileType as prettier.BuiltInParserName;
     } else if (cfg.customFileTypeParser[fileType]){

From cac29d8818a44ec85ca76d5336eb5afe4fe44139 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 12 Aug 2020 00:34:14 +0800
Subject: [PATCH 08/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=20less=20=E6=96=87=E4=BB=B6=E7=B1=BB=E5=9E=8B=E7=9A=84?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89,=20=E4=BB=A5=E5=A4=87=E5=90=8E=E7=BB=AD?=
 =?UTF-8?q?=E6=9F=90=E4=BA=9B=20solution=20=E5=87=BA=E7=A0=81=E7=94=A8=20l?=
 =?UTF-8?q?ess=20=E6=96=87=E4=BB=B6=E4=BD=9C=E4=B8=BA=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/src/types/core.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/code-generator/src/types/core.ts b/packages/code-generator/src/types/core.ts
index a370d5641..6eb58ff17 100644
--- a/packages/code-generator/src/types/core.ts
+++ b/packages/code-generator/src/types/core.ts
@@ -11,6 +11,7 @@ import {
 export enum FileType {
   CSS = 'css',
   SCSS = 'scss',
+  LESS = 'less',
   HTML = 'html',
   JS = 'js',
   JSX = 'jsx',

From 63d5b6e4b02ff1bd94a68da94808f6167610effd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 12 Aug 2020 10:33:44 +0800
Subject: [PATCH 09/80] =?UTF-8?q?test:=20=F0=9F=92=8D=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E6=89=A7=E8=A1=8C=E5=91=BD=E4=BB=A4=E7=9A=84=E9=83=A8=E5=88=86?=
 =?UTF-8?q?,=20=E8=AE=A9=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E6=9B=B4=E6=B8=85=E6=99=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/test/rax-app.test.ts | 100 ++++++++++---------
 1 file changed, 53 insertions(+), 47 deletions(-)

diff --git a/packages/code-generator/test/rax-app.test.ts b/packages/code-generator/test/rax-app.test.ts
index fce62e545..3d12eb220 100644
--- a/packages/code-generator/test/rax-app.test.ts
+++ b/packages/code-generator/test/rax-app.test.ts
@@ -12,19 +12,9 @@ import { IProjectSchema } from '../src/types/schema';
 
 const TEST_CASES_DIR = path.join(__dirname, '../test-cases/rax-app');
 
-async function exportProject(schemaJson: IProjectSchema, targetPath: string, projectName: string) {
-  const raxAppBuilder = createRaxAppBuilder();
-  const result = await raxAppBuilder.generateProject(schemaJson);
-  const publisher = CodeGenerator.publishers.disk();
-  await publisher.publish({
-    project: result,
-    outputPath: targetPath,
-    projectSlug: projectName,
-    createProjectFolder: true,
-  });
-}
+fs.readdirSync(TEST_CASES_DIR).forEach(defineTest);
 
-const defineTest = (caseDirName: string) => {
+function defineTest(caseDirName: string) {
   test(`rax-app ${caseDirName} should works`, async (t) => {
     try {
       const caseFullDir = path.join(TEST_CASES_DIR, caseDirName);
@@ -37,7 +27,7 @@ const defineTest = (caseDirName: string) => {
 
       const actualFiles = glob.sync('**/*.{js,jsx,json,ts,tsx,less,css,scss,sass}', { cwd: actualDir });
 
-      t.true(actualFiles.length > 0)
+      t.true(actualFiles.length > 0);
 
       runPrettierSync(actualFiles, actualDir);
 
@@ -47,60 +37,76 @@ const defineTest = (caseDirName: string) => {
       } else {
         t.pass();
       }
-    } catch(e){
+    } catch (e) {
       throw e; // just for debugger
     }
   });
-};
+}
 
-test('simple truth should pass', async (t) => {
-  t.is(0, 0);
-});
-
-fs.readdirSync(TEST_CASES_DIR).forEach(defineTest);
+async function exportProject(schemaJson: IProjectSchema, targetPath: string, projectName: string) {
+  const raxAppBuilder = createRaxAppBuilder();
+  const result = await raxAppBuilder.generateProject(schemaJson);
+  const publisher = CodeGenerator.publishers.disk();
+  await publisher.publish({
+    project: result,
+    outputPath: targetPath,
+    projectSlug: projectName,
+    createProjectFolder: true,
+  });
+}
 
 function removeActualDirRecursiveSync(actualDir: string, caseFullDir: string) {
-  spawnSync('rm', ['-rf', actualDir], {
-    stdio: 'inherit',
-    shell: true,
-    cwd: caseFullDir
-  });
+  ensureShellExec('rm', ['-rf', actualDir], { cwd: caseFullDir });
 }
 
 function runPrettierSync(files: string[], cwd: string) {
-  spawnSync('npx', ['prettier', '--write', ...files], {
-    stdio: 'inherit',
-    shell: true,
-    cwd,
-  });
+  ensureShellExec('npx', ['prettier', '--write', ...files], { cwd });
 }
 
 function diffActualAndExpectedSync(caseFullDir: string): string {
-  const res = spawnSync('diff', ['-wur', 'expected', 'actual'], {
-    stdio: 'pipe',
-    shell: true,
+  const res = ensureShellExec('diff', ['-wur', 'expected', 'actual'], {
     cwd: caseFullDir,
-    encoding: 'utf-8',
   });
 
   return colorizeDiffOutput(res.stdout);
 }
 
+function ensureShellExec(
+  shellCmd: string,
+  args: string[],
+  { cwd = process.cwd() }: { cwd?: string } = {},
+): { stdout: string; stderr: string } {
+  const res = spawnSync(shellCmd, args, {
+    stdio: 'pipe',
+    shell: true,
+    cwd,
+    encoding: 'utf-8',
+  });
+
+  if (res.status !== 0) {
+    throw new Error(`Shell command "${shellCmd}" failed with status: ${res.status}`);
+  }
+
+  return res;
+}
+
 function colorizeDiffOutput(output: string): string {
-  if (!output){
+  if (!output) {
     return output;
   }
 
-  return output.split('\n').map(line => {
-    if (/^Only/i.test(line)){
-      return chalk.red(line);
-    } else if (line[0] === '+'){
-      return chalk.yellow(line);
-    } else if (line[0] === '-'){
-      return chalk.red(line);
-    } else {
-      return line;
-    }
-  }).join('\n');
+  return output
+    .split('\n')
+    .map((line) => {
+      if (/^Only/i.test(line)) {
+        return chalk.red(line);
+      } else if (line[0] === '+') {
+        return chalk.yellow(line);
+      } else if (line[0] === '-') {
+        return chalk.red(line);
+      } else {
+        return line;
+      }
+    })
+    .join('\n');
 }
-

From a66ec828799445d24acdac3624b007bec74fecbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 12 Aug 2020 10:34:27 +0800
Subject: [PATCH 10/80] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Rax=20?=
 =?UTF-8?q?=E7=9A=84=E5=87=BA=E7=A0=81=E6=8F=92=E4=BB=B6=E6=9C=89=E5=BE=88?=
 =?UTF-8?q?=E5=A4=9A=E5=9C=B0=E6=96=B9=E4=B8=8E=20React=20=E4=B8=8D?=
 =?UTF-8?q?=E5=90=8C,=E8=BF=98=E6=98=AF=E5=8D=95=E7=8B=AC=E6=8B=8E?=
 =?UTF-8?q?=E5=87=BA=E6=9D=A5=E4=B8=BA=E5=A5=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/plugins/component/rax/commonDeps.ts   |  31 +++++
 .../src/plugins/component/rax/const.ts        |   9 ++
 .../plugins/component/rax/containerClass.ts   | 108 ++++++++++++++++++
 .../component/rax/containerDataSource.ts      |  52 +++++++++
 .../component/rax/containerInitState.ts       |  64 +++++++++++
 .../component/rax/containerInjectUtils.ts     |  40 +++++++
 .../component/rax/containerLifeCycle.ts       |  90 +++++++++++++++
 .../plugins/component/rax/containerMethod.ts  |  54 +++++++++
 .../src/plugins/component/rax/jsx.ts          |  50 ++++++++
 .../code-generator/src/solutions/rax-app.ts   |  18 +--
 10 files changed, 507 insertions(+), 9 deletions(-)
 create mode 100644 packages/code-generator/src/plugins/component/rax/commonDeps.ts
 create mode 100644 packages/code-generator/src/plugins/component/rax/const.ts
 create mode 100644 packages/code-generator/src/plugins/component/rax/containerClass.ts
 create mode 100644 packages/code-generator/src/plugins/component/rax/containerDataSource.ts
 create mode 100644 packages/code-generator/src/plugins/component/rax/containerInitState.ts
 create mode 100644 packages/code-generator/src/plugins/component/rax/containerInjectUtils.ts
 create mode 100644 packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts
 create mode 100644 packages/code-generator/src/plugins/component/rax/containerMethod.ts
 create mode 100644 packages/code-generator/src/plugins/component/rax/jsx.ts

diff --git a/packages/code-generator/src/plugins/component/rax/commonDeps.ts b/packages/code-generator/src/plugins/component/rax/commonDeps.ts
new file mode 100644
index 000000000..561bb0022
--- /dev/null
+++ b/packages/code-generator/src/plugins/component/rax/commonDeps.ts
@@ -0,0 +1,31 @@
+import { COMMON_CHUNK_NAME } from '../../../const/generator';
+
+import {
+  BuilderComponentPlugin,
+  BuilderComponentPluginFactory,
+  ChunkType,
+  FileType,
+  ICodeStruct,
+  IContainerInfo,
+} from '../../../types';
+
+const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
+  const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+    const next: ICodeStruct = {
+      ...pre,
+    };
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JSX,
+      name: COMMON_CHUNK_NAME.ExternalDepsImport,
+      content: `import { createElement, Component } from 'rax';`,
+      linkAfter: [],
+    });
+
+    return next;
+  };
+  return plugin;
+};
+
+export default pluginFactory;
diff --git a/packages/code-generator/src/plugins/component/rax/const.ts b/packages/code-generator/src/plugins/component/rax/const.ts
new file mode 100644
index 000000000..317b41fa8
--- /dev/null
+++ b/packages/code-generator/src/plugins/component/rax/const.ts
@@ -0,0 +1,9 @@
+export const RAX_CHUNK_NAME = {
+  ClassRenderStart: 'RaxComponentClassRenderStart',
+  ClassRenderPre: 'RaxComponentClassRenderPre',
+  ClassRenderEnd: 'RaxComponentClassRenderEnd',
+  ClassRenderJSX: 'RaxComponentClassRenderJSX',
+  ClassDidMountStart: 'RaxComponentClassDidMountStart',
+  ClassDidMountEnd: 'RaxComponentClassDidMountEnd',
+  ClassDidMountContent: 'RaxComponentClassDidMountContent',
+};
diff --git a/packages/code-generator/src/plugins/component/rax/containerClass.ts b/packages/code-generator/src/plugins/component/rax/containerClass.ts
new file mode 100644
index 000000000..2f6918a8e
--- /dev/null
+++ b/packages/code-generator/src/plugins/component/rax/containerClass.ts
@@ -0,0 +1,108 @@
+import changeCase from 'change-case';
+import { COMMON_CHUNK_NAME, CLASS_DEFINE_CHUNK_NAME } from '../../../const/generator';
+import { RAX_CHUNK_NAME } from './const';
+
+import {
+  BuilderComponentPlugin,
+  BuilderComponentPluginFactory,
+  ChunkType,
+  FileType,
+  ICodeStruct,
+  IContainerInfo,
+} from '../../../types';
+
+const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
+  const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+    const next: ICodeStruct = {
+      ...pre,
+    };
+
+    const ir = next.ir as IContainerInfo;
+
+    // 将模块名转换成 PascalCase 的格式，并添加特定后缀，防止命名冲突
+    const componentClassName = `${changeCase.pascalCase(ir.moduleName)}$$Page`;
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JSX,
+      name: CLASS_DEFINE_CHUNK_NAME.Start,
+      content: `class ${componentClassName} extends Component {`,
+      linkAfter: [
+        COMMON_CHUNK_NAME.ExternalDepsImport,
+        COMMON_CHUNK_NAME.InternalDepsImport,
+        COMMON_CHUNK_NAME.FileVarDefine,
+        COMMON_CHUNK_NAME.FileUtilDefine,
+      ],
+    });
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JSX,
+      name: CLASS_DEFINE_CHUNK_NAME.End,
+      content: `}`,
+      linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start, RAX_CHUNK_NAME.ClassRenderEnd],
+    });
+
+    // next.chunks.push({
+    //   type: ChunkType.STRING,
+    //   fileType: FileType.JSX,
+    //   name: CLASS_DEFINE_CHUNK_NAME.ConstructorStart,
+    //   content: 'constructor(props, context) { super(props); ',
+    //   linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
+    // });
+
+    // next.chunks.push({
+    //   type: ChunkType.STRING,
+    //   fileType: FileType.JSX,
+    //   name: CLASS_DEFINE_CHUNK_NAME.ConstructorEnd,
+    //   content: '}',
+    //   linkAfter: [
+    //     CLASS_DEFINE_CHUNK_NAME.ConstructorStart,
+    //     CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
+    //   ],
+    // });
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JSX,
+      name: RAX_CHUNK_NAME.ClassRenderStart,
+      content: 'render() {',
+      linkAfter: [
+        CLASS_DEFINE_CHUNK_NAME.Start,
+        CLASS_DEFINE_CHUNK_NAME.ConstructorEnd,
+        CLASS_DEFINE_CHUNK_NAME.InsMethod,
+      ],
+    });
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JSX,
+      name: RAX_CHUNK_NAME.ClassRenderEnd,
+      content: '}',
+      linkAfter: [
+        RAX_CHUNK_NAME.ClassRenderStart,
+        RAX_CHUNK_NAME.ClassRenderPre,
+        RAX_CHUNK_NAME.ClassRenderJSX,
+      ],
+    });
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JSX,
+      name: COMMON_CHUNK_NAME.FileExport,
+      content: `export default ${componentClassName};`,
+      linkAfter: [
+        COMMON_CHUNK_NAME.ExternalDepsImport,
+        COMMON_CHUNK_NAME.InternalDepsImport,
+        COMMON_CHUNK_NAME.FileVarDefine,
+        COMMON_CHUNK_NAME.FileUtilDefine,
+        CLASS_DEFINE_CHUNK_NAME.End,
+      ],
+    });
+
+    return next;
+  };
+  return plugin;
+};
+
+export default pluginFactory;
diff --git a/packages/code-generator/src/plugins/component/rax/containerDataSource.ts b/packages/code-generator/src/plugins/component/rax/containerDataSource.ts
new file mode 100644
index 000000000..72d7efd6b
--- /dev/null
+++ b/packages/code-generator/src/plugins/component/rax/containerDataSource.ts
@@ -0,0 +1,52 @@
+import { CLASS_DEFINE_CHUNK_NAME } from '../../../const/generator';
+
+import { generateCompositeType } from '../../../utils/compositeType';
+
+import {
+  BuilderComponentPlugin,
+  BuilderComponentPluginFactory,
+  ChunkType,
+  FileType,
+  ICodeStruct,
+  IContainerInfo,
+} from '../../../types';
+
+type PluginConfig = {
+  fileType: string;
+}
+
+const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
+  const cfg: PluginConfig = {
+    fileType: FileType.JSX,
+    ...config,
+  };
+
+  const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+    const next: ICodeStruct = {
+      ...pre,
+    };
+
+    const ir = next.ir as IContainerInfo;
+
+    if (ir.state) {
+      const state = ir.state;
+      const fields = Object.keys(state).map<string>(stateName => {
+        const [isString, value] = generateCompositeType(state[stateName]);
+        return `${stateName}: ${isString ? `'${value}'` : value},`;
+      });
+
+      next.chunks.push({
+        type: ChunkType.STRING,
+        fileType: cfg.fileType,
+        name: CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
+        content: `this.state = { ${fields.join('')} };`,
+        linkAfter: [CLASS_DEFINE_CHUNK_NAME.ConstructorStart],
+      });
+    }
+
+    return next;
+  };
+  return plugin;
+};
+
+export default pluginFactory;
diff --git a/packages/code-generator/src/plugins/component/rax/containerInitState.ts b/packages/code-generator/src/plugins/component/rax/containerInitState.ts
new file mode 100644
index 000000000..50984c961
--- /dev/null
+++ b/packages/code-generator/src/plugins/component/rax/containerInitState.ts
@@ -0,0 +1,64 @@
+import { CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
+
+import { generateCompositeType } from '../../../utils/compositeType';
+
+import {
+  BuilderComponentPlugin,
+  BuilderComponentPluginFactory,
+  ChunkType,
+  FileType,
+  ICodeStruct,
+  IContainerInfo,
+} from '../../../types';
+
+type PluginConfig = {
+  fileType: string;
+  implementType: 'inConstructor' | 'insMember' | 'hooks';
+}
+
+const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
+  const cfg: PluginConfig = {
+    fileType: FileType.JSX,
+    implementType: 'inConstructor',
+    ...config,
+  };
+
+  const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+    const next: ICodeStruct = {
+      ...pre,
+    };
+
+    const ir = next.ir as IContainerInfo;
+
+    if (ir.state) {
+      const state = ir.state;
+      const fields = Object.keys(state).map<string>(stateName => {
+        const [isString, value] = generateCompositeType(state[stateName]);
+        return `${stateName}: ${isString ? `'${value}'` : value},`;
+      });
+
+      if (cfg.implementType === 'inConstructor') {
+        next.chunks.push({
+          type: ChunkType.STRING,
+          fileType: cfg.fileType,
+          name: CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
+          content: `this.state = { ${fields.join('')} };`,
+          linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.ConstructorContent]],
+        });
+      } else if (cfg.implementType === 'insMember') {
+        next.chunks.push({
+          type: ChunkType.STRING,
+          fileType: cfg.fileType,
+          name: CLASS_DEFINE_CHUNK_NAME.InsVar,
+          content: `state = { ${fields.join('')} };`,
+          linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsVar]],
+        });
+      }
+    }
+
+    return next;
+  };
+  return plugin;
+};
+
+export default pluginFactory;
diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectUtils.ts b/packages/code-generator/src/plugins/component/rax/containerInjectUtils.ts
new file mode 100644
index 000000000..b72eb8668
--- /dev/null
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectUtils.ts
@@ -0,0 +1,40 @@
+import { CLASS_DEFINE_CHUNK_NAME } from '../../../const/generator';
+
+import {
+  BuilderComponentPlugin,
+  BuilderComponentPluginFactory,
+  ChunkType,
+  FileType,
+  ICodeStruct,
+} from '../../../types';
+
+type PluginConfig = {
+  fileType: string;
+}
+
+const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
+  const cfg: PluginConfig = {
+    fileType: FileType.JSX,
+    ...config,
+  };
+
+  const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+    const next: ICodeStruct = {
+      ...pre,
+    };
+
+    // TODO: utils 怎么注入？
+    // next.chunks.push({
+    //   type: ChunkType.STRING,
+    //   fileType: cfg.fileType,
+    //   name: CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
+    //   content: `this.utils = utils;`,
+    //   linkAfter: [CLASS_DEFINE_CHUNK_NAME.ConstructorStart],
+    // });
+
+    return next;
+  };
+  return plugin;
+};
+
+export default pluginFactory;
diff --git a/packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts b/packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts
new file mode 100644
index 000000000..65d411242
--- /dev/null
+++ b/packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts
@@ -0,0 +1,90 @@
+import { CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
+import { RAX_CHUNK_NAME } from './const';
+
+import {
+  getFuncExprBody,
+  transformFuncExpr2MethodMember,
+} from '../../../utils/jsExpression';
+
+import {
+  BuilderComponentPlugin,
+  BuilderComponentPluginFactory,
+  ChunkType,
+  CodeGeneratorError,
+  FileType,
+  ICodeChunk,
+  ICodeStruct,
+  IContainerInfo,
+  IJSExpression,
+} from '../../../types';
+
+type PluginConfig = {
+  fileType: string;
+  exportNameMapping: Record<string, string>;
+  normalizeNameMapping: Record<string, string>;
+}
+
+const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
+  const cfg: PluginConfig = {
+    fileType: FileType.JSX,
+    exportNameMapping: {},
+    normalizeNameMapping: {},
+    ...config,
+  };
+
+  const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+    const next: ICodeStruct = {
+      ...pre,
+    };
+
+    const ir = next.ir as IContainerInfo;
+
+    if (ir.lifeCycles) {
+      const lifeCycles = ir.lifeCycles;
+      const chunks = Object.keys(lifeCycles).map<ICodeChunk>(lifeCycleName => {
+        const normalizeName = cfg.normalizeNameMapping[lifeCycleName] || lifeCycleName;
+        const exportName = cfg.exportNameMapping[lifeCycleName] || lifeCycleName;
+        if (normalizeName === 'constructor') {
+          return {
+            type: ChunkType.STRING,
+            fileType: cfg.fileType,
+            name: CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
+            content: getFuncExprBody(
+              (lifeCycles[lifeCycleName] as IJSExpression).value,
+            ),
+            linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.ConstructorStart]],
+          };
+        }
+        if (normalizeName === 'render') {
+          return {
+            type: ChunkType.STRING,
+            fileType: cfg.fileType,
+            name: RAX_CHUNK_NAME.ClassRenderPre,
+            content: getFuncExprBody(
+              (lifeCycles[lifeCycleName] as IJSExpression).value,
+            ),
+            linkAfter: [RAX_CHUNK_NAME.ClassRenderStart],
+          };
+        }
+
+        return {
+          type: ChunkType.STRING,
+          fileType: cfg.fileType,
+          name: CLASS_DEFINE_CHUNK_NAME.InsMethod,
+          content: transformFuncExpr2MethodMember(
+            exportName,
+            (lifeCycles[lifeCycleName] as IJSExpression).value,
+          ),
+          linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsMethod]],
+        };
+      });
+
+      next.chunks.push.apply(next.chunks, chunks);
+    }
+
+    return next;
+  };
+  return plugin;
+};
+
+export default pluginFactory;
diff --git a/packages/code-generator/src/plugins/component/rax/containerMethod.ts b/packages/code-generator/src/plugins/component/rax/containerMethod.ts
new file mode 100644
index 000000000..9bba467da
--- /dev/null
+++ b/packages/code-generator/src/plugins/component/rax/containerMethod.ts
@@ -0,0 +1,54 @@
+import { CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
+
+import { transformFuncExpr2MethodMember } from '../../../utils/jsExpression';
+
+import {
+  BuilderComponentPlugin,
+  BuilderComponentPluginFactory,
+  ChunkType,
+  FileType,
+  ICodeChunk,
+  ICodeStruct,
+  IContainerInfo,
+  IJSExpression,
+} from '../../../types';
+
+type PluginConfig = {
+  fileType: string;
+}
+
+const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
+  const cfg: PluginConfig = {
+    fileType: FileType.JSX,
+    ...config,
+  };
+
+  const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+    const next: ICodeStruct = {
+      ...pre,
+    };
+
+    const ir = next.ir as IContainerInfo;
+
+    if (ir.methods) {
+      const methods = ir.methods;
+      const chunks = Object.keys(methods).map<ICodeChunk>(methodName => ({
+        type: ChunkType.STRING,
+        fileType: cfg.fileType,
+        name: CLASS_DEFINE_CHUNK_NAME.InsMethod,
+        content: transformFuncExpr2MethodMember(
+          methodName,
+          (methods[methodName] as IJSExpression).value,
+        ),
+        linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsMethod]],
+      }));
+
+      next.chunks.push.apply(next.chunks, chunks);
+    }
+
+    return next;
+  };
+  return plugin;
+};
+
+export default pluginFactory;
diff --git a/packages/code-generator/src/plugins/component/rax/jsx.ts b/packages/code-generator/src/plugins/component/rax/jsx.ts
new file mode 100644
index 000000000..f41aa9de1
--- /dev/null
+++ b/packages/code-generator/src/plugins/component/rax/jsx.ts
@@ -0,0 +1,50 @@
+import {
+  BuilderComponentPlugin,
+  BuilderComponentPluginFactory,
+  ChunkType,
+  FileType,
+  ICodeStruct,
+  IContainerInfo,
+} from '../../../types';
+
+import { RAX_CHUNK_NAME } from './const';
+
+import { createReactNodeGenerator } from '../../../utils/nodeToJSX';
+
+type PluginConfig = {
+  fileType: string;
+}
+
+const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
+  const cfg: PluginConfig = {
+    fileType: FileType.JSX,
+    ...config,
+  };
+
+  const generator = createReactNodeGenerator();
+
+  const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+    const next: ICodeStruct = {
+      ...pre,
+    };
+
+    const ir = next.ir as IContainerInfo;
+    const jsxContent = generator(ir);
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: cfg.fileType,
+      name: RAX_CHUNK_NAME.ClassRenderJSX,
+      content: `return ${jsxContent};`,
+      linkAfter: [
+        RAX_CHUNK_NAME.ClassRenderStart,
+        RAX_CHUNK_NAME.ClassRenderPre,
+      ],
+    });
+
+    return next;
+  };
+  return plugin;
+};
+
+export default pluginFactory;
diff --git a/packages/code-generator/src/solutions/rax-app.ts b/packages/code-generator/src/solutions/rax-app.ts
index e0e89b8c5..be7c55c31 100644
--- a/packages/code-generator/src/solutions/rax-app.ts
+++ b/packages/code-generator/src/solutions/rax-app.ts
@@ -3,13 +3,13 @@ import { IProjectBuilder } from '../types';
 import { createProjectBuilder } from '../generator/ProjectBuilder';
 
 import esModule from '../plugins/common/esmodule';
-import containerClass from '../plugins/component/react/containerClass';
-import containerInitState from '../plugins/component/react/containerInitState';
-import containerInjectUtils from '../plugins/component/react/containerInjectUtils';
-import containerLifeCycle from '../plugins/component/react/containerLifeCycle';
-import containerMethod from '../plugins/component/react/containerMethod';
-import jsx from '../plugins/component/react/jsx';
-import reactCommonDeps from '../plugins/component/react/reactCommonDeps';
+import containerClass from '../plugins/component/rax/containerClass';
+import containerInitState from '../plugins/component/rax/containerInitState';
+import containerInjectUtils from '../plugins/component/rax/containerInjectUtils';
+import containerLifeCycle from '../plugins/component/rax/containerLifeCycle';
+import containerMethod from '../plugins/component/rax/containerMethod';
+import jsx from '../plugins/component/rax/jsx';
+import commonDeps from '../plugins/component/rax/commonDeps';
 import css from '../plugins/component/style/css';
 import constants from '../plugins/project/constants';
 import i18n from '../plugins/project/i18n';
@@ -24,7 +24,7 @@ export default function createIceJsProjectBuilder(): IProjectBuilder {
     template: raxApp.template,
     plugins: {
       components: [
-        reactCommonDeps(),
+        commonDeps(),
         esModule({
           fileType: 'jsx',
         }),
@@ -37,7 +37,7 @@ export default function createIceJsProjectBuilder(): IProjectBuilder {
         css(),
       ],
       pages: [
-        reactCommonDeps(),
+        commonDeps(),
         esModule({
           fileType: 'jsx',
         }),

From c46af6376f4dcdc32faf9ca25f2b8f45ef44fbe5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 12 Aug 2020 10:54:35 +0800
Subject: [PATCH 11/80] =?UTF-8?q?test:=20=F0=9F=92=8D=20=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B=E4=B8=AD=E5=AF=B9=E5=AE=9E?=
 =?UTF-8?q?=E9=99=85=E5=92=8C=E6=9C=9F=E6=9C=9B=E7=9A=84=20diff=20?=
 =?UTF-8?q?=E7=9A=84=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/test/rax-app.test.ts | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/code-generator/test/rax-app.test.ts b/packages/code-generator/test/rax-app.test.ts
index 3d12eb220..115f73fbc 100644
--- a/packages/code-generator/test/rax-app.test.ts
+++ b/packages/code-generator/test/rax-app.test.ts
@@ -31,11 +31,9 @@ function defineTest(caseDirName: string) {
 
       runPrettierSync(actualFiles, actualDir);
 
-      const diffRes = diffActualAndExpectedSync(caseFullDir);
-      if (diffRes) {
-        t.fail(diffRes);
-      } else {
-        t.pass();
+      const differences = diffActualAndExpectedSync(caseFullDir);
+      if (differences) {
+        t.fail(differences);
       }
     } catch (e) {
       throw e; // just for debugger
@@ -64,8 +62,11 @@ function runPrettierSync(files: string[], cwd: string) {
 }
 
 function diffActualAndExpectedSync(caseFullDir: string): string {
-  const res = ensureShellExec('diff', ['-wur', 'expected', 'actual'], {
+  const res = spawnSync('diff', ['-wur', 'expected', 'actual'], {
     cwd: caseFullDir,
+    stdio: 'pipe',
+    shell: true,
+    encoding: 'utf-8',
   });
 
   return colorizeDiffOutput(res.stdout);
@@ -84,7 +85,7 @@ function ensureShellExec(
   });
 
   if (res.status !== 0) {
-    throw new Error(`Shell command "${shellCmd}" failed with status: ${res.status}`);
+    throw new Error(`Shell command "${shellCmd} ${args.slice(0,2).join(' ')}..." failed with status: ${res.status} (Full command: "${shellCmd} ${args.join(' ')}" )`);
   }
 
   return res;

From 9f621101b388ad3664c4c3dbd79a4ce9aa991de5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 12 Aug 2020 11:39:15 +0800
Subject: [PATCH 12/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=20Rax=20=E5=87=BA=E7=A0=81,=20=E8=B7=91=E9=80=9A=E7=AC=AC?=
 =?UTF-8?q?=E4=B8=80=E4=B8=AA=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B?=
 =?UTF-8?q?=F0=9F=91=8F=F0=9F=91=8F=F0=9F=91=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/.eslintignore         |  1 +
 packages/code-generator/package.json          |  6 ++
 .../code-generator/src/const/generator.ts     | 11 +++
 .../src/plugins/component/rax/const.ts        |  8 +-
 .../plugins/component/rax/containerClass.ts   | 40 +++++++--
 .../component/rax/containerInjectContext.ts   | 86 +++++++++++++++++++
 .../rax/containerInjectDataSourceEngine.ts    | 78 +++++++++++++++++
 .../component/rax/containerInjectUtils.ts     | 29 +++++--
 .../plugins/component/react/containerClass.ts |  5 +-
 .../code-generator/src/solutions/rax-app.ts   | 14 ++-
 .../demo-project/src/pages/Home/index.jsx     | 54 ++++++++++++
 11 files changed, 307 insertions(+), 25 deletions(-)
 create mode 100644 packages/code-generator/.eslintignore
 create mode 100644 packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
 create mode 100644 packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts

diff --git a/packages/code-generator/.eslintignore b/packages/code-generator/.eslintignore
new file mode 100644
index 000000000..bcfd4b921
--- /dev/null
+++ b/packages/code-generator/.eslintignore
@@ -0,0 +1 @@
+test-cases/
diff --git a/packages/code-generator/package.json b/packages/code-generator/package.json
index 5da8251f0..dcccc42e1 100644
--- a/packages/code-generator/package.json
+++ b/packages/code-generator/package.json
@@ -8,6 +8,7 @@
     "demo"
   ],
   "scripts": {
+    "start": "ava --watch",
     "build": "rimraf lib && tsc",
     "demo": "node ./demo/demo.js",
     "test": "ava",
@@ -45,6 +46,11 @@
     ],
     "require": [
       "ts-node/register/transpile-only"
+    ],
+    "sources": [
+      "src/**/*",
+      "test/**/*",
+      "test-cases/**/expected/**/*"
     ]
   },
   "publishConfig": {
diff --git a/packages/code-generator/src/const/generator.ts b/packages/code-generator/src/const/generator.ts
index 9028b9226..6f471e2a4 100644
--- a/packages/code-generator/src/const/generator.ts
+++ b/packages/code-generator/src/const/generator.ts
@@ -21,6 +21,7 @@ export const CLASS_DEFINE_CHUNK_NAME = {
   InsVar: 'CommonClassDefineInsVar',
   InsVarMethod: 'CommonClassDefineInsVarMethod',
   InsMethod: 'CommonClassDefineInsMethod',
+  InsPrivateMethod: 'CommonClassDefineInsPrivateMethod',
   End: 'CommonClassDefineEnd',
 };
 
@@ -82,6 +83,15 @@ export const DEFAULT_LINK_AFTER = {
     CLASS_DEFINE_CHUNK_NAME.InsVarMethod,
     CLASS_DEFINE_CHUNK_NAME.ConstructorEnd,
   ],
+  [CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod]: [
+    CLASS_DEFINE_CHUNK_NAME.Start,
+    CLASS_DEFINE_CHUNK_NAME.StaticVar,
+    CLASS_DEFINE_CHUNK_NAME.StaticMethod,
+    CLASS_DEFINE_CHUNK_NAME.InsVar,
+    CLASS_DEFINE_CHUNK_NAME.InsVarMethod,
+    CLASS_DEFINE_CHUNK_NAME.InsMethod,
+    CLASS_DEFINE_CHUNK_NAME.ConstructorEnd,
+  ],
   [CLASS_DEFINE_CHUNK_NAME.End]: [
     CLASS_DEFINE_CHUNK_NAME.Start,
     CLASS_DEFINE_CHUNK_NAME.StaticVar,
@@ -89,6 +99,7 @@ export const DEFAULT_LINK_AFTER = {
     CLASS_DEFINE_CHUNK_NAME.InsVar,
     CLASS_DEFINE_CHUNK_NAME.InsVarMethod,
     CLASS_DEFINE_CHUNK_NAME.InsMethod,
+    CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod,
     CLASS_DEFINE_CHUNK_NAME.ConstructorEnd,
   ],
   [COMMON_CHUNK_NAME.FileMainContent]: [
diff --git a/packages/code-generator/src/plugins/component/rax/const.ts b/packages/code-generator/src/plugins/component/rax/const.ts
index 317b41fa8..6a13c92a6 100644
--- a/packages/code-generator/src/plugins/component/rax/const.ts
+++ b/packages/code-generator/src/plugins/component/rax/const.ts
@@ -1,9 +1,9 @@
 export const RAX_CHUNK_NAME = {
+  ClassDidMountStart: 'RaxComponentClassDidMountStart',
+  ClassDidMountContent: 'RaxComponentClassDidMountContent',
+  ClassDidMountEnd: 'RaxComponentClassDidMountEnd',
   ClassRenderStart: 'RaxComponentClassRenderStart',
   ClassRenderPre: 'RaxComponentClassRenderPre',
-  ClassRenderEnd: 'RaxComponentClassRenderEnd',
   ClassRenderJSX: 'RaxComponentClassRenderJSX',
-  ClassDidMountStart: 'RaxComponentClassDidMountStart',
-  ClassDidMountEnd: 'RaxComponentClassDidMountEnd',
-  ClassDidMountContent: 'RaxComponentClassDidMountContent',
+  ClassRenderEnd: 'RaxComponentClassRenderEnd',
 };
diff --git a/packages/code-generator/src/plugins/component/rax/containerClass.ts b/packages/code-generator/src/plugins/component/rax/containerClass.ts
index 2f6918a8e..a38d920d4 100644
--- a/packages/code-generator/src/plugins/component/rax/containerClass.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerClass.ts
@@ -35,12 +35,17 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       ],
     });
 
+
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: FileType.JSX,
       name: CLASS_DEFINE_CHUNK_NAME.End,
       content: `}`,
-      linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start, RAX_CHUNK_NAME.ClassRenderEnd],
+      linkAfter: [
+        CLASS_DEFINE_CHUNK_NAME.Start,
+        RAX_CHUNK_NAME.ClassRenderEnd,
+        CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod,
+      ],
     });
 
     // next.chunks.push({
@@ -62,15 +67,36 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
     //   ],
     // });
 
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JSX,
+      name: RAX_CHUNK_NAME.ClassDidMountStart,
+      content: `componentDidMount() {`,
+      linkAfter: [
+        CLASS_DEFINE_CHUNK_NAME.Start,
+        CLASS_DEFINE_CHUNK_NAME.InsVar,
+        CLASS_DEFINE_CHUNK_NAME.InsMethod,
+      ],
+    });
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JSX,
+      name: RAX_CHUNK_NAME.ClassDidMountEnd,
+      content: `}`,
+      linkAfter: [
+        RAX_CHUNK_NAME.ClassDidMountStart,
+        RAX_CHUNK_NAME.ClassDidMountContent,
+      ],
+    });
+
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: FileType.JSX,
       name: RAX_CHUNK_NAME.ClassRenderStart,
       content: 'render() {',
       linkAfter: [
-        CLASS_DEFINE_CHUNK_NAME.Start,
-        CLASS_DEFINE_CHUNK_NAME.ConstructorEnd,
-        CLASS_DEFINE_CHUNK_NAME.InsMethod,
+        RAX_CHUNK_NAME.ClassDidMountEnd,
       ],
     });
 
@@ -79,11 +105,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       fileType: FileType.JSX,
       name: RAX_CHUNK_NAME.ClassRenderEnd,
       content: '}',
-      linkAfter: [
-        RAX_CHUNK_NAME.ClassRenderStart,
-        RAX_CHUNK_NAME.ClassRenderPre,
-        RAX_CHUNK_NAME.ClassRenderJSX,
-      ],
+      linkAfter: [RAX_CHUNK_NAME.ClassRenderStart, RAX_CHUNK_NAME.ClassRenderPre, RAX_CHUNK_NAME.ClassRenderJSX],
     });
 
     next.chunks.push({
diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
new file mode 100644
index 000000000..fe5138bf6
--- /dev/null
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
@@ -0,0 +1,86 @@
+import { CLASS_DEFINE_CHUNK_NAME } from '../../../const/generator';
+
+import {
+  BuilderComponentPlugin,
+  BuilderComponentPluginFactory,
+  ChunkType,
+  FileType,
+  ICodeStruct,
+} from '../../../types';
+import { RAX_CHUNK_NAME } from './const';
+
+type PluginConfig = {
+  fileType: string;
+}
+
+const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
+  const cfg: PluginConfig = {
+    fileType: FileType.JSX,
+    ...config,
+  };
+
+  const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+    const next: ICodeStruct = {
+      ...pre,
+    };
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: cfg.fileType,
+      name: CLASS_DEFINE_CHUNK_NAME.InsVar,
+      content: `
+        _context = this._createContext();
+      `,
+      linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
+    });
+
+    // TODO: 补充数据源的定义
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: cfg.fileType,
+      name: CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod,
+      content: `
+        _createContext() {
+          const self = this;
+
+          const context = {
+            get state() {
+              return self.state;
+            },
+            setState(newState) {
+              self.setState(newState);
+            },
+            get dataSourceMap() {
+              return self._dataSourceEngine?.dataSourceMap || {};
+            },
+            async reloadDataSource() {
+              self._dataSourceEngine?.reloadDataSource();
+            },
+            get utils() {
+              return self._utils;
+            },
+            get page() {
+              return context;
+            },
+            get component() {
+              return context;
+            },
+            get props() {
+              return self.props;
+            },
+          };
+
+          return context;
+        }
+      `,
+      linkAfter: [
+        RAX_CHUNK_NAME.ClassRenderEnd
+      ],
+    });
+
+    return next;
+  };
+  return plugin;
+};
+
+export default pluginFactory;
diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
new file mode 100644
index 000000000..e1810fde2
--- /dev/null
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -0,0 +1,78 @@
+import { CLASS_DEFINE_CHUNK_NAME, COMMON_CHUNK_NAME } from '../../../const/generator';
+
+import {
+  BuilderComponentPlugin,
+  BuilderComponentPluginFactory,
+  ChunkType,
+  FileType,
+  ICodeStruct,
+} from '../../../types';
+import { RAX_CHUNK_NAME } from './const';
+
+type PluginConfig = {
+  fileType: string;
+}
+
+const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
+  const cfg: PluginConfig = {
+    fileType: FileType.JSX,
+    ...config,
+  };
+
+  const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+    const next: ICodeStruct = {
+      ...pre,
+    };
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JSX,
+      name: COMMON_CHUNK_NAME.ExternalDepsImport,
+      content: `
+        import { createDataSourceEngine } from '@ali/lowcode-data-source-engine';
+      `,
+      linkAfter: [],
+    });
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: cfg.fileType,
+      name: CLASS_DEFINE_CHUNK_NAME.InsVar,
+      content: `
+      _dataSourceList = this._defineDataSourceList();
+      _dataSourceEngine = createDataSourceEngine(this._dataSourceList, this._context);`,
+      linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
+    });
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: cfg.fileType,
+      name: RAX_CHUNK_NAME.ClassDidMountContent,
+      content: `
+        this._dataSourceEngine.reloadDataSource();
+      `,
+      linkAfter: [
+        RAX_CHUNK_NAME.ClassDidMountStart,
+      ],
+    });
+
+    // TODO: 补充数据源的定义
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: cfg.fileType,
+      name: CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod,
+      content: `
+        _defineDataSourceList() {
+          return [];
+        }`,
+      linkAfter: [
+        RAX_CHUNK_NAME.ClassRenderEnd
+      ],
+    });
+
+    return next;
+  };
+  return plugin;
+};
+
+export default pluginFactory;
diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectUtils.ts b/packages/code-generator/src/plugins/component/rax/containerInjectUtils.ts
index b72eb8668..aa9763c23 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectUtils.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectUtils.ts
@@ -7,6 +7,7 @@ import {
   FileType,
   ICodeStruct,
 } from '../../../types';
+import { RAX_CHUNK_NAME } from './const';
 
 type PluginConfig = {
   fileType: string;
@@ -24,13 +25,27 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
     };
 
     // TODO: utils 怎么注入？
-    // next.chunks.push({
-    //   type: ChunkType.STRING,
-    //   fileType: cfg.fileType,
-    //   name: CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
-    //   content: `this.utils = utils;`,
-    //   linkAfter: [CLASS_DEFINE_CHUNK_NAME.ConstructorStart],
-    // });
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: cfg.fileType,
+      name: CLASS_DEFINE_CHUNK_NAME.InsVar,
+      content: `_utils = this._defineUtils();`,
+      linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
+    });
+
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: cfg.fileType,
+      name: CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod,
+      content: `
+        _defineUtils() {
+          return {};
+        }`,
+      linkAfter: [
+        RAX_CHUNK_NAME.ClassRenderEnd
+      ],
+    });
 
     return next;
   };
diff --git a/packages/code-generator/src/plugins/component/react/containerClass.ts b/packages/code-generator/src/plugins/component/react/containerClass.ts
index 5dae325c7..f0e591583 100644
--- a/packages/code-generator/src/plugins/component/react/containerClass.ts
+++ b/packages/code-generator/src/plugins/component/react/containerClass.ts
@@ -40,7 +40,10 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       fileType: FileType.JSX,
       name: CLASS_DEFINE_CHUNK_NAME.End,
       content: `}`,
-      linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start, REACT_CHUNK_NAME.ClassRenderEnd],
+      linkAfter: [
+        CLASS_DEFINE_CHUNK_NAME.Start,
+        REACT_CHUNK_NAME.ClassRenderEnd,
+      ],
     });
 
     next.chunks.push({
diff --git a/packages/code-generator/src/solutions/rax-app.ts b/packages/code-generator/src/solutions/rax-app.ts
index be7c55c31..0a1a55154 100644
--- a/packages/code-generator/src/solutions/rax-app.ts
+++ b/packages/code-generator/src/solutions/rax-app.ts
@@ -4,10 +4,12 @@ import { createProjectBuilder } from '../generator/ProjectBuilder';
 
 import esModule from '../plugins/common/esmodule';
 import containerClass from '../plugins/component/rax/containerClass';
-import containerInitState from '../plugins/component/rax/containerInitState';
-import containerInjectUtils from '../plugins/component/rax/containerInjectUtils';
 import containerLifeCycle from '../plugins/component/rax/containerLifeCycle';
 import containerMethod from '../plugins/component/rax/containerMethod';
+import containerInitState from '../plugins/component/rax/containerInitState';
+import containerInjectContext from '../plugins/component/rax/containerInjectContext';
+import containerInjectDataSourceEngine from '../plugins/component/rax/containerInjectDataSourceEngine';
+import containerInjectUtils from '../plugins/component/rax/containerInjectUtils';
 import jsx from '../plugins/component/rax/jsx';
 import commonDeps from '../plugins/component/rax/commonDeps';
 import css from '../plugins/component/style/css';
@@ -42,8 +44,10 @@ export default function createIceJsProjectBuilder(): IProjectBuilder {
           fileType: 'jsx',
         }),
         containerClass(),
-        containerInjectUtils(),
         containerInitState(),
+        containerInjectContext(),
+        containerInjectDataSourceEngine(),
+        containerInjectUtils(),
         containerLifeCycle(),
         containerMethod(),
         jsx(),
@@ -58,6 +62,8 @@ export default function createIceJsProjectBuilder(): IProjectBuilder {
       htmlEntry: [raxApp.plugins.entryDocument()],
       packageJSON: [raxApp.plugins.packageJSON()],
     },
-    postProcessors: [prettier()],
+    postProcessors: [
+      // prettier() // 暂且禁用 prettier
+    ],
   });
 }
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
index acb73cdd4..cfecd9575 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
@@ -4,9 +4,22 @@ import Page from 'rax-view';
 
 import Text from 'rax-text';
 
+import { createDataSourceEngine } from '@ali/lowcode-data-source-engine';
+
 import './index.css';
 
 class Home$$Page extends Component {
+  _context = this._createContext();
+
+  _dataSourceList = this._defineDataSourceList();
+  _dataSourceEngine = createDataSourceEngine(this._dataSourceList, this._context);
+
+  _utils = this._defineUtils();
+
+  componentDidMount() {
+    this._dataSourceEngine.reloadDataSource();
+  }
+
   render() {
     return (
       <Page>
@@ -14,6 +27,47 @@ class Home$$Page extends Component {
       </Page>
     );
   }
+
+  _createContext() {
+    const self = this;
+
+    const context = {
+      get state() {
+        return self.state;
+      },
+      setState(newState) {
+        self.setState(newState);
+      },
+      get dataSourceMap() {
+        return self._dataSourceEngine?.dataSourceMap || {};
+      },
+      async reloadDataSource() {
+        self._dataSourceEngine?.reloadDataSource();
+      },
+      get utils() {
+        return self._utils;
+      },
+      get page() {
+        return context;
+      },
+      get component() {
+        return context;
+      },
+      get props() {
+        return self.props;
+      },
+    };
+
+    return context;
+  }
+
+  _defineDataSourceList() {
+    return [];
+  }
+
+  _defineUtils() {
+    return {};
+  }
 }
 
 export default Home$$Page;

From a3f0c3dcef67cfc8f2dd73ffdaf9b311e75f0852 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 12 Aug 2020 12:14:59 +0800
Subject: [PATCH 13/80] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20data-source=20?=
 =?UTF-8?q?->=20datasource=20following=20Henry's=20advice?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plugins/component/rax/containerInjectDataSourceEngine.ts    | 2 +-
 .../demo1/expected/demo-project/src/pages/Home/index.jsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
index e1810fde2..0ee79e6c4 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -29,7 +29,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       fileType: FileType.JSX,
       name: COMMON_CHUNK_NAME.ExternalDepsImport,
       content: `
-        import { createDataSourceEngine } from '@ali/lowcode-data-source-engine';
+        import { createDataSourceEngine } from '@ali/lowcode-datasource-engine';
       `,
       linkAfter: [],
     });
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
index cfecd9575..bee307cf1 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
@@ -4,7 +4,7 @@ import Page from 'rax-view';
 
 import Text from 'rax-text';
 
-import { createDataSourceEngine } from '@ali/lowcode-data-source-engine';
+import { createDataSourceEngine } from '@ali/lowcode-datasource-engine';
 
 import './index.css';
 

From 9e325250df6ffcd32d023390cb494e639b8eabc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 12 Aug 2020 14:03:08 +0800
Subject: [PATCH 14/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E8=A1=A5=E5=85=85?=
 =?UTF-8?q?=E8=A7=84=E8=8C=83=E4=B8=AD=E5=AE=9A=E4=B9=89=E7=9A=84=20JSFunc?=
 =?UTF-8?q?tion=20=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/types/src/value-type.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/types/src/value-type.ts b/packages/types/src/value-type.ts
index 34f0c38c5..b5c06c037 100644
--- a/packages/types/src/value-type.ts
+++ b/packages/types/src/value-type.ts
@@ -17,6 +17,22 @@ export interface JSExpression {
   [key: string]: any;
 }
 
+/**
+ * 事件函数类型
+ * @see https://yuque.antfin-inc.com/mo/spec/spec-low-code-building-schema#feHTW
+ */
+export interface JSFunction {
+  type: 'JSFunction';
+
+  /**
+   * 函数定义，或直接函数表达式
+   */
+  value: string;
+
+  /** 源码 */
+  compiled?: string;
+}
+
 export interface JSSlot {
   name?: string;
   type: 'JSSlot';
@@ -50,6 +66,10 @@ export function isJSExpression(data: any): data is JSExpression {
   return data && data.type === 'JSExpression';
 }
 
+export function isJSFunction(x: any): x is JSFunction {
+  return typeof x === 'object' && x && x.type === 'JSFunction';
+}
+
 export function isJSSlot(data: any): data is JSSlot {
   return data && data.type === 'JSSlot';
 }

From 8b1d0c76f39b99f83662bf1899d147fde3a3d060 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 12 Aug 2020 14:16:54 +0800
Subject: [PATCH 15/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E6=8C=89=E7=85=A7?=
 =?UTF-8?q?=E4=B8=AD=E5=90=8E=E5=8F=B0=E6=90=AD=E5=BB=BA=E5=8D=8F=E8=AE=AE?=
 =?UTF-8?q?=E8=A7=84=E8=8C=83=E6=96=87=E6=A1=A3=E8=A1=A5=E5=85=85=20JSFunc?=
 =?UTF-8?q?tion=20=E7=9A=84=E5=AE=9A=E4=B9=89=E5=92=8C=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=BA=90=E5=AE=9A=E4=B9=89=E4=B8=AD=E4=B8=80=E4=BA=9B=E5=AD=97?=
 =?UTF-8?q?=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/types/src/data-source.ts | 24 ++++++++++++++++++++----
 packages/types/src/value-type.ts  |  2 +-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/types/src/data-source.ts b/packages/types/src/data-source.ts
index 79bca2e91..1bed43406 100644
--- a/packages/types/src/data-source.ts
+++ b/packages/types/src/data-source.ts
@@ -1,16 +1,32 @@
-import { CompositeValue } from './value-type';
+import { CompositeValue, JSExpression, JSFunction, JSONObject } from './value-type';
 
+/**
+ * 数据源对象
+ * @see https://yuque.antfin-inc.com/mo/spec/spec-low-code-building-schema#XMeF5
+ */
 export interface DataSourceConfig {
   id: string;
-  isInit: boolean;
+  isInit: boolean | JSExpression;
   type: string;
+  requestHandler?: JSFunction;
+  dataHandler?: JSFunction;
   options: {
-    uri: string;
+    uri: string | JSExpression;
+    params?: JSONObject | JSExpression;
+    method?: string | JSExpression;
+    isCors?: boolean | JSExpression;
+    timeout?: number | JSExpression;
+    headers?: JSONObject | JSExpression;
     [option: string]: CompositeValue;
   };
   [otherKey: string]: CompositeValue;
 }
 
+/**
+ * 数据源对象
+ * @see https://yuque.antfin-inc.com/mo/spec/spec-low-code-building-schema#XMeF5
+ */
 export interface DataSource {
-  items: DataSourceConfig[];
+  list: DataSourceConfig[];
+  dataHandler?: JSFunction;
 }
diff --git a/packages/types/src/value-type.ts b/packages/types/src/value-type.ts
index b5c06c037..d8847825e 100644
--- a/packages/types/src/value-type.ts
+++ b/packages/types/src/value-type.ts
@@ -55,7 +55,7 @@ export interface JSONObject {
 }
 
 // 复合类型
-export type CompositeValue = JSONValue | JSExpression | JSSlot | CompositeArray | CompositeObject;
+export type CompositeValue = JSONValue | JSExpression | JSFunction | JSSlot | CompositeArray | CompositeObject;
 export type CompositeArray = CompositeValue[];
 export interface CompositeObject {
   [key: string]: CompositeValue;

From c3fdfe5af2d0bc1e0f0aee43b278f7030eb6c7d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 12 Aug 2020 14:30:52 +0800
Subject: [PATCH 16/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E4=B8=80=E4=B8=AA=E5=88=A4=E6=96=AD=20ContainerSchema=20?=
 =?UTF-8?q?=E7=9A=84=20util=20=E6=96=B9=E4=BE=BF=E5=90=8E=E7=BB=AD?=
 =?UTF-8?q?=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/src/utils/schema.ts | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/code-generator/src/utils/schema.ts

diff --git a/packages/code-generator/src/utils/schema.ts b/packages/code-generator/src/utils/schema.ts
new file mode 100644
index 000000000..9a19ed069
--- /dev/null
+++ b/packages/code-generator/src/utils/schema.ts
@@ -0,0 +1,5 @@
+import { ContainerSchema } from '@ali/lowcode-types';
+
+export function isContainerSchema(x: any): x is ContainerSchema {
+  return typeof x === 'object' && x && typeof x.componentName === 'string' && typeof x.fileName === 'string';
+}

From 4572b53f475e48b472cbc39193c6fb9b7c5c3fdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 12 Aug 2020 14:32:17 +0800
Subject: [PATCH 17/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E8=A1=A5=E5=85=85?=
 =?UTF-8?q?=E5=AF=B9=E6=95=B0=E6=8D=AE=E6=BA=90=E7=9A=84=E4=B8=80=E4=BA=9B?=
 =?UTF-8?q?=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/package.json          |  3 ++-
 .../component/rax/containerInjectContext.ts   |  1 -
 .../rax/containerInjectDataSourceEngine.ts    | 20 ++++++++++---------
 .../framework/rax/plugins/packageJSON.ts      |  4 +++-
 .../demo1/expected/demo-project/package.json  |  4 +++-
 5 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/code-generator/package.json b/packages/code-generator/package.json
index dcccc42e1..d2c8e62b6 100644
--- a/packages/code-generator/package.json
+++ b/packages/code-generator/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@ali/am-eslint-config": "*",
+    "@ali/lowcode-types": "^0.8.14",
     "@ali/my-prettier": "^1.0.0",
     "@babel/generator": "^7.9.5",
     "@babel/parser": "^7.9.4",
@@ -32,7 +33,7 @@
     "ava": "^1.0.1",
     "rimraf": "^3.0.2",
     "ts-loader": "^6.2.2",
-    "ts-node": "^7.0.1",
+    "ts-node": "^8.10.2",
     "tsconfig-paths": "^3.9.0"
   },
   "ava": {
diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
index fe5138bf6..61ab803b7 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
@@ -34,7 +34,6 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
     });
 
-    // TODO: 补充数据源的定义
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: cfg.fileType,
diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
index 0ee79e6c4..61eea0724 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -1,3 +1,5 @@
+import { DataSourceConfig } from '@ali/lowcode-types';
+
 import { CLASS_DEFINE_CHUNK_NAME, COMMON_CHUNK_NAME } from '../../../const/generator';
 
 import {
@@ -7,11 +9,12 @@ import {
   FileType,
   ICodeStruct,
 } from '../../../types';
+import { isContainerSchema } from '../../../utils/schema';
 import { RAX_CHUNK_NAME } from './const';
 
 type PluginConfig = {
   fileType: string;
-}
+};
 
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
   const cfg: PluginConfig = {
@@ -51,23 +54,22 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       content: `
         this._dataSourceEngine.reloadDataSource();
       `,
-      linkAfter: [
-        RAX_CHUNK_NAME.ClassDidMountStart,
-      ],
+      linkAfter: [RAX_CHUNK_NAME.ClassDidMountStart],
     });
 
-    // TODO: 补充数据源的定义
+    const dataSource = isContainerSchema(pre.ir) ? pre.ir.dataSource : null;
+    const dataSourceItems: DataSourceConfig[] = dataSource && dataSource.list || [];
+
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: cfg.fileType,
       name: CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod,
+      // TODO: 下面的定义应该需要调用 @ali/lowcode-datasource-engine 的方法来搞:
       content: `
         _defineDataSourceList() {
-          return [];
+          return ${JSON.stringify(dataSourceItems)};
         }`,
-      linkAfter: [
-        RAX_CHUNK_NAME.ClassRenderEnd
-      ],
+      linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd],
     });
 
     return next;
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
index e8e0b5d48..3b5b1f08e 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
@@ -19,7 +19,8 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
     const ir = next.ir as IProjectInfo;
 
     const packageJson: IPackageJSON = {
-      name: '@ali/rax-component-demo',
+      name: '@ali/rax-app-demo',
+      private: true,
       version: '1.0.0',
       scripts: {
         build:
@@ -29,6 +30,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
         lint: 'eslint --ext .js --ext .jsx ./',
       },
       dependencies: {
+        '@ali/lowcode-datasource-engine': '^0.1.0',
         rax: '^1.1.0',
         'rax-app': '^2.0.0',
         'rax-document': '^0.1.0',
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
index 33f6c7c85..d5595f87b 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
@@ -1,5 +1,6 @@
 {
-  "name": "@ali/rax-component-demo",
+  "name": "@ali/rax-app-demo",
+  "private": true,
   "version": "1.0.0",
   "scripts": {
     "build": "rm -f ./dist/miniapp.tar.gz && npm run build:miniapp && cd build/miniapp && tar czf ../../dist/miniapp.tar.gz *",
@@ -8,6 +9,7 @@
     "lint": "eslint --ext .js --ext .jsx ./"
   },
   "dependencies": {
+    "@ali/lowcode-datasource-engine": "^0.1.0",
     "rax": "^1.1.0",
     "rax-app": "^2.0.0",
     "rax-document": "^0.1.0",

From eba172ce518d208d4bdb3315a88ce3f5dfba6450 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 12 Aug 2020 15:55:06 +0800
Subject: [PATCH 18/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E6=90=9E=E5=AE=9A?=
 =?UTF-8?q?=20Rax=20=E5=87=BA=E7=A0=81=E7=9A=84=E6=97=B6=E5=80=99=E7=9A=84?=
 =?UTF-8?q?=20package.json=20=E4=B8=AD=E7=9A=84=20dependencies?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/package.json          |  3 +-
 .../code-generator/src/parser/SchemaParser.ts |  5 ++
 .../framework/rax/plugins/packageJSON.ts      | 47 ++++++++++++++++-
 .../code-generator/src/types/intermediate.ts  |  2 +
 packages/code-generator/src/utils/schema.ts   |  6 ++-
 packages/code-generator/src/utils/version.ts  | 29 +++++++++++
 .../demo1/expected/demo-project/package.json  |  4 +-
 packages/code-generator/test/rax-app.test.ts  |  6 ++-
 .../code-generator/test/utils/version.test.ts | 50 +++++++++++++++++++
 9 files changed, 145 insertions(+), 7 deletions(-)
 create mode 100644 packages/code-generator/src/utils/version.ts
 create mode 100644 packages/code-generator/test/utils/version.test.ts

diff --git a/packages/code-generator/package.json b/packages/code-generator/package.json
index d2c8e62b6..3f4af4a45 100644
--- a/packages/code-generator/package.json
+++ b/packages/code-generator/package.json
@@ -26,6 +26,7 @@
     "change-case": "^3.1.0",
     "jszip": "^3.5.0",
     "prettier": "^2.0.2",
+    "semver": "^7.3.2",
     "short-uuid": "^3.1.1"
   },
   "devDependencies": {
@@ -40,7 +41,7 @@
     "compileEnhancements": false,
     "snapshotDir": "test/fixtures/__snapshots__",
     "files": [
-      "test/*.test.ts"
+      "test/**/*.test.ts"
     ],
     "extensions": [
       "ts"
diff --git a/packages/code-generator/src/parser/SchemaParser.ts b/packages/code-generator/src/parser/SchemaParser.ts
index fa1ece2a0..5424bbc5a 100644
--- a/packages/code-generator/src/parser/SchemaParser.ts
+++ b/packages/code-generator/src/parser/SchemaParser.ts
@@ -16,6 +16,7 @@ import {
   IComponentNodeItem,
   IContainerInfo,
   IContainerNodeItem,
+  IDependency,
   IExternalDependency,
   IInternalDependency,
   InternalDependencyType,
@@ -138,6 +139,8 @@ class SchemaParser implements ISchemaParser {
       }
     });
 
+    const containersDeps = ([] as IDependency[]).concat(...containers.map(c => c.deps || []));
+
     // 分析路由配置
     const routes = containers
       .filter(container => container.containerType === 'Page')
@@ -187,6 +190,8 @@ class SchemaParser implements ISchemaParser {
         css: schema.css,
         constants: schema.constants,
         i18n: schema.i18n,
+        containersDeps,
+        utilsDeps,
       },
     };
   }
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
index 3b5b1f08e..86cdace2d 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
@@ -1,3 +1,4 @@
+import { NpmInfo } from '@ali/lowcode-types';
 import { COMMON_CHUNK_NAME } from '../../../../../const/generator';
 
 import {
@@ -9,6 +10,8 @@ import {
   IPackageJSON,
   IProjectInfo,
 } from '../../../../../types';
+import { isNpmInfo } from '../../../../../utils/schema';
+import { calcCompatibleVersion } from '../../../../../utils/version';
 
 const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
   const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
@@ -18,6 +21,8 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
 
     const ir = next.ir as IProjectInfo;
 
+    const npmDeps = getNpmDependencies(ir);
+
     const packageJson: IPackageJSON = {
       name: '@ali/rax-app-demo',
       private: true,
@@ -34,8 +39,13 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
         rax: '^1.1.0',
         'rax-app': '^2.0.0',
         'rax-document': '^0.1.0',
-        'rax-text': '^1.0.0',
-        'rax-view': '^1.0.0',
+        ...npmDeps.reduce(
+          (acc, npm) => ({
+            ...acc,
+            [npm.package]: npm.version || '*',
+          }),
+          {} as Record<string, string>,
+        ),
       },
       devDependencies: {
         'build-plugin-rax-app': '^5.0.0',
@@ -66,3 +76,36 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
 };
 
 export default pluginFactory;
+
+function getNpmDependencies(project: IProjectInfo): NpmInfo[] {
+  const npmDeps: NpmInfo[] = [];
+  const npmNameToPkgMap = new Map<string, NpmInfo>();
+
+  const allDeps = [...(project.containersDeps || []), ...(project.utilsDeps || [])];
+
+  allDeps.forEach((dep) => {
+    if (!isNpmInfo(dep)) {
+      return;
+    }
+
+    const existing = npmNameToPkgMap.get(dep.package);
+    if (!existing) {
+      npmNameToPkgMap.set(dep.package, dep);
+      npmDeps.push(dep);
+      return;
+    }
+
+    if (existing.version !== dep.version) {
+      try {
+        npmNameToPkgMap.set(dep.package, {
+          ...existing,
+          version: calcCompatibleVersion(existing.version, dep.version),
+        });
+      } catch (e) {
+        throw new Error(`Cannot find compatible version for ${dep.package}. Detail: ${e.message}`);
+      }
+    }
+  });
+
+  return npmDeps;
+}
diff --git a/packages/code-generator/src/types/intermediate.ts b/packages/code-generator/src/types/intermediate.ts
index 54142dfa0..c41f4d7c9 100644
--- a/packages/code-generator/src/types/intermediate.ts
+++ b/packages/code-generator/src/types/intermediate.ts
@@ -42,6 +42,8 @@ export interface IProjectInfo {
   css?: string;
   constants?: Record<string, string>;
   i18n?: II18nMap;
+  containersDeps?: IDependency[];
+  utilsDeps?: IDependency[];
 }
 
 /**
diff --git a/packages/code-generator/src/utils/schema.ts b/packages/code-generator/src/utils/schema.ts
index 9a19ed069..f741bb111 100644
--- a/packages/code-generator/src/utils/schema.ts
+++ b/packages/code-generator/src/utils/schema.ts
@@ -1,5 +1,9 @@
-import { ContainerSchema } from '@ali/lowcode-types';
+import { ContainerSchema, NpmInfo } from '@ali/lowcode-types';
 
 export function isContainerSchema(x: any): x is ContainerSchema {
   return typeof x === 'object' && x && typeof x.componentName === 'string' && typeof x.fileName === 'string';
 }
+
+export function isNpmInfo(x: any): x is NpmInfo {
+  return typeof x === 'object' && x && typeof x.package === 'string';
+}
diff --git a/packages/code-generator/src/utils/version.ts b/packages/code-generator/src/utils/version.ts
new file mode 100644
index 000000000..4f5e607e8
--- /dev/null
+++ b/packages/code-generator/src/utils/version.ts
@@ -0,0 +1,29 @@
+import semver from 'semver';
+
+export function calcCompatibleVersion(v1: string | undefined | null, v2: string | undefined | null): string {
+  if (!v1 && !v2) {
+    return '*';
+  }
+
+  if (!v1 || v1 === '*') {
+    return v2 || '*';
+  }
+
+  if (!v2 || v2 === '*') {
+    return v1;
+  }
+
+  if (v1 === v2) {
+    return v1;
+  }
+
+  if (!semver.intersects(v1, v2, { loose: true })) {
+    throw new Error(`no compatible versions for "${v1}" and "${v2}"`);
+  }
+
+  if (semver.subset(v1, v2, { loose: true })) {
+    return v1;
+  }
+
+  return v2;
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
index d5595f87b..f2ad5aa15 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
@@ -13,8 +13,8 @@
     "rax": "^1.1.0",
     "rax-app": "^2.0.0",
     "rax-document": "^0.1.0",
-    "rax-text": "^1.0.0",
-    "rax-view": "^1.0.0"
+    "rax-view": "^1.0.0",
+    "rax-text": "^1.0.0"
   },
   "devDependencies": {
     "build-plugin-rax-app": "^5.0.0",
diff --git a/packages/code-generator/test/rax-app.test.ts b/packages/code-generator/test/rax-app.test.ts
index 115f73fbc..b321e6629 100644
--- a/packages/code-generator/test/rax-app.test.ts
+++ b/packages/code-generator/test/rax-app.test.ts
@@ -85,7 +85,11 @@ function ensureShellExec(
   });
 
   if (res.status !== 0) {
-    throw new Error(`Shell command "${shellCmd} ${args.slice(0,2).join(' ')}..." failed with status: ${res.status} (Full command: "${shellCmd} ${args.join(' ')}" )`);
+    throw new Error(
+      `Shell command "${shellCmd} ${args.slice(0, 2).join(' ')}..." failed with status: ${
+        res.status
+      } (Full command: "${shellCmd} ${args.join(' ')}" )`,
+    );
   }
 
   return res;
diff --git a/packages/code-generator/test/utils/version.test.ts b/packages/code-generator/test/utils/version.test.ts
new file mode 100644
index 000000000..16c7b6bb9
--- /dev/null
+++ b/packages/code-generator/test/utils/version.test.ts
@@ -0,0 +1,50 @@
+import test from 'ava';
+import type { ExecutionContext, Macro } from 'ava';
+import { calcCompatibleVersion } from '../../src/utils/version';
+
+const NO_COMPATIBLE_VERSIONS = /no compatible versions/;
+
+const testCalcCompatibleVersion: Macro<any[]> = (
+  t: ExecutionContext<{}>,
+  input: [string | null | undefined, string | null | undefined],
+  expected: string,
+  error?: { message: RegExp },
+) => {
+  if (!error) {
+    t.is(calcCompatibleVersion(input[0], input[1]), expected);
+    t.is(calcCompatibleVersion(input[1], input[0]), expected); // 应该满足交换律
+  } else {
+    t.throws(() => {
+      calcCompatibleVersion(input[0], input[1]);
+    }, error.message);
+    t.throws(() => {
+      calcCompatibleVersion(input[1], input[0]); // 应该满足交换律
+    }, error.message);
+  }
+};
+
+testCalcCompatibleVersion.title = (providedTitle: string | undefined, ...args: any[]): string => {
+  const [input, expected] = args;
+  return `calc compatible versions "${input[0]}" & "${input[1]}" should be "${expected}"`;
+};
+
+test(testCalcCompatibleVersion, ['*', '*'], '*');
+test(testCalcCompatibleVersion, ['1.0.0', '1.0.0'], '1.0.0');
+test(testCalcCompatibleVersion, ['^1.0.0', '^1.0.0'], '^1.0.0');
+
+test(testCalcCompatibleVersion, ['*', undefined], '*');
+
+test(testCalcCompatibleVersion, [undefined, undefined], '*');
+
+test(testCalcCompatibleVersion, ['^1.0.0', undefined], '^1.0.0');
+
+test(testCalcCompatibleVersion, ['*', '^1.0.0'], '^1.0.0');
+test(testCalcCompatibleVersion, ['^1.0.0', '^1.0.2'], '^1.0.2');
+test(testCalcCompatibleVersion, ['^1.2.0', '^1.1.2'], '^1.2.0');
+test(testCalcCompatibleVersion, ['^1.0.0', '1.0.2'], '1.0.2');
+
+test(testCalcCompatibleVersion, ['^0.2.0', '^0.1.2'], 'error', { message: NO_COMPATIBLE_VERSIONS });
+
+test(testCalcCompatibleVersion, ['>0.2.0', '^0.1.2'], 'error', { message: NO_COMPATIBLE_VERSIONS });
+
+test(testCalcCompatibleVersion, ['1.0.1', '1.0.2'], 'error', { message: NO_COMPATIBLE_VERSIONS });

From 36c486b9cd3464554254d70db5f101b37f2812a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 12 Aug 2020 16:52:26 +0800
Subject: [PATCH 19/80] =?UTF-8?q?fix:=20=F0=9F=90=9B=20=E5=B0=8F=E7=A8=8B?=
 =?UTF-8?q?=E5=BA=8F=E9=87=8C=E9=9D=A2=E4=B8=8D=E6=94=AF=E6=8C=81=E5=8F=AF?=
 =?UTF-8?q?=E9=80=89=E9=93=BE=20"=3F.",=20=E5=85=88=E7=9B=B4=E6=8E=A5?=
 =?UTF-8?q?=E8=AE=BF=E9=97=AE=20dataSourceEngine=20=E5=90=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plugins/component/rax/containerInjectContext.ts    | 10 ++++------
 .../expected/demo-project/src/pages/Home/index.jsx     |  4 ++--
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
index 61ab803b7..f5bfe65cc 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
@@ -11,7 +11,7 @@ import { RAX_CHUNK_NAME } from './const';
 
 type PluginConfig = {
   fileType: string;
-}
+};
 
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
   const cfg: PluginConfig = {
@@ -50,10 +50,10 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
               self.setState(newState);
             },
             get dataSourceMap() {
-              return self._dataSourceEngine?.dataSourceMap || {};
+              return self._dataSourceEngine.dataSourceMap || {};
             },
             async reloadDataSource() {
-              self._dataSourceEngine?.reloadDataSource();
+              self._dataSourceEngine.reloadDataSource();
             },
             get utils() {
               return self._utils;
@@ -72,9 +72,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
           return context;
         }
       `,
-      linkAfter: [
-        RAX_CHUNK_NAME.ClassRenderEnd
-      ],
+      linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd],
     });
 
     return next;
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
index bee307cf1..91bef677d 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
@@ -39,10 +39,10 @@ class Home$$Page extends Component {
         self.setState(newState);
       },
       get dataSourceMap() {
-        return self._dataSourceEngine?.dataSourceMap || {};
+        return self._dataSourceEngine.dataSourceMap || {};
       },
       async reloadDataSource() {
-        self._dataSourceEngine?.reloadDataSource();
+        self._dataSourceEngine.reloadDataSource();
       },
       get utils() {
         return self._utils;

From 7ad9f7563c7d06bd47e300dd0f10af729d9151c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 12 Aug 2020 16:57:43 +0800
Subject: [PATCH 20/80] =?UTF-8?q?test:=20=F0=9F=92=8D=20code=20generator?=
 =?UTF-8?q?=20=E7=9A=84=E6=B5=8B=E8=AF=95=E5=BA=94=E8=AF=A5=E5=8F=AA?=
 =?UTF-8?q?=E5=AF=B9=E7=9B=AE=E5=BD=95=E6=9C=89=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/test/rax-app.test.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/code-generator/test/rax-app.test.ts b/packages/code-generator/test/rax-app.test.ts
index b321e6629..79f7e0a5b 100644
--- a/packages/code-generator/test/rax-app.test.ts
+++ b/packages/code-generator/test/rax-app.test.ts
@@ -12,7 +12,7 @@ import { IProjectSchema } from '../src/types/schema';
 
 const TEST_CASES_DIR = path.join(__dirname, '../test-cases/rax-app');
 
-fs.readdirSync(TEST_CASES_DIR).forEach(defineTest);
+getSubDirectoriesSync(TEST_CASES_DIR).forEach(defineTest);
 
 function defineTest(caseDirName: string) {
   test(`rax-app ${caseDirName} should works`, async (t) => {
@@ -115,3 +115,9 @@ function colorizeDiffOutput(output: string): string {
     })
     .join('\n');
 }
+
+function getSubDirectoriesSync(baseDir: string) {
+  return fs
+    .readdirSync(baseDir)
+    .filter((dirOrFileName: string) => fs.statSync(path.join(baseDir, dirOrFileName)).isDirectory());
+}

From 7901c8e96d9a719561ed2c188a162e83e05251b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Thu, 13 Aug 2020 00:12:39 +0800
Subject: [PATCH 21/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E6=A0=B9=E6=8D=AE?=
 =?UTF-8?q?=E4=BD=8E=E4=BB=A3=E7=A0=81=E5=8D=8F=E8=AE=AE=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?,=20=E5=B0=86=20BlockSchema=20=E4=B9=9F=E6=94=B9=E6=88=90?=
 =?UTF-8?q?=E7=BB=A7=E6=89=BF=E8=87=AA=20ContainerSchema?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/types/src/schema.ts | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/types/src/schema.ts b/packages/types/src/schema.ts
index d3e74f6ea..2e0e0ee22 100644
--- a/packages/types/src/schema.ts
+++ b/packages/types/src/schema.ts
@@ -55,19 +55,32 @@ export interface ContainerSchema extends NodeSchema {
   defaultProps?: CompositeObject;
 }
 
+/**
+ * 页面容器
+ * @see https://yuque.antfin-inc.com/mo/spec/spec-low-code-building-schema#XMeF5
+ */
 export interface PageSchema extends ContainerSchema {
   componentName: 'Page';
 }
 
+/**
+ * 低代码业务组件容器
+ * @see https://yuque.antfin-inc.com/mo/spec/spec-low-code-building-schema#XMeF5
+ */
 export interface ComponentSchema extends ContainerSchema {
   componentName: 'Component';
 }
 
-export type RootSchema = PageSchema | ComponentSchema;
-
-export interface BlockSchema extends NodeSchema {
+/**
+ * 区块容器
+ * @see https://yuque.antfin-inc.com/mo/spec/spec-low-code-building-schema#XMeF5
+ */
+export interface BlockSchema extends ContainerSchema {
   componentName: 'Block';
 }
+
+export type RootSchema = PageSchema | ComponentSchema | BlockSchema;
+
 export interface SlotSchema extends NodeSchema {
   name?: string;
   componentName: 'Slot';

From 7fe4bc0ac127b50a8d3bcc5545bf9a8648017844 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Thu, 13 Aug 2020 00:13:45 +0800
Subject: [PATCH 22/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E6=A0=B9=E6=8D=AE?=
 =?UTF-8?q?=E4=BD=8E=E4=BB=A3=E7=A0=81=E5=8D=8F=E8=AE=AE=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?,=20=E5=AE=8C=E5=96=84UtilsMap=E7=9A=84=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/types/src/utils.ts | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/types/src/utils.ts b/packages/types/src/utils.ts
index f4a925f3b..26c2e6d45 100644
--- a/packages/types/src/utils.ts
+++ b/packages/types/src/utils.ts
@@ -1,13 +1,21 @@
 import { NpmInfo } from './npm';
+import { JSExpression, JSFunction } from './value-type';
 
-export type UtilsMap = Array<
-| {
-    name: string;
-    type: 'npm';
-    content: NpmInfo;
-  }
-| {
-    name: string;
-    type: '';
-  }
->;
+export type UtilItem =
+  | {
+      name: string;
+      type: 'npm';
+      content: NpmInfo;
+    }
+  | {
+      name: string;
+      type: 'tnpm';
+      content: NpmInfo;
+    }
+  | {
+      name: string;
+      type: 'function';
+      content: JSFunction | JSExpression;
+    };
+
+export type UtilsMap = UtilItem[];

From adcfacb233a0ae66ce0425091721c853ad267012 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Thu, 13 Aug 2020 00:14:54 +0800
Subject: [PATCH 23/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=20Rax=20=E5=87=BA=E7=A0=81,=20=E8=A1=A5=E5=85=85=E6=9B=B4?=
 =?UTF-8?q?=E5=A4=8D=E6=9D=82=E7=9A=84=E5=B8=A6=E6=9C=89=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=BA=90=E7=BB=91=E5=AE=9A/=E6=9D=A1=E4=BB=B6/=E5=BE=AA?=
 =?UTF-8?q?=E7=8E=AF=E4=BB=A5=E5=8F=8A=20Utils=20=E7=9A=84=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E7=94=A8=E4=BE=8B=E5=B9=B6=20pass?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../code-generator/src/const/generator.ts     |  22 +-
 .../code-generator/src/parser/SchemaParser.ts |  56 ++--
 .../src/plugins/common/esmodule.ts            |  53 ++--
 .../src/plugins/component/rax/const.ts        |   7 +-
 .../plugins/component/rax/containerClass.ts   |  27 +-
 .../component/rax/containerDataSource.ts      |  52 ----
 .../component/rax/containerInitState.ts       |  10 +-
 .../rax/containerInjectDataSourceEngine.ts    |   4 +-
 .../component/rax/containerInjectUtils.ts     |  37 ++-
 .../component/rax/containerLifeCycle.ts       |  92 +++---
 .../plugins/component/rax/containerMethod.ts  |  54 ----
 .../plugins/component/rax/containerMethods.ts |  80 ++++++
 .../src/plugins/component/rax/jsx.ts          | 133 ++++++++-
 .../plugins/component/react/containerClass.ts |   2 +
 .../component/recore/pageDataSource.ts        |  22 +-
 .../src/plugins/project/constants.ts          |   2 +
 .../project/framework/icejs/plugins/entry.ts  |   1 +
 .../project/framework/icejs/plugins/router.ts |   4 +-
 .../project/framework/rax/plugins/entry.ts    |   1 +
 .../src/plugins/project/i18n.ts               |   4 +-
 .../src/plugins/project/utils.ts              |  12 +-
 .../code-generator/src/solutions/rax-app.ts   |  24 +-
 packages/code-generator/src/types/core.ts     |  37 +--
 .../code-generator/src/types/intermediate.ts  |   9 +-
 packages/code-generator/src/types/schema.ts   | 176 +++---------
 .../code-generator/src/utils/compositeType.ts | 155 ++++++++---
 .../code-generator/src/utils/jsExpression.ts  |  58 +---
 .../code-generator/src/utils/nodeToJSX.ts     | 174 +++++++-----
 .../demo-project/src/pages/Home/index.jsx     |  33 +++
 .../demo2/expected/demo-project/.editorconfig |  12 +
 .../demo2/expected/demo-project/.eslintignore |  11 +
 .../demo2/expected/demo-project/.eslintrc.js  |   3 +
 .../demo2/expected/demo-project/.gitignore    |  17 ++
 .../demo2/expected/demo-project/README.md     |  15 +
 .../demo2/expected/demo-project/abc.json      |   7 +
 .../demo2/expected/demo-project/build.json    |  12 +
 .../demo2/expected/demo-project/package.json  |  35 +++
 .../demo2/expected/demo-project/src/app.js    |   4 +
 .../demo2/expected/demo-project/src/app.json  |  11 +
 .../demo-project/src/document/index.jsx       |  25 ++
 .../expected/demo-project/src/global.scss     |   5 +
 .../demo-project/src/pages/Home/index.css     |   0
 .../demo-project/src/pages/Home/index.jsx     | 165 +++++++++++
 .../demo2/expected/demo-project/src/utils.js  |  15 +
 .../test-cases/rax-app/demo2/schema.json5     | 263 ++++++++++++++++++
 packages/code-generator/test/rax-app.test.ts  |   2 +-
 packages/code-generator/tsconfig.json         |  11 +-
 47 files changed, 1333 insertions(+), 621 deletions(-)
 delete mode 100644 packages/code-generator/src/plugins/component/rax/containerDataSource.ts
 delete mode 100644 packages/code-generator/src/plugins/component/rax/containerMethod.ts
 create mode 100644 packages/code-generator/src/plugins/component/rax/containerMethods.ts
 create mode 100644 packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/.editorconfig
 create mode 100644 packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/.eslintignore
 create mode 100644 packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/.eslintrc.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/.gitignore
 create mode 100644 packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/README.md
 create mode 100644 packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/abc.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/build.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/app.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/app.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/document/index.jsx
 create mode 100644 packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/global.scss
 create mode 100644 packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.css
 create mode 100644 packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
 create mode 100644 packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/utils.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo2/schema.json5

diff --git a/packages/code-generator/src/const/generator.ts b/packages/code-generator/src/const/generator.ts
index 6f471e2a4..11fe67b81 100644
--- a/packages/code-generator/src/const/generator.ts
+++ b/packages/code-generator/src/const/generator.ts
@@ -1,6 +1,7 @@
 export const COMMON_CHUNK_NAME = {
   ExternalDepsImport: 'CommonExternalDependencyImport',
   InternalDepsImport: 'CommonInternalDependencyImport',
+  ImportAliasDefine: 'CommonImportAliasDefine',
   FileVarDefine: 'CommonFileScopeVarDefine',
   FileUtilDefine: 'CommonFileScopeMethodDefine',
   FileMainContent: 'CommonFileMainContent',
@@ -28,18 +29,22 @@ export const CLASS_DEFINE_CHUNK_NAME = {
 export const DEFAULT_LINK_AFTER = {
   [COMMON_CHUNK_NAME.ExternalDepsImport]: [],
   [COMMON_CHUNK_NAME.InternalDepsImport]: [COMMON_CHUNK_NAME.ExternalDepsImport],
+  [COMMON_CHUNK_NAME.ImportAliasDefine]: [COMMON_CHUNK_NAME.ExternalDepsImport, COMMON_CHUNK_NAME.InternalDepsImport],
   [COMMON_CHUNK_NAME.FileVarDefine]: [
     COMMON_CHUNK_NAME.ExternalDepsImport,
     COMMON_CHUNK_NAME.InternalDepsImport,
+    COMMON_CHUNK_NAME.ImportAliasDefine,
   ],
   [COMMON_CHUNK_NAME.FileUtilDefine]: [
     COMMON_CHUNK_NAME.ExternalDepsImport,
     COMMON_CHUNK_NAME.InternalDepsImport,
+    COMMON_CHUNK_NAME.ImportAliasDefine,
     COMMON_CHUNK_NAME.FileVarDefine,
   ],
   [CLASS_DEFINE_CHUNK_NAME.Start]: [
     COMMON_CHUNK_NAME.ExternalDepsImport,
     COMMON_CHUNK_NAME.InternalDepsImport,
+    COMMON_CHUNK_NAME.ImportAliasDefine,
     COMMON_CHUNK_NAME.FileVarDefine,
     COMMON_CHUNK_NAME.FileUtilDefine,
   ],
@@ -50,20 +55,13 @@ export const DEFAULT_LINK_AFTER = {
     CLASS_DEFINE_CHUNK_NAME.InsVar,
     CLASS_DEFINE_CHUNK_NAME.InsVarMethod,
   ],
-  [CLASS_DEFINE_CHUNK_NAME.ConstructorContent]: [
-    CLASS_DEFINE_CHUNK_NAME.ConstructorStart,
-  ],
+  [CLASS_DEFINE_CHUNK_NAME.ConstructorContent]: [CLASS_DEFINE_CHUNK_NAME.ConstructorStart],
   [CLASS_DEFINE_CHUNK_NAME.ConstructorEnd]: [
     CLASS_DEFINE_CHUNK_NAME.ConstructorStart,
     CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
   ],
-  [CLASS_DEFINE_CHUNK_NAME.StaticVar]: [
-    CLASS_DEFINE_CHUNK_NAME.Start,
-  ],
-  [CLASS_DEFINE_CHUNK_NAME.StaticMethod]: [
-    CLASS_DEFINE_CHUNK_NAME.Start,
-    CLASS_DEFINE_CHUNK_NAME.StaticVar,
-  ],
+  [CLASS_DEFINE_CHUNK_NAME.StaticVar]: [CLASS_DEFINE_CHUNK_NAME.Start],
+  [CLASS_DEFINE_CHUNK_NAME.StaticMethod]: [CLASS_DEFINE_CHUNK_NAME.Start, CLASS_DEFINE_CHUNK_NAME.StaticVar],
   [CLASS_DEFINE_CHUNK_NAME.InsVar]: [
     CLASS_DEFINE_CHUNK_NAME.Start,
     CLASS_DEFINE_CHUNK_NAME.StaticVar,
@@ -105,6 +103,7 @@ export const DEFAULT_LINK_AFTER = {
   [COMMON_CHUNK_NAME.FileMainContent]: [
     COMMON_CHUNK_NAME.ExternalDepsImport,
     COMMON_CHUNK_NAME.InternalDepsImport,
+    COMMON_CHUNK_NAME.ImportAliasDefine,
     COMMON_CHUNK_NAME.FileVarDefine,
     COMMON_CHUNK_NAME.FileUtilDefine,
     CLASS_DEFINE_CHUNK_NAME.End,
@@ -112,6 +111,7 @@ export const DEFAULT_LINK_AFTER = {
   [COMMON_CHUNK_NAME.FileExport]: [
     COMMON_CHUNK_NAME.ExternalDepsImport,
     COMMON_CHUNK_NAME.InternalDepsImport,
+    COMMON_CHUNK_NAME.ImportAliasDefine,
     COMMON_CHUNK_NAME.FileVarDefine,
     COMMON_CHUNK_NAME.FileUtilDefine,
     CLASS_DEFINE_CHUNK_NAME.End,
@@ -120,6 +120,6 @@ export const DEFAULT_LINK_AFTER = {
   [COMMON_CHUNK_NAME.StyleDepsImport]: [],
   [COMMON_CHUNK_NAME.StyleCssContent]: [COMMON_CHUNK_NAME.StyleDepsImport],
   [COMMON_CHUNK_NAME.HtmlContent]: [],
-}
+};
 
 export const COMMON_SUB_MODULE_NAME = 'index';
diff --git a/packages/code-generator/src/parser/SchemaParser.ts b/packages/code-generator/src/parser/SchemaParser.ts
index 5424bbc5a..0dd66af6d 100644
--- a/packages/code-generator/src/parser/SchemaParser.ts
+++ b/packages/code-generator/src/parser/SchemaParser.ts
@@ -39,9 +39,7 @@ const defaultContainer: IContainerInfo = {
 class SchemaParser implements ISchemaParser {
   public validate(schema: IBasicSchema): boolean {
     if (SUPPORT_SCHEMA_VERSION_LIST.indexOf(schema.version) < 0) {
-      throw new CompatibilityError(
-        `Not support schema with version [${schema.version}]`,
-      );
+      throw new CompatibilityError(`Not support schema with version [${schema.version}]`);
     }
 
     return true;
@@ -65,19 +63,25 @@ class SchemaParser implements ISchemaParser {
     }
 
     // 解析三方组件依赖
-    schema.componentsMap.forEach(info => {
-      info.dependencyType = DependencyType.External;
-      info.importName = info.componentName;
-      compDeps[info.componentName] = info;
+    schema.componentsMap.forEach((info) => {
+      if (info.componentName) {
+        compDeps[info.componentName] = {
+          ...info,
+          dependencyType: DependencyType.External,
+          importName: info.componentName,
+          exportName: info.exportName ?? info.componentName,
+          version: info.version || '*',
+          destructuring: info.destructuring ?? false,
+        };
+      }
     });
 
     let containers: IContainerInfo[];
     // Test if this is a lowcode component without container
     if (schema.componentsTree.length > 0) {
-      const firstRoot: IContainerNodeItem = schema
-        .componentsTree[0] as IContainerNodeItem;
+      const firstRoot: IContainerNodeItem = schema.componentsTree[0] as IContainerNodeItem;
 
-      if (!firstRoot.fileName) {
+      if (!('fileName' in firstRoot) || !firstRoot.fileName) {
         // 整个 schema 描述一个容器，且无根节点定义
         const container: IContainerInfo = {
           ...defaultContainer,
@@ -86,8 +90,8 @@ class SchemaParser implements ISchemaParser {
         containers = [container];
       } else {
         // 普通带 1 到多个容器的 schema
-        containers = schema.componentsTree.map(n => {
-          const subRoot = n as IContainerNodeItem;
+        containers = schema.componentsTree.map((n) => {
+          const subRoot = n;
           const container: IContainerInfo = {
             ...subRoot,
             containerType: subRoot.componentName,
@@ -101,7 +105,7 @@ class SchemaParser implements ISchemaParser {
     }
 
     // 建立所有容器的内部依赖索引
-    containers.forEach(container => {
+    containers.forEach((container) => {
       let type;
       switch (container.containerType) {
         case 'Page':
@@ -127,31 +131,31 @@ class SchemaParser implements ISchemaParser {
     });
 
     // 分析容器内部组件依赖
-    containers.forEach(container => {
+    containers.forEach((container) => {
       if (container.children) {
         // const depNames = this.getComponentNames(container.children);
         // container.deps = uniqueArray<string>(depNames)
         //   .map(depName => internalDeps[depName] || compDeps[depName])
         //   .filter(dep => !!dep);
-        container.deps = Object.keys(compDeps).map(
-          depName => compDeps[depName],
-        );
+        container.deps = Object.keys(compDeps).map((depName) => compDeps[depName]);
       }
     });
 
-    const containersDeps = ([] as IDependency[]).concat(...containers.map(c => c.deps || []));
+    const containersDeps = ([] as IDependency[]).concat(...containers.map((c) => c.deps || []));
 
     // 分析路由配置
+    // TODO: 低代码规范里面的路由是咋弄的？
     const routes = containers
-      .filter(container => container.containerType === 'Page')
-      .map(page => {
-        const meta = page.meta as IPageMeta;
+      .filter((container) => container.containerType === 'Page')
+      .map((page) => {
+        const meta = (page as { meta?: IPageMeta }).meta as IPageMeta;
         if (meta) {
           return {
             path: meta.router,
             componentName: page.moduleName,
           };
         }
+
         return {
           path: '',
           componentName: page.moduleName,
@@ -159,16 +163,14 @@ class SchemaParser implements ISchemaParser {
       });
 
     const routerDeps = routes
-      .map(r => internalDeps[r.componentName] || compDeps[r.componentName])
-      .filter(dep => !!dep);
+      .map((r) => internalDeps[r.componentName] || compDeps[r.componentName])
+      .filter((dep) => !!dep);
 
     // 分析 Utils 依赖
     let utils: IUtilItem[];
     if (schema.utils) {
       utils = schema.utils;
-      utilsDeps = schema.utils
-        .filter(u => u.type !== 'function')
-        .map(u => u.content as IExternalDependency);
+      utilsDeps = schema.utils.filter((u) => u.type !== 'function').map((u) => u.content as IExternalDependency);
     } else {
       utils = [];
     }
@@ -197,7 +199,7 @@ class SchemaParser implements ISchemaParser {
   }
 
   public getComponentNames(children: ChildNodeType): string[] {
-    return handleChildren<string>(children, {
+    return handleChildren(children, {
       node: (i: IComponentNodeItem) => [i.componentName],
     });
   }
diff --git a/packages/code-generator/src/plugins/common/esmodule.ts b/packages/code-generator/src/plugins/common/esmodule.ts
index 316ed5821..3d615ed9e 100644
--- a/packages/code-generator/src/plugins/common/esmodule.ts
+++ b/packages/code-generator/src/plugins/common/esmodule.ts
@@ -25,12 +25,9 @@ function groupDepsByPack(deps: IDependency[]): Record<string, IDependency[]> {
     depMap[pkg].push(dep);
   };
 
-  deps.forEach(dep => {
+  deps.forEach((dep) => {
     if (dep.dependencyType === DependencyType.Internal) {
-      addDep(
-        `${(dep as IInternalDependency).moduleName}${dep.main || ''}`,
-        dep,
-      );
+      addDep(`${(dep as IInternalDependency).moduleName}${dep.main || ''}`, dep);
     } else {
       addDep(`${(dep as IExternalDependency).package}${dep.main || ''}`, dep);
     }
@@ -39,17 +36,13 @@ function groupDepsByPack(deps: IDependency[]): Record<string, IDependency[]> {
   return depMap;
 }
 
-function buildPackageImport(
-  pkg: string,
-  deps: IDependency[],
-  targetFileType: string,
-): ICodeChunk[] {
+function buildPackageImport(pkg: string, deps: IDependency[], targetFileType: string): ICodeChunk[] {
   const chunks: ICodeChunk[] = [];
   let defaultImport: string = '';
   let defaultImportAs: string = '';
   const imports: Record<string, string> = {};
 
-  deps.forEach(dep => {
+  deps.forEach((dep) => {
     const srcName = dep.exportName;
     let targetName = dep.importName || dep.exportName;
     if (dep.subName) {
@@ -60,12 +53,14 @@ function buildPackageImport(
       chunks.push({
         type: ChunkType.STRING,
         fileType: targetFileType,
-        name: COMMON_CHUNK_NAME.FileVarDefine,
+        name: COMMON_CHUNK_NAME.ImportAliasDefine,
         content: `const ${targetName} = ${srcName}.${dep.subName};`,
-        linkAfter: [
-          COMMON_CHUNK_NAME.ExternalDepsImport,
-          COMMON_CHUNK_NAME.InternalDepsImport,
-        ],
+        linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport, COMMON_CHUNK_NAME.InternalDepsImport],
+        ext: {
+          originalName: `${srcName}.${dep.subName}`,
+          aliasName: targetName,
+          dependency: dep,
+        },
       });
 
       targetName = srcName;
@@ -74,18 +69,26 @@ function buildPackageImport(
     if (dep.destructuring) {
       imports[srcName] = targetName;
     } else if (defaultImport) {
-      throw new CodeGeneratorError(
-        `[${pkg}] has more than one default export.`,
-      );
+      // 有些时候，可能已经从某个包里引入了一个东东，但是希望能再起个别名，这时候用赋值语句代替
+      chunks.push({
+        type: ChunkType.STRING,
+        fileType: targetFileType,
+        name: COMMON_CHUNK_NAME.ImportAliasDefine,
+        content: `const ${targetName} = ${defaultImportAs};`,
+        linkAfter: [COMMON_CHUNK_NAME.InternalDepsImport, COMMON_CHUNK_NAME.ExternalDepsImport],
+        ext: {
+          originalName: defaultImportAs,
+          aliasName: targetName,
+          dependency: dep,
+        },
+      });
     } else {
       defaultImport = srcName;
       defaultImportAs = targetName;
     }
   });
 
-  const items = Object.keys(imports).map(src =>
-    src === imports[src] ? src : `${src} as ${imports[src]}`,
-  );
+  const items = Object.keys(imports).map((src) => (src === imports[src] ? src : `${src} as ${imports[src]}`));
 
   const statementL = ['import'];
   if (defaultImport) {
@@ -125,7 +128,7 @@ function buildPackageImport(
 
 type PluginConfig = {
   fileType: string;
-}
+};
 
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?: PluginConfig) => {
   const cfg: PluginConfig = {
@@ -143,9 +146,9 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?: Plu
     if (ir && ir.deps && ir.deps.length > 0) {
       const packs = groupDepsByPack(ir.deps);
 
-      Object.keys(packs).forEach(pkg => {
+      Object.keys(packs).forEach((pkg) => {
         const chunks = buildPackageImport(pkg, packs[pkg], cfg.fileType);
-        next.chunks.push.apply(next.chunks, chunks);
+        next.chunks.push(...chunks);
       });
     }
 
diff --git a/packages/code-generator/src/plugins/component/rax/const.ts b/packages/code-generator/src/plugins/component/rax/const.ts
index 6a13c92a6..d604b27e9 100644
--- a/packages/code-generator/src/plugins/component/rax/const.ts
+++ b/packages/code-generator/src/plugins/component/rax/const.ts
@@ -1,9 +1,12 @@
 export const RAX_CHUNK_NAME = {
-  ClassDidMountStart: 'RaxComponentClassDidMountStart',
+  ClassDidMountBegin: 'RaxComponentClassDidMountBegin',
   ClassDidMountContent: 'RaxComponentClassDidMountContent',
   ClassDidMountEnd: 'RaxComponentClassDidMountEnd',
-  ClassRenderStart: 'RaxComponentClassRenderStart',
+  ClassRenderBegin: 'RaxComponentClassRenderBegin',
   ClassRenderPre: 'RaxComponentClassRenderPre',
   ClassRenderJSX: 'RaxComponentClassRenderJSX',
   ClassRenderEnd: 'RaxComponentClassRenderEnd',
+  MethodsBegin: 'RaxComponentMethodsBegin',
+  MethodsContent: 'RaxComponentMethodsContent',
+  MethodsEnd: 'RaxComponentMethodsEnd',
 };
diff --git a/packages/code-generator/src/plugins/component/rax/containerClass.ts b/packages/code-generator/src/plugins/component/rax/containerClass.ts
index a38d920d4..4ec4b6245 100644
--- a/packages/code-generator/src/plugins/component/rax/containerClass.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerClass.ts
@@ -30,12 +30,12 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       linkAfter: [
         COMMON_CHUNK_NAME.ExternalDepsImport,
         COMMON_CHUNK_NAME.InternalDepsImport,
+        COMMON_CHUNK_NAME.ImportAliasDefine,
         COMMON_CHUNK_NAME.FileVarDefine,
         COMMON_CHUNK_NAME.FileUtilDefine,
       ],
     });
 
-
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: FileType.JSX,
@@ -43,8 +43,9 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       content: `}`,
       linkAfter: [
         CLASS_DEFINE_CHUNK_NAME.Start,
-        RAX_CHUNK_NAME.ClassRenderEnd,
         CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod,
+        RAX_CHUNK_NAME.ClassRenderEnd,
+        RAX_CHUNK_NAME.MethodsEnd,
       ],
     });
 
@@ -70,13 +71,9 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: FileType.JSX,
-      name: RAX_CHUNK_NAME.ClassDidMountStart,
+      name: RAX_CHUNK_NAME.ClassDidMountBegin,
       content: `componentDidMount() {`,
-      linkAfter: [
-        CLASS_DEFINE_CHUNK_NAME.Start,
-        CLASS_DEFINE_CHUNK_NAME.InsVar,
-        CLASS_DEFINE_CHUNK_NAME.InsMethod,
-      ],
+      linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start, CLASS_DEFINE_CHUNK_NAME.InsVar, CLASS_DEFINE_CHUNK_NAME.InsMethod],
     });
 
     next.chunks.push({
@@ -84,20 +81,15 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       fileType: FileType.JSX,
       name: RAX_CHUNK_NAME.ClassDidMountEnd,
       content: `}`,
-      linkAfter: [
-        RAX_CHUNK_NAME.ClassDidMountStart,
-        RAX_CHUNK_NAME.ClassDidMountContent,
-      ],
+      linkAfter: [RAX_CHUNK_NAME.ClassDidMountBegin, RAX_CHUNK_NAME.ClassDidMountContent],
     });
 
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: FileType.JSX,
-      name: RAX_CHUNK_NAME.ClassRenderStart,
+      name: RAX_CHUNK_NAME.ClassRenderBegin,
       content: 'render() {',
-      linkAfter: [
-        RAX_CHUNK_NAME.ClassDidMountEnd,
-      ],
+      linkAfter: [RAX_CHUNK_NAME.ClassDidMountEnd],
     });
 
     next.chunks.push({
@@ -105,7 +97,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       fileType: FileType.JSX,
       name: RAX_CHUNK_NAME.ClassRenderEnd,
       content: '}',
-      linkAfter: [RAX_CHUNK_NAME.ClassRenderStart, RAX_CHUNK_NAME.ClassRenderPre, RAX_CHUNK_NAME.ClassRenderJSX],
+      linkAfter: [RAX_CHUNK_NAME.ClassRenderBegin, RAX_CHUNK_NAME.ClassRenderPre, RAX_CHUNK_NAME.ClassRenderJSX],
     });
 
     next.chunks.push({
@@ -116,6 +108,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       linkAfter: [
         COMMON_CHUNK_NAME.ExternalDepsImport,
         COMMON_CHUNK_NAME.InternalDepsImport,
+        COMMON_CHUNK_NAME.ImportAliasDefine,
         COMMON_CHUNK_NAME.FileVarDefine,
         COMMON_CHUNK_NAME.FileUtilDefine,
         CLASS_DEFINE_CHUNK_NAME.End,
diff --git a/packages/code-generator/src/plugins/component/rax/containerDataSource.ts b/packages/code-generator/src/plugins/component/rax/containerDataSource.ts
deleted file mode 100644
index 72d7efd6b..000000000
--- a/packages/code-generator/src/plugins/component/rax/containerDataSource.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { CLASS_DEFINE_CHUNK_NAME } from '../../../const/generator';
-
-import { generateCompositeType } from '../../../utils/compositeType';
-
-import {
-  BuilderComponentPlugin,
-  BuilderComponentPluginFactory,
-  ChunkType,
-  FileType,
-  ICodeStruct,
-  IContainerInfo,
-} from '../../../types';
-
-type PluginConfig = {
-  fileType: string;
-}
-
-const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
-  const cfg: PluginConfig = {
-    fileType: FileType.JSX,
-    ...config,
-  };
-
-  const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
-    const next: ICodeStruct = {
-      ...pre,
-    };
-
-    const ir = next.ir as IContainerInfo;
-
-    if (ir.state) {
-      const state = ir.state;
-      const fields = Object.keys(state).map<string>(stateName => {
-        const [isString, value] = generateCompositeType(state[stateName]);
-        return `${stateName}: ${isString ? `'${value}'` : value},`;
-      });
-
-      next.chunks.push({
-        type: ChunkType.STRING,
-        fileType: cfg.fileType,
-        name: CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
-        content: `this.state = { ${fields.join('')} };`,
-        linkAfter: [CLASS_DEFINE_CHUNK_NAME.ConstructorStart],
-      });
-    }
-
-    return next;
-  };
-  return plugin;
-};
-
-export default pluginFactory;
diff --git a/packages/code-generator/src/plugins/component/rax/containerInitState.ts b/packages/code-generator/src/plugins/component/rax/containerInitState.ts
index 50984c961..8dc634c98 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInitState.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInitState.ts
@@ -14,12 +14,12 @@ import {
 type PluginConfig = {
   fileType: string;
   implementType: 'inConstructor' | 'insMember' | 'hooks';
-}
+};
 
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
   const cfg: PluginConfig = {
     fileType: FileType.JSX,
-    implementType: 'inConstructor',
+    implementType: 'insMember',
     ...config,
   };
 
@@ -32,8 +32,9 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
 
     if (ir.state) {
       const state = ir.state;
-      const fields = Object.keys(state).map<string>(stateName => {
-        const [isString, value] = generateCompositeType(state[stateName]);
+      const fields = Object.keys(state).map<string>((stateName) => {
+        // TODO: 这里用什么 handlers?
+        const [isString, value] = generateCompositeType(state[stateName], {});
         return `${stateName}: ${isString ? `'${value}'` : value},`;
       });
 
@@ -54,6 +55,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
           linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsVar]],
         });
       }
+      // TODO: hooks state??
     }
 
     return next;
diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
index 61eea0724..019383755 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -54,11 +54,11 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       content: `
         this._dataSourceEngine.reloadDataSource();
       `,
-      linkAfter: [RAX_CHUNK_NAME.ClassDidMountStart],
+      linkAfter: [RAX_CHUNK_NAME.ClassDidMountBegin],
     });
 
     const dataSource = isContainerSchema(pre.ir) ? pre.ir.dataSource : null;
-    const dataSourceItems: DataSourceConfig[] = dataSource && dataSource.list || [];
+    const dataSourceItems: DataSourceConfig[] = (dataSource && dataSource.list) || [];
 
     next.chunks.push({
       type: ChunkType.STRING,
diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectUtils.ts b/packages/code-generator/src/plugins/component/rax/containerInjectUtils.ts
index aa9763c23..5fda869f2 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectUtils.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectUtils.ts
@@ -1,4 +1,4 @@
-import { CLASS_DEFINE_CHUNK_NAME } from '../../../const/generator';
+import { CLASS_DEFINE_CHUNK_NAME, COMMON_CHUNK_NAME } from '../../../const/generator';
 
 import {
   BuilderComponentPlugin,
@@ -11,7 +11,7 @@ import { RAX_CHUNK_NAME } from './const';
 
 type PluginConfig = {
   fileType: string;
-}
+};
 
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
   const cfg: PluginConfig = {
@@ -24,7 +24,17 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       ...pre,
     };
 
-    // TODO: utils 怎么注入？
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: cfg.fileType,
+      name: COMMON_CHUNK_NAME.InternalDepsImport,
+      // TODO: 下面这个路径有没有更好的方式来获取？而非写死
+      content: `
+        import __$$projectUtils from '../../utils';
+      `,
+      linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport],
+    });
+
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: cfg.fileType,
@@ -33,18 +43,29 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
     });
 
-
+    // TODO: Page methods...
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: cfg.fileType,
       name: CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod,
+
+      // 绑定下上下文，这样在所有的 utils 里面都能通过 this.xxx 来访问上下文了
+      // TODO: 要不要优化为通过 Proxy 的方式懒绑定？
       content: `
         _defineUtils() {
-          return {};
+          const utils = {
+            ...__$$projectUtils,
+          };
+
+          Object.entries(utils).forEach(([name, util]) => {
+            if (typeof util === 'function') {
+              utils[name] = util.bind(this._context);
+            }
+          });
+
+          return utils;
         }`,
-      linkAfter: [
-        RAX_CHUNK_NAME.ClassRenderEnd
-      ],
+      linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd],
     });
 
     return next;
diff --git a/packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts b/packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts
index 65d411242..cc5c8202f 100644
--- a/packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts
@@ -1,10 +1,7 @@
 import { CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
 import { RAX_CHUNK_NAME } from './const';
 
-import {
-  getFuncExprBody,
-  transformFuncExpr2MethodMember,
-} from '../../../utils/jsExpression';
+import { getFuncExprBody, transformFuncExpr2MethodMember } from '../../../utils/jsExpression';
 
 import {
   BuilderComponentPlugin,
@@ -22,7 +19,7 @@ type PluginConfig = {
   fileType: string;
   exportNameMapping: Record<string, string>;
   normalizeNameMapping: Record<string, string>;
-}
+};
 
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
   const cfg: PluginConfig = {
@@ -37,50 +34,53 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       ...pre,
     };
 
-    const ir = next.ir as IContainerInfo;
+    // TODO: Rax 程序的生命周期暂未明确，此处先屏蔽
+    // @see https://yuque.antfin-inc.com/mo/spec/spec-low-code-building-schema#XMeF5
 
-    if (ir.lifeCycles) {
-      const lifeCycles = ir.lifeCycles;
-      const chunks = Object.keys(lifeCycles).map<ICodeChunk>(lifeCycleName => {
-        const normalizeName = cfg.normalizeNameMapping[lifeCycleName] || lifeCycleName;
-        const exportName = cfg.exportNameMapping[lifeCycleName] || lifeCycleName;
-        if (normalizeName === 'constructor') {
-          return {
-            type: ChunkType.STRING,
-            fileType: cfg.fileType,
-            name: CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
-            content: getFuncExprBody(
-              (lifeCycles[lifeCycleName] as IJSExpression).value,
-            ),
-            linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.ConstructorStart]],
-          };
-        }
-        if (normalizeName === 'render') {
-          return {
-            type: ChunkType.STRING,
-            fileType: cfg.fileType,
-            name: RAX_CHUNK_NAME.ClassRenderPre,
-            content: getFuncExprBody(
-              (lifeCycles[lifeCycleName] as IJSExpression).value,
-            ),
-            linkAfter: [RAX_CHUNK_NAME.ClassRenderStart],
-          };
-        }
+    // const ir = next.ir as IContainerInfo;
 
-        return {
-          type: ChunkType.STRING,
-          fileType: cfg.fileType,
-          name: CLASS_DEFINE_CHUNK_NAME.InsMethod,
-          content: transformFuncExpr2MethodMember(
-            exportName,
-            (lifeCycles[lifeCycleName] as IJSExpression).value,
-          ),
-          linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsMethod]],
-        };
-      });
+    // if (ir.lifeCycles) {
+    //   const lifeCycles = ir.lifeCycles;
+    //   const chunks = Object.keys(lifeCycles).map<ICodeChunk>(lifeCycleName => {
+    //     const normalizeName = cfg.normalizeNameMapping[lifeCycleName] || lifeCycleName;
+    //     const exportName = cfg.exportNameMapping[lifeCycleName] || lifeCycleName;
+    //     if (normalizeName === 'constructor') {
+    //       return {
+    //         type: ChunkType.STRING,
+    //         fileType: cfg.fileType,
+    //         name: CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
+    //         content: getFuncExprBody(
+    //           (lifeCycles[lifeCycleName] as IJSExpression).value,
+    //         ),
+    //         linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.ConstructorStart]],
+    //       };
+    //     }
+    //     if (normalizeName === 'render') {
+    //       return {
+    //         type: ChunkType.STRING,
+    //         fileType: cfg.fileType,
+    //         name: RAX_CHUNK_NAME.ClassRenderPre,
+    //         content: getFuncExprBody(
+    //           (lifeCycles[lifeCycleName] as IJSExpression).value,
+    //         ),
+    //         linkAfter: [RAX_CHUNK_NAME.ClassRenderStart],
+    //       };
+    //     }
 
-      next.chunks.push.apply(next.chunks, chunks);
-    }
+    //     return {
+    //       type: ChunkType.STRING,
+    //       fileType: cfg.fileType,
+    //       name: CLASS_DEFINE_CHUNK_NAME.InsMethod,
+    //       content: transformFuncExpr2MethodMember(
+    //         exportName,
+    //         (lifeCycles[lifeCycleName] as IJSExpression).value,
+    //       ),
+    //       linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsMethod]],
+    //     };
+    //   });
+
+    //   next.chunks.push.apply(next.chunks, chunks);
+    // }
 
     return next;
   };
diff --git a/packages/code-generator/src/plugins/component/rax/containerMethod.ts b/packages/code-generator/src/plugins/component/rax/containerMethod.ts
deleted file mode 100644
index 9bba467da..000000000
--- a/packages/code-generator/src/plugins/component/rax/containerMethod.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
-
-import { transformFuncExpr2MethodMember } from '../../../utils/jsExpression';
-
-import {
-  BuilderComponentPlugin,
-  BuilderComponentPluginFactory,
-  ChunkType,
-  FileType,
-  ICodeChunk,
-  ICodeStruct,
-  IContainerInfo,
-  IJSExpression,
-} from '../../../types';
-
-type PluginConfig = {
-  fileType: string;
-}
-
-const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
-  const cfg: PluginConfig = {
-    fileType: FileType.JSX,
-    ...config,
-  };
-
-  const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
-    const next: ICodeStruct = {
-      ...pre,
-    };
-
-    const ir = next.ir as IContainerInfo;
-
-    if (ir.methods) {
-      const methods = ir.methods;
-      const chunks = Object.keys(methods).map<ICodeChunk>(methodName => ({
-        type: ChunkType.STRING,
-        fileType: cfg.fileType,
-        name: CLASS_DEFINE_CHUNK_NAME.InsMethod,
-        content: transformFuncExpr2MethodMember(
-          methodName,
-          (methods[methodName] as IJSExpression).value,
-        ),
-        linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsMethod]],
-      }));
-
-      next.chunks.push.apply(next.chunks, chunks);
-    }
-
-    return next;
-  };
-  return plugin;
-};
-
-export default pluginFactory;
diff --git a/packages/code-generator/src/plugins/component/rax/containerMethods.ts b/packages/code-generator/src/plugins/component/rax/containerMethods.ts
new file mode 100644
index 000000000..b13c81071
--- /dev/null
+++ b/packages/code-generator/src/plugins/component/rax/containerMethods.ts
@@ -0,0 +1,80 @@
+import { CLASS_DEFINE_CHUNK_NAME, COMMON_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
+
+import {
+  BuilderComponentPlugin,
+  BuilderComponentPluginFactory,
+  ChunkType,
+  FileType,
+  ICodeStruct,
+  IContainerInfo,
+} from '../../../types';
+
+import { RAX_CHUNK_NAME } from './const';
+
+type PluginConfig = {
+  fileType: string;
+};
+
+const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
+  const cfg: PluginConfig = {
+    fileType: FileType.JSX,
+    ...config,
+  };
+
+  const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+    const next: ICodeStruct = {
+      ...pre,
+    };
+
+    const ir = next.ir as IContainerInfo;
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: cfg.fileType,
+      name: CLASS_DEFINE_CHUNK_NAME.InsVar,
+      content: `
+         _methods = this._defineMethods();
+      `,
+      linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
+    });
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: cfg.fileType,
+      name: RAX_CHUNK_NAME.MethodsBegin,
+      content: `
+        _defineMethods() {
+          return ({
+      `,
+      linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd, CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod],
+    });
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: cfg.fileType,
+      name: RAX_CHUNK_NAME.MethodsEnd,
+      content: `
+          });
+        }
+      `,
+      linkAfter: [RAX_CHUNK_NAME.MethodsBegin, RAX_CHUNK_NAME.MethodsContent],
+    });
+
+    if (ir.methods && Object.keys(ir.methods).length > 0) {
+      Object.entries(ir.methods).forEach(([methodName, methodDefine]) => {
+        next.chunks.push({
+          type: ChunkType.STRING,
+          fileType: cfg.fileType,
+          name: RAX_CHUNK_NAME.MethodsContent,
+          content: `${methodName}: (${methodDefine.value}),`,
+          linkAfter: [RAX_CHUNK_NAME.MethodsBegin],
+        });
+      });
+    }
+
+    return next;
+  };
+  return plugin;
+};
+
+export default pluginFactory;
diff --git a/packages/code-generator/src/plugins/component/rax/jsx.ts b/packages/code-generator/src/plugins/component/rax/jsx.ts
index f41aa9de1..9b73f3ef1 100644
--- a/packages/code-generator/src/plugins/component/rax/jsx.ts
+++ b/packages/code-generator/src/plugins/component/rax/jsx.ts
@@ -3,25 +3,44 @@ import {
   BuilderComponentPluginFactory,
   ChunkType,
   FileType,
+  ICodeChunk,
   ICodeStruct,
   IContainerInfo,
+  isJSExpression,
+  isJSFunction,
+  JSExpression,
+  JSFunction,
+  NpmInfo,
 } from '../../../types';
 
 import { RAX_CHUNK_NAME } from './const';
+import { COMMON_CHUNK_NAME } from '../../../const/generator';
 
-import { createReactNodeGenerator } from '../../../utils/nodeToJSX';
+import { createNodeGenerator, generateReactCtrlLine, generateString } from '../../../utils/nodeToJSX';
+import { generateExpression } from '../../../utils/jsExpression';
 
 type PluginConfig = {
   fileType: string;
-}
+};
 
+// TODO: componentName 若并非大写字符打头，甚至并非是一个有效的 JS 标识符怎么办？？
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
   const cfg: PluginConfig = {
     fileType: FileType.JSX,
     ...config,
   };
 
-  const generator = createReactNodeGenerator();
+  const transformers = {
+    transformThis2Context,
+    transformJsExpr: (expr: string) =>
+      isLiteralAtomicExpr(expr) ? expr : `__$$eval(() => (${transformThis2Context(expr)}))`,
+    transformLoopExpr: (expr: string) => `__$$evalArray(() => (${transformThis2Context(expr)}))`,
+  };
+
+  const handlers = {
+    expression: (input: JSExpression) => transformers.transformJsExpr(generateExpression(input)),
+    function: (input: JSFunction) => transformers.transformJsExpr(input.value || 'null'),
+  };
 
   const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
     const next: ICodeStruct = {
@@ -29,22 +48,122 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
     };
 
     const ir = next.ir as IContainerInfo;
+
+    // Rax 构建到小程序的时候，不能给组件起起别名，得直接引用，故这里将所有的别名替换掉
+    // 先收集下所有的 alias 的映射
+    const componentsNameAliasMap = new Map<string, string>();
+    next.chunks.forEach((chunk) => {
+      if (isImportAliasDefineChunk(chunk)) {
+        componentsNameAliasMap.set(chunk.ext.aliasName, chunk.ext.originalName);
+      }
+    });
+
+    const mapComponentNameToAliasOrKeepIt = (componentName: string) =>
+      componentsNameAliasMap.get(componentName) || componentName;
+
+    // 然后过滤掉所有的别名 chunks
+    next.chunks = next.chunks.filter((chunk) => !isImportAliasDefineChunk(chunk));
+
+    // 创建代码生成器
+    const generator = createNodeGenerator(
+      {
+        string: generateString,
+        expression: (input) => [handlers.expression(input)],
+        function: (input) => [handlers.function(input)],
+      },
+      [generateReactCtrlLine],
+      {
+        expression: (input) => (isJSExpression(input) ? handlers.expression(input) : ''),
+        function: (input) => (isJSFunction(input) ? handlers.function(input) : ''),
+        loopDataExpr: (input) => (typeof input === 'string' ? transformers.transformLoopExpr(input) : ''),
+        tagName: mapComponentNameToAliasOrKeepIt,
+      },
+    );
+
+    // 生成 JSX 代码
     const jsxContent = generator(ir);
 
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: cfg.fileType,
+      name: RAX_CHUNK_NAME.ClassRenderPre,
+      content: `const __$$context = this._context;`,
+      linkAfter: [RAX_CHUNK_NAME.ClassRenderBegin],
+    });
+
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: cfg.fileType,
       name: RAX_CHUNK_NAME.ClassRenderJSX,
       content: `return ${jsxContent};`,
-      linkAfter: [
-        RAX_CHUNK_NAME.ClassRenderStart,
-        RAX_CHUNK_NAME.ClassRenderPre,
-      ],
+      linkAfter: [RAX_CHUNK_NAME.ClassRenderBegin, RAX_CHUNK_NAME.ClassRenderPre],
+    });
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: cfg.fileType,
+      name: COMMON_CHUNK_NAME.CustomContent,
+      content: `
+
+        function __$$eval(expr) {
+          try {
+            return expr();
+          } catch (err) {
+            console.warn('Failed to evaluate: ', expr, err);
+          }
+        }
+
+        function __$$evalArray(expr) {
+          const res = __$$eval(expr);
+          return Array.isArray(res) ? res : [];
+        }
+
+      `,
+      linkAfter: [COMMON_CHUNK_NAME.FileExport],
     });
 
     return next;
   };
+
   return plugin;
 };
 
 export default pluginFactory;
+
+function isImportAliasDefineChunk(
+  chunk: ICodeChunk,
+): chunk is ICodeChunk & {
+  ext: {
+    aliasName: string;
+    originalName: string;
+    dependency: NpmInfo;
+  };
+} {
+  return (
+    chunk.name === COMMON_CHUNK_NAME.ImportAliasDefine &&
+    !!chunk.ext &&
+    typeof chunk.ext.aliasName === 'string' &&
+    typeof chunk.ext.originalName === 'string' &&
+    !!(chunk.ext.dependency as NpmInfo | null)?.componentName
+  );
+}
+
+/**
+ * 判断是否是原子类型的表达式
+ */
+function isLiteralAtomicExpr(expr: string): boolean {
+  return expr === 'null' || expr === 'undefined' || expr === 'true' || expr === 'false' || /^\d+$/.test(expr);
+}
+
+/**
+ * 将所有的 this.xxx 替换为 __$$context.xxx
+ * @param expr
+ */
+function transformThis2Context(expr: string): string {
+  // TODO: 应该根据语法分析来搞
+  // TODO: 如何替换自定义名字的循环变量？（generateReactCtrlLine）
+  return expr
+    .replace(/\bthis\.item\./, () => 'item.')
+    .replace(/\bthis\.index\./, () => 'index.')
+    .replace(/\bthis\./, () => '__$$context.');
+}
diff --git a/packages/code-generator/src/plugins/component/react/containerClass.ts b/packages/code-generator/src/plugins/component/react/containerClass.ts
index f0e591583..82c042533 100644
--- a/packages/code-generator/src/plugins/component/react/containerClass.ts
+++ b/packages/code-generator/src/plugins/component/react/containerClass.ts
@@ -30,6 +30,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       linkAfter: [
         COMMON_CHUNK_NAME.ExternalDepsImport,
         COMMON_CHUNK_NAME.InternalDepsImport,
+        COMMON_CHUNK_NAME.ImportAliasDefine,
         COMMON_CHUNK_NAME.FileVarDefine,
         COMMON_CHUNK_NAME.FileUtilDefine,
       ],
@@ -97,6 +98,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       linkAfter: [
         COMMON_CHUNK_NAME.ExternalDepsImport,
         COMMON_CHUNK_NAME.InternalDepsImport,
+        COMMON_CHUNK_NAME.ImportAliasDefine,
         COMMON_CHUNK_NAME.FileVarDefine,
         COMMON_CHUNK_NAME.FileUtilDefine,
         CLASS_DEFINE_CHUNK_NAME.End,
diff --git a/packages/code-generator/src/plugins/component/recore/pageDataSource.ts b/packages/code-generator/src/plugins/component/recore/pageDataSource.ts
index 87d496aaf..bb7d91857 100644
--- a/packages/code-generator/src/plugins/component/recore/pageDataSource.ts
+++ b/packages/code-generator/src/plugins/component/recore/pageDataSource.ts
@@ -7,16 +7,15 @@ import {
   FileType,
   ICodeStruct,
   IContainerInfo,
-  IJSExpression,
   CompositeValue,
+  JSExpression,
 } from '../../../types';
 
 import { generateCompositeType, handleStringValueDefault } from '../../../utils/compositeType';
 import { generateExpression } from '../../../utils/jsExpression';
 
-function packJsExpression(exp: unknown): string {
-  const expression = exp as IJSExpression;
-  const funcStr = generateExpression(expression);
+function packJsExpression(exp: JSExpression): string {
+  const funcStr = generateExpression(exp);
   return `function() { return (${funcStr}); }`;
 }
 
@@ -29,14 +28,11 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
     const ir = next.ir as IContainerInfo;
     if (ir.dataSource) {
       const { dataSource } = ir;
-      const {
-        list,
-        ...rest
-      } = dataSource;
+      const { list, ...rest } = dataSource;
 
       let attrs: string[] = [];
 
-      const extConfigs = Object.keys(rest).map(extConfigName => {
+      const extConfigs = Object.keys(rest).map((extConfigName) => {
         const value = (rest as Record<string, CompositeValue>)[extConfigName];
         const [isString, valueStr] = generateCompositeType(value);
         return `${extConfigName}: ${isString ? `'${valueStr}'` : valueStr}`;
@@ -44,9 +40,11 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
 
       attrs = [...attrs, ...extConfigs];
 
-      const listProp = handleStringValueDefault(generateCompositeType(list as unknown as CompositeValue, {
-        expression: packJsExpression,
-      }));
+      const listProp = handleStringValueDefault(
+        generateCompositeType((list as unknown) as CompositeValue, {
+          expression: packJsExpression,
+        }),
+      );
 
       attrs.push(`list: ${listProp}`);
 
diff --git a/packages/code-generator/src/plugins/project/constants.ts b/packages/code-generator/src/plugins/project/constants.ts
index 5c02e9711..cf798686b 100644
--- a/packages/code-generator/src/plugins/project/constants.ts
+++ b/packages/code-generator/src/plugins/project/constants.ts
@@ -29,6 +29,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
         linkAfter: [
           COMMON_CHUNK_NAME.ExternalDepsImport,
           COMMON_CHUNK_NAME.InternalDepsImport,
+          COMMON_CHUNK_NAME.ImportAliasDefine,
         ],
       });
 
@@ -42,6 +43,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
         linkAfter: [
           COMMON_CHUNK_NAME.ExternalDepsImport,
           COMMON_CHUNK_NAME.InternalDepsImport,
+          COMMON_CHUNK_NAME.ImportAliasDefine,
           COMMON_CHUNK_NAME.FileVarDefine,
           COMMON_CHUNK_NAME.FileUtilDefine,
           COMMON_CHUNK_NAME.FileMainContent,
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/plugins/entry.ts b/packages/code-generator/src/plugins/project/framework/icejs/plugins/entry.ts
index 0cf3918a7..9d0e9fcb3 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/plugins/entry.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/plugins/entry.ts
@@ -45,6 +45,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       linkAfter: [
         COMMON_CHUNK_NAME.ExternalDepsImport,
         COMMON_CHUNK_NAME.InternalDepsImport,
+        COMMON_CHUNK_NAME.ImportAliasDefine,
         COMMON_CHUNK_NAME.FileVarDefine,
         COMMON_CHUNK_NAME.FileUtilDefine,
       ],
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/plugins/router.ts b/packages/code-generator/src/plugins/project/framework/icejs/plugins/router.ts
index b4f2d718f..56e38d45f 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/plugins/router.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/plugins/router.ts
@@ -39,7 +39,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
             children: [
               ${ir.routes
                 .map(
-                  route => `
+                  (route) => `
                     {
                       path: '${route.path}',
                       component: ${route.componentName},
@@ -54,6 +54,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       linkAfter: [
         COMMON_CHUNK_NAME.ExternalDepsImport,
         COMMON_CHUNK_NAME.InternalDepsImport,
+        COMMON_CHUNK_NAME.ImportAliasDefine,
         COMMON_CHUNK_NAME.FileUtilDefine,
       ],
     });
@@ -69,6 +70,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
         COMMON_CHUNK_NAME.ExternalDepsImport,
         COMMON_CHUNK_NAME.InternalDepsImport,
         COMMON_CHUNK_NAME.FileUtilDefine,
+        COMMON_CHUNK_NAME.ImportAliasDefine,
         COMMON_CHUNK_NAME.FileVarDefine,
         COMMON_CHUNK_NAME.FileMainContent,
       ],
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/entry.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/entry.ts
index 09bc07af8..e586ac2e2 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/entry.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/entry.ts
@@ -38,6 +38,7 @@ runApp(appConfig);
       linkAfter: [
         COMMON_CHUNK_NAME.ExternalDepsImport,
         COMMON_CHUNK_NAME.InternalDepsImport,
+        COMMON_CHUNK_NAME.ImportAliasDefine,
         COMMON_CHUNK_NAME.FileVarDefine,
         COMMON_CHUNK_NAME.FileUtilDefine,
       ],
diff --git a/packages/code-generator/src/plugins/project/i18n.ts b/packages/code-generator/src/plugins/project/i18n.ts
index cada1fd96..2ecc68cfb 100644
--- a/packages/code-generator/src/plugins/project/i18n.ts
+++ b/packages/code-generator/src/plugins/project/i18n.ts
@@ -17,7 +17,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
 
     const ir = next.ir as IProjectInfo;
     if (ir.i18n) {
-      const [, i18nStr] = generateCompositeType(ir.i18n);
+      const [, i18nStr] = generateCompositeType(ir.i18n, {});
 
       next.chunks.push({
         type: ChunkType.STRING,
@@ -36,6 +36,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
         linkAfter: [
           COMMON_CHUNK_NAME.ExternalDepsImport,
           COMMON_CHUNK_NAME.InternalDepsImport,
+          COMMON_CHUNK_NAME.ImportAliasDefine,
           COMMON_CHUNK_NAME.FileVarDefine,
           COMMON_CHUNK_NAME.FileUtilDefine,
         ],
@@ -54,6 +55,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
         linkAfter: [
           COMMON_CHUNK_NAME.ExternalDepsImport,
           COMMON_CHUNK_NAME.InternalDepsImport,
+          COMMON_CHUNK_NAME.ImportAliasDefine,
           COMMON_CHUNK_NAME.FileVarDefine,
           COMMON_CHUNK_NAME.FileUtilDefine,
           COMMON_CHUNK_NAME.FileMainContent,
diff --git a/packages/code-generator/src/plugins/project/utils.ts b/packages/code-generator/src/plugins/project/utils.ts
index 32e7c5d17..5cdb21e81 100644
--- a/packages/code-generator/src/plugins/project/utils.ts
+++ b/packages/code-generator/src/plugins/project/utils.ts
@@ -28,24 +28,26 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
         linkAfter: [
           COMMON_CHUNK_NAME.ExternalDepsImport,
           COMMON_CHUNK_NAME.InternalDepsImport,
+          COMMON_CHUNK_NAME.ImportAliasDefine,
           COMMON_CHUNK_NAME.FileVarDefine,
           COMMON_CHUNK_NAME.FileUtilDefine,
           COMMON_CHUNK_NAME.FileMainContent,
         ],
       });
 
-      ir.utils.forEach(util => {
+      ir.utils.forEach((util) => {
         if (util.type === 'function') {
           next.chunks.push({
             type: ChunkType.STRING,
             fileType: FileType.JS,
             name: COMMON_CHUNK_NAME.FileVarDefine,
             content: `
-              const ${util.name} = ${util.content};
+              const ${util.name} = ${util.content.value};
             `,
             linkAfter: [
               COMMON_CHUNK_NAME.ExternalDepsImport,
               COMMON_CHUNK_NAME.InternalDepsImport,
+              COMMON_CHUNK_NAME.ImportAliasDefine,
             ],
           });
         }
@@ -54,12 +56,11 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
           type: ChunkType.STRING,
           fileType: FileType.JS,
           name: COMMON_CHUNK_NAME.FileExport,
-          content: `
-            ${util.name},
-          `,
+          content: `${util.name},`,
           linkAfter: [
             COMMON_CHUNK_NAME.ExternalDepsImport,
             COMMON_CHUNK_NAME.InternalDepsImport,
+            COMMON_CHUNK_NAME.ImportAliasDefine,
             COMMON_CHUNK_NAME.FileVarDefine,
             COMMON_CHUNK_NAME.FileUtilDefine,
             COMMON_CHUNK_NAME.FileMainContent,
@@ -77,6 +78,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
         linkAfter: [
           COMMON_CHUNK_NAME.ExternalDepsImport,
           COMMON_CHUNK_NAME.InternalDepsImport,
+          COMMON_CHUNK_NAME.ImportAliasDefine,
           COMMON_CHUNK_NAME.FileVarDefine,
           COMMON_CHUNK_NAME.FileUtilDefine,
           COMMON_CHUNK_NAME.FileMainContent,
diff --git a/packages/code-generator/src/solutions/rax-app.ts b/packages/code-generator/src/solutions/rax-app.ts
index 0a1a55154..230c93813 100644
--- a/packages/code-generator/src/solutions/rax-app.ts
+++ b/packages/code-generator/src/solutions/rax-app.ts
@@ -4,8 +4,8 @@ import { createProjectBuilder } from '../generator/ProjectBuilder';
 
 import esModule from '../plugins/common/esmodule';
 import containerClass from '../plugins/component/rax/containerClass';
-import containerLifeCycle from '../plugins/component/rax/containerLifeCycle';
-import containerMethod from '../plugins/component/rax/containerMethod';
+import containerLifeCycles from '../plugins/component/rax/containerLifeCycle';
+import containerMethods from '../plugins/component/rax/containerMethods';
 import containerInitState from '../plugins/component/rax/containerInitState';
 import containerInjectContext from '../plugins/component/rax/containerInjectContext';
 import containerInjectDataSourceEngine from '../plugins/component/rax/containerInjectDataSourceEngine';
@@ -27,29 +27,27 @@ export default function createIceJsProjectBuilder(): IProjectBuilder {
     plugins: {
       components: [
         commonDeps(),
-        esModule({
-          fileType: 'jsx',
-        }),
+        esModule({ fileType: 'jsx' }),
         containerClass(),
-        containerInjectUtils(),
         containerInitState(),
-        containerLifeCycle(),
-        containerMethod(),
+        containerMethods(),
+        containerInjectContext(),
+        containerInjectDataSourceEngine(),
+        containerInjectUtils(),
+        containerLifeCycles(),
         jsx(),
         css(),
       ],
       pages: [
         commonDeps(),
-        esModule({
-          fileType: 'jsx',
-        }),
+        esModule({ fileType: 'jsx' }),
         containerClass(),
         containerInitState(),
+        containerMethods(),
         containerInjectContext(),
         containerInjectDataSourceEngine(),
         containerInjectUtils(),
-        containerLifeCycle(),
-        containerMethod(),
+        containerLifeCycles(),
         jsx(),
         css(),
       ],
diff --git a/packages/code-generator/src/types/core.ts b/packages/code-generator/src/types/core.ts
index 6eb58ff17..2ddd14d46 100644
--- a/packages/code-generator/src/types/core.ts
+++ b/packages/code-generator/src/types/core.ts
@@ -1,12 +1,6 @@
-import {
-  IBasicSchema,
-  IParseResult,
-  IProjectSchema,
-  IResultDir,
-  IResultFile,
-  IComponentNodeItem,
-  IJSExpression,
-} from './index';
+import { JSExpression, JSFunction, NodeSchema } from '@ali/lowcode-types';
+import { CustomHandlerSet } from '../utils/compositeType';
+import { IBasicSchema, IParseResult, IProjectSchema, IResultDir, IResultFile, IComponentNodeItem } from './index';
 
 export enum FileType {
   CSS = 'css',
@@ -42,6 +36,7 @@ export interface ICodeChunk {
   subModule?: string;
   content: ChunkContent;
   linkAfter: string[];
+  ext?: Record<string, unknown>;
 }
 
 export interface IBaseCodeStruct {
@@ -54,17 +49,12 @@ export interface ICodeStruct extends IBaseCodeStruct {
   chunks: ICodeChunk[];
 }
 
-export type BuilderComponentPlugin = (
-  initStruct: ICodeStruct,
-) => Promise<ICodeStruct>;
+export type BuilderComponentPlugin = (initStruct: ICodeStruct) => Promise<ICodeStruct>;
 
 export type BuilderComponentPluginFactory<T> = (config?: T) => BuilderComponentPlugin;
 
 export interface IChunkBuilder {
-  run(
-    ir: any,
-    initialStructure?: ICodeStruct,
-  ): Promise<{ chunks: ICodeChunk[][] }>;
+  run(ir: any, initialStructure?: ICodeStruct): Promise<{ chunks: ICodeChunk[][] }>;
   getPlugins(): BuilderComponentPlugin[];
   addPlugin(plugin: BuilderComponentPlugin): void;
 }
@@ -81,10 +71,7 @@ export interface ICompiledModule {
 export interface IModuleBuilder {
   generateModule(input: unknown): Promise<ICompiledModule>;
   generateModuleCode(schema: IBasicSchema | string): Promise<IResultDir>;
-  linkCodeChunks(
-    chunks: Record<string, ICodeChunk[]>,
-    fileName: string,
-  ): IResultFile[];
+  linkCodeChunks(chunks: Record<string, ICodeChunk[]>, fileName: string): IResultFile[];
   addPlugin(plugin: BuilderComponentPlugin): void;
 }
 
@@ -155,21 +142,23 @@ export enum PIECE_TYPE {
   ATTR = 'NodeCodePieceAttr',
   CHILDREN = 'NodeCodePieceChildren',
   AFTER = 'NodeCodePieceAfter',
-};
+}
 
 export interface CodePiece {
   value: string;
   type: PIECE_TYPE;
 }
 
+// TODO: 这个 HandlerSet 和 CustomHandlerSet 为啥定义还不一样？
 export interface HandlerSet<T> {
   string?: (input: string) => T[];
-  expression?: (input: IJSExpression) => T[];
-  node?: (input: IComponentNodeItem) => T[];
+  expression?: (input: JSExpression) => T[];
+  function?: (input: JSFunction) => T[];
+  node?: (input: NodeSchema) => T[];
   common?: (input: unknown) => T[];
 }
 
-export type ExtGeneratorPlugin = (nodeItem: IComponentNodeItem) => CodePiece[];
+export type ExtGeneratorPlugin = (nodeItem: IComponentNodeItem, handlers: CustomHandlerSet) => CodePiece[];
 
 // export interface InteratorScope {
 //   [$item: string]: string;           // $item 默认取值 "item"
diff --git a/packages/code-generator/src/types/intermediate.ts b/packages/code-generator/src/types/intermediate.ts
index c41f4d7c9..c9052ac96 100644
--- a/packages/code-generator/src/types/intermediate.ts
+++ b/packages/code-generator/src/types/intermediate.ts
@@ -16,10 +16,11 @@ export interface IParseResult {
   project?: IProjectInfo;
 }
 
-export interface IContainerInfo extends IContainerNodeItem, IWithDependency {
-  containerType: string;
-  moduleName: string;
-}
+export type IContainerInfo = IContainerNodeItem &
+  IWithDependency & {
+    containerType: string;
+    moduleName: string;
+  };
 
 export interface IWithDependency {
   deps?: IDependency[];
diff --git a/packages/code-generator/src/types/schema.ts b/packages/code-generator/src/types/schema.ts
index 68226e8ab..9cd634cb7 100644
--- a/packages/code-generator/src/types/schema.ts
+++ b/packages/code-generator/src/types/schema.ts
@@ -1,5 +1,19 @@
-// 搭建基础协议、搭建入料协议的数据规范
-import { IExternalDependency } from './index';
+import {
+  ProjectSchema,
+  CompositeObject,
+  JSExpression,
+  JSONObject,
+  NpmInfo,
+  NodeData,
+  NodeSchema,
+  UtilItem,
+  PageSchema,
+  BlockSchema,
+  ComponentSchema,
+  DataSourceConfig,
+} from '@ali/lowcode-types';
+
+export * from '@ali/lowcode-types';
 
 /**
  * 搭建基础协议 - 函数表达式
@@ -7,37 +21,12 @@ import { IExternalDependency } from './index';
  * @export
  * @interface IJSExpression
  */
-export interface IJSExpression {
-  type: 'JSExpression';
-  value: string;
-  [extConfigName: string]: any;
-}
+export type IJSExpression = JSExpression;
 
 // JSON 基本类型
-export interface IJSONObject {
-  [key: string]: JSONValue;
-}
+export type IJSONObject = JSONObject;
 
-export type JSONValue =
-  | boolean
-  | string
-  | number
-  | null
-  | JSONArray
-  | IJSONObject;
-export type JSONArray = JSONValue[];
-
-export type CompositeArray = CompositeValue[];
-export interface ICompositeObject {
-  [key: string]: CompositeValue;
-}
-
-// 复合类型
-export type CompositeValue =
-  | JSONValue
-  | IJSExpression
-  | CompositeArray
-  | ICompositeObject;
+export type ICompositeObject = CompositeObject;
 
 /**
  * 搭建基础协议 - 多语言描述
@@ -57,38 +46,20 @@ export interface II18nMap {
  * @export
  * @interface IBasicSchema
  */
-export interface IBasicSchema {
-  version: string; // 当前协议版本号
-  componentsMap: IComponentsMapItem[]; // 组件映射关系
-  componentsTree: Array<IContainerNodeItem | IComponentNodeItem>; // 描述模版/页面/区块/低代码业务组件的组件树 低代码业务组件树描述，固定长度为1，且顶层为低代码业务组件容器描述
-  utils?: IUtilItem[]; // 工具类扩展映射关系 低代码业务组件不包含
-  i18n?: II18nMap; // 国际化语料
-}
+export interface IBasicSchema extends ProjectSchema {}
 
 export interface IProjectSchema extends IBasicSchema {
+  // TODO: 下面的几个值真的需要吗？....
   constants: Record<string, string>; // 应用范围内的全局常量；
   css: string; // 应用范围内的全局样式；
   config: IAppConfig; // 当前应用配置信息
   meta: IAppMeta; // 当前应用元数据信息
 }
 
-/**
- * 搭建基础协议 - 单个组件描述
- *
- * @export
- * @interface IComponentsMapItem
- */
-export interface IComponentsMapItem extends IExternalDependency {
-  componentName: string; // 组件名称
-}
+export interface IComponentsMapItem extends NpmInfo {}
 
-export interface IUtilItem {
-  name: string;
-  type: 'npm' | 'tnpm' | 'function';
-  content: IExternalDependency | IJSExpression;
-}
-
-export type ChildNodeItem = string | IJSExpression | IComponentNodeItem;
+export type IUtilItem = UtilItem;
+export type ChildNodeItem = NodeData;
 export type ChildNodeType = ChildNodeItem | ChildNodeItem[];
 
 /**
@@ -98,18 +69,7 @@ export type ChildNodeType = ChildNodeItem | ChildNodeItem[];
  * @export
  * @interface IComponentNodeItem
  */
-export interface IComponentNodeItem {
-  // TODO: 不需要 id 字段，暂时简单兼容
-  id?: string;
-  componentName: string; // 组件名称 必填、首字母大写
-  props: {
-    [propName: string]: CompositeValue; // 业务属性
-  }; // 组件属性对象
-  condition?: CompositeValue; // 渲染条件
-  loop?: CompositeValue; // 循环数据
-  loopArgs?: [string, string]; // 循环迭代对象、索引名称 ["item", "index"]
-  children?: ChildNodeType; // 子节点
-}
+export interface IComponentNodeItem extends NodeSchema {}
 
 /**
  * 搭建基础协议 - 单个容器节点描述
@@ -118,31 +78,7 @@ export interface IComponentNodeItem {
  * @interface IContainerNodeItem
  * @extends {IComponentNodeItem}
  */
-export interface IContainerNodeItem extends IComponentNodeItem {
-  componentName: 'Page' | 'Block' | 'Component'; // 'Page' | 'Block' | 'Component'  组件类型 必填、首字母大写
-  fileName: string; // 文件名称 必填、英文
-  state?: {
-    [stateName: string]: CompositeValue; // 容器初始数据
-  };
-  css?: string; // 样式文件 用于描述容器组件内部节点的样式，对应生成一个独立的样式文件，在对应容器组件生成的 .jsx 文件中 import 引入；
-  /**
-   * LifeCycle
-   * • constructor(props, context)
-   * • 说明：初始化渲染时执行，常用于设置state值；
-   * • render()
-   * • 说明：执行于容器组件React Class的render方法最前，常用于计算变量挂载到this对象上，供props上属性绑定。此render()方法不需要设置return返回值。
-   * • componentDidMount()
-   * • componentDidUpdate(prevProps, prevState, snapshot)
-   * • componentWillUnmount()
-   * • componentDidCatch(error, info)
-   */
-  lifeCycles?: Record<string, IJSExpression>; // 生命周期Hook方法
-  methods?: Record<string, IJSExpression>; // 自定义方法设置
-  dataSource?: {
-    list: IDataSourceConfig[];
-  }; // 异步数据源配置
-  meta?: IBasicMeta | IPageMeta;
-}
+export type IContainerNodeItem = PageSchema | BlockSchema | ComponentSchema;
 
 /**
  * 搭建基础协议 - 数据源单个配置
@@ -150,69 +86,25 @@ export interface IContainerNodeItem extends IComponentNodeItem {
  * @export
  * @interface IDataSourceConfig
  */
-export interface IDataSourceConfig {
-  id: string; // 数据请求ID标识
-  isInit: boolean; // 是否为初始数据 支持表达式 值为true时，将在组件初始化渲染时自动发送当前数据请求
-  type: string; // 数据请求类型 'fetch' | 'mtop' | 'jsonp' | 'custom'
-  requestHandler?: IJSExpression; // 自定义扩展的外部请求处理器 仅type='custom'时生效
-  options?: IFetchOptions; // 请求参数配置 每种请求类型对应不同参数
-  dataHandler?: IJSExpression; // 数据结果处理函数，形如：(data, err) => Object
-}
-
-/**
- * 搭建基础协议 - 请求参数配置
- *
- * @export
- * @interface IFetchOptions
- */
-export interface IFetchOptions {
-  url: string; // 请求地址 支持表达式
-  params?: {
-    // 请求参数
-    [key: string]: any;
-  };
-  method: 'GET' | 'POST';
-  isCors?: boolean; // 是否支持跨域，对应credentials = 'include'
-  timeout?: number; // 超时时长
-  headers?: {
-    // 自定义请求头
-    [key: string]: string;
-  };
-  [extConfigName: string]: any;
-}
+export interface IDataSourceConfig extends DataSourceConfig {}
 
+// TODO...
 export interface IBasicMeta {
   title: string; // 标题描述
 }
 
+// TODO...
 export interface IPageMeta extends IBasicMeta {
   router: string; // 页面路由
   spmb?: string; // spm
 }
 
-// "theme": {
-//   //for Fusion use dpl defined
-//   "package": "@alife/theme-fusion",
-//   "version": "^0.1.0",
-
-//   //for Antd use variable
-//   "primary": "#ff9966"
-// }
-
-// "layout": {
-//   "componentName": "BasicLayout",
-//   "props": {
-//     "logo": "...",
-//     "name": "测试网站"
-//   },
-// },
-
 export interface IAppConfig {
-  sdkVersion: string; // 渲染模块版本
-  historyMode: 'brower' | 'hash'; // 浏览器路由：brower  哈希路由：hash
-  targetRootID: string; // 渲染根节点 ID
-  layout: IComponentNodeItem;
-  theme: object; // 主题配置，根据接入的主题模块不同
+  sdkVersion?: string; // 渲染模块版本
+  historyMode?: 'browser' | 'hash'; // 浏览器路由：browser  哈希路由：hash
+  targetRootID?: string; // 渲染根节点 ID
+  layout?: IComponentNodeItem;
+  theme?: object; // 主题配置，根据接入的主题模块不同
 }
 
 export interface IAppMeta {
diff --git a/packages/code-generator/src/utils/compositeType.ts b/packages/code-generator/src/utils/compositeType.ts
index b62b2afe3..6c4e4875a 100644
--- a/packages/code-generator/src/utils/compositeType.ts
+++ b/packages/code-generator/src/utils/compositeType.ts
@@ -1,37 +1,43 @@
-import { CompositeArray, CompositeValue, ICompositeObject } from '../types';
-import { generateExpression, isJsExpression } from './jsExpression';
+import {
+  CompositeArray,
+  CompositeValue,
+  CompositeObject,
+  JSExpression,
+  JSFunction,
+  JSONArray,
+  JSONObject,
+  isJSExpression,
+  isJSFunction,
+  isJSSlot,
+  JSSlot,
+  NodeSchema,
+  NodeData,
+} from '../types';
+import { generateExpression, generateFunction } from './jsExpression';
 
-type CustomHandler = (data: unknown) => string;
-interface CustomHandlerSet {
-  boolean?: CustomHandler;
-  number?: CustomHandler;
-  string?: CustomHandler;
-  array?: CustomHandler;
-  object?: CustomHandler;
-  expression?: CustomHandler;
+export interface CustomHandlerSet {
+  boolean?: (bool: boolean) => string;
+  number?: (num: number) => string;
+  string?: (str: string) => string;
+  array?: (arr: JSONArray | CompositeArray) => string;
+  object?: (obj: JSONObject | CompositeObject) => string;
+  expression?: (jsExpr: JSExpression) => string;
+  function?: (jsFunc: JSFunction) => string;
+  slot?: (jsSlot: JSSlot) => string;
+  node?: (node: NodeSchema) => string;
+  loopDataExpr?: (loopDataExpr: string) => string;
+  conditionExpr?: (conditionExpr: string) => string;
+  tagName?: (tagName: string) => string;
 }
 
-function generateArray(
-  value: CompositeArray,
-  handlers: CustomHandlerSet = {},
-): string {
-  const body = value.map(v => generateUnknownType(v, handlers)).join(',');
+function generateArray(value: CompositeArray, handlers: CustomHandlerSet): string {
+  const body = value.map((v) => generateUnknownType(v, handlers)).join(',');
   return `[${body}]`;
 }
 
-function generateObject(
-  value: ICompositeObject,
-  handlers: CustomHandlerSet = {},
-): string {
-  if (isJsExpression(value)) {
-    if (handlers.expression) {
-      return handlers.expression(value);
-    }
-    return generateExpression(value);
-  }
-
+function generateObject(value: CompositeObject, handlers: CustomHandlerSet): string {
   const body = Object.keys(value)
-    .map(key => {
+    .map((key) => {
       const v = generateUnknownType(value[key], handlers);
       return `${key}: ${v}`;
     })
@@ -40,39 +46,65 @@ function generateObject(
   return `{${body}}`;
 }
 
-export function generateUnknownType(
-  value: CompositeValue,
-  handlers: CustomHandlerSet = {},
-): string {
+export function generateUnknownType(value: CompositeValue, handlers: CustomHandlerSet = {}): string {
   if (Array.isArray(value)) {
     if (handlers.array) {
       return handlers.array(value);
     }
-    return generateArray(value as CompositeArray, handlers);
+    return generateArray(value, handlers);
   } else if (typeof value === 'object') {
+    if (value === null) {
+      return 'null';
+    }
+
+    if (isJSExpression(value)) {
+      if (handlers.expression) {
+        return handlers.expression(value);
+      }
+      return generateExpression(value);
+    }
+
+    if (isJSFunction(value)) {
+      if (handlers.function) {
+        return handlers.function(value);
+      }
+      return generateFunction(value);
+    }
+
+    if (isJSSlot(value)) {
+      if (handlers.slot) {
+        return handlers.slot(value);
+      }
+
+      return generateSlot(value, handlers);
+    }
+
     if (handlers.object) {
       return handlers.object(value);
     }
-    return generateObject(value as ICompositeObject, handlers);
+
+    return generateObject(value, handlers);
   } else if (typeof value === 'string') {
     if (handlers.string) {
       return handlers.string(value);
     }
-    return `'${value}'`;
+
+    return JSON.stringify(value);
   } else if (typeof value === 'number' && handlers.number) {
     return handlers.number(value);
   } else if (typeof value === 'boolean' && handlers.boolean) {
     return handlers.boolean(value);
+  } else if (typeof value === 'undefined') {
+    return 'undefined';
   }
-  return `${value}`;
+
+  return JSON.stringify(value);
 }
 
-export function generateCompositeType(
-  value: CompositeValue,
-  handlers: CustomHandlerSet = {},
-): [boolean, string] {
+export function generateCompositeType(value: CompositeValue, handlers: CustomHandlerSet = {}): [boolean, string] {
   const result = generateUnknownType(value, handlers);
 
+  // TODO：什么场景下会返回这样的字符串？？
   if (result.substr(0, 1) === "'" && result.substr(-1, 1) === "'") {
     return [true, result.substring(1, result.length - 1)];
   }
@@ -84,5 +116,50 @@ export function handleStringValueDefault([isString, result]: [boolean, string])
   if (isString) {
     return `'${result}'`;
   }
+
   return result;
 }
+
+function generateSlot({ title, params, value }: JSSlot, handlers: CustomHandlerSet): string {
+  return [
+    title && generateSingleLineComment(title),
+    `(`,
+    ...(params || []),
+    `) => (`,
+    ...(!value
+      ? ['null']
+      : !Array.isArray(value)
+      ? [generateNodeData(value, handlers)]
+      : value.map((node) => generateNodeData(node, handlers))),
+    `)`,
+  ]
+    .filter(Boolean)
+    .join('');
+}
+
+function generateNodeData(node: NodeData, handlers: CustomHandlerSet): string {
+  if (typeof node === 'string') {
+    if (handlers.string) {
+      return handlers.string(node);
+    }
+
+    return JSON.stringify(node);
+  }
+
+  if (isJSExpression(node)) {
+    if (handlers.expression) {
+      return handlers.expression(node);
+    }
+    return generateExpression(node);
+  }
+
+  if (!handlers.node) {
+    throw new Error('cannot handle NodeSchema, handlers.node is missing');
+  }
+
+  return handlers.node(node);
+}
+
+function generateSingleLineComment(commentText: string): string {
+  return '/* ' + commentText.split('\n').join(' ').replace(/\*\//g, '*-/') + '*/';
+}
diff --git a/packages/code-generator/src/utils/jsExpression.ts b/packages/code-generator/src/utils/jsExpression.ts
index 9c8541692..b598ae2e3 100644
--- a/packages/code-generator/src/utils/jsExpression.ts
+++ b/packages/code-generator/src/utils/jsExpression.ts
@@ -1,39 +1,6 @@
-import traverse from '@babel/traverse';
-import * as parser from '@babel/parser';
-import { CodeGeneratorError, IJSExpression } from '../types';
-
-let count = 0;
-
-function test(functionBody: string) {
-  console.log(functionBody);
-  console.log('---->');
-  try {
-    const parseResult = parser.parse(functionBody);
-    // console.log(JSON.stringify(parseResult));
-    traverse(parseResult, {
-      enter(path) {
-        console.log('path: ', JSON.stringify(path));
-      }
-    });
-
-    if (count === 0) {
-      count++;
-
-      test('this.aaa && this.bbb');
-    }
-  } catch (error) {
-    // console.log('Error');
-    console.log(error.message);
-  }
-  console.log('=====================');
-}
-
-export function transformFuncExpr2MethodMember(
-  methodName: string,
-  functionBody: string,
-): string {
-  // test(functionBody);
+import { CodeGeneratorError, isJSExpression, isJSFunction } from '../types';
 
+export function transformFuncExpr2MethodMember(methodName: string, functionBody: string): string {
   const args = getFuncExprArguments(functionBody);
   const body = getFuncExprBody(functionBody);
 
@@ -56,8 +23,6 @@ export function getFuncExprBody(functionBody: string) {
   const start = functionBody.indexOf('{');
   const end = functionBody.lastIndexOf('}');
 
-  // test(functionBody);
-
   if (start < 0 || end < 0 || end < start) {
     throw new CodeGeneratorError('JSExpression has no valid body.');
   }
@@ -67,19 +32,18 @@ export function getFuncExprBody(functionBody: string) {
 }
 
 export function generateExpression(value: any): string {
-  if (value && (value as IJSExpression).type === 'JSExpression') {
-    // test((value as IJSExpression).value);
-
-    return (value as IJSExpression).value || 'null';
+  if (isJSExpression(value)) {
+    return value.value || 'null';
   }
 
   throw new CodeGeneratorError('Not a JSExpression');
 }
 
-export function isJsExpression(value: any): boolean {
-  return (
-    value &&
-    typeof value === 'object' &&
-    (value as IJSExpression).type === 'JSExpression'
-  );
+// TODO: 这样真的可以吗？
+export function generateFunction(value: any): string {
+  if (isJSFunction(value)) {
+    return value.value || 'null';
+  }
+
+  throw new CodeGeneratorError('Not a isJSFunction');
 }
diff --git a/packages/code-generator/src/utils/nodeToJSX.ts b/packages/code-generator/src/utils/nodeToJSX.ts
index db5f87c1d..a6fe8614a 100644
--- a/packages/code-generator/src/utils/nodeToJSX.ts
+++ b/packages/code-generator/src/utils/nodeToJSX.ts
@@ -1,59 +1,73 @@
+import _ from 'lodash';
 import {
-  ChildNodeType,
-  IComponentNodeItem,
-  IJSExpression,
-  ChildNodeItem,
-  CodeGeneratorError,
   PIECE_TYPE,
+  CodeGeneratorError,
   CodePiece,
   HandlerSet,
   ExtGeneratorPlugin,
+  isJSExpression,
+  isJSFunction,
+  NodeData,
+  CompositeValue,
+  NodeSchema,
 } from '../types';
-import { generateCompositeType } from './compositeType';
+import { CustomHandlerSet, generateCompositeType } from './compositeType';
 import { generateExpression } from './jsExpression';
 
 // tslint:disable-next-line: no-empty
 const noop = () => [];
 
-export function handleChildren<T>(
-  children: ChildNodeType,
-  handlers: HandlerSet<T>,
-): T[] {
+export function handleChildren(children: NodeData | NodeData[], handlers: HandlerSet<string>): string[] {
   if (Array.isArray(children)) {
-    const list: ChildNodeItem[] = children as ChildNodeItem[];
-    return list
-      .map(child => handleChildren(child, handlers))
-      .reduce((p, c) => p.concat(c), []);
+    return children.map((child) => handleChildren(child, handlers)).reduce((p, c) => p.concat(c), []);
   } else if (typeof children === 'string') {
     const handler = handlers.string || handlers.common || noop;
-    return handler(children as string);
-  } else if ((children as IJSExpression).type === 'JSExpression') {
+    return handler(children);
+  } else if (isJSExpression(children)) {
     const handler = handlers.expression || handlers.common || noop;
-    return handler(children as IJSExpression);
+    return ['{', ...handler(children), '}'];
+  } else if (isJSFunction(children)) {
+    const handler = handlers.function || handlers.common || noop;
+    return handler(children);
   } else {
     const handler = handlers.node || handlers.common || noop;
-    return handler(children as IComponentNodeItem);
+    return handler(children);
   }
 }
 
-export function generateAttr(attrName: string, attrValue: any): CodePiece[] {
+export function generateAttr(attrName: string, attrValue: CompositeValue, handlers: CustomHandlerSet): CodePiece[] {
   if (attrName === 'initValue' || attrName === 'labelCol') {
     return [];
   }
-  const [isString, valueStr] = generateCompositeType(attrValue);
-  return [{
-    value: `${attrName}=${isString ? `"${valueStr}"` : `{${valueStr}}`}`,
-    type: PIECE_TYPE.ATTR,
-  }];
+  const [isString, valueStr] = generateCompositeType(attrValue, handlers);
+  return [
+    {
+      value: `${attrName}=${isString ? `"${valueStr}"` : `{${valueStr}}`}`,
+      type: PIECE_TYPE.ATTR,
+    },
+  ];
 }
 
-export function generateAttrs(nodeItem: IComponentNodeItem): CodePiece[] {
+export function generateAttrs(nodeItem: NodeSchema, handlers: CustomHandlerSet): CodePiece[] {
   const { props } = nodeItem;
+
   let pieces: CodePiece[] = [];
 
-  Object.keys(props).forEach((propName: string) =>
-    pieces = pieces.concat(generateAttr(propName, props[propName])),
-  );
+  if (props) {
+    if (!Array.isArray(props)) {
+      Object.keys(props).forEach((propName: string) => {
+        pieces = pieces.concat(generateAttr(propName, props[propName], handlers));
+      });
+    } else {
+      props.forEach((prop) => {
+        if (prop.name && !prop.spread) {
+          pieces = pieces.concat(generateAttr(prop.name, prop.value, handlers));
+        }
+
+        // TODO: 处理 spread 场景（<Xxx {...(something)}/>)
+      });
+    }
+  }
 
   return pieces;
 }
@@ -62,10 +76,11 @@ export function mapNodeName(src: string): string {
   if (src === 'Div') {
     return 'div';
   }
+
   return src;
 }
 
-export function generateBasicNode(nodeItem: IComponentNodeItem): CodePiece[] {
+export function generateBasicNode(nodeItem: NodeSchema): CodePiece[] {
   const pieces: CodePiece[] = [];
   pieces.push({
     value: mapNodeName(nodeItem.componentName),
@@ -75,20 +90,23 @@ export function generateBasicNode(nodeItem: IComponentNodeItem): CodePiece[] {
   return pieces;
 }
 
-export function generateReactCtrlLine(nodeItem: IComponentNodeItem): CodePiece[] {
+export function generateReactCtrlLine(nodeItem: NodeSchema, handlers: CustomHandlerSet): CodePiece[] {
   const pieces: CodePiece[] = [];
 
-  if (nodeItem.loop && nodeItem.loopArgs) {
-    let loopDataExp;
-    if ((nodeItem.loop as IJSExpression).type === 'JSExpression') {
-      loopDataExp = `(${(nodeItem.loop as IJSExpression).value})`;
-    } else {
-      loopDataExp = JSON.stringify(nodeItem.loop);
-    }
+  if (nodeItem.loop) {
+    const loopItemName = nodeItem.loopArgs?.[0] || 'item';
+    const loopIndexName = nodeItem.loopArgs?.[1] || 'index';
+
+    // TODO: 静态的值可以抽离出来？
+    const loopDataExpr = (handlers.loopDataExpr || _.identity)(
+      isJSExpression(nodeItem.loop) ? `(${nodeItem.loop.value})` : `(${JSON.stringify(nodeItem.loop)})`,
+    );
+
     pieces.unshift({
-      value: `${loopDataExp}.map((${nodeItem.loopArgs[0]}, ${nodeItem.loopArgs[1]}) => (`,
+      value: `${loopDataExpr}.map((${loopItemName}, ${loopIndexName}) => (`,
       type: PIECE_TYPE.BEFORE,
     });
+
     pieces.push({
       value: '))',
       type: PIECE_TYPE.AFTER,
@@ -96,23 +114,26 @@ export function generateReactCtrlLine(nodeItem: IComponentNodeItem): CodePiece[]
   }
 
   if (nodeItem.condition) {
-    const [isString, value] = generateCompositeType(nodeItem.condition);
+    const [isString, value] = generateCompositeType(nodeItem.condition, handlers);
+    const conditionExpr = (handlers.conditionExpr || _.identity)(isString ? `'${value}'` : value);
 
     pieces.unshift({
-      value: `(${isString ? `'${value}'` : value}) && (`,
+      value: `(${conditionExpr}) && (`,
       type: PIECE_TYPE.BEFORE,
     });
+
     pieces.push({
       value: ')',
       type: PIECE_TYPE.AFTER,
     });
   }
 
-  if (nodeItem.condition || (nodeItem.loop && nodeItem.loopArgs)) {
+  if (nodeItem.condition || nodeItem.loop) {
     pieces.unshift({
       value: '{',
       type: PIECE_TYPE.BEFORE,
     });
+
     pieces.push({
       value: '}',
       type: PIECE_TYPE.AFTER,
@@ -122,30 +143,32 @@ export function generateReactCtrlLine(nodeItem: IComponentNodeItem): CodePiece[]
   return pieces;
 }
 
-export function linkPieces(pieces: CodePiece[]): string {
-  if (pieces.filter(p => p.type === PIECE_TYPE.TAG).length !== 1) {
+export function linkPieces(pieces: CodePiece[], handlers: CustomHandlerSet): string {
+  const tagsPieces = pieces.filter((p) => p.type === PIECE_TYPE.TAG);
+  if (tagsPieces.length !== 1) {
     throw new CodeGeneratorError('One node only need one tag define');
   }
-  const tagName = pieces.filter(p => p.type === PIECE_TYPE.TAG)[0].value;
+
+  const tagName = (handlers.tagName || _.identity)(tagsPieces[0].value);
 
   const beforeParts = pieces
-    .filter(p => p.type === PIECE_TYPE.BEFORE)
-    .map(p => p.value)
+    .filter((p) => p.type === PIECE_TYPE.BEFORE)
+    .map((p) => p.value)
     .join('');
 
   const afterParts = pieces
-    .filter(p => p.type === PIECE_TYPE.AFTER)
-    .map(p => p.value)
+    .filter((p) => p.type === PIECE_TYPE.AFTER)
+    .map((p) => p.value)
     .join('');
 
   const childrenParts = pieces
-    .filter(p => p.type === PIECE_TYPE.CHILDREN)
-    .map(p => p.value)
+    .filter((p) => p.type === PIECE_TYPE.CHILDREN)
+    .map((p) => p.value)
     .join('');
 
   let attrsParts = pieces
-    .filter(p => p.type === PIECE_TYPE.ATTR)
-    .map(p => p.value)
+    .filter((p) => p.type === PIECE_TYPE.ATTR)
+    .map((p) => p.value)
     .join(' ');
 
   attrsParts = !!attrsParts ? ` ${attrsParts}` : '';
@@ -157,26 +180,36 @@ export function linkPieces(pieces: CodePiece[]): string {
   return `${beforeParts}<${tagName}${attrsParts} />${afterParts}`;
 }
 
-export function createNodeGenerator(handlers: HandlerSet<string>, plugins: ExtGeneratorPlugin[]) {
-  const generateNode = (nodeItem: IComponentNodeItem): string => {
+export function createNodeGenerator(
+  handlers: HandlerSet<string>,
+  plugins: ExtGeneratorPlugin[],
+  customHandlers: CustomHandlerSet = {},
+) {
+  const generateNode = (nodeItem: NodeSchema): string => {
     let pieces: CodePiece[] = [];
 
-    plugins.forEach(p => {
-      pieces = pieces.concat(p(nodeItem));
+    plugins.forEach((p) => {
+      pieces = pieces.concat(p(nodeItem, customHandlers));
     });
+
     pieces = pieces.concat(generateBasicNode(nodeItem));
-    pieces = pieces.concat(generateAttrs(nodeItem));
-    if (nodeItem.children && (nodeItem.children as unknown[]).length > 0) {
-      pieces = pieces.concat(handleChildren<string>(nodeItem.children, handlers).map(l => ({
-        type: PIECE_TYPE.CHILDREN,
-        value: l,
-      })));
+    pieces = pieces.concat(generateAttrs(nodeItem, customHandlers));
+
+    if (nodeItem.children && !_.isEmpty(nodeItem.children)) {
+      pieces = pieces.concat(
+        handleChildren(nodeItem.children, handlers).map((l) => ({
+          type: PIECE_TYPE.CHILDREN,
+          value: l,
+        })),
+      );
     }
 
-    return linkPieces(pieces);
+    return linkPieces(pieces, customHandlers);
   };
 
-  handlers.node = (input: IComponentNodeItem) => [generateNode(input)];
+  handlers.node = (node: NodeSchema) => [generateNode(node)];
+
+  customHandlers.node = customHandlers.node || generateNode;
 
   return generateNode;
 }
@@ -184,10 +217,11 @@ export function createNodeGenerator(handlers: HandlerSet<string>, plugins: ExtGe
 export const generateString = (input: string) => [input];
 
 export function createReactNodeGenerator() {
-  return createNodeGenerator({
-    string: generateString,
-    expression: (input) => [generateExpression(input)],
-  }, [
-    generateReactCtrlLine,
-  ]);
+  return createNodeGenerator(
+    {
+      string: generateString,
+      expression: (input) => [generateExpression(input)],
+    },
+    [generateReactCtrlLine],
+  );
 }
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
index 91bef677d..1ae8e9192 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
@@ -6,9 +6,13 @@ import Text from 'rax-text';
 
 import { createDataSourceEngine } from '@ali/lowcode-datasource-engine';
 
+import __$$projectUtils from '../../utils';
+
 import './index.css';
 
 class Home$$Page extends Component {
+  _methods = this._defineMethods();
+
   _context = this._createContext();
 
   _dataSourceList = this._defineDataSourceList();
@@ -21,6 +25,8 @@ class Home$$Page extends Component {
   }
 
   render() {
+    const __$$context = this._context;
+
     return (
       <Page>
         <Text>Hello world!</Text>
@@ -66,8 +72,35 @@ class Home$$Page extends Component {
   }
 
   _defineUtils() {
+    const utils = {
+      ...__$$projectUtils,
+    };
+
+    Object.entries(utils).forEach(([name, util]) => {
+      if (typeof util === 'function') {
+        utils[name] = util.bind(this._context);
+      }
+    });
+
+    return utils;
+  }
+
+  _defineMethods() {
     return {};
   }
 }
 
 export default Home$$Page;
+
+function __$$eval(expr) {
+  try {
+    return expr();
+  } catch (err) {
+    console.warn('Failed to evaluate: ', expr, err);
+  }
+}
+
+function __$$evalArray(expr) {
+  const res = __$$eval(expr);
+  return Array.isArray(res) ? res : [];
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/.editorconfig b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/.editorconfig
new file mode 100644
index 000000000..5760be583
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/.editorconfig
@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/.eslintignore b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/.eslintignore
new file mode 100644
index 000000000..3b437e614
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/.eslintignore
@@ -0,0 +1,11 @@
+# 忽略目录
+build/
+tests/
+demo/
+
+# node 覆盖率文件
+coverage/
+
+# 忽略文件
+**/*-min.js
+**/*.min.js
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/.eslintrc.js b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/.eslintrc.js
new file mode 100644
index 000000000..e2a7c5b54
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['rax'],
+};
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/.gitignore b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/.gitignore
new file mode 100644
index 000000000..50a53dace
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/.gitignore
@@ -0,0 +1,17 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+*~
+*.swp
+*.log
+
+.DS_Store
+.idea/
+.temp/
+
+build/
+dist/
+lib/
+coverage/
+node_modules/
+
+template.yml
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/README.md b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/README.md
new file mode 100644
index 000000000..6eff85d41
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/README.md
@@ -0,0 +1,15 @@
+# @ali/rax-component-demo
+
+## Getting Started
+
+### `npm run start`
+
+Runs the app in development mode.
+
+Open [http://localhost:9999](http://localhost:9999) to view it in the browser.
+
+The page will reload if you make edits.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/abc.json b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/abc.json
new file mode 100644
index 000000000..f9ee40f71
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/abc.json
@@ -0,0 +1,7 @@
+{
+  "type": "rax",
+  "builder": "@ali/builder-rax-v1",
+  "info": {
+    "raxVersion": "1.x"
+  }
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/build.json b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/build.json
new file mode 100644
index 000000000..f3e9b9323
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/build.json
@@ -0,0 +1,12 @@
+{
+  "inlineStyle": false,
+  "plugins": [
+    [
+      "build-plugin-rax-app",
+      {
+        "targets": ["web", "miniapp"]
+      }
+    ],
+    "@ali/build-plugin-rax-app-def"
+  ]
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
new file mode 100644
index 000000000..8aad3e1ad
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "@ali/rax-app-demo",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "build": "rm -f ./dist/miniapp.tar.gz && npm run build:miniapp && cd build/miniapp && tar czf ../../dist/miniapp.tar.gz *",
+    "build:miniapp": "build-scripts build",
+    "start": "build-scripts start",
+    "lint": "eslint --ext .js --ext .jsx ./"
+  },
+  "dependencies": {
+    "@ali/lowcode-datasource-engine": "^0.1.0",
+    "rax": "^1.1.0",
+    "rax-app": "^2.0.0",
+    "rax-document": "^0.1.0",
+    "rax-view": "^1.0.0",
+    "rax-text": "^1.0.0",
+    "rax-image": "^1.0.0",
+    "moment": "*",
+    "lodash": "*"
+  },
+  "devDependencies": {
+    "build-plugin-rax-app": "^5.0.0",
+    "@alib/build-scripts": "^0.1.0",
+    "@typescript-eslint/eslint-plugin": "^2.11.0",
+    "@typescript-eslint/parser": "^2.11.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.8.0",
+    "eslint-config-rax": "^0.1.0",
+    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-module": "^0.1.0",
+    "eslint-plugin-react": "^7.18.0",
+    "@ali/build-plugin-rax-app-def": "^1.0.0"
+  }
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/app.js b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/app.js
new file mode 100644
index 000000000..f04a4233b
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/app.js
@@ -0,0 +1,4 @@
+import { runApp } from 'rax-app';
+import appConfig from './app.json';
+
+runApp(appConfig);
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/app.json b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/app.json
new file mode 100644
index 000000000..63dec4d7d
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/app.json
@@ -0,0 +1,11 @@
+{
+  "routes": [
+    {
+      "path": "/",
+      "source": "pages/Home/index"
+    }
+  ],
+  "window": {
+    "title": "Rax App Demo"
+  }
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/document/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/document/index.jsx
new file mode 100644
index 000000000..50569a9b6
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/document/index.jsx
@@ -0,0 +1,25 @@
+import { createElement } from 'rax';
+import { Root, Style, Script } from 'rax-document';
+
+function Document() {
+  return (
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"
+        />
+        <title>Rax App Demo</title>
+        <Style />
+      </head>
+      <body>
+        {/* root container */}
+        <Root />
+        <Script />
+      </body>
+    </html>
+  );
+}
+
+export default Document;
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/global.scss b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/global.scss
new file mode 100644
index 000000000..5a853d5a9
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/global.scss
@@ -0,0 +1,5 @@
+// TODO: 引入默认全局样式
+
+body {
+  -webkit-font-smoothing: antialiased;
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.css b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
new file mode 100644
index 000000000..1f1e8cfea
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -0,0 +1,165 @@
+import { createElement, Component } from 'rax';
+
+import View from 'rax-view';
+
+import Text from 'rax-text';
+
+import Image from 'rax-image';
+
+import { createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+
+import __$$projectUtils from '../../utils';
+
+import './index.css';
+
+class Home$$Page extends Component {
+  state = {
+    user: { name: '张三', age: 18, avatar: 'https://gw.alicdn.com/tfs/TB1Ui9BMkY2gK0jSZFgXXc5OFXa-50-50.png' },
+    orders: [
+      {
+        title: '【小米智能生活】米家扫地机器人家用全自动扫拖一体机拖地吸尘器',
+        price: 1799,
+        coverUrl: 'https://gw.alicdn.com/tfs/TB1dGVlRfb2gK0jSZK9XXaEgFXa-258-130.png',
+      },
+      {
+        title: '【限时下单立减】Apple/苹果 iPhone 11 4G全网通智能手机正品苏宁易购官方旗舰店苹果11',
+        price: 4999,
+        coverUrl: 'https://gw.alicdn.com/tfs/TB18gdJddTfau8jSZFwXXX1mVXa-1298-1202.png',
+      },
+    ],
+  };
+
+  _methods = this._defineMethods();
+  _context = this._createContext();
+  _dataSourceList = this._defineDataSourceList();
+  _dataSourceEngine = createDataSourceEngine(this._dataSourceList, this._context);
+
+  _utils = this._defineUtils();
+
+  componentDidMount() {
+    this._dataSourceEngine.reloadDataSource();
+  }
+
+  render() {
+    const __$$context = this._context;
+
+    return (
+      <View>
+        <View>
+          <Text>Demo data source logic</Text>
+        </View>
+        <View>
+          <Text>=== User Info: ===</Text>
+        </View>
+        {__$$eval(() => __$$context.state.user) && (
+          <View style={{ flexDirection: 'row' }}>
+            <Image
+              source={{ uri: __$$eval(() => __$$context.state.user.avatar) }}
+              style={{ width: '32px', height: '32px' }}
+            />
+            <View>
+              <Text>{__$$eval(() => __$$context.state.user.name)}</Text>
+              <Text>{__$$eval(() => __$$context.state.user.age)}岁</Text>
+            </View>
+          </View>
+        )}
+        <View>
+          <Text>=== Orders: ===</Text>
+        </View>
+        {__$$evalArray(() => __$$context.state.orders).map((item, index) => (
+          <View style={{ flexDirection: 'row' }}>
+            <View>
+              <Image source={{ uri: __$$eval(() => item.coverUrl) }} style={{ width: '80px', height: '60px' }} />
+            </View>
+            <View>
+              <Text>{__$$eval(() => item.title)}</Text>
+              <Text>{__$$eval(() => __$$context.utils.formatPrice(item.price, '元'))}</Text>
+            </View>
+          </View>
+        ))}
+      </View>
+    );
+  }
+
+  _createContext() {
+    const self = this;
+
+    const context = {
+      get state() {
+        return self.state;
+      },
+      setState(newState) {
+        self.setState(newState);
+      },
+      get dataSourceMap() {
+        return self._dataSourceEngine.dataSourceMap || {};
+      },
+      async reloadDataSource() {
+        self._dataSourceEngine.reloadDataSource();
+      },
+      get utils() {
+        return self._utils;
+      },
+      get page() {
+        return context;
+      },
+      get component() {
+        return context;
+      },
+      get props() {
+        return self.props;
+      },
+    };
+
+    return context;
+  }
+
+  _defineDataSourceList() {
+    return [
+      { id: 'urlParams', type: 'urlParams' },
+      { id: 'user', type: 'fetch', options: { method: 'GET', uri: 'https://shs.alibaba-inc.com/mock/1458/demo/user' } },
+      {
+        id: 'orders',
+        type: 'fetch',
+        options: { method: 'GET', uri: 'https://shs.alibaba-inc.com/mock/1458/demo/orders' },
+      },
+    ];
+  }
+
+  _defineUtils() {
+    const utils = {
+      ...__$$projectUtils,
+    };
+
+    Object.entries(utils).forEach(([name, util]) => {
+      if (typeof util === 'function') {
+        utils[name] = util.bind(this._context);
+      }
+    });
+
+    return utils;
+  }
+
+  _defineMethods() {
+    return {
+      hello: function hello() {
+        console.log('Hello world!');
+      },
+    };
+  }
+}
+
+export default Home$$Page;
+
+function __$$eval(expr) {
+  try {
+    return expr();
+  } catch (err) {
+    console.warn('Failed to evaluate: ', expr, err);
+  }
+}
+
+function __$$evalArray(expr) {
+  const res = __$$eval(expr);
+  return Array.isArray(res) ? res : [];
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/utils.js b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/utils.js
new file mode 100644
index 000000000..c1d9fa4a4
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/utils.js
@@ -0,0 +1,15 @@
+import moment from 'moment';
+
+import { clone } from 'lodash';
+
+const formatPrice = function formatPrice(price, unit) {
+  return Number(price).toFixed(2) + unit;
+};
+
+export default {
+  formatPrice,
+
+  moment,
+
+  clone,
+};
diff --git a/packages/code-generator/test-cases/rax-app/demo2/schema.json5 b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
new file mode 100644
index 000000000..0615e3d72
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
@@ -0,0 +1,263 @@
+{
+  // Schema 参见：https://yuque.antfin-inc.com/mo/spec/spec-materials#eNCJr
+  version: '1.0.0',
+  componentsMap: [
+    {
+      componentName: 'View',
+      package: 'rax-view',
+      version: '^1.0.0',
+      destructuring: false,
+      exportName: 'View',
+    },
+    {
+      componentName: 'Text',
+      package: 'rax-text',
+      version: '^1.0.0',
+      destructuring: false,
+      exportName: 'Text',
+    },
+    {
+      componentName: 'Image',
+      package: 'rax-image',
+      version: '^1.0.0',
+      destructuring: false,
+      exportName: 'Image',
+    },
+    {
+      componentName: 'Page',
+      package: 'rax-view',
+      version: '^1.0.0',
+      destructuring: false,
+      exportName: 'Page',
+    },
+  ],
+  componentsTree: [
+    {
+      componentName: 'Page',
+      fileName: 'home',
+      state: {
+        user: { name: '张三', age: 18, avatar: 'https://gw.alicdn.com/tfs/TB1Ui9BMkY2gK0jSZFgXXc5OFXa-50-50.png' },
+        orders: [
+          {
+            title: '【小米智能生活】米家扫地机器人家用全自动扫拖一体机拖地吸尘器',
+            price: 1799,
+            coverUrl: 'https://gw.alicdn.com/tfs/TB1dGVlRfb2gK0jSZK9XXaEgFXa-258-130.png',
+          },
+          {
+            title: '【限时下单立减】Apple/苹果 iPhone 11 4G全网通智能手机正品苏宁易购官方旗舰店苹果11',
+            price: 4999,
+            coverUrl: 'https://gw.alicdn.com/tfs/TB18gdJddTfau8jSZFwXXX1mVXa-1298-1202.png',
+          },
+        ],
+      },
+      props: {},
+      lifeCycles: {},
+      methods: {
+        hello: {
+          type: 'JSExpression',
+          value: 'function hello(){ console.log("Hello world!"); }',
+        },
+      },
+      dataSource: {
+        list: [
+          {
+            id: 'urlParams',
+            type: 'urlParams',
+          },
+          // 示例数据源：https://shs.alibaba-inc.com/mock/1458/demo/user
+          {
+            id: 'user',
+            type: 'fetch',
+            options: {
+              method: 'GET',
+              uri: 'https://shs.alibaba-inc.com/mock/1458/demo/user',
+            },
+          },
+          // 示例数据源：https://shs.alibaba-inc.com/mock/1458/demo/orders
+          {
+            id: 'orders',
+            type: 'fetch',
+            options: {
+              method: 'GET',
+              uri: 'https://shs.alibaba-inc.com/mock/1458/demo/orders',
+            },
+          },
+        ],
+      },
+      children: [
+        {
+          componentName: 'View',
+          children: [
+            {
+              componentName: 'Text',
+              props: {},
+              children: 'Demo data source logic',
+            },
+          ],
+        },
+        {
+          componentName: 'View',
+          children: [
+            {
+              componentName: 'Text',
+              props: {},
+              children: '=== User Info: ===',
+            },
+          ],
+        },
+        {
+          componentName: 'View',
+          condition: {
+            type: 'JSExpression',
+            value: 'this.state.user',
+          },
+          props: {
+            style: { flexDirection: 'row' },
+          },
+          children: [
+            {
+              componentName: 'Image',
+              props: {
+                source: {
+                  uri: {
+                    type: 'JSExpression',
+                    value: 'this.state.user.avatar',
+                  },
+                },
+                style: {
+                  width: '32px',
+                  height: '32px',
+                },
+              },
+            },
+            {
+              componentName: 'View',
+              children: [
+                {
+                  componentName: 'Text',
+                  children: {
+                    type: 'JSExpression',
+                    value: 'this.state.user.name',
+                  },
+                },
+                {
+                  componentName: 'Text',
+                  children: [
+                    {
+                      type: 'JSExpression',
+                      value: 'this.state.user.age',
+                    },
+                    '岁',
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          componentName: 'View',
+          children: [
+            {
+              componentName: 'Text',
+              props: {},
+              children: '=== Orders: ===',
+            },
+          ],
+        },
+        {
+          componentName: 'View',
+          loop: {
+            type: 'JSExpression',
+            value: 'this.state.orders',
+          },
+          props: {
+            style: { flexDirection: 'row' },
+          },
+          children: [
+            {
+              componentName: 'View',
+              children: [
+                {
+                  componentName: 'Image',
+                  props: {
+                    source: {
+                      uri: {
+                        type: 'JSExpression',
+                        value: 'this.item.coverUrl',
+                      },
+                    },
+                    style: {
+                      width: '80px',
+                      height: '60px',
+                    },
+                  },
+                },
+              ],
+            },
+            {
+              componentName: 'View',
+              children: [
+                {
+                  componentName: 'Text',
+                  children: {
+                    type: 'JSExpression',
+                    value: 'this.item.title',
+                  },
+                },
+                {
+                  componentName: 'Text',
+                  children: {
+                    type: 'JSExpression',
+                    value: 'this.utils.formatPrice(this.item.price, "元")',
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  utils: [
+    {
+      name: 'formatPrice',
+      type: 'function',
+      content: {
+        type: 'JSFunction',
+        value: 'function formatPrice(price, unit) { return Number(price).toFixed(2) + unit; }',
+      },
+    },
+    {
+      name: 'moment',
+      type: 'npm',
+      content: {
+        package: 'moment',
+        version: '*',
+        exportName: 'moment',
+      },
+    },
+    {
+      name: 'clone',
+      type: 'npm',
+      content: {
+        package: 'lodash',
+        version: '*',
+        exportName: 'clone',
+        destructuring: true,
+      },
+    },
+  ],
+  config: {
+    sdkVersion: '1.0.3',
+    historyMode: 'hash',
+    targetRootID: 'root',
+  },
+  meta: {
+    name: 'Rax App Demo',
+    git_group: 'demo-group',
+    project_name: 'demo-project',
+    description: '这是一个示例应用',
+    spma: 'spmademo',
+    creator: '张三',
+  },
+}
diff --git a/packages/code-generator/test/rax-app.test.ts b/packages/code-generator/test/rax-app.test.ts
index 79f7e0a5b..6ac4ce363 100644
--- a/packages/code-generator/test/rax-app.test.ts
+++ b/packages/code-generator/test/rax-app.test.ts
@@ -62,7 +62,7 @@ function runPrettierSync(files: string[], cwd: string) {
 }
 
 function diffActualAndExpectedSync(caseFullDir: string): string {
-  const res = spawnSync('diff', ['-wur', 'expected', 'actual'], {
+  const res = spawnSync('diff', ['-wBur', 'expected', 'actual'], {
     cwd: caseFullDir,
     stdio: 'pipe',
     shell: true,
diff --git a/packages/code-generator/tsconfig.json b/packages/code-generator/tsconfig.json
index 7a6244f14..dc63d9496 100644
--- a/packages/code-generator/tsconfig.json
+++ b/packages/code-generator/tsconfig.json
@@ -2,14 +2,11 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "./lib",
-    "lib": [
-      "es6"
-    ],
+    "target": "ES2018",
+    "lib": ["ES6", "ES2016", "ES2017", "ES2018", "ES2019", "ES2020"],
     "module": "commonjs",
     "types": ["node"],
-    "baseUrl": ".",            /* Base directory to resolve non-absolute module names. */
+    "baseUrl": "." /* Base directory to resolve non-absolute module names. */
   },
-  "include": [
-    "src/**/*"
-  ]
+  "include": ["src/**/*"]
 }

From 27a9800705cb0db5c1a668fe2ee466534f5448d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Thu, 13 Aug 2020 00:21:44 +0800
Subject: [PATCH 24/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E5=87=BA=E7=A0=81?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E7=9A=84=20schema=20=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E7=9A=84=E7=B1=BB=E5=9E=8B=E7=BB=9F=E4=B8=80=E9=83=BD=E6=94=B9?=
 =?UTF-8?q?=E6=88=90=E5=BC=95=E7=94=A8=20@ali/lowcode-types=20=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84,=E4=B8=8E=E8=AE=BE=E8=AE=A1=E5=99=A8=E4=B8=80?=
 =?UTF-8?q?=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../code-generator/src/parser/SchemaParser.ts | 14 ++---
 .../component/rax/containerLifeCycle.ts       |  8 +--
 .../component/react/containerLifeCycle.ts     | 24 +++-----
 .../component/react/containerMethod.ts        | 11 ++--
 .../plugins/component/recore/pageVmBody.ts    | 30 +++++-----
 packages/code-generator/src/types/core.ts     |  7 ++-
 .../code-generator/src/types/intermediate.ts  | 12 +---
 packages/code-generator/src/types/schema.ts   | 55 +------------------
 8 files changed, 48 insertions(+), 113 deletions(-)

diff --git a/packages/code-generator/src/parser/SchemaParser.ts b/packages/code-generator/src/parser/SchemaParser.ts
index 0dd66af6d..72e132371 100644
--- a/packages/code-generator/src/parser/SchemaParser.ts
+++ b/packages/code-generator/src/parser/SchemaParser.ts
@@ -8,12 +8,12 @@ import { SUPPORT_SCHEMA_VERSION_LIST } from '../const';
 import { handleChildren } from '../utils/nodeToJSX';
 
 import {
-  ChildNodeType,
+  NodeData,
   CodeGeneratorError,
   CompatibilityError,
   DependencyType,
   IBasicSchema,
-  IComponentNodeItem,
+  NodeSchema,
   IContainerInfo,
   IContainerNodeItem,
   IDependency,
@@ -24,7 +24,7 @@ import {
   IParseResult,
   IProjectSchema,
   ISchemaParser,
-  IUtilItem,
+  UtilItem,
 } from '../types';
 
 const defaultContainer: IContainerInfo = {
@@ -85,7 +85,7 @@ class SchemaParser implements ISchemaParser {
         // 整个 schema 描述一个容器，且无根节点定义
         const container: IContainerInfo = {
           ...defaultContainer,
-          children: schema.componentsTree as IComponentNodeItem[],
+          children: schema.componentsTree as NodeSchema[],
         };
         containers = [container];
       } else {
@@ -167,7 +167,7 @@ class SchemaParser implements ISchemaParser {
       .filter((dep) => !!dep);
 
     // 分析 Utils 依赖
-    let utils: IUtilItem[];
+    let utils: UtilItem[];
     if (schema.utils) {
       utils = schema.utils;
       utilsDeps = schema.utils.filter((u) => u.type !== 'function').map((u) => u.content as IExternalDependency);
@@ -198,9 +198,9 @@ class SchemaParser implements ISchemaParser {
     };
   }
 
-  public getComponentNames(children: ChildNodeType): string[] {
+  public getComponentNames(children: NodeData | NodeData[]): string[] {
     return handleChildren(children, {
-      node: (i: IComponentNodeItem) => [i.componentName],
+      node: (i: NodeSchema) => [i.componentName],
     });
   }
 }
diff --git a/packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts b/packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts
index cc5c8202f..ea9d92ee2 100644
--- a/packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts
@@ -12,7 +12,7 @@ import {
   ICodeChunk,
   ICodeStruct,
   IContainerInfo,
-  IJSExpression,
+  JSExpression,
 } from '../../../types';
 
 type PluginConfig = {
@@ -50,7 +50,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
     //         fileType: cfg.fileType,
     //         name: CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
     //         content: getFuncExprBody(
-    //           (lifeCycles[lifeCycleName] as IJSExpression).value,
+    //           (lifeCycles[lifeCycleName] as JSExpression).value,
     //         ),
     //         linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.ConstructorStart]],
     //       };
@@ -61,7 +61,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
     //         fileType: cfg.fileType,
     //         name: RAX_CHUNK_NAME.ClassRenderPre,
     //         content: getFuncExprBody(
-    //           (lifeCycles[lifeCycleName] as IJSExpression).value,
+    //           (lifeCycles[lifeCycleName] as JSExpression).value,
     //         ),
     //         linkAfter: [RAX_CHUNK_NAME.ClassRenderStart],
     //       };
@@ -73,7 +73,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
     //       name: CLASS_DEFINE_CHUNK_NAME.InsMethod,
     //       content: transformFuncExpr2MethodMember(
     //         exportName,
-    //         (lifeCycles[lifeCycleName] as IJSExpression).value,
+    //         (lifeCycles[lifeCycleName] as JSExpression).value,
     //       ),
     //       linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsMethod]],
     //     };
diff --git a/packages/code-generator/src/plugins/component/react/containerLifeCycle.ts b/packages/code-generator/src/plugins/component/react/containerLifeCycle.ts
index d1951d8e2..10dd2bffd 100644
--- a/packages/code-generator/src/plugins/component/react/containerLifeCycle.ts
+++ b/packages/code-generator/src/plugins/component/react/containerLifeCycle.ts
@@ -1,10 +1,7 @@
 import { CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
 import { REACT_CHUNK_NAME } from './const';
 
-import {
-  getFuncExprBody,
-  transformFuncExpr2MethodMember,
-} from '../../../utils/jsExpression';
+import { getFuncExprBody, transformFuncExpr2MethodMember } from '../../../utils/jsExpression';
 
 import {
   BuilderComponentPlugin,
@@ -15,14 +12,14 @@ import {
   ICodeChunk,
   ICodeStruct,
   IContainerInfo,
-  IJSExpression,
+  JSExpression,
 } from '../../../types';
 
 type PluginConfig = {
   fileType: string;
   exportNameMapping: Record<string, string>;
   normalizeNameMapping: Record<string, string>;
-}
+};
 
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
   const cfg: PluginConfig = {
@@ -41,7 +38,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
 
     if (ir.lifeCycles) {
       const lifeCycles = ir.lifeCycles;
-      const chunks = Object.keys(lifeCycles).map<ICodeChunk>(lifeCycleName => {
+      const chunks = Object.keys(lifeCycles).map<ICodeChunk>((lifeCycleName) => {
         const normalizeName = cfg.normalizeNameMapping[lifeCycleName] || lifeCycleName;
         const exportName = cfg.exportNameMapping[lifeCycleName] || lifeCycleName;
         if (normalizeName === 'constructor') {
@@ -49,9 +46,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
             type: ChunkType.STRING,
             fileType: cfg.fileType,
             name: CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
-            content: getFuncExprBody(
-              (lifeCycles[lifeCycleName] as IJSExpression).value,
-            ),
+            content: getFuncExprBody((lifeCycles[lifeCycleName] as JSExpression).value),
             linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.ConstructorStart]],
           };
         }
@@ -60,9 +55,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
             type: ChunkType.STRING,
             fileType: cfg.fileType,
             name: REACT_CHUNK_NAME.ClassRenderPre,
-            content: getFuncExprBody(
-              (lifeCycles[lifeCycleName] as IJSExpression).value,
-            ),
+            content: getFuncExprBody((lifeCycles[lifeCycleName] as JSExpression).value),
             linkAfter: [REACT_CHUNK_NAME.ClassRenderStart],
           };
         }
@@ -71,10 +64,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
           type: ChunkType.STRING,
           fileType: cfg.fileType,
           name: CLASS_DEFINE_CHUNK_NAME.InsMethod,
-          content: transformFuncExpr2MethodMember(
-            exportName,
-            (lifeCycles[lifeCycleName] as IJSExpression).value,
-          ),
+          content: transformFuncExpr2MethodMember(exportName, (lifeCycles[lifeCycleName] as JSExpression).value),
           linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsMethod]],
         };
       });
diff --git a/packages/code-generator/src/plugins/component/react/containerMethod.ts b/packages/code-generator/src/plugins/component/react/containerMethod.ts
index 9bba467da..b70c37d55 100644
--- a/packages/code-generator/src/plugins/component/react/containerMethod.ts
+++ b/packages/code-generator/src/plugins/component/react/containerMethod.ts
@@ -10,12 +10,12 @@ import {
   ICodeChunk,
   ICodeStruct,
   IContainerInfo,
-  IJSExpression,
+  JSExpression,
 } from '../../../types';
 
 type PluginConfig = {
   fileType: string;
-}
+};
 
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
   const cfg: PluginConfig = {
@@ -32,14 +32,11 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
 
     if (ir.methods) {
       const methods = ir.methods;
-      const chunks = Object.keys(methods).map<ICodeChunk>(methodName => ({
+      const chunks = Object.keys(methods).map<ICodeChunk>((methodName) => ({
         type: ChunkType.STRING,
         fileType: cfg.fileType,
         name: CLASS_DEFINE_CHUNK_NAME.InsMethod,
-        content: transformFuncExpr2MethodMember(
-          methodName,
-          (methods[methodName] as IJSExpression).value,
-        ),
+        content: transformFuncExpr2MethodMember(methodName, (methods[methodName] as JSExpression).value),
         linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsMethod]],
       }));
 
diff --git a/packages/code-generator/src/plugins/component/recore/pageVmBody.ts b/packages/code-generator/src/plugins/component/recore/pageVmBody.ts
index 8660ad195..0e60701ec 100644
--- a/packages/code-generator/src/plugins/component/recore/pageVmBody.ts
+++ b/packages/code-generator/src/plugins/component/recore/pageVmBody.ts
@@ -4,7 +4,7 @@ import {
   ChunkType,
   ICodeStruct,
   IContainerInfo,
-  IComponentNodeItem,
+  NodeSchema,
   CodePiece,
   PIECE_TYPE,
 } from '../../../types';
@@ -14,14 +14,16 @@ import { createNodeGenerator, generateString } from '../../../utils/nodeToJSX';
 import { generateExpression } from '../../../utils/jsExpression';
 import { generateCompositeType, handleStringValueDefault } from '../../../utils/compositeType';
 
-const generateGlobalProps = (nodeItem: IComponentNodeItem): CodePiece[] => {
-  return [{
-    value: `{...globalProps.${nodeItem.componentName}}`,
-    type: PIECE_TYPE.ATTR,
-  }];
+const generateGlobalProps = (nodeItem: NodeSchema): CodePiece[] => {
+  return [
+    {
+      value: `{...globalProps.${nodeItem.componentName}}`,
+      type: PIECE_TYPE.ATTR,
+    },
+  ];
 };
 
-const generateCtrlLine = (nodeItem: IComponentNodeItem): CodePiece[] => {
+const generateCtrlLine = (nodeItem: NodeSchema): CodePiece[] => {
   const pieces: CodePiece[] = [];
 
   if (nodeItem.loop && nodeItem.loopArgs) {
@@ -49,13 +51,13 @@ const generateCtrlLine = (nodeItem: IComponentNodeItem): CodePiece[] => {
 };
 
 const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
-  const generator = createNodeGenerator({
-    string: generateString,
-    expression: (input) => [generateExpression(input)],
-  }, [
-    generateGlobalProps,
-    generateCtrlLine,
-  ]);
+  const generator = createNodeGenerator(
+    {
+      string: generateString,
+      expression: (input) => [generateExpression(input)],
+    },
+    [generateGlobalProps, generateCtrlLine],
+  );
 
   const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
     const next: ICodeStruct = {
diff --git a/packages/code-generator/src/types/core.ts b/packages/code-generator/src/types/core.ts
index 2ddd14d46..1d33616e0 100644
--- a/packages/code-generator/src/types/core.ts
+++ b/packages/code-generator/src/types/core.ts
@@ -1,6 +1,9 @@
 import { JSExpression, JSFunction, NodeSchema } from '@ali/lowcode-types';
+
 import { CustomHandlerSet } from '../utils/compositeType';
-import { IBasicSchema, IParseResult, IProjectSchema, IResultDir, IResultFile, IComponentNodeItem } from './index';
+import { IParseResult } from './intermediate';
+import { IResultDir, IResultFile } from './result';
+import { IBasicSchema, IProjectSchema } from './schema';
 
 export enum FileType {
   CSS = 'css',
@@ -158,7 +161,7 @@ export interface HandlerSet<T> {
   common?: (input: unknown) => T[];
 }
 
-export type ExtGeneratorPlugin = (nodeItem: IComponentNodeItem, handlers: CustomHandlerSet) => CodePiece[];
+export type ExtGeneratorPlugin = (nodeItem: NodeSchema, handlers: CustomHandlerSet) => CodePiece[];
 
 // export interface InteratorScope {
 //   [$item: string]: string;           // $item 默认取值 "item"
diff --git a/packages/code-generator/src/types/intermediate.ts b/packages/code-generator/src/types/intermediate.ts
index c9052ac96..c69ace247 100644
--- a/packages/code-generator/src/types/intermediate.ts
+++ b/packages/code-generator/src/types/intermediate.ts
@@ -1,12 +1,4 @@
-import {
-  IAppConfig,
-  IAppMeta,
-  IContainerNodeItem,
-  IDependency,
-  II18nMap,
-  IInternalDependency,
-  IUtilItem,
-} from './index';
+import { IAppConfig, IAppMeta, IContainerNodeItem, IDependency, II18nMap, UtilItem } from '.';
 
 export interface IParseResult {
   containers: IContainerInfo[];
@@ -27,7 +19,7 @@ export interface IWithDependency {
 }
 
 export interface IUtilInfo extends IWithDependency {
-  utils: IUtilItem[];
+  utils: UtilItem[];
 }
 
 export interface IRouterInfo extends IWithDependency {
diff --git a/packages/code-generator/src/types/schema.ts b/packages/code-generator/src/types/schema.ts
index 9cd634cb7..cb8ac1f23 100644
--- a/packages/code-generator/src/types/schema.ts
+++ b/packages/code-generator/src/types/schema.ts
@@ -1,33 +1,7 @@
-import {
-  ProjectSchema,
-  CompositeObject,
-  JSExpression,
-  JSONObject,
-  NpmInfo,
-  NodeData,
-  NodeSchema,
-  UtilItem,
-  PageSchema,
-  BlockSchema,
-  ComponentSchema,
-  DataSourceConfig,
-} from '@ali/lowcode-types';
+import { BlockSchema, ComponentSchema, NodeSchema, PageSchema, ProjectSchema } from '@ali/lowcode-types';
 
 export * from '@ali/lowcode-types';
 
-/**
- * 搭建基础协议 - 函数表达式
- *
- * @export
- * @interface IJSExpression
- */
-export type IJSExpression = JSExpression;
-
-// JSON 基本类型
-export type IJSONObject = JSONObject;
-
-export type ICompositeObject = CompositeObject;
-
 /**
  * 搭建基础协议 - 多语言描述
  *
@@ -56,38 +30,15 @@ export interface IProjectSchema extends IBasicSchema {
   meta: IAppMeta; // 当前应用元数据信息
 }
 
-export interface IComponentsMapItem extends NpmInfo {}
-
-export type IUtilItem = UtilItem;
-export type ChildNodeItem = NodeData;
-export type ChildNodeType = ChildNodeItem | ChildNodeItem[];
-
-/**
- * 搭建基础协议 - 单个组件树节点描述
- * 转换成一个 .jsx 文件内 React Class 类 render 函数返回的 jsx 代码
- *
- * @export
- * @interface IComponentNodeItem
- */
-export interface IComponentNodeItem extends NodeSchema {}
-
 /**
  * 搭建基础协议 - 单个容器节点描述
  *
  * @export
  * @interface IContainerNodeItem
- * @extends {IComponentNodeItem}
+ * @extends {NodeSchema}
  */
 export type IContainerNodeItem = PageSchema | BlockSchema | ComponentSchema;
 
-/**
- * 搭建基础协议 - 数据源单个配置
- *
- * @export
- * @interface IDataSourceConfig
- */
-export interface IDataSourceConfig extends DataSourceConfig {}
-
 // TODO...
 export interface IBasicMeta {
   title: string; // 标题描述
@@ -103,7 +54,7 @@ export interface IAppConfig {
   sdkVersion?: string; // 渲染模块版本
   historyMode?: 'browser' | 'hash'; // 浏览器路由：browser  哈希路由：hash
   targetRootID?: string; // 渲染根节点 ID
-  layout?: IComponentNodeItem;
+  layout?: NodeSchema;
   theme?: object; // 主题配置，根据接入的主题模块不同
 }
 

From a1a3b68287b5de527863910737f8ef8185119a8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Thu, 13 Aug 2020 00:35:29 +0800
Subject: [PATCH 25/80] =?UTF-8?q?fix:=20=F0=9F=90=9B=20=E8=8B=A5=E5=85=A8?=
 =?UTF-8?q?=E9=87=8F=E5=BC=95=E5=85=A5=20lodash=20=E5=88=99=E5=9C=A8?=
 =?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8F=E4=B8=8B=E4=BC=9A=E8=B7=91=E4=B8=8D?=
 =?UTF-8?q?=E9=80=9A,=E6=89=80=E4=BB=A5=E6=94=B9=E6=88=90=E5=BC=95?=
 =?UTF-8?q?=E5=85=A5=20lodash/clone?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rax-app/demo2/expected/demo-project/src/utils.js           | 2 +-
 packages/code-generator/test-cases/rax-app/demo2/schema.json5  | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/utils.js b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/utils.js
index c1d9fa4a4..6fb1f681b 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/utils.js
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/utils.js
@@ -1,6 +1,6 @@
 import moment from 'moment';
 
-import { clone } from 'lodash';
+import clone from 'lodash/clone';
 
 const formatPrice = function formatPrice(price, unit) {
   return Number(price).toFixed(2) + unit;
diff --git a/packages/code-generator/test-cases/rax-app/demo2/schema.json5 b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
index 0615e3d72..161d7fe50 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
@@ -243,7 +243,8 @@
         package: 'lodash',
         version: '*',
         exportName: 'clone',
-        destructuring: true,
+        destructuring: false,
+        main: '/clone',
       },
     },
   ],

From b11425b9e2383a23ae43d8b77f491b68d540729c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=A5=E5=B8=8C?= <armslave.yy@alibaba-inc.com>
Date: Thu, 13 Aug 2020 00:58:27 +0800
Subject: [PATCH 26/80] =?UTF-8?q?fix:=20=F0=9F=90=9B=20use=20lowcode=20typ?=
 =?UTF-8?q?es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/demo/assets.json      | 13473 ++++++++++++++++
 packages/code-generator/demo/demo.js          |   107 +-
 packages/code-generator/demo/schema.json      |   420 +
 packages/code-generator/package.json          |     1 +
 .../src/generator/ModuleBuilder.ts            |    52 +-
 .../src/generator/ProjectBuilder.ts           |    79 +-
 packages/code-generator/src/index.ts          |    12 +-
 .../code-generator/src/model/ResultDir.ts     |    31 -
 .../code-generator/src/model/ResultFile.ts    |    13 -
 .../code-generator/src/parser/SchemaParser.ts |   149 +-
 .../src/plugins/common/esmodule.ts            |    77 +-
 .../plugins/component/react/containerClass.ts |    11 +-
 .../component/react/containerDataSource.ts    |     8 +-
 .../component/react/containerInitState.ts     |     8 +-
 .../component/react/containerLifeCycle.ts     |    26 +-
 .../component/react/containerMethod.ts        |    14 +-
 .../src/plugins/component/react/jsx.ts        |    15 +-
 .../src/plugins/component/recore/const.ts     |     3 -
 .../component/recore/pageDataSource.ts        |    30 +-
 .../plugins/component/recore/pageVmBody.ts    |    40 +-
 .../src/plugins/project/constants.ts          |     7 +-
 .../framework/icejs/plugins/packageJSON.ts    |     7 +-
 .../icejs/template/files/README.md.ts         |     8 +-
 .../icejs/template/files/abc.json.ts          |    20 +-
 .../icejs/template/files/build.json.ts        |    22 +-
 .../icejs/template/files/editorconfig.ts      |     8 +-
 .../icejs/template/files/eslintignore.ts      |     8 +-
 .../icejs/template/files/eslintrc.js.ts       |     8 +-
 .../icejs/template/files/gitignore.ts         |     8 +-
 .../icejs/template/files/jsconfig.json.ts     |     8 +-
 .../icejs/template/files/prettierignore.ts    |     8 +-
 .../icejs/template/files/prettierrc.js.ts     |     8 +-
 .../components/Footer/index.jsx.ts            |     8 +-
 .../components/Footer/index.module.scss.ts    |     8 +-
 .../BasicLayout/components/Logo/index.jsx.ts  |     8 +-
 .../components/Logo/index.module.scss.ts      |     8 +-
 .../components/PageNav/index.jsx.ts           |     8 +-
 .../src/layouts/BasicLayout/index.jsx.ts      |     8 +-
 .../src/layouts/BasicLayout/menuConfig.js.ts  |     8 +-
 .../icejs/template/files/stylelintignore.ts   |     8 +-
 .../icejs/template/files/stylelintrc.js.ts    |     8 +-
 .../icejs/template/files/tsconfig.json.ts     |     8 +-
 .../project/framework/icejs/template/index.ts |    13 +-
 .../recore/template/files/.editorconfig.ts    |    10 +-
 .../recore/template/files/.eslintignore.ts    |     9 +-
 .../recore/template/files/.gitignore.ts       |    10 +-
 .../recore/template/files/.prettierrc.ts      |    10 +-
 .../recore/template/files/README.md.ts        |     9 +-
 .../recore/template/files/abc.json.ts         |    10 +-
 .../recore/template/files/build.json.ts       |    10 +-
 .../recore/template/files/package.json.ts     |    10 +-
 .../template/files/public/index.html.ts       |    10 +-
 .../template/files/src/config/app.ts.ts       |    12 +-
 .../files/src/config/components.ts.ts         |    14 +-
 .../template/files/src/config/utils.ts.ts     |    12 +-
 .../recore/template/files/src/index.ts.ts     |    10 +-
 .../recore/template/files/src/router.ts.ts    |     9 +-
 .../recore/template/files/tsconfig.json.ts    |    10 +-
 .../framework/recore/template/index.ts        |    12 +-
 .../src/plugins/project/i18n.ts               |     2 +-
 .../src/publisher/disk/index.ts               |    29 +-
 .../src/publisher/disk/utils.ts               |    38 +-
 .../code-generator/src/publisher/zip/index.ts |    21 +-
 .../code-generator/src/publisher/zip/utils.ts |    34 +-
 .../code-generator/src/solutions/icejs.ts     |    27 +-
 packages/code-generator/src/types/core.ts     |   101 +-
 packages/code-generator/src/types/deps.ts     |    12 +-
 packages/code-generator/src/types/error.ts    |     4 +-
 packages/code-generator/src/types/index.ts    |     2 -
 .../code-generator/src/types/intermediate.ts  |    33 +-
 .../code-generator/src/types/publisher.ts     |    10 +-
 packages/code-generator/src/types/result.ts   |    88 -
 packages/code-generator/src/types/schema.ts   |   226 -
 packages/code-generator/src/utils/common.ts   |     7 +-
 .../code-generator/src/utils/compositeType.ts |   137 +-
 .../code-generator/src/utils/jsExpression.ts  |    97 +-
 packages/code-generator/src/utils/jsSlot.ts   |    25 +
 .../code-generator/src/utils/nodeToJSX.ts     |   241 +-
 .../code-generator/src/utils/resultHelper.ts  |    35 +
 .../src/utils/templateHelper.ts               |    22 +-
 packages/code-generator/src/utils/validate.ts |     3 +
 packages/types/src/code-intermediate.ts       |    14 +
 packages/types/src/code-result.ts             |    59 +
 packages/types/src/data-source.ts             |     2 +-
 packages/types/src/field-config.ts            |     2 +-
 packages/types/src/index.ts                   |     2 +
 packages/types/src/schema.ts                  |    22 +-
 packages/types/src/utils.ts                   |    26 +-
 packages/types/src/value-type.ts              |    17 +-
 89 files changed, 15026 insertions(+), 1261 deletions(-)
 create mode 100644 packages/code-generator/demo/assets.json
 create mode 100644 packages/code-generator/demo/schema.json
 delete mode 100644 packages/code-generator/src/model/ResultDir.ts
 delete mode 100644 packages/code-generator/src/model/ResultFile.ts
 delete mode 100644 packages/code-generator/src/plugins/component/recore/const.ts
 delete mode 100644 packages/code-generator/src/types/result.ts
 delete mode 100644 packages/code-generator/src/types/schema.ts
 create mode 100644 packages/code-generator/src/utils/jsSlot.ts
 create mode 100644 packages/code-generator/src/utils/resultHelper.ts
 create mode 100644 packages/code-generator/src/utils/validate.ts
 create mode 100644 packages/types/src/code-intermediate.ts
 create mode 100644 packages/types/src/code-result.ts

diff --git a/packages/code-generator/demo/assets.json b/packages/code-generator/demo/assets.json
new file mode 100644
index 000000000..f46fd9f22
--- /dev/null
+++ b/packages/code-generator/demo/assets.json
@@ -0,0 +1,13473 @@
+{
+  "version": "1.0.0",
+  "packages": [
+    {
+      "package": "moment",
+      "urls": ["https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"],
+      "library": "moment"
+    },
+    {
+      "title": "fusion组件库",
+      "package": "@alifd/next",
+      "version": "1.19.18",
+      "urls": ["https://unpkg.antfin-inc.com/@alife/next@1.19.18/dist/next.js", "https://unpkg.antfin-inc.com/@alife/next@1.19.18/dist/next.css"],
+      "library": "Next"
+    },
+    {
+      "title": "MCBreadcrumb",
+      "package": "mc-breadcrumb",
+      "version": "1.0.0",
+      "urls": ["https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.js", "https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.css"],
+      "library": "MCBreadcrumb"
+    }
+  ],
+  "components": [
+    {
+      "componentName": "Page",
+      "title": "Page",
+      "props": [
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ],
+      "configure": {
+        "events": {
+          "supportedLifecycles": [
+            {
+              "description": "初始化时",
+              "name": "constructor"
+            },
+            {
+              "description": "装载后",
+              "name": "componentDidMount"
+            },
+            {
+              "description": "更新时",
+              "name": "componentDidMount"
+            },
+            {
+              "description": "卸载时",
+              "name": "componentWillUnmount"
+            }
+          ]
+        },
+        "component": {
+          "isContainer": true
+        }
+      }
+    },
+    {
+      "componentName": "Div",
+      "title": "Div",
+      "configure": {
+        "component": {
+          "isContainer": true
+        }
+      }
+    },
+    {
+      "componentName": "Table",
+      "title": "Table",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Table",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string"
+        },
+        {
+          "name": "pure",
+          "propType": "bool"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "tableLayout",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "fixed",
+              "auto"
+            ]
+          }
+        },
+        {
+          "name": "tableWidth",
+          "propType": "number"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "small",
+              "medium"
+            ]
+          }
+        },
+        {
+          "name": "dataSource",
+          "propType": {
+            "type": "arrayOf",
+            "value": "object"
+          }
+        },
+        {
+          "name": "entireDataSource",
+          "propType": "array"
+        },
+        {
+          "name": "onRowClick",
+          "propType": "func"
+        },
+        {
+          "name": "onRowMouseEnter",
+          "propType": "func"
+        },
+        {
+          "name": "rowProps",
+          "propType": "func"
+        },
+        {
+          "name": "cellProps",
+          "propType": "func"
+        },
+        {
+          "name": "hasBorder",
+          "propType": "bool"
+        },
+        {
+          "name": "hasHeader",
+          "propType": "bool"
+        },
+        {
+          "name": "isZebra",
+          "propType": "bool"
+        },
+        {
+          "name": "loading",
+          "propType": "bool"
+        },
+        {
+          "name": "filterParams",
+          "propType": "object"
+        },
+        {
+          "name": "sort",
+          "propType": "object"
+        },
+        {
+          "name": "sortIcons",
+          "propType": "object"
+        },
+        {
+          "name": "locale",
+          "propType": "object"
+        },
+        {
+          "name": "components",
+          "propType": "object"
+        },
+        {
+          "name": "columns",
+          "propType": "array"
+        },
+        {
+          "name": "emptyContent",
+          "propType": "node"
+        },
+        {
+          "name": "primaryKey",
+          "propType": "string"
+        },
+        {
+          "name": "lockType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "left",
+              "right"
+            ]
+          }
+        },{
+          "name": "style",
+          "propType": "object"
+        },
+        {
+          "name": "wrapperContent",
+          "propType": "any"
+        },
+        {
+          "name": "refs",
+          "propType": "object"
+        },
+        {
+          "name": "expandedRowRender",
+          "propType": "func"
+        },
+        {
+          "name": "expandedRowIndent",
+          "propType": "array"
+        },
+        {
+          "name": "hasExpandedRowCtrl",
+          "propType": "bool"
+        },
+        {
+          "name": "getExpandedColProps",
+          "propType": "func"
+        },
+        {
+          "name": "openRowKeys",
+          "propType": "array"
+        },
+        {
+          "name": "onRowOpen",
+          "propType": "func"
+        },
+        {
+          "name": "onExpandedRowClick",
+          "propType": "func"
+        },
+        {
+          "name": "fixedHeader",
+          "propType": "bool"
+        },
+        {
+          "name": "rowSelection",
+          "propType": "object"
+        },
+        {
+          "name": "stickyHeader",
+          "propType": "bool"
+        },
+        {
+          "name": "offsetTop",
+          "propType": "number"
+        },
+        {
+          "name": "affixProps",
+          "propType": "object"
+        },
+        {
+          "name": "indent",
+          "propType": "number"
+        },
+        {
+          "name": "isTree",
+          "propType": "bool"
+        },
+        {
+          "name": "useVirtual",
+          "propType": "bool"
+        },
+        {
+          "name": "onBodyScroll",
+          "propType": "func"
+        },
+        {
+          "name": "expandedIndexSimulate",
+          "propType": "bool"
+        },
+        {
+          "name": "crossline",
+          "propType": "bool"
+        },
+        {
+          "name": "lengths",
+          "propType": "object"
+        }
+      ],
+      "configure": {
+        "component": {
+          "isContainer": true
+        },
+        "props": {
+          "isExtends": true,
+          "override": [{
+            "name": "dataSource",
+            "setter": "JsonSetter"
+          }]
+        }
+      }
+    },
+    {
+      "componentName": "Table.Column",
+      "title": "Table.Column",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Table",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Column"
+      },
+      "props": [
+        {
+          "name": "title",
+          "propType": "string"
+        },
+        {
+          "name": "dataIndex",
+          "propType": "string"
+        }
+      ]
+    },
+    {
+      "componentName": "Badge",
+      "title": "Badge",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Badge",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "徽章依托的内容"
+        },
+        {
+          "name": "count",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "number",
+              "string"
+            ]
+          },
+          "description": "展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时默认隐藏",
+          "defaultValue": 0
+        },
+        {
+          "name": "showZero",
+          "propType": "bool",
+          "description": "当count为0时，是否显示count",
+          "defaultValue": false
+        },
+        {
+          "name": "content",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "自定义节点内容"
+        },
+        {
+          "name": "overflowCount",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "number",
+              "string"
+            ]
+          },
+          "description": "展示的封顶的数字",
+          "defaultValue": 99
+        },
+        {
+          "name": "dot",
+          "propType": "bool",
+          "description": "不展示数字，只展示一个小红点",
+          "defaultValue": false
+        }
+      ]
+    },
+    {
+      "componentName": "Balloon",
+      "title": "Balloon",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Balloon",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "pure",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "自定义类名"
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "自定义内敛样式"
+        },
+        {
+          "name": "children",
+          "propType": "any",
+          "description": "浮层的内容"
+        },
+        {
+          "name": "size",
+          "propType": "string",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "type",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "normal",
+              "primary"
+            ]
+          },
+          "description": "样式类型",
+          "defaultValue": "normal"
+        },
+        {
+          "name": "visible",
+          "propType": "bool",
+          "description": "弹层当前显示的状态"
+        },
+        {
+          "name": "defaultVisible",
+          "propType": "bool",
+          "description": "弹层默认显示的状态",
+          "defaultValue": false
+        },
+        {
+          "name": "onVisibleChange",
+          "propType": "func",
+          "description": "弹层在显示和隐藏触发的事件\n@param {Boolean} visible 弹层是否隐藏和显示\n@param {String} type 触发弹层显示或隐藏的来源， closeClick 表示由自带的关闭按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发"
+        },
+        {
+          "name": "alignEdge",
+          "propType": "bool",
+          "description": "弹出层对齐方式, 是否为边缘对齐",
+          "defaultValue": false
+        },
+        {
+          "name": "closable",
+          "propType": "bool",
+          "description": "是否显示关闭按钮",
+          "defaultValue": true
+        },
+        {
+          "name": "align",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "t",
+              "r",
+              "b",
+              "l",
+              "tl",
+              "tr",
+              "bl",
+              "br",
+              "lt",
+              "lb",
+              "rt",
+              "rb"
+            ]
+          },
+          "description": "弹出层位置\n@enumdesc 上, 右, 下, 左, 上左, 上右, 下左, 下右, 左上, 左下, 右上, 右下 及其 两两组合",
+          "defaultValue": "b"
+        },
+        {
+          "name": "offset",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量\ne.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px",
+          "defaultValue": [
+            0,
+            0
+          ]
+        },
+        {
+          "name": "trigger",
+          "propType": "any",
+          "description": "触发元素"
+        },
+        {
+          "name": "triggerType",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "array"
+              }
+            ]
+          },
+          "description": "触发行为\n鼠标悬浮, 鼠标点击('hover','click')或者它们组成的数组，如 ['hover', 'click'], 强烈不建议使用'focus'，若弹窗内容有复杂交互请使用click",
+          "defaultValue": "hover"
+        },
+        {
+          "name": "onClick",
+          "propType": "func"
+        },
+        {
+          "name": "onClose",
+          "propType": "func",
+          "description": "任何visible为false时会触发的事件"
+        },
+        {
+          "name": "onHover",
+          "propType": "func"
+        },
+        {
+          "name": "needAdjust",
+          "propType": "bool",
+          "description": "是否进行自动位置调整",
+          "defaultValue": false
+        },
+        {
+          "name": "delay",
+          "propType": "number",
+          "description": "弹层在触发以后的延时显示, 单位毫秒 ms"
+        },
+        {
+          "name": "afterClose",
+          "propType": "func",
+          "description": "浮层关闭后触发的事件, 如果有动画，则在动画结束后触发"
+        },
+        {
+          "name": "shouldUpdatePosition",
+          "propType": "bool",
+          "description": "强制更新定位信息"
+        },
+        {
+          "name": "autoFocus",
+          "propType": "bool",
+          "description": "弹层出现后是否自动focus到内部第一个元素",
+          "defaultValue": true
+        },
+        {
+          "name": "safeNode",
+          "propType": "string",
+          "description": "安全节点:对于triggetType为click的浮层,会在点击除了浮层外的其它区域时关闭浮层.safeNode用于添加不触发关闭的节点, 值可以是dom节点的id或者是节点的dom对象"
+        },
+        {
+          "name": "safeId",
+          "propType": "string",
+          "description": "用来指定safeNode节点的id，和safeNode配合使用",
+          "defaultValue": null
+        },
+        {
+          "name": "animation",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "object",
+              "bool"
+            ]
+          },
+          "description": "配置动画的播放方式\n@param {String} in 进场动画\n@param {String} out 出场动画"
+        },
+        {
+          "name": "cache",
+          "propType": "bool",
+          "description": "弹层的dom节点关闭时是否删除",
+          "defaultValue": false
+        },
+        {
+          "name": "popupContainer",
+          "propType": "any",
+          "description": "指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数。"
+        },
+        {
+          "name": "container",
+          "propType": "any"
+        },
+        {
+          "name": "popupStyle",
+          "propType": "object",
+          "description": "弹层组件style，透传给Popup"
+        },
+        {
+          "name": "popupClassName",
+          "propType": "string",
+          "description": "弹层组件className，透传给Popup",
+          "defaultValue": ""
+        },
+        {
+          "name": "popupProps",
+          "propType": "object",
+          "description": "弹层组件属性，透传给Popup"
+        },
+        {
+          "name": "followTrigger",
+          "propType": "bool",
+          "description": "是否跟随滚动"
+        },
+        {
+          "name": "id",
+          "propType": "string",
+          "description": "弹层id, 传入值才会支持无障碍"
+        }
+      ]
+    },
+    {
+      "componentName": "Tooltip",
+      "title": "Tooltip",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Balloon",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Tooltip"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "description": "样式类名的品牌前缀",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "自定义类名"
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "自定义内联样式"
+        },
+        {
+          "name": "children",
+          "propType": "any",
+          "description": "tooltip的内容"
+        },
+        {
+          "name": "align",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "t",
+              "r",
+              "b",
+              "l",
+              "tl",
+              "tr",
+              "bl",
+              "br",
+              "lt",
+              "lb",
+              "rt",
+              "rb"
+            ]
+          },
+          "description": "弹出层位置\n@enumdesc 上, 右, 下, 左, 上左, 上右, 下左, 下右, 左上, 左下, 右上, 右下 及其 两两组合",
+          "defaultValue": "b"
+        },
+        {
+          "name": "trigger",
+          "propType": "any",
+          "description": "触发元素"
+        },
+        {
+          "name": "triggerType",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "array"
+              }
+            ]
+          },
+          "description": "触发行为\n鼠标悬浮,  鼠标点击('hover', 'click')或者它们组成的数组，如 ['hover', 'click'], 强烈不建议使用'focus'，若有复杂交互，推荐使用triggerType为click的Balloon组件",
+          "defaultValue": "hover"
+        },
+        {
+          "name": "popupStyle",
+          "propType": "object",
+          "description": "弹层组件style，透传给Popup"
+        },
+        {
+          "name": "popupClassName",
+          "propType": "string",
+          "description": "弹层组件className，透传给Popup"
+        },
+        {
+          "name": "popupProps",
+          "propType": "object",
+          "description": "弹层组件属性，透传给Popup"
+        },
+        {
+          "name": "pure",
+          "propType": "bool",
+          "description": "是否pure render"
+        },
+        {
+          "name": "popupContainer",
+          "propType": "any",
+          "description": "指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数。"
+        },
+        {
+          "name": "followTrigger",
+          "propType": "bool",
+          "description": "是否跟随滚动"
+        },
+        {
+          "name": "id",
+          "propType": "string",
+          "description": "弹层id, 传入值才会支持无障碍"
+        },
+        {
+          "name": "delay",
+          "propType": "number",
+          "description": "如果需要让 Tooltip 内容可被点击，可以设置这个参数，例如 100",
+          "defaultValue": 0
+        }
+      ]
+    },
+    {
+      "componentName": "BalloonInner",
+      "title": "BalloonInner",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Balloon",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Inner"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "closable",
+          "propType": "bool",
+          "defaultValue": true
+        },
+        {
+          "name": "children",
+          "propType": "any"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "alignEdge",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "onClose",
+          "propType": "func"
+        },
+        {
+          "name": "style",
+          "propType": "any"
+        },
+        {
+          "name": "align",
+          "propType": "string",
+          "defaultValue": "b"
+        },
+        {
+          "name": "type",
+          "propType": "string",
+          "defaultValue": "normal"
+        },
+        {
+          "name": "isTooltip",
+          "propType": "bool"
+        },
+        {
+          "name": "locale",
+          "propType": "object"
+        },
+        {
+          "name": "pure",
+          "propType": "bool",
+          "defaultValue": false
+        }
+      ]
+    },
+    {
+      "componentName": "Breadcrumb",
+      "title": "Breadcrumb",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Breadcrumb",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "description": "样式类名的品牌前缀",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "面包屑子节点，需传入 Breadcrumb.Item"
+        },
+        {
+          "name": "maxNode",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "number",
+              {
+                "type": "oneOf",
+                "value": [
+                  "auto"
+                ]
+              }
+            ]
+          },
+          "description": "面包屑最多显示个数，超出部分会被隐藏, 设置为 auto 会自动根据父元素的宽度适配。",
+          "defaultValue": 100
+        },
+        {
+          "name": "separator",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "分隔符，可以是文本或 Icon"
+        },
+        {
+          "name": "component",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              "func"
+            ]
+          },
+          "description": "设置标签类型",
+          "defaultValue": "nav"
+        },
+        {
+          "name": "className",
+          "propType": "any"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ],
+      "configure": {
+        "component": {
+          "isContainer": true
+        }
+      }
+    },
+    {
+      "componentName": "MCBreadcrumb",
+      "title": "MCBreadcrumb",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "mc-breadcrumb",
+        "version": "1.0.0",
+        "exportName": "MCBreadcrumb",
+        "main": "lib/index.js",
+        "destructuring": false,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "description": "样式类名的品牌前缀",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "title",
+          "propType": "string",
+          "description": "标题",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "面包屑子节点，需传入 Breadcrumb.Item"
+        },
+        {
+          "name": "maxNode",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "number",
+              {
+                "type": "oneOf",
+                "value": [
+                  "auto"
+                ]
+              }
+            ]
+          },
+          "description": "面包屑最多显示个数，超出部分会被隐藏, 设置为 auto 会自动根据父元素的宽度适配。",
+          "defaultValue": 100
+        },
+        {
+          "name": "separator",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "分隔符，可以是文本或 Icon"
+        },
+        {
+          "name": "component",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              "func"
+            ]
+          },
+          "description": "设置标签类型",
+          "defaultValue": "nav"
+        },
+        {
+          "name": "className",
+          "propType": "any"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ],
+      "configure": {
+        "component": {
+          "isContainer": true
+        }
+      }
+    },
+    {
+      "componentName": "Breadcrumb.Item",
+      "title": "Breadcrumb.Item",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Breadcrumb",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Item"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "link",
+          "propType": "string",
+          "description": "面包屑节点链接，如果设置这个属性，则该节点为`<a />` ，否则是`<span />`"
+        },
+        {
+          "name": "activated",
+          "propType": "bool"
+        },
+        {
+          "name": "separator",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "className",
+          "propType": "any"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ],
+      "configure": {
+        "component": {
+          "isContainer": true
+        }
+      }
+    },
+    {
+      "componentName": "Button",
+      "title": "Button",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Button",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "type",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "primary",
+              "secondary",
+              "normal"
+            ]
+          },
+          "description": "按钮的类型",
+          "defaultValue": "normal"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "small",
+              "medium",
+              "large"
+            ]
+          },
+          "description": "按钮的尺寸",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "iconSize",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "xxs",
+              "xs",
+              "small",
+              "medium",
+              "large",
+              "xl",
+              "xxl",
+              "xxxl"
+            ]
+          },
+          "description": "按钮中 Icon 的尺寸，用于替代 Icon 的默认大小"
+        },
+        {
+          "name": "htmlType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "submit",
+              "reset",
+              "button"
+            ]
+          },
+          "description": "当 component = 'button' 时，设置 button 标签的 type 值",
+          "defaultValue": "button"
+        },
+        {
+          "name": "component",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "button",
+              "a",
+              "div",
+              "span"
+            ]
+          },
+          "description": "设置标签类型",
+          "defaultValue": "button"
+        },
+        {
+          "name": "loading",
+          "propType": "bool",
+          "description": "设置按钮的载入状态",
+          "defaultValue": false
+        },
+        {
+          "name": "ghost",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              true,
+              false,
+              "light",
+              "dark"
+            ]
+          },
+          "description": "是否为幽灵按钮",
+          "defaultValue": false
+        },
+        {
+          "name": "text",
+          "propType": "bool",
+          "description": "是否为文本按钮",
+          "defaultValue": false
+        },
+        {
+          "name": "warning",
+          "propType": "bool",
+          "description": "是否为警告按钮",
+          "defaultValue": false
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁用",
+          "defaultValue": false
+        },
+        {
+          "name": "onClick",
+          "propType": "func",
+          "description": "点击按钮的回调\n@param {Object} e Event Object"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "onMouseUp",
+          "propType": "func"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "自定义内联样式"
+        }
+      ]
+    },
+    {
+      "componentName": "Button.Group",
+      "title": "Button.Group",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Button",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Group"
+      },
+      "props": [
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "size",
+          "propType": "string",
+          "description": "统一设置 Button 组件的按钮大小",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "自定义内联样式"
+        }
+      ],
+      "configure": {
+        "component": {
+          "isContainer": true
+        }
+      }
+    },
+    {
+      "componentName": "Calendar",
+      "title": "Calendar",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Calendar",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "defaultValue",
+          "propType": {
+            "type": "instanceOf",
+            "value": "custom"
+          },
+          "description": "默认选中的日期（moment 对象）"
+        },
+        {
+          "name": "value",
+          "propType": {
+            "type": "instanceOf",
+            "value": "custom"
+          },
+          "description": "选中的日期值 (moment 对象)"
+        },
+        {
+          "name": "modes",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          }
+        },
+        {
+          "name": "disableChangeMode",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "format",
+          "propType": "string",
+          "defaultValue": "YYYY-MM-DD"
+        },
+        {
+          "name": "showOtherMonth",
+          "propType": "bool",
+          "description": "是否展示非本月的日期",
+          "defaultValue": true
+        },
+        {
+          "name": "defaultVisibleMonth",
+          "propType": "func",
+          "description": "默认展示的月份"
+        },
+        {
+          "name": "shape",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "card",
+              "fullscreen",
+              "panel"
+            ]
+          },
+          "description": "展现形态",
+          "defaultValue": "fullscreen"
+        },
+        {
+          "name": "onSelect",
+          "propType": "func",
+          "description": "选择日期单元格时的回调\n@param {Object} value 对应的日期值 (moment 对象)"
+        },
+        {
+          "name": "onModeChange",
+          "propType": "func",
+          "description": "面板模式变化时的回调\n@param {String} mode 对应面板模式 date month year"
+        },
+        {
+          "name": "onVisibleMonthChange",
+          "propType": "func",
+          "description": "展现的月份变化时的回调\n@param {Object} value 显示的月份 (moment 对象)\n@param {String} reason 触发月份改变原因"
+        },
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "自定义样式类"
+        },
+        {
+          "name": "dateCellRender",
+          "propType": "func",
+          "description": "自定义日期渲染函数\n@param {Object} value 日期值（moment对象）\n@returns {ReactNode}"
+        },
+        {
+          "name": "monthCellRender",
+          "propType": "func",
+          "description": "自定义月份渲染函数\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@returns {ReactNode}"
+        },
+        {
+          "name": "yearCellRender",
+          "propType": "func"
+        },
+        {
+          "name": "disabledDate",
+          "propType": "func",
+          "description": "不可选择的日期\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@returns {Boolean}"
+        },
+        {
+          "name": "locale",
+          "propType": "object",
+          "description": "国际化配置"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "RangeCalendar",
+      "title": "RangeCalendar",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Calendar",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "RangeCalendar"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "description": "样式前缀",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "defaultStartValue",
+          "propType": {
+            "type": "instanceOf",
+            "value": "custom"
+          },
+          "description": "默认的开始日期"
+        },
+        {
+          "name": "defaultEndValue",
+          "propType": {
+            "type": "instanceOf",
+            "value": "custom"
+          },
+          "description": "默认的结束日期"
+        },
+        {
+          "name": "startValue",
+          "propType": {
+            "type": "instanceOf",
+            "value": "custom"
+          },
+          "description": "开始日期（moment 对象）"
+        },
+        {
+          "name": "endValue",
+          "propType": {
+            "type": "instanceOf",
+            "value": "custom"
+          },
+          "description": "结束日期（moment 对象）"
+        },
+        {
+          "name": "disableChangeMode",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "format",
+          "propType": "string",
+          "defaultValue": "YYYY-MM-DD"
+        },
+        {
+          "name": "showOtherMonth",
+          "propType": "bool",
+          "description": "是否显示非本月的日期",
+          "defaultValue": false
+        },
+        {
+          "name": "defaultVisibleMonth",
+          "propType": "func",
+          "description": "模板展示的月份（起始月份）"
+        },
+        {
+          "name": "onVisibleMonthChange",
+          "propType": "func",
+          "description": "展现的月份变化时的回调\n@param {Object} value 显示的月份 (moment 对象)\n@param {String} reason 触发月份改变原因"
+        },
+        {
+          "name": "disabledDate",
+          "propType": "func",
+          "description": "不可选择的日期\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@returns {Boolean}"
+        },
+        {
+          "name": "onSelect",
+          "propType": "func",
+          "description": "选择日期单元格时的回调\n@param {Object} value 对应的日期值 (moment 对象)"
+        },
+        {
+          "name": "dateCellRender",
+          "propType": "func",
+          "description": "自定义日期单元格渲染"
+        },
+        {
+          "name": "monthCellRender",
+          "propType": "func",
+          "description": "自定义月份渲染函数\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@returns {ReactNode}"
+        },
+        {
+          "name": "yearCellRender",
+          "propType": "func"
+        },
+        {
+          "name": "locale",
+          "propType": "object"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Card",
+      "title": "Card",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Card",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "media",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "卡片的上的图片 / 视频"
+        },
+        {
+          "name": "title",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "卡片的标题"
+        },
+        {
+          "name": "subTitle",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "卡片的副标题"
+        },
+        {
+          "name": "actions",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "卡片操作组，位置在卡片底部"
+        },
+        {
+          "name": "showTitleBullet",
+          "propType": "bool",
+          "description": "是否显示标题的项目符号",
+          "defaultValue": true
+        },
+        {
+          "name": "showHeadDivider",
+          "propType": "bool",
+          "description": "是否展示头部的分隔线",
+          "defaultValue": true
+        },
+        {
+          "name": "contentHeight",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              "number"
+            ]
+          },
+          "description": "内容区域的固定高度",
+          "defaultValue": 120
+        },
+        {
+          "name": "extra",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "标题区域的用户自定义内容"
+        },
+        {
+          "name": "free",
+          "propType": "bool",
+          "description": "是否开启自由模式，开启后card 将使用子组件配合使用, 设置此项后 title, subtitle, 等等属性都将失效",
+          "defaultValue": false
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "CardHeader",
+      "title": "CardHeader",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Card",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Header"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "title",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "卡片的标题"
+        },
+        {
+          "name": "subTitle",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "卡片的副标题"
+        },
+        {
+          "name": "extra",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "标题区域的用户自定义内容"
+        },
+        {
+          "name": "component",
+          "propType": {
+            "type": "instanceOf",
+            "value": "elementType"
+          },
+          "description": "设置标签类型",
+          "defaultValue": "div"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "CardMedia",
+      "title": "CardMedia",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Card",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Media"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "component",
+          "propType": {
+            "type": "instanceOf",
+            "value": "elementType"
+          },
+          "description": "设置标签类型",
+          "defaultValue": "div"
+        },
+        {
+          "name": "image",
+          "propType": "string",
+          "description": "背景图片地址"
+        },
+        {
+          "name": "src",
+          "propType": "string",
+          "description": "媒体源文件地址"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        }
+      ]
+    },
+    {
+      "componentName": "CardDivider",
+      "title": "CardDivider",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Card",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Divider"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "component",
+          "propType": {
+            "type": "instanceOf",
+            "value": "elementType"
+          },
+          "description": "设置标签类型",
+          "defaultValue": "hr"
+        },
+        {
+          "name": "inset",
+          "propType": "bool",
+          "description": "分割线是否向内缩进"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "CardContent",
+      "title": "CardContent",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Card",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Content"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "component",
+          "propType": {
+            "type": "instanceOf",
+            "value": "elementType"
+          },
+          "description": "设置标签类型",
+          "defaultValue": "div"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "CardActions",
+      "title": "CardActions",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Card",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Actions"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "component",
+          "propType": {
+            "type": "instanceOf",
+            "value": "elementType"
+          },
+          "description": "设置标签类型",
+          "defaultValue": "div"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "CardBulletHeader",
+      "title": "CardBulletHeader",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Card",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "BulletHeader"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "title",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "卡片的标题"
+        },
+        {
+          "name": "subTitle",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "卡片的副标题"
+        },
+        {
+          "name": "showTitleBullet",
+          "propType": "bool",
+          "description": "是否显示标题的项目符号",
+          "defaultValue": true
+        },
+        {
+          "name": "extra",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "标题区域的用户自定义内容"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "CardCollaspeContent",
+      "title": "CardCollaspeContent",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Card",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "CollaspeContent"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "contentHeight",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              "number"
+            ]
+          },
+          "description": "内容区域的固定高度",
+          "defaultValue": 120
+        },
+        {
+          "name": "locale",
+          "propType": "object"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Cascader",
+      "title": "Cascader",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Cascader",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "pure",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "选中值改变时触发的回调函数\n@param {String|Array} value 选中的值，单选时返回单个值，多选时返回数组\n@param {Object|Array} data 选中的数据，包括 value 和 label，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点\n@param {Object} extra 额外参数\n@param {Array} extra.selectedPath 单选时选中的数据的路径\n@param {Boolean} extra.checked 多选时当前的操作是选中还是取消选中\n@param {Object} extra.currentData 多选时当前操作的数据\n@param {Array} extra.checkedData 多选时所有被选中的数据\n@param {Array} extra.indeterminateData 多选时半选的数据"
+        },
+        {
+          "name": "onSelect",
+          "propType": "func"
+        },
+        {
+          "name": "expandTriggerType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "click",
+              "hover"
+            ]
+          },
+          "description": "展开触发的方式",
+          "defaultValue": "click"
+        },
+        {
+          "name": "onExpand",
+          "propType": "func",
+          "description": "展开时触发的回调函数\n@param {Array} expandedValue 各列展开值的数组"
+        },
+        {
+          "name": "useVirtual",
+          "propType": "bool",
+          "description": "是否开启虚拟滚动",
+          "defaultValue": false
+        },
+        {
+          "name": "multiple",
+          "propType": "bool",
+          "description": "是否多选",
+          "defaultValue": false
+        },
+        {
+          "name": "canOnlySelectLeaf",
+          "propType": "bool",
+          "description": "单选时是否只能选中叶子节点",
+          "defaultValue": false
+        },
+        {
+          "name": "canOnlyCheckLeaf",
+          "propType": "bool",
+          "description": "多选时是否只能选中叶子节点",
+          "defaultValue": false
+        },
+        {
+          "name": "checkStrictly",
+          "propType": "bool",
+          "description": "父子节点是否选中不关联",
+          "defaultValue": false
+        },
+        {
+          "name": "listStyle",
+          "propType": "object",
+          "description": "每列列表样式对象"
+        },
+        {
+          "name": "listClassName",
+          "propType": "string",
+          "description": "每列列表类名"
+        },
+        {
+          "name": "itemRender",
+          "propType": "func",
+          "description": "每列列表项渲染函数\n@param {Object} data 数据\n@return {ReactNode} 列表项内容"
+        },
+        {
+          "name": "loadData",
+          "propType": "func",
+          "description": "异步加载数据函数\n@param {Object} data 当前点击异步加载的数据\n@param {Object} source 当前点击数据，source是原始对象"
+        },
+        {
+          "name": "searchValue",
+          "propType": "string"
+        },
+        {
+          "name": "onBlur",
+          "propType": "func"
+        },
+        {
+          "name": "filteredPaths",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          }
+        },
+        {
+          "name": "filteredListStyle",
+          "propType": "object"
+        },
+        {
+          "name": "resultRender",
+          "propType": "func"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "CascaderSelect",
+      "title": "CascaderSelect",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "CascaderSelect",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "pure",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "small",
+              "medium",
+              "large"
+            ]
+          },
+          "description": "选择框大小",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "placeholder",
+          "propType": "string",
+          "description": "选择框占位符"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁用",
+          "defaultValue": false
+        },
+        {
+          "name": "hasArrow",
+          "propType": "bool",
+          "description": "是否有下拉箭头",
+          "defaultValue": true
+        },
+        {
+          "name": "hasBorder",
+          "propType": "bool",
+          "description": "是否有边框",
+          "defaultValue": true
+        },
+        {
+          "name": "hasClear",
+          "propType": "bool",
+          "description": "是否有清除按钮",
+          "defaultValue": false
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "自定义内联 label"
+        },
+        {
+          "name": "readOnly",
+          "propType": "bool",
+          "description": "是否只读，只读模式下可以展开弹层但不能选"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "选中值改变时触发的回调函数\n@param {String|Array} value 选中的值，单选时返回单个值，多选时返回数组\n@param {Object|Array} data 选中的数据，包括 value 和 label，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点\n@param {Object} extra 额外参数\n@param {Array} extra.selectedPath 单选时选中的数据的路径\n@param {Boolean} extra.checked 多选时当前的操作是选中还是取消选中\n@param {Object} extra.currentData 多选时当前操作的数据\n@param {Array} extra.checkedData 多选时所有被选中的数据\n@param {Array} extra.indeterminateData 多选时半选的数据"
+        },
+        {
+          "name": "expandTriggerType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "click",
+              "hover"
+            ]
+          },
+          "description": "展开触发的方式",
+          "defaultValue": "click"
+        },
+        {
+          "name": "onExpand",
+          "propType": "func"
+        },
+        {
+          "name": "useVirtual",
+          "propType": "bool",
+          "description": "是否开启虚拟滚动",
+          "defaultValue": false
+        },
+        {
+          "name": "multiple",
+          "propType": "bool",
+          "description": "是否多选",
+          "defaultValue": false
+        },
+        {
+          "name": "changeOnSelect",
+          "propType": "bool",
+          "description": "是否选中即发生改变, 该属性仅在单选模式下有效",
+          "defaultValue": false
+        },
+        {
+          "name": "canOnlyCheckLeaf",
+          "propType": "bool",
+          "description": "是否只能勾选叶子项的checkbox，该属性仅在多选模式下有效",
+          "defaultValue": false
+        },
+        {
+          "name": "checkStrictly",
+          "propType": "bool",
+          "description": "父子节点是否选中不关联",
+          "defaultValue": false
+        },
+        {
+          "name": "listStyle",
+          "propType": "object",
+          "description": "每列列表样式对象"
+        },
+        {
+          "name": "listClassName",
+          "propType": "string",
+          "description": "每列列表类名"
+        },
+        {
+          "name": "displayRender",
+          "propType": "func",
+          "description": "选择框单选时展示结果的自定义渲染函数\n@param {Array} label 选中路径的文本数组\n@return {ReactNode} 渲染在选择框中的内容\n@default 单选时：labelPath => labelPath.join(' / ')；多选时：labelPath => labelPath[labelPath.length - 1]"
+        },
+        {
+          "name": "itemRender",
+          "propType": "func",
+          "description": "渲染 item 内容的方法\n@param {Object} item 渲染节点的item\n@return {ReactNode} item node"
+        },
+        {
+          "name": "showSearch",
+          "propType": "bool",
+          "description": "是否显示搜索框",
+          "defaultValue": false
+        },
+        {
+          "name": "filter",
+          "propType": "func",
+          "description": "自定义搜索函数\n@param {String} searchValue 搜索的关键字\n@param {Array} path 节点路径\n@return {Boolean} 是否匹配\n@default 根据路径所有节点的文本值模糊匹配"
+        },
+        {
+          "name": "resultRender",
+          "propType": "func",
+          "description": "搜索结果自定义渲染函数\n@param {String} searchValue 搜索的关键字\n@param {Array} path 匹配到的节点路径\n@return {ReactNode} 渲染的内容\n@default 按照节点文本 a / b / c 的模式渲染"
+        },
+        {
+          "name": "resultAutoWidth",
+          "propType": "bool",
+          "description": "搜索结果列表是否和选择框等宽",
+          "defaultValue": true
+        },
+        {
+          "name": "notFoundContent",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "无数据时显示内容",
+          "defaultValue": "Not Found"
+        },
+        {
+          "name": "loadData",
+          "propType": "func",
+          "description": "异步加载数据函数\n@param {Object} data 当前点击异步加载的数据"
+        },
+        {
+          "name": "header",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "自定义下拉框头部"
+        },
+        {
+          "name": "footer",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "自定义下拉框底部"
+        },
+        {
+          "name": "defaultVisible",
+          "propType": "bool",
+          "description": "初始下拉框是否显示",
+          "defaultValue": false
+        },
+        {
+          "name": "visible",
+          "propType": "bool",
+          "description": "当前下拉框是否显示"
+        },
+        {
+          "name": "onVisibleChange",
+          "propType": "func",
+          "description": "下拉框显示或关闭时触发事件的回调函数\n@param {Boolean} visible 是否显示\n@param {String} type 触发显示关闭的操作类型, fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发"
+        },
+        {
+          "name": "popupStyle",
+          "propType": "object",
+          "description": "下拉框自定义样式对象"
+        },
+        {
+          "name": "popupClassName",
+          "propType": "string",
+          "description": "下拉框样式自定义类名"
+        },
+        {
+          "name": "popupContainer",
+          "propType": "any",
+          "description": "下拉框挂载的容器节点"
+        },
+        {
+          "name": "popupProps",
+          "propType": "object",
+          "description": "透传到 Popup 的属性对象"
+        },
+        {
+          "name": "followTrigger",
+          "propType": "bool",
+          "description": "是否跟随滚动"
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否为预览态"
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {Array<data>} value 选择值 { label: , value:}"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Checkbox",
+      "title": "Checkbox",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Checkbox",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "自定义类名"
+        },
+        {
+          "name": "id",
+          "propType": "string",
+          "description": "checkbox id, 挂载在input上"
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "自定义内敛样式"
+        },
+        {
+          "name": "checked",
+          "propType": "bool",
+          "description": "选中状态"
+        },
+        {
+          "name": "defaultChecked",
+          "propType": "bool",
+          "description": "默认选中状态",
+          "defaultValue": false
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "禁用"
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "通过属性配置label，"
+        },
+        {
+          "name": "indeterminate",
+          "propType": "bool",
+          "description": "Checkbox 的中间状态，只会影响到 Checkbox 的样式，并不影响其 checked 属性"
+        },
+        {
+          "name": "defaultIndeterminate",
+          "propType": "bool",
+          "description": "Checkbox 的默认中间态，只会影响到 Checkbox 的样式，并不影响其 checked 属性",
+          "defaultValue": false
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "状态变化时触发的事件\n@param {Boolean} checked 是否选中\n@param {Event} e Dom 事件对象"
+        },
+        {
+          "name": "onMouseEnter",
+          "propType": "func",
+          "description": "鼠标进入enter事件\n@param {Event} e Dom 事件对象"
+        },
+        {
+          "name": "onMouseLeave",
+          "propType": "func",
+          "description": "鼠标离开Leave事件\n@param {Event} e Dom 事件对象"
+        },
+        {
+          "name": "value",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              "number"
+            ]
+          },
+          "description": "checkbox 的value"
+        },
+        {
+          "name": "name",
+          "propType": "string",
+          "description": "name"
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否为预览态",
+          "defaultValue": false
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {number} value 评分值"
+        }
+      ]
+    },
+    {
+      "componentName": "CheckboxGroup",
+      "title": "CheckboxGroup",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Checkbox",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Group"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "自定义类名"
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "自定义内敛样式"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "整体禁用"
+        },
+        {
+          "name": "value",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              {
+                "type": "instanceOf",
+                "value": "array"
+              },
+              "string",
+              "number"
+            ]
+          },
+          "description": "被选中的值列表"
+        },
+        {
+          "name": "defaultValue",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              {
+                "type": "instanceOf",
+                "value": "array"
+              },
+              "string",
+              "number"
+            ]
+          },
+          "description": "默认被选中的值列表"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "选中值改变时的事件\n@param {Array} value 选中项列表\n@param {Event} e Dom 事件对象"
+        },
+        {
+          "name": "itemDirection",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "hoz",
+              "ver"
+            ]
+          },
+          "description": "子项目的排列方式\n- hoz: 水平排列 (default)\n- ver: 垂直排列",
+          "defaultValue": "hoz"
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否为预览态",
+          "defaultValue": false
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {number} value 评分值"
+        }
+      ]
+    },
+    {
+      "componentName": "Collapse",
+      "title": "Collapse",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Collapse",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "description": "样式前缀",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "组件接受行内样式"
+        },
+        {
+          "name": "dataSource",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "使用数据模型构建"
+        },
+        {
+          "name": "defaultExpandedKeys",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "默认展开keys"
+        },
+        {
+          "name": "expandedKeys",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "受控展开keys"
+        },
+        {
+          "name": "onExpand",
+          "propType": "func",
+          "description": "展开状态发升变化时候的回调"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "所有禁用"
+        },
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "扩展class"
+        },
+        {
+          "name": "accordion",
+          "propType": "bool",
+          "description": "手风琴模式，一次只能打开一个",
+          "defaultValue": false
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "id",
+          "propType": "string"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        }
+      ]
+    },
+    {
+      "componentName": "Panel",
+      "title": "Panel",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Collapse",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Panel"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "description": "样式类名的品牌前缀",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "子组件接受行内样式"
+        },
+        {
+          "name": "children",
+          "propType": "any"
+        },
+        {
+          "name": "isExpanded",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁止用户操作"
+        },
+        {
+          "name": "title",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "标题"
+        },
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "扩展class"
+        },
+        {
+          "name": "onClick",
+          "propType": "func"
+        },
+        {
+          "name": "id",
+          "propType": "string"
+        }
+      ]
+    },
+    {
+      "componentName": "ErrorBoundary",
+      "title": "ErrorBoundary",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "ConfigProvider",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "ErrorBoundary"
+      },
+      "props": [
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "element"
+          }
+        },
+        {
+          "name": "afterCatch",
+          "propType": "func",
+          "description": "捕获错误后的自定义处理, 比如埋点上传\n@param {Object} error 错误\n@param {Object} errorInfo 错误详细信息"
+        },
+        {
+          "name": "fallbackUI",
+          "propType": "func",
+          "description": "捕获错误后的展现 自定义组件\n@param {Object} error 错误\n@param {Object} errorInfo 错误详细信息\n@returns {Element} 捕获错误后的处理"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "DatePicker",
+      "title": "DatePicker",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "DatePicker",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "输入框内置标签"
+        },
+        {
+          "name": "state",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "success",
+              "loading",
+              "error"
+            ]
+          },
+          "description": "输入框状态"
+        },
+        {
+          "name": "placeholder",
+          "propType": "string",
+          "description": "输入提示"
+        },
+        {
+          "name": "defaultVisibleMonth",
+          "propType": "func",
+          "description": "默认展现的月\n@return {MomentObject} 返回包含指定月份的 moment 对象实例"
+        },
+        {
+          "name": "onVisibleMonthChange",
+          "propType": "func"
+        },
+        {
+          "name": "value",
+          "propType": {
+            "type": "instanceOf",
+            "value": "custom"
+          },
+          "description": "日期值（受控）moment 对象"
+        },
+        {
+          "name": "defaultValue",
+          "propType": {
+            "type": "instanceOf",
+            "value": "custom"
+          },
+          "description": "初始日期值，moment 对象"
+        },
+        {
+          "name": "format",
+          "propType": "string",
+          "description": "日期值的格式（用于限定用户输入和展示）",
+          "defaultValue": "YYYY-MM-DD"
+        },
+        {
+          "name": "showTime",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "object",
+              "bool"
+            ]
+          },
+          "description": "是否使用时间控件，传入 TimePicker 的属性 { defaultValue, format, ... }",
+          "defaultValue": false
+        },
+        {
+          "name": "resetTime",
+          "propType": "bool",
+          "description": "每次选择日期时是否重置时间（仅在 showTime 开启时有效）",
+          "defaultValue": false
+        },
+        {
+          "name": "disabledDate",
+          "propType": "func",
+          "description": "禁用日期函数\n@param {MomentObject} 日期值\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@return {Boolean} 是否禁用"
+        },
+        {
+          "name": "footerRender",
+          "propType": "func",
+          "description": "自定义面板页脚\n@return {Node} 自定义的面板页脚组件"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "日期值改变时的回调\n@param {MomentObject|String} value 日期值"
+        },
+        {
+          "name": "onOk",
+          "propType": "func",
+          "description": "点击确认按钮时的回调\n@return {MomentObject|String} 日期值"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "small",
+              "medium",
+              "large"
+            ]
+          },
+          "description": "输入框尺寸",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁用"
+        },
+        {
+          "name": "hasClear",
+          "propType": "bool",
+          "description": "是否显示清空按钮",
+          "defaultValue": true
+        },
+        {
+          "name": "visible",
+          "propType": "bool",
+          "description": "弹层显示状态"
+        },
+        {
+          "name": "defaultVisible",
+          "propType": "bool",
+          "description": "弹层默认是否显示",
+          "defaultValue": false
+        },
+        {
+          "name": "onVisibleChange",
+          "propType": "func",
+          "description": "弹层展示状态变化时的回调\n@param {Boolean} visible 弹层是否显示\n@param {String} type 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； okBtnClick 表示由确认按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发"
+        },
+        {
+          "name": "popupTriggerType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "click",
+              "hover"
+            ]
+          },
+          "description": "弹层触发方式",
+          "defaultValue": "click"
+        },
+        {
+          "name": "popupAlign",
+          "propType": "string",
+          "description": "弹层对齐方式,具体含义见 OverLay文档",
+          "defaultValue": "tl tl"
+        },
+        {
+          "name": "popupContainer",
+          "propType": "any",
+          "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素"
+        },
+        {
+          "name": "popupStyle",
+          "propType": "object",
+          "description": "弹层自定义样式"
+        },
+        {
+          "name": "popupClassName",
+          "propType": "string",
+          "description": "弹层自定义样式类"
+        },
+        {
+          "name": "popupProps",
+          "propType": "object",
+          "description": "弹层其他属性"
+        },
+        {
+          "name": "followTrigger",
+          "propType": "bool",
+          "description": "是否跟随滚动"
+        },
+        {
+          "name": "inputProps",
+          "propType": "object",
+          "description": "输入框其他属性"
+        },
+        {
+          "name": "dateCellRender",
+          "propType": "func",
+          "description": "自定义日期渲染函数\n@param {Object} value 日期值（moment对象）\n@returns {ReactNode}"
+        },
+        {
+          "name": "monthCellRender",
+          "propType": "func",
+          "description": "自定义月份渲染函数\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@returns {ReactNode}"
+        },
+        {
+          "name": "yearCellRender",
+          "propType": "func"
+        },
+        {
+          "name": "dateInputAriaLabel",
+          "propType": "string",
+          "description": "日期输入框的 aria-label 属性"
+        },
+        {
+          "name": "timeInputAriaLabel",
+          "propType": "string",
+          "description": "时间输入框的 aria-label 属性"
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否为预览态"
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {MomentObject} value 日期"
+        },
+        {
+          "name": "locale",
+          "propType": "object"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "name",
+          "propType": "string"
+        },
+        {
+          "name": "popupComponent",
+          "propType": {
+            "type": "instanceOf",
+            "value": "elementType"
+          }
+        },
+        {
+          "name": "popupContent",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "disableChangeMode",
+          "propType": "bool"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "RangePicker",
+      "title": "RangePicker",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "DatePicker",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "RangePicker"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "type",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "date",
+              "month",
+              "year"
+            ]
+          },
+          "description": "日期范围类型",
+          "defaultValue": "date"
+        },
+        {
+          "name": "defaultVisibleMonth",
+          "propType": "func",
+          "description": "默认展示的起始月份\n@return {MomentObject} 返回包含指定月份的 moment 对象实例"
+        },
+        {
+          "name": "onVisibleMonthChange",
+          "propType": "func"
+        },
+        {
+          "name": "value",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "日期范围值数组 [moment, moment]"
+        },
+        {
+          "name": "defaultValue",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "初始的日期范围值数组 [moment, moment]"
+        },
+        {
+          "name": "format",
+          "propType": "string",
+          "description": "日期格式",
+          "defaultValue": "YYYY-MM-DD"
+        },
+        {
+          "name": "showTime",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "object",
+              "bool"
+            ]
+          },
+          "description": "是否使用时间控件，支持传入 TimePicker 的属性",
+          "defaultValue": false
+        },
+        {
+          "name": "resetTime",
+          "propType": "bool",
+          "description": "每次选择是否重置时间（仅在 showTime 开启时有效）",
+          "defaultValue": false
+        },
+        {
+          "name": "disabledDate",
+          "propType": "func",
+          "description": "禁用日期函数\n@param {MomentObject} 日期值\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@return {Boolean} 是否禁用"
+        },
+        {
+          "name": "footerRender",
+          "propType": "func",
+          "description": "自定义面板页脚\n@return {Node} 自定义的面板页脚组件"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "日期范围值改变时的回调 [ MomentObject|String, MomentObject|String ]\n@param {Array<MomentObject|String>} value 日期值"
+        },
+        {
+          "name": "onOk",
+          "propType": "func",
+          "description": "点击确认按钮时的回调 返回开始时间和结束时间`[ MomentObject|String, MomentObject|String ]`\n@return {Array} 日期范围"
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "输入框内置标签"
+        },
+        {
+          "name": "state",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "error",
+              "loading",
+              "success"
+            ]
+          },
+          "description": "输入框状态"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "small",
+              "medium",
+              "large"
+            ]
+          },
+          "description": "输入框尺寸",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁用"
+        },
+        {
+          "name": "hasClear",
+          "propType": "bool",
+          "description": "是否显示清空按钮",
+          "defaultValue": true
+        },
+        {
+          "name": "visible",
+          "propType": "bool",
+          "description": "弹层显示状态"
+        },
+        {
+          "name": "defaultVisible",
+          "propType": "bool",
+          "description": "弹层默认是否显示",
+          "defaultValue": false
+        },
+        {
+          "name": "onVisibleChange",
+          "propType": "func",
+          "description": "弹层展示状态变化时的回调\n@param {Boolean} visible 弹层是否显示\n@param {String} type 触发弹层显示和隐藏的来源 okBtnClick 表示由确认按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发"
+        },
+        {
+          "name": "popupTriggerType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "click",
+              "hover"
+            ]
+          },
+          "description": "弹层触发方式",
+          "defaultValue": "click"
+        },
+        {
+          "name": "popupAlign",
+          "propType": "string",
+          "description": "弹层对齐方式, 具体含义见 OverLay文档",
+          "defaultValue": "tl tl"
+        },
+        {
+          "name": "popupContainer",
+          "propType": "any",
+          "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素"
+        },
+        {
+          "name": "popupStyle",
+          "propType": "object",
+          "description": "弹层自定义样式"
+        },
+        {
+          "name": "popupClassName",
+          "propType": "string",
+          "description": "弹层自定义样式类"
+        },
+        {
+          "name": "popupProps",
+          "propType": "object",
+          "description": "弹层其他属性"
+        },
+        {
+          "name": "followTrigger",
+          "propType": "bool",
+          "description": "是否跟随滚动"
+        },
+        {
+          "name": "inputProps",
+          "propType": "object",
+          "description": "输入框其他属性"
+        },
+        {
+          "name": "dateCellRender",
+          "propType": "func",
+          "description": "自定义日期单元格渲染"
+        },
+        {
+          "name": "monthCellRender",
+          "propType": "func",
+          "description": "自定义月份渲染函数\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@returns {ReactNode}"
+        },
+        {
+          "name": "yearCellRender",
+          "propType": "func"
+        },
+        {
+          "name": "startDateInputAriaLabel",
+          "propType": "string",
+          "description": "开始日期输入框的 aria-label 属性"
+        },
+        {
+          "name": "startTimeInputAriaLabel",
+          "propType": "string",
+          "description": "开始时间输入框的 aria-label 属性"
+        },
+        {
+          "name": "endDateInputAriaLabel",
+          "propType": "string",
+          "description": "结束日期输入框的 aria-label 属性"
+        },
+        {
+          "name": "endTimeInputAriaLabel",
+          "propType": "string",
+          "description": "结束时间输入框的 aria-label 属性"
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否为预览态"
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {Array<MomentObject, MomentObject>} value 日期区间"
+        },
+        {
+          "name": "disableChangeMode",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "ranges",
+          "propType": "object"
+        },
+        {
+          "name": "locale",
+          "propType": "object"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "name",
+          "propType": "string"
+        },
+        {
+          "name": "popupComponent",
+          "propType": {
+            "type": "instanceOf",
+            "value": "elementType"
+          }
+        },
+        {
+          "name": "popupContent",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "MonthPicker",
+      "title": "MonthPicker",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "DatePicker",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "MonthPicker"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "输入框内置标签"
+        },
+        {
+          "name": "state",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "success",
+              "loading",
+              "error"
+            ]
+          },
+          "description": "输入框状态"
+        },
+        {
+          "name": "placeholder",
+          "propType": "string",
+          "description": "输入提示"
+        },
+        {
+          "name": "defaultVisibleYear",
+          "propType": "func",
+          "description": "默认展现的年\n@return {MomentObject} 返回包含指定年份的 moment 对象实例"
+        },
+        {
+          "name": "value",
+          "propType": {
+            "type": "instanceOf",
+            "value": "custom"
+          },
+          "description": "日期值（受控）moment 对象"
+        },
+        {
+          "name": "defaultValue",
+          "propType": {
+            "type": "instanceOf",
+            "value": "custom"
+          },
+          "description": "初始日期值，moment 对象"
+        },
+        {
+          "name": "format",
+          "propType": "string",
+          "description": "日期值的格式（用于限定用户输入和展示）",
+          "defaultValue": "YYYY-MM"
+        },
+        {
+          "name": "disabledDate",
+          "propType": "func",
+          "description": "禁用日期函数\n@param {MomentObject} 日期值\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@return {Boolean} 是否禁用"
+        },
+        {
+          "name": "footerRender",
+          "propType": "func",
+          "description": "自定义面板页脚\n@return {Node} 自定义的面板页脚组件"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "日期值改变时的回调\n@param {MomentObject|String} value 日期值"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "small",
+              "medium",
+              "large"
+            ]
+          },
+          "description": "输入框尺寸",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁用"
+        },
+        {
+          "name": "hasClear",
+          "propType": "bool",
+          "description": "是否显示清空按钮",
+          "defaultValue": true
+        },
+        {
+          "name": "visible",
+          "propType": "bool",
+          "description": "弹层显示状态"
+        },
+        {
+          "name": "defaultVisible",
+          "propType": "bool",
+          "description": "弹层默认是否显示"
+        },
+        {
+          "name": "onVisibleChange",
+          "propType": "func",
+          "description": "弹层展示状态变化时的回调\n@param {Boolean} visible 弹层是否显示\n@param {String} type 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发"
+        },
+        {
+          "name": "popupTriggerType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "click",
+              "hover"
+            ]
+          },
+          "description": "弹层触发方式",
+          "defaultValue": "click"
+        },
+        {
+          "name": "popupAlign",
+          "propType": "string",
+          "description": "弹层对齐方式, 具体含义见 OverLay文档",
+          "defaultValue": "tl tl"
+        },
+        {
+          "name": "popupContainer",
+          "propType": "any",
+          "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素"
+        },
+        {
+          "name": "popupStyle",
+          "propType": "object",
+          "description": "弹层自定义样式"
+        },
+        {
+          "name": "popupClassName",
+          "propType": "string",
+          "description": "弹层自定义样式类"
+        },
+        {
+          "name": "popupProps",
+          "propType": "object",
+          "description": "弹层其他属性"
+        },
+        {
+          "name": "followTrigger",
+          "propType": "bool",
+          "description": "是否跟随滚动"
+        },
+        {
+          "name": "inputProps",
+          "propType": "object",
+          "description": "输入框其他属性"
+        },
+        {
+          "name": "monthCellRender",
+          "propType": "func",
+          "description": "自定义月份渲染函数\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@returns {ReactNode}"
+        },
+        {
+          "name": "yearCellRender",
+          "propType": "func"
+        },
+        {
+          "name": "dateInputAriaLabel",
+          "propType": "string",
+          "description": "日期输入框的 aria-label 属性"
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否为预览态"
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {MomentObject} value 月份"
+        },
+        {
+          "name": "locale",
+          "propType": "object"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "name",
+          "propType": "string"
+        },
+        {
+          "name": "popupComponent",
+          "propType": {
+            "type": "instanceOf",
+            "value": "elementType"
+          }
+        },
+        {
+          "name": "popupContent",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "YearPicker",
+      "title": "YearPicker",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "DatePicker",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "YearPicker"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "输入框内置标签"
+        },
+        {
+          "name": "state",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "success",
+              "loading",
+              "error"
+            ]
+          },
+          "description": "输入框状态"
+        },
+        {
+          "name": "placeholder",
+          "propType": "string",
+          "description": "输入提示"
+        },
+        {
+          "name": "value",
+          "propType": {
+            "type": "instanceOf",
+            "value": "custom"
+          },
+          "description": "日期值（受控）moment 对象"
+        },
+        {
+          "name": "defaultValue",
+          "propType": {
+            "type": "instanceOf",
+            "value": "custom"
+          },
+          "description": "初始日期值，moment 对象"
+        },
+        {
+          "name": "format",
+          "propType": "string",
+          "description": "日期值的格式（用于限定用户输入和展示）",
+          "defaultValue": "YYYY"
+        },
+        {
+          "name": "disabledDate",
+          "propType": "func",
+          "description": "禁用日期函数\n@param {MomentObject} 日期值\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@return {Boolean} 是否禁用"
+        },
+        {
+          "name": "footerRender",
+          "propType": "func",
+          "description": "自定义面板页脚\n@return {Node} 自定义的面板页脚组件"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "日期值改变时的回调\n@param {MomentObject|String} value 日期值"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "small",
+              "medium",
+              "large"
+            ]
+          },
+          "description": "输入框尺寸",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁用"
+        },
+        {
+          "name": "hasClear",
+          "propType": "bool",
+          "description": "是否显示清空按钮",
+          "defaultValue": true
+        },
+        {
+          "name": "visible",
+          "propType": "bool",
+          "description": "弹层显示状态"
+        },
+        {
+          "name": "defaultVisible",
+          "propType": "bool",
+          "description": "弹层默认是否显示"
+        },
+        {
+          "name": "onVisibleChange",
+          "propType": "func",
+          "description": "弹层展示状态变化时的回调\n@param {Boolean} visible 弹层是否显示\n@param {String} reason 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发"
+        },
+        {
+          "name": "popupTriggerType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "click",
+              "hover"
+            ]
+          },
+          "description": "弹层触发方式",
+          "defaultValue": "click"
+        },
+        {
+          "name": "popupAlign",
+          "propType": "string",
+          "description": "弹层对齐方式, 具体含义见 OverLay文档",
+          "defaultValue": "tl tl"
+        },
+        {
+          "name": "popupContainer",
+          "propType": "any",
+          "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素"
+        },
+        {
+          "name": "popupStyle",
+          "propType": "object",
+          "description": "弹层自定义样式"
+        },
+        {
+          "name": "popupClassName",
+          "propType": "string",
+          "description": "弹层自定义样式类"
+        },
+        {
+          "name": "popupProps",
+          "propType": "object",
+          "description": "弹层其他属性"
+        },
+        {
+          "name": "followTrigger",
+          "propType": "bool",
+          "description": "是否跟随滚动"
+        },
+        {
+          "name": "inputProps",
+          "propType": "object",
+          "description": "输入框其他属性"
+        },
+        {
+          "name": "yearCellRender",
+          "propType": "func"
+        },
+        {
+          "name": "dateInputAriaLabel",
+          "propType": "string",
+          "description": "日期输入框的 aria-label 属性"
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否为预览态"
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {MomentObject} value 年份"
+        },
+        {
+          "name": "locale",
+          "propType": "object"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "name",
+          "propType": "string"
+        },
+        {
+          "name": "popupComponent",
+          "propType": {
+            "type": "instanceOf",
+            "value": "elementType"
+          }
+        },
+        {
+          "name": "popupContent",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "WeekPicker",
+      "title": "WeekPicker",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "DatePicker",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "WeekPicker"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "输入框内置标签"
+        },
+        {
+          "name": "state",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "success",
+              "loading",
+              "error"
+            ]
+          },
+          "description": "输入框状态"
+        },
+        {
+          "name": "placeholder",
+          "propType": "string",
+          "description": "输入提示"
+        },
+        {
+          "name": "defaultVisibleMonth",
+          "propType": "func",
+          "description": "默认展现的月\n@return {MomentObject} 返回包含指定月份的 moment 对象实例"
+        },
+        {
+          "name": "onVisibleMonthChange",
+          "propType": "func"
+        },
+        {
+          "name": "value",
+          "propType": {
+            "type": "instanceOf",
+            "value": "custom"
+          },
+          "description": "日期值（受控）moment 对象"
+        },
+        {
+          "name": "defaultValue",
+          "propType": {
+            "type": "instanceOf",
+            "value": "custom"
+          },
+          "description": "初始日期值，moment 对象"
+        },
+        {
+          "name": "format",
+          "propType": "string",
+          "description": "日期值的格式（用于限定用户输入和展示）",
+          "defaultValue": "YYYY-wo"
+        },
+        {
+          "name": "disabledDate",
+          "propType": "func",
+          "description": "禁用日期函数\n@param {MomentObject} 日期值\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@return {Boolean} 是否禁用"
+        },
+        {
+          "name": "footerRender",
+          "propType": "func",
+          "description": "自定义面板页脚\n@return {Node} 自定义的面板页脚组件"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "日期值改变时的回调\n@param {MomentObject|String} value 日期值"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "small",
+              "medium",
+              "large"
+            ]
+          },
+          "description": "输入框尺寸",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁用"
+        },
+        {
+          "name": "hasClear",
+          "propType": "bool",
+          "description": "是否显示清空按钮",
+          "defaultValue": true
+        },
+        {
+          "name": "visible",
+          "propType": "bool",
+          "description": "弹层显示状态"
+        },
+        {
+          "name": "defaultVisible",
+          "propType": "bool",
+          "description": "弹层默认是否显示",
+          "defaultValue": false
+        },
+        {
+          "name": "onVisibleChange",
+          "propType": "func",
+          "description": "弹层展示状态变化时的回调\n@param {Boolean} visible 弹层是否显示\n@param {String} type 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； okBtnClick 表示由确认按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发"
+        },
+        {
+          "name": "popupTriggerType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "click",
+              "hover"
+            ]
+          },
+          "description": "弹层触发方式",
+          "defaultValue": "click"
+        },
+        {
+          "name": "popupAlign",
+          "propType": "string",
+          "description": "弹层对齐方式,具体含义见 OverLay文档",
+          "defaultValue": "tl tl"
+        },
+        {
+          "name": "popupContainer",
+          "propType": "any",
+          "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素"
+        },
+        {
+          "name": "popupStyle",
+          "propType": "object",
+          "description": "弹层自定义样式"
+        },
+        {
+          "name": "popupClassName",
+          "propType": "string",
+          "description": "弹层自定义样式类"
+        },
+        {
+          "name": "popupProps",
+          "propType": "object",
+          "description": "弹层其他属性"
+        },
+        {
+          "name": "followTrigger",
+          "propType": "bool",
+          "description": "是否跟随滚动"
+        },
+        {
+          "name": "inputProps",
+          "propType": "object",
+          "description": "输入框其他属性"
+        },
+        {
+          "name": "dateCellRender",
+          "propType": "func",
+          "description": "自定义日期渲染函数\n@param {Object} value 日期值（moment对象）\n@returns {ReactNode}"
+        },
+        {
+          "name": "monthCellRender",
+          "propType": "func",
+          "description": "自定义月份渲染函数\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@returns {ReactNode}"
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否为预览态"
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {MomentObject} value 年份"
+        },
+        {
+          "name": "yearCellRender",
+          "propType": "func"
+        },
+        {
+          "name": "locale",
+          "propType": "object"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "name",
+          "propType": "string"
+        },
+        {
+          "name": "popupComponent",
+          "propType": {
+            "type": "instanceOf",
+            "value": "elementType"
+          }
+        },
+        {
+          "name": "popupContent",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Dialog",
+      "title": "Dialog",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Dialog",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "pure",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "visible",
+          "propType": "oneOfType",
+          "description": "是否显示",
+          "defaultValue": false
+        },
+        {
+          "name": "title",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "标题"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "内容"
+        },
+        {
+          "name": "footer",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "bool",
+              {
+                "type": "instanceOf",
+                "value": "node"
+              }
+            ]
+          },
+          "description": "底部内容，设置为 false，则不进行显示\n@default [<Button type=\"primary\">确定</Button>, <Button>取消</Button>]"
+        },
+        {
+          "name": "footerAlign",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "left",
+              "center",
+              "right"
+            ]
+          },
+          "description": "底部按钮的对齐方式",
+          "defaultValue": "right"
+        },
+        {
+          "name": "footerActions",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "指定确定按钮和取消按钮是否存在以及如何排列,<br><br>**可选值**：\n['ok', 'cancel']（确认取消按钮同时存在，确认按钮在左）\n['cancel', 'ok']（确认取消按钮同时存在，确认按钮在右）\n['ok']（只存在确认按钮）\n['cancel']（只存在取消按钮）",
+          "defaultValue": [
+            "ok",
+            "cancel"
+          ]
+        },
+        {
+          "name": "onOk",
+          "propType": "func",
+          "description": "在点击确定按钮时触发的回调函数\n@param {Object} event 点击事件对象"
+        },
+        {
+          "name": "onCancel",
+          "propType": "func",
+          "description": "在点击取消按钮时触发的回调函数\n@param {Object} event 点击事件对象"
+        },
+        {
+          "name": "okProps",
+          "propType": "object",
+          "description": "应用于确定按钮的属性对象"
+        },
+        {
+          "name": "cancelProps",
+          "propType": "object",
+          "description": "应用于取消按钮的属性对象"
+        },
+        {
+          "name": "closeable",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              "bool"
+            ]
+          },
+          "description": "控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成：\n**close** 表示点击关闭按钮可以关闭对话框\n**mask** 表示点击遮罩区域可以关闭对话框\n**esc** 表示按下 esc 键可以关闭对话框\n如 'close' 或 'close,esc,mask'\n如果设置为 true，则以上关闭方式全部生效\n如果设置为 false，则以上关闭方式全部失效",
+          "defaultValue": "esc,close"
+        },
+        {
+          "name": "onClose",
+          "propType": "func",
+          "description": "对话框关闭时触发的回调函数\n@param {String} trigger 关闭触发行为的描述字符串\n@param {Object} event 关闭时事件对象"
+        },
+        {
+          "name": "afterClose",
+          "propType": "func",
+          "description": "对话框关闭后触发的回调函数, 如果有动画，则在动画结束后触发"
+        },
+        {
+          "name": "hasMask",
+          "propType": "bool",
+          "description": "是否显示遮罩",
+          "defaultValue": true
+        },
+        {
+          "name": "animation",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "object",
+              "bool"
+            ]
+          },
+          "description": "显示隐藏时动画的播放方式\n@property {String} in 进场动画\n@property {String} out 出场动画"
+        },
+        {
+          "name": "autoFocus",
+          "propType": "bool",
+          "description": "对话框弹出时是否自动获得焦点",
+          "defaultValue": false
+        },
+        {
+          "name": "align",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              "bool"
+            ]
+          },
+          "description": "对话框对齐方式, 具体见Overlay文档",
+          "defaultValue": "cc cc"
+        },
+        {
+          "name": "isFullScreen",
+          "propType": "bool",
+          "description": "当对话框高度超过浏览器视口高度时，是否显示所有内容而不是出现滚动条以保证对话框完整显示在浏览器视口内，该属性仅在对话框垂直水平居中时生效，即 align 被设置为 'cc cc' 时",
+          "defaultValue": false
+        },
+        {
+          "name": "shouldUpdatePosition",
+          "propType": "bool",
+          "description": "是否在对话框重新渲染时及时更新对话框位置，一般用于对话框高度变化后依然能保证原来的对齐方式",
+          "defaultValue": false
+        },
+        {
+          "name": "minMargin",
+          "propType": "number",
+          "description": "对话框距离浏览器顶部和底部的最小间距，align 被设置为 'cc cc' 并且 isFullScreen 被设置为 true 时不生效",
+          "defaultValue": 40
+        },
+        {
+          "name": "overlayProps",
+          "propType": "object",
+          "description": "透传到弹层组件的属性对象"
+        },
+        {
+          "name": "locale",
+          "propType": "object",
+          "description": "自定义国际化文案对象\n@property {String} ok 确认按钮文案\n@property {String} cancel 取消按钮文案"
+        },
+        {
+          "name": "height",
+          "propType": "string",
+          "description": "对话框的高度样式属性"
+        },
+        {
+          "name": "popupContainer",
+          "propType": "any"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ],
+      "configure": {
+        "isContainer": true,
+        "isModel": true
+      }
+    },
+    {
+      "componentName": "Inner",
+      "title": "Inner",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Dialog",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Inner"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "title",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "footer",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "bool",
+              {
+                "type": "instanceOf",
+                "value": "node"
+              }
+            ]
+          }
+        },
+        {
+          "name": "footerAlign",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "left",
+              "center",
+              "right"
+            ]
+          },
+          "defaultValue": "right"
+        },
+        {
+          "name": "footerActions",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "defaultValue": [
+            "ok",
+            "cancel"
+          ]
+        },
+        {
+          "name": "onOk",
+          "propType": "func"
+        },
+        {
+          "name": "onCancel",
+          "propType": "func"
+        },
+        {
+          "name": "okProps",
+          "propType": "object"
+        },
+        {
+          "name": "cancelProps",
+          "propType": "object"
+        },
+        {
+          "name": "closeable",
+          "propType": "bool",
+          "defaultValue": true
+        },
+        {
+          "name": "onClose",
+          "propType": "func"
+        },
+        {
+          "name": "locale",
+          "propType": "object"
+        },
+        {
+          "name": "role",
+          "propType": "string",
+          "defaultValue": "dialog"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "height",
+          "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Dropdown",
+      "title": "Dropdown",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Dropdown",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "pure",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "弹层内容"
+        },
+        {
+          "name": "visible",
+          "propType": "bool",
+          "description": "弹层当前是否显示"
+        },
+        {
+          "name": "defaultVisible",
+          "propType": "bool",
+          "description": "弹层默认是否显示",
+          "defaultValue": false
+        },
+        {
+          "name": "onVisibleChange",
+          "propType": "func",
+          "description": "弹层显示或隐藏时触发的回调函数\n@param {Boolean} visible 弹层是否显示\n@param {String} type 触发弹层显示或隐藏的来源 fromContent 表示由Dropdown内容触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发"
+        },
+        {
+          "name": "trigger",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "触发弹层显示或者隐藏的元素"
+        },
+        {
+          "name": "triggerType",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "array"
+              }
+            ]
+          },
+          "description": "触发弹层显示或隐藏的操作类型，可以是 'click'，'hover'，或者它们组成的数组，如 ['hover', 'click']",
+          "defaultValue": "hover"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "设置此属性，弹层无法显示或隐藏",
+          "defaultValue": false
+        },
+        {
+          "name": "align",
+          "propType": "string",
+          "description": "弹层相对于触发元素的定位, 详见 Overlay 的定位部分",
+          "defaultValue": "tl bl"
+        },
+        {
+          "name": "offset",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量\ne.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px",
+          "defaultValue": [
+            0,
+            0
+          ]
+        },
+        {
+          "name": "delay",
+          "propType": "number",
+          "description": "弹层显示或隐藏的延时时间（以毫秒为单位），在 triggerType 被设置为 hover 时生效",
+          "defaultValue": 200
+        },
+        {
+          "name": "autoFocus",
+          "propType": "bool",
+          "description": "弹层打开时是否让其中的元素自动获取焦点"
+        },
+        {
+          "name": "hasMask",
+          "propType": "bool",
+          "description": "是否显示遮罩",
+          "defaultValue": false
+        },
+        {
+          "name": "cache",
+          "propType": "bool",
+          "description": "隐藏时是否保留子节点",
+          "defaultValue": false
+        },
+        {
+          "name": "animation",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "object",
+              "bool"
+            ]
+          },
+          "description": "配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画\n@default { in: 'expandInDown', out: 'expandOutUp' }"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Form",
+      "title": "Form",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Form",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "description": "样式前缀",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "inline",
+          "propType": "bool",
+          "description": "内联表单"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "large",
+              "medium",
+              "small"
+            ]
+          },
+          "description": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。\n@enumdesc 大, 中, 小",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "fullWidth",
+          "propType": "bool",
+          "description": "单个 Item 中表单类组件宽度是否是100%"
+        },
+        {
+          "name": "labelAlign",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "top",
+              "left",
+              "inset"
+            ]
+          },
+          "description": "标签的位置\n@enumdesc 上, 左, 内",
+          "defaultValue": "left"
+        },
+        {
+          "name": "labelTextAlign",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "left",
+              "right"
+            ]
+          },
+          "description": "标签的左右对齐方式\n@enumdesc 左, 右"
+        },
+        {
+          "name": "field",
+          "propType": "any",
+          "description": "field 实例, 传 false 会禁用 field"
+        },
+        {
+          "name": "saveField",
+          "propType": "func",
+          "description": "保存 Form 自动生成的 field 对象"
+        },
+        {
+          "name": "labelCol",
+          "propType": "object",
+          "description": "控制第一级 Item 的 labelCol"
+        },
+        {
+          "name": "wrapperCol",
+          "propType": "object",
+          "description": "控制第一级 Item 的 wrapperCol"
+        },
+        {
+          "name": "onSubmit",
+          "propType": "func",
+          "description": "form内有 `htmlType=\"submit\"` 的元素的时候会触发"
+        },
+        {
+          "name": "children",
+          "propType": "any",
+          "description": "子元素"
+        },
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "扩展class"
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "自定义内联样式"
+        },
+        {
+          "name": "value",
+          "propType": "object",
+          "description": "表单数值"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "表单变化回调\n@param {Object} values 表单数据\n@param {Object} item 详细\n@param {String} item.name 变化的组件名\n@param {String} item.value 变化的数据\n@param {Object} item.field field 实例"
+        },
+        {
+          "name": "component",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              "func"
+            ]
+          },
+          "description": "设置标签类型",
+          "defaultValue": "form"
+        },
+        {
+          "name": "fieldOptions",
+          "propType": "object"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "device",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "phone",
+              "tablet",
+              "desktop"
+            ]
+          },
+          "description": "预设屏幕宽度",
+          "defaultValue": "desktop"
+        },
+        {
+          "name": "responsive",
+          "propType": "bool",
+          "description": "是否开启内置的响应式布局 （使用ResponsiveGrid）"
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否开启预览态"
+        }
+      ]
+    },
+    {
+      "componentName": "Form.Item",
+      "title": "Form.Item",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Form",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Item"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "description": "样式前缀",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "label 标签的文本"
+        },
+        {
+          "name": "labelCol",
+          "propType": "object",
+          "description": "label 标签布局，通 `<Col>` 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效"
+        },
+        {
+          "name": "wrapperCol",
+          "propType": "object",
+          "description": "需要为输入控件设置布局样式时，使用该属性，用法同 labelCol"
+        },
+        {
+          "name": "help",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "自定义提示信息，如不设置，则会根据校验规则自动生成."
+        },
+        {
+          "name": "extra",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面"
+        },
+        {
+          "name": "validateState",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "error",
+              "success",
+              "loading",
+              "warning"
+            ]
+          },
+          "description": "校验状态，如不设置，则会根据校验规则自动生成\n@enumdesc 失败, 成功, 校验中, 警告"
+        },
+        {
+          "name": "hasFeedback",
+          "propType": "bool",
+          "description": "配合 validateState 属性使用，是否展示 success/loading 的校验状态图标, 目前只有Input支持",
+          "defaultValue": false
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "自定义内联样式"
+        },
+        {
+          "name": "id",
+          "propType": "string"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              {
+                "type": "instanceOf",
+                "value": "node"
+              },
+              "func"
+            ]
+          },
+          "description": "node 或者 function(values)"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "large",
+              "small",
+              "medium"
+            ]
+          },
+          "description": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。"
+        },
+        {
+          "name": "fullWidth",
+          "propType": "bool",
+          "description": "单个 Item 中表单类组件宽度是否是100%"
+        },
+        {
+          "name": "labelAlign",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "top",
+              "left",
+              "inset"
+            ]
+          },
+          "description": "标签的位置\n@enumdesc 上, 左, 内"
+        },
+        {
+          "name": "labelTextAlign",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "left",
+              "right"
+            ]
+          },
+          "description": "标签的左右对齐方式\n@enumdesc 左, 右"
+        },
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "扩展class"
+        },
+        {
+          "name": "required",
+          "propType": "bool",
+          "description": "[表单校验] 不能为空"
+        },
+        {
+          "name": "asterisk",
+          "propType": "bool",
+          "description": "required 的星号是否显示"
+        },
+        {
+          "name": "requiredMessage",
+          "propType": "string",
+          "description": "required 自定义错误信息"
+        },
+        {
+          "name": "requiredTrigger",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "array"
+              }
+            ]
+          },
+          "description": "required 自定义触发方式"
+        },
+        {
+          "name": "min",
+          "propType": "number",
+          "description": "[表单校验] 最小值"
+        },
+        {
+          "name": "max",
+          "propType": "number",
+          "description": "[表单校验] 最大值"
+        },
+        {
+          "name": "minmaxMessage",
+          "propType": "string",
+          "description": "min/max 自定义错误信息"
+        },
+        {
+          "name": "minmaxTrigger",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "array"
+              }
+            ]
+          },
+          "description": "min/max 自定义触发方式"
+        },
+        {
+          "name": "minLength",
+          "propType": "number",
+          "description": "[表单校验] 字符串最小长度 / 数组最小个数"
+        },
+        {
+          "name": "maxLength",
+          "propType": "number",
+          "description": "[表单校验] 字符串最大长度 / 数组最大个数"
+        },
+        {
+          "name": "minmaxLengthMessage",
+          "propType": "string",
+          "description": "minLength/maxLength 自定义错误信息"
+        },
+        {
+          "name": "minmaxLengthTrigger",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "array"
+              }
+            ]
+          },
+          "description": "minLength/maxLength 自定义触发方式"
+        },
+        {
+          "name": "length",
+          "propType": "number",
+          "description": "[表单校验] 字符串精确长度 / 数组精确个数"
+        },
+        {
+          "name": "lengthMessage",
+          "propType": "string",
+          "description": "length 自定义错误信息"
+        },
+        {
+          "name": "lengthTrigger",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "array"
+              }
+            ]
+          },
+          "description": "length 自定义触发方式"
+        },
+        {
+          "name": "pattern",
+          "propType": "any",
+          "description": "正则校验"
+        },
+        {
+          "name": "patternMessage",
+          "propType": "string",
+          "description": "pattern 自定义错误信息"
+        },
+        {
+          "name": "patternTrigger",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "array"
+              }
+            ]
+          },
+          "description": "pattern 自定义触发方式"
+        },
+        {
+          "name": "format",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "number",
+              "email",
+              "url",
+              "tel"
+            ]
+          },
+          "description": "[表单校验] 四种常用的 pattern"
+        },
+        {
+          "name": "formatMessage",
+          "propType": "string",
+          "description": "format 自定义错误信息"
+        },
+        {
+          "name": "formatTrigger",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "array"
+              }
+            ]
+          },
+          "description": "format 自定义触发方式"
+        },
+        {
+          "name": "validator",
+          "propType": "func",
+          "description": "[表单校验] 自定义校验函数"
+        },
+        {
+          "name": "validatorTrigger",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "array"
+              }
+            ]
+          },
+          "description": "validator 自定义触发方式"
+        },
+        {
+          "name": "autoValidate",
+          "propType": "bool",
+          "description": "是否修改数据时自动触发校验"
+        },
+        {
+          "name": "device",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "phone",
+              "tablet",
+              "desktop"
+            ]
+          },
+          "description": "预设屏幕宽度"
+        },
+        {
+          "name": "responsive",
+          "propType": "bool"
+        },
+        {
+          "name": "colSpan",
+          "propType": "number",
+          "description": "在响应式布局模式下，表单项占多少列"
+        },
+        {
+          "name": "labelWidth",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              "number"
+            ]
+          },
+          "description": "在响应式布局下，且label在左边时，label的宽度是多少",
+          "defaultValue": 100
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否开启预览态"
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {any} value 根据包裹的组件的 value 类型而决定"
+        }
+      ],
+      "configure": {
+        "component": {
+          "isContainer": true
+        }
+      }
+    },
+    {
+      "componentName": "Form.Submit",
+      "title": "Form.Submit",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Form",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Submit"
+      },
+      "props": [
+        {
+          "name": "onClick",
+          "propType": "func",
+          "description": "点击提交后触发\n@param {Object} value 数据\n@param {Object} errors 错误数据\n@param {class} field 实例"
+        },
+        {
+          "name": "validate",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "bool",
+              {
+                "type": "instanceOf",
+                "value": "array"
+              }
+            ]
+          },
+          "description": "是否校验/需要校验的 name 数组"
+        },
+        {
+          "name": "field",
+          "propType": "object",
+          "description": "自定义 field (在 Form 内不需要设置)"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Form.Reset",
+      "title": "Form.Reset",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Form",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Reset"
+      },
+      "props": [
+        {
+          "name": "names",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "自定义重置的字段"
+        },
+        {
+          "name": "onClick",
+          "propType": "func",
+          "description": "点击提交后触发"
+        },
+        {
+          "name": "toDefault",
+          "propType": "bool",
+          "description": "返回默认值"
+        },
+        {
+          "name": "field",
+          "propType": "object",
+          "description": "自定义 field (在 Form 内不需要设置)"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Form.Error",
+      "title": "Form.Error",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Form",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Error"
+      },
+      "props": [
+        {
+          "name": "name",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "array"
+              }
+            ]
+          },
+          "description": "表单名"
+        },
+        {
+          "name": "field",
+          "propType": "object",
+          "description": "自定义 field (在 Form 内不需要设置)"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              {
+                "type": "instanceOf",
+                "value": "node"
+              },
+              "func"
+            ]
+          },
+          "description": "自定义错误渲染, 可以是 node 或者 function(errors, state)"
+        },
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        }
+      ]
+    },
+    {
+      "componentName": "Icon",
+      "title": "Icon",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Icon",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "type",
+          "propType": "string",
+          "description": "指定显示哪种图标"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              {
+                "type": "oneOf",
+                "value": [
+                  "xxs",
+                  "xs",
+                  "small",
+                  "medium",
+                  "large",
+                  "xl",
+                  "xxl",
+                  "xxxl",
+                  "inherit"
+                ]
+              },
+              "number"
+            ]
+          },
+          "description": "指定图标大小\n<br/>**可选值**<br/> xxs, xs, small, medium, large, xl, xxl, xxxl, inherit",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        },
+        {
+          "name": "prefix",
+          "defaultValue": "next-"
+        }
+      ]
+    },
+    {
+      "componentName": "Input",
+      "title": "Input",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Input",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "label"
+        },
+        {
+          "name": "hasClear",
+          "propType": "bool",
+          "description": "是否出现clear按钮"
+        },
+        {
+          "name": "hasBorder",
+          "propType": "bool",
+          "description": "是否有边框",
+          "defaultValue": true
+        },
+        {
+          "name": "state",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "error",
+              "loading",
+              "success",
+              "warning"
+            ]
+          },
+          "description": "状态\n@enumdesc 错误, 校验中, 成功, 警告"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "small",
+              "medium",
+              "large"
+            ]
+          },
+          "description": "尺寸\n@enumdesc 小, 中, 大",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "onPressEnter",
+          "propType": "func",
+          "description": "按下回车的回调"
+        },
+        {
+          "name": "onClear",
+          "propType": "func"
+        },
+        {
+          "name": "htmlType",
+          "propType": "string",
+          "description": "原生type"
+        },
+        {
+          "name": "htmlSize",
+          "propType": "string"
+        },
+        {
+          "name": "hint",
+          "propType": "string",
+          "description": "水印 (Icon的type类型，和hasClear占用一个地方)"
+        },
+        {
+          "name": "innerBefore",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "文字前附加内容"
+        },
+        {
+          "name": "innerAfter",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "文字后附加内容"
+        },
+        {
+          "name": "addonBefore",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "输入框前附加内容"
+        },
+        {
+          "name": "addonAfter",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "输入框后附加内容"
+        },
+        {
+          "name": "addonTextBefore",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "输入框前附加文字"
+        },
+        {
+          "name": "addonTextAfter",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "输入框后附加文字"
+        },
+        {
+          "name": "autoComplete",
+          "propType": "string",
+          "description": "(原生input支持)",
+          "defaultValue": "off"
+        },
+        {
+          "name": "autoFocus",
+          "propType": "bool",
+          "description": "自动聚焦(原生input支持)"
+        },
+        {
+          "name": "inputRender",
+          "propType": "func"
+        },
+        {
+          "name": "extra",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "innerBeforeClassName",
+          "propType": "string"
+        },
+        {
+          "name": "innerAfterClassName",
+          "propType": "string"
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否为预览态",
+          "defaultValue": false
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {number} value 评分值"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Input.Password",
+      "title": "Input.Password",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Input",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Password"
+      },
+      "props": [
+        {
+          "name": "showToggle",
+          "propType": "bool",
+          "description": "是否展示切换按钮",
+          "defaultValue": true
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Input.TextArea",
+      "title": "Input.TextArea",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Input",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "TextArea"
+      },
+      "props": [
+        {
+          "name": "hasBorder",
+          "propType": "bool",
+          "description": "是否有边框",
+          "defaultValue": true
+        },
+        {
+          "name": "state",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "error",
+              "warning"
+            ]
+          },
+          "description": "状态\n@enumdesc 错误"
+        },
+        {
+          "name": "autoHeight",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "bool",
+              "object"
+            ]
+          },
+          "description": "自动高度 true / {minRows: 2, maxRows: 4}",
+          "defaultValue": false
+        },
+        {
+          "name": "rows",
+          "propType": "number",
+          "description": "多行文本框高度 <br />(不要直接用height设置多行文本框的高度, ie9 10会有兼容性问题)",
+          "defaultValue": 4
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否为预览态",
+          "defaultValue": false
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {number} value 评分值"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Input.Group",
+      "title": "Input.Group",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Input",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Group"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "description": "样式前缀",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "addonBefore",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "输入框前附加内容"
+        },
+        {
+          "name": "addonBeforeClassName",
+          "propType": "string",
+          "description": "输入框前附加内容css"
+        },
+        {
+          "name": "addonAfter",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "输入框后附加内容"
+        },
+        {
+          "name": "addonAfterClassName",
+          "propType": "string",
+          "description": "输入框后额外css"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool",
+          "description": "rtl"
+        }
+      ]
+    },
+    {
+      "componentName": "Loading",
+      "title": "Loading",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Loading",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "description": "样式前缀",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "tip",
+          "propType": "any",
+          "description": "自定义内容"
+        },
+        {
+          "name": "tipAlign",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "right",
+              "bottom"
+            ]
+          },
+          "description": "自定义内容位置\n@enumdesc 出现在动画右边, 出现在动画下面",
+          "defaultValue": "bottom"
+        },
+        {
+          "name": "visible",
+          "propType": "bool",
+          "description": "loading 状态, 默认 true",
+          "defaultValue": true
+        },
+        {
+          "name": "onVisibleChange",
+          "propType": "func"
+        },
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "自定义class"
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "自定义内联样式"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "large",
+              "medium"
+            ]
+          },
+          "description": "设置动画尺寸\n@description 仅仅对默认动画效果起作用\n@enumdesc 大号, 中号",
+          "defaultValue": "large"
+        },
+        {
+          "name": "indicator",
+          "propType": "any",
+          "description": "自定义动画"
+        },
+        {
+          "name": "color",
+          "propType": "string",
+          "description": "动画颜色"
+        },
+        {
+          "name": "fullScreen",
+          "propType": "bool",
+          "description": "全屏展示"
+        },
+        {
+          "name": "children",
+          "propType": "any",
+          "description": "子元素"
+        },
+        {
+          "name": "inline",
+          "propType": "bool",
+          "description": "should loader be displayed inline",
+          "defaultValue": true
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "animate",
+          "defaultValue": null
+        }
+      ]
+    },
+    {
+      "componentName": "Menu",
+      "title": "Menu",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Menu",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "pure",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "菜单项和子菜单"
+        },
+        {
+          "name": "onItemClick",
+          "propType": "func",
+          "description": "点击菜单项触发的回调函数\n@param {String} key 点击的菜单项的 key 值\n@param {Object} item 点击的菜单项对象\n@param {Object} event 点击的事件对象"
+        },
+        {
+          "name": "openKeys",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "array"
+              }
+            ]
+          },
+          "description": "当前打开的子菜单的 key 值"
+        },
+        {
+          "name": "defaultOpenKeys",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "array"
+              }
+            ]
+          },
+          "description": "初始打开的子菜单的 key 值",
+          "defaultValue": []
+        },
+        {
+          "name": "defaultOpenAll",
+          "propType": "bool",
+          "description": "初始展开所有的子菜单，只在 mode 设置为 'inline' 以及 openMode 设置为 'multiple' 下生效，优先级高于 defaultOpenKeys",
+          "defaultValue": false
+        },
+        {
+          "name": "onOpen",
+          "propType": "func",
+          "description": "打开或关闭子菜单触发的回调函数\n@param {String} key 打开的所有子菜单的 key 值\n@param {Object} extra 额外参数\n@param {String} extra.key 当前操作子菜单的 key 值\n@param {Boolean} extra.open 是否是打开"
+        },
+        {
+          "name": "mode",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "inline",
+              "popup"
+            ]
+          },
+          "description": "子菜单打开的模式",
+          "defaultValue": "inline"
+        },
+        {
+          "name": "triggerType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "click",
+              "hover"
+            ]
+          },
+          "description": "子菜单打开的触发行为",
+          "defaultValue": "click"
+        },
+        {
+          "name": "openMode",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "single",
+              "multiple"
+            ]
+          },
+          "description": "展开内连子菜单的模式，同时可以展开一个子菜单还是多个子菜单，该属性仅在 mode 为 inline 时生效",
+          "defaultValue": "multiple"
+        },
+        {
+          "name": "inlineIndent",
+          "propType": "number",
+          "description": "内连子菜单缩进距离",
+          "defaultValue": 20
+        },
+        {
+          "name": "inlineArrowDirection",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "down",
+              "right"
+            ]
+          },
+          "defaultValue": "down"
+        },
+        {
+          "name": "popupAutoWidth",
+          "propType": "bool",
+          "description": "是否自动让弹层的宽度和菜单项保持一致，如果弹层的宽度比菜单项小则和菜单项保持一致，如果宽度大于菜单项则不做处理",
+          "defaultValue": false
+        },
+        {
+          "name": "popupAlign",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "follow",
+              "outside"
+            ]
+          },
+          "description": "弹层的对齐方式",
+          "defaultValue": "follow"
+        },
+        {
+          "name": "popupProps",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "object",
+              "func"
+            ]
+          },
+          "description": "弹层自定义 props"
+        },
+        {
+          "name": "popupClassName",
+          "propType": "string",
+          "description": "弹出子菜单自定义 className"
+        },
+        {
+          "name": "popupStyle",
+          "propType": "object",
+          "description": "弹出子菜单自定义 style"
+        },
+        {
+          "name": "selectedKeys",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "array"
+              }
+            ]
+          },
+          "description": "当前选中菜单项的 key 值"
+        },
+        {
+          "name": "defaultSelectedKeys",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "array"
+              }
+            ]
+          },
+          "description": "初始选中菜单项的 key 值",
+          "defaultValue": []
+        },
+        {
+          "name": "onSelect",
+          "propType": "func",
+          "description": "选中或取消选中菜单项触发的回调函数\n@param {Array} selectedKeys 选中的所有菜单项的值\n@param {Object} item 选中或取消选中的菜单项\n@param {Object} extra 额外参数\n@param {Boolean} extra.select 是否是选中\n@param {Array} extra.key 菜单项的 key\n@param {Object} extra.label 菜单项的文本\n@param {Array} extra.keyPath 菜单项 key 的路径"
+        },
+        {
+          "name": "selectMode",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "single",
+              "multiple"
+            ]
+          },
+          "description": "选中模式，单选还是多选，默认无值，不可选"
+        },
+        {
+          "name": "shallowSelect",
+          "propType": "bool",
+          "description": "是否只能选择第一层菜单项（不能选择子菜单中的菜单项）",
+          "defaultValue": false
+        },
+        {
+          "name": "hasSelectedIcon",
+          "propType": "bool",
+          "description": "是否显示选中图标，如果设置为 false 需配合配置平台设置选中时的背景色以示区分",
+          "defaultValue": true
+        },
+        {
+          "name": "labelToggleChecked",
+          "propType": "bool",
+          "defaultValue": true
+        },
+        {
+          "name": "isSelectIconRight",
+          "propType": "bool",
+          "description": "是否将选中图标居右，仅当 hasSelectedIcon 为true 时生效。\n注意：SubMenu 上的选中图标一直居左，不受此API控制",
+          "defaultValue": false
+        },
+        {
+          "name": "direction",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "ver",
+              "hoz"
+            ]
+          },
+          "description": "菜单第一层展示方向",
+          "defaultValue": "ver"
+        },
+        {
+          "name": "hozAlign",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "left",
+              "right"
+            ]
+          },
+          "description": "横向菜单条 item 和 footer 的对齐方向，在 direction 设置为 'hoz' 并且 header 存在时生效",
+          "defaultValue": "left"
+        },
+        {
+          "name": "hozInLine",
+          "propType": "bool",
+          "description": "横向菜单模式下，是否维持在一行，即超出一行折叠成 SubMenu 显示， 仅在 direction='hoz' mode='popup' 时生效",
+          "defaultValue": false
+        },
+        {
+          "name": "renderMore",
+          "propType": "func"
+        },
+        {
+          "name": "header",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "自定义菜单头部"
+        },
+        {
+          "name": "footer",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "自定义菜单尾部"
+        },
+        {
+          "name": "autoFocus",
+          "propType": "bool",
+          "description": "是否自动获得焦点",
+          "defaultValue": false
+        },
+        {
+          "name": "focusedKey",
+          "propType": "string",
+          "description": "当前获得焦点的子菜单或菜单项 key 值"
+        },
+        {
+          "name": "focusable",
+          "propType": "bool",
+          "defaultValue": true
+        },
+        {
+          "name": "onItemFocus",
+          "propType": "func"
+        },
+        {
+          "name": "onBlur",
+          "propType": "func"
+        },
+        {
+          "name": "embeddable",
+          "propType": "bool",
+          "description": "是否开启嵌入式模式，一般用于Layout的布局中，开启后没有默认背景、外层border、box-shadow，可以配合`<Menu style={{lineHeight: '100px'}}>` 自定义高度",
+          "defaultValue": false
+        },
+        {
+          "name": "onItemKeyDown",
+          "propType": "func"
+        },
+        {
+          "name": "expandAnimation",
+          "propType": "bool",
+          "defaultValue": true
+        },
+        {
+          "name": "itemClassName",
+          "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "SubMenu",
+      "title": "SubMenu",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Menu",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "SubMenu"
+      },
+      "props": [
+        {
+          "name": "_key",
+          "propType": "string"
+        },
+        {
+          "name": "root",
+          "propType": "object"
+        },
+        {
+          "name": "level",
+          "propType": "number"
+        },
+        {
+          "name": "inlineLevel",
+          "propType": "number"
+        },
+        {
+          "name": "groupIndent",
+          "propType": "number",
+          "defaultValue": 0
+        },
+        {
+          "name": "noIcon",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "标签内容"
+        },
+        {
+          "name": "selectable",
+          "propType": "bool",
+          "description": "是否可选，该属性仅在设置 Menu 组件 selectMode 属性后生效",
+          "defaultValue": false
+        },
+        {
+          "name": "mode",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "inline",
+              "popup"
+            ]
+          },
+          "description": "子菜单打开方式，如果设置会覆盖 Menu 上的同名属性\n@default Menu 的 mode 属性值"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "菜单项或下一级子菜单"
+        },
+        {
+          "name": "onMouseEnter",
+          "propType": "func"
+        },
+        {
+          "name": "onMouseLeave",
+          "propType": "func"
+        },
+        {
+          "name": "subMenuContentClassName",
+          "propType": "string"
+        },
+        {
+          "name": "triggerType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "click",
+              "hover"
+            ]
+          }
+        },
+        {
+          "name": "align",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "outside",
+              "follow"
+            ]
+          }
+        },
+        {
+          "name": "parentMode",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "inline",
+              "popup"
+            ]
+          }
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "SelectableItem",
+      "title": "SelectableItem",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Menu",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Item"
+      },
+      "props": [
+        {
+          "name": "_key",
+          "propType": "string"
+        },
+        {
+          "name": "root",
+          "propType": "object"
+        },
+        {
+          "name": "selected",
+          "propType": "bool"
+        },
+        {
+          "name": "onSelect",
+          "propType": "func"
+        },
+        {
+          "name": "inlineIndent",
+          "propType": "number"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁用",
+          "defaultValue": false
+        },
+        {
+          "name": "helper",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "帮助文本"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "菜单项标签内容"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "onKeyDown",
+          "propType": "func"
+        },
+        {
+          "name": "onClick",
+          "propType": "func"
+        },
+        {
+          "name": "needIndent",
+          "propType": "bool",
+          "defaultValue": true
+        },
+        {
+          "name": "hasSelectedIcon",
+          "propType": "bool"
+        },
+        {
+          "name": "isSelectIconRight",
+          "propType": "bool"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "CheckboxItem",
+      "title": "CheckboxItem",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Menu",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "CheckboxItem"
+      },
+      "props": [
+        {
+          "name": "checked",
+          "propType": "bool",
+          "description": "是否选中",
+          "defaultValue": false
+        },
+        {
+          "name": "indeterminate",
+          "propType": "bool",
+          "description": "是否半选中",
+          "defaultValue": false
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁用",
+          "defaultValue": false
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "选中或取消选中触发的回调函数\n@param {Boolean} checked 是否选中\n@param {Object} event 选中事件对象"
+        },
+        {
+          "name": "helper",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "帮助文本"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "标签内容"
+        },
+        {
+          "name": "checkboxDisabled",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "RadioItem",
+      "title": "RadioItem",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Menu",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "RadioItem"
+      },
+      "props": [
+        {
+          "name": "checked",
+          "propType": "bool",
+          "description": "是否选中",
+          "defaultValue": false
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁用",
+          "defaultValue": false
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "选中或取消选中触发的回调函数\n@param {Boolean} checked 是否选中\n@param {Object} event 选中事件对象"
+        },
+        {
+          "name": "helper",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "帮助文本"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "标签内容"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "PopupItem",
+      "title": "PopupItem",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Menu",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "PopupItem"
+      },
+      "props": [
+        {
+          "name": "_key",
+          "propType": "string"
+        },
+        {
+          "name": "root",
+          "propType": "object"
+        },
+        {
+          "name": "level",
+          "propType": "number"
+        },
+        {
+          "name": "hasSubMenu",
+          "propType": "bool"
+        },
+        {
+          "name": "noIcon",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "selectable",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "标签内容"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "自定义弹层内容"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "triggerType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "click",
+              "hover"
+            ]
+          }
+        },
+        {
+          "name": "align",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "outside",
+              "follow"
+            ]
+          }
+        },
+        {
+          "name": "autoWidth",
+          "propType": "bool"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Group",
+      "title": "Group",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Menu",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Group"
+      },
+      "props": [
+        {
+          "name": "root",
+          "propType": "object"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "标签内容"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "菜单项"
+        },
+        {
+          "name": "parentMode",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "inline",
+              "popup"
+            ]
+          }
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Divider",
+      "title": "Divider",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Menu",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Divider"
+      },
+      "props": [
+        {
+          "name": "root",
+          "propType": "object"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "MenuButton",
+      "title": "MenuButton",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "MenuButton",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "按钮上的文本内容"
+        },
+        {
+          "name": "autoWidth",
+          "propType": "bool",
+          "description": "弹层是否与按钮宽度相同",
+          "defaultValue": true
+        },
+        {
+          "name": "popupTriggerType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "click",
+              "hover"
+            ]
+          },
+          "description": "弹层触发方式",
+          "defaultValue": "click"
+        },
+        {
+          "name": "popupContainer",
+          "propType": "any",
+          "description": "弹层容器"
+        },
+        {
+          "name": "visible",
+          "propType": "bool",
+          "description": "弹层展开状态"
+        },
+        {
+          "name": "defaultVisible",
+          "propType": "bool",
+          "description": "弹层默认是否展开"
+        },
+        {
+          "name": "onVisibleChange",
+          "propType": "func",
+          "description": "弹层在显示和隐藏触发的事件"
+        },
+        {
+          "name": "popupStyle",
+          "propType": "object",
+          "description": "弹层自定义样式"
+        },
+        {
+          "name": "popupClassName",
+          "propType": "string",
+          "description": "弹层自定义样式类"
+        },
+        {
+          "name": "popupProps",
+          "propType": "object",
+          "description": "弹层属性透传"
+        },
+        {
+          "name": "followTrigger",
+          "propType": "bool",
+          "description": "是否跟随滚动"
+        },
+        {
+          "name": "defaultSelectedKeys",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "默认激活的菜单项（用法同 Menu 非受控）",
+          "defaultValue": []
+        },
+        {
+          "name": "selectedKeys",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "激活的菜单项（用法同 Menu 受控）"
+        },
+        {
+          "name": "selectMode",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "single",
+              "multiple"
+            ]
+          },
+          "description": "菜单的选择模式，同 Menu"
+        },
+        {
+          "name": "onItemClick",
+          "propType": "func",
+          "description": "点击菜单项后的回调，同 Menu"
+        },
+        {
+          "name": "onSelect",
+          "propType": "func",
+          "description": "选择菜单后的回调，同 Menu"
+        },
+        {
+          "name": "menuProps",
+          "propType": "object",
+          "description": "菜单属性透传"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "children",
+          "propType": "any"
+        }
+      ]
+    },
+    {
+      "componentName": "Message",
+      "title": "Message",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Message",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "pure",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        },
+        {
+          "name": "type",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "success",
+              "warning",
+              "error",
+              "notice",
+              "help",
+              "loading"
+            ]
+          },
+          "description": "反馈类型",
+          "defaultValue": "success"
+        },
+        {
+          "name": "shape",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "inline",
+              "addon",
+              "toast"
+            ]
+          },
+          "description": "反馈外观",
+          "defaultValue": "inline"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "medium",
+              "large"
+            ]
+          },
+          "description": "反馈大小",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "title",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "标题"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "内容"
+        },
+        {
+          "name": "defaultVisible",
+          "propType": "bool",
+          "description": "默认是否显示",
+          "defaultValue": true
+        },
+        {
+          "name": "visible",
+          "propType": "bool",
+          "description": "当前是否显示"
+        },
+        {
+          "name": "iconType",
+          "propType": "string",
+          "description": "显示的图标类型，会覆盖内部设置的IconType"
+        },
+        {
+          "name": "closeable",
+          "propType": "bool",
+          "description": "显示关闭按钮",
+          "defaultValue": false
+        },
+        {
+          "name": "onClose",
+          "propType": "func",
+          "description": "关闭按钮的回调"
+        },
+        {
+          "name": "afterClose",
+          "propType": "func",
+          "description": "关闭之后调用的函数"
+        },
+        {
+          "name": "animation",
+          "propType": "bool",
+          "description": "是否开启展开收起动画",
+          "defaultValue": true
+        },
+        {
+          "name": "locale",
+          "propType": "object"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        }
+      ]
+    },
+    {
+      "componentName": "Nav",
+      "title": "Nav",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Nav",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "pure",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "导航项和子导航"
+        },
+        {
+          "name": "type",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "normal",
+              "primary",
+              "secondary",
+              "line"
+            ]
+          },
+          "description": "导航类型\n@enumdesc 普通, 主要, 次要, 线形",
+          "defaultValue": "normal"
+        },
+        {
+          "name": "direction",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "hoz",
+              "ver"
+            ]
+          },
+          "description": "导航布局\n@enumdesc 水平, 垂直",
+          "defaultValue": "ver"
+        },
+        {
+          "name": "hozAlign",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "left",
+              "right"
+            ]
+          },
+          "description": "横向导航条 items 和 footer 的对齐方向，在 direction 设置为 'hoz' 并且 header 存在时生效",
+          "defaultValue": "left"
+        },
+        {
+          "name": "activeDirection",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              null,
+              "top",
+              "bottom",
+              "left",
+              "right"
+            ]
+          },
+          "description": "设置组件选中状态的 active 边方向\n@enumdesc 无, 上, 下, 左, 右\n@default 当 direction 为 'hoz' 时，默认值为 'bottom'，当 direction 为 'ver' 时，默认值为 'left'"
+        },
+        {
+          "name": "mode",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "inline",
+              "popup"
+            ]
+          },
+          "description": "子导航打开的模式（水平导航只支持弹出）\n@eumdesc 行内, 弹出",
+          "defaultValue": "inline"
+        },
+        {
+          "name": "triggerType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "click",
+              "hover"
+            ]
+          },
+          "description": "子导航打开的触发方式",
+          "defaultValue": "click"
+        },
+        {
+          "name": "inlineIndent",
+          "propType": "number",
+          "description": "内联子导航缩进距离",
+          "defaultValue": 20
+        },
+        {
+          "name": "defaultOpenAll",
+          "propType": "bool",
+          "description": "初始展开所有的子导航，只在 mode 设置为 'inline' 以及 openMode 设置为 'multiple' 下生效",
+          "defaultValue": false
+        },
+        {
+          "name": "openMode",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "single",
+              "multiple"
+            ]
+          },
+          "description": "内联子导航的展开模式，同时可以展开一个同级子导航还是多个同级子导航，该属性仅在 mode 为 inline 时生效\n@eumdesc 一个, 多个",
+          "defaultValue": "multiple"
+        },
+        {
+          "name": "selectedKeys",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "array"
+              }
+            ]
+          },
+          "description": "当前选中导航项的 key 值"
+        },
+        {
+          "name": "defaultSelectedKeys",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "array"
+              }
+            ]
+          },
+          "description": "初始选中导航项的 key 值",
+          "defaultValue": []
+        },
+        {
+          "name": "onSelect",
+          "propType": "func",
+          "description": "选中或取消选中导航项触发的回调函数\n@param {Array} selectedKeys 选中的所有导航项的 key\n@param {Object} item 选中或取消选中的导航项\n@param {Object} extra 额外参数\n@param {Boolean} extra.select 是否是选中\n@param {Array} extra.key 导航项的 key\n@param {Object} extra.label 导航项的文本\n@param {Array} extra.keyPath 导航项 key 的路径"
+        },
+        {
+          "name": "popupAlign",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "follow",
+              "outside"
+            ]
+          },
+          "description": "弹出子导航的对齐方式（水平导航只支持 follow ）\n@eumdesc Item 顶端对齐, Nav 顶端对齐",
+          "defaultValue": "follow"
+        },
+        {
+          "name": "popupClassName",
+          "propType": "string",
+          "description": "弹出子导航的自定义类名"
+        },
+        {
+          "name": "iconOnly",
+          "propType": "bool",
+          "description": "是否只显示图标"
+        },
+        {
+          "name": "hasArrow",
+          "propType": "bool",
+          "description": "是否显示右侧的箭头（仅在 iconOnly=true 时生效）",
+          "defaultValue": true
+        },
+        {
+          "name": "hasTooltip",
+          "propType": "bool",
+          "description": "是否有 ToolTips （仅在 iconOnly=true 时生效）",
+          "defaultValue": false
+        },
+        {
+          "name": "header",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "自定义导航头部"
+        },
+        {
+          "name": "footer",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "自定义导航尾部"
+        },
+        {
+          "name": "embeddable",
+          "propType": "bool",
+          "description": "是否开启嵌入式模式，一般用于Layout的布局中，开启后没有默认背景、外层border、box-shadow，可以配合`<Nav style={{lineHeight: '100px'}}>` 自定义高度",
+          "defaultValue": false
+        },
+        {
+          "name": "popupProps",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Item",
+      "title": "Item",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Nav",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Item"
+      },
+      "props": [
+        {
+          "name": "icon",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "node"
+              }
+            ]
+          },
+          "description": "自定义图标，可以使用 Icon 的 type，也可以使用组件 `<Icon type=\"icon type\" />`"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "导航内容"
+        },
+        {
+          "name": "parentMode",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "inline",
+              "popup"
+            ]
+          }
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Group",
+      "title": "Group",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Nav",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Group"
+      },
+      "props": [
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "自定义类名"
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "标签内容"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "导航项和子导航"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "SubNav",
+      "title": "SubNav",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Nav",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "SubNav"
+      },
+      "props": [
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "自定义类名"
+        },
+        {
+          "name": "icon",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "node"
+              }
+            ]
+          },
+          "description": "自定义图标，可以使用 Icon 的 type，也可以使用组件 `<Icon type=\"your type\" />`"
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "标签内容"
+        },
+        {
+          "name": "selectable",
+          "propType": "bool",
+          "description": "是否可选",
+          "defaultValue": false
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "导航项和子导航"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "PopupItem",
+      "title": "PopupItem",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Nav",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "PopupItem"
+      },
+      "props": [
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "自定义类名"
+        },
+        {
+          "name": "icon",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              {
+                "type": "instanceOf",
+                "value": "node"
+              }
+            ]
+          },
+          "description": "自定义图标，可以使用 Icon 的 type, 也可以使用组件 `<Icon type=\"icon type\" />`"
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "标签内容"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "弹出内容"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "NumberPicker",
+      "title": "NumberPicker",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "NumberPicker",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "description": "样式前缀",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "type",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "normal",
+              "inline"
+            ]
+          },
+          "description": "设置类型\n@enumdesc 普通, 内联",
+          "defaultValue": "normal"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "large",
+              "medium"
+            ]
+          },
+          "description": "大小",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "value",
+          "propType": "number",
+          "description": "当前值"
+        },
+        {
+          "name": "defaultValue",
+          "propType": "number",
+          "description": "默认值"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁用"
+        },
+        {
+          "name": "step",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "number",
+              "string"
+            ]
+          },
+          "description": "步长",
+          "defaultValue": 1
+        },
+        {
+          "name": "precision",
+          "propType": "number",
+          "description": "保留小数点后位数",
+          "defaultValue": 0
+        },
+        {
+          "name": "editable",
+          "propType": "bool",
+          "description": "用户是否可以输入",
+          "defaultValue": true
+        },
+        {
+          "name": "autoFocus",
+          "propType": "bool",
+          "description": "自动焦点"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "数值被改变的事件\n@param {Number} value 数据\n@param {Event} e DOM事件对象"
+        },
+        {
+          "name": "onKeyDown",
+          "propType": "func",
+          "description": "键盘按下"
+        },
+        {
+          "name": "onFocus",
+          "propType": "func",
+          "description": "焦点获得"
+        },
+        {
+          "name": "onBlur",
+          "propType": "func",
+          "description": "焦点失去"
+        },
+        {
+          "name": "onCorrect",
+          "propType": "func",
+          "description": "数值订正后的回调\n@param {Object} obj {currentValue,oldValue:String}"
+        },
+        {
+          "name": "onDisabled",
+          "propType": "func"
+        },
+        {
+          "name": "max",
+          "propType": "number",
+          "description": "最大值",
+          "defaultValue": null
+        },
+        {
+          "name": "min",
+          "propType": "number",
+          "description": "最小值",
+          "defaultValue": null
+        },
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "自定义class"
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "自定义内联样式"
+        },
+        {
+          "name": "state",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "error"
+            ]
+          }
+        },
+        {
+          "name": "format",
+          "propType": "func",
+          "description": "格式化当前值\n@param {Number} value\n@return {String|Number}"
+        },
+        {
+          "name": "upBtnProps",
+          "propType": "object",
+          "description": "增加按钮的props"
+        },
+        {
+          "name": "downBtnProps",
+          "propType": "object",
+          "description": "减少按钮的props"
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "内联 label"
+        },
+        {
+          "name": "innerAfter",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "inner after"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否为预览态"
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {number} value 评分值"
+        },
+        {
+          "name": "device",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "phone",
+              "tablet",
+              "desktop"
+            ]
+          },
+          "description": "预设屏幕宽度"
+        }
+      ]
+    },
+    {
+      "componentName": "Pagination",
+      "title": "Pagination",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Pagination",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "pure",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "rtl",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "device",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "desktop",
+              "tablet",
+              "phone"
+            ]
+          }
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "locale",
+          "propType": "object",
+          "description": "自定义国际化文案对象"
+        },
+        {
+          "name": "type",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "normal",
+              "simple",
+              "mini"
+            ]
+          },
+          "description": "分页组件类型",
+          "defaultValue": "normal"
+        },
+        {
+          "name": "shape",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "normal",
+              "arrow-only",
+              "arrow-prev-only",
+              "no-border"
+            ]
+          },
+          "description": "前进后退按钮样式",
+          "defaultValue": "normal"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "small",
+              "medium",
+              "large"
+            ]
+          },
+          "description": "分页组件大小",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "current",
+          "propType": "number",
+          "description": "（受控）当前页码"
+        },
+        {
+          "name": "defaultCurrent",
+          "propType": "number",
+          "description": "（非受控）初始页码",
+          "defaultValue": 1
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "页码发生改变时的回调函数\n@param {Number} current 改变后的页码数\n@param {Object} e 点击事件对象"
+        },
+        {
+          "name": "total",
+          "propType": "number",
+          "description": "总记录数",
+          "defaultValue": 100
+        },
+        {
+          "name": "totalRender",
+          "propType": "func",
+          "description": "总数的渲染函数\n@param {Number} total 总数\n@param {Array} range 当前数据在总数中的区间"
+        },
+        {
+          "name": "pageShowCount",
+          "propType": "number",
+          "description": "页码显示的数量，更多的使用...代替",
+          "defaultValue": 5
+        },
+        {
+          "name": "pageSize",
+          "propType": "number",
+          "description": "一页中的记录数",
+          "defaultValue": 10
+        },
+        {
+          "name": "pageSizeSelector",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              false,
+              "filter",
+              "dropdown"
+            ]
+          },
+          "description": "每页显示选择器类型",
+          "defaultValue": false
+        },
+        {
+          "name": "pageNumberRender",
+          "propType": "func",
+          "description": "自定义页码渲染函数，函数作用于页码button以及当前页/总页数的数字渲染\n@param {Number} index 分页的页码，从1开始\n@return {ReactNode} 返回渲染结果"
+        },
+        {
+          "name": "pageSizePosition",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "start",
+              "end"
+            ]
+          },
+          "description": "每页显示选择器在组件中的位置",
+          "defaultValue": "start"
+        },
+        {
+          "name": "useFloatLayout",
+          "propType": "bool",
+          "description": "存在每页显示选择器时是否使用浮动布局",
+          "defaultValue": false
+        },
+        {
+          "name": "onPageSizeChange",
+          "propType": "func",
+          "description": "每页显示记录数量改变时的回调函数\n@param {Number} pageSize 改变后的每页显示记录数"
+        },
+        {
+          "name": "hideOnlyOnePage",
+          "propType": "bool",
+          "description": "当分页数为1时，是否隐藏分页器",
+          "defaultValue": false
+        },
+        {
+          "name": "showJump",
+          "propType": "bool",
+          "description": "type 设置为 normal 时，在页码数超过5页后，会显示跳转输入框与按钮，当设置 showJump 为 false 时，不再显示该跳转区域",
+          "defaultValue": true
+        },
+        {
+          "name": "link",
+          "propType": "string",
+          "description": "设置页码按钮的跳转链接，它的值为一个包含 {page} 的模版字符串，如：http://www.taobao.com/{page}"
+        },
+        {
+          "name": "selectPopupContiner",
+          "propType": "any"
+        },
+        {
+          "name": "popupProps",
+          "propType": "object",
+          "description": "弹层组件属性，透传给Popup"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Progress",
+      "title": "Progress",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Progress",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "shape",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "circle",
+              "line"
+            ]
+          },
+          "description": "形态",
+          "defaultValue": "line"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "small",
+              "medium",
+              "large"
+            ]
+          },
+          "description": "尺寸",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "percent",
+          "propType": "number",
+          "description": "所占百分比",
+          "defaultValue": 0
+        },
+        {
+          "name": "state",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "normal",
+              "success",
+              "error"
+            ]
+          },
+          "description": "进度状态, 显示优先级: color > progressive > state",
+          "defaultValue": "normal"
+        },
+        {
+          "name": "progressive",
+          "propType": "bool",
+          "description": "是否为色彩阶段变化模式, 显示优先级: color > progressive > state",
+          "defaultValue": false
+        },
+        {
+          "name": "hasBorder",
+          "propType": "bool",
+          "description": "是否添加 Border（只适用于 Line Progress)",
+          "defaultValue": false
+        },
+        {
+          "name": "textRender",
+          "propType": "func",
+          "description": "文本渲染函数\n@param {Number} percent 当前的进度信息\n@param {Object} option 额外的参数\n@property {Boolean} option.rtl 是否在rtl 模式下渲染\n@return {ReactNode} 返回文本节点"
+        },
+        {
+          "name": "color",
+          "propType": "string",
+          "description": "进度条颜色, 显示优先级: color > progressive > state"
+        },
+        {
+          "name": "backgroundColor",
+          "propType": "string",
+          "description": "背景色"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Radio",
+      "title": "Radio",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Radio",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "自定义类名"
+        },
+        {
+          "name": "id",
+          "propType": "string",
+          "description": "组件input的id"
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "自定义内敛样式"
+        },
+        {
+          "name": "checked",
+          "propType": "bool",
+          "description": "设置radio是否选中"
+        },
+        {
+          "name": "defaultChecked",
+          "propType": "bool",
+          "description": "设置radio是否默认选中"
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "通过属性配置label"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "状态变化时触发的事件\n@param {Boolean} checked 是否选中\n@param {Event} e Dom 事件对象"
+        },
+        {
+          "name": "onMouseEnter",
+          "propType": "func",
+          "description": "鼠标进入enter事件\n@param {Event} e Dom 事件对象"
+        },
+        {
+          "name": "onMouseLeave",
+          "propType": "func",
+          "description": "鼠标离开事件\n@param {Event} e Dom 事件对象"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "radio是否被禁用"
+        },
+        {
+          "name": "value",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              "number",
+              "bool"
+            ]
+          },
+          "description": "radio 的value"
+        },
+        {
+          "name": "name",
+          "propType": "string",
+          "description": "name"
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否为预览态",
+          "defaultValue": false
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {number} value 评分值"
+        },
+        {
+          "name": "tabIndex",
+          "defaultValue": 0
+        },
+        {
+          "name": "prefix",
+          "defaultValue": "next-"
+        }
+      ]
+    },
+    {
+      "componentName": "RadioGroup",
+      "title": "RadioGroup",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Radio",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Group"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "description": "样式类名的品牌前缀",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "自定义类名"
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "自定义内敛样式"
+        },
+        {
+          "name": "name",
+          "propType": "string",
+          "description": "name"
+        },
+        {
+          "name": "value",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              "number",
+              "bool"
+            ]
+          },
+          "description": "radio group的选中项的值"
+        },
+        {
+          "name": "defaultValue",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              "number",
+              "bool"
+            ]
+          },
+          "description": "radio group的默认值"
+        },
+        {
+          "name": "component",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              "func"
+            ]
+          },
+          "description": "设置标签类型",
+          "defaultValue": "div"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "选中值改变时的事件\n@param {String/Number} value 选中项的值\n@param {Event} e Dom 事件对象"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "表示radio被禁用"
+        },
+        {
+          "name": "shape",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "button"
+            ]
+          },
+          "description": "可以设置成 button 展示形状\n@enumdesc 按钮状"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "large",
+              "medium",
+              "small"
+            ]
+          },
+          "description": "与 `shape` 属性配套使用，shape设为button时有效\n@enumdesc 大, 中, 小",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "itemDirection",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "hoz",
+              "ver"
+            ]
+          },
+          "description": "子项目的排列方式\n- hoz: 水平排列 (default)\n- ver: 垂直排列",
+          "defaultValue": "hoz"
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否为预览态",
+          "defaultValue": false
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {number} value 评分值"
+        }
+      ]
+    },
+    {
+      "componentName": "Range",
+      "title": "Range",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Range",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "description": "样式类名的品牌前缀",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "自定义类名"
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "自定义内敛样式"
+        },
+        {
+          "name": "slider",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "single",
+              "double"
+            ]
+          },
+          "description": "滑块个数\n@enumdesc 单个, 两个",
+          "defaultValue": "single"
+        },
+        {
+          "name": "min",
+          "propType": "number",
+          "description": "最小值",
+          "defaultValue": 0
+        },
+        {
+          "name": "max",
+          "propType": "number",
+          "description": "最大值",
+          "defaultValue": 100
+        },
+        {
+          "name": "step",
+          "propType": "number",
+          "description": "步长，取值必须大于 0，并且可被 (max - min) 整除。",
+          "defaultValue": 1
+        },
+        {
+          "name": "marksPosition",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "above",
+              "below"
+            ]
+          },
+          "description": "marks显示在上方('above')or下方('below')",
+          "defaultValue": "above"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "值为 `true` 时，滑块为禁用状态",
+          "defaultValue": false
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "当 Range 的值发生改变后，会触发 onChange 事件，并把改变后的值作为参数传入, 如果设置了value, 要配合此函数做受控使用\n@param {String/number} value"
+        },
+        {
+          "name": "onProcess",
+          "propType": "func",
+          "description": "滑块拖动的时候触发的事件,不建议在这里setState, 一般情况下不需要用, 滑动时有特殊需求时使用\n@param {String/number} value"
+        },
+        {
+          "name": "hasTip",
+          "propType": "bool",
+          "description": "是否显示 tip",
+          "defaultValue": true
+        },
+        {
+          "name": "tipRender",
+          "propType": "func",
+          "description": "自定义 tip 显示内容\n@param {Number|String} value 值\n@return {ReactNode} 显示内容"
+        },
+        {
+          "name": "id",
+          "propType": "string"
+        },
+        {
+          "name": "reverse",
+          "propType": "bool",
+          "description": "选中态反转",
+          "defaultValue": false
+        },
+        {
+          "name": "pure",
+          "propType": "bool",
+          "description": "是否pure render",
+          "defaultValue": false
+        },
+        {
+          "name": "fixedWidth",
+          "propType": "bool",
+          "description": "是否为拖动线段类型,默认slider为double, defaultValue必传且指定区间",
+          "defaultValue": false
+        },
+        {
+          "name": "tooltipVisible",
+          "propType": "bool",
+          "description": "tooltip是否默认展示",
+          "defaultValue": false
+        },
+        {
+          "name": "rtl",
+          "propType": "bool",
+          "description": "是否已rtl模式展示",
+          "defaultValue": false
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否为预览态",
+          "defaultValue": false
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {number} value 评分值"
+        }
+      ]
+    },
+    {
+      "componentName": "Rating",
+      "title": "Rating",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Rating",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "defaultValue",
+          "propType": "number",
+          "description": "默认值",
+          "defaultValue": 0
+        },
+        {
+          "name": "value",
+          "propType": "number",
+          "description": "值"
+        },
+        {
+          "name": "count",
+          "propType": "number",
+          "description": "评分的总数",
+          "defaultValue": 5
+        },
+        {
+          "name": "showGrade",
+          "propType": "bool",
+          "description": "是否显示 grade",
+          "defaultValue": false
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "small",
+              "medium",
+              "large"
+            ]
+          },
+          "description": "尺寸",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "allowHalf",
+          "propType": "bool",
+          "description": "是否允许半星评分",
+          "defaultValue": false
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "用户点击评分时触发的回调\n@param {String} value 评分值"
+        },
+        {
+          "name": "onHoverChange",
+          "propType": "func",
+          "description": "用户hover评分时触发的回调\n@param {String} value 评分值"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁用",
+          "defaultValue": false
+        },
+        {
+          "name": "readAs",
+          "propType": "func",
+          "description": "评分文案生成方法，传入id支持无障碍时，读屏软件可读"
+        },
+        {
+          "name": "iconType",
+          "propType": "string",
+          "defaultValue": "favorites-filling"
+        },
+        {
+          "name": "strokeMode",
+          "propType": "bool"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "id",
+          "propType": "string"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "locale",
+          "propType": "object",
+          "description": "自定义国际化文案对象"
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否为预览态",
+          "defaultValue": false
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {number} value 评分值"
+        },
+        {
+          "name": "readOnly",
+          "propType": "bool",
+          "description": "是否为只读态，效果上同 disabeld",
+          "defaultValue": false
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Search",
+      "title": "Search",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Search",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "description": "样式前缀",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "shape",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "normal",
+              "simple"
+            ]
+          },
+          "description": "形状",
+          "defaultValue": "normal"
+        },
+        {
+          "name": "type",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "primary",
+              "secondary",
+              "normal",
+              "dark"
+            ]
+          },
+          "description": "类型 shape=normal: primary/secondary; shape=simple: normal/dark;",
+          "defaultValue": "normal"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "large",
+              "medium"
+            ]
+          },
+          "description": "大小\n@enumdesc '大', '小'",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "defaultValue",
+          "propType": "string",
+          "description": "搜索框默认值"
+        },
+        {
+          "name": "value",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              "number"
+            ]
+          },
+          "description": "搜索框数值"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "输入关键字时的回掉\n@param {Object} value 输入值"
+        },
+        {
+          "name": "onSearch",
+          "propType": "func",
+          "description": "点击搜索按钮触发的回调\n@param {String} value 输入值\n@param {String} filterValue 选项值"
+        },
+        {
+          "name": "defaultFilterValue",
+          "propType": "string",
+          "description": "选择器默认值"
+        },
+        {
+          "name": "filter",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "选择器",
+          "defaultValue": []
+        },
+        {
+          "name": "filterValue",
+          "propType": "string",
+          "description": "选择器值"
+        },
+        {
+          "name": "onFilterChange",
+          "propType": "func",
+          "description": "选择器发生变化时回调\n@param {Object} filter value"
+        },
+        {
+          "name": "dataSource",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "搜索框下拉联想列表"
+        },
+        {
+          "name": "placeholder",
+          "propType": "string",
+          "description": "默认提示"
+        },
+        {
+          "name": "searchText",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "button 的内容"
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "自定义样式"
+        },
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "样式名称"
+        },
+        {
+          "name": "filterProps",
+          "propType": "object",
+          "description": "选择器的props"
+        },
+        {
+          "name": "buttonProps",
+          "propType": "object",
+          "description": "按钮的额外属性"
+        },
+        {
+          "name": "popupContent",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "自定义渲染的的下拉框"
+        },
+        {
+          "name": "followTrigger",
+          "propType": "bool",
+          "description": "是否跟随滚动"
+        },
+        {
+          "name": "visible",
+          "propType": "bool",
+          "description": "自定义渲染的的下拉框"
+        },
+        {
+          "name": "hasClear",
+          "propType": "bool",
+          "description": "是否显示清除按钮",
+          "defaultValue": false
+        },
+        {
+          "name": "hasIcon",
+          "propType": "bool",
+          "description": "是否显示搜索按钮",
+          "defaultValue": true
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁用",
+          "defaultValue": false
+        },
+        {
+          "name": "locale",
+          "propType": "object"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        }
+      ]
+    },
+    {
+      "componentName": "Select",
+      "title": "Select",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Select",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "mode",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "single",
+              "multiple",
+              "tag"
+            ]
+          },
+          "description": "选择器模式",
+          "defaultValue": "single"
+        },
+        {
+          "name": "value",
+          "propType": "any",
+          "description": "当前值，用于受控模式"
+        },
+        {
+          "name": "defaultValue",
+          "propType": "any",
+          "description": "初始的默认值"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "Select发生改变时触发的回调\n@param {*} value 选中的值\n@param {String} actionType 触发的方式, 'itemClick', 'enter', 'tag'\n@param {*} item 选中的值的对象数据 (useDetailValue=false有效)"
+        },
+        {
+          "name": "hasBorder",
+          "propType": "bool",
+          "description": "是否有边框"
+        },
+        {
+          "name": "hasArrow",
+          "propType": "bool",
+          "description": "是否有下拉箭头",
+          "defaultValue": true
+        },
+        {
+          "name": "showSearch",
+          "propType": "bool",
+          "description": "展开后是否能搜索（tag 模式下固定为true）",
+          "defaultValue": false
+        },
+        {
+          "name": "onSearch",
+          "propType": "func",
+          "description": "当搜索框值变化时回调\n@param {String} value 数据"
+        },
+        {
+          "name": "onSearchClear",
+          "propType": "func",
+          "description": "当搜索框值被清空时候的回调\n@param {String} actionType 触发的方式, 'select'(选择清空), 'popupClose'(弹窗关闭清空)"
+        },
+        {
+          "name": "hasSelectAll",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "bool",
+              "string"
+            ]
+          },
+          "description": "多选模式下是否有全选功能"
+        },
+        {
+          "name": "fillProps",
+          "propType": "string",
+          "description": "填充到选择框里的值的 key\b\b"
+        },
+        {
+          "name": "useDetailValue",
+          "propType": "bool",
+          "description": "onChange 返回的 value 使用 dataSource 的对象"
+        },
+        {
+          "name": "cacheValue",
+          "propType": "bool",
+          "description": "dataSource 变化的时是否保留已选的内容",
+          "defaultValue": true
+        },
+        {
+          "name": "valueRender",
+          "propType": "func",
+          "description": "渲染 Select 展现内容的方法\n@param {Object} item 渲染节点的item\n@return {ReactNode} 展现内容\n@default item => item.label \\|\\| item.value"
+        },
+        {
+          "name": "itemRender",
+          "propType": "func",
+          "description": "渲染 MenuItem 内容的方法\n@param {Object} item 渲染节点的item\n@param {String} searchValue 搜索关键字（如果开启搜索）\n@return {ReactNode} item node"
+        },
+        {
+          "name": "notFoundContent",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "弹层内容为空的文案"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        },
+        {
+          "name": "searchValue",
+          "propType": "string",
+          "description": "受控搜索值，一般不需要设置\n@type {[type]}"
+        },
+        {
+          "name": "tagInline",
+          "propType": "bool",
+          "description": "是否一行显示，仅在 mode 为 multiple 的时候生效",
+          "defaultValue": false
+        },
+        {
+          "name": "maxTagCount",
+          "propType": "number",
+          "description": "最多显示多少个 tag"
+        },
+        {
+          "name": "maxTagPlaceholder",
+          "propType": "func",
+          "description": "隐藏多余 tag 时显示的内容，在 maxTagCount 生效时起作用\n@param {number} selectedValues 当前已选中的元素\n@param {number} totalValues 总待选元素"
+        },
+        {
+          "name": "hiddenSelected",
+          "propType": "bool",
+          "description": "选择后是否立即隐藏菜单 (mode=multiple/tag 模式生效)"
+        },
+        {
+          "name": "onRemove",
+          "propType": "func",
+          "description": "tag 删除回调\n@param {object} item 渲染节点的item"
+        },
+        {
+          "name": "onFocus",
+          "propType": "func",
+          "description": "焦点事件"
+        },
+        {
+          "name": "onBlur",
+          "propType": "func",
+          "description": "失去焦点事件"
+        },
+        {
+          "name": "onMouseEnter",
+          "propType": "func"
+        },
+        {
+          "name": "onMouseLeave",
+          "propType": "func"
+        },
+        {
+          "name": "onKeyDown",
+          "propType": "func"
+        },
+        {
+          "name": "locale",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Slider",
+      "title": "Slider",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Slider",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "className",
+          "propType": "any",
+          "description": "自定义传入的样式"
+        },
+        {
+          "name": "adaptiveHeight",
+          "propType": "bool",
+          "description": "是否使用自适应高度",
+          "defaultValue": false
+        },
+        {
+          "name": "animation",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              "bool"
+            ]
+          },
+          "description": "动效类型，默认是'slide'",
+          "defaultValue": "slide"
+        },
+        {
+          "name": "arrows",
+          "propType": "bool",
+          "description": "是否显示箭头",
+          "defaultValue": true
+        },
+        {
+          "name": "arrowSize",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "medium",
+              "large"
+            ]
+          },
+          "description": "导航箭头大小 可选值: 'medium', 'large'",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "arrowPosition",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "inner",
+              "outer"
+            ]
+          },
+          "description": "导航箭头位置 可选值: 'inner', 'outer'",
+          "defaultValue": "inner"
+        },
+        {
+          "name": "arrowDirection",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "hoz",
+              "ver"
+            ]
+          },
+          "description": "导航箭头的方向 可选值: 'hoz', 'ver'",
+          "defaultValue": "hoz"
+        },
+        {
+          "name": "autoplay",
+          "propType": "bool",
+          "description": "是否自动播放",
+          "defaultValue": false
+        },
+        {
+          "name": "autoplaySpeed",
+          "propType": "number",
+          "description": "自动播放的速度",
+          "defaultValue": 3000
+        },
+        {
+          "name": "nextArrow",
+          "propType": {
+            "type": "instanceOf",
+            "value": "element"
+          },
+          "description": "向后箭头",
+          "defaultValue": null
+        },
+        {
+          "name": "prevArrow",
+          "propType": {
+            "type": "instanceOf",
+            "value": "element"
+          },
+          "description": "向前箭头",
+          "defaultValue": null
+        },
+        {
+          "name": "centerMode",
+          "propType": "bool",
+          "description": "是否启用居中模式",
+          "defaultValue": false
+        },
+        {
+          "name": "dots",
+          "propType": "bool",
+          "description": "是否显示导航锚点",
+          "defaultValue": true
+        },
+        {
+          "name": "dotsDirection",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "hoz",
+              "ver"
+            ]
+          },
+          "description": "导航锚点位置",
+          "defaultValue": "hoz"
+        },
+        {
+          "name": "dotsClass",
+          "propType": "string"
+        },
+        {
+          "name": "dotRender",
+          "propType": "func",
+          "description": "自定义导航锚点"
+        },
+        {
+          "name": "draggable",
+          "propType": "bool",
+          "description": "是否可拖拽",
+          "defaultValue": true
+        },
+        {
+          "name": "infinite",
+          "propType": "bool",
+          "description": "是否使用无穷循环模式",
+          "defaultValue": true
+        },
+        {
+          "name": "defaultActiveIndex",
+          "propType": "number",
+          "description": "初始被激活的轮播图",
+          "defaultValue": 0
+        },
+        {
+          "name": "lazyLoad",
+          "propType": "bool",
+          "description": "是否启用懒加载",
+          "defaultValue": false
+        },
+        {
+          "name": "slide",
+          "propType": "string",
+          "defaultValue": "div"
+        },
+        {
+          "name": "slideDirection",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "hoz",
+              "ver"
+            ]
+          },
+          "description": "轮播方向",
+          "defaultValue": "hoz"
+        },
+        {
+          "name": "slidesToShow",
+          "propType": "number",
+          "description": "同时展示的图片数量",
+          "defaultValue": 1
+        },
+        {
+          "name": "slidesToScroll",
+          "propType": "number",
+          "description": "同时滑动的图片数量",
+          "defaultValue": 1
+        },
+        {
+          "name": "speed",
+          "propType": "number",
+          "description": "轮播速度",
+          "defaultValue": 600
+        },
+        {
+          "name": "activeIndex",
+          "propType": "number",
+          "description": "跳转到指定的轮播图（受控）"
+        },
+        {
+          "name": "triggerType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "click",
+              "hover"
+            ]
+          },
+          "description": "锚点导航触发方式",
+          "defaultValue": "click"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "轮播切换的回调函数\n@param {Number} index 幻灯片的索引"
+        },
+        {
+          "name": "onBeforeChange",
+          "propType": "func"
+        },
+        {
+          "name": "children",
+          "propType": "any"
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "自定义传入的class",
+          "defaultValue": null
+        },
+        {
+          "name": "centerPadding",
+          "propType": "string",
+          "description": "Side padding when in center mode (px or %); 展示部分为center，pading会产生前后预览",
+          "defaultValue": "50px"
+        },
+        {
+          "name": "cssEase",
+          "propType": "string",
+          "description": "CSS3 Animation Easing,默认‘ease’",
+          "defaultValue": "ease"
+        },
+        {
+          "name": "edgeFriction",
+          "propType": "number",
+          "defaultValue": 0.35
+        },
+        {
+          "name": "focusOnSelect",
+          "propType": "bool",
+          "description": "多图轮播时，点击选中后自动居中",
+          "defaultValue": false
+        },
+        {
+          "name": "pauseOnHover",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "swipe",
+          "propType": "bool",
+          "defaultValue": true
+        },
+        {
+          "name": "swipeToSlide",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "touchMove",
+          "propType": "bool",
+          "defaultValue": true
+        },
+        {
+          "name": "touchThreshold",
+          "propType": "number",
+          "defaultValue": 5
+        },
+        {
+          "name": "useCSS",
+          "propType": "bool",
+          "defaultValue": true
+        },
+        {
+          "name": "variableWidth",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "waitForAnimate",
+          "propType": "bool",
+          "defaultValue": true
+        },
+        {
+          "name": "edgeEvent",
+          "propType": "any",
+          "defaultValue": null
+        },
+        {
+          "name": "swipeEvent",
+          "propType": "any",
+          "defaultValue": null
+        },
+        {
+          "name": "vertical",
+          "defaultValue": false
+        },
+        {
+          "name": "verticalSwiping",
+          "defaultValue": false
+        },
+        {
+          "name": "dotsRender",
+          "defaultValue": null
+        }
+      ]
+    },
+    {
+      "componentName": "SplitButton",
+      "title": "SplitButton",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "SplitButton",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        },
+        {
+          "name": "type",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "normal",
+              "primary",
+              "secondary"
+            ]
+          },
+          "description": "按钮的类型",
+          "defaultValue": "normal"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "small",
+              "medium",
+              "large"
+            ]
+          },
+          "description": "按钮组的尺寸",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "主按钮的文案"
+        },
+        {
+          "name": "component",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "button",
+              "a"
+            ]
+          },
+          "description": "设置标签类型"
+        },
+        {
+          "name": "ghost",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "light",
+              "dark",
+              false,
+              true
+            ]
+          },
+          "description": "是否为幽灵按钮"
+        },
+        {
+          "name": "defaultSelectedKeys",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "默认激活的菜单项（用法同 Menu 非受控）",
+          "defaultValue": []
+        },
+        {
+          "name": "selectedKeys",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "激活的菜单项（用法同 Menu 受控）"
+        },
+        {
+          "name": "selectMode",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "single",
+              "multiple"
+            ]
+          },
+          "description": "菜单的选择模式"
+        },
+        {
+          "name": "onSelect",
+          "propType": "func",
+          "description": "选择菜单项时的回调，参考 Menu"
+        },
+        {
+          "name": "onItemClick",
+          "propType": "func",
+          "description": "点击菜单项时的回调，参考 Menu"
+        },
+        {
+          "name": "triggerProps",
+          "propType": "object",
+          "description": "触发按钮的属性（支持 Button 的所有属性透传）"
+        },
+        {
+          "name": "autoWidth",
+          "propType": "bool",
+          "description": "弹层菜单的宽度是否与按钮组一致",
+          "defaultValue": true
+        },
+        {
+          "name": "visible",
+          "propType": "bool",
+          "description": "弹层是否显示"
+        },
+        {
+          "name": "defaultVisible",
+          "propType": "bool",
+          "description": "弹层默认是否显示"
+        },
+        {
+          "name": "onVisibleChange",
+          "propType": "func",
+          "description": "弹层显示状态变化时的回调函数\n@param {Boolean} visible 弹层显示状态\n@param {String} type 触发弹层显示或隐藏的来源 menuSelect 表示由menu触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发"
+        },
+        {
+          "name": "popupTriggerType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "click",
+              "hover"
+            ]
+          },
+          "description": "弹层的触发方式",
+          "defaultValue": "click"
+        },
+        {
+          "name": "popupAlign",
+          "propType": "string",
+          "description": "弹层对齐方式, 详情见Overlay align"
+        },
+        {
+          "name": "popupStyle",
+          "propType": "object",
+          "description": "弹层自定义样式"
+        },
+        {
+          "name": "popupClassName",
+          "propType": "string",
+          "description": "弹层自定义样式类"
+        },
+        {
+          "name": "popupProps",
+          "propType": "object",
+          "description": "透传给弹层的属性"
+        },
+        {
+          "name": "followTrigger",
+          "propType": "bool",
+          "description": "是否跟随滚动"
+        },
+        {
+          "name": "menuProps",
+          "propType": "object",
+          "description": "透传给 Menu 的属性"
+        },
+        {
+          "name": "leftButtonProps",
+          "propType": "object",
+          "description": "透传给 左侧按钮 的属性"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "children",
+          "propType": "any"
+        }
+      ]
+    },
+    {
+      "componentName": "Step",
+      "title": "Step",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Step",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "current",
+          "propType": "number",
+          "description": "当前步骤",
+          "defaultValue": 0
+        },
+        {
+          "name": "direction",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "hoz",
+              "ver"
+            ]
+          },
+          "description": "展示方向",
+          "defaultValue": "hoz"
+        },
+        {
+          "name": "labelPlacement",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "hoz",
+              "ver"
+            ]
+          },
+          "description": "横向布局时( direction 为 hoz )的内容排列",
+          "defaultValue": "ver"
+        },
+        {
+          "name": "shape",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "circle",
+              "arrow",
+              "dot"
+            ]
+          },
+          "description": "类型",
+          "defaultValue": "circle"
+        },
+        {
+          "name": "readOnly",
+          "propType": "bool",
+          "description": "是否只读模式"
+        },
+        {
+          "name": "animation",
+          "propType": "bool",
+          "description": "是否开启动效",
+          "defaultValue": true
+        },
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "自定义样式名"
+        },
+        {
+          "name": "itemRender",
+          "propType": "func",
+          "description": "StepItem 的自定义渲染\n@param {Number} index   节点索引\n@param {String} status  节点状态\n@returns {Node} 节点的渲染结果",
+          "defaultValue": null
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "StepItem",
+      "title": "StepItem",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Step",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Item"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "status",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "wait",
+              "process",
+              "finish"
+            ]
+          },
+          "description": "步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`"
+        },
+        {
+          "name": "title",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "标题"
+        },
+        {
+          "name": "direction",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "hoz",
+              "ver"
+            ]
+          }
+        },
+        {
+          "name": "labelPlacement",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "hoz",
+              "ver"
+            ]
+          }
+        },
+        {
+          "name": "shape",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "circle",
+              "arrow",
+              "dot"
+            ]
+          },
+          "defaultValue": "circle"
+        },
+        {
+          "name": "icon",
+          "propType": "string",
+          "description": "图标"
+        },
+        {
+          "name": "content",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "内容填充, shape为 arrow 时无效"
+        },
+        {
+          "name": "itemRender",
+          "propType": "func",
+          "description": "StepItem 的自定义渲染, 会覆盖父节点设置的itemRender\n@param {Number} index   节点索引\n@param {String} status  节点状态\n@returns {Node} 节点的渲染结果"
+        },
+        {
+          "name": "percent",
+          "propType": "number",
+          "description": "百分比"
+        },
+        {
+          "name": "index",
+          "propType": "number",
+          "defaultValue": 0
+        },
+        {
+          "name": "total",
+          "propType": "number",
+          "defaultValue": 1
+        },
+        {
+          "name": "animation",
+          "propType": "bool"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁用"
+        },
+        {
+          "name": "parentWidth",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              "number"
+            ]
+          }
+        },
+        {
+          "name": "parentHeight",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              "number"
+            ]
+          }
+        },
+        {
+          "name": "onClick",
+          "propType": "func",
+          "description": "点击步骤时的回调\n@param {Number} index 节点索引"
+        },
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "自定义样式"
+        },
+        {
+          "name": "readOnly",
+          "propType": "bool"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Switch",
+      "title": "Switch",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Switch",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "pure",
+          "propType": "bool"
+        },
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "自定义类名"
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "自定义内敛样式"
+        },
+        {
+          "name": "checkedChildren",
+          "propType": "any",
+          "description": "打开时的内容"
+        },
+        {
+          "name": "unCheckedChildren",
+          "propType": "any",
+          "description": "关闭时的内容"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "开关状态改变是触发此事件\n@param {Boolean} checked 是否为打开状态\n@param {Event} e DOM事件对象"
+        },
+        {
+          "name": "checked",
+          "propType": "bool",
+          "description": "开关当前的值(针对受控组件)"
+        },
+        {
+          "name": "defaultChecked",
+          "propType": "bool",
+          "description": "开关默认值 (针对非受控组件)",
+          "defaultValue": false
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "表示开关被禁用",
+          "defaultValue": false
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "medium",
+              "small"
+            ]
+          },
+          "description": "switch的尺寸\n@enumdesc 正常大小, 缩小版大小",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "onClick",
+          "propType": "func",
+          "description": "鼠标点击事件\n@param {Event} e DOM事件对象"
+        },
+        {
+          "name": "onKeyDown",
+          "propType": "func",
+          "description": "键盘按键事件\n@param {Event} e DOM事件对象"
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否为预览态",
+          "defaultValue": false
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {number} value 评分值"
+        },
+        {
+          "name": "locale",
+          "propType": "object",
+          "description": "国际化配置"
+        },
+        {
+          "name": "readOnly",
+          "defaultValue": false
+        }
+      ]
+    },
+    {
+      "componentName": "Tab",
+      "title": "Tab",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Tab",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "device",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "tablet",
+              "desktop",
+              "phone"
+            ]
+          }
+        },
+        {
+          "name": "activeKey",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "number",
+              "string"
+            ]
+          },
+          "description": "被激活的选项卡的 key, 赋值则tab为受控组件, 用户无法切换"
+        },
+        {
+          "name": "defaultActiveKey",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "number",
+              "string"
+            ]
+          },
+          "description": "初始化时被激活的选项卡的 key"
+        },
+        {
+          "name": "shape",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "pure",
+              "wrapped",
+              "text",
+              "capsule"
+            ]
+          },
+          "description": "外观形态",
+          "defaultValue": "pure"
+        },
+        {
+          "name": "animation",
+          "propType": "bool",
+          "description": "是否开启动效",
+          "defaultValue": true
+        },
+        {
+          "name": "excessMode",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "slide",
+              "dropdown"
+            ]
+          },
+          "description": "选项卡过多时的滑动模式",
+          "defaultValue": "slide"
+        },
+        {
+          "name": "tabPosition",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "top",
+              "bottom",
+              "left",
+              "right"
+            ]
+          },
+          "description": "导航选项卡的位置，只适用于包裹型（wrapped）选项卡",
+          "defaultValue": "top"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "small",
+              "medium"
+            ]
+          },
+          "description": "尺寸",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "triggerType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "hover",
+              "click"
+            ]
+          },
+          "description": "激活选项卡的触发方式",
+          "defaultValue": "click"
+        },
+        {
+          "name": "lazyLoad",
+          "propType": "bool",
+          "description": "是否延迟加载 TabPane 的内容, 默认开启, 即不提前渲染",
+          "defaultValue": true
+        },
+        {
+          "name": "unmountInactiveTabs",
+          "propType": "bool",
+          "description": "是否自动卸载未处于激活状态的选项卡",
+          "defaultValue": false
+        },
+        {
+          "name": "navStyle",
+          "propType": "object",
+          "description": "导航条的自定义样式"
+        },
+        {
+          "name": "navClassName",
+          "propType": "string",
+          "description": "导航条的自定义样式类"
+        },
+        {
+          "name": "contentStyle",
+          "propType": "object",
+          "description": "内容区容器的自定义样式"
+        },
+        {
+          "name": "contentClassName",
+          "propType": "string",
+          "description": "内容区容器的自定义样式类"
+        },
+        {
+          "name": "extra",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "导航栏附加内容"
+        },
+        {
+          "name": "onClick",
+          "propType": "func",
+          "description": "点击单个选项卡时触发的回调"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "选项卡发生切换时的事件回调\n@param {String|Number} key 改变后的 key"
+        },
+        {
+          "name": "onClose",
+          "propType": "func",
+          "description": "选项卡被关闭时的事件回调\n@param {String|Number} key   关闭的选项卡的 key"
+        },
+        {
+          "name": "tabRender",
+          "propType": "func",
+          "description": "自定义选项卡模板渲染函数\n@param {String} key 当前 Tab.Item 的 key 值\n@param {Object} props 传给 Tab.Item 的所有属性键值对\n@return {ReactNode} 返回自定义组件"
+        },
+        {
+          "name": "popupProps",
+          "propType": "object",
+          "description": "弹层属性透传, 只有当 excessMode 为 dropdown 时生效"
+        },
+        {
+          "name": "children",
+          "propType": "any"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "TabItem",
+      "title": "TabItem",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Tab",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Item"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "title",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "选项卡标题"
+        },
+        {
+          "name": "closeable",
+          "propType": "bool",
+          "description": "单个选项卡是否可关闭",
+          "defaultValue": false
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "选项卡是否被禁用"
+        },
+        {
+          "name": "active",
+          "propType": "bool"
+        },
+        {
+          "name": "lazyLoad",
+          "propType": "bool"
+        },
+        {
+          "name": "unmountInactiveTabs",
+          "propType": "bool"
+        },
+        {
+          "name": "children",
+          "propType": "any"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "TabItem",
+      "title": "TabItem",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Tab",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "TabPane"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "title",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "选项卡标题"
+        },
+        {
+          "name": "closeable",
+          "propType": "bool",
+          "description": "单个选项卡是否可关闭",
+          "defaultValue": false
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "选项卡是否被禁用"
+        },
+        {
+          "name": "active",
+          "propType": "bool"
+        },
+        {
+          "name": "lazyLoad",
+          "propType": "bool"
+        },
+        {
+          "name": "unmountInactiveTabs",
+          "propType": "bool"
+        },
+        {
+          "name": "children",
+          "propType": "any"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "TimePicker",
+      "title": "TimePicker",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "TimePicker",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "按钮的文案"
+        },
+        {
+          "name": "state",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "error",
+              "success"
+            ]
+          },
+          "description": "输入框状态"
+        },
+        {
+          "name": "placeholder",
+          "propType": "string",
+          "description": "输入框提示"
+        },
+        {
+          "name": "value",
+          "propType": {
+            "type": "instanceOf",
+            "value": "custom"
+          },
+          "description": "时间值（moment 对象或时间字符串，受控状态使用）"
+        },
+        {
+          "name": "defaultValue",
+          "propType": {
+            "type": "instanceOf",
+            "value": "custom"
+          },
+          "description": "时间初值（moment 对象或时间字符串，非受控状态使用）"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "small",
+              "medium",
+              "large"
+            ]
+          },
+          "description": "时间选择框的尺寸",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "hasClear",
+          "propType": "bool",
+          "description": "是否允许清空时间",
+          "defaultValue": true
+        },
+        {
+          "name": "format",
+          "propType": "string",
+          "description": "时间的格式\nhttps://momentjs.com/docs/#/parsing/string-format/",
+          "defaultValue": "HH:mm:ss"
+        },
+        {
+          "name": "hourStep",
+          "propType": "number",
+          "description": "小时选项步长"
+        },
+        {
+          "name": "minuteStep",
+          "propType": "number",
+          "description": "分钟选项步长"
+        },
+        {
+          "name": "secondStep",
+          "propType": "number",
+          "description": "秒钟选项步长"
+        },
+        {
+          "name": "disabledHours",
+          "propType": "func",
+          "description": "禁用小时函数\n@param {Number} index 时 0 - 23\n@return {Boolean} 是否禁用"
+        },
+        {
+          "name": "disabledMinutes",
+          "propType": "func",
+          "description": "禁用分钟函数\n@param {Number} index 分 0 - 59\n@return {Boolean} 是否禁用"
+        },
+        {
+          "name": "disabledSeconds",
+          "propType": "func",
+          "description": "禁用秒钟函数\n@param {Number} index 秒 0 - 59\n@return {Boolean} 是否禁用"
+        },
+        {
+          "name": "renderTimeMenuItems",
+          "propType": "func",
+          "description": "渲染的可选择时间列表\n[{\n label: '01',\n value: 1\n}]\n@param {Array} list 默认渲染的列表\n@param {String} mode 渲染的菜单 hour, minute, second\n@param {moment} value 当前时间，可能为 null\n@return {Array} 返回需要渲染的数据"
+        },
+        {
+          "name": "visible",
+          "propType": "bool",
+          "description": "弹层是否显示（受控）"
+        },
+        {
+          "name": "defaultVisible",
+          "propType": "bool",
+          "description": "弹层默认是否显示（非受控）"
+        },
+        {
+          "name": "popupContainer",
+          "propType": "any",
+          "description": "弹层容器\n@param {Object} target 目标节点\n@return {ReactNode} 容器节点"
+        },
+        {
+          "name": "popupAlign",
+          "propType": "string",
+          "description": "弹层对齐方式, 详情见Overlay 文档",
+          "defaultValue": "tl tl"
+        },
+        {
+          "name": "popupTriggerType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "click",
+              "hover"
+            ]
+          },
+          "description": "弹层触发方式",
+          "defaultValue": "click"
+        },
+        {
+          "name": "onVisibleChange",
+          "propType": "func",
+          "description": "弹层展示状态变化时的回调\n@param {Boolean} visible 弹层是否隐藏和显示\n@param {String} type 触发弹层显示和隐藏的来源 fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发"
+        },
+        {
+          "name": "popupStyle",
+          "propType": "object",
+          "description": "弹层自定义样式"
+        },
+        {
+          "name": "popupClassName",
+          "propType": "string",
+          "description": "弹层自定义样式类"
+        },
+        {
+          "name": "popupProps",
+          "propType": "object",
+          "description": "弹层属性"
+        },
+        {
+          "name": "followTrigger",
+          "propType": "bool",
+          "description": "是否跟随滚动"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁用",
+          "defaultValue": false
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否为预览态"
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {MomentObject} value 时间"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "时间值改变时的回调\n@param {Object|String} value 时间对象或时间字符串"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "name",
+          "propType": "string"
+        },
+        {
+          "name": "inputProps",
+          "propType": "object"
+        },
+        {
+          "name": "popupComponent",
+          "propType": {
+            "type": "instanceOf",
+            "value": "elementType"
+          }
+        },
+        {
+          "name": "popupContent",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "locale"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Timeline",
+      "title": "Timeline",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Timeline",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "description": "样式的品牌前缀",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "fold",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "自定义折叠选项 示例`[{foldArea: [startIndex, endIndex], foldShow: boolean}]`",
+          "defaultValue": []
+        },
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "自定义类名"
+        },
+        {
+          "name": "children",
+          "propType": "any"
+        },
+        {
+          "name": "locale",
+          "propType": "object"
+        },
+        {
+          "name": "animation",
+          "propType": "bool",
+          "defaultValue": true
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "TimelineItem",
+      "title": "TimelineItem",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Timeline",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Item"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "index",
+          "propType": "number"
+        },
+        {
+          "name": "total",
+          "propType": "number"
+        },
+        {
+          "name": "folderIndex",
+          "propType": "number"
+        },
+        {
+          "name": "foldShow",
+          "propType": "bool"
+        },
+        {
+          "name": "state",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "done",
+              "process",
+              "error",
+              "success"
+            ]
+          },
+          "description": "节点状态",
+          "defaultValue": "done"
+        },
+        {
+          "name": "icon",
+          "propType": "string",
+          "description": "图标"
+        },
+        {
+          "name": "dot",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "自定义时间轴节点"
+        },
+        {
+          "name": "time",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "格式化后的时间"
+        },
+        {
+          "name": "title",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "标题"
+        },
+        {
+          "name": "timeLeft",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "左侧时间"
+        },
+        {
+          "name": "content",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "右侧内容"
+        },
+        {
+          "name": "toggleFold",
+          "propType": "func"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "locale",
+          "propType": "object"
+        },
+        {
+          "name": "animation",
+          "propType": "bool",
+          "description": "动画",
+          "defaultValue": true
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Transfer",
+      "title": "Transfer",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Transfer",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "pure",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "mode",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "normal",
+              "simple"
+            ]
+          },
+          "description": "移动选项模式",
+          "defaultValue": "normal"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "值发生改变的时候触发的回调函数\n@param {Array} value 右面板值\n@param {Array} data 右面板数据\n@param {Object} extra 额外参数\n@param {Array} extra.leftValue 左面板值\n@param {Array} extra.leftData 左面板数据\n@param {Array} extra.movedValue 发生移动的值\n@param {Object} extra.movedData 发生移动的数据\n@param {String} extra.direction 移动的方向，值为'left'或'right'"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁用",
+          "defaultValue": false
+        },
+        {
+          "name": "leftDisabled",
+          "propType": "bool",
+          "description": "是否禁用左侧面板",
+          "defaultValue": false
+        },
+        {
+          "name": "rightDisabled",
+          "propType": "bool",
+          "description": "是否禁用右侧面板",
+          "defaultValue": false
+        },
+        {
+          "name": "itemRender",
+          "propType": "func",
+          "description": "列表项渲染函数\n@param {Object} data 数据\n@return {ReactNode} 列表项内容"
+        },
+        {
+          "name": "showSearch",
+          "propType": "bool",
+          "description": "是否显示搜索框",
+          "defaultValue": false
+        },
+        {
+          "name": "filter",
+          "propType": "func",
+          "description": "自定义搜索函数\n@param {String} searchedValue 搜索的内容\n@param {Object} data 数据\n@return {Boolean} 是否匹配到\n@default 根据 label 属性匹配"
+        },
+        {
+          "name": "onSearch",
+          "propType": "func",
+          "description": "搜索框输入时触发的回调函数\n@param {String} searchedValue 搜索的内容\n@param {String} position 搜索面板的位置"
+        },
+        {
+          "name": "searchPlaceholder",
+          "propType": "string",
+          "description": "搜索框占位符"
+        },
+        {
+          "name": "notFoundContent",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "列表为空显示内容",
+          "defaultValue": "Not Found"
+        },
+        {
+          "name": "listClassName",
+          "propType": "string",
+          "description": "左右面板列表自定义样式类名"
+        },
+        {
+          "name": "listStyle",
+          "propType": "object",
+          "description": "左右面板列表自定义样式对象"
+        },
+        {
+          "name": "sortable",
+          "propType": "bool",
+          "description": "是否允许拖拽排序",
+          "defaultValue": false
+        },
+        {
+          "name": "onSort",
+          "propType": "func",
+          "description": "拖拽排序时触发的回调函数\n@param {Array} value 排序后的值\n@param {String} position 拖拽的面板位置，值为：left 或 right"
+        },
+        {
+          "name": "locale",
+          "propType": "object",
+          "description": "自定义国际化文案对象"
+        },
+        {
+          "name": "id",
+          "propType": "string",
+          "description": "请设置 id 以保证transfer的可访问性"
+        },
+        {
+          "name": "children",
+          "propType": "func",
+          "description": "接收 children 自定义渲染列表"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Tree",
+      "title": "Tree",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Tree",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "pure",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "树节点"
+        },
+        {
+          "name": "dataSource",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "数据源，该属性优先级高于 children"
+        },
+        {
+          "name": "showLine",
+          "propType": "bool",
+          "description": "是否显示树的线",
+          "defaultValue": false
+        },
+        {
+          "name": "selectable",
+          "propType": "bool",
+          "description": "是否支持选中节点",
+          "defaultValue": true
+        },
+        {
+          "name": "onSelect",
+          "propType": "func",
+          "description": "选中或取消选中节点时触发的回调函数\n@param {Array} selectedKeys 选中节点key的数组\n@param {Object} extra 额外参数\n@param {Array} extra.selectedNodes 选中节点的数组\n@param {Object} extra.node 当前操作的节点\n@param {Boolean} extra.selected 当前操作是否是选中"
+        },
+        {
+          "name": "multiple",
+          "propType": "bool",
+          "description": "是否支持多选",
+          "defaultValue": false
+        },
+        {
+          "name": "checkable",
+          "propType": "bool",
+          "description": "是否支持勾选节点的复选框",
+          "defaultValue": false
+        },
+        {
+          "name": "checkStrictly",
+          "propType": "bool",
+          "description": "勾选节点复选框是否完全受控（父子节点选中状态不再关联）",
+          "defaultValue": false
+        },
+        {
+          "name": "checkedStrategy",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "all",
+              "parent",
+              "child"
+            ]
+          },
+          "description": "定义选中时回填的方式\n@enumdesc 返回所有选中的节点, 父子节点都选中时只返回父节点, 父子节点都选中时只返回子节点",
+          "defaultValue": "all"
+        },
+        {
+          "name": "onCheck",
+          "propType": "func",
+          "description": "勾选或取消勾选复选框时触发的回调函数\n@param {Array} checkedKeys 勾选复选框节点key的数组\n@param {Object} extra 额外参数\n@param {Array} extra.checkedNodes 勾选复选框节点的数组\n@param {Array} extra.checkedNodesPositions 包含有勾选复选框节点和其位置的对象的数组\n@param {Array} extra.indeterminateKeys 半选复选框节点 key 的数组\n@param {Object} extra.node 当前操作的节点\n@param {Boolean} extra.checked 当前操作是否是勾选"
+        },
+        {
+          "name": "defaultExpandAll",
+          "propType": "bool",
+          "description": "是否默认展开所有节点",
+          "defaultValue": false
+        },
+        {
+          "name": "autoExpandParent",
+          "propType": "bool",
+          "description": "是否自动展开父节点，建议受控时设置为false",
+          "defaultValue": true
+        },
+        {
+          "name": "onExpand",
+          "propType": "func",
+          "description": "展开或收起节点时触发的回调函数\n@param {Array} expandedKeys 展开的节点key的数组\n@param {Object} extra 额外参数\n@param {Object} extra.node 当前操作的节点\n@param {Boolean} extra.expanded 当前操作是否是展开"
+        },
+        {
+          "name": "editable",
+          "propType": "bool",
+          "description": "是否支持编辑节点内容",
+          "defaultValue": false
+        },
+        {
+          "name": "onEditFinish",
+          "propType": "func",
+          "description": "编辑节点内容完成时触发的回调函数\n@param {String} key 编辑节点的 key\n@param {String} label 编辑节点完成时节点的文本\n@param {Object} node 当前编辑的节点"
+        },
+        {
+          "name": "draggable",
+          "propType": "bool",
+          "description": "是否支持拖拽节点",
+          "defaultValue": false
+        },
+        {
+          "name": "onDragStart",
+          "propType": "func",
+          "description": "开始拖拽节点时触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 拖拽的节点"
+        },
+        {
+          "name": "onDragEnter",
+          "propType": "func",
+          "description": "拖拽节点进入目标节点时触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点\n@param {Array} info.expandedKeys 当前展开的节点key的数组"
+        },
+        {
+          "name": "onDragOver",
+          "propType": "func",
+          "description": "拖拽节点在目标节点上移动的时候触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点"
+        },
+        {
+          "name": "onDragLeave",
+          "propType": "func",
+          "description": "拖拽节点离开目标节点时触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点"
+        },
+        {
+          "name": "onDragEnd",
+          "propType": "func",
+          "description": "拖拽节点拖拽结束时触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点"
+        },
+        {
+          "name": "onDrop",
+          "propType": "func",
+          "description": "拖拽节点放入目标节点内或前后触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点\n@param {Object} info.dragNode 拖拽的节点\n@param {Array} info.dragNodesKeys 拖拽的节点和其子节点 key 的数组\n@param {Number} info.dropPosition 放置位置，-1代表当前节点前，0代表当前节点里，1代表当前节点后"
+        },
+        {
+          "name": "canDrop",
+          "propType": "func",
+          "description": "节点是否可被作为拖拽的目标节点\n@param {Object} info 拖拽信息\n@param {Object} info.node 目标节点\n@param {Object} info.dragNode 拖拽的节点\n@param {Array} info.dragNodesKeys 拖拽的节点和其子节点 key 的数组\n@param {Number} info.dropPosition 放置位置，-1代表当前节点前，0代表当前节点里，1代表当前节点后\n@return {Boolean} 是否可以被当作目标节点"
+        },
+        {
+          "name": "loadData",
+          "propType": "func",
+          "description": "异步加载数据的函数\n@param {Object} node 被点击展开的节点"
+        },
+        {
+          "name": "filterTreeNode",
+          "propType": "func",
+          "description": "按需筛选高亮节点\n@param {Object} node 待筛选的节点\n@return {Boolean} 是否被筛选中"
+        },
+        {
+          "name": "onRightClick",
+          "propType": "func",
+          "description": "右键点击节点时触发的回调函数\n@param {Object} info 信息对象\n@param {Object} info.event 事件对象\n@param {Object} info.node 点击的节点"
+        },
+        {
+          "name": "isLabelBlock",
+          "propType": "bool",
+          "description": "设置节点是否占满剩余空间，一般用于统一在各节点右侧添加元素(借助 flex 实现，暂时只支持 ie10+)",
+          "defaultValue": false
+        },
+        {
+          "name": "isNodeBlock",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "bool",
+              "object"
+            ]
+          },
+          "description": "设置节点是否占满一行",
+          "defaultValue": false
+        },
+        {
+          "name": "animation",
+          "propType": "bool",
+          "description": "是否开启展开收起动画",
+          "defaultValue": true
+        },
+        {
+          "name": "focusedKey",
+          "propType": "string",
+          "description": "当前获得焦点的子菜单或菜单项 key 值"
+        },
+        {
+          "name": "renderChildNodes",
+          "propType": "func",
+          "description": "渲染子节点\n@param {Array<ReactNode>} nodes 所有的子节点\n@return {ReactNode} 返回节点"
+        },
+        {
+          "name": "focusable",
+          "propType": "bool",
+          "defaultValue": true
+        },
+        {
+          "name": "autoFocus",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "onItemFocus",
+          "propType": "func"
+        },
+        {
+          "name": "onBlur",
+          "propType": "func"
+        },
+        {
+          "name": "onItemKeyDown",
+          "propType": "func"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "TreeNode",
+      "title": "TreeNode",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Tree",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Node"
+      },
+      "props": [
+        {
+          "name": "_key",
+          "propType": "string"
+        },
+        {
+          "name": "prefix",
+          "propType": "string"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "树节点"
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "节点文本内容",
+          "defaultValue": "---"
+        },
+        {
+          "name": "selectable",
+          "propType": "bool",
+          "description": "单独设置是否支持选中，覆盖 Tree 的 selectable"
+        },
+        {
+          "name": "checkable",
+          "propType": "bool",
+          "description": "单独设置是否出现复选框，覆盖 Tree 的 checkable"
+        },
+        {
+          "name": "editable",
+          "propType": "bool",
+          "description": "单独设置是否支持编辑，覆盖 Tree 的 editable"
+        },
+        {
+          "name": "draggable",
+          "propType": "bool",
+          "description": "单独设置是否支持拖拽，覆盖 Tree 的 draggable"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁止节点响应",
+          "defaultValue": false
+        },
+        {
+          "name": "checkboxDisabled",
+          "propType": "bool",
+          "description": "是否禁止勾选节点复选框",
+          "defaultValue": false
+        },
+        {
+          "name": "isLeaf",
+          "propType": "bool",
+          "description": "是否是叶子节点，设置loadData时生效",
+          "defaultValue": false
+        },
+        {
+          "name": "root",
+          "propType": "object"
+        },
+        {
+          "name": "eventKey",
+          "propType": "string"
+        },
+        {
+          "name": "pos",
+          "propType": "string"
+        },
+        {
+          "name": "expanded",
+          "propType": "bool"
+        },
+        {
+          "name": "selected",
+          "propType": "bool"
+        },
+        {
+          "name": "checked",
+          "propType": "bool"
+        },
+        {
+          "name": "indeterminate",
+          "propType": "bool"
+        },
+        {
+          "name": "dragOver",
+          "propType": "bool"
+        },
+        {
+          "name": "dragOverGapTop",
+          "propType": "bool"
+        },
+        {
+          "name": "dragOverGapBottom",
+          "propType": "bool"
+        },
+        {
+          "name": "parentNode",
+          "propType": "object"
+        },
+        {
+          "name": "onKeyDown",
+          "propType": "func"
+        },
+        {
+          "name": "size",
+          "propType": "number",
+          "defaultValue": 1
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "TreeSelect",
+      "title": "TreeSelect",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "TreeSelect",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "pure",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "树节点"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "small",
+              "medium",
+              "large"
+            ]
+          },
+          "description": "选择框大小",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "placeholder",
+          "propType": "string",
+          "description": "选择框占位符"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁用",
+          "defaultValue": false
+        },
+        {
+          "name": "hasArrow",
+          "propType": "bool",
+          "description": "是否有下拉箭头",
+          "defaultValue": true
+        },
+        {
+          "name": "hasBorder",
+          "propType": "bool",
+          "description": "是否有边框",
+          "defaultValue": true
+        },
+        {
+          "name": "hasClear",
+          "propType": "bool",
+          "description": "是否有清空按钮",
+          "defaultValue": false
+        },
+        {
+          "name": "label",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "自定义内联 label"
+        },
+        {
+          "name": "readOnly",
+          "propType": "bool",
+          "description": "是否只读，只读模式下可以展开弹层但不能选择"
+        },
+        {
+          "name": "autoWidth",
+          "propType": "bool",
+          "description": "下拉框是否与选择器对齐",
+          "defaultValue": true
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "选中值改变时触发的回调函数\n@param {String|Array} value 选中的值，单选时返回单个值，多选时返回数组\n@param {Object|Array} data 选中的数据，包括 value, label, pos, key属性，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点"
+        },
+        {
+          "name": "showSearch",
+          "propType": "bool",
+          "description": "是否显示搜索框",
+          "defaultValue": false
+        },
+        {
+          "name": "onSearch",
+          "propType": "func",
+          "description": "在搜索框中输入时触发的回调函数\n@param {String} keyword 输入的关键字"
+        },
+        {
+          "name": "onSearchClear",
+          "propType": "func"
+        },
+        {
+          "name": "notFoundContent",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "无数据时显示内容",
+          "defaultValue": "Not Found"
+        },
+        {
+          "name": "multiple",
+          "propType": "bool",
+          "description": "是否支持多选",
+          "defaultValue": false
+        },
+        {
+          "name": "treeCheckable",
+          "propType": "bool",
+          "description": "下拉框中的树是否支持勾选节点的复选框",
+          "defaultValue": false
+        },
+        {
+          "name": "treeCheckStrictly",
+          "propType": "bool",
+          "description": "下拉框中的树勾选节点复选框是否完全受控（父子节点选中状态不再关联）",
+          "defaultValue": false
+        },
+        {
+          "name": "treeCheckedStrategy",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "all",
+              "parent",
+              "child"
+            ]
+          },
+          "description": "定义选中时回填的方式\n@enumdesc 返回所有选中的节点, 父子节点都选中时只返回父节点, 父子节点都选中时只返回子节点",
+          "defaultValue": "parent"
+        },
+        {
+          "name": "treeDefaultExpandAll",
+          "propType": "bool",
+          "description": "下拉框中的树是否默认展开所有节点",
+          "defaultValue": false
+        },
+        {
+          "name": "treeLoadData",
+          "propType": "func",
+          "description": "下拉框中的树异步加载数据的函数，使用请参考[Tree的异步加载数据Demo](https://fusion.design/component/tree)\n@param {ReactElement} node 被点击展开的节点"
+        },
+        {
+          "name": "treeProps",
+          "propType": "object",
+          "description": "透传到 Tree 的属性对象"
+        },
+        {
+          "name": "defaultVisible",
+          "propType": "bool",
+          "description": "初始下拉框是否显示",
+          "defaultValue": false
+        },
+        {
+          "name": "visible",
+          "propType": "bool",
+          "description": "当前下拉框是否显示"
+        },
+        {
+          "name": "onVisibleChange",
+          "propType": "func",
+          "description": "下拉框显示或关闭时触发事件的回调函数\n@param {Boolean} visible 是否显示\n@param {String} type 触发显示关闭的操作类型"
+        },
+        {
+          "name": "popupStyle",
+          "propType": "object",
+          "description": "下拉框自定义样式对象"
+        },
+        {
+          "name": "popupClassName",
+          "propType": "string",
+          "description": "下拉框样式自定义类名"
+        },
+        {
+          "name": "popupContainer",
+          "propType": "any",
+          "description": "下拉框挂载的容器节点"
+        },
+        {
+          "name": "popupProps",
+          "propType": "object",
+          "description": "透传到 Popup 的属性对象"
+        },
+        {
+          "name": "followTrigger",
+          "propType": "bool",
+          "description": "是否跟随滚动"
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否为预览态"
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {Array<data>} value 选择值 { label: , value:}"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Typography",
+      "title": "Typography",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Typography",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "component",
+          "propType": {
+            "type": "instanceOf",
+            "value": "elementType"
+          },
+          "description": "设置标签类型",
+          "defaultValue": "article"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Paragraph",
+      "title": "Paragraph",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Typography",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Paragraph"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "component",
+          "propType": {
+            "type": "instanceOf",
+            "value": "elementType"
+          },
+          "description": "设置标签类型",
+          "defaultValue": "p"
+        },
+        {
+          "name": "type",
+          "defaultValue": "long"
+        },
+        {
+          "name": "size",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Text",
+      "title": "Text",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Typography",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Text"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "delete",
+          "propType": "bool",
+          "description": "添加删除线样式",
+          "defaultValue": false
+        },
+        {
+          "name": "mark",
+          "propType": "bool",
+          "description": "添加标记样式",
+          "defaultValue": false
+        },
+        {
+          "name": "underline",
+          "propType": "bool",
+          "description": "添加下划线样式",
+          "defaultValue": false
+        },
+        {
+          "name": "strong",
+          "propType": "bool",
+          "description": "是否加粗",
+          "defaultValue": false
+        },
+        {
+          "name": "code",
+          "propType": "bool",
+          "description": "添加代码样式",
+          "defaultValue": false
+        },
+        {
+          "name": "component",
+          "propType": {
+            "type": "instanceOf",
+            "value": "elementType"
+          },
+          "description": "设置标签类型",
+          "defaultValue": "span"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "rtl",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Upload",
+      "title": "Upload",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Upload",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "description": "样式前缀",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "action",
+          "propType": "string",
+          "description": "上传的地址"
+        },
+        {
+          "name": "value",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "文件列表"
+        },
+        {
+          "name": "defaultValue",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "默认文件列表"
+        },
+        {
+          "name": "shape",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "card"
+            ]
+          },
+          "description": "上传按钮形状"
+        },
+        {
+          "name": "listType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "text",
+              "image",
+              "card"
+            ]
+          },
+          "description": "上传列表的样式\n@enumdesc 文字, 图文, 卡片"
+        },
+        {
+          "name": "list",
+          "propType": "any"
+        },
+        {
+          "name": "name",
+          "propType": "string",
+          "description": "文件名字段"
+        },
+        {
+          "name": "data",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "object",
+              "func"
+            ]
+          },
+          "description": "上传额外传参"
+        },
+        {
+          "name": "formatter",
+          "propType": "func",
+          "description": "数据格式化函数，配合自定义 action 使用，参数为服务器的响应数据，详见 [formatter](#formater)\n@param {Object} response 返回\n@param {File} file 文件对象"
+        },
+        {
+          "name": "limit",
+          "propType": "number",
+          "description": "最大文件上传个数",
+          "defaultValue": null
+        },
+        {
+          "name": "timeout",
+          "propType": "number",
+          "description": "设置上传超时,单位ms"
+        },
+        {
+          "name": "dragable",
+          "propType": "bool",
+          "description": "可选参数，是否支持拖拽上传，`ie10+` 支持。"
+        },
+        {
+          "name": "closable",
+          "propType": "bool",
+          "defaultValue": true
+        },
+        {
+          "name": "useDataURL",
+          "propType": "bool",
+          "description": "可选参数，是否本地预览"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "可选参数，是否禁用上传功能"
+        },
+        {
+          "name": "onSelect",
+          "propType": "func",
+          "description": "选择文件回调"
+        },
+        {
+          "name": "onProgress",
+          "propType": "func",
+          "description": "上传中"
+        },
+        {
+          "name": "onChange",
+          "propType": "func",
+          "description": "上传文件改变时的状态\n@param {Object} info 文件事件对象"
+        },
+        {
+          "name": "onSuccess",
+          "propType": "func",
+          "description": "可选参数，上传成功回调函数，参数为请求下响应信息以及文件\n@param {Object} file 文件\n@param {Array<Object>} value 值"
+        },
+        {
+          "name": "afterSelect",
+          "propType": "func",
+          "description": "可选参数, 用于校验文件,afterSelect仅在 autoUpload=false 的时候生效,autoUpload=true时,可以使用beforeUpload完全可以替代该功能.\n@param {Object} file\n@returns {Boolean} 返回false会阻止上传,其他则表示正常"
+        },
+        {
+          "name": "onRemove",
+          "propType": "func",
+          "description": "移除文件回调函数\n@param {Object} file 文件\n@returns {Boolean|Promise} 返回 false、Promise.resolve(false)、 Promise.reject() 将阻止文件删除"
+        },
+        {
+          "name": "onError",
+          "propType": "func",
+          "description": "可选参数，上传失败回调函数，参数为上传失败的信息、响应信息以及文件\n@param {Object} file 出错的文件\n@param {Array} value 当前值"
+        },
+        {
+          "name": "beforeUpload",
+          "propType": "func",
+          "description": "可选参数, 详见 [beforeUpload](#beforeUpload)\n@param {Object} file 所有文件\n@param {Object} options 参数\n@returns {Boolean|Object|Promise} 返回值作用见demo"
+        },
+        {
+          "name": "onDrop",
+          "propType": "func",
+          "description": "放文件"
+        },
+        {
+          "name": "className",
+          "propType": "string",
+          "description": "自定义class"
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "自定义内联样式"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "子元素"
+        },
+        {
+          "name": "autoUpload",
+          "propType": "bool",
+          "description": "自动上传",
+          "defaultValue": true
+        },
+        {
+          "name": "request",
+          "propType": "func",
+          "description": "自定义上传方法\n@param {Object} option\n@return {Object} object with abort method"
+        },
+        {
+          "name": "progressProps",
+          "propType": "object",
+          "description": "透传给Progress props"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool",
+          "description": "是否为预览态"
+        },
+        {
+          "name": "renderPreview",
+          "propType": "func",
+          "description": "预览态模式下渲染的内容\n@param {number} value 评分值"
+        }
+      ]
+    },
+    {
+      "componentName": "Selecter",
+      "title": "Selecter",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Upload",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Selecter"
+      },
+      "props": [
+        {
+          "name": "id",
+          "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "disabled",
+          "propType": "bool",
+          "description": "是否禁用上传功能"
+        },
+        {
+          "name": "multiple",
+          "propType": "bool",
+          "description": "是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件",
+          "defaultValue": false
+        },
+        {
+          "name": "dragable",
+          "propType": "bool",
+          "description": "是否支持拖拽上传，`ie10+` 支持。"
+        },
+        {
+          "name": "accept",
+          "propType": "string",
+          "description": "接受上传的文件类型 (image/png, image/jpg, .doc, .ppt) 详见 [input accept attribute](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-accept)"
+        },
+        {
+          "name": "onSelect",
+          "propType": "func",
+          "description": "文件选择回调"
+        },
+        {
+          "name": "onDragOver",
+          "propType": "func",
+          "description": "拖拽经过回调"
+        },
+        {
+          "name": "onDragLeave",
+          "propType": "func",
+          "description": "拖拽离开回调"
+        },
+        {
+          "name": "onDrop",
+          "propType": "func",
+          "description": "拖拽完成回调"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "name",
+          "propType": "string",
+          "defaultValue": "file"
+        }
+      ]
+    },
+    {
+      "componentName": "Dragger",
+      "title": "Dragger",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Upload",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "DragUpload"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "description": "样式前缀",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "locale",
+          "propType": "object"
+        },
+        {
+          "name": "shape",
+          "propType": "string"
+        },
+        {
+          "name": "onDragOver",
+          "propType": "func"
+        },
+        {
+          "name": "onDragLeave",
+          "propType": "func"
+        },
+        {
+          "name": "onDrop",
+          "propType": "func"
+        },
+        {
+          "name": "limit",
+          "propType": "number"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        },
+        {
+          "name": "defaultValue",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          }
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "listType",
+          "propType": "string"
+        },
+        {
+          "name": "timeout",
+          "propType": "number"
+        }
+      ]
+    },
+    {
+      "componentName": "List",
+      "title": "List",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Upload",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "List"
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "locale",
+          "propType": "object",
+          "description": "多语言"
+        },
+        {
+          "name": "listType",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "text",
+              "image",
+              "card"
+            ]
+          },
+          "description": "文件列表，数据格式请参考 文件对象",
+          "defaultValue": "text"
+        },
+        {
+          "name": "value",
+          "propType": {
+            "type": "instanceOf",
+            "value": "array"
+          },
+          "description": "文件列表",
+          "defaultValue": []
+        },
+        {
+          "name": "closable",
+          "propType": "bool",
+          "defaultValue": false
+        },
+        {
+          "name": "onRemove",
+          "propType": "func",
+          "description": "删除文件回调(支持Promise)"
+        },
+        {
+          "name": "onCancel",
+          "propType": "func",
+          "description": "取消上传回调(支持Promise)"
+        },
+        {
+          "name": "onImageError",
+          "propType": "func",
+          "description": "头像加载出错回调"
+        },
+        {
+          "name": "onPreview",
+          "propType": "func",
+          "description": "listType=card时点击图片回调"
+        },
+        {
+          "name": "extraRender",
+          "propType": "func",
+          "description": "自定义额外渲染"
+        },
+        {
+          "name": "progressProps",
+          "propType": "object",
+          "description": "透传给Progress props"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          }
+        },
+        {
+          "name": "uploader",
+          "propType": "any"
+        },
+        {
+          "name": "useDataURL",
+          "propType": "bool",
+          "description": "可选参数，是否本地预览"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "isPreview",
+          "propType": "bool"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Avatar",
+      "title": "Avatar",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Avatar",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "children",
+          "propType": "any"
+        },
+        {
+          "name": "className",
+          "propType": "string"
+        },
+        {
+          "name": "size",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              {
+                "type": "oneOf",
+                "value": [
+                  "small",
+                  "medium",
+                  "large"
+                ]
+              },
+              "number"
+            ]
+          },
+          "description": "头像的大小",
+          "defaultValue": "medium"
+        },
+        {
+          "name": "shape",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "circle",
+              "square"
+            ]
+          },
+          "description": "头像的形状",
+          "defaultValue": "circle"
+        },
+        {
+          "name": "icon",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              {
+                "type": "instanceOf",
+                "value": "node"
+              },
+              "string"
+            ]
+          },
+          "description": "icon 类头像的图标类型，可设为 Icon 的 `type` 或 `ReactNode`"
+        },
+        {
+          "name": "src",
+          "propType": "string",
+          "description": "图片类头像的资源地址"
+        },
+        {
+          "name": "onError",
+          "propType": "func",
+          "description": "图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为"
+        },
+        {
+          "name": "alt",
+          "propType": "string",
+          "description": "图像无法显示时的 alt 替代文本"
+        },
+        {
+          "name": "srcSet",
+          "propType": "string",
+          "description": "图片类头像响应式资源地址"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "ResponsiveGrid",
+      "title": "ResponsiveGrid",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "ResponsiveGrid",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "className",
+          "propType": "any"
+        },
+        {
+          "name": "device",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "phone",
+              "tablet",
+              "desktop"
+            ]
+          },
+          "description": "设备，用来做自适应，默认为 PC\n@enumdesc 手机, 平板, PC",
+          "defaultValue": "desktop"
+        },
+        {
+          "name": "rows",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "number",
+              "string"
+            ]
+          }
+        },
+        {
+          "name": "columns",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "number",
+              "string"
+            ]
+          },
+          "description": "分为几列， 默认是 12 列"
+        },
+        {
+          "name": "component",
+          "propType": {
+            "type": "instanceOf",
+            "value": "elementType"
+          },
+          "description": "设置标签类型",
+          "defaultValue": "div"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Cell",
+      "title": "Cell",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "ResponsiveGrid",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": "Cell"
+      },
+      "props": [
+        {
+          "name": "device",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "phone",
+              "tablet",
+              "desktop"
+            ]
+          },
+          "defaultValue": "desktop"
+        },
+        {
+          "name": "colSpan",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "number",
+              "object"
+            ]
+          },
+          "description": "横向，占据几列"
+        },
+        {
+          "name": "rowSpan",
+          "propType": "number",
+          "description": "纵向，占据几行"
+        },
+        {
+          "name": "component",
+          "propType": {
+            "type": "instanceOf",
+            "value": "elementType"
+          },
+          "description": "设置标签类型",
+          "defaultValue": "div"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        }
+      ]
+    },
+    {
+      "componentName": "Box",
+      "title": "Box",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Box",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "style",
+          "propType": "object"
+        },
+        {
+          "name": "className",
+          "propType": "any"
+        },
+        {
+          "name": "direction",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "row",
+              "column"
+            ]
+          },
+          "description": "布局方向，默认为 column ，一个元素占据一整行\n@default column",
+          "defaultValue": "column"
+        },
+        {
+          "name": "wrap",
+          "propType": "bool",
+          "description": "是否折行",
+          "defaultValue": false
+        },
+        {
+          "name": "justify",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "flex-start",
+              "center",
+              "flex-end",
+              "space-between",
+              "space-around"
+            ]
+          },
+          "description": "沿着主轴方向，子元素们的排布关系 （兼容性同 justify-content ）"
+        },
+        {
+          "name": "align",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "flex-start",
+              "center",
+              "flex-end",
+              "baseline",
+              "stretch"
+            ]
+          },
+          "description": "垂直主轴方向，子元素们的排布关系 （兼容性同 align-items ）"
+        },
+        {
+          "name": "device",
+          "propType": {
+            "type": "oneOf",
+            "value": [
+              "phone",
+              "tablet",
+              "desktop"
+            ]
+          }
+        }
+      ],
+      "configure": {
+        "component": {
+          "isContainer": true
+        }
+      }
+    }
+  ],
+  "componentList": [
+    {
+      "title": "Util",
+      "children": [
+        {
+          "componentName": "Dropdown",
+          "title": "下拉菜单",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "下拉菜单",
+              "screenshot": "",
+              "schema": {
+                "componentName": "Dropdown",
+                "props": {}
+              }
+            }
+          ]
+        }
+      ],
+      "icon": ""
+    },
+    {
+      "title": "DataDisplay",
+      "children": [
+        {
+          "componentName": "Avatar",
+          "title": "头像",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "头像",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_avatar.png",
+              "schema": {
+                "componentName": "Avatar",
+                "props": {
+                  "prefix": "next-",
+                  "size": "medium",
+                  "shape": "circle"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Badge",
+          "title": "徽标数",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "徽标数",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_badge.png",
+              "schema": {
+                "componentName": "Badge",
+                "props": {
+                  "prefix": "next-",
+                  "overflowCount": 99
+                }
+              }
+            }
+          ]
+        },{
+          "componentName": "Table",
+          "title": "表格",
+          "icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "表格",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png",
+              "schema": {
+                "componentName": "Table",
+                "props": {
+                  "dataSource": [{
+                    "id": 1, "time": "2016"
+                  },{
+                    "id": 2, "time": "2017"
+                  }],
+                  "size": "medium",
+                  "prefix": "next-",
+                  "hasBorder": true,
+                  "hasHeader": true,
+                  "isZebra": false,
+                  "loading": false,
+                  "expandedIndexSimulate": false,
+                  "primaryKey": "id",
+                  "locale": "zhCN.Table",
+                  "crossline": false
+                },
+                "children": [
+                  {
+                    "componentName": "Table.Column",
+                    "props": {
+                      "title": "id",
+                      "dataIndex": "id"
+                    }
+                  },
+                  {
+                    "componentName": "Table.Column",
+                    "props": {
+                      "title": "time",
+                      "dataIndex": "time"
+                    }
+                  }
+                ]
+              }
+            }
+          ]
+        },{
+          "componentName": "Table.Column",
+          "title": "表格列",
+          "icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "表格列",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png",
+              "schema": {
+                "componentName": "Table.Column",
+                "props": {
+                  "title": "name"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Calendar",
+          "title": "日历",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "screenshot": "https://img.alicdn.com/tfs/TB158yMu4v1gK0jSZFFXXb0sXXa-112-64.png",
+              "title": "卡片型",
+              "schema": {
+                "componentName": "Calendar",
+                "props": {
+                  "shape": "card"
+                }
+              }
+            },
+            {
+              "screenshot": "https://img.alicdn.com/tfs/TB1PRmJu7P2gK0jSZPxXXacQpXa-112-64.png",
+              "title": "面板型",
+              "schema": {
+                "componentName": "Calendar",
+                "props": {
+                  "shape": "panel"
+                }
+              }
+            },
+            {
+              "screenshot": "https://img.alicdn.com/tfs/TB10JuKu.T1gK0jSZFhXXaAtVXa-112-64.png",
+              "title": "全屏型",
+              "schema": {
+                "componentName": "Calendar",
+                "props": {
+                  "shape": "fullscreen"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Card",
+          "title": "卡片",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "screenshot": "https://img.alicdn.com/tfs/TB1CHN3u4z1gK0jSZSgXXavwpXa-112-64.png",
+              "label": "普通型",
+              "schema": {
+                "componentName": "Card",
+                "props": {},
+                "children": [
+                  {
+                    "componentName": "CardContent"
+                  }
+                ]
+              }
+            },
+            {
+              "screenshot": "https://img.alicdn.com/tfs/TB1.Ut6u4D1gK0jSZFKXXcJrVXa-112-64.png",
+              "label": "自定义",
+              "schema": {
+                "componentName": "Card",
+                "props": {
+                  "__slot__extra": true,
+                  "extra": {
+                    "type": "JSBlock",
+                    "value": {
+                      "componentName": "Slot",
+                      "props": {
+                        "slotName": "extra",
+                        "slotTitle": "自定义内容"
+                      },
+                      "condition": true,
+                      "children": []
+                    }
+                  }
+                },
+                "children": [
+                  {
+                    "componentName": "CardContent"
+                  }
+                ]
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Cascader",
+          "title": "级联",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "级联",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_cascader.png",
+              "schema": {
+                "componentName": "Cascader",
+                "props": {
+                  "prefix": "next-",
+                  "expandTriggerType": "click"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Collapse",
+          "title": "折叠面板",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "折叠面板",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_collapse.png",
+              "schema": {
+                "componentName": "Collapse",
+                "props": {
+                  "prefix": "next-"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "List",
+          "title": "列表",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "列表",
+              "screenshot": "",
+              "schema": {
+                "componentName": "List",
+                "props": {}
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Menu",
+          "title": "菜单",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "菜单",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_menu.png",
+              "schema": {
+                "componentName": "Menu",
+                "props": {
+                  "prefix": "next-",
+                  "defaultOpenKeys": [],
+                  "mode": "inline",
+                  "triggerType": "click",
+                  "openMode": "multiple",
+                  "inlineIndent": 20,
+                  "inlineArrowDirection": "down",
+                  "popupAlign": "follow",
+                  "defaultSelectedKeys": [],
+                  "hasSelectedIcon": true,
+                  "labelToggleChecked": true,
+                  "direction": "ver",
+                  "hozAlign": "left",
+                  "focusable": true,
+                  "expandAnimation": true
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Progress",
+          "title": "进度指示器",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "进度指示器",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_progress.png",
+              "schema": {
+                "componentName": "Progress",
+                "props": {
+                  "prefix": "next-",
+                  "shape": "line",
+                  "size": "medium",
+                  "state": "normal"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Slider",
+          "title": "图片轮播",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "图片轮播",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_slider.png",
+              "schema": {
+                "componentName": "Slider",
+                "props": {
+                  "prefix": "next-",
+                  "animation": "slide",
+                  "arrows": true,
+                  "arrowSize": "medium",
+                  "arrowPosition": "inner",
+                  "arrowDirection": "hoz",
+                  "autoplaySpeed": 3000,
+                  "dots": true,
+                  "dotsDirection": "hoz",
+                  "draggable": true,
+                  "infinite": true,
+                  "slide": "div",
+                  "slideDirection": "hoz",
+                  "slidesToShow": 1,
+                  "slidesToScroll": 1,
+                  "speed": 600,
+                  "triggerType": "click",
+                  "centerPadding": "50px",
+                  "cssEase": "ease",
+                  "edgeFriction": 0.35,
+                  "swipe": true,
+                  "touchMove": true,
+                  "touchThreshold": 5,
+                  "useCSS": true,
+                  "waitForAnimate": true
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Tag",
+          "title": "标签",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "标签",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tag.png",
+              "schema": {
+                "componentName": "Tag",
+                "props": {}
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Timeline",
+          "title": "时间轴",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "时间轴",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_timeline.png",
+              "schema": {
+                "componentName": "Timeline",
+                "props": {
+                  "prefix": "next-",
+                  "fold": [],
+                  "animation": true
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Tree",
+          "title": "树形控件",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "树形控件",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tree.png",
+              "schema": {
+                "componentName": "Tree",
+                "props": {
+                  "prefix": "next-",
+                  "selectable": true,
+                  "checkedStrategy": "all",
+                  "autoExpandParent": true,
+                  "animation": true,
+                  "focusable": true
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "icon": ""
+    },
+    {
+      "title": "Feedback",
+      "children": [
+        {
+          "componentName": "Balloon",
+          "title": "气泡提示",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "气泡提示",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_balloon.png",
+              "schema": {
+                "componentName": "Balloon",
+                "props": {
+                  "prefix": "next-",
+                  "size": "medium",
+                  "type": "normal",
+                  "closable": true,
+                  "align": "b",
+                  "offset": [
+                    0,
+                    0
+                  ],
+                  "triggerType": "hover",
+                  "autoFocus": true
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Dialog",
+          "title": "弹窗",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "弹窗",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_dialog.png",
+              "schema": {
+                "componentName": "Dialog",
+                "props": {
+                  "prefix": "next-",
+                  "footerAlign": "right",
+                  "footerActions": [
+                    "ok",
+                    "cancel"
+                  ],
+                  "closeable": "esc,close",
+                  "hasMask": true,
+                  "align": "cc cc",
+                  "minMargin": 40
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Loading",
+          "title": "加载",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "加载",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_loading.png",
+              "schema": {
+                "componentName": "Loading",
+                "props": {
+                  "prefix": "next-",
+                  "tipAlign": "bottom",
+                  "visible": true,
+                  "size": "large",
+                  "inline": true
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Message",
+          "title": "信息提示",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "信息提示",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_message.png",
+              "schema": {
+                "componentName": "Message",
+                "props": {
+                  "prefix": "next-",
+                  "type": "success",
+                  "shape": "inline",
+                  "size": "medium",
+                  "defaultVisible": true,
+                  "animation": true
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Notification",
+          "title": "通知",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "通知",
+              "screenshot": "",
+              "schema": {
+                "componentName": "Notification",
+                "props": {}
+              }
+            }
+          ]
+        }
+      ],
+      "icon": ""
+    },
+    {
+      "title": "General",
+      "children": [
+        {
+          "componentName": "Box",
+          "title": "弹性布局",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "弹性布局",
+              "screenshot": "",
+              "schema": {
+                "componentName": "Box",
+                "props": {}
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Button",
+          "title": "按钮",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "按钮",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_button.png",
+              "schema": {
+                "componentName": "Button",
+                "props": {
+                  "prefix": "next-",
+                  "type": "normal",
+                  "size": "medium",
+                  "htmlType": "button",
+                  "component": "button"
+                },
+                "children": "取消"
+              }
+            },
+            {
+              "title": "次要",
+              "screenshot": "https://img.alicdn.com/tfs/TB1a.N1uVT7gK0jSZFpXXaTkpXa-112-64.png",
+              "schema": {
+                "componentName": "Button",
+                "props": {
+                  "type": "primary",
+                  "size": "large",
+                  "htmlType": "button",
+                  "component": "button"
+                },
+                "children": "提交"
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Button.Group",
+          "title": "按钮组",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "按钮组",
+              "screenshot": "https://img.alicdn.com/tfs/TB1t6dhvV67gK0jSZPfXXahhFXa-310-122.png",
+              "schema": {
+                "componentName": "Button.Group",
+                "props": {
+
+                },
+                "children": [{
+                  "componentName": "Button",
+                  "props": {
+                    "type": "primary",
+                    "style": {
+                      "margin": "0 5px 0 5px"
+                    },
+                    "htmlType": "submit"
+                  },
+                  "children": [
+                    {
+                      "componentName": "Icon",
+                      "props": {
+                        "type": "success"
+                      }
+                    },
+                    "提交"
+                  ]
+                }, {
+                  "componentName": "Button",
+                  "props": {
+                    "type": "normal",
+                    "style": {
+                      "margin": "0 5px 0 5px"
+                    },
+                    "htmlType": "reset"
+                  },
+                  "children": "重置"
+                }]
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Divider",
+          "title": "分隔符",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "分隔符",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_divider.png",
+              "schema": {
+                "componentName": "Divider",
+                "props": {
+                  "prefix": "next-",
+                  "direction": "hoz",
+                  "orientation": "center"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Grid",
+          "title": "栅格",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "栅格",
+              "screenshot": "",
+              "schema": {
+                "componentName": "Grid",
+                "props": {}
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Icon",
+          "title": "图标",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "图标",
+              "screenshot": "",
+              "schema": {
+                "componentName": "Icon",
+                "props": {}
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "MenuButton",
+          "title": "菜单按钮",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "菜单按钮",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_menu-button.png",
+              "schema": {
+                "componentName": "MenuButton",
+                "props": {
+                  "prefix": "next-",
+                  "autoWidth": true,
+                  "popupTriggerType": "click",
+                  "defaultSelectedKeys": []
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "ResponsiveGrid",
+          "title": "栅格布局",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "栅格布局",
+              "screenshot": "",
+              "schema": {
+                "componentName": "ResponsiveGrid",
+                "props": {}
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Shell",
+          "title": "框架",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "框架",
+              "screenshot": "",
+              "schema": {
+                "componentName": "Shell",
+                "props": {}
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "SplitButton",
+          "title": "分隔按钮",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "分隔按钮",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_split-button.png",
+              "schema": {
+                "componentName": "SplitButton",
+                "props": {
+                  "prefix": "next-",
+                  "type": "normal",
+                  "size": "medium",
+                  "defaultSelectedKeys": [],
+                  "autoWidth": true,
+                  "popupTriggerType": "click"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Typography",
+          "title": "排版",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "排版",
+              "screenshot": "",
+              "schema": {
+                "componentName": "Typography",
+                "props": {}
+              }
+            }
+          ]
+        }
+      ],
+      "icon": ""
+    },
+    {
+      "title": "Navigation",
+      "children": [
+        {
+          "componentName": "Breadcrumb",
+          "title": "面包屑",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "面包屑",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_breadcrumb.png",
+              "schema": {
+                "componentName": "Breadcrumb",
+                "props": {
+                  "prefix": "next-",
+                  "maxNode": 100,
+                  "component": "nav"
+                }
+              }
+            }
+          ]
+        },{
+          "componentName": "Breadcrumb.Item",
+          "title": "面包屑 Item",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "面包屑",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_breadcrumb.png",
+              "schema": {
+                "componentName": "Breadcrumb.Item",
+                "props": {
+                  "prefix": "next-"
+                },
+                "children": [
+                  "222",
+                  "222111"
+                ]
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "MCBreadcrumb",
+          "title": "MC面包屑",
+          "icon": "",
+          "package": "mc-breadcrumb",
+          "library": "MCBreadcrumb",
+          "snippets": [
+            {
+              "title": "面包屑",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_breadcrumb.png",
+              "schema": {
+                "componentName": "MCBreadcrumb",
+                "props": {
+                  "title": "物料中心",
+                  "prefix": "next-",
+                  "maxNode": 100
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Nav",
+          "title": "导航",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "导航",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_nav.png",
+              "schema": {
+                "componentName": "Nav",
+                "props": {
+                  "prefix": "next-",
+                  "type": "normal",
+                  "direction": "ver",
+                  "hozAlign": "left",
+                  "mode": "inline",
+                  "triggerType": "click",
+                  "inlineIndent": 20,
+                  "openMode": "multiple",
+                  "defaultSelectedKeys": [],
+                  "popupAlign": "follow",
+                  "hasArrow": true
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Pagination",
+          "title": "翻页器",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "翻页器",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_pagination.png",
+              "schema": {
+                "componentName": "Pagination",
+                "props": {
+                  "prefix": "next-",
+                  "type": "normal",
+                  "shape": "normal",
+                  "size": "medium",
+                  "defaultCurrent": 1,
+                  "total": 100,
+                  "pageShowCount": 5,
+                  "pageSize": 10,
+                  "pageSizePosition": "start",
+                  "showJump": true
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Step",
+          "title": "步骤",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "步骤",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_step.png",
+              "schema": {
+                "componentName": "Step",
+                "props": {
+                  "prefix": "next-",
+                  "direction": "hoz",
+                  "labelPlacement": "ver",
+                  "shape": "circle",
+                  "animation": true
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Tab",
+          "title": "选项卡",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "选项卡",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tab.png",
+              "schema": {
+                "componentName": "Tab",
+                "props": {
+                  "prefix": "next-",
+                  "shape": "pure",
+                  "animation": true,
+                  "excessMode": "slide",
+                  "tabPosition": "top",
+                  "size": "medium",
+                  "triggerType": "click",
+                  "lazyLoad": true
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "icon": ""
+    },
+    {
+      "title": "DataEntry",
+      "children": [
+        {
+          "componentName": "CascaderSelect",
+          "title": "级联选择",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "级联选择",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_cascader-select.png",
+              "schema": {
+                "componentName": "CascaderSelect",
+                "props": {
+                  "prefix": "next-",
+                  "size": "medium",
+                  "hasArrow": true,
+                  "hasBorder": true,
+                  "expandTriggerType": "click",
+                  "resultAutoWidth": true,
+                  "notFoundContent": "Not Found"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Checkbox",
+          "title": "复选按钮",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "复选按钮",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_checkbox.png",
+              "schema": {
+                "componentName": "Checkbox",
+                "props": {
+                  "prefix": "next-"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "DatePicker",
+          "title": "日期选择框",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "日期选择框",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_date-picker.png",
+              "schema": {
+                "componentName": "DatePicker",
+                "props": {
+                  "prefix": "next-",
+                  "format": "YYYY-MM-DD",
+                  "size": "medium",
+                  "hasClear": true,
+                  "popupTriggerType": "click",
+                  "popupAlign": "tl tl"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Form.Item",
+          "title": "Form.Item",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "Form.Item",
+              "screenshot": "",
+              "schema": {
+                "componentName": "Form.Item",
+                "props": {
+                  "style":{
+                    "margin-bottom": "0",
+                    "min-width": "200px",
+                    "min-height": "28px"
+                  }
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Form",
+          "title": "表单",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "表单",
+              "screenshot": "",
+              "schema": {
+                "componentName": "Form",
+                "props": {}
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Input",
+          "title": "输入框",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "输入框",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_input.png",
+              "schema": {
+                "componentName": "Input",
+                "props": {
+                  "hasBorder": true,
+                  "size": "medium",
+                  "autoComplete": "off"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "NumberPicker",
+          "title": "数字输入框",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "数字输入框",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_number-picker.png",
+              "schema": {
+                "componentName": "NumberPicker",
+                "props": {
+                  "prefix": "next-",
+                  "type": "normal",
+                  "size": "medium",
+                  "step": 1,
+                  "editable": true
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Radio",
+          "title": "单选框",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "单选框",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_radio.png",
+              "schema": {
+                "componentName": "Radio",
+                "props": {}
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Range",
+          "title": "区段选择器",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "区段选择器",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_range.png",
+              "schema": {
+                "componentName": "Range",
+                "props": {
+                  "prefix": "next-",
+                  "slider": "single",
+                  "max": 100,
+                  "step": 1,
+                  "marksPosition": "above",
+                  "hasTip": true
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Rating",
+          "title": "评分",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "评分",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_rating.png",
+              "schema": {
+                "componentName": "Rating",
+                "props": {
+                  "prefix": "next-",
+                  "count": 5,
+                  "size": "medium",
+                  "iconType": "favorites-filling"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Search",
+          "title": "搜索",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "搜索",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_search.png",
+              "schema": {
+                "componentName": "Search",
+                "props": {
+                  "prefix": "next-",
+                  "shape": "normal",
+                  "type": "normal",
+                  "size": "medium",
+                  "filter": [],
+                  "hasIcon": true
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Select",
+          "title": "选择器",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "选择器",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_select.png",
+              "schema": {
+                "componentName": "Select",
+                "props": {
+                  "mode": "single",
+                  "hasArrow": true,
+                  "cacheValue": true
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Switch",
+          "title": "开关组件",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "开关组件",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_switch.png",
+              "schema": {
+                "componentName": "Switch",
+                "props": {
+                  "prefix": "next-",
+                  "size": "medium"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "TimePicker",
+          "title": "时间选择框",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "时间选择框",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_time-picker.png",
+              "schema": {
+                "componentName": "TimePicker",
+                "props": {
+                  "prefix": "next-",
+                  "size": "medium",
+                  "hasClear": true,
+                  "format": "HH:mm:ss",
+                  "popupAlign": "tl tl",
+                  "popupTriggerType": "click"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Transfer",
+          "title": "穿梭框",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "穿梭框",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_transfer.png",
+              "schema": {
+                "componentName": "Transfer",
+                "props": {
+                  "prefix": "next-",
+                  "mode": "normal",
+                  "notFoundContent": "Not Found"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "TreeSelect",
+          "title": "树型选择控件",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "树型选择控件",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tree-select.png",
+              "schema": {
+                "componentName": "TreeSelect",
+                "props": {
+                  "prefix": "next-",
+                  "size": "medium",
+                  "hasArrow": true,
+                  "hasBorder": true,
+                  "autoWidth": true,
+                  "notFoundContent": "Not Found",
+                  "treeCheckedStrategy": "parent"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "componentName": "Upload",
+          "title": "上传组件",
+          "icon": "",
+          "package": "@alife/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "上传组件",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_upload.png",
+              "schema": {
+                "componentName": "Upload",
+                "props": {
+                  "prefix": "next-",
+                  "closable": true,
+                  "autoUpload": true
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "icon": ""
+    }
+  ]
+}
diff --git a/packages/code-generator/demo/demo.js b/packages/code-generator/demo/demo.js
index 61c71de97..28b741f4a 100644
--- a/packages/code-generator/demo/demo.js
+++ b/packages/code-generator/demo/demo.js
@@ -4,20 +4,20 @@ const CodeGenerator = require('../lib').default;
 
 function flatFiles(rootName, dir) {
   const dirRoot = rootName ? `${rootName}/${dir.name}` : dir.name;
-  const files = dir.files.map(file => ({
+  const files = dir.files.map((file) => ({
     name: `${dirRoot}/${file.name}.${file.ext}`,
     content: file.content,
     ext: '',
   }));
-  const filesInSub = dir.dirs.map(subDir => flatFiles(`${dirRoot}`, subDir));
-  const result = files.concat.apply(files, filesInSub);
+  const filesInSub = dir.dirs.map((subDir) => flatFiles(`${dirRoot}`, subDir));
+  const result = files.concat(...filesInSub);
 
   return result;
 }
 
 function displayResultInConsole(root, fileName) {
   const files = flatFiles('.', root);
-  files.forEach(file => {
+  files.forEach((file) => {
     if (!fileName || fileName === file.name) {
       console.log(`========== ${file.name} Start ==========`);
       console.log(file.content);
@@ -37,20 +37,62 @@ async function writeResultToDisk(root, path) {
   });
 }
 
+function getComponentsMap() {
+  const assetJson = fs.readFileSync('./demo/assets.json', { encoding: 'utf8' });
+  const assets = JSON.parse(assetJson);
+  const { components } = assets;
+
+  const componentsMap = components
+    .filter((c) => !!c.npm)
+    .map((c) => ({
+      componentName: c.componentName,
+      ...(c.npm || {}),
+    }));
+
+  return componentsMap;
+}
+
 function main() {
   const schemaJson = fs.readFileSync('./demo/sampleSchema.json', { encoding: 'utf8' });
   const createIceJsProjectBuilder = CodeGenerator.solutions.icejs;
   const builder = createIceJsProjectBuilder();
 
-  builder.generateProject(schemaJson).then(result => {
+  builder.generateProject(schemaJson).then((result) => {
     displayResultInConsole(result);
-    writeResultToDisk(result, 'output/lowcodeDemo').then(response =>
+    writeResultToDisk(result, 'output/lowcodeDemo').then((response) =>
       console.log('Write to disk: ', JSON.stringify(response)),
     );
     return result;
   });
 }
 
+function demo() {
+  const schemaJson = fs.readFileSync('./demo/schema.json', { encoding: 'utf8' });
+  const createIceJsProjectBuilder = CodeGenerator.solutions.icejs;
+  const builder = createIceJsProjectBuilder();
+
+  const componentsMap = getComponentsMap();
+  const root = JSON.parse(schemaJson);
+
+  const fullSchema = {
+    version: '1.0.0',
+    config: {
+      historyMode: 'hash',
+      targetRootID: 'J_Container',
+    },
+    meta: {
+      name: 'demoproject',
+    },
+    componentsTree: [root],
+    componentsMap,
+  };
+
+  builder.generateProject(fullSchema).then((result) => {
+    displayResultInConsole(result);
+    return result;
+  });
+}
+
 function exportModule() {
   const schemaJson = fs.readFileSync('./demo/shenmaSample.json', { encoding: 'utf8' });
   const moduleBuilder = CodeGenerator.createModuleBuilder({
@@ -66,13 +108,11 @@ function exportModule() {
       CodeGenerator.plugins.react.jsx(),
       CodeGenerator.plugins.style.css(),
     ],
-    postProcessors: [
-      CodeGenerator.postprocessor.prettier(),
-    ],
+    postProcessors: [CodeGenerator.postprocessor.prettier()],
     mainFileName: 'index',
   });
 
-  moduleBuilder.generateModuleCode(schemaJson).then(result => {
+  moduleBuilder.generateModuleCode(schemaJson).then((result) => {
     displayResultInConsole(result);
     return result;
   });
@@ -81,7 +121,7 @@ function exportModule() {
 function exportProject() {
   const schemaJson = fs.readFileSync('./demo/sampleSchema.json', { encoding: 'utf8' });
 
-  const builder =  CodeGenerator.createProjectBuilder({
+  const builder = CodeGenerator.createProjectBuilder({
     template: CodeGenerator.solutionParts.icejs.template,
     plugins: {
       components: [
@@ -108,41 +148,21 @@ function exportProject() {
         CodeGenerator.plugins.react.jsx(),
         CodeGenerator.plugins.style.css(),
       ],
-      router: [
-        CodeGenerator.plugins.common.esmodule(),
-        CodeGenerator.solutionParts.icejs.plugins.router(),
-      ],
-      entry: [
-        CodeGenerator.solutionParts.icejs.plugins.entry(),
-      ],
-      constants: [
-        CodeGenerator.plugins.project.constants(),
-      ],
-      utils: [
-        CodeGenerator.plugins.common.esmodule(),
-        CodeGenerator.plugins.project.utils(),
-      ],
-      i18n: [
-        CodeGenerator.plugins.project.i18n(),
-      ],
-      globalStyle: [
-        CodeGenerator.solutionParts.icejs.plugins.globalStyle(),
-      ],
-      htmlEntry: [
-        CodeGenerator.solutionParts.icejs.plugins.entryHtml(),
-      ],
-      packageJSON: [
-        CodeGenerator.solutionParts.icejs.plugins.packageJSON(),
-      ],
+      router: [CodeGenerator.plugins.common.esmodule(), CodeGenerator.solutionParts.icejs.plugins.router()],
+      entry: [CodeGenerator.solutionParts.icejs.plugins.entry()],
+      constants: [CodeGenerator.plugins.project.constants()],
+      utils: [CodeGenerator.plugins.common.esmodule(), CodeGenerator.plugins.project.utils()],
+      i18n: [CodeGenerator.plugins.project.i18n()],
+      globalStyle: [CodeGenerator.solutionParts.icejs.plugins.globalStyle()],
+      htmlEntry: [CodeGenerator.solutionParts.icejs.plugins.entryHtml()],
+      packageJSON: [CodeGenerator.solutionParts.icejs.plugins.packageJSON()],
     },
-    postProcessors: [
-      CodeGenerator.postprocessor.prettier(),
-    ],
+    postProcessors: [CodeGenerator.postprocessor.prettier()],
   });
 
-  builder.generateProject(schemaJson).then(result => {
+  builder.generateProject(schemaJson).then((result) => {
     displayResultInConsole(result);
-    writeResultToDisk(result, 'output/lowcodeDemo').then(response =>
+    writeResultToDisk(result, 'output/lowcodeDemo').then((response) =>
       console.log('Write to disk: ', JSON.stringify(response)),
     );
     return result;
@@ -151,4 +171,5 @@ function exportProject() {
 
 // main();
 // exportModule();
-exportProject();
+// exportProject();
+demo();
diff --git a/packages/code-generator/demo/schema.json b/packages/code-generator/demo/schema.json
new file mode 100644
index 000000000..0e60ac61c
--- /dev/null
+++ b/packages/code-generator/demo/schema.json
@@ -0,0 +1,420 @@
+{
+  "componentName": "Page",
+  "id": "node_dockcviv8fo1",
+  "props": {
+    "ref": "outterView",
+    "autoLoading": true,
+    "style": {
+      "padding": "0 5px 0 5px"
+    }
+  },
+  "fileName": "test",
+  "dataSource": {
+    "list": []
+  },
+  "state": {
+    "text": "outter",
+    "isShowDialog": false
+  },
+  "css": "body {font-size: 12px;} .botton{width:100px;color:#ff00ff}",
+  "lifeCycles": {
+    "componentDidMount": {
+      "type": "JSFunction",
+      "value": "function() {\n    console.log('did mount');\n  }"
+    },
+    "componentWillUnmount": {
+      "type": "JSFunction",
+      "value": "function() {\n    console.log('will umount');\n  }"
+    }
+  },
+  "methods": {
+    "testFunc": {
+      "type": "JSFunction",
+      "value": "function() {\n    console.log('test func');\n  }"
+    },
+    "onClick": {
+      "type": "JSFunction",
+      "value": "function(){\n    this.setState({\n      isShowDialog:true\n    })\n\t}"
+    }
+  },
+  "children": [{
+    "componentName": "Box",
+    "id": "node_dockcy8n9xed",
+    "props": {
+      "style": {
+        "backgroundColor": "rgba(31,56,88,0.1)",
+        "padding": "12px 12px 12px 12px"
+      }
+    },
+    "children": [{
+      "componentName": "Box",
+      "id": "node_dockcy8n9xee",
+      "props": {
+        "style": {
+          "padding": "12px 12px 12px 12px",
+          "backgroundColor": "#ffffff"
+        }
+      },
+      "children": [{
+        "componentName": "Breadcrumb",
+        "id": "node_dockcy8n9xef",
+        "props": {
+          "prefix": "next-",
+          "maxNode": 100,
+          "component": "nav"
+        },
+        "children": [{
+          "componentName": "Breadcrumb.Item",
+          "id": "node_dockcy8n9xeg",
+          "props": {
+            "prefix": "next-"
+          },
+          "children": ["首页"]
+        }, {
+          "componentName": "Breadcrumb.Item",
+          "id": "node_dockcy8n9xei",
+          "props": {
+            "prefix": "next-"
+          },
+          "children": ["品质中台"]
+        }, {
+          "componentName": "Breadcrumb.Item",
+          "id": "node_dockcy8n9xek",
+          "props": {
+            "prefix": "next-"
+          },
+          "children": ["商家品质页面管理"]
+        }, {
+          "componentName": "Breadcrumb.Item",
+          "id": "node_dockcy8n9xem",
+          "props": {
+            "prefix": "next-"
+          },
+          "children": ["质检知识条配置"]
+        }]
+      }]
+    }, {
+      "componentName": "Box",
+      "id": "node_dockcy8n9xeo",
+      "props": {
+        "style": {
+          "marginTop": "12px",
+          "backgroundColor": "#ffffff"
+        }
+      },
+      "children": [{
+        "componentName": "Form",
+        "id": "node_dockcy8n9xep",
+        "props": {
+          "inline": true,
+          "style": {
+            "marginTop": "12px",
+            "marginRight": "12px",
+            "marginLeft": "12px"
+          },
+          "__events": []
+        },
+        "children": [{
+          "componentName": "Form.Item",
+          "id": "node_dockcy8n9xeq",
+          "props": {
+            "style": {
+              "marginBottom": "0"
+            },
+            "label": "类目名："
+          },
+          "children": [{
+            "componentName": "Select",
+            "id": "node_dockcy8n9xer",
+            "props": {
+              "mode": "single",
+              "hasArrow": true,
+              "cacheValue": true,
+              "style": {
+                "width": "150px"
+              }
+            }
+          }]
+        }, {
+          "componentName": "Form.Item",
+          "id": "node_dockcy8n9xes",
+          "props": {
+            "style": {
+              "marginBottom": "0"
+            },
+            "label": "项目类型："
+          },
+          "children": [{
+            "componentName": "Select",
+            "id": "node_dockcy8n9xet",
+            "props": {
+              "mode": "single",
+              "hasArrow": true,
+              "cacheValue": true,
+              "style": {
+                "width": "200px"
+              }
+            }
+          }]
+        }, {
+          "componentName": "Form.Item",
+          "id": "node_dockcy8n9xeu",
+          "props": {
+            "style": {
+              "marginBottom": "0"
+            },
+            "label": "项目 ID："
+          },
+          "children": [{
+            "componentName": "Input",
+            "id": "node_dockcy8n9xev",
+            "props": {
+              "hasBorder": true,
+              "size": "medium",
+              "autoComplete": "off",
+              "style": {
+                "width": "200px"
+              }
+            }
+          }]
+        }, {
+          "componentName": "Button.Group",
+          "id": "node_dockcy8n9xew",
+          "props": {},
+          "children": [{
+            "componentName": "Button",
+            "id": "node_dockcy8n9xex",
+            "props": {
+              "type": "primary",
+              "style": {
+                "margin": "0 5px 0 5px"
+              },
+              "htmlType": "submit"
+            },
+            "children": [{
+              "componentName": "Icon",
+              "id": "node_dockcy8n9xey",
+              "props": {
+                "type": "success"
+              }
+            }, "搜索"]
+          }, {
+            "componentName": "Button",
+            "id": "node_dockcy8n9xe10",
+            "props": {
+              "type": "normal",
+              "style": {
+                "margin": "0 5px 0 5px"
+              },
+              "htmlType": "reset"
+            },
+            "children": ["清空"]
+          }]
+        }]
+      }]
+    }, {
+      "componentName": "Box",
+      "id": "node_dockcy8n9xe12",
+      "props": {
+        "style": {
+          "justifyContent": "flex-end",
+          "display": "flex",
+          "backgroundColor": "#ffffff",
+          "flexDirection": "row",
+          "paddingRight": "24px"
+        }
+      },
+      "children": [{
+        "componentName": "Button",
+        "id": "node_dockcy8n9xe13",
+        "props": {
+          "prefix": "next-",
+          "type": "primary",
+          "size": "medium",
+          "htmlType": "button",
+          "component": "button",
+          "style": {
+            "width": "100px"
+          },
+          "events": {
+            "onClick": {
+              "type": "JSFunction",
+              "value": "function(){ this.onClick() }",
+              "__eventData": {
+                "type": "componentEvent",
+                "name": "onClick",
+                "relatedEventName": "onClick"
+              }
+            }
+          },
+          "__events": [{
+            "type": "componentEvent",
+            "name": "onClick",
+            "relatedEventName": "onClick"
+          }],
+          "onClick": {
+            "type": "JSFunction",
+            "value": "function(){ this.onClick() }"
+          }
+        },
+        "children": ["新建配置"]
+      }]
+    }, {
+      "componentName": "Box",
+      "id": "node_dockcy8n9xe15",
+      "props": {
+        "style": {
+          "backgroundColor": "#ffffff"
+        }
+      },
+      "children": [{
+        "componentName": "Table",
+        "id": "node_dockcy8n9xe16",
+        "props": {
+          "dataSource": [{
+            "firstCategory": "其他",
+            "secondCategory": "新品预览",
+            "leafCategory": "",
+            "projectType": "标识判断",
+            "projectId": "",
+            "title": "其他类目->新品预览类目类型知识库",
+            "url": "其他",
+            "operation": "编辑"
+          }, {
+            "firstCategory": "其他",
+            "secondCategory": "新品预览",
+            "leafCategory": "",
+            "projectType": "",
+            "projectId": "1",
+            "title": "其他类目->新品预览项目Id知识库",
+            "url": "其他",
+            "operation": "编辑"
+          }],
+          "size": "medium",
+          "prefix": "next-",
+          "hasBorder": true,
+          "hasHeader": true,
+          "isZebra": false,
+          "loading": false,
+          "expandedIndexSimulate": false,
+          "primaryKey": "id",
+          "locale": "zhCN.Table",
+          "crossline": false,
+          "style": {
+            "margin": "24px 12px 24px 12px"
+          }
+        },
+        "children": [{
+          "componentName": "Table.Column",
+          "id": "node_dockcy8n9xe17",
+          "props": {
+            "title": "一级类目",
+            "dataIndex": "firstCategory"
+          }
+        }, {
+          "componentName": "Table.Column",
+          "id": "node_dockcy8n9xe18",
+          "props": {
+            "title": "二级类目",
+            "dataIndex": "secondCategory"
+          }
+        }, {
+          "componentName": "Table.Column",
+          "id": "node_dockcy8n9xe19",
+          "props": {
+            "title": "叶子类目",
+            "dataIndex": "leafCategory"
+          }
+        }, {
+          "componentName": "Table.Column",
+          "id": "node_dockcy8n9xe1a",
+          "props": {
+            "title": "项目类型",
+            "dataIndex": "projectType"
+          }
+        }, {
+          "componentName": "Table.Column",
+          "id": "node_dockcy8n9xe1b",
+          "props": {
+            "title": "项目 ID",
+            "dataIndex": "projectId"
+          }
+        }, {
+          "componentName": "Table.Column",
+          "id": "node_dockcy8n9xe1c",
+          "props": {
+            "title": "知识条标题",
+            "dataIndex": "title"
+          }
+        }, {
+          "componentName": "Table.Column",
+          "id": "node_dockcy8n9xe1d",
+          "props": {
+            "title": "知识条链接",
+            "dataIndex": "url"
+          }
+        }, {
+          "componentName": "Table.Column",
+          "id": "node_dockcy8n9xe1e",
+          "props": {
+            "title": "操作",
+            "dataIndex": "operation"
+          }
+        }]
+      }]
+    }, {
+      "componentName": "Box",
+      "id": "node_dockcy8n9xe1f",
+      "props": {
+        "style": {
+          "backgroundColor": "#ffffff",
+          "paddingBottom": "24px"
+        }
+      },
+      "children": [{
+        "componentName": "Pagination",
+        "id": "node_dockcy8n9xe1g",
+        "props": {
+          "prefix": "next-",
+          "type": "normal",
+          "shape": "normal",
+          "size": "medium",
+          "defaultCurrent": 1,
+          "total": 100,
+          "pageShowCount": 5,
+          "pageSize": 10,
+          "pageSizePosition": "start",
+          "showJump": true,
+          "style": {
+            "display": "flex",
+            "justifyContent": "flex-end"
+          }
+        }
+      }]
+    }]
+  }, {
+    "componentName": "Dialog",
+    "id": "node_dockcy8n9xe1h",
+    "props": {
+      "prefix": "next-",
+      "footerAlign": "right",
+      "footerActions": ["ok", "cancel"],
+      "closeable": "esc,close",
+      "hasMask": true,
+      "align": "cc cc",
+      "minMargin": 40,
+      "visible": {
+        "type": "JSExpression",
+        "value": "this.state.isShowDialog"
+      },
+      "children": {
+        "type": "JSSlot"
+      },
+      "title": "标题",
+      "footer": {
+        "type": "JSSlot"
+      },
+      "events": []
+    }
+  }]
+}
diff --git a/packages/code-generator/package.json b/packages/code-generator/package.json
index 4f3b87d88..bed3692bc 100644
--- a/packages/code-generator/package.json
+++ b/packages/code-generator/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@ali/am-eslint-config": "*",
+    "@ali/lowcode-types": "^0.8.11",
     "@ali/my-prettier": "^1.0.0",
     "@babel/generator": "^7.9.5",
     "@babel/parser": "^7.9.4",
diff --git a/packages/code-generator/src/generator/ModuleBuilder.ts b/packages/code-generator/src/generator/ModuleBuilder.ts
index 991ffedec..e31fdc58b 100644
--- a/packages/code-generator/src/generator/ModuleBuilder.ts
+++ b/packages/code-generator/src/generator/ModuleBuilder.ts
@@ -1,13 +1,12 @@
+import { ProjectSchema, ResultFile, ResultDir } from '@ali/lowcode-types';
+
 import {
   BuilderComponentPlugin,
   CodeGeneratorError,
-  IBasicSchema,
   ICodeChunk,
   ICompiledModule,
   IModuleBuilder,
   IParseResult,
-  IResultDir,
-  IResultFile,
   ISchemaParser,
   PostProcessor,
 } from '../types';
@@ -17,9 +16,7 @@ import { COMMON_SUB_MODULE_NAME } from '../const/generator';
 import SchemaParser from '../parser/SchemaParser';
 import ChunkBuilder from './ChunkBuilder';
 import CodeBuilder from './CodeBuilder';
-
-import ResultDir from '../model/ResultDir';
-import ResultFile from '../model/ResultFile';
+import { createResultFile, createResultDir, addFile } from '../utils/resultHelper';
 
 export function createModuleBuilder(
   options: {
@@ -37,33 +34,27 @@ export function createModuleBuilder(
   const generateModule = async (input: unknown): Promise<ICompiledModule> => {
     const moduleMainName = options.mainFileName || COMMON_SUB_MODULE_NAME;
     if (chunkGenerator.getPlugins().length <= 0) {
-      throw new CodeGeneratorError(
-        'No plugins found. Component generation cannot work without any plugins!',
-      );
+      throw new CodeGeneratorError('No plugins found. Component generation cannot work without any plugins!');
     }
 
-    let files: IResultFile[] = [];
+    let files: ResultFile[] = [];
 
     const { chunks } = await chunkGenerator.run(input);
-    chunks.forEach(fileChunkList => {
+    chunks.forEach((fileChunkList) => {
       const content = linker.link(fileChunkList);
-      const file = new ResultFile(
-        fileChunkList[0].subModule || moduleMainName,
-        fileChunkList[0].fileType,
-        content,
-      );
+      const file = createResultFile(fileChunkList[0].subModule || moduleMainName, fileChunkList[0].fileType, content);
       files.push(file);
     });
 
     if (options.postProcessors.length > 0) {
-      files = files.map(file => {
+      files = files.map((file) => {
         let content = file.content;
         const type = file.ext;
-        options.postProcessors.forEach(processer => {
+        options.postProcessors.forEach((processer) => {
           content = processer(content, type);
         });
 
-        return new ResultFile(file.name, type, content);
+        return createResultFile(file.name, type, content);
       });
     }
 
@@ -72,7 +63,7 @@ export function createModuleBuilder(
     };
   };
 
-  const generateModuleCode = async (schema: IBasicSchema | string): Promise<IResultDir> => {
+  const generateModuleCode = async (schema: ProjectSchema | string): Promise<ResultDir> => {
     // Init
     const schemaParser: ISchemaParser = new SchemaParser();
     const parseResult: IParseResult = schemaParser.parse(schema);
@@ -80,26 +71,19 @@ export function createModuleBuilder(
     const containerInfo = parseResult.containers[0];
     const { files } = await generateModule(containerInfo);
 
-    const dir = new ResultDir(containerInfo.moduleName);
-    files.forEach(file => dir.addFile(file));
+    const dir = createResultDir(containerInfo.moduleName);
+    files.forEach((file) => addFile(dir, file));
 
     return dir;
-  }
+  };
 
-  const linkCodeChunks = (
-    chunks: Record<string, ICodeChunk[]>,
-    fileName: string,
-  ) => {
-    const files: IResultFile[] = [];
+  const linkCodeChunks = (chunks: Record<string, ICodeChunk[]>, fileName: string) => {
+    const files: ResultFile[] = [];
 
-    Object.keys(chunks).forEach(fileKey => {
+    Object.keys(chunks).forEach((fileKey) => {
       const fileChunkList = chunks[fileKey];
       const content = linker.link(fileChunkList);
-      const file = new ResultFile(
-        fileChunkList[0].subModule || fileName,
-        fileChunkList[0].fileType,
-        content,
-      );
+      const file = createResultFile(fileChunkList[0].subModule || fileName, fileChunkList[0].fileType, content);
       files.push(file);
     });
 
diff --git a/packages/code-generator/src/generator/ProjectBuilder.ts b/packages/code-generator/src/generator/ProjectBuilder.ts
index ec1c897b6..c43f3d3f0 100644
--- a/packages/code-generator/src/generator/ProjectBuilder.ts
+++ b/packages/code-generator/src/generator/ProjectBuilder.ts
@@ -1,36 +1,35 @@
+import { ResultDir, ResultFile, ProjectSchema } from '@ali/lowcode-types';
+
 import {
   IModuleBuilder,
   IParseResult,
   IProjectBuilder,
   IProjectPlugins,
-  IProjectSchema,
   IProjectTemplate,
-  IResultDir,
-  IResultFile,
   ISchemaParser,
   PostProcessor,
 } from '../types';
 
-import ResultDir from '../model/ResultDir';
 import SchemaParser from '../parser/SchemaParser';
+import { createResultDir, addDirectory, addFile } from '../utils/resultHelper';
 
 import { createModuleBuilder } from '../generator/ModuleBuilder';
 
 interface IModuleInfo {
   moduleName?: string;
   path: string[];
-  files: IResultFile[];
+  files: ResultFile[];
 }
 
-function getDirFromRoot(root: IResultDir, path: string[]): IResultDir {
-  let current: IResultDir = root;
-  path.forEach(p => {
-    const exist = current.dirs.find(d => d.name === p);
+function getDirFromRoot(root: ResultDir, path: string[]): ResultDir {
+  let current: ResultDir = root;
+  path.forEach((p) => {
+    const exist = current.dirs.find((d) => d.name === p);
     if (exist) {
       current = exist;
     } else {
-      const newDir = new ResultDir(p);
-      current.addDirectory(newDir);
+      const newDir = createResultDir(p);
+      addDirectory(current, newDir);
       current = newDir;
     }
   });
@@ -57,7 +56,7 @@ export class ProjectBuilder implements IProjectBuilder {
     this.postProcessors = postProcessors;
   }
 
-  public async generateProject(schema: IProjectSchema | string): Promise<IResultDir> {
+  async generateProject(schema: ProjectSchema | string): Promise<ResultDir> {
     // Init
     const schemaParser: ISchemaParser = new SchemaParser();
     const builders = this.createModuleBuilders();
@@ -76,7 +75,7 @@ export class ProjectBuilder implements IProjectBuilder {
     // components
     // pages
     const containerBuildResult: IModuleInfo[] = await Promise.all<IModuleInfo>(
-      parseResult.containers.map(async containerInfo => {
+      parseResult.containers.map(async (containerInfo) => {
         let builder: IModuleBuilder;
         let path: string[];
         if (containerInfo.containerType === 'Page') {
@@ -100,9 +99,7 @@ export class ProjectBuilder implements IProjectBuilder {
 
     // router
     if (parseResult.globalRouter && builders.router) {
-      const { files } = await builders.router.generateModule(
-        parseResult.globalRouter,
-      );
+      const { files } = await builders.router.generateModule(parseResult.globalRouter);
 
       buildResult.push({
         path: this.template.slots.router.path,
@@ -112,9 +109,7 @@ export class ProjectBuilder implements IProjectBuilder {
 
     // entry
     if (parseResult.project && builders.entry) {
-      const { files } = await builders.entry.generateModule(
-        parseResult.project,
-      );
+      const { files } = await builders.entry.generateModule(parseResult.project);
 
       buildResult.push({
         path: this.template.slots.entry.path,
@@ -122,14 +117,8 @@ export class ProjectBuilder implements IProjectBuilder {
       });
     }
     // constants?
-    if (
-      parseResult.project &&
-      builders.constants &&
-      this.template.slots.constants
-    ) {
-      const { files } = await builders.constants.generateModule(
-        parseResult.project,
-      );
+    if (parseResult.project && builders.constants && this.template.slots.constants) {
+      const { files } = await builders.constants.generateModule(parseResult.project);
 
       buildResult.push({
         path: this.template.slots.constants.path,
@@ -137,14 +126,8 @@ export class ProjectBuilder implements IProjectBuilder {
       });
     }
     // utils?
-    if (
-      parseResult.globalUtils &&
-      builders.utils &&
-      this.template.slots.utils
-    ) {
-      const { files } = await builders.utils.generateModule(
-        parseResult.globalUtils,
-      );
+    if (parseResult.globalUtils && builders.utils && this.template.slots.utils) {
+      const { files } = await builders.utils.generateModule(parseResult.globalUtils);
 
       buildResult.push({
         path: this.template.slots.utils.path,
@@ -153,9 +136,7 @@ export class ProjectBuilder implements IProjectBuilder {
     }
     // i18n?
     if (parseResult.globalI18n && builders.i18n && this.template.slots.i18n) {
-      const { files } = await builders.i18n.generateModule(
-        parseResult.globalI18n,
-      );
+      const { files } = await builders.i18n.generateModule(parseResult.globalI18n);
 
       buildResult.push({
         path: this.template.slots.i18n.path,
@@ -164,9 +145,7 @@ export class ProjectBuilder implements IProjectBuilder {
     }
     // globalStyle
     if (parseResult.project && builders.globalStyle) {
-      const { files } = await builders.globalStyle.generateModule(
-        parseResult.project,
-      );
+      const { files } = await builders.globalStyle.generateModule(parseResult.project);
 
       buildResult.push({
         path: this.template.slots.globalStyle.path,
@@ -175,9 +154,7 @@ export class ProjectBuilder implements IProjectBuilder {
     }
     // htmlEntry
     if (parseResult.project && builders.htmlEntry) {
-      const { files } = await builders.htmlEntry.generateModule(
-        parseResult.project,
-      );
+      const { files } = await builders.htmlEntry.generateModule(parseResult.project);
 
       buildResult.push({
         path: this.template.slots.htmlEntry.path,
@@ -186,9 +163,7 @@ export class ProjectBuilder implements IProjectBuilder {
     }
     // packageJSON
     if (parseResult.project && builders.packageJSON) {
-      const { files } = await builders.packageJSON.generateModule(
-        parseResult.project,
-      );
+      const { files } = await builders.packageJSON.generateModule(parseResult.project);
 
       buildResult.push({
         path: this.template.slots.packageJSON.path,
@@ -199,14 +174,14 @@ export class ProjectBuilder implements IProjectBuilder {
     // Post Process
 
     // Combine Modules
-    buildResult.forEach(moduleInfo => {
+    buildResult.forEach((moduleInfo) => {
       let targetDir = getDirFromRoot(projectRoot, moduleInfo.path);
       if (moduleInfo.moduleName) {
-        const dir = new ResultDir(moduleInfo.moduleName);
-        targetDir.addDirectory(dir);
+        const dir = createResultDir(moduleInfo.moduleName);
+        addDirectory(targetDir, dir);
         targetDir = dir;
       }
-      moduleInfo.files.forEach(file => targetDir.addFile(file));
+      moduleInfo.files.forEach((file) => addFile(targetDir, file));
     });
 
     return projectRoot;
@@ -215,7 +190,7 @@ export class ProjectBuilder implements IProjectBuilder {
   private createModuleBuilders(): Record<string, IModuleBuilder> {
     const builders: Record<string, IModuleBuilder> = {};
 
-    Object.keys(this.plugins).forEach(pluginName => {
+    Object.keys(this.plugins).forEach((pluginName) => {
       if (this.plugins[pluginName].length > 0) {
         const options: { mainFileName?: string } = {};
         if (this.template.slots[pluginName] && this.template.slots[pluginName].fileName) {
diff --git a/packages/code-generator/src/index.ts b/packages/code-generator/src/index.ts
index 5d670b5ab..f4beb4a60 100644
--- a/packages/code-generator/src/index.ts
+++ b/packages/code-generator/src/index.ts
@@ -11,11 +11,7 @@ import createRecoreProjectBuilder from './solutions/recore';
 
 // 引入说明
 import { REACT_CHUNK_NAME } from './plugins/component/react/const';
-import {
-  COMMON_CHUNK_NAME,
-  CLASS_DEFINE_CHUNK_NAME,
-  DEFAULT_LINK_AFTER,
-} from './const/generator';
+import { COMMON_CHUNK_NAME, CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from './const/generator';
 
 // 引入通用插件组
 import esmodule from './plugins/common/esmodule';
@@ -38,8 +34,11 @@ import prettier from './postprocessor/prettier';
 import * as utilsCommon from './utils/common';
 import * as utilsCompositeType from './utils/compositeType';
 import * as utilsJsExpression from './utils/jsExpression';
+import * as utilsJsSlot from './utils/jsSlot';
 import * as utilsNodeToJSX from './utils/nodeToJSX';
+import * as utilsResultHelper from './utils/resultHelper';
 import * as utilsTemplateHelper from './utils/templateHelper';
+import * as utilsValidate from './utils/validate';
 
 // 引入内置解决方案模块
 import icejs from './plugins/project/framework/icejs';
@@ -91,8 +90,11 @@ export default {
     common: utilsCommon,
     compositeType: utilsCompositeType,
     jsExpression: utilsJsExpression,
+    jsSlot: utilsJsSlot,
     nodeToJSX: utilsNodeToJSX,
+    resultHelper: utilsResultHelper,
     templateHelper: utilsTemplateHelper,
+    validate: utilsValidate,
   },
   chunkNames: {
     COMMON_CHUNK_NAME,
diff --git a/packages/code-generator/src/model/ResultDir.ts b/packages/code-generator/src/model/ResultDir.ts
deleted file mode 100644
index 3888859c1..000000000
--- a/packages/code-generator/src/model/ResultDir.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { CodeGeneratorError, IResultDir, IResultFile } from '../types';
-
-export default class ResultDir implements IResultDir {
-  public name: string;
-  public dirs: IResultDir[];
-  public files: IResultFile[];
-
-  constructor(name: string) {
-    this.name = name;
-    this.dirs = [];
-    this.files = [];
-  }
-
-  public addDirectory(dir: IResultDir): void {
-    if (this.dirs.findIndex(d => d.name === dir.name) < 0) {
-      this.dirs.push(dir);
-    } else {
-      throw new CodeGeneratorError('Adding same directory to one directory');
-    }
-  }
-
-  public addFile(file: IResultFile): void {
-    if (
-      this.files.findIndex(f => f.name === file.name && f.ext === file.ext) < 0
-    ) {
-      this.files.push(file);
-    } else {
-      throw new CodeGeneratorError('Adding same file to one directory');
-    }
-  }
-}
diff --git a/packages/code-generator/src/model/ResultFile.ts b/packages/code-generator/src/model/ResultFile.ts
deleted file mode 100644
index 08b3032b8..000000000
--- a/packages/code-generator/src/model/ResultFile.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { IResultFile } from '../types';
-
-export default class ResultFile implements IResultFile {
-  public name: string;
-  public ext: string;
-  public content: string;
-
-  constructor(name: string, ext: string = 'jsx', content: string = '') {
-    this.name = name;
-    this.ext = ext;
-    this.content = content;
-  }
-}
diff --git a/packages/code-generator/src/parser/SchemaParser.ts b/packages/code-generator/src/parser/SchemaParser.ts
index d6b679ff0..1e0b4d611 100644
--- a/packages/code-generator/src/parser/SchemaParser.ts
+++ b/packages/code-generator/src/parser/SchemaParser.ts
@@ -2,28 +2,24 @@
  * 解析器是对输入的固定格式数据做拆解，使其符合引擎后续步骤预期，完成统一处理逻辑的步骤。
  * 本解析器面向的是标准 schema 协议。
  */
+import { IUtilItem, NodeDataType, NodeSchema, ContainerSchema, ProjectSchema, PropsMap } from '@ali/lowcode-types';
 
 import { SUPPORT_SCHEMA_VERSION_LIST } from '../const';
 
-import { handleChildren } from '../utils/nodeToJSX';
+import { handleSubNodes } from '../utils/nodeToJSX';
+import { uniqueArray } from '../utils/common';
 
 import {
-  ChildNodeType,
   CodeGeneratorError,
   CompatibilityError,
   DependencyType,
-  IBasicSchema,
-  IComponentNodeItem,
   IContainerInfo,
-  IContainerNodeItem,
   IExternalDependency,
   IInternalDependency,
   InternalDependencyType,
-  IPageMeta,
   IParseResult,
-  IProjectSchema,
   ISchemaParser,
-  IUtilItem,
+  INpmPackage,
 } from '../types';
 
 const defaultContainer: IContainerInfo = {
@@ -36,23 +32,21 @@ const defaultContainer: IContainerInfo = {
 };
 
 class SchemaParser implements ISchemaParser {
-  public validate(schema: IBasicSchema): boolean {
+  validate(schema: ProjectSchema): boolean {
     if (SUPPORT_SCHEMA_VERSION_LIST.indexOf(schema.version) < 0) {
-      throw new CompatibilityError(
-        `Not support schema with version [${schema.version}]`,
-      );
+      throw new CompatibilityError(`Not support schema with version [${schema.version}]`);
     }
 
     return true;
   }
 
-  public parse(schemaSrc: IProjectSchema | string): IParseResult {
+  parse(schemaSrc: ProjectSchema | string): IParseResult {
     // TODO: collect utils depends in JSExpression
     const compDeps: Record<string, IExternalDependency> = {};
     const internalDeps: Record<string, IInternalDependency> = {};
     let utilsDeps: IExternalDependency[] = [];
 
-    let schema: IProjectSchema;
+    let schema: ProjectSchema;
     if (typeof schemaSrc === 'string') {
       try {
         schema = JSON.parse(schemaSrc);
@@ -64,29 +58,39 @@ class SchemaParser implements ISchemaParser {
     }
 
     // 解析三方组件依赖
-    schema.componentsMap.forEach(info => {
-      info.dependencyType = DependencyType.External;
-      info.importName = info.componentName;
-      compDeps[info.componentName] = info;
+    schema.componentsMap.forEach((info) => {
+      const extDep: IExternalDependency = {
+        componentName: info.componentName,
+        package: info.package,
+        version: info.version || '',
+        destructuring: info.destructuring || false,
+        exportName: info.exportName || info.componentName || '',
+        subName: info.subName,
+        main: info.main,
+        dependencyType: DependencyType.External,
+      };
+
+      if (extDep.componentName) {
+        compDeps[extDep.componentName] = extDep;
+      }
     });
 
     let containers: IContainerInfo[];
     // Test if this is a lowcode component without container
     if (schema.componentsTree.length > 0) {
-      const firstRoot: IContainerNodeItem = schema
-        .componentsTree[0] as IContainerNodeItem;
+      const firstRoot: ContainerSchema = schema.componentsTree[0] as ContainerSchema;
 
       if (!firstRoot.fileName) {
         // 整个 schema 描述一个容器，且无根节点定义
         const container: IContainerInfo = {
           ...defaultContainer,
-          children: schema.componentsTree as IComponentNodeItem[],
+          children: schema.componentsTree as NodeSchema[],
         };
         containers = [container];
       } else {
         // 普通带 1 到多个容器的 schema
-        containers = schema.componentsTree.map(n => {
-          const subRoot = n as IContainerNodeItem;
+        containers = schema.componentsTree.map((n) => {
+          const subRoot = n as ContainerSchema;
           const container: IContainerInfo = {
             ...subRoot,
             containerType: subRoot.componentName,
@@ -100,7 +104,7 @@ class SchemaParser implements ISchemaParser {
     }
 
     // 建立所有容器的内部依赖索引
-    containers.forEach(container => {
+    containers.forEach((container) => {
       let type;
       switch (container.containerType) {
         case 'Page':
@@ -125,51 +129,87 @@ class SchemaParser implements ISchemaParser {
       internalDeps[dep.moduleName] = dep;
     });
 
-    // 分析容器内部组件依赖
-    containers.forEach(container => {
+    // TODO: 不应该在出码部分解决？
+    // 处理 children 写在了 props 里的情况
+    containers.forEach((container) => {
       if (container.children) {
-        // const depNames = this.getComponentNames(container.children);
-        // container.deps = uniqueArray<string>(depNames)
-        //   .map(depName => internalDeps[depName] || compDeps[depName])
-        //   .filter(dep => !!dep);
-        container.deps = Object.keys(compDeps).map(
-          depName => compDeps[depName],
+        handleSubNodes<string>(
+          container.children,
+          {
+            node: (i: NodeSchema) => {
+              if (i.props) {
+                if (Array.isArray(i.props)) {
+                  // FIXME: is array type props description
+                } else {
+                  const nodeProps = i.props as PropsMap;
+                  if (nodeProps.children && !i.children) {
+                    i.children = nodeProps.children as NodeDataType;
+                  }
+                }
+              }
+              return [''];
+            },
+          },
+          {
+            rerun: true,
+          },
         );
       }
     });
 
+    // 分析容器内部组件依赖
+    containers.forEach((container) => {
+      if (container.children) {
+        const depNames = this.getComponentNames(container.children);
+        container.deps = uniqueArray<string>(depNames, (i: string) => i)
+          .map((depName) => internalDeps[depName] || compDeps[depName])
+          .filter((dep) => !!dep);
+        // container.deps = Object.keys(compDeps).map((depName) => compDeps[depName]);
+      }
+    });
+
     // 分析路由配置
     const routes = containers
-      .filter(container => container.containerType === 'Page')
-      .map(page => {
-        const meta = page.meta as IPageMeta;
-        if (meta) {
-          return {
-            path: meta.router,
-            componentName: page.moduleName,
-          };
+      .filter((container) => container.containerType === 'Page')
+      .map((page) => {
+        let router = '';
+        if (page.meta) {
+          router = (page.meta as any)?.router || '';
         }
+
+        if (!router) {
+          router = `/${page.fileName}`;
+        }
+
         return {
-          path: '',
+          path: router,
           componentName: page.moduleName,
         };
       });
 
     const routerDeps = routes
-      .map(r => internalDeps[r.componentName] || compDeps[r.componentName])
-      .filter(dep => !!dep);
+      .map((r) => internalDeps[r.componentName] || compDeps[r.componentName])
+      .filter((dep) => !!dep);
 
     // 分析 Utils 依赖
     let utils: IUtilItem[];
     if (schema.utils) {
       utils = schema.utils;
-      utilsDeps = schema.utils
-        .filter(u => u.type !== 'function')
-        .map(u => u.content as IExternalDependency);
+      utilsDeps = schema.utils.filter((u) => u.type !== 'function').map((u) => u.content as IExternalDependency);
     } else {
       utils = [];
     }
 
+    // 分析项目 npm 依赖
+    let npms: INpmPackage[] = [];
+    containers.forEach((con) => {
+      const p = (con.deps || [])
+        .map((dep) => (dep.dependencyType === DependencyType.External ? dep : null))
+        .filter((dep) => dep !== null);
+      npms.push(...((p as unknown) as INpmPackage[]));
+    });
+    npms = uniqueArray<INpmPackage>(npms, (i) => i.package);
+
     return {
       containers,
       globalUtils: {
@@ -182,19 +222,24 @@ class SchemaParser implements ISchemaParser {
         deps: routerDeps,
       },
       project: {
-        meta: schema.meta,
-        config: schema.config,
         css: schema.css,
         constants: schema.constants,
         i18n: schema.i18n,
+        packages: npms,
       },
     };
   }
 
-  public getComponentNames(children: ChildNodeType): string[] {
-    return handleChildren<string>(children, {
-      node: (i: IComponentNodeItem) => [i.componentName],
-    });
+  getComponentNames(children: NodeDataType): string[] {
+    return handleSubNodes<string>(
+      children,
+      {
+        node: (i: NodeSchema) => [i.componentName],
+      },
+      {
+        rerun: true,
+      },
+    );
   }
 }
 
diff --git a/packages/code-generator/src/plugins/common/esmodule.ts b/packages/code-generator/src/plugins/common/esmodule.ts
index 316ed5821..fb44692ae 100644
--- a/packages/code-generator/src/plugins/common/esmodule.ts
+++ b/packages/code-generator/src/plugins/common/esmodule.ts
@@ -15,6 +15,8 @@ import {
   IWithDependency,
 } from '../../types';
 
+import { isValidIdentifier } from '../../utils/validate';
+
 function groupDepsByPack(deps: IDependency[]): Record<string, IDependency[]> {
   const depMap: Record<string, IDependency[]> = {};
 
@@ -25,48 +27,53 @@ function groupDepsByPack(deps: IDependency[]): Record<string, IDependency[]> {
     depMap[pkg].push(dep);
   };
 
-  deps.forEach(dep => {
+  // TODO: main 这个信息到底怎么用，是不是外部包不需要使用？
+  // deps.forEach(dep => {
+  //   if (dep.dependencyType === DependencyType.Internal) {
+  //     addDep(
+  //       `${(dep as IInternalDependency).moduleName}${`/${dep.main}` || ''}`,
+  //       dep,
+  //     );
+  //   } else {
+  //     addDep(`${(dep as IExternalDependency).package}${`/${dep.main}` || ''}`, dep);
+  //   }
+  // });
+
+  deps.forEach((dep) => {
     if (dep.dependencyType === DependencyType.Internal) {
-      addDep(
-        `${(dep as IInternalDependency).moduleName}${dep.main || ''}`,
-        dep,
-      );
+      addDep(`${(dep as IInternalDependency).moduleName}`, dep);
     } else {
-      addDep(`${(dep as IExternalDependency).package}${dep.main || ''}`, dep);
+      addDep(`${(dep as IExternalDependency).package}`, dep);
     }
   });
 
   return depMap;
 }
 
-function buildPackageImport(
-  pkg: string,
-  deps: IDependency[],
-  targetFileType: string,
-): ICodeChunk[] {
+function buildPackageImport(pkg: string, deps: IDependency[], targetFileType: string): ICodeChunk[] {
   const chunks: ICodeChunk[] = [];
-  let defaultImport: string = '';
-  let defaultImportAs: string = '';
+  let defaultImport = '';
+  let defaultImportAs = '';
   const imports: Record<string, string> = {};
 
-  deps.forEach(dep => {
+  deps.forEach((dep) => {
     const srcName = dep.exportName;
-    let targetName = dep.importName || dep.exportName;
-    if (dep.subName) {
-      return;
-    }
+    let targetName = dep.componentName || dep.exportName;
 
     if (dep.subName) {
-      chunks.push({
-        type: ChunkType.STRING,
-        fileType: targetFileType,
-        name: COMMON_CHUNK_NAME.FileVarDefine,
-        content: `const ${targetName} = ${srcName}.${dep.subName};`,
-        linkAfter: [
-          COMMON_CHUNK_NAME.ExternalDepsImport,
-          COMMON_CHUNK_NAME.InternalDepsImport,
-        ],
-      });
+      if (targetName !== `${srcName}.${dep.subName}`) {
+        if (!isValidIdentifier(targetName)) {
+          throw new CodeGeneratorError(`Invalid Identifier [${targetName}]`);
+        }
+
+        chunks.push({
+          type: ChunkType.STRING,
+          fileType: targetFileType,
+          name: COMMON_CHUNK_NAME.FileVarDefine,
+          content: `const ${targetName} = ${srcName}.${dep.subName};`,
+          linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport, COMMON_CHUNK_NAME.InternalDepsImport],
+        });
+      }
 
       targetName = srcName;
     }
@@ -74,18 +81,14 @@ function buildPackageImport(
     if (dep.destructuring) {
       imports[srcName] = targetName;
     } else if (defaultImport) {
-      throw new CodeGeneratorError(
-        `[${pkg}] has more than one default export.`,
-      );
+      throw new CodeGeneratorError(`[${pkg}] has more than one default export.`);
     } else {
       defaultImport = srcName;
       defaultImportAs = targetName;
     }
   });
 
-  const items = Object.keys(imports).map(src =>
-    src === imports[src] ? src : `${src} as ${imports[src]}`,
-  );
+  const items = Object.keys(imports).map((src) => (src === imports[src] ? src : `${src} as ${imports[src]}`));
 
   const statementL = ['import'];
   if (defaultImport) {
@@ -125,7 +128,7 @@ function buildPackageImport(
 
 type PluginConfig = {
   fileType: string;
-}
+};
 
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?: PluginConfig) => {
   const cfg: PluginConfig = {
@@ -143,9 +146,9 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?: Plu
     if (ir && ir.deps && ir.deps.length > 0) {
       const packs = groupDepsByPack(ir.deps);
 
-      Object.keys(packs).forEach(pkg => {
+      Object.keys(packs).forEach((pkg) => {
         const chunks = buildPackageImport(pkg, packs[pkg], cfg.fileType);
-        next.chunks.push.apply(next.chunks, chunks);
+        next.chunks.push(...chunks);
       });
     }
 
diff --git a/packages/code-generator/src/plugins/component/react/containerClass.ts b/packages/code-generator/src/plugins/component/react/containerClass.ts
index 7ca5e685f..6dba4a2b3 100644
--- a/packages/code-generator/src/plugins/component/react/containerClass.ts
+++ b/packages/code-generator/src/plugins/component/react/containerClass.ts
@@ -52,10 +52,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       fileType: FileType.JSX,
       name: CLASS_DEFINE_CHUNK_NAME.ConstructorEnd,
       content: '}',
-      linkAfter: [
-        CLASS_DEFINE_CHUNK_NAME.ConstructorStart,
-        CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
-      ],
+      linkAfter: [CLASS_DEFINE_CHUNK_NAME.ConstructorStart, CLASS_DEFINE_CHUNK_NAME.ConstructorContent],
     });
 
     next.chunks.push({
@@ -75,11 +72,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       fileType: FileType.JSX,
       name: REACT_CHUNK_NAME.ClassRenderEnd,
       content: '}',
-      linkAfter: [
-        REACT_CHUNK_NAME.ClassRenderStart,
-        REACT_CHUNK_NAME.ClassRenderPre,
-        REACT_CHUNK_NAME.ClassRenderJSX,
-      ],
+      linkAfter: [REACT_CHUNK_NAME.ClassRenderStart, REACT_CHUNK_NAME.ClassRenderPre, REACT_CHUNK_NAME.ClassRenderJSX],
     });
 
     next.chunks.push({
diff --git a/packages/code-generator/src/plugins/component/react/containerDataSource.ts b/packages/code-generator/src/plugins/component/react/containerDataSource.ts
index 72d7efd6b..b60cb9539 100644
--- a/packages/code-generator/src/plugins/component/react/containerDataSource.ts
+++ b/packages/code-generator/src/plugins/component/react/containerDataSource.ts
@@ -13,7 +13,7 @@ import {
 
 type PluginConfig = {
   fileType: string;
-}
+};
 
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
   const cfg: PluginConfig = {
@@ -30,9 +30,9 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
 
     if (ir.state) {
       const state = ir.state;
-      const fields = Object.keys(state).map<string>(stateName => {
-        const [isString, value] = generateCompositeType(state[stateName]);
-        return `${stateName}: ${isString ? `'${value}'` : value},`;
+      const fields = Object.keys(state).map<string>((stateName) => {
+        const value = generateCompositeType(state[stateName]);
+        return `${stateName}: ${value},`;
       });
 
       next.chunks.push({
diff --git a/packages/code-generator/src/plugins/component/react/containerInitState.ts b/packages/code-generator/src/plugins/component/react/containerInitState.ts
index 50984c961..9550244f1 100644
--- a/packages/code-generator/src/plugins/component/react/containerInitState.ts
+++ b/packages/code-generator/src/plugins/component/react/containerInitState.ts
@@ -14,7 +14,7 @@ import {
 type PluginConfig = {
   fileType: string;
   implementType: 'inConstructor' | 'insMember' | 'hooks';
-}
+};
 
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
   const cfg: PluginConfig = {
@@ -32,9 +32,9 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
 
     if (ir.state) {
       const state = ir.state;
-      const fields = Object.keys(state).map<string>(stateName => {
-        const [isString, value] = generateCompositeType(state[stateName]);
-        return `${stateName}: ${isString ? `'${value}'` : value},`;
+      const fields = Object.keys(state).map<string>((stateName) => {
+        const value = generateCompositeType(state[stateName]);
+        return `${stateName}: ${value},`;
       });
 
       if (cfg.implementType === 'inConstructor') {
diff --git a/packages/code-generator/src/plugins/component/react/containerLifeCycle.ts b/packages/code-generator/src/plugins/component/react/containerLifeCycle.ts
index d1951d8e2..000355b7d 100644
--- a/packages/code-generator/src/plugins/component/react/containerLifeCycle.ts
+++ b/packages/code-generator/src/plugins/component/react/containerLifeCycle.ts
@@ -1,28 +1,23 @@
 import { CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
 import { REACT_CHUNK_NAME } from './const';
 
-import {
-  getFuncExprBody,
-  transformFuncExpr2MethodMember,
-} from '../../../utils/jsExpression';
+import { generateFunction } from '../../../utils/jsExpression';
 
 import {
   BuilderComponentPlugin,
   BuilderComponentPluginFactory,
   ChunkType,
-  CodeGeneratorError,
   FileType,
   ICodeChunk,
   ICodeStruct,
   IContainerInfo,
-  IJSExpression,
 } from '../../../types';
 
 type PluginConfig = {
   fileType: string;
   exportNameMapping: Record<string, string>;
   normalizeNameMapping: Record<string, string>;
-}
+};
 
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
   const cfg: PluginConfig = {
@@ -41,7 +36,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
 
     if (ir.lifeCycles) {
       const lifeCycles = ir.lifeCycles;
-      const chunks = Object.keys(lifeCycles).map<ICodeChunk>(lifeCycleName => {
+      const chunks = Object.keys(lifeCycles).map<ICodeChunk>((lifeCycleName) => {
         const normalizeName = cfg.normalizeNameMapping[lifeCycleName] || lifeCycleName;
         const exportName = cfg.exportNameMapping[lifeCycleName] || lifeCycleName;
         if (normalizeName === 'constructor') {
@@ -49,9 +44,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
             type: ChunkType.STRING,
             fileType: cfg.fileType,
             name: CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
-            content: getFuncExprBody(
-              (lifeCycles[lifeCycleName] as IJSExpression).value,
-            ),
+            content: generateFunction(lifeCycles[lifeCycleName], { isBlock: true }),
             linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.ConstructorStart]],
           };
         }
@@ -60,9 +53,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
             type: ChunkType.STRING,
             fileType: cfg.fileType,
             name: REACT_CHUNK_NAME.ClassRenderPre,
-            content: getFuncExprBody(
-              (lifeCycles[lifeCycleName] as IJSExpression).value,
-            ),
+            content: generateFunction(lifeCycles[lifeCycleName], { isBlock: true }),
             linkAfter: [REACT_CHUNK_NAME.ClassRenderStart],
           };
         }
@@ -71,15 +62,12 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
           type: ChunkType.STRING,
           fileType: cfg.fileType,
           name: CLASS_DEFINE_CHUNK_NAME.InsMethod,
-          content: transformFuncExpr2MethodMember(
-            exportName,
-            (lifeCycles[lifeCycleName] as IJSExpression).value,
-          ),
+          content: generateFunction(lifeCycles[lifeCycleName], { name: exportName, isMember: true }),
           linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsMethod]],
         };
       });
 
-      next.chunks.push.apply(next.chunks, chunks);
+      next.chunks.push(...chunks);
     }
 
     return next;
diff --git a/packages/code-generator/src/plugins/component/react/containerMethod.ts b/packages/code-generator/src/plugins/component/react/containerMethod.ts
index 9bba467da..148f2cffd 100644
--- a/packages/code-generator/src/plugins/component/react/containerMethod.ts
+++ b/packages/code-generator/src/plugins/component/react/containerMethod.ts
@@ -1,6 +1,6 @@
 import { CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
 
-import { transformFuncExpr2MethodMember } from '../../../utils/jsExpression';
+import { generateFunction } from '../../../utils/jsExpression';
 
 import {
   BuilderComponentPlugin,
@@ -10,12 +10,11 @@ import {
   ICodeChunk,
   ICodeStruct,
   IContainerInfo,
-  IJSExpression,
 } from '../../../types';
 
 type PluginConfig = {
   fileType: string;
-}
+};
 
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
   const cfg: PluginConfig = {
@@ -32,18 +31,15 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
 
     if (ir.methods) {
       const methods = ir.methods;
-      const chunks = Object.keys(methods).map<ICodeChunk>(methodName => ({
+      const chunks = Object.keys(methods).map<ICodeChunk>((methodName) => ({
         type: ChunkType.STRING,
         fileType: cfg.fileType,
         name: CLASS_DEFINE_CHUNK_NAME.InsMethod,
-        content: transformFuncExpr2MethodMember(
-          methodName,
-          (methods[methodName] as IJSExpression).value,
-        ),
+        content: generateFunction(methods[methodName], { name: methodName, isMember: true }),
         linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsMethod]],
       }));
 
-      next.chunks.push.apply(next.chunks, chunks);
+      next.chunks.push(...chunks);
     }
 
     return next;
diff --git a/packages/code-generator/src/plugins/component/react/jsx.ts b/packages/code-generator/src/plugins/component/react/jsx.ts
index bb6b8f383..54fa32782 100644
--- a/packages/code-generator/src/plugins/component/react/jsx.ts
+++ b/packages/code-generator/src/plugins/component/react/jsx.ts
@@ -12,16 +12,18 @@ import { REACT_CHUNK_NAME } from './const';
 import { createReactNodeGenerator } from '../../../utils/nodeToJSX';
 
 type PluginConfig = {
-  fileType: string;
-}
+  fileType?: string;
+  nodeTypeMapping?: Record<string, string>;
+};
 
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
-  const cfg: PluginConfig = {
+  const cfg = {
     fileType: FileType.JSX,
+    nodeTypeMapping: {},
     ...config,
   };
 
-  const generator = createReactNodeGenerator();
+  const generator = createReactNodeGenerator({ nodeTypeMapping: cfg.nodeTypeMapping });
 
   const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
     const next: ICodeStruct = {
@@ -36,10 +38,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       fileType: cfg.fileType,
       name: REACT_CHUNK_NAME.ClassRenderJSX,
       content: `return ${jsxContent};`,
-      linkAfter: [
-        REACT_CHUNK_NAME.ClassRenderStart,
-        REACT_CHUNK_NAME.ClassRenderPre,
-      ],
+      linkAfter: [REACT_CHUNK_NAME.ClassRenderStart, REACT_CHUNK_NAME.ClassRenderPre],
     });
 
     return next;
diff --git a/packages/code-generator/src/plugins/component/recore/const.ts b/packages/code-generator/src/plugins/component/recore/const.ts
deleted file mode 100644
index b848f42aa..000000000
--- a/packages/code-generator/src/plugins/component/recore/const.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const RECORE_CHUNK_NAME = {
-
-};
diff --git a/packages/code-generator/src/plugins/component/recore/pageDataSource.ts b/packages/code-generator/src/plugins/component/recore/pageDataSource.ts
index 87d496aaf..23e24deeb 100644
--- a/packages/code-generator/src/plugins/component/recore/pageDataSource.ts
+++ b/packages/code-generator/src/plugins/component/recore/pageDataSource.ts
@@ -1,3 +1,5 @@
+import { JSExpression, CompositeValue } from '@ali/lowcode-types';
+
 import { CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
 
 import {
@@ -7,15 +9,13 @@ import {
   FileType,
   ICodeStruct,
   IContainerInfo,
-  IJSExpression,
-  CompositeValue,
 } from '../../../types';
 
-import { generateCompositeType, handleStringValueDefault } from '../../../utils/compositeType';
+import { generateCompositeType } from '../../../utils/compositeType';
 import { generateExpression } from '../../../utils/jsExpression';
 
 function packJsExpression(exp: unknown): string {
-  const expression = exp as IJSExpression;
+  const expression = exp as JSExpression;
   const funcStr = generateExpression(expression);
   return `function() { return (${funcStr}); }`;
 }
@@ -29,25 +29,15 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
     const ir = next.ir as IContainerInfo;
     if (ir.dataSource) {
       const { dataSource } = ir;
-      const {
-        list,
-        ...rest
-      } = dataSource;
+      const { list } = dataSource;
+      const attrs: string[] = [];
 
-      let attrs: string[] = [];
-
-      const extConfigs = Object.keys(rest).map(extConfigName => {
-        const value = (rest as Record<string, CompositeValue>)[extConfigName];
-        const [isString, valueStr] = generateCompositeType(value);
-        return `${extConfigName}: ${isString ? `'${valueStr}'` : valueStr}`;
+      const listProp = generateCompositeType((list as unknown) as CompositeValue, {
+        handlers: {
+          expression: packJsExpression,
+        },
       });
 
-      attrs = [...attrs, ...extConfigs];
-
-      const listProp = handleStringValueDefault(generateCompositeType(list as unknown as CompositeValue, {
-        expression: packJsExpression,
-      }));
-
       attrs.push(`list: ${listProp}`);
 
       next.chunks.push({
diff --git a/packages/code-generator/src/plugins/component/recore/pageVmBody.ts b/packages/code-generator/src/plugins/component/recore/pageVmBody.ts
index 8660ad195..4251bdfb7 100644
--- a/packages/code-generator/src/plugins/component/recore/pageVmBody.ts
+++ b/packages/code-generator/src/plugins/component/recore/pageVmBody.ts
@@ -1,31 +1,35 @@
+import { NodeSchema } from '@ali/lowcode-types';
+
 import {
   BuilderComponentPlugin,
   BuilderComponentPluginFactory,
   ChunkType,
   ICodeStruct,
   IContainerInfo,
-  IComponentNodeItem,
+  INodeGeneratorContext,
   CodePiece,
   PIECE_TYPE,
 } from '../../../types';
-import { COMMON_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
+import { COMMON_CHUNK_NAME } from '../../../const/generator';
 
 import { createNodeGenerator, generateString } from '../../../utils/nodeToJSX';
 import { generateExpression } from '../../../utils/jsExpression';
-import { generateCompositeType, handleStringValueDefault } from '../../../utils/compositeType';
+import { generateCompositeType } from '../../../utils/compositeType';
 
-const generateGlobalProps = (nodeItem: IComponentNodeItem): CodePiece[] => {
-  return [{
-    value: `{...globalProps.${nodeItem.componentName}}`,
-    type: PIECE_TYPE.ATTR,
-  }];
+const generateGlobalProps = (ctx: INodeGeneratorContext, nodeItem: NodeSchema): CodePiece[] => {
+  return [
+    {
+      value: `{...globalProps.${nodeItem.componentName}}`,
+      type: PIECE_TYPE.ATTR,
+    },
+  ];
 };
 
-const generateCtrlLine = (nodeItem: IComponentNodeItem): CodePiece[] => {
+const generateCtrlLine = (ctx: INodeGeneratorContext, nodeItem: NodeSchema): CodePiece[] => {
   const pieces: CodePiece[] = [];
 
   if (nodeItem.loop && nodeItem.loopArgs) {
-    const loopDataExp = handleStringValueDefault(generateCompositeType(nodeItem.loop));
+    const loopDataExp = generateCompositeType(nodeItem.loop);
     pieces.push({
       type: PIECE_TYPE.ATTR,
       value: `x-for={${loopDataExp}}`,
@@ -38,7 +42,7 @@ const generateCtrlLine = (nodeItem: IComponentNodeItem): CodePiece[] => {
   }
 
   if (nodeItem.condition) {
-    const conditionExp = handleStringValueDefault(generateCompositeType(nodeItem.condition));
+    const conditionExp = generateCompositeType(nodeItem.condition);
     pieces.push({
       type: PIECE_TYPE.ATTR,
       value: `x-if={${conditionExp}}`,
@@ -49,13 +53,13 @@ const generateCtrlLine = (nodeItem: IComponentNodeItem): CodePiece[] => {
 };
 
 const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
-  const generator = createNodeGenerator({
-    string: generateString,
-    expression: (input) => [generateExpression(input)],
-  }, [
-    generateGlobalProps,
-    generateCtrlLine,
-  ]);
+  const generator = createNodeGenerator(
+    {
+      string: generateString,
+      expression: (input) => [generateExpression(input)],
+    },
+    [generateGlobalProps, generateCtrlLine],
+  );
 
   const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
     const next: ICodeStruct = {
diff --git a/packages/code-generator/src/plugins/project/constants.ts b/packages/code-generator/src/plugins/project/constants.ts
index 5c02e9711..d274499b4 100644
--- a/packages/code-generator/src/plugins/project/constants.ts
+++ b/packages/code-generator/src/plugins/project/constants.ts
@@ -17,7 +17,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
 
     const ir = next.ir as IProjectInfo;
     if (ir.constants) {
-      const [, constantStr] = generateCompositeType(ir.constants);
+      const constantStr = generateCompositeType(ir.constants);
 
       next.chunks.push({
         type: ChunkType.STRING,
@@ -26,10 +26,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
         content: `
           const constantConfig = ${constantStr};
         `,
-        linkAfter: [
-          COMMON_CHUNK_NAME.ExternalDepsImport,
-          COMMON_CHUNK_NAME.InternalDepsImport,
-        ],
+        linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport, COMMON_CHUNK_NAME.InternalDepsImport],
       });
 
       next.chunks.push({
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/plugins/packageJSON.ts b/packages/code-generator/src/plugins/project/framework/icejs/plugins/packageJSON.ts
index a79dc3481..da01681f3 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/plugins/packageJSON.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/plugins/packageJSON.ts
@@ -1,3 +1,5 @@
+import { PackageJSON } from '@ali/lowcode-types';
+
 import { COMMON_CHUNK_NAME } from '../../../../../const/generator';
 
 import {
@@ -6,11 +8,10 @@ import {
   ChunkType,
   FileType,
   ICodeStruct,
-  IPackageJSON,
   IProjectInfo,
 } from '../../../../../types';
 
-interface IIceJsPackageJSON extends IPackageJSON {
+interface IIceJsPackageJSON extends PackageJSON {
   ideMode: {
     name: string;
   };
@@ -73,6 +74,8 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       originTemplate: '@alifd/scaffold-lite-js',
     };
 
+    ir.packages.forEach((packageInfo) => (packageJson.dependencies[packageInfo.package] = packageInfo.version));
+
     next.chunks.push({
       type: ChunkType.JSON,
       fileType: FileType.JSON,
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/README.md.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/README.md.ts
index c5a268127..1fb96bec0 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/README.md.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/README.md.ts
@@ -1,8 +1,8 @@
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'README',
     'md',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/abc.json.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/abc.json.ts
index 9b99a2185..0f9e8a532 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/abc.json.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/abc.json.ts
@@ -1,17 +1,17 @@
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
-    'abc',
-    'json',
-    `
+export default function getFile(): [string[], ResultFile] {
+  return [
+    [],
+    {
+      name: 'abc',
+      ext: 'json',
+      content: `
 {
   "type": "ice-app",
   "builder": "@ali/builder-ice-app"
 }
     `,
-  );
-
-  return [[], file];
+    },
+  ];
 }
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/build.json.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/build.json.ts
index b30c7c58f..533aea2ad 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/build.json.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/build.json.ts
@@ -1,11 +1,12 @@
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
-    'build',
-    'json',
-    `
+export default function getFile(): [string[], ResultFile] {
+  return [
+    [],
+    {
+      name: 'build',
+      ext: 'json',
+      content: `
 {
   "entry": "src/app.js",
   "plugins": [
@@ -26,8 +27,7 @@ export default function getFile(): [string[], IResultFile] {
     "@ali/build-plugin-ice-def"
   ]
 }
-    `,
-  );
-
-  return [[], file];
+      `,
+    },
+  ];
 }
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/editorconfig.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/editorconfig.ts
index 14876b397..bf80464dd 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/editorconfig.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/editorconfig.ts
@@ -1,8 +1,8 @@
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     '.editorconfig',
     '',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/eslintignore.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/eslintignore.ts
index 8f6f68e1f..a26db9de1 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/eslintignore.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/eslintignore.ts
@@ -1,8 +1,8 @@
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     '.eslintignore',
     '',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/eslintrc.js.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/eslintrc.js.ts
index ad7ce4480..733c3e174 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/eslintrc.js.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/eslintrc.js.ts
@@ -1,8 +1,8 @@
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     '.eslintrc',
     'js',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/gitignore.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/gitignore.ts
index e7bed2e9e..408a93205 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/gitignore.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/gitignore.ts
@@ -1,8 +1,8 @@
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     '.gitignore',
     '',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/jsconfig.json.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/jsconfig.json.ts
index f5b5e9fa2..cde81c77f 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/jsconfig.json.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/jsconfig.json.ts
@@ -1,8 +1,8 @@
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'jsconfig',
     'json',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/prettierignore.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/prettierignore.ts
index f6d2e9ed2..6206dca28 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/prettierignore.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/prettierignore.ts
@@ -1,8 +1,8 @@
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     '.prettierignore',
     '',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/prettierrc.js.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/prettierrc.js.ts
index 66531c8dc..1793891ed 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/prettierrc.js.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/prettierrc.js.ts
@@ -1,8 +1,8 @@
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     '.prettierrc',
     'js',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/Footer/index.jsx.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/Footer/index.jsx.ts
index 639337aa5..131728077 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/Footer/index.jsx.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/Footer/index.jsx.ts
@@ -1,8 +1,8 @@
-import ResultFile from '../../../../../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'index',
     'jsx',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/Footer/index.module.scss.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/Footer/index.module.scss.ts
index cb57ac646..5093a4cf9 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/Footer/index.module.scss.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/Footer/index.module.scss.ts
@@ -1,8 +1,8 @@
-import ResultFile from '../../../../../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'index',
     'module.scss',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/Logo/index.jsx.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/Logo/index.jsx.ts
index cef5376ae..efb8377ed 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/Logo/index.jsx.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/Logo/index.jsx.ts
@@ -1,8 +1,8 @@
-import ResultFile from '../../../../../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'index',
     'jsx',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/Logo/index.module.scss.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/Logo/index.module.scss.ts
index 6969595e6..ebbf1e453 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/Logo/index.module.scss.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/Logo/index.module.scss.ts
@@ -1,8 +1,8 @@
-import ResultFile from '../../../../../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'index',
     'module.scss',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/PageNav/index.jsx.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/PageNav/index.jsx.ts
index b722e6695..302d16d71 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/PageNav/index.jsx.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/components/PageNav/index.jsx.ts
@@ -1,8 +1,8 @@
-import ResultFile from '../../../../../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'index',
     'jsx',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/index.jsx.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/index.jsx.ts
index 6f7cd7b92..8a97f76d8 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/index.jsx.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/index.jsx.ts
@@ -1,8 +1,8 @@
-import ResultFile from '../../../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'index',
     'jsx',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/menuConfig.js.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/menuConfig.js.ts
index 70ed04738..12b18285b 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/menuConfig.js.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/src/layouts/BasicLayout/menuConfig.js.ts
@@ -1,8 +1,8 @@
-import ResultFile from '../../../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'menuConfig',
     'js',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/stylelintignore.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/stylelintignore.ts
index 5d369298a..1e7ccc9b3 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/stylelintignore.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/stylelintignore.ts
@@ -1,8 +1,8 @@
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     '.stylelintignore',
     '',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/stylelintrc.js.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/stylelintrc.js.ts
index 7ed60d2c9..12052b1e1 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/stylelintrc.js.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/stylelintrc.js.ts
@@ -1,8 +1,8 @@
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     '.stylelintrc',
     'js',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/files/tsconfig.json.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/files/tsconfig.json.ts
index 4b8aab7ed..e99b00d06 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/files/tsconfig.json.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/files/tsconfig.json.ts
@@ -1,8 +1,8 @@
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'tsconfig',
     'json',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/template/index.ts b/packages/code-generator/src/plugins/project/framework/icejs/template/index.ts
index d048bd389..e6469a67e 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/template/index.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/template/index.ts
@@ -1,8 +1,7 @@
-import ResultDir from '../../../../../model/ResultDir';
-import {
-  IProjectTemplate,
-  IResultDir,
-} from '../../../../../types';
+import { ResultDir } from '@ali/lowcode-types';
+import { IProjectTemplate } from '../../../../../types';
+
+import { createResultDir } from '../../../../../utils/resultHelper';
 import { runFileGenerator } from '../../../../../utils/templateHelper';
 
 import file12 from './files/abc.json';
@@ -68,8 +67,8 @@ const icejsTemplate: IProjectTemplate = {
     },
   },
 
-  generateTemplate(): IResultDir {
-    const root = new ResultDir('.');
+  generateTemplate(): ResultDir {
+    const root = createResultDir('.');
 
     runFileGenerator(root, file1);
     runFileGenerator(root, file2);
diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/.editorconfig.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/.editorconfig.ts
index 737b32b80..ace9684f8 100644
--- a/packages/code-generator/src/plugins/project/framework/recore/template/files/.editorconfig.ts
+++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/.editorconfig.ts
@@ -1,9 +1,8 @@
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     '.editorconfig',
     '',
     `
@@ -29,4 +28,3 @@ trim_trailing_whitespace = false
 
   return [[], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/.eslintignore.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/.eslintignore.ts
index 42c1be15c..bb64b9a7e 100644
--- a/packages/code-generator/src/plugins/project/framework/recore/template/files/.eslintignore.ts
+++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/.eslintignore.ts
@@ -1,9 +1,9 @@
 
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     '.eslintignore',
     '',
     `
@@ -23,4 +23,3 @@ packages/solution
 
   return [[], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/.gitignore.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/.gitignore.ts
index fd89e80eb..cd625e88a 100644
--- a/packages/code-generator/src/plugins/project/framework/recore/template/files/.gitignore.ts
+++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/.gitignore.ts
@@ -1,9 +1,8 @@
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     '.gitignore',
     '',
     `
@@ -54,4 +53,3 @@ Thumbs.db
 
   return [[], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/.prettierrc.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/.prettierrc.ts
index 19cd24fbc..0b1834cea 100644
--- a/packages/code-generator/src/plugins/project/framework/recore/template/files/.prettierrc.ts
+++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/.prettierrc.ts
@@ -1,9 +1,8 @@
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     '.prettierrc',
     '',
     `
@@ -19,4 +18,3 @@ export default function getFile(): [string[], IResultFile] {
 
   return [[], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/README.md.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/README.md.ts
index f90fd7d87..546c38812 100644
--- a/packages/code-generator/src/plugins/project/framework/recore/template/files/README.md.ts
+++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/README.md.ts
@@ -1,9 +1,8 @@
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'README',
     'md',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/abc.json.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/abc.json.ts
index b7523b5f9..7680835ea 100644
--- a/packages/code-generator/src/plugins/project/framework/recore/template/files/abc.json.ts
+++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/abc.json.ts
@@ -1,9 +1,8 @@
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'abc',
     'json',
     `
@@ -25,4 +24,3 @@ export default function getFile(): [string[], IResultFile] {
 
   return [[], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/build.json.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/build.json.ts
index 08c1ab78a..8133434fd 100644
--- a/packages/code-generator/src/plugins/project/framework/recore/template/files/build.json.ts
+++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/build.json.ts
@@ -1,9 +1,8 @@
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'build',
     'json',
     `
@@ -29,4 +28,3 @@ export default function getFile(): [string[], IResultFile] {
 
   return [[], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/package.json.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/package.json.ts
index d8da2daaa..f6c1cc573 100644
--- a/packages/code-generator/src/plugins/project/framework/recore/template/files/package.json.ts
+++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/package.json.ts
@@ -1,9 +1,8 @@
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'package',
     'json',
     `
@@ -63,4 +62,3 @@ export default function getFile(): [string[], IResultFile] {
 
   return [[], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/public/index.html.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/public/index.html.ts
index af229a7e0..e81328b1a 100644
--- a/packages/code-generator/src/plugins/project/framework/recore/template/files/public/index.html.ts
+++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/public/index.html.ts
@@ -1,9 +1,8 @@
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../../utils/resultHelper';
 
-import ResultFile from '../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'index',
     'html',
     `
@@ -48,4 +47,3 @@ export default function getFile(): [string[], IResultFile] {
 
   return [['public'], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/app.ts.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/app.ts.ts
index 784662e28..6cb5605bc 100644
--- a/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/app.ts.ts
+++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/app.ts.ts
@@ -1,9 +1,8 @@
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../../../utils/resultHelper';
 
-import ResultFile from '../../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'app',
     'ts',
     `
@@ -72,6 +71,5 @@ export default {
     `,
   );
 
-  return [['src','config'], file];
+  return [['src', 'config'], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/components.ts.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/components.ts.ts
index c894e92aa..db9f218e6 100644
--- a/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/components.ts.ts
+++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/components.ts.ts
@@ -1,15 +1,14 @@
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../../../utils/resultHelper';
 
-import ResultFile from '../../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'components',
     'ts',
     `
 /**
  * 乐高组件
- */ 
+ */
 import Div from '@ali/vc-div/build/view';
 import Text from '@ali/vc-text/build/view';
 import Slot from '@ali/vc-slot/build/view';
@@ -38,6 +37,5 @@ export default componentsMap;
     `,
   );
 
-  return [['src','config'], file];
+  return [['src', 'config'], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/utils.ts.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/utils.ts.ts
index 84237ae1d..7ed9659e0 100644
--- a/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/utils.ts.ts
+++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/utils.ts.ts
@@ -1,9 +1,8 @@
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../../../utils/resultHelper';
 
-import ResultFile from '../../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'utils',
     'ts',
     `
@@ -24,6 +23,5 @@ export default {
     `,
   );
 
-  return [['src','config'], file];
+  return [['src', 'config'], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/src/index.ts.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/src/index.ts.ts
index 979b85a20..bbcad9a1e 100644
--- a/packages/code-generator/src/plugins/project/framework/recore/template/files/src/index.ts.ts
+++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/src/index.ts.ts
@@ -1,9 +1,8 @@
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../../utils/resultHelper';
 
-import ResultFile from '../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'index',
     'ts',
     `
@@ -98,4 +97,3 @@ app.run();
 
   return [['src'], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/src/router.ts.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/src/router.ts.ts
index 78d1fff61..a183467c9 100644
--- a/packages/code-generator/src/plugins/project/framework/recore/template/files/src/router.ts.ts
+++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/src/router.ts.ts
@@ -1,9 +1,8 @@
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../../utils/resultHelper';
 
-import ResultFile from '../../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'router',
     'ts',
     `
diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/tsconfig.json.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/tsconfig.json.ts
index c30c3e46b..c777f1863 100644
--- a/packages/code-generator/src/plugins/project/framework/recore/template/files/tsconfig.json.ts
+++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/tsconfig.json.ts
@@ -1,9 +1,8 @@
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'tsconfig',
     'json',
     `
@@ -50,4 +49,3 @@ export default function getFile(): [string[], IResultFile] {
 
   return [[], file];
 }
-  
\ No newline at end of file
diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/index.ts b/packages/code-generator/src/plugins/project/framework/recore/template/index.ts
index 1fd9565b9..04bd9fe83 100644
--- a/packages/code-generator/src/plugins/project/framework/recore/template/index.ts
+++ b/packages/code-generator/src/plugins/project/framework/recore/template/index.ts
@@ -1,8 +1,6 @@
-import ResultDir from '../../../../../model/ResultDir';
-import {
-  IProjectTemplate,
-  IResultDir,
-} from '../../../../../types';
+import { ResultDir } from '@ali/lowcode-types';
+import { IProjectTemplate } from '../../../../../types';
+import { createResultDir } from '../../../../../utils/resultHelper';
 import { runFileGenerator } from '../../../../../utils/templateHelper';
 
 import file1 from './files/abc.json';
@@ -28,8 +26,8 @@ const icejsTemplate: IProjectTemplate = {
     },
   },
 
-  generateTemplate(): IResultDir {
-    const root = new ResultDir('.');
+  generateTemplate(): ResultDir {
+    const root = createResultDir('.');
 
     runFileGenerator(root, file1);
     runFileGenerator(root, file2);
diff --git a/packages/code-generator/src/plugins/project/i18n.ts b/packages/code-generator/src/plugins/project/i18n.ts
index cada1fd96..4e4675a04 100644
--- a/packages/code-generator/src/plugins/project/i18n.ts
+++ b/packages/code-generator/src/plugins/project/i18n.ts
@@ -17,7 +17,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
 
     const ir = next.ir as IProjectInfo;
     if (ir.i18n) {
-      const [, i18nStr] = generateCompositeType(ir.i18n);
+      const i18nStr = generateCompositeType(ir.i18n);
 
       next.chunks.push({
         type: ChunkType.STRING,
diff --git a/packages/code-generator/src/publisher/disk/index.ts b/packages/code-generator/src/publisher/disk/index.ts
index b63649ab9..71668ae25 100644
--- a/packages/code-generator/src/publisher/disk/index.ts
+++ b/packages/code-generator/src/publisher/disk/index.ts
@@ -1,10 +1,5 @@
-import {
-  IResultDir,
-  PublisherFactory,
-  IPublisher,
-  IPublisherFactoryParams,
-  PublisherError,
-} from '../../types';
+import { ResultDir } from '@ali/lowcode-types';
+import { PublisherFactory, IPublisher, IPublisherFactoryParams, PublisherError } from '../../types';
 import { writeFolder } from './utils';
 
 export interface IDiskFactoryParams extends IPublisherFactoryParams {
@@ -18,19 +13,18 @@ export interface IDiskPublisher extends IPublisher<IDiskFactoryParams, string> {
   setOutputPath: (path: string) => void;
 }
 
-export const createDiskPublisher: PublisherFactory<
-  IDiskFactoryParams,
-  IDiskPublisher
-> = (params: IDiskFactoryParams = {}): IDiskPublisher => {
+export const createDiskPublisher: PublisherFactory<IDiskFactoryParams, IDiskPublisher> = (
+  params: IDiskFactoryParams = {},
+): IDiskPublisher => {
   let { project, outputPath = './' } = params;
 
-  const getProject = (): IResultDir => {
+  const getProject = (): ResultDir => {
     if (!project) {
       throw new PublisherError('Missing Project');
     }
     return project;
   };
-  const setProject = (projectToSet: IResultDir): void => {
+  const setProject = (projectToSet: ResultDir): void => {
     project = projectToSet;
   };
 
@@ -49,19 +43,14 @@ export const createDiskPublisher: PublisherFactory<
 
     const projectOutputPath = options.outputPath || outputPath;
     const overrideProjectSlug = options.projectSlug || params.projectSlug;
-    const createProjectFolder =
-      options.createProjectFolder || params.createProjectFolder;
+    const createProjectFolder = options.createProjectFolder || params.createProjectFolder;
 
     if (overrideProjectSlug) {
       projectToPublish.name = overrideProjectSlug;
     }
 
     try {
-      await writeFolder(
-        projectToPublish,
-        projectOutputPath,
-        createProjectFolder,
-      );
+      await writeFolder(projectToPublish, projectOutputPath, createProjectFolder);
       return { success: true, payload: projectOutputPath };
     } catch (error) {
       throw new PublisherError(error);
diff --git a/packages/code-generator/src/publisher/disk/utils.ts b/packages/code-generator/src/publisher/disk/utils.ts
index 35fbbc2ad..a3535e552 100644
--- a/packages/code-generator/src/publisher/disk/utils.ts
+++ b/packages/code-generator/src/publisher/disk/utils.ts
@@ -1,36 +1,27 @@
 import { existsSync, mkdir, writeFile } from 'fs';
 import { join } from 'path';
-
-import { IResultDir, IResultFile } from '../../types';
+import { ResultDir, ResultFile } from '@ali/lowcode-types';
 
 export const writeFolder = async (
-  folder: IResultDir,
+  folder: ResultDir,
   currentPath: string,
   createProjectFolder = true,
 ): Promise<void> => {
   const { name, files, dirs } = folder;
 
-  const folderPath = createProjectFolder
-    ? join(currentPath, name)
-    : currentPath;
+  const folderPath = createProjectFolder ? join(currentPath, name) : currentPath;
 
   if (!existsSync(folderPath)) {
     await createDirectory(folderPath);
   }
 
-  const promises = [
-    writeFilesToFolder(folderPath, files),
-    writeSubFoldersToFolder(folderPath, dirs),
-  ];
+  const promises = [writeFilesToFolder(folderPath, files), writeSubFoldersToFolder(folderPath, dirs)];
 
   await Promise.all(promises);
 };
 
-const writeFilesToFolder = async (
-  folderPath: string,
-  files: IResultFile[],
-): Promise<void> => {
-  const promises = files.map(file => {
+const writeFilesToFolder = async (folderPath: string, files: ResultFile[]): Promise<void> => {
+  const promises = files.map((file) => {
     const fileName = file.ext ? `${file.name}.${file.ext}` : file.name;
     const filePath = join(folderPath, fileName);
     return writeContentToFile(filePath, file.content);
@@ -39,11 +30,8 @@ const writeFilesToFolder = async (
   await Promise.all(promises);
 };
 
-const writeSubFoldersToFolder = async (
-  folderPath: string,
-  subFolders: IResultDir[],
-): Promise<void> => {
-  const promises = subFolders.map(subFolder => {
+const writeSubFoldersToFolder = async (folderPath: string, subFolders: ResultDir[]): Promise<void> => {
+  const promises = subFolders.map((subFolder) => {
     return writeFolder(subFolder, folderPath);
   });
 
@@ -52,19 +40,15 @@ const writeSubFoldersToFolder = async (
 
 const createDirectory = (pathToDir: string): Promise<void> => {
   return new Promise((resolve, reject) => {
-    mkdir(pathToDir, { recursive: true }, err => {
+    mkdir(pathToDir, { recursive: true }, (err) => {
       err ? reject(err) : resolve();
     });
   });
 };
 
-const writeContentToFile = (
-  filePath: string,
-  fileContent: string,
-  encoding: string = 'utf8',
-): Promise<void> => {
+const writeContentToFile = (filePath: string, fileContent: string, encoding = 'utf8'): Promise<void> => {
   return new Promise((resolve, reject) => {
-    writeFile(filePath, fileContent, encoding, err => {
+    writeFile(filePath, fileContent, encoding, (err) => {
       err ? reject(err) : resolve();
     });
   });
diff --git a/packages/code-generator/src/publisher/zip/index.ts b/packages/code-generator/src/publisher/zip/index.ts
index c400c6849..2048a54cf 100644
--- a/packages/code-generator/src/publisher/zip/index.ts
+++ b/packages/code-generator/src/publisher/zip/index.ts
@@ -1,11 +1,6 @@
-import {
-  IResultDir,
-  PublisherFactory,
-  IPublisher,
-  IPublisherFactoryParams,
-  PublisherError,
-} from '../../types';
-import { isNodeProcess, writeZipToDisk, generateProjectZip } from './utils'
+import { ResultDir } from '@ali/lowcode-types';
+import { PublisherFactory, IPublisher, IPublisherFactoryParams, PublisherError } from '../../types';
+import { isNodeProcess, writeZipToDisk, generateProjectZip } from './utils';
 
 // export type ZipBuffer = Buffer | Blob;
 export type ZipBuffer = Buffer;
@@ -28,14 +23,14 @@ export const createZipPublisher: PublisherFactory<ZipFactoryParams, ZipPublisher
   let { project, outputPath } = params;
 
   const getProject = () => project;
-  const setProject = (projectToSet: IResultDir) => {
+  const setProject = (projectToSet: ResultDir) => {
     project = projectToSet;
-  }
+  };
 
   const getOutputPath = () => outputPath;
   const setOutputPath = (path: string) => {
     outputPath = path;
-  }
+  };
 
   const publish = async (options: ZipFactoryParams = {}) => {
     const projectToPublish = options.project || project;
@@ -57,7 +52,7 @@ export const createZipPublisher: PublisherFactory<ZipFactoryParams, ZipPublisher
     } catch (error) {
       throw new PublisherError(error);
     }
-  }
+  };
 
   return {
     publish,
@@ -66,4 +61,4 @@ export const createZipPublisher: PublisherFactory<ZipFactoryParams, ZipPublisher
     getOutputPath,
     setOutputPath,
   };
-}
+};
diff --git a/packages/code-generator/src/publisher/zip/utils.ts b/packages/code-generator/src/publisher/zip/utils.ts
index b7e1100b8..e34bf12c1 100644
--- a/packages/code-generator/src/publisher/zip/utils.ts
+++ b/packages/code-generator/src/publisher/zip/utils.ts
@@ -1,21 +1,17 @@
 import JSZip from 'jszip';
-import { IResultDir, IResultFile } from '../../types';
+import { ResultDir, ResultFile } from '@ali/lowcode-types';
 import { ZipBuffer } from './index';
 
 export const isNodeProcess = (): boolean => {
   return (
-    typeof process === 'object' &&
-    typeof process.versions === 'object' &&
-    typeof process.versions.node !== 'undefined'
+    typeof process === 'object' && typeof process.versions === 'object' && typeof process.versions.node !== 'undefined'
   );
-}
+};
 
-export const writeZipToDisk = (
-  zipFolderPath: string,
-  content: ZipBuffer,
-  zipName: string,
-): void => {
+export const writeZipToDisk = (zipFolderPath: string, content: ZipBuffer, zipName: string): void => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
   const fs = require('fs');
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
   const path = require('path');
 
   if (!fs.existsSync(zipFolderPath)) {
@@ -27,34 +23,30 @@ export const writeZipToDisk = (
   const writeStream = fs.createWriteStream(zipPath);
   writeStream.write(content);
   writeStream.end();
-}
+};
 
-export const generateProjectZip = async (project: IResultDir): Promise<ZipBuffer> => {
+export const generateProjectZip = async (project: ResultDir): Promise<ZipBuffer> => {
   let zip = new JSZip();
   zip = writeFolderToZip(project, zip, true);
   // const zipType = isNodeProcess() ? 'nodebuffer' : 'blob';
   const zipType = 'nodebuffer'; // 目前先只支持 node 调用
   return zip.generateAsync({ type: zipType });
-}
+};
 
-const writeFolderToZip = (
-  folder: IResultDir,
-  parentFolder: JSZip,
-  ignoreFolder: boolean = false,
-) => {
+const writeFolderToZip = (folder: ResultDir, parentFolder: JSZip, ignoreFolder = false) => {
   const zipFolder = ignoreFolder ? parentFolder : parentFolder.folder(folder.name);
   if (zipFolder !== null) {
-    folder.files.forEach((file: IResultFile) => {
+    folder.files.forEach((file: ResultFile) => {
       // const options = file.contentEncoding === 'base64' ? { base64: true } : {};
       const options = {};
       const fileName = file.ext ? `${file.name}.${file.ext}` : file.name;
       zipFolder.file(fileName, file.content, options);
     });
 
-    folder.dirs.forEach((subFolder: IResultDir) => {
+    folder.dirs.forEach((subFolder: ResultDir) => {
       writeFolderToZip(subFolder, zipFolder);
     });
   }
 
   return parentFolder;
-}
+};
diff --git a/packages/code-generator/src/solutions/icejs.ts b/packages/code-generator/src/solutions/icejs.ts
index bfb7e28f8..b1a35052e 100644
--- a/packages/code-generator/src/solutions/icejs.ts
+++ b/packages/code-generator/src/solutions/icejs.ts
@@ -5,7 +5,7 @@ import { createProjectBuilder } from '../generator/ProjectBuilder';
 import esmodule from '../plugins/common/esmodule';
 import containerClass from '../plugins/component/react/containerClass';
 import containerInitState from '../plugins/component/react/containerInitState';
-import containerInjectUtils from '../plugins/component/react/containerInjectUtils';
+// import containerInjectUtils from '../plugins/component/react/containerInjectUtils';
 import containerLifeCycle from '../plugins/component/react/containerLifeCycle';
 import containerMethod from '../plugins/component/react/containerMethod';
 import jsx from '../plugins/component/react/jsx';
@@ -29,11 +29,18 @@ export default function createIceJsProjectBuilder(): IProjectBuilder {
           fileType: 'jsx',
         }),
         containerClass(),
-        containerInjectUtils(),
+        // containerInjectUtils(),
         containerInitState(),
         containerLifeCycle(),
         containerMethod(),
-        jsx(),
+        jsx({
+          nodeTypeMapping: {
+            Div: 'div',
+            Component: 'div',
+            Page: 'div',
+            Block: 'div',
+          },
+        }),
         css(),
       ],
       pages: [
@@ -42,11 +49,19 @@ export default function createIceJsProjectBuilder(): IProjectBuilder {
           fileType: 'jsx',
         }),
         containerClass(),
-        containerInjectUtils(),
+        // containerInjectUtils(),
         containerInitState(),
         containerLifeCycle(),
         containerMethod(),
-        jsx(),
+        jsx({
+          nodeTypeMapping: {
+            Div: 'div',
+            Component: 'div',
+            Page: 'div',
+            Block: 'div',
+            // Box: 'div',
+          },
+        }),
         css(),
       ],
       router: [esmodule(), icejs.plugins.router()],
@@ -58,6 +73,6 @@ export default function createIceJsProjectBuilder(): IProjectBuilder {
       htmlEntry: [icejs.plugins.entryHtml()],
       packageJSON: [icejs.plugins.packageJSON()],
     },
-    postProcessors: [prettier()],
+    postProcessors: [prettier()], // prettier()
   });
 }
diff --git a/packages/code-generator/src/types/core.ts b/packages/code-generator/src/types/core.ts
index a370d5641..22ed008f4 100644
--- a/packages/code-generator/src/types/core.ts
+++ b/packages/code-generator/src/types/core.ts
@@ -1,12 +1,6 @@
-import {
-  IBasicSchema,
-  IParseResult,
-  IProjectSchema,
-  IResultDir,
-  IResultFile,
-  IComponentNodeItem,
-  IJSExpression,
-} from './index';
+import { ResultDir, ResultFile, NodeData, NodeSchema, ProjectSchema, JSExpression } from '@ali/lowcode-types';
+
+import { IParseResult } from './index';
 
 export enum FileType {
   CSS = 'css',
@@ -53,17 +47,12 @@ export interface ICodeStruct extends IBaseCodeStruct {
   chunks: ICodeChunk[];
 }
 
-export type BuilderComponentPlugin = (
-  initStruct: ICodeStruct,
-) => Promise<ICodeStruct>;
+export type BuilderComponentPlugin = (initStruct: ICodeStruct) => Promise<ICodeStruct>;
 
 export type BuilderComponentPluginFactory<T> = (config?: T) => BuilderComponentPlugin;
 
 export interface IChunkBuilder {
-  run(
-    ir: any,
-    initialStructure?: ICodeStruct,
-  ): Promise<{ chunks: ICodeChunk[][] }>;
+  run(ir: any, initialStructure?: ICodeStruct): Promise<{ chunks: ICodeChunk[][] }>;
   getPlugins(): BuilderComponentPlugin[];
   addPlugin(plugin: BuilderComponentPlugin): void;
 }
@@ -74,16 +63,13 @@ export interface ICodeBuilder {
 }
 
 export interface ICompiledModule {
-  files: IResultFile[];
+  files: ResultFile[];
 }
 
 export interface IModuleBuilder {
   generateModule(input: unknown): Promise<ICompiledModule>;
-  generateModuleCode(schema: IBasicSchema | string): Promise<IResultDir>;
-  linkCodeChunks(
-    chunks: Record<string, ICodeChunk[]>,
-    fileName: string,
-  ): IResultFile[];
+  generateModuleCode(schema: ProjectSchema | string): Promise<ResultDir>;
+  linkCodeChunks(chunks: Record<string, ICodeChunk[]>, fileName: string): ResultFile[];
   addPlugin(plugin: BuilderComponentPlugin): void;
 }
 
@@ -97,21 +83,21 @@ export interface ICodeGenerator {
   /**
    * 出码接口，把 Schema 转换成代码文件系统描述
    *
-   * @param {(IBasicSchema)} schema 传入的 Schema
-   * @returns {IResultDir}
+   * @param {(ProjectSchema)} schema 传入的 Schema
+   * @returns {ResultDir}
    * @memberof ICodeGenerator
    */
-  toCode(schema: IBasicSchema): Promise<IResultDir>;
+  toCode(schema: ProjectSchema): Promise<ResultDir>;
 }
 
 export interface ISchemaParser {
-  validate(schema: IBasicSchema): boolean;
-  parse(schema: IBasicSchema | string): IParseResult;
+  validate(schema: ProjectSchema): boolean;
+  parse(schema: ProjectSchema | string): IParseResult;
 }
 
 export interface IProjectTemplate {
   slots: Record<string, IProjectSlot>;
-  generateTemplate(): IResultDir;
+  generateTemplate(): ResultDir;
 }
 
 export interface IProjectSlot {
@@ -119,25 +105,12 @@ export interface IProjectSlot {
   fileName?: string;
 }
 
-// export interface IProjectSlots {
-//   components: IProjectSlot;
-//   pages: IProjectSlot;
-//   router: IProjectSlot;
-//   entry: IProjectSlot;
-//   constants?: IProjectSlot;
-//   utils?: IProjectSlot;
-//   i18n?: IProjectSlot;
-//   globalStyle: IProjectSlot;
-//   htmlEntry: IProjectSlot;
-//   packageJSON: IProjectSlot;
-// }
-
 export interface IProjectPlugins {
   [slotName: string]: BuilderComponentPlugin[];
 }
 
 export interface IProjectBuilder {
-  generateProject(schema: IProjectSchema | string): Promise<IResultDir>;
+  generateProject(schema: ProjectSchema | string): Promise<ResultDir>;
 }
 
 export type PostProcessorFactory<T> = (config?: T) => PostProcessor;
@@ -154,7 +127,7 @@ export enum PIECE_TYPE {
   ATTR = 'NodeCodePieceAttr',
   CHILDREN = 'NodeCodePieceChildren',
   AFTER = 'NodeCodePieceAfter',
-};
+}
 
 export interface CodePiece {
   value: string;
@@ -163,15 +136,41 @@ export interface CodePiece {
 
 export interface HandlerSet<T> {
   string?: (input: string) => T[];
-  expression?: (input: IJSExpression) => T[];
-  node?: (input: IComponentNodeItem) => T[];
+  expression?: (input: JSExpression) => T[];
+  node?: (input: NodeSchema) => T[];
   common?: (input: unknown) => T[];
 }
 
-export type ExtGeneratorPlugin = (nodeItem: IComponentNodeItem) => CodePiece[];
+export type ExtGeneratorPlugin = (ctx: INodeGeneratorContext, nodeItem: NodeSchema) => CodePiece[];
 
-// export interface InteratorScope {
-//   [$item: string]: string;           // $item 默认取值 "item"
-//   [$index: string]: string | number; // $index 默认取值 "index"
-//   __proto__: BlockInstance;
-// }
+export interface INodeGeneratorConfig {
+  nodeTypeMapping?: Record<string, string>;
+}
+
+export type NodeGenerator = (nodeItem: NodeData) => string;
+
+export interface INodeGeneratorContext {
+  generator: NodeGenerator;
+}
+
+export type CompositeValueCustomHandler = (data: unknown) => string;
+export type CompositeTypeContainerHandler = (value: string) => string;
+export interface CompositeValueCustomHandlerSet {
+  boolean?: CompositeValueCustomHandler;
+  number?: CompositeValueCustomHandler;
+  string?: CompositeValueCustomHandler;
+  array?: CompositeValueCustomHandler;
+  object?: CompositeValueCustomHandler;
+  expression?: CompositeValueCustomHandler;
+}
+
+export interface CompositeTypeContainerHandlerSet {
+  default?: CompositeTypeContainerHandler;
+  string?: CompositeValueCustomHandler;
+}
+
+export interface CompositeValueGeneratorOptions {
+  handlers?: CompositeValueCustomHandlerSet;
+  containerHandlers?: CompositeTypeContainerHandlerSet;
+  nodeGenerator?: NodeGenerator;
+}
diff --git a/packages/code-generator/src/types/deps.ts b/packages/code-generator/src/types/deps.ts
index b803aff8f..cb2fb5eac 100644
--- a/packages/code-generator/src/types/deps.ts
+++ b/packages/code-generator/src/types/deps.ts
@@ -1,13 +1,15 @@
+export interface INpmPackage {
+  package: string; // 组件包的名称
+  version: string; // 组件包的版本
+}
+
 /**
  * 外部依赖描述
  *
  * @export
  * @interface IExternalDependency
  */
-export interface IExternalDependency extends IDependency {
-  package: string; // 组件包的名称
-  version: string; // 组件包的版本
-}
+export interface IExternalDependency extends INpmPackage, IDependency {}
 
 export enum InternalDependencyType {
   PAGE = 'pages',
@@ -32,5 +34,5 @@ export interface IDependency {
   subName?: string; // 下标子组件名称
   main?: string; // 包导出组件入口文件路径 /lib/input
   dependencyType?: DependencyType; // 依赖类型 内/外
-  importName?: string; // 导入后名称
+  componentName?: string; // 导入后名称
 }
diff --git a/packages/code-generator/src/types/error.ts b/packages/code-generator/src/types/error.ts
index 8c0393a88..7a19abb12 100644
--- a/packages/code-generator/src/types/error.ts
+++ b/packages/code-generator/src/types/error.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-useless-constructor */
 export class CodeGeneratorError extends Error {
   constructor(message: string) {
     super(message);
@@ -5,21 +6,18 @@ export class CodeGeneratorError extends Error {
   }
 }
 
-// tslint:disable-next-line: max-classes-per-file
 export class ComponentValidationError extends CodeGeneratorError {
   constructor(errorString: string) {
     super(errorString);
   }
 }
 
-// tslint:disable-next-line: max-classes-per-file
 export class CompatibilityError extends CodeGeneratorError {
   constructor(errorString: string) {
     super(errorString);
   }
 }
 
-// tslint:disable-next-line: max-classes-per-file
 export class PublisherError extends CodeGeneratorError {
   constructor(errorString: string) {
     super(errorString);
diff --git a/packages/code-generator/src/types/index.ts b/packages/code-generator/src/types/index.ts
index 102515d43..c7ad3e521 100644
--- a/packages/code-generator/src/types/index.ts
+++ b/packages/code-generator/src/types/index.ts
@@ -1,7 +1,5 @@
 export * from './core';
 export * from './deps';
 export * from './error';
-export * from './result';
-export * from './schema';
 export * from './intermediate';
 export * from './publisher';
diff --git a/packages/code-generator/src/types/intermediate.ts b/packages/code-generator/src/types/intermediate.ts
index 54142dfa0..2c1d3aa38 100644
--- a/packages/code-generator/src/types/intermediate.ts
+++ b/packages/code-generator/src/types/intermediate.ts
@@ -1,32 +1,26 @@
-import {
-  IAppConfig,
-  IAppMeta,
-  IContainerNodeItem,
-  IDependency,
-  II18nMap,
-  IInternalDependency,
-  IUtilItem,
-} from './index';
+import { I18nMap, UtilsMap, ContainerSchema, JSONObject } from '@ali/lowcode-types';
+
+import { IDependency, INpmPackage } from './deps';
 
 export interface IParseResult {
   containers: IContainerInfo[];
   globalUtils?: IUtilInfo;
-  globalI18n?: II18nMap;
+  globalI18n?: I18nMap;
   globalRouter?: IRouterInfo;
   project?: IProjectInfo;
 }
 
-export interface IContainerInfo extends IContainerNodeItem, IWithDependency {
-  containerType: string;
-  moduleName: string;
-}
-
 export interface IWithDependency {
   deps?: IDependency[];
 }
 
+export interface IContainerInfo extends ContainerSchema, IWithDependency {
+  containerType: string;
+  moduleName: string;
+}
+
 export interface IUtilInfo extends IWithDependency {
-  utils: IUtilItem[];
+  utils: UtilsMap;
 }
 
 export interface IRouterInfo extends IWithDependency {
@@ -37,11 +31,10 @@ export interface IRouterInfo extends IWithDependency {
 }
 
 export interface IProjectInfo {
-  config: IAppConfig;
-  meta: IAppMeta;
   css?: string;
-  constants?: Record<string, string>;
-  i18n?: II18nMap;
+  constants?: JSONObject;
+  i18n?: I18nMap;
+  packages: INpmPackage[];
 }
 
 /**
diff --git a/packages/code-generator/src/types/publisher.ts b/packages/code-generator/src/types/publisher.ts
index a632e4d9b..53e4df9fd 100644
--- a/packages/code-generator/src/types/publisher.ts
+++ b/packages/code-generator/src/types/publisher.ts
@@ -1,17 +1,15 @@
-import {
-  IResultDir,
-} from './index';
+import { ResultDir } from '@ali/lowcode-types';
 
 export type PublisherFactory<T, U> = (configuration?: Partial<T>) => U;
 
 export interface IPublisher<T, U> {
   publish: (options?: T) => Promise<IPublisherResponse<U>>;
-  getProject: () => IResultDir | void;
-  setProject: (project: IResultDir) => void;
+  getProject: () => ResultDir | void;
+  setProject: (project: ResultDir) => void;
 }
 
 export interface IPublisherFactoryParams {
-  project?: IResultDir;
+  project?: ResultDir;
 }
 export interface IPublisherResponse<T> {
   success: boolean;
diff --git a/packages/code-generator/src/types/result.ts b/packages/code-generator/src/types/result.ts
deleted file mode 100644
index 75ed7bb1a..000000000
--- a/packages/code-generator/src/types/result.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * 导出内容结构，文件夹
- *
- * @export
- * @interface IResultDir
- */
-export interface IResultDir {
-  /**
-   * 文件夹名称，Root 名称默认为 .
-   *
-   * @type {string}
-   * @memberof IResultDir
-   */
-  name: string;
-  /**
-   * 子目录
-   *
-   * @type {IResultDir[]}
-   * @memberof IResultDir
-   */
-  dirs: IResultDir[];
-  /**
-   * 文件夹内文件
-   *
-   * @type {IResultFile[]}
-   * @memberof IResultDir
-   */
-  files: IResultFile[];
-  /**
-   * 添加文件
-   *
-   * @param {IResultFile} file
-   * @memberof IResultDir
-   */
-  addFile(file: IResultFile): void;
-  /**
-   * 添加子目录
-   *
-   * @param {IResultDir} dir
-   * @memberof IResultDir
-   */
-  addDirectory(dir: IResultDir): void;
-}
-
-/**
- * 导出内容，对文件的描述
- *
- * @export
- * @interface IResultFile
- */
-export interface IResultFile {
-  /**
-   * 文件名
-   *
-   * @type {string}
-   * @memberof IResultFile
-   */
-  name: string;
-  /**
-   * 文件类型扩展名，例如 .js .less
-   *
-   * @type {string}
-   * @memberof IResultFile
-   */
-  ext: string;
-  /**
-   * 文件内容
-   *
-   * @type {string}
-   * @memberof IResultFile
-   */
-  content: string;
-}
-
-export interface IPackageJSON {
-  name: string;
-  version: string;
-  description?: string;
-  dependencies: Record<string, string>;
-  devDependencies: Record<string, string>;
-  scripts?: Record<string, string>;
-  engines?: Record<string, string>;
-  repository?: {
-    type: string;
-    url: string;
-  };
-  private?: boolean;
-}
diff --git a/packages/code-generator/src/types/schema.ts b/packages/code-generator/src/types/schema.ts
deleted file mode 100644
index 68226e8ab..000000000
--- a/packages/code-generator/src/types/schema.ts
+++ /dev/null
@@ -1,226 +0,0 @@
-// 搭建基础协议、搭建入料协议的数据规范
-import { IExternalDependency } from './index';
-
-/**
- * 搭建基础协议 - 函数表达式
- *
- * @export
- * @interface IJSExpression
- */
-export interface IJSExpression {
-  type: 'JSExpression';
-  value: string;
-  [extConfigName: string]: any;
-}
-
-// JSON 基本类型
-export interface IJSONObject {
-  [key: string]: JSONValue;
-}
-
-export type JSONValue =
-  | boolean
-  | string
-  | number
-  | null
-  | JSONArray
-  | IJSONObject;
-export type JSONArray = JSONValue[];
-
-export type CompositeArray = CompositeValue[];
-export interface ICompositeObject {
-  [key: string]: CompositeValue;
-}
-
-// 复合类型
-export type CompositeValue =
-  | JSONValue
-  | IJSExpression
-  | CompositeArray
-  | ICompositeObject;
-
-/**
- * 搭建基础协议 - 多语言描述
- *
- * @export
- * @interface II18nMap
- */
-export interface II18nMap {
-  [lang: string]: {
-    [key: string]: string;
-  };
-}
-
-/**
- * 搭建基础协议
- *
- * @export
- * @interface IBasicSchema
- */
-export interface IBasicSchema {
-  version: string; // 当前协议版本号
-  componentsMap: IComponentsMapItem[]; // 组件映射关系
-  componentsTree: Array<IContainerNodeItem | IComponentNodeItem>; // 描述模版/页面/区块/低代码业务组件的组件树 低代码业务组件树描述，固定长度为1，且顶层为低代码业务组件容器描述
-  utils?: IUtilItem[]; // 工具类扩展映射关系 低代码业务组件不包含
-  i18n?: II18nMap; // 国际化语料
-}
-
-export interface IProjectSchema extends IBasicSchema {
-  constants: Record<string, string>; // 应用范围内的全局常量；
-  css: string; // 应用范围内的全局样式；
-  config: IAppConfig; // 当前应用配置信息
-  meta: IAppMeta; // 当前应用元数据信息
-}
-
-/**
- * 搭建基础协议 - 单个组件描述
- *
- * @export
- * @interface IComponentsMapItem
- */
-export interface IComponentsMapItem extends IExternalDependency {
-  componentName: string; // 组件名称
-}
-
-export interface IUtilItem {
-  name: string;
-  type: 'npm' | 'tnpm' | 'function';
-  content: IExternalDependency | IJSExpression;
-}
-
-export type ChildNodeItem = string | IJSExpression | IComponentNodeItem;
-export type ChildNodeType = ChildNodeItem | ChildNodeItem[];
-
-/**
- * 搭建基础协议 - 单个组件树节点描述
- * 转换成一个 .jsx 文件内 React Class 类 render 函数返回的 jsx 代码
- *
- * @export
- * @interface IComponentNodeItem
- */
-export interface IComponentNodeItem {
-  // TODO: 不需要 id 字段，暂时简单兼容
-  id?: string;
-  componentName: string; // 组件名称 必填、首字母大写
-  props: {
-    [propName: string]: CompositeValue; // 业务属性
-  }; // 组件属性对象
-  condition?: CompositeValue; // 渲染条件
-  loop?: CompositeValue; // 循环数据
-  loopArgs?: [string, string]; // 循环迭代对象、索引名称 ["item", "index"]
-  children?: ChildNodeType; // 子节点
-}
-
-/**
- * 搭建基础协议 - 单个容器节点描述
- *
- * @export
- * @interface IContainerNodeItem
- * @extends {IComponentNodeItem}
- */
-export interface IContainerNodeItem extends IComponentNodeItem {
-  componentName: 'Page' | 'Block' | 'Component'; // 'Page' | 'Block' | 'Component'  组件类型 必填、首字母大写
-  fileName: string; // 文件名称 必填、英文
-  state?: {
-    [stateName: string]: CompositeValue; // 容器初始数据
-  };
-  css?: string; // 样式文件 用于描述容器组件内部节点的样式，对应生成一个独立的样式文件，在对应容器组件生成的 .jsx 文件中 import 引入；
-  /**
-   * LifeCycle
-   * • constructor(props, context)
-   * • 说明：初始化渲染时执行，常用于设置state值；
-   * • render()
-   * • 说明：执行于容器组件React Class的render方法最前，常用于计算变量挂载到this对象上，供props上属性绑定。此render()方法不需要设置return返回值。
-   * • componentDidMount()
-   * • componentDidUpdate(prevProps, prevState, snapshot)
-   * • componentWillUnmount()
-   * • componentDidCatch(error, info)
-   */
-  lifeCycles?: Record<string, IJSExpression>; // 生命周期Hook方法
-  methods?: Record<string, IJSExpression>; // 自定义方法设置
-  dataSource?: {
-    list: IDataSourceConfig[];
-  }; // 异步数据源配置
-  meta?: IBasicMeta | IPageMeta;
-}
-
-/**
- * 搭建基础协议 - 数据源单个配置
- *
- * @export
- * @interface IDataSourceConfig
- */
-export interface IDataSourceConfig {
-  id: string; // 数据请求ID标识
-  isInit: boolean; // 是否为初始数据 支持表达式 值为true时，将在组件初始化渲染时自动发送当前数据请求
-  type: string; // 数据请求类型 'fetch' | 'mtop' | 'jsonp' | 'custom'
-  requestHandler?: IJSExpression; // 自定义扩展的外部请求处理器 仅type='custom'时生效
-  options?: IFetchOptions; // 请求参数配置 每种请求类型对应不同参数
-  dataHandler?: IJSExpression; // 数据结果处理函数，形如：(data, err) => Object
-}
-
-/**
- * 搭建基础协议 - 请求参数配置
- *
- * @export
- * @interface IFetchOptions
- */
-export interface IFetchOptions {
-  url: string; // 请求地址 支持表达式
-  params?: {
-    // 请求参数
-    [key: string]: any;
-  };
-  method: 'GET' | 'POST';
-  isCors?: boolean; // 是否支持跨域，对应credentials = 'include'
-  timeout?: number; // 超时时长
-  headers?: {
-    // 自定义请求头
-    [key: string]: string;
-  };
-  [extConfigName: string]: any;
-}
-
-export interface IBasicMeta {
-  title: string; // 标题描述
-}
-
-export interface IPageMeta extends IBasicMeta {
-  router: string; // 页面路由
-  spmb?: string; // spm
-}
-
-// "theme": {
-//   //for Fusion use dpl defined
-//   "package": "@alife/theme-fusion",
-//   "version": "^0.1.0",
-
-//   //for Antd use variable
-//   "primary": "#ff9966"
-// }
-
-// "layout": {
-//   "componentName": "BasicLayout",
-//   "props": {
-//     "logo": "...",
-//     "name": "测试网站"
-//   },
-// },
-
-export interface IAppConfig {
-  sdkVersion: string; // 渲染模块版本
-  historyMode: 'brower' | 'hash'; // 浏览器路由：brower  哈希路由：hash
-  targetRootID: string; // 渲染根节点 ID
-  layout: IComponentNodeItem;
-  theme: object; // 主题配置，根据接入的主题模块不同
-}
-
-export interface IAppMeta {
-  name: string; // 应用中文名称
-  git_group?: string; // 应用对应git分组名
-  project_name?: string; // 应用对应git的project名称
-  description?: string; // 应用描述
-  spma?: string; // 应用spma A位信息
-  creator?: string; // author
-  [otherAttrName: string]: any;
-}
diff --git a/packages/code-generator/src/utils/common.ts b/packages/code-generator/src/utils/common.ts
index 5e58886bd..5d4619cdb 100644
--- a/packages/code-generator/src/utils/common.ts
+++ b/packages/code-generator/src/utils/common.ts
@@ -22,7 +22,10 @@ export function upperCaseFirst(inputValue: string): string {
   return changeCase.upperCaseFirst(inputValue);
 }
 
-export function uniqueArray<T>(arr: T[]) {
-  const uniqueItems = [...new Set<T>(arr)];
+export function uniqueArray<T>(arr: T[], by: (i: T) => string) {
+  const map: Record<string, T> = {};
+  arr.forEach((item) => (map[by(item)] = item));
+  const uniqueKeys = [...new Set<string>(Object.keys(map))];
+  const uniqueItems = uniqueKeys.map((key) => map[key]);
   return uniqueItems;
 }
diff --git a/packages/code-generator/src/utils/compositeType.ts b/packages/code-generator/src/utils/compositeType.ts
index b62b2afe3..ca85bcbd8 100644
--- a/packages/code-generator/src/utils/compositeType.ts
+++ b/packages/code-generator/src/utils/compositeType.ts
@@ -1,88 +1,109 @@
-import { CompositeArray, CompositeValue, ICompositeObject } from '../types';
-import { generateExpression, isJsExpression } from './jsExpression';
+import {
+  CompositeArray,
+  CompositeValue,
+  CompositeObject,
+  isJSExpression,
+  isJSFunction,
+  isJSSlot,
+} from '@ali/lowcode-types';
 
-type CustomHandler = (data: unknown) => string;
-interface CustomHandlerSet {
-  boolean?: CustomHandler;
-  number?: CustomHandler;
-  string?: CustomHandler;
-  array?: CustomHandler;
-  object?: CustomHandler;
-  expression?: CustomHandler;
-}
+import { CompositeValueGeneratorOptions, CompositeTypeContainerHandlerSet, CodeGeneratorError } from '../types';
 
-function generateArray(
-  value: CompositeArray,
-  handlers: CustomHandlerSet = {},
-): string {
-  const body = value.map(v => generateUnknownType(v, handlers)).join(',');
+import { generateExpression, generateFunction } from './jsExpression';
+import { generateJsSlot } from './jsSlot';
+import { isValidIdentifier } from './validate';
+import { camelize } from './common';
+
+const defaultContainerHandlers: CompositeTypeContainerHandlerSet = {
+  default: (v) => v,
+  string: (v) => `'${v}'`,
+};
+
+function generateArray(value: CompositeArray, options: CompositeValueGeneratorOptions = {}): string {
+  const body = value.map((v) => generateUnknownType(v, options)).join(',');
   return `[${body}]`;
 }
 
-function generateObject(
-  value: ICompositeObject,
-  handlers: CustomHandlerSet = {},
-): string {
-  if (isJsExpression(value)) {
-    if (handlers.expression) {
-      return handlers.expression(value);
+function generateObject(value: CompositeObject, options: CompositeValueGeneratorOptions = {}): string {
+  if (isJSExpression(value)) {
+    if (options.handlers && options.handlers.expression) {
+      return options.handlers.expression(value);
     }
     return generateExpression(value);
   }
 
+  if (isJSFunction(value)) {
+    return generateFunction(value, { isArrow: true });
+  }
+
+  if (isJSSlot(value)) {
+    if (options.nodeGenerator) {
+      return generateJsSlot(value, options.nodeGenerator);
+    }
+    throw new CodeGeneratorError("Can't find Node Generator");
+  }
+
   const body = Object.keys(value)
-    .map(key => {
-      const v = generateUnknownType(value[key], handlers);
-      return `${key}: ${v}`;
+    .map((key) => {
+      let propName = key;
+
+      // TODO: 可以增加更多智能修复的方法
+      const fixMethods: Array<(v: string) => string> = [camelize];
+      // Try to fix propName
+      while (!isValidIdentifier(propName)) {
+        const fixMethod = fixMethods.pop();
+        if (fixMethod) {
+          try {
+            propName = fixMethod(propName);
+          } catch (error) {
+            throw new CodeGeneratorError(error.message);
+          }
+        } else {
+          throw new CodeGeneratorError(`Propname: ${key} is not a valid identifier.`);
+        }
+      }
+      const v = generateUnknownType(value[key], options);
+      return `${propName}: ${v}`;
     })
     .join(',\n');
 
   return `{${body}}`;
 }
 
-export function generateUnknownType(
-  value: CompositeValue,
-  handlers: CustomHandlerSet = {},
-): string {
+export function generateUnknownType(value: CompositeValue, options: CompositeValueGeneratorOptions = {}): string {
   if (Array.isArray(value)) {
-    if (handlers.array) {
-      return handlers.array(value);
+    if (options.handlers && options.handlers.array) {
+      return options.handlers.array(value);
     }
-    return generateArray(value as CompositeArray, handlers);
+    return generateArray(value as CompositeArray, options);
   } else if (typeof value === 'object') {
-    if (handlers.object) {
-      return handlers.object(value);
+    if (options.handlers && options.handlers.object) {
+      return options.handlers.object(value);
     }
-    return generateObject(value as ICompositeObject, handlers);
+    return generateObject(value as CompositeObject, options);
   } else if (typeof value === 'string') {
-    if (handlers.string) {
-      return handlers.string(value);
+    if (options.handlers && options.handlers.string) {
+      return options.handlers.string(value);
     }
     return `'${value}'`;
-  } else if (typeof value === 'number' && handlers.number) {
-    return handlers.number(value);
-  } else if (typeof value === 'boolean' && handlers.boolean) {
-    return handlers.boolean(value);
+  } else if (typeof value === 'number' && options.handlers && options.handlers.number) {
+    return options.handlers.number(value);
+  } else if (typeof value === 'boolean' && options.handlers && options.handlers.boolean) {
+    return options.handlers.boolean(value);
   }
   return `${value}`;
 }
 
-export function generateCompositeType(
-  value: CompositeValue,
-  handlers: CustomHandlerSet = {},
-): [boolean, string] {
-  const result = generateUnknownType(value, handlers);
+export function generateCompositeType(value: CompositeValue, options: CompositeValueGeneratorOptions = {}): string {
+  const result = generateUnknownType(value, options);
+  const containerHandlers = {
+    ...defaultContainerHandlers,
+    ...(options.containerHandlers || {}),
+  };
 
-  if (result.substr(0, 1) === "'" && result.substr(-1, 1) === "'") {
-    return [true, result.substring(1, result.length - 1)];
+  const isStringType = result.substr(0, 1) === "'" && result.substr(-1, 1) === "'";
+  if (isStringType) {
+    return (containerHandlers.string && containerHandlers.string(result.substring(1, result.length - 1))) || '';
   }
-
-  return [false, result];
-}
-
-export function handleStringValueDefault([isString, result]: [boolean, string]) {
-  if (isString) {
-    return `'${result}'`;
-  }
-  return result;
+  return (containerHandlers.default && containerHandlers.default(result)) || '';
 }
diff --git a/packages/code-generator/src/utils/jsExpression.ts b/packages/code-generator/src/utils/jsExpression.ts
index 9c8541692..be4494468 100644
--- a/packages/code-generator/src/utils/jsExpression.ts
+++ b/packages/code-generator/src/utils/jsExpression.ts
@@ -1,39 +1,8 @@
-import traverse from '@babel/traverse';
-import * as parser from '@babel/parser';
-import { CodeGeneratorError, IJSExpression } from '../types';
+import { JSExpression, JSFunction } from '@ali/lowcode-types';
 
-let count = 0;
-
-function test(functionBody: string) {
-  console.log(functionBody);
-  console.log('---->');
-  try {
-    const parseResult = parser.parse(functionBody);
-    // console.log(JSON.stringify(parseResult));
-    traverse(parseResult, {
-      enter(path) {
-        console.log('path: ', JSON.stringify(path));
-      }
-    });
-
-    if (count === 0) {
-      count++;
-
-      test('this.aaa && this.bbb');
-    }
-  } catch (error) {
-    // console.log('Error');
-    console.log(error.message);
-  }
-  console.log('=====================');
-}
-
-export function transformFuncExpr2MethodMember(
-  methodName: string,
-  functionBody: string,
-): string {
-  // test(functionBody);
+import { CodeGeneratorError } from '../types';
 
+export function transformFuncExpr2MethodMember(methodName: string, functionBody: string): string {
   const args = getFuncExprArguments(functionBody);
   const body = getFuncExprBody(functionBody);
 
@@ -66,20 +35,60 @@ export function getFuncExprBody(functionBody: string) {
   return body;
 }
 
-export function generateExpression(value: any): string {
-  if (value && (value as IJSExpression).type === 'JSExpression') {
-    // test((value as IJSExpression).value);
+export function getArrowFunction(functionBody: string) {
+  const args = getFuncExprArguments(functionBody);
+  const body = getFuncExprBody(functionBody);
 
-    return (value as IJSExpression).value || 'null';
+  return `(${args}) => { ${body} }`;
+}
+
+export function isJSExpression(value: unknown): boolean {
+  return value && typeof value === 'object' && (value as JSExpression).type === 'JSExpression';
+}
+
+export function isJSFunction(value: unknown): boolean {
+  return value && typeof value === 'object' && (value as JSFunction).type === 'JSFunction';
+}
+
+export function isJsCode(value: unknown): boolean {
+  return isJSExpression(value) || isJSFunction(value);
+}
+
+export function generateExpression(value: any): string {
+  if (isJSExpression(value)) {
+    return (value as JSExpression).value || 'null';
   }
 
   throw new CodeGeneratorError('Not a JSExpression');
 }
 
-export function isJsExpression(value: any): boolean {
-  return (
-    value &&
-    typeof value === 'object' &&
-    (value as IJSExpression).type === 'JSExpression'
-  );
+export function generateFunction(
+  value: any,
+  config: {
+    name?: string;
+    isMember?: boolean;
+    isBlock?: boolean;
+    isArrow?: boolean;
+  } = {
+    name: undefined,
+    isMember: false,
+    isBlock: false,
+    isArrow: false,
+  },
+) {
+  if (isJsCode(value)) {
+    const functionCfg = value as JSFunction;
+    if (config.isMember) {
+      return transformFuncExpr2MethodMember(config.name || '', functionCfg.value);
+    }
+    if (config.isBlock) {
+      return getFuncExprBody(functionCfg.value);
+    }
+    if (config.isArrow) {
+      return getArrowFunction(functionCfg.value);
+    }
+    return functionCfg.value;
+  }
+
+  throw new CodeGeneratorError('Not a JSFunction or JSExpression');
 }
diff --git a/packages/code-generator/src/utils/jsSlot.ts b/packages/code-generator/src/utils/jsSlot.ts
new file mode 100644
index 000000000..0700aeed2
--- /dev/null
+++ b/packages/code-generator/src/utils/jsSlot.ts
@@ -0,0 +1,25 @@
+import { NodeData, JSSlot, isJSSlot } from '@ali/lowcode-types';
+import { CodeGeneratorError, NodeGenerator } from '../types';
+
+export function generateJsSlot(value: any, generator: NodeGenerator): string {
+  if (isJSSlot(value)) {
+    const slotCfg = value as JSSlot;
+    if (!slotCfg.value) {
+      return 'null';
+    }
+    const results: string[] = [];
+    if (Array.isArray(slotCfg.value)) {
+      const values: NodeData[] = slotCfg.value;
+      results.push(...values.map((n) => generator(n)));
+    } else {
+      results.push(generator(slotCfg.value));
+    }
+
+    if (results.length === 1) {
+      return results[0];
+    }
+    return `[${results.join(',')}]`;
+  }
+
+  throw new CodeGeneratorError('Not a JSSlot');
+}
diff --git a/packages/code-generator/src/utils/nodeToJSX.ts b/packages/code-generator/src/utils/nodeToJSX.ts
index db5f87c1d..675e25384 100644
--- a/packages/code-generator/src/utils/nodeToJSX.ts
+++ b/packages/code-generator/src/utils/nodeToJSX.ts
@@ -1,13 +1,23 @@
 import {
-  ChildNodeType,
-  IComponentNodeItem,
-  IJSExpression,
-  ChildNodeItem,
+  JSSlot,
+  JSExpression,
+  NodeData,
+  NodeSchema,
+  PropsMap,
+  isJSExpression,
+  isJSSlot,
+  isDOMText,
+} from '@ali/lowcode-types';
+
+import {
   CodeGeneratorError,
   PIECE_TYPE,
   CodePiece,
   HandlerSet,
   ExtGeneratorPlugin,
+  INodeGeneratorConfig,
+  INodeGeneratorContext,
+  NodeGenerator,
 } from '../types';
 import { generateCompositeType } from './compositeType';
 import { generateExpression } from './jsExpression';
@@ -15,73 +25,160 @@ import { generateExpression } from './jsExpression';
 // tslint:disable-next-line: no-empty
 const noop = () => [];
 
-export function handleChildren<T>(
-  children: ChildNodeType,
+const handleChildrenDefaultOptions = {
+  rerun: false,
+};
+
+export function handleSubNodes<T>(
+  children: unknown,
   handlers: HandlerSet<T>,
+  options?: {
+    rerun?: boolean;
+  },
 ): T[] {
+  const opt = {
+    ...handleChildrenDefaultOptions,
+    ...(options || {}),
+  };
+
   if (Array.isArray(children)) {
-    const list: ChildNodeItem[] = children as ChildNodeItem[];
-    return list
-      .map(child => handleChildren(child, handlers))
-      .reduce((p, c) => p.concat(c), []);
-  } else if (typeof children === 'string') {
+    const list: NodeData[] = children as NodeData[];
+    return list.map((child) => handleSubNodes(child, handlers, opt)).reduce((p, c) => p.concat(c), []);
+  } else if (isDOMText(children)) {
     const handler = handlers.string || handlers.common || noop;
     return handler(children as string);
-  } else if ((children as IJSExpression).type === 'JSExpression') {
+  } else if (isJSExpression(children)) {
     const handler = handlers.expression || handlers.common || noop;
-    return handler(children as IJSExpression);
+    return handler(children as JSExpression);
   } else {
     const handler = handlers.node || handlers.common || noop;
-    return handler(children as IComponentNodeItem);
+    const child = children as NodeSchema;
+    let curRes = handler(child);
+    if (opt.rerun && child.children) {
+      const childRes = handleSubNodes(child.children, handlers, opt);
+      curRes = curRes.concat(childRes || []);
+    }
+    if (child.props) {
+      // FIXME: currently only support PropsMap
+      const childProps = child.props as PropsMap;
+      Object.keys(childProps)
+        .filter((propName) => isJSSlot(childProps[propName]))
+        .forEach((propName) => {
+          const soltVals = (childProps[propName] as JSSlot).value;
+          (soltVals || []).forEach((soltVal) => {
+            const childRes = handleSubNodes(soltVal, handlers, opt);
+            curRes = curRes.concat(childRes || []);
+          });
+        });
+    }
+    return curRes;
   }
 }
 
-export function generateAttr(attrName: string, attrValue: any): CodePiece[] {
-  if (attrName === 'initValue' || attrName === 'labelCol') {
+export function handleChildren<T>(
+  ctx: INodeGeneratorContext,
+  children: unknown,
+  handlers: HandlerSet<T>,
+  options?: {
+    rerun?: boolean;
+  },
+): T[] {
+  const opt = {
+    ...handleChildrenDefaultOptions,
+    ...(options || {}),
+  };
+
+  if (Array.isArray(children)) {
+    const list: NodeData[] = children as NodeData[];
+    return list.map((child) => handleChildren(ctx, child, handlers, opt)).reduce((p, c) => p.concat(c), []);
+  } else if (isDOMText(children)) {
+    const handler = handlers.string || handlers.common || noop;
+    return handler(children as string);
+  } else if (isJSExpression(children)) {
+    const handler = handlers.expression || handlers.common || noop;
+    return handler(children as JSExpression);
+  } else {
+    const handler = handlers.node || handlers.common || noop;
+    const child = children as NodeSchema;
+    let curRes = handler(child);
+    if (opt.rerun && child.children) {
+      const childRes = handleChildren(ctx, child.children, handlers, opt);
+      curRes = curRes.concat(childRes || []);
+    }
+    return curRes;
+  }
+}
+
+export function generateAttr(ctx: INodeGeneratorContext, attrName: string, attrValue: any): CodePiece[] {
+  if (attrName === 'initValue') {
     return [];
   }
-  const [isString, valueStr] = generateCompositeType(attrValue);
-  return [{
-    value: `${attrName}=${isString ? `"${valueStr}"` : `{${valueStr}}`}`,
-    type: PIECE_TYPE.ATTR,
-  }];
+  const valueStr = generateCompositeType(attrValue, {
+    containerHandlers: {
+      default: (v) => `{${v}}`,
+      string: (v) => `"${v}"`,
+    },
+    nodeGenerator: ctx.generator,
+  });
+  return [
+    {
+      value: `${attrName}=${valueStr}`,
+      type: PIECE_TYPE.ATTR,
+    },
+  ];
 }
 
-export function generateAttrs(nodeItem: IComponentNodeItem): CodePiece[] {
+export function generateAttrs(ctx: INodeGeneratorContext, nodeItem: NodeSchema): CodePiece[] {
   const { props } = nodeItem;
   let pieces: CodePiece[] = [];
 
-  Object.keys(props).forEach((propName: string) =>
-    pieces = pieces.concat(generateAttr(propName, props[propName])),
+  Object.keys(props).forEach(
+    (propName: string) => (pieces = pieces.concat(generateAttr(ctx, propName, props[propName]))),
   );
 
   return pieces;
 }
 
-export function mapNodeName(src: string): string {
-  if (src === 'Div') {
-    return 'div';
+function mapNodeName(src: string, mapping: Record<string, string>): string {
+  if (mapping[src]) {
+    return mapping[src];
   }
   return src;
 }
 
-export function generateBasicNode(nodeItem: IComponentNodeItem): CodePiece[] {
+export function generateBasicNode(
+  ctx: INodeGeneratorContext,
+  nodeItem: NodeSchema,
+  mapping: Record<string, string>,
+): CodePiece[] {
   const pieces: CodePiece[] = [];
   pieces.push({
-    value: mapNodeName(nodeItem.componentName),
+    value: mapNodeName(nodeItem.componentName, mapping),
     type: PIECE_TYPE.TAG,
   });
 
   return pieces;
 }
 
-export function generateReactCtrlLine(nodeItem: IComponentNodeItem): CodePiece[] {
+// TODO: 生成文档
+// 为包裹的代码片段生成子上下文，集成父级上下文，并传入子级上下文新增内容。（如果存在多级上下文怎么处理？）
+// 创建新的上下文，并从作用域中取对应同名变量塞到作用域里面？
+// export function createSubContext() {}
+
+/**
+ * JSX 生成逻辑插件。在 React 代码模式下生成 loop 与 condition 相关的逻辑代码
+ *
+ * @export
+ * @param {NodeSchema} nodeItem 当前 UI 节点
+ * @returns {CodePiece[]} 实现功能的相关代码片段
+ */
+export function generateReactCtrlLine(ctx: INodeGeneratorContext, nodeItem: NodeSchema): CodePiece[] {
   const pieces: CodePiece[] = [];
 
   if (nodeItem.loop && nodeItem.loopArgs) {
     let loopDataExp;
-    if ((nodeItem.loop as IJSExpression).type === 'JSExpression') {
-      loopDataExp = `(${(nodeItem.loop as IJSExpression).value})`;
+    if (isJSExpression(nodeItem.loop)) {
+      loopDataExp = `(${generateExpression(nodeItem.loop)})`;
     } else {
       loopDataExp = JSON.stringify(nodeItem.loop);
     }
@@ -96,10 +193,12 @@ export function generateReactCtrlLine(nodeItem: IComponentNodeItem): CodePiece[]
   }
 
   if (nodeItem.condition) {
-    const [isString, value] = generateCompositeType(nodeItem.condition);
+    const value = generateCompositeType(nodeItem.condition, {
+      nodeGenerator: ctx.generator,
+    });
 
     pieces.unshift({
-      value: `(${isString ? `'${value}'` : value}) && (`,
+      value: `(${value}) && (`,
       type: PIECE_TYPE.BEFORE,
     });
     pieces.push({
@@ -123,29 +222,29 @@ export function generateReactCtrlLine(nodeItem: IComponentNodeItem): CodePiece[]
 }
 
 export function linkPieces(pieces: CodePiece[]): string {
-  if (pieces.filter(p => p.type === PIECE_TYPE.TAG).length !== 1) {
+  if (pieces.filter((p) => p.type === PIECE_TYPE.TAG).length !== 1) {
     throw new CodeGeneratorError('One node only need one tag define');
   }
-  const tagName = pieces.filter(p => p.type === PIECE_TYPE.TAG)[0].value;
+  const tagName = pieces.filter((p) => p.type === PIECE_TYPE.TAG)[0].value;
 
   const beforeParts = pieces
-    .filter(p => p.type === PIECE_TYPE.BEFORE)
-    .map(p => p.value)
+    .filter((p) => p.type === PIECE_TYPE.BEFORE)
+    .map((p) => p.value)
     .join('');
 
   const afterParts = pieces
-    .filter(p => p.type === PIECE_TYPE.AFTER)
-    .map(p => p.value)
+    .filter((p) => p.type === PIECE_TYPE.AFTER)
+    .map((p) => p.value)
     .join('');
 
   const childrenParts = pieces
-    .filter(p => p.type === PIECE_TYPE.CHILDREN)
-    .map(p => p.value)
+    .filter((p) => p.type === PIECE_TYPE.CHILDREN)
+    .map((p) => p.value)
     .join('');
 
   let attrsParts = pieces
-    .filter(p => p.type === PIECE_TYPE.ATTR)
-    .map(p => p.value)
+    .filter((p) => p.type === PIECE_TYPE.ATTR)
+    .map((p) => p.value)
     .join(' ');
 
   attrsParts = !!attrsParts ? ` ${attrsParts}` : '';
@@ -157,37 +256,53 @@ export function linkPieces(pieces: CodePiece[]): string {
   return `${beforeParts}<${tagName}${attrsParts} />${afterParts}`;
 }
 
-export function createNodeGenerator(handlers: HandlerSet<string>, plugins: ExtGeneratorPlugin[]) {
-  const generateNode = (nodeItem: IComponentNodeItem): string => {
-    let pieces: CodePiece[] = [];
+export function createNodeGenerator(
+  handlers: HandlerSet<string>,
+  plugins: ExtGeneratorPlugin[],
+  cfg?: INodeGeneratorConfig,
+): NodeGenerator {
+  let nodeTypeMapping: Record<string, string> = {};
+  if (cfg && cfg.nodeTypeMapping) {
+    nodeTypeMapping = cfg.nodeTypeMapping;
+  }
 
-    plugins.forEach(p => {
-      pieces = pieces.concat(p(nodeItem));
+  const generateNode = (nodeItem: NodeSchema): string => {
+    let pieces: CodePiece[] = [];
+    const ctx: INodeGeneratorContext = {
+      generator: generateNode,
+    };
+
+    plugins.forEach((p) => {
+      pieces = pieces.concat(p(ctx, nodeItem));
     });
-    pieces = pieces.concat(generateBasicNode(nodeItem));
-    pieces = pieces.concat(generateAttrs(nodeItem));
+    pieces = pieces.concat(generateBasicNode(ctx, nodeItem, nodeTypeMapping));
+    pieces = pieces.concat(generateAttrs(ctx, nodeItem));
     if (nodeItem.children && (nodeItem.children as unknown[]).length > 0) {
-      pieces = pieces.concat(handleChildren<string>(nodeItem.children, handlers).map(l => ({
-        type: PIECE_TYPE.CHILDREN,
-        value: l,
-      })));
+      pieces = pieces.concat(
+        handleChildren<string>(ctx, nodeItem.children, handlers).map((l) => ({
+          type: PIECE_TYPE.CHILDREN,
+          value: l,
+        })),
+      );
     }
 
     return linkPieces(pieces);
   };
 
-  handlers.node = (input: IComponentNodeItem) => [generateNode(input)];
+  handlers.node = (input: NodeSchema) => [generateNode(input)];
 
   return generateNode;
 }
 
 export const generateString = (input: string) => [input];
 
-export function createReactNodeGenerator() {
-  return createNodeGenerator({
-    string: generateString,
-    expression: (input) => [generateExpression(input)],
-  }, [
-    generateReactCtrlLine,
-  ]);
+export function createReactNodeGenerator(cfg?: INodeGeneratorConfig): NodeGenerator {
+  return createNodeGenerator(
+    {
+      string: generateString,
+      expression: (input) => [generateExpression(input)],
+    },
+    [generateReactCtrlLine],
+    cfg,
+  );
 }
diff --git a/packages/code-generator/src/utils/resultHelper.ts b/packages/code-generator/src/utils/resultHelper.ts
new file mode 100644
index 000000000..07e321bf8
--- /dev/null
+++ b/packages/code-generator/src/utils/resultHelper.ts
@@ -0,0 +1,35 @@
+import { ResultFile, ResultDir } from '@ali/lowcode-types';
+
+import { CodeGeneratorError } from '../types/error';
+
+export function createResultFile(name: string, ext = 'jsx', content = ''): ResultFile {
+  return {
+    name,
+    ext,
+    content,
+  };
+}
+
+export function createResultDir(name: string): ResultDir {
+  return {
+    name,
+    dirs: [],
+    files: [],
+  };
+}
+
+export function addDirectory(target: ResultDir, dir: ResultDir): void {
+  if (target.dirs.findIndex((d) => d.name === dir.name) < 0) {
+    target.dirs.push(dir);
+  } else {
+    throw new CodeGeneratorError('Adding same directory to one directory');
+  }
+}
+
+export function addFile(target: ResultDir, file: ResultFile): void {
+  if (target.files.findIndex((f) => f.name === file.name && f.ext === file.ext) < 0) {
+    target.files.push(file);
+  } else {
+    throw new CodeGeneratorError('Adding same file to one directory');
+  }
+}
diff --git a/packages/code-generator/src/utils/templateHelper.ts b/packages/code-generator/src/utils/templateHelper.ts
index f1692ad67..90b66c50f 100644
--- a/packages/code-generator/src/utils/templateHelper.ts
+++ b/packages/code-generator/src/utils/templateHelper.ts
@@ -1,25 +1,25 @@
-import { IResultFile, IResultDir } from '../types';
-import ResultDir from '../model/ResultDir';
+import { ResultDir, ResultFile } from '@ali/lowcode-types';
+import { createResultDir, addDirectory, addFile } from '../utils/resultHelper';
 
-type FuncFileGenerator = () => [string[], IResultFile];
+type FuncFileGenerator = () => [string[], ResultFile];
 
-export function insertFile(root: IResultDir, path: string[], file: IResultFile) {
-  let current: IResultDir = root;
-  path.forEach(pathNode => {
-    const dir = current.dirs.find(d => d.name === pathNode);
+export function insertFile(root: ResultDir, path: string[], file: ResultFile) {
+  let current: ResultDir = root;
+  path.forEach((pathNode) => {
+    const dir = current.dirs.find((d) => d.name === pathNode);
     if (dir) {
       current = dir;
     } else {
-      const newDir = new ResultDir(pathNode);
-      current.addDirectory(newDir);
+      const newDir = createResultDir(pathNode);
+      addDirectory(current, newDir);
       current = newDir;
     }
   });
 
-  current.addFile(file);
+  addFile(current, file);
 }
 
-export function runFileGenerator(root: IResultDir, fun: FuncFileGenerator) {
+export function runFileGenerator(root: ResultDir, fun: FuncFileGenerator) {
   const [path, file] = fun();
   insertFile(root, path, file);
 }
diff --git a/packages/code-generator/src/utils/validate.ts b/packages/code-generator/src/utils/validate.ts
new file mode 100644
index 000000000..118d21ad4
--- /dev/null
+++ b/packages/code-generator/src/utils/validate.ts
@@ -0,0 +1,3 @@
+export const isValidIdentifier = (name: string) => {
+  return /^[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*$/.test(name);
+};
diff --git a/packages/types/src/code-intermediate.ts b/packages/types/src/code-intermediate.ts
new file mode 100644
index 000000000..656df2e1e
--- /dev/null
+++ b/packages/types/src/code-intermediate.ts
@@ -0,0 +1,14 @@
+export interface PackageJSON {
+  name: string;
+  version: string;
+  description?: string;
+  dependencies: Record<string, string>;
+  devDependencies: Record<string, string>;
+  scripts?: Record<string, string>;
+  engines?: Record<string, string>;
+  repository?: {
+    type: string;
+    url: string;
+  };
+  private?: boolean;
+}
diff --git a/packages/types/src/code-result.ts b/packages/types/src/code-result.ts
new file mode 100644
index 000000000..07e9c0795
--- /dev/null
+++ b/packages/types/src/code-result.ts
@@ -0,0 +1,59 @@
+/**
+ * 导出内容结构，文件夹
+ *
+ * @export
+ * @interface ResultDir
+ */
+export interface ResultDir {
+  /**
+   * 文件夹名称，Root 名称默认为 .
+   *
+   * @type {string}
+   * @memberof ResultDir
+   */
+  name: string;
+  /**
+   * 子目录
+   *
+   * @type {ResultDir[]}
+   * @memberof ResultDir
+   */
+  dirs: ResultDir[];
+  /**
+   * 文件夹内文件
+   *
+   * @type {ResultFile[]}
+   * @memberof ResultDir
+   */
+  files: ResultFile[];
+}
+
+/**
+ * 导出内容，对文件的描述
+ *
+ * @export
+ * @interface ResultFile
+ */
+export interface ResultFile {
+  /**
+   * 文件名
+   *
+   * @type {string}
+   * @memberof ResultFile
+   */
+  name: string;
+  /**
+   * 文件类型扩展名，例如 .js .less
+   *
+   * @type {string}
+   * @memberof ResultFile
+   */
+  ext: string;
+  /**
+   * 文件内容
+   *
+   * @type {string}
+   * @memberof ResultFile
+   */
+  content: string;
+}
diff --git a/packages/types/src/data-source.ts b/packages/types/src/data-source.ts
index 79bca2e91..742a4f9d4 100644
--- a/packages/types/src/data-source.ts
+++ b/packages/types/src/data-source.ts
@@ -12,5 +12,5 @@ export interface DataSourceConfig {
 }
 
 export interface DataSource {
-  items: DataSourceConfig[];
+  list: DataSourceConfig[];
 }
diff --git a/packages/types/src/field-config.ts b/packages/types/src/field-config.ts
index 8dc176fe8..e95d07081 100644
--- a/packages/types/src/field-config.ts
+++ b/packages/types/src/field-config.ts
@@ -51,7 +51,7 @@ export interface FieldExtraProps {
     mode?: 'plaintext' | 'paragraph' | 'article';
     // 从 contentEditable 获取内容并设置到属性
     onSaveContent?: (content: string, prop: any) => any;
-  }
+  };
 }
 
 export interface FieldConfig extends FieldExtraProps {
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index d8f66a46c..56ff2826b 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -15,3 +15,5 @@ export * from './setter-config';
 export * from './setting-target';
 export * from './node';
 export * from './transform-stage';
+export * from './code-intermediate';
+export * from './code-result';
diff --git a/packages/types/src/schema.ts b/packages/types/src/schema.ts
index d3e74f6ea..8359f156e 100644
--- a/packages/types/src/schema.ts
+++ b/packages/types/src/schema.ts
@@ -1,18 +1,20 @@
 import { ComponentsMap } from './npm';
-import { CompositeValue, JSExpression, CompositeObject, JSONObject } from './value-type';
+import { CompositeValue, JSExpression, JSFunction, CompositeObject, JSONObject } from './value-type';
 import { DataSource } from './data-source';
 import { I18nMap } from './i18n';
 import { UtilsMap } from './utils';
 
+// 搭建基础协议 - 单个组件树节点描述
+// 转换成一个 .jsx 文件内 React Class 类 render 函数返回的 jsx 代码
 export interface NodeSchema {
   id?: string;
-  componentName: string;
-  props?: PropsMap | PropsList;
+  componentName: string; // 组件名称 必填、首字母大写
+  props?: PropsMap | PropsList; // 组件属性对象
   leadingComponents?: string;
-  condition?: CompositeValue;
-  loop?: CompositeValue;
-  loopArgs?: [string, string];
-  children?: NodeData | NodeData[];
+  condition?: CompositeValue; // 渲染条件
+  loop?: CompositeValue; // 循环数据
+  loopArgs?: [string, string]; // 循环迭代对象、索引名称 ["item", "index"]
+  children?: NodeData | NodeData[]; // 子节点
 
   // ------- future support -----
   conditionGroup?: string;
@@ -30,6 +32,7 @@ export type PropsList = Array<{
 }>;
 
 export type NodeData = NodeSchema | JSExpression | DOMText;
+export type NodeDataType = NodeData | NodeData[];
 
 export function isDOMText(data: any): data is DOMText {
   return typeof data === 'string';
@@ -45,10 +48,10 @@ export interface ContainerSchema extends NodeSchema {
     [key: string]: CompositeValue;
   };
   methods?: {
-    [key: string]: JSExpression;
+    [key: string]: JSExpression | JSFunction;
   };
   lifeCycles?: {
-    [key: string]: JSExpression;
+    [key: string]: JSExpression | JSFunction;
   };
   css?: string;
   dataSource?: DataSource;
@@ -69,7 +72,6 @@ export interface BlockSchema extends NodeSchema {
   componentName: 'Block';
 }
 export interface SlotSchema extends NodeSchema {
-  name?: string;
   componentName: 'Slot';
   params?: string[];
 }
diff --git a/packages/types/src/utils.ts b/packages/types/src/utils.ts
index f4a925f3b..70ac5bc05 100644
--- a/packages/types/src/utils.ts
+++ b/packages/types/src/utils.ts
@@ -1,13 +1,17 @@
 import { NpmInfo } from './npm';
+import { JSFunction } from './value-type';
 
-export type UtilsMap = Array<
-| {
-    name: string;
-    type: 'npm';
-    content: NpmInfo;
-  }
-| {
-    name: string;
-    type: '';
-  }
->;
+export interface InternalUtils {
+  name: string;
+  type: 'function';
+  content: JSFunction;
+}
+
+export interface ExternalUtils {
+  name: string;
+  type: 'npm' | 'tnpm';
+  content: NpmInfo;
+}
+
+export type IUtilItem = InternalUtils | ExternalUtils;
+export type UtilsMap = IUtilItem[];
diff --git a/packages/types/src/value-type.ts b/packages/types/src/value-type.ts
index 34f0c38c5..7436050d1 100644
--- a/packages/types/src/value-type.ts
+++ b/packages/types/src/value-type.ts
@@ -11,14 +11,18 @@ export interface JSExpression {
    * 模拟值
    */
   mock?: any;
+}
+
+// 函数
+export interface JSFunction {
+  type: 'JSFunction';
   /**
-   * 额外扩展属性，如 extType、events
+   * 表达式字符串
    */
-  [key: string]: any;
+  value: string;
 }
 
 export interface JSSlot {
-  name?: string;
   type: 'JSSlot';
   title?: string;
   // 函数的入参
@@ -39,17 +43,20 @@ export interface JSONObject {
 }
 
 // 复合类型
-export type CompositeValue = JSONValue | JSExpression | JSSlot | CompositeArray | CompositeObject;
+export type CompositeValue = JSONValue | JSExpression | JSFunction | JSSlot | CompositeArray | CompositeObject;
 export type CompositeArray = CompositeValue[];
 export interface CompositeObject {
   [key: string]: CompositeValue;
 }
 
-
 export function isJSExpression(data: any): data is JSExpression {
   return data && data.type === 'JSExpression';
 }
 
+export function isJSFunction(data: any): data is JSFunction {
+  return data && data.type === 'JSFunction';
+}
+
 export function isJSSlot(data: any): data is JSSlot {
   return data && data.type === 'JSSlot';
 }

From 6cd07524b6c2cf901905ab1917e03c2bbca49c92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Thu, 13 Aug 2020 11:22:09 +0800
Subject: [PATCH 27/80] =?UTF-8?q?test:=20=F0=9F=92=8D=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=20Rax=20=E5=87=BA=E7=A0=81=E7=9A=84=E7=A4=BA=E4=BE=8B,=20?=
 =?UTF-8?q?=E8=A7=A3=E5=86=B3=20methods=20=E7=9A=84=E4=B8=8A=E4=B8=8B?=
 =?UTF-8?q?=E6=96=87=E7=BB=91=E5=AE=9A=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/plugins/component/rax/commonDeps.ts   |  6 ++-
 .../component/rax/containerInjectContext.ts   |  1 +
 .../rax/containerInjectDataSourceEngine.ts    |  4 +-
 .../plugins/component/rax/containerMethods.ts | 13 ++++-
 .../demo-project/src/pages/Home/index.jsx     | 20 +++++--
 .../demo2/expected/demo-project/package.json  |  3 +-
 .../demo-project/src/pages/Home/index.jsx     | 42 ++++++++++++---
 .../demo2/expected/demo-project/src/utils.js  | 11 ++++
 .../test-cases/rax-app/demo2/schema.json5     | 54 ++++++++++++++++++-
 9 files changed, 139 insertions(+), 15 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/commonDeps.ts b/packages/code-generator/src/plugins/component/rax/commonDeps.ts
index 561bb0022..9e8ad1f57 100644
--- a/packages/code-generator/src/plugins/component/rax/commonDeps.ts
+++ b/packages/code-generator/src/plugins/component/rax/commonDeps.ts
@@ -19,7 +19,11 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       type: ChunkType.STRING,
       fileType: FileType.JSX,
       name: COMMON_CHUNK_NAME.ExternalDepsImport,
-      content: `import { createElement, Component } from 'rax';`,
+      content: `
+        // 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
+        // 例外：rax 框架的导出名和各种组件名除外。
+        import { createElement, Component } from 'rax';
+      `,
       linkAfter: [],
     });
 
diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
index f5bfe65cc..659ccf933 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
@@ -67,6 +67,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
             get props() {
               return self.props;
             },
+            ...this._methods,
           };
 
           return context;
diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
index 019383755..686cf5bf4 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -32,7 +32,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       fileType: FileType.JSX,
       name: COMMON_CHUNK_NAME.ExternalDepsImport,
       content: `
-        import { createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+        import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
       `,
       linkAfter: [],
     });
@@ -43,7 +43,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       name: CLASS_DEFINE_CHUNK_NAME.InsVar,
       content: `
       _dataSourceList = this._defineDataSourceList();
-      _dataSourceEngine = createDataSourceEngine(this._dataSourceList, this._context);`,
+      _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceList, this._context);`,
       linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
     });
 
diff --git a/packages/code-generator/src/plugins/component/rax/containerMethods.ts b/packages/code-generator/src/plugins/component/rax/containerMethods.ts
index b13c81071..50b3b16a3 100644
--- a/packages/code-generator/src/plugins/component/rax/containerMethods.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerMethods.ts
@@ -44,7 +44,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       name: RAX_CHUNK_NAME.MethodsBegin,
       content: `
         _defineMethods() {
-          return ({
+          const __$$methods = ({
       `,
       linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd, CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod],
     });
@@ -55,6 +55,17 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       name: RAX_CHUNK_NAME.MethodsEnd,
       content: `
           });
+
+          // 为所有的方法绑定上下文
+          Object.entries(__$$methods).forEach(([methodName, method]) => {
+            if (typeof method === 'function') {
+              __$$methods[methodName] = (...args) => {
+                return method.apply(this._context, args);
+              }
+            }
+          });
+
+          return __$$methods;
         }
       `,
       linkAfter: [RAX_CHUNK_NAME.MethodsBegin, RAX_CHUNK_NAME.MethodsContent],
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
index 1ae8e9192..89960d6ef 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
@@ -1,10 +1,12 @@
+// 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
+// 例外：rax 框架的导出名和各种组件名除外。
 import { createElement, Component } from 'rax';
 
 import Page from 'rax-view';
 
 import Text from 'rax-text';
 
-import { createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
 
 import __$$projectUtils from '../../utils';
 
@@ -16,7 +18,7 @@ class Home$$Page extends Component {
   _context = this._createContext();
 
   _dataSourceList = this._defineDataSourceList();
-  _dataSourceEngine = createDataSourceEngine(this._dataSourceList, this._context);
+  _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceList, this._context);
 
   _utils = this._defineUtils();
 
@@ -62,6 +64,7 @@ class Home$$Page extends Component {
       get props() {
         return self.props;
       },
+      ...this._methods,
     };
 
     return context;
@@ -86,7 +89,18 @@ class Home$$Page extends Component {
   }
 
   _defineMethods() {
-    return {};
+    const __$$methods = {};
+
+    // 为所有的方法绑定上下文
+    Object.entries(__$$methods).forEach(([methodName, method]) => {
+      if (typeof method === 'function') {
+        __$$methods[methodName] = (...args) => {
+          return method.apply(this._context, args);
+        };
+      }
+    });
+
+    return __$$methods;
   }
 }
 
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
index 8aad3e1ad..f14719b11 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
@@ -17,7 +17,8 @@
     "rax-text": "^1.0.0",
     "rax-image": "^1.0.0",
     "moment": "*",
-    "lodash": "*"
+    "lodash": "*",
+    "universal-toast": "^1.2.0"
   },
   "devDependencies": {
     "build-plugin-rax-app": "^5.0.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index 1f1e8cfea..1cad2aa0c 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -1,3 +1,5 @@
+// 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
+// 例外：rax 框架的导出名和各种组件名除外。
 import { createElement, Component } from 'rax';
 
 import View from 'rax-view';
@@ -6,7 +8,7 @@ import Text from 'rax-text';
 
 import Image from 'rax-image';
 
-import { createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
 
 import __$$projectUtils from '../../utils';
 
@@ -30,9 +32,11 @@ class Home$$Page extends Component {
   };
 
   _methods = this._defineMethods();
+
   _context = this._createContext();
+
   _dataSourceList = this._defineDataSourceList();
-  _dataSourceEngine = createDataSourceEngine(this._dataSourceList, this._context);
+  _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceList, this._context);
 
   _utils = this._defineUtils();
 
@@ -57,7 +61,7 @@ class Home$$Page extends Component {
               source={{ uri: __$$eval(() => __$$context.state.user.avatar) }}
               style={{ width: '32px', height: '32px' }}
             />
-            <View>
+            <View onClick={__$$eval(() => __$$context.hello)}>
               <Text>{__$$eval(() => __$$context.state.user.name)}</Text>
               <Text>{__$$eval(() => __$$context.state.user.age)}岁</Text>
             </View>
@@ -67,7 +71,15 @@ class Home$$Page extends Component {
           <Text>=== Orders: ===</Text>
         </View>
         {__$$evalArray(() => __$$context.state.orders).map((item, index) => (
-          <View style={{ flexDirection: 'row' }}>
+          <View
+            style={{ flexDirection: 'row' }}
+            onClick={__$$eval(
+              () =>
+                function () {
+                  __$$context.utils.recordEvent(`CLICK_ORDER`, item.title);
+                },
+            )}
+          >
             <View>
               <Image source={{ uri: __$$eval(() => item.coverUrl) }} style={{ width: '80px', height: '60px' }} />
             </View>
@@ -77,6 +89,11 @@ class Home$$Page extends Component {
             </View>
           </View>
         ))}
+        <View>
+          <Text>操作提示：</Text>
+          <Text>1. 点击会员名，可以弹出 Toast "Hello xxx!"</Text>
+          <Text>2. 点击订单，会记录点击的订单信息，并弹出 Toast 提示</Text>
+        </View>
       </View>
     );
   }
@@ -109,6 +126,7 @@ class Home$$Page extends Component {
       get props() {
         return self.props;
       },
+      ...this._methods,
     };
 
     return context;
@@ -141,11 +159,23 @@ class Home$$Page extends Component {
   }
 
   _defineMethods() {
-    return {
+    const __$$methods = {
       hello: function hello() {
-        console.log('Hello world!');
+        this.utils.Toast.show(`Hello ${this.state.user.name}!`);
+        console.log(`Hello ${this.state.user.name}!`);
       },
     };
+
+    // 为所有的方法绑定上下文
+    Object.entries(__$$methods).forEach(([methodName, method]) => {
+      if (typeof method === 'function') {
+        __$$methods[methodName] = (...args) => {
+          return method.apply(this._context, args);
+        };
+      }
+    });
+
+    return __$$methods;
   }
 }
 
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/utils.js b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/utils.js
index 6fb1f681b..a9612b3d2 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/utils.js
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/utils.js
@@ -2,14 +2,25 @@ import moment from 'moment';
 
 import clone from 'lodash/clone';
 
+import Toast from 'universal-toast';
+
 const formatPrice = function formatPrice(price, unit) {
   return Number(price).toFixed(2) + unit;
 };
 
+const recordEvent = function recordEvent(eventName, eventDetail) {
+  this.utils.Toast.show(`[EVENT]: ${eventName} ${eventDetail}`);
+  console.log(`[EVENT]: ${eventName} (detail: %o) (user: %o)`, eventDetail, this.state.user);
+};
+
 export default {
   formatPrice,
 
+  recordEvent,
+
   moment,
 
   clone,
+
+  Toast,
 };
diff --git a/packages/code-generator/test-cases/rax-app/demo2/schema.json5 b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
index 161d7fe50..d735dafde 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
@@ -55,7 +55,7 @@
       methods: {
         hello: {
           type: 'JSExpression',
-          value: 'function hello(){ console.log("Hello world!"); }',
+          value: 'function hello(){\n  this.utils.Toast.show(`Hello ${this.state.user.name}!`);\n  console.log(`Hello ${this.state.user.name}!`); }',
         },
       },
       dataSource: {
@@ -132,6 +132,12 @@
             },
             {
               componentName: 'View',
+              props: {
+                onClick: {
+                  type: 'JSFunction',
+                  value: 'this.hello',
+                },
+              },
               children: [
                 {
                   componentName: 'Text',
@@ -172,6 +178,10 @@
           },
           props: {
             style: { flexDirection: 'row' },
+            onClick: {
+              type: 'JSFunction',
+              value: 'function(){ this.utils.recordEvent(`CLICK_ORDER`, this.item.title) }',
+            },
           },
           children: [
             {
@@ -215,10 +225,31 @@
             },
           ],
         },
+        {
+          componentName: 'View',
+          children: [
+            {
+              componentName: 'Text',
+              props: {},
+              children: '操作提示：',
+            },
+            {
+              componentName: 'Text',
+              props: {},
+              children: '1. 点击会员名，可以弹出 Toast "Hello xxx!"',
+            },
+            {
+              componentName: 'Text',
+              props: {},
+              children: '2. 点击订单，会记录点击的订单信息，并弹出 Toast 提示',
+            },
+          ],
+        },
       ],
     },
   ],
   utils: [
+    // 可以直接定义一个函数
     {
       name: 'formatPrice',
       type: 'function',
@@ -227,6 +258,16 @@
         value: 'function formatPrice(price, unit) { return Number(price).toFixed(2) + unit; }',
       },
     },
+    // 在 utils 里面也可以用 this 访问当前上下文:
+    {
+      name: 'recordEvent',
+      type: 'function',
+      content: {
+        type: 'JSFunction',
+        value: 'function recordEvent(eventName, eventDetail) { \n  this.utils.Toast.show(`[EVENT]: ${eventName} ${eventDetail}`);\n  console.log(`[EVENT]: ${eventName} (detail: %o) (user: %o)`, eventDetail, this.state.user); }',
+      },
+    },
+    // 也可以直接从 npm 包引入 (下例等价于 `import moment from 'moment';`)
     {
       name: 'moment',
       type: 'npm',
@@ -236,6 +277,7 @@
         exportName: 'moment',
       },
     },
+    // 可以引入子目录（下例等价于 `import clone from 'lodash/clone';`)
     {
       name: 'clone',
       type: 'npm',
@@ -247,6 +289,16 @@
         main: '/clone',
       },
     },
+    // 支持 TNPM
+    {
+      name: 'Toast',
+      type: 'tnpm',
+      content: {
+        package: 'universal-toast',
+        version: '^1.2.0',
+        exportName: 'Toast', // TODO: 这个 exportName 是否可以省略？省略后默认是上一层的 name？
+      },
+    },
   ],
   config: {
     sdkVersion: '1.0.3',

From 779ea7c718194ff4c91cd48499cec30dbca6e5e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Thu, 13 Aug 2020 17:31:11 +0800
Subject: [PATCH 28/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E8=A7=A3=E5=86=B3?=
 =?UTF-8?q?=E9=80=9A=E8=BF=87=20Rax=20=E5=87=BA=E7=A0=81=E5=88=B0=E5=B0=8F?=
 =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E7=9A=84=E6=97=B6=E5=80=99=E5=BE=AA=E7=8E=AF?=
 =?UTF-8?q?=E9=87=8C=E9=9D=A2=E6=B2=A1=E6=B3=95=E7=94=A8=E5=BE=AA=E7=8E=AF?=
 =?UTF-8?q?=E5=8F=98=E9=87=8F=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/rax/containerInjectContext.ts   |   2 +-
 .../src/plugins/component/rax/jsx.ts          | 212 +++++++++++++---
 .../framework/rax/plugins/packageJSON.ts      |   1 +
 .../code-generator/src/solutions/rax-app.ts   |   4 +-
 .../code-generator/src/utils/OrderedSet.ts    |  33 +++
 .../code-generator/src/utils/ScopeBindings.ts |  52 ++++
 .../code-generator/src/utils/compositeType.ts |  29 ++-
 .../src/utils/expressionParser.ts             | 239 ++++++++++++++++++
 .../code-generator/src/utils/nodeToJSX.ts     |  39 ++-
 .../demo1/expected/demo-project/package.json  |   1 +
 .../demo-project/src/pages/Home/index.jsx     |   4 +-
 .../demo2/expected/demo-project/package.json  |   1 +
 .../demo-project/src/pages/Home/index.jsx     |  45 +++-
 .../test-cases/rax-app/demo2/schema.json5     |  37 ++-
 ...parseExpressionConvertThis2Context.test.ts |  79 ++++++
 .../parseExpressionGetGlobalVariables.test.ts | 114 +++++++++
 16 files changed, 812 insertions(+), 80 deletions(-)
 create mode 100644 packages/code-generator/src/utils/OrderedSet.ts
 create mode 100644 packages/code-generator/src/utils/ScopeBindings.ts
 create mode 100644 packages/code-generator/src/utils/expressionParser.ts
 create mode 100644 packages/code-generator/test/utils/expressionParser/parseExpressionConvertThis2Context.test.ts
 create mode 100644 packages/code-generator/test/utils/expressionParser/parseExpressionGetGlobalVariables.test.ts

diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
index 659ccf933..228d7dad5 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
@@ -53,7 +53,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
               return self._dataSourceEngine.dataSourceMap || {};
             },
             async reloadDataSource() {
-              self._dataSourceEngine.reloadDataSource();
+              await self._dataSourceEngine.reloadDataSource();
             },
             get utils() {
               return self._utils;
diff --git a/packages/code-generator/src/plugins/component/rax/jsx.ts b/packages/code-generator/src/plugins/component/rax/jsx.ts
index 9b73f3ef1..eb6c513af 100644
--- a/packages/code-generator/src/plugins/component/rax/jsx.ts
+++ b/packages/code-generator/src/plugins/component/rax/jsx.ts
@@ -1,23 +1,31 @@
+import _ from 'lodash';
+import changeCase from 'change-case';
 import {
   BuilderComponentPlugin,
   BuilderComponentPluginFactory,
   ChunkType,
+  CodePiece,
+  CompositeValue,
   FileType,
+  HandlerSet,
   ICodeChunk,
   ICodeStruct,
   IContainerInfo,
-  isJSExpression,
-  isJSFunction,
   JSExpression,
-  JSFunction,
+  NodeSchema,
   NpmInfo,
+  PIECE_TYPE,
 } from '../../../types';
 
 import { RAX_CHUNK_NAME } from './const';
 import { COMMON_CHUNK_NAME } from '../../../const/generator';
 
-import { createNodeGenerator, generateReactCtrlLine, generateString } from '../../../utils/nodeToJSX';
+import { createNodeGenerator, generateReactCtrlLine, generateString, generateAttr } from '../../../utils/nodeToJSX';
 import { generateExpression } from '../../../utils/jsExpression';
+import { CustomHandlerSet, generateUnknownType } from '../../../utils/compositeType';
+
+import { IScopeBindings, ScopeBindings } from '../../../utils/ScopeBindings';
+import { parseExpressionConvertThis2Context, parseExpressionGetGlobalVariables } from '../../../utils/expressionParser';
 
 type PluginConfig = {
   fileType: string;
@@ -30,17 +38,22 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
     ...config,
   };
 
-  const transformers = {
-    transformThis2Context,
-    transformJsExpr: (expr: string) =>
-      isLiteralAtomicExpr(expr) ? expr : `__$$eval(() => (${transformThis2Context(expr)}))`,
-    transformLoopExpr: (expr: string) => `__$$evalArray(() => (${transformThis2Context(expr)}))`,
-  };
+  // 什么都不做的的话，会有 3 个问题：
+  // 1. 小程序出码的时候，循环变量没法拿到
+  // 2. 小程序出码的时候，很容易出现 Uncaught TypeError: Cannot read property 'avatar' of undefined 这样的异常(如下图的 50 行) -- 因为若直接出码，Rax 构建到小程序的时候会立即计算所有在视图中用到的变量
+  // 3. 通过 this.xxx 能拿到的东西太多了，而且自定义的 methods 可能会无意间破坏 Rax 框架或小程序框架在页面 this 上的东东
+  // const transformers = {
+  //   transformThis2Context: (expr: string) => expr,
+  //   transformJsExpr: (expr: string) => expr,
+  //   transformLoopExpr: (expr: string) => expr,
+  // };
 
-  const handlers = {
-    expression: (input: JSExpression) => transformers.transformJsExpr(generateExpression(input)),
-    function: (input: JSFunction) => transformers.transformJsExpr(input.value || 'null'),
-  };
+  // 不转换 this.xxx 到 __$$context.xxx 的话，依然会有上述的 1 和 3 的问题。
+  // const transformers = {
+  //   transformThis2Context: (expr: string) => expr,
+  //   transformJsExpr: (expr: string) => (isLiteralAtomicExpr(expr) ? expr : `__$$eval(() => (${expr}))`),
+  //   transformLoopExpr: (expr: string) => `__$$evalArray(() => (${expr}))`,
+  // };
 
   const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
     const next: ICodeStruct = {
@@ -64,24 +77,57 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
     // 然后过滤掉所有的别名 chunks
     next.chunks = next.chunks.filter((chunk) => !isImportAliasDefineChunk(chunk));
 
+    const customHandlers: CustomHandlerSet = {
+      expression(this: CustomHandlerSet, input: JSExpression) {
+        return transformJsExpr(generateExpression(input), this);
+      },
+      function(input) {
+        return transformThis2Context(input.value || 'null', this);
+      },
+      loopDataExpr(input) {
+        return typeof input === 'string' ? transformLoopExpr(input, this) : '';
+      },
+      tagName: mapComponentNameToAliasOrKeepIt,
+      nodeAttr: generateNodeAttrForRax,
+    };
+
+    const generatorHandlers: HandlerSet<string> = {
+      string: generateString,
+      expression: (input) => [customHandlers.expression?.(input) || 'null'],
+      function: (input) => [customHandlers.function?.(input) || 'null'],
+    };
+
     // 创建代码生成器
-    const generator = createNodeGenerator(
-      {
-        string: generateString,
-        expression: (input) => [handlers.expression(input)],
-        function: (input) => [handlers.function(input)],
-      },
-      [generateReactCtrlLine],
-      {
-        expression: (input) => (isJSExpression(input) ? handlers.expression(input) : ''),
-        function: (input) => (isJSFunction(input) ? handlers.function(input) : ''),
-        loopDataExpr: (input) => (typeof input === 'string' ? transformers.transformLoopExpr(input) : ''),
-        tagName: mapComponentNameToAliasOrKeepIt,
-      },
-    );
+    const commonNodeGenerator = createNodeGenerator(generatorHandlers, [generateReactCtrlLine], customHandlers);
+
+    const raxCodeGenerator = (node: NodeSchema): string => {
+      if (node.loop) {
+        const loopItemName = node.loopArgs?.[0] || 'item';
+        const loopIndexName = node.loopArgs?.[1] || 'index';
+
+        return runInNewScope({
+          scopeHost: customHandlers,
+          newScopeOwnVariables: [loopItemName, loopIndexName],
+          run: () => commonNodeGenerator(node),
+        });
+      }
+
+      return commonNodeGenerator(node);
+    };
+
+    generatorHandlers.node = (node) => [raxCodeGenerator(node)];
+    customHandlers.node = raxCodeGenerator;
 
     // 生成 JSX 代码
-    const jsxContent = generator(ir);
+    const jsxContent = raxCodeGenerator(ir);
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: cfg.fileType,
+      name: COMMON_CHUNK_NAME.ExternalDepsImport,
+      content: `import { isMiniApp as __$$isMiniApp } from 'universal-env';`,
+      linkAfter: [],
+    });
 
     next.chunks.push({
       type: ChunkType.STRING,
@@ -130,6 +176,14 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
 
 export default pluginFactory;
 
+function transformLoopExpr(expr: string, handlers: CustomHandlerSet) {
+  return `__$$evalArray(() => (${transformThis2Context(expr, handlers)}))`;
+}
+
+function transformJsExpr(expr: string, handlers: CustomHandlerSet) {
+  return isLiteralAtomicExpr(expr) ? expr : `__$$eval(() => (${transformThis2Context(expr, handlers)}))`;
+}
+
 function isImportAliasDefineChunk(
   chunk: ICodeChunk,
 ): chunk is ICodeChunk & {
@@ -159,11 +213,97 @@ function isLiteralAtomicExpr(expr: string): boolean {
  * 将所有的 this.xxx 替换为 __$$context.xxx
  * @param expr
  */
-function transformThis2Context(expr: string): string {
-  // TODO: 应该根据语法分析来搞
-  // TODO: 如何替换自定义名字的循环变量？（generateReactCtrlLine）
-  return expr
-    .replace(/\bthis\.item\./, () => 'item.')
-    .replace(/\bthis\.index\./, () => 'index.')
-    .replace(/\bthis\./, () => '__$$context.');
+function transformThis2Context(expr: string, customHandlers: CustomHandlerSet): string {
+  // return expr
+  //   .replace(/\bthis\.item\./g, () => 'item.')
+  //   .replace(/\bthis\.index\./g, () => 'index.')
+  //   .replace(/\bthis\./g, () => '__$$context.');
+
+  return parseExpressionConvertThis2Context(expr, '__$$context', customHandlers.scopeBindings?.getAllBindings() || []);
+}
+
+function generateNodeAttrForRax(this: CustomHandlerSet, attrName: string, attrValue: CompositeValue): CodePiece[] {
+  if (!/^on/.test(attrName)) {
+    return generateAttr(attrName, attrValue, {
+      ...this,
+      nodeAttr: undefined,
+    });
+  }
+
+  // 先出个码
+  const valueExpr = generateUnknownType(attrValue, this);
+
+  // 查询当前作用域下的变量
+  const currentScopeVariables = this.scopeBindings?.getAllBindings() || [];
+  if (currentScopeVariables.length <= 0) {
+    return [
+      {
+        type: PIECE_TYPE.ATTR,
+        value: `${attrName}={${valueExpr}}`,
+      },
+    ];
+  }
+
+  // 提取出所有的未定义的全局变量
+  const undeclaredVariablesInValueExpr = parseExpressionGetGlobalVariables(valueExpr);
+  const referencedLocalVariables = _.intersection(undeclaredVariablesInValueExpr, currentScopeVariables);
+  if (referencedLocalVariables.length <= 0) {
+    return [
+      {
+        type: PIECE_TYPE.ATTR,
+        value: `${attrName}={${valueExpr}}`,
+      },
+    ];
+  }
+
+  const wrappedAttrValueExpr = [
+    `(...__$$args) => {`,
+    `  if (__$$isMiniApp) {`,
+    `    const __$$event = __$$args[0];`,
+    ...referencedLocalVariables.map((localVar) => `const ${localVar} = __$$event.target.dataset.${localVar};`),
+    `    return (${valueExpr}).apply(this, __$$args);`,
+    `  } else {`,
+    `    return (${valueExpr}).apply(this, __$$args);`,
+    `  }`,
+    `}`,
+  ].join('\n');
+
+  return [
+    ...referencedLocalVariables.map((localVar) => ({
+      type: PIECE_TYPE.ATTR,
+      value: `data-${changeCase.snake(localVar)}={${localVar}}`,
+    })),
+    {
+      type: PIECE_TYPE.ATTR,
+      value: `${attrName}={${wrappedAttrValueExpr}}`,
+    },
+  ];
+}
+
+function runInNewScope<T>({
+  scopeHost,
+  newScopeOwnVariables,
+  run,
+}: {
+  scopeHost: {
+    scopeBindings?: IScopeBindings;
+  };
+  newScopeOwnVariables: string[];
+  run: () => T;
+}): T {
+  const originalScopeBindings = scopeHost.scopeBindings;
+
+  try {
+    const newScope = new ScopeBindings(originalScopeBindings);
+
+    newScopeOwnVariables.forEach((varName) => {
+      newScope.addBinding(varName);
+    });
+
+    scopeHost.scopeBindings = newScope;
+
+    return run();
+  } finally {
+    scopeHost.scopeBindings = originalScopeBindings;
+  }
 }
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
index 86cdace2d..4da909235 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
@@ -36,6 +36,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       },
       dependencies: {
         '@ali/lowcode-datasource-engine': '^0.1.0',
+        'universal-env': '^3.2.0',
         rax: '^1.1.0',
         'rax-app': '^2.0.0',
         'rax-document': '^0.1.0',
diff --git a/packages/code-generator/src/solutions/rax-app.ts b/packages/code-generator/src/solutions/rax-app.ts
index 230c93813..85a0367f6 100644
--- a/packages/code-generator/src/solutions/rax-app.ts
+++ b/packages/code-generator/src/solutions/rax-app.ts
@@ -60,8 +60,6 @@ export default function createIceJsProjectBuilder(): IProjectBuilder {
       htmlEntry: [raxApp.plugins.entryDocument()],
       packageJSON: [raxApp.plugins.packageJSON()],
     },
-    postProcessors: [
-      // prettier() // 暂且禁用 prettier
-    ],
+    postProcessors: process.env.NODE_ENV !== 'test' ? [prettier()] : [],
   });
 }
diff --git a/packages/code-generator/src/utils/OrderedSet.ts b/packages/code-generator/src/utils/OrderedSet.ts
new file mode 100644
index 000000000..3c58ddc73
--- /dev/null
+++ b/packages/code-generator/src/utils/OrderedSet.ts
@@ -0,0 +1,33 @@
+export class OrderedSet<T> {
+  private _set = new Set<T>();
+  private _arr: T[] = [];
+
+  constructor(items?: T[]) {
+    if (items) {
+      this._set = new Set(items);
+      this._arr = items.slice(0);
+    }
+  }
+
+  add(item: T) {
+    if (!this._set.has(item)) {
+      this._set.add(item);
+      this._arr.push(item);
+    }
+  }
+
+  delete(item: T) {
+    if (this._set.has(item)) {
+      this._set.delete(item);
+      this._arr.splice(this._arr.indexOf(item), 1);
+    }
+  }
+
+  has(item: T) {
+    return this._set.has(item);
+  }
+
+  toArray() {
+    return this._arr.slice(0);
+  }
+}
diff --git a/packages/code-generator/src/utils/ScopeBindings.ts b/packages/code-generator/src/utils/ScopeBindings.ts
new file mode 100644
index 000000000..1f6032025
--- /dev/null
+++ b/packages/code-generator/src/utils/ScopeBindings.ts
@@ -0,0 +1,52 @@
+import { OrderedSet } from './OrderedSet';
+
+export interface IScopeBindings {
+  readonly parent: IScopeBindings | null;
+
+  hasBinding(varName: string): boolean;
+  hasOwnBinding(varName: string): boolean;
+
+  addBinding(varName: string): void;
+  removeBinding(varName: string): void;
+
+  getAllBindings(): string[];
+  getAllOwnedBindings(): string[];
+}
+
+export class ScopeBindings implements IScopeBindings {
+  private _bindings = new OrderedSet<string>();
+
+  constructor(public readonly parent: IScopeBindings | null = null) {}
+
+  hasBinding(varName: string): boolean {
+    return this._bindings.has(varName) || !!this.parent?.hasBinding(varName);
+  }
+
+  hasOwnBinding(varName: string): boolean {
+    return this._bindings.has(varName);
+  }
+
+  addBinding(varName: string): void {
+    this._bindings.add(varName);
+  }
+
+  removeBinding(varName: string): void {
+    this._bindings.delete(varName);
+  }
+
+  getAllBindings(): string[] {
+    const allBindings = new OrderedSet(this._bindings.toArray());
+
+    for (let parent = this.parent; parent; parent = parent?.parent) {
+      parent.getAllOwnedBindings().forEach((varName) => {
+        allBindings.add(varName);
+      });
+    }
+
+    return allBindings.toArray();
+  }
+
+  getAllOwnedBindings(): string[] {
+    return this._bindings.toArray();
+  }
+}
diff --git a/packages/code-generator/src/utils/compositeType.ts b/packages/code-generator/src/utils/compositeType.ts
index 6c4e4875a..0993f11c5 100644
--- a/packages/code-generator/src/utils/compositeType.ts
+++ b/packages/code-generator/src/utils/compositeType.ts
@@ -12,22 +12,27 @@ import {
   JSSlot,
   NodeSchema,
   NodeData,
+  CodePiece,
 } from '../types';
 import { generateExpression, generateFunction } from './jsExpression';
+import { IScopeBindings } from './ScopeBindings';
 
 export interface CustomHandlerSet {
-  boolean?: (bool: boolean) => string;
-  number?: (num: number) => string;
-  string?: (str: string) => string;
-  array?: (arr: JSONArray | CompositeArray) => string;
-  object?: (obj: JSONObject | CompositeObject) => string;
-  expression?: (jsExpr: JSExpression) => string;
-  function?: (jsFunc: JSFunction) => string;
-  slot?: (jsSlot: JSSlot) => string;
-  node?: (node: NodeSchema) => string;
-  loopDataExpr?: (loopDataExpr: string) => string;
-  conditionExpr?: (conditionExpr: string) => string;
-  tagName?: (tagName: string) => string;
+  boolean?(this: CustomHandlerSet, bool: boolean): string;
+  number?(this: CustomHandlerSet, num: number): string;
+  string?(this: CustomHandlerSet, str: string): string;
+  array?(this: CustomHandlerSet, arr: JSONArray | CompositeArray): string;
+  object?(this: CustomHandlerSet, obj: JSONObject | CompositeObject): string;
+  expression?(this: CustomHandlerSet, jsExpr: JSExpression): string;
+  function?(this: CustomHandlerSet, jsFunc: JSFunction): string;
+  slot?(this: CustomHandlerSet, jsSlot: JSSlot): string;
+  node?(this: CustomHandlerSet, node: NodeSchema): string;
+  nodeAttrs?(this: CustomHandlerSet, node: NodeSchema): CodePiece[];
+  nodeAttr?(this: CustomHandlerSet, attrName: string, attrValue: CompositeValue): CodePiece[];
+  loopDataExpr?(this: CustomHandlerSet, loopDataExpr: string): string;
+  conditionExpr?(this: CustomHandlerSet, conditionExpr: string): string;
+  tagName?(this: CustomHandlerSet, tagName: string): string;
+  scopeBindings?: IScopeBindings;
 }
 
 function generateArray(value: CompositeArray, handlers: CustomHandlerSet): string {
diff --git a/packages/code-generator/src/utils/expressionParser.ts b/packages/code-generator/src/utils/expressionParser.ts
new file mode 100644
index 000000000..0b7755171
--- /dev/null
+++ b/packages/code-generator/src/utils/expressionParser.ts
@@ -0,0 +1,239 @@
+import * as parser from '@babel/parser';
+import generate from '@babel/generator';
+import traverse, { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+import { isIdentifier, Node } from '@babel/types';
+
+import { OrderedSet } from './OrderedSet';
+
+export class ParseError extends Error {
+  constructor(public readonly expr: string, public readonly detail: unknown) {
+    super(`Failed to parse expression "${expr}"`);
+    Object.setPrototypeOf(this, new.target.prototype);
+  }
+}
+
+const MAYBE_EXPRESSIONS: {
+  [k in Node['type']]?: {
+    // fields: Array<keyof (Node & { type: k })>
+    fields: string[] | ((node: Node) => string[]);
+  };
+} = {
+  ArrayExpression: { fields: ['elements'] },
+  AssignmentExpression: { fields: ['left', 'right'] },
+  BinaryExpression: { fields: ['left', 'right'] },
+  CallExpression: { fields: ['arguments', 'callee'] },
+  ConditionalExpression: { fields: ['test', 'consequent', 'alternate'] },
+  DoWhileStatement: { fields: ['test'] },
+  ExpressionStatement: { fields: ['expression'] },
+  ForInStatement: { fields: ['right'] },
+  ForStatement: { fields: ['init', 'test', 'update'] },
+  IfStatement: { fields: ['test'] },
+  LogicalExpression: { fields: ['left', 'right'] },
+  MemberExpression: {
+    fields: (node) => (node.type === 'MemberExpression' && node.computed ? ['object', 'property'] : ['object']),
+  },
+  NewExpression: { fields: ['callee', 'arguments'] },
+  ObjectMethod: {
+    fields: (node) => (node.type === 'ObjectMethod' && node.computed ? ['key'] : []),
+  },
+  ObjectProperty: {
+    fields: (node) => (node.type === 'ObjectProperty' && node.computed ? ['key', 'value'] : ['value']),
+  },
+  ReturnStatement: { fields: ['argument'] },
+  SequenceExpression: { fields: ['expressions'] },
+  ParenthesizedExpression: { fields: ['expression'] },
+  SwitchCase: { fields: ['test'] },
+  SwitchStatement: { fields: ['discriminant'] },
+  ThrowStatement: { fields: ['argument'] },
+  UnaryExpression: { fields: ['argument'] },
+  UpdateExpression: { fields: ['argument'] },
+  VariableDeclarator: { fields: ['init'] },
+  WhileStatement: { fields: ['test'] },
+  WithStatement: { fields: ['object'] },
+  AssignmentPattern: { fields: ['right'] },
+  ArrowFunctionExpression: { fields: ['body'] },
+  ClassExpression: { fields: ['superClass'] },
+  ClassDeclaration: { fields: ['superClass'] },
+  ExportDefaultDeclaration: { fields: ['declaration'] },
+  ForOfStatement: { fields: ['right'] },
+  ClassMethod: { fields: (node) => (node.type === 'ClassMethod' && node.computed ? ['key'] : []) },
+  SpreadElement: { fields: ['argument'] },
+  TaggedTemplateExpression: { fields: ['tag'] },
+  TemplateLiteral: { fields: ['expressions'] },
+  YieldExpression: { fields: ['argument'] },
+  AwaitExpression: { fields: ['argument'] },
+  OptionalMemberExpression: {
+    fields: (node) => (node.type === 'OptionalMemberExpression' && node.computed ? ['object', 'property'] : ['object']),
+  },
+  OptionalCallExpression: { fields: ['callee', 'arguments'] },
+  JSXSpreadAttribute: { fields: ['argument'] },
+  BindExpression: { fields: ['object', 'callee'] },
+  ClassProperty: { fields: (node) => (node.type === 'ClassProperty' && node.computed ? ['key', 'value'] : ['value']) },
+  PipelineTopicExpression: { fields: ['expression'] },
+  PipelineBareFunction: { fields: ['callee'] },
+  ClassPrivateProperty: { fields: ['value'] },
+  Decorator: { fields: ['expression'] },
+  TupleExpression: { fields: ['elements'] },
+  TSDeclareMethod: { fields: (node) => (node.type === 'TSDeclareMethod' && node.computed ? ['key'] : []) },
+  TSPropertySignature: {
+    fields: (node) => (node.type === 'TSPropertySignature' && node.computed ? ['key', 'initializer'] : ['initializer']),
+  },
+
+  TSMethodSignature: {
+    fields: (node) => (node.type === 'TSMethodSignature' && node.computed ? ['key'] : []),
+  },
+  TSAsExpression: { fields: ['expression'] },
+  TSTypeAssertion: { fields: ['expression'] },
+  TSEnumDeclaration: { fields: ['initializer'] },
+  TSEnumMember: { fields: ['initializer'] },
+  TSNonNullExpression: { fields: ['expression'] },
+  TSExportAssignment: { fields: ['expression'] },
+};
+
+export type ParseExpressionGetGlobalVariablesOptions = { filter?: (varName: string) => boolean };
+
+const CROSS_THIS_SCOPE_TYPE_NODE: {
+  [k in Node['type']]?: boolean;
+} = {
+  ArrowFunctionExpression: false, // 箭头函数不跨越 this 的 scope
+  FunctionExpression: true,
+  FunctionDeclaration: true,
+  // FunctionTypeAnnotation: false, // 这是 TS 定义
+  // FunctionTypeParam: false, // 这是 TS 定义
+  ClassDeclaration: true,
+  ClassExpression: true,
+  ClassBody: true,
+  ClassImplements: true,
+  ClassMethod: true,
+  ClassPrivateMethod: true,
+  ClassProperty: true,
+  ClassPrivateProperty: true,
+  DeclareClass: true,
+};
+
+export function parseExpressionGetGlobalVariables(
+  expr: string | null | undefined,
+  { filter = (x) => true }: ParseExpressionGetGlobalVariablesOptions = {},
+): string[] {
+  if (!expr) {
+    return [];
+  }
+
+  try {
+    const undeclaredVars = new OrderedSet<string>();
+
+    const ast = parser.parse(`!(${expr});`);
+
+    const addUndeclaredIdentifierIfNeeded = (x: object | null | undefined, path: NodePath<Node>) => {
+      if (isIdentifier(x) && !path.scope.hasBinding(x.name)) {
+        undeclaredVars.add(x.name);
+      }
+    };
+
+    traverse(ast, {
+      enter(path) {
+        const node = path.node;
+        const expressionFields = MAYBE_EXPRESSIONS[node.type]?.fields;
+        if (expressionFields) {
+          (typeof expressionFields === 'function' ? expressionFields(node) : expressionFields).forEach((fieldName) => {
+            const fieldValue = node[fieldName as keyof typeof node];
+            if (typeof fieldValue === 'object') {
+              if (Array.isArray(fieldValue)) {
+                fieldValue.forEach((item) => {
+                  addUndeclaredIdentifierIfNeeded(item, path);
+                });
+              } else {
+                addUndeclaredIdentifierIfNeeded(fieldValue, path);
+              }
+            }
+          });
+        }
+      },
+    });
+
+    return undeclaredVars.toArray().filter(filter);
+  } catch (e) {
+    throw new ParseError(expr, e);
+  }
+}
+
+export function parseExpressionConvertThis2Context(
+  expr: string,
+  contextName: string = '__$$context',
+  localVariables: string[] = [],
+): string {
+  if (!expr) {
+    return expr;
+  }
+
+  try {
+    const exprAst = parser.parseExpression(expr);
+    const exprWrapAst = t.expressionStatement(exprAst);
+    const fileAst = t.file(t.program([exprWrapAst]));
+
+    const localVariablesSet = new Set(localVariables);
+
+    let thisScopeLevel = CROSS_THIS_SCOPE_TYPE_NODE[exprAst.type] ? -1 : 0;
+    traverse(fileAst, {
+      enter(path) {
+        if (CROSS_THIS_SCOPE_TYPE_NODE[path.node.type]) {
+          thisScopeLevel++;
+        }
+      },
+      exit(path) {
+        if (CROSS_THIS_SCOPE_TYPE_NODE[path.node.type]) {
+          thisScopeLevel--;
+        }
+      },
+      MemberExpression(path) {
+        if (!path.isMemberExpression()) {
+          return;
+        }
+
+        const obj = path.get('object');
+        if (!obj.isThisExpression()) {
+          return;
+        }
+
+        // 处理局部变量
+        if (!path.node.computed) {
+          const prop = path.get('property');
+          if (prop.isIdentifier() && localVariablesSet.has(prop.node.name)) {
+            path.replaceWith(t.identifier(prop.node.name));
+            return;
+          }
+        }
+
+        // 替换 this (只在顶层替换)
+        if (thisScopeLevel <= 0) {
+          obj.replaceWith(t.identifier(contextName));
+        }
+      },
+      ThisExpression(path) {
+        if (!path.isThisExpression()) {
+          return;
+        }
+
+        // MemberExpression 中的 this.xxx 已经处理过了
+        if (path.parent.type === 'MemberExpression') {
+          return;
+        }
+
+        if (thisScopeLevel <= 0) {
+          path.replaceWith(t.identifier(contextName));
+        }
+      },
+    });
+
+    const { code } = generate(exprWrapAst.expression, { sourceMaps: false });
+    return code;
+  } catch (e) {
+    // throw new ParseError(expr, e);
+    throw e;
+  }
+}
+
+function indent(level: number) {
+  return ' '.repeat(level);
+}
diff --git a/packages/code-generator/src/utils/nodeToJSX.ts b/packages/code-generator/src/utils/nodeToJSX.ts
index a6fe8614a..7b5b96c6f 100644
--- a/packages/code-generator/src/utils/nodeToJSX.ts
+++ b/packages/code-generator/src/utils/nodeToJSX.ts
@@ -35,11 +35,21 @@ export function handleChildren(children: NodeData | NodeData[], handlers: Handle
   }
 }
 
-export function generateAttr(attrName: string, attrValue: CompositeValue, handlers: CustomHandlerSet): CodePiece[] {
+export function generateAttr(
+  attrName: string,
+  attrValue: CompositeValue,
+  customHandlers: CustomHandlerSet,
+): CodePiece[] {
+  if (customHandlers.nodeAttr) {
+    return customHandlers.nodeAttr(attrName, attrValue);
+  }
+
+  // TODO: 这两个为啥要特殊处理？？
   if (attrName === 'initValue' || attrName === 'labelCol') {
     return [];
   }
-  const [isString, valueStr] = generateCompositeType(attrValue, handlers);
+
+  const [isString, valueStr] = generateCompositeType(attrValue, customHandlers);
   return [
     {
       value: `${attrName}=${isString ? `"${valueStr}"` : `{${valueStr}}`}`,
@@ -48,7 +58,11 @@ export function generateAttr(attrName: string, attrValue: CompositeValue, handle
   ];
 }
 
-export function generateAttrs(nodeItem: NodeSchema, handlers: CustomHandlerSet): CodePiece[] {
+export function generateAttrs(nodeItem: NodeSchema, customHandlers: CustomHandlerSet): CodePiece[] {
+  if (customHandlers.nodeAttrs) {
+    return customHandlers.nodeAttrs(nodeItem);
+  }
+
   const { props } = nodeItem;
 
   let pieces: CodePiece[] = [];
@@ -56,12 +70,12 @@ export function generateAttrs(nodeItem: NodeSchema, handlers: CustomHandlerSet):
   if (props) {
     if (!Array.isArray(props)) {
       Object.keys(props).forEach((propName: string) => {
-        pieces = pieces.concat(generateAttr(propName, props[propName], handlers));
+        pieces = pieces.concat(generateAttr(propName, props[propName], customHandlers));
       });
     } else {
       props.forEach((prop) => {
         if (prop.name && !prop.spread) {
-          pieces = pieces.concat(generateAttr(prop.name, prop.value, handlers));
+          pieces = pieces.concat(generateAttr(prop.name, prop.value, customHandlers));
         }
 
         // TODO: 处理 spread 场景（<Xxx {...(something)}/>)
@@ -97,10 +111,11 @@ export function generateReactCtrlLine(nodeItem: NodeSchema, handlers: CustomHand
     const loopItemName = nodeItem.loopArgs?.[0] || 'item';
     const loopIndexName = nodeItem.loopArgs?.[1] || 'index';
 
-    // TODO: 静态的值可以抽离出来？
-    const loopDataExpr = (handlers.loopDataExpr || _.identity)(
-      isJSExpression(nodeItem.loop) ? `(${nodeItem.loop.value})` : `(${JSON.stringify(nodeItem.loop)})`,
-    );
+    const rawLoopDataExpr = isJSExpression(nodeItem.loop)
+      ? `(${nodeItem.loop.value})`
+      : `(${JSON.stringify(nodeItem.loop)})`;
+
+    const loopDataExpr = handlers.loopDataExpr ? handlers.loopDataExpr(rawLoopDataExpr) : rawLoopDataExpr;
 
     pieces.unshift({
       value: `${loopDataExpr}.map((${loopItemName}, ${loopIndexName}) => (`,
@@ -115,7 +130,8 @@ export function generateReactCtrlLine(nodeItem: NodeSchema, handlers: CustomHand
 
   if (nodeItem.condition) {
     const [isString, value] = generateCompositeType(nodeItem.condition, handlers);
-    const conditionExpr = (handlers.conditionExpr || _.identity)(isString ? `'${value}'` : value);
+    const rawConditionExpr = isString ? `'${value}'` : value;
+    const conditionExpr = handlers.conditionExpr ? handlers.conditionExpr(rawConditionExpr) : rawConditionExpr;
 
     pieces.unshift({
       value: `(${conditionExpr}) && (`,
@@ -149,7 +165,8 @@ export function linkPieces(pieces: CodePiece[], handlers: CustomHandlerSet): str
     throw new CodeGeneratorError('One node only need one tag define');
   }
 
-  const tagName = (handlers.tagName || _.identity)(tagsPieces[0].value);
+  const rawTagName = tagsPieces[0].value;
+  const tagName = handlers.tagName ? handlers.tagName(rawTagName) : rawTagName;
 
   const beforeParts = pieces
     .filter((p) => p.type === PIECE_TYPE.BEFORE)
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
index f2ad5aa15..6d3ae68a5 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@ali/lowcode-datasource-engine": "^0.1.0",
+    "universal-env": "^3.2.0",
     "rax": "^1.1.0",
     "rax-app": "^2.0.0",
     "rax-document": "^0.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
index 89960d6ef..bb5687ef1 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
@@ -8,6 +8,8 @@ import Text from 'rax-text';
 
 import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
 
+import { isMiniApp as __$$isMiniApp } from 'universal-env';
+
 import __$$projectUtils from '../../utils';
 
 import './index.css';
@@ -50,7 +52,7 @@ class Home$$Page extends Component {
         return self._dataSourceEngine.dataSourceMap || {};
       },
       async reloadDataSource() {
-        self._dataSourceEngine.reloadDataSource();
+        await self._dataSourceEngine.reloadDataSource();
       },
       get utils() {
         return self._utils;
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
index f14719b11..893e55365 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@ali/lowcode-datasource-engine": "^0.1.0",
+    "universal-env": "^3.2.0",
     "rax": "^1.1.0",
     "rax-app": "^2.0.0",
     "rax-document": "^0.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index 1cad2aa0c..42be52c51 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -10,12 +10,15 @@ import Image from 'rax-image';
 
 import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
 
+import { isMiniApp as __$$isMiniApp } from 'universal-env';
+
 import __$$projectUtils from '../../utils';
 
 import './index.css';
 
 class Home$$Page extends Component {
   state = {
+    clickCount: 0,
     user: { name: '张三', age: 18, avatar: 'https://gw.alicdn.com/tfs/TB1Ui9BMkY2gK0jSZFgXXc5OFXa-50-50.png' },
     orders: [
       {
@@ -61,7 +64,7 @@ class Home$$Page extends Component {
               source={{ uri: __$$eval(() => __$$context.state.user.avatar) }}
               style={{ width: '32px', height: '32px' }}
             />
-            <View onClick={__$$eval(() => __$$context.hello)}>
+            <View onClick={__$$context.hello}>
               <Text>{__$$eval(() => __$$context.state.user.name)}</Text>
               <Text>{__$$eval(() => __$$context.state.user.age)}岁</Text>
             </View>
@@ -70,29 +73,47 @@ class Home$$Page extends Component {
         <View>
           <Text>=== Orders: ===</Text>
         </View>
-        {__$$evalArray(() => __$$context.state.orders).map((item, index) => (
+        {__$$evalArray(() => __$$context.state.orders).map((order, index) => (
           <View
             style={{ flexDirection: 'row' }}
-            onClick={__$$eval(
-              () =>
-                function () {
-                  __$$context.utils.recordEvent(`CLICK_ORDER`, item.title);
-                },
-            )}
+            data-order={order}
+            onClick={(...__$$args) => {
+              if (__$$isMiniApp) {
+                const __$$event = __$$args[0];
+                const order = __$$event.target.dataset.order;
+                return function () {
+                  __$$context.utils.recordEvent(`CLICK_ORDER`, order.title);
+                }.apply(this, __$$args);
+              } else {
+                return function () {
+                  __$$context.utils.recordEvent(`CLICK_ORDER`, order.title);
+                }.apply(this, __$$args);
+              }
+            }}
           >
             <View>
-              <Image source={{ uri: __$$eval(() => item.coverUrl) }} style={{ width: '80px', height: '60px' }} />
+              <Image source={{ uri: __$$eval(() => order.coverUrl) }} style={{ width: '80px', height: '60px' }} />
             </View>
             <View>
-              <Text>{__$$eval(() => item.title)}</Text>
-              <Text>{__$$eval(() => __$$context.utils.formatPrice(item.price, '元'))}</Text>
+              <Text>{__$$eval(() => order.title)}</Text>
+              <Text>{__$$eval(() => __$$context.utils.formatPrice(order.price, '元'))}</Text>
             </View>
           </View>
         ))}
+        <View
+          onClick={function () {
+            __$$context.setState({
+              clickCount: __$$context.state.clickCount + 1,
+            });
+          }}
+        >
+          <Text>点击次数：{__$$eval(() => __$$context.state.clickCount)}(点击加 1)</Text>
+        </View>
         <View>
           <Text>操作提示：</Text>
           <Text>1. 点击会员名，可以弹出 Toast "Hello xxx!"</Text>
           <Text>2. 点击订单，会记录点击的订单信息，并弹出 Toast 提示</Text>
+          <Text>3. 最下面的【点击次数】，点一次应该加 1</Text>
         </View>
       </View>
     );
@@ -112,7 +133,7 @@ class Home$$Page extends Component {
         return self._dataSourceEngine.dataSourceMap || {};
       },
       async reloadDataSource() {
-        self._dataSourceEngine.reloadDataSource();
+        await self._dataSourceEngine.reloadDataSource();
       },
       get utils() {
         return self._utils;
diff --git a/packages/code-generator/test-cases/rax-app/demo2/schema.json5 b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
index d735dafde..dabdd8aa1 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
@@ -36,6 +36,7 @@
       componentName: 'Page',
       fileName: 'home',
       state: {
+        clickCount: 0,
         user: { name: '张三', age: 18, avatar: 'https://gw.alicdn.com/tfs/TB1Ui9BMkY2gK0jSZFgXXc5OFXa-50-50.png' },
         orders: [
           {
@@ -176,11 +177,12 @@
             type: 'JSExpression',
             value: 'this.state.orders',
           },
+          loopArgs: ['order', 'index'],
           props: {
             style: { flexDirection: 'row' },
             onClick: {
               type: 'JSFunction',
-              value: 'function(){ this.utils.recordEvent(`CLICK_ORDER`, this.item.title) }',
+              value: 'function(){ this.utils.recordEvent(`CLICK_ORDER`, this.order.title) }',
             },
           },
           children: [
@@ -193,7 +195,7 @@
                     source: {
                       uri: {
                         type: 'JSExpression',
-                        value: 'this.item.coverUrl',
+                        value: 'this.order.coverUrl',
                       },
                     },
                     style: {
@@ -211,20 +213,42 @@
                   componentName: 'Text',
                   children: {
                     type: 'JSExpression',
-                    value: 'this.item.title',
+                    value: 'this.order.title',
                   },
                 },
                 {
                   componentName: 'Text',
                   children: {
                     type: 'JSExpression',
-                    value: 'this.utils.formatPrice(this.item.price, "元")',
+                    value: 'this.utils.formatPrice(this.order.price, "元")',
                   },
                 },
               ],
             },
           ],
         },
+        {
+          componentName: 'View',
+          props: {
+            onClick: {
+              type: 'JSFunction',
+              value: 'function (){ this.setState({ clickCount: this.state.clickCount + 1 }) }',
+            },
+          },
+          children: [
+            {
+              componentName: 'Text',
+              children: [
+                '点击次数：',
+                {
+                  type: 'JSExpression',
+                  value: 'this.state.clickCount',
+                },
+                '(点击加 1)',
+              ],
+            },
+          ],
+        },
         {
           componentName: 'View',
           children: [
@@ -243,6 +267,11 @@
               props: {},
               children: '2. 点击订单，会记录点击的订单信息，并弹出 Toast 提示',
             },
+            {
+              componentName: 'Text',
+              props: {},
+              children: '3. 最下面的【点击次数】，点一次应该加 1',
+            },
           ],
         },
       ],
diff --git a/packages/code-generator/test/utils/expressionParser/parseExpressionConvertThis2Context.test.ts b/packages/code-generator/test/utils/expressionParser/parseExpressionConvertThis2Context.test.ts
new file mode 100644
index 000000000..90c30b3a0
--- /dev/null
+++ b/packages/code-generator/test/utils/expressionParser/parseExpressionConvertThis2Context.test.ts
@@ -0,0 +1,79 @@
+import test from 'ava';
+import type { ExecutionContext, Macro } from 'ava';
+import { parseExpressionConvertThis2Context } from '../../../src/utils/expressionParser';
+
+const macro: Macro<any[]> = (
+  t: ExecutionContext<{}>,
+  input: [string, string, string[]],
+  expected: string,
+  error?: { message: RegExp },
+) => {
+  if (!error) {
+    t.deepEqual(parseExpressionConvertThis2Context(input[0], input[1], input[2]), expected);
+  } else {
+    t.throws(() => {
+      t.deepEqual(parseExpressionConvertThis2Context(input[0], input[1], input[2]), expected);
+    }, error.message);
+  }
+};
+
+macro.title = (providedTitle: string | undefined, ...args: any[]): string => {
+  const [input, expected] = args;
+  return providedTitle || `after convert this to context "${input[0]}" should be "${expected}"`.replace(/\n|\s+/g, ' ');
+};
+
+test(macro, ['this.hello', '__$$context', []], '__$$context.hello');
+test(macro, ['this.utils.recordEvent', '__$$context', []], '__$$context.utils.recordEvent');
+
+test(
+  macro,
+  ['this.utils.recordEvent.bind(this)', '__$$context', []],
+  '__$$context.utils.recordEvent.bind(__$$context)',
+);
+
+test(macro, ['this.item', '__$$context', ['item']], 'item');
+
+test(macro, ['this.user.name', '__$$context', ['user']], 'user.name');
+
+test(macro, ['function (){}', '__$$context', []], 'function () {}');
+
+test(
+  macro,
+  ['function (){ this.utils.Toast.show("Hello world!") }', '__$$context'],
+  'function () {\n  __$$context.utils.Toast.show("Hello world!");\n}',
+);
+
+// 变量能被替换掉
+test(
+  macro,
+  ['function (){ this.utils.recordEvent("click", this.item) }', '__$$context', ['item']],
+  'function () {\n  __$$context.utils.recordEvent("click", item);\n}',
+);
+
+// 只替换顶层的，不替换内层
+test(
+  macro,
+  ['function (){ return function (){ this.utils.recordEvent("click", this.item) } }', '__$$context', ['item']],
+  'function () {\n  return function () {\n    this.utils.recordEvent("click", item);\n  };\n}',
+);
+
+// 只替换顶层的，不替换内层
+test(
+  macro,
+  ['function onClick(){ return function (){ this.utils.recordEvent("click", this.item) } }', '__$$context', ['item']],
+  'function onClick() {\n  return function () {\n    this.utils.recordEvent("click", item);\n  };\n}',
+);
+
+// 只替换顶层的，不替换内层
+test(
+  macro,
+  ['() => { return function (){ this.utils.recordEvent("click", this.item) } }', '__$$context', ['item']],
+  '() => {\n  return function () {\n    this.utils.recordEvent("click", item);\n  };\n}',
+);
+
+// 但是若内层有用箭头函数定义的则还是要替换下
+test(
+  macro,
+  ['() => { return () => { this.utils.recordEvent("click", this.item) } }', '__$$context', ['item']],
+  '() => {\n  return () => {\n    __$$context.utils.recordEvent("click", item);\n  };\n}',
+);
diff --git a/packages/code-generator/test/utils/expressionParser/parseExpressionGetGlobalVariables.test.ts b/packages/code-generator/test/utils/expressionParser/parseExpressionGetGlobalVariables.test.ts
new file mode 100644
index 000000000..d91566b9e
--- /dev/null
+++ b/packages/code-generator/test/utils/expressionParser/parseExpressionGetGlobalVariables.test.ts
@@ -0,0 +1,114 @@
+import test from 'ava';
+import type { ExecutionContext, Macro } from 'ava';
+import {
+  parseExpressionGetGlobalVariables,
+  ParseExpressionGetGlobalVariablesOptions,
+} from '../../../src/utils/expressionParser';
+
+const macro: Macro<any[]> = (
+  t: ExecutionContext<{}>,
+  input: [string | null | undefined, ParseExpressionGetGlobalVariablesOptions],
+  expected: string[],
+  error?: { message: RegExp },
+) => {
+  if (!error) {
+    t.deepEqual(parseExpressionGetGlobalVariables(input[0], input[1]), expected);
+  } else {
+    t.throws(() => {
+      t.deepEqual(parseExpressionGetGlobalVariables(input[0], input[1]), expected);
+    }, error.message);
+  }
+};
+
+macro.title = (providedTitle: string | undefined, ...args: any[]): string => {
+  const [input, expected] = args;
+  return providedTitle || `global variables of "${input[0]}" should be "${expected.join(', ')}"`;
+};
+
+test(macro, ['function (){ }', {}], []);
+test(macro, ['function (){ __$$context.utils.Toast.show("Hello world!") }', {}], ['__$$context']);
+
+test(macro, ['function (){ __$$context.utils.formatPrice(item.price1, "元") }', {}], ['__$$context', 'item']);
+
+test(
+  macro,
+  [
+    'function (){ __$$context.utils.formatPrice(item2, "元"); }',
+    { filter: (varName: string) => !/^__\$\$/.test(varName) },
+  ],
+  ['item2'],
+);
+
+test(
+  macro,
+  [
+    'function (){ __$$context.utils.log(item3, [item4, item5]); }',
+    { filter: (varName: string) => !/^__\$\$/.test(varName) },
+  ],
+  ['item3', 'item4', 'item5'],
+);
+
+test(
+  macro,
+  ['function (){ item3[item4]("Hello"); }', { filter: (varName: string) => !/^__\$\$/.test(varName) }],
+  ['item3', 'item4'],
+);
+
+test(macro, ['function (){ item3("Hello"); }', { filter: (varName: string) => !/^__\$\$/.test(varName) }], ['item3']);
+
+test(
+  macro,
+  ['function foo(){ foo[item3]("Hello"); }', { filter: (varName: string) => !/^__\$\$/.test(varName) }],
+  ['item3'],
+);
+
+// isAssignmentExpression/right
+test(
+  macro,
+  ['function (){ let foo; foo = item3; foo(); }', { filter: (varName: string) => !/^__\$\$/.test(varName) }],
+  ['item3'],
+);
+
+// isAssignmentExpression/left
+test(
+  macro,
+  ['function (){ foo = item3; foo(); }', { filter: (varName: string) => !/^__\$\$/.test(varName) }],
+  ['foo', 'item3'],
+);
+
+// isVariableDeclarator
+test(
+  macro,
+  ['function (){ const foo = item3; foo(); }', { filter: (varName: string) => !/^__\$\$/.test(varName) }],
+  ['item3'],
+);
+
+// isVariableDeclarator
+test(
+  macro,
+  ['function (){ let foo = item3; foo(); }', { filter: (varName: string) => !/^__\$\$/.test(varName) }],
+  ['item3'],
+);
+
+// isVariableDeclarator
+test(
+  macro,
+  ['function (){ var foo = item3; foo(); }', { filter: (varName: string) => !/^__\$\$/.test(varName) }],
+  ['item3'],
+);
+
+// isTemplateLiteral
+test(
+  macro,
+  ['function (){ console.log(`Hello ${item3};`); }', { filter: (varName: string) => !/^__\$\$/.test(varName) }],
+  ['console', 'item3'],
+);
+
+// isBinaryExpression
+test(
+  macro,
+  ['function (){ console.log(item2 | item3); }', { filter: (varName: string) => !/^__\$\$/.test(varName) }],
+  ['console', 'item2', 'item3'],
+);
+
+// TODO: 补充更多类型的测试用例

From e33a95e4790f9d4713d4045bcc75ea60e38cc174 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Thu, 13 Aug 2020 21:04:21 +0800
Subject: [PATCH 29/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=20didMount=20=E5=92=8C=20willUnmount=20=E4=B8=A4=E4=B8=AA?=
 =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E7=9A=84=E7=94=9F=E5=91=BD=E5=91=A8=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/plugins/component/rax/const.ts        |   6 +
 .../plugins/component/rax/containerClass.ts   |  23 +++-
 .../component/rax/containerLifeCycle.ts       | 121 +++++++++++-------
 .../plugins/component/rax/containerMethods.ts |   6 +-
 .../demo-project/src/pages/Home/index.jsx     |   2 +
 .../demo-project/src/pages/Home/index.jsx     |  31 +++++
 .../test-cases/rax-app/demo2/schema.json5     |  11 +-
 7 files changed, 153 insertions(+), 47 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/const.ts b/packages/code-generator/src/plugins/component/rax/const.ts
index d604b27e9..a0a07b550 100644
--- a/packages/code-generator/src/plugins/component/rax/const.ts
+++ b/packages/code-generator/src/plugins/component/rax/const.ts
@@ -2,6 +2,9 @@ export const RAX_CHUNK_NAME = {
   ClassDidMountBegin: 'RaxComponentClassDidMountBegin',
   ClassDidMountContent: 'RaxComponentClassDidMountContent',
   ClassDidMountEnd: 'RaxComponentClassDidMountEnd',
+  ClassWillUnmountBegin: 'RaxComponentClassWillUnmountBegin',
+  ClassWillUnmountContent: 'RaxComponentClassWillUnmountContent',
+  ClassWillUnmountEnd: 'RaxComponentClassWillUnmountEnd',
   ClassRenderBegin: 'RaxComponentClassRenderBegin',
   ClassRenderPre: 'RaxComponentClassRenderPre',
   ClassRenderJSX: 'RaxComponentClassRenderJSX',
@@ -9,4 +12,7 @@ export const RAX_CHUNK_NAME = {
   MethodsBegin: 'RaxComponentMethodsBegin',
   MethodsContent: 'RaxComponentMethodsContent',
   MethodsEnd: 'RaxComponentMethodsEnd',
+  LifeCyclesBegin: 'RaxComponentLifeCyclesBegin',
+  LifeCyclesContent: 'RaxComponentLifeCyclesContent',
+  LifeCyclesEnd: 'RaxComponentLifeCyclesEnd',
 };
diff --git a/packages/code-generator/src/plugins/component/rax/containerClass.ts b/packages/code-generator/src/plugins/component/rax/containerClass.ts
index 4ec4b6245..0db104861 100644
--- a/packages/code-generator/src/plugins/component/rax/containerClass.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerClass.ts
@@ -84,12 +84,33 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       linkAfter: [RAX_CHUNK_NAME.ClassDidMountBegin, RAX_CHUNK_NAME.ClassDidMountContent],
     });
 
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JSX,
+      name: RAX_CHUNK_NAME.ClassWillUnmountBegin,
+      content: `componentWillUnmount() {`,
+      linkAfter: [
+        CLASS_DEFINE_CHUNK_NAME.Start,
+        CLASS_DEFINE_CHUNK_NAME.InsVar,
+        CLASS_DEFINE_CHUNK_NAME.InsMethod,
+        RAX_CHUNK_NAME.ClassDidMountEnd,
+      ],
+    });
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JSX,
+      name: RAX_CHUNK_NAME.ClassWillUnmountEnd,
+      content: `}`,
+      linkAfter: [RAX_CHUNK_NAME.ClassWillUnmountBegin, RAX_CHUNK_NAME.ClassWillUnmountContent],
+    });
+
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: FileType.JSX,
       name: RAX_CHUNK_NAME.ClassRenderBegin,
       content: 'render() {',
-      linkAfter: [RAX_CHUNK_NAME.ClassDidMountEnd],
+      linkAfter: [RAX_CHUNK_NAME.ClassDidMountEnd, RAX_CHUNK_NAME.ClassWillUnmountEnd],
     });
 
     next.chunks.push({
diff --git a/packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts b/packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts
index ea9d92ee2..ffbf56cc6 100644
--- a/packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts
@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import { CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
 import { RAX_CHUNK_NAME } from './const';
 
@@ -7,7 +8,6 @@ import {
   BuilderComponentPlugin,
   BuilderComponentPluginFactory,
   ChunkType,
-  CodeGeneratorError,
   FileType,
   ICodeChunk,
   ICodeStruct,
@@ -34,53 +34,86 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       ...pre,
     };
 
-    // TODO: Rax 程序的生命周期暂未明确，此处先屏蔽
-    // @see https://yuque.antfin-inc.com/mo/spec/spec-low-code-building-schema#XMeF5
+    // Rax 先只支持 didMount 和 willUnmount 吧
 
-    // const ir = next.ir as IContainerInfo;
+    const ir = next.ir as IContainerInfo;
+    const lifeCycles = ir.lifeCycles;
 
-    // if (ir.lifeCycles) {
-    //   const lifeCycles = ir.lifeCycles;
-    //   const chunks = Object.keys(lifeCycles).map<ICodeChunk>(lifeCycleName => {
-    //     const normalizeName = cfg.normalizeNameMapping[lifeCycleName] || lifeCycleName;
-    //     const exportName = cfg.exportNameMapping[lifeCycleName] || lifeCycleName;
-    //     if (normalizeName === 'constructor') {
-    //       return {
-    //         type: ChunkType.STRING,
-    //         fileType: cfg.fileType,
-    //         name: CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
-    //         content: getFuncExprBody(
-    //           (lifeCycles[lifeCycleName] as JSExpression).value,
-    //         ),
-    //         linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.ConstructorStart]],
-    //       };
-    //     }
-    //     if (normalizeName === 'render') {
-    //       return {
-    //         type: ChunkType.STRING,
-    //         fileType: cfg.fileType,
-    //         name: RAX_CHUNK_NAME.ClassRenderPre,
-    //         content: getFuncExprBody(
-    //           (lifeCycles[lifeCycleName] as JSExpression).value,
-    //         ),
-    //         linkAfter: [RAX_CHUNK_NAME.ClassRenderStart],
-    //       };
-    //     }
+    if (lifeCycles && !_.isEmpty(lifeCycles)) {
+      Object.entries(lifeCycles).forEach(([lifeCycleName, lifeCycleMethodExpr]) => {
+        const normalizeName = cfg.normalizeNameMapping[lifeCycleName] || lifeCycleName;
+        const exportName = cfg.exportNameMapping[lifeCycleName] || lifeCycleName;
 
-    //     return {
-    //       type: ChunkType.STRING,
-    //       fileType: cfg.fileType,
-    //       name: CLASS_DEFINE_CHUNK_NAME.InsMethod,
-    //       content: transformFuncExpr2MethodMember(
-    //         exportName,
-    //         (lifeCycles[lifeCycleName] as JSExpression).value,
-    //       ),
-    //       linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsMethod]],
-    //     };
-    //   });
+        next.chunks.push({
+          type: ChunkType.STRING,
+          fileType: cfg.fileType,
+          name: RAX_CHUNK_NAME.LifeCyclesContent,
+          content: `${exportName}: (${lifeCycleMethodExpr.value}),`,
+          linkAfter: [RAX_CHUNK_NAME.LifeCyclesBegin],
+        });
 
-    //   next.chunks.push.apply(next.chunks, chunks);
-    // }
+        if (normalizeName === 'didMount') {
+          next.chunks.push({
+            type: ChunkType.STRING,
+            fileType: cfg.fileType,
+            name: RAX_CHUNK_NAME.ClassDidMountContent,
+            content: `this._lifeCycles.${exportName}();`,
+            linkAfter: [RAX_CHUNK_NAME.ClassDidMountBegin],
+          });
+        } else if (normalizeName === 'willUnmount') {
+          next.chunks.push({
+            type: ChunkType.STRING,
+            fileType: cfg.fileType,
+            name: RAX_CHUNK_NAME.ClassWillUnmountContent,
+            content: `this._lifeCycles.${exportName}();`,
+            linkAfter: [RAX_CHUNK_NAME.ClassWillUnmountBegin],
+          });
+        } else {
+          // TODO: print warnings? Unknown life cycle
+        }
+      });
+
+      next.chunks.push({
+        type: ChunkType.STRING,
+        fileType: cfg.fileType,
+        name: CLASS_DEFINE_CHUNK_NAME.InsVar,
+        content: `_lifeCycles = this._defineLifeCycles();`,
+        linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
+      });
+
+      next.chunks.push({
+        type: ChunkType.STRING,
+        fileType: cfg.fileType,
+        name: RAX_CHUNK_NAME.LifeCyclesBegin,
+        content: `
+          _defineLifeCycles() {
+            const __$$lifeCycles = ({
+        `,
+        linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd, CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod],
+      });
+
+      next.chunks.push({
+        type: ChunkType.STRING,
+        fileType: cfg.fileType,
+        name: RAX_CHUNK_NAME.LifeCyclesEnd,
+        content: `
+            });
+
+            // 为所有的方法绑定上下文
+            Object.entries(__$$lifeCycles).forEach(([lifeCycleName, lifeCycleMethod]) => {
+              if (typeof lifeCycleMethod === 'function') {
+                __$$lifeCycles[lifeCycleName] = (...args) => {
+                  return lifeCycleMethod.apply(this._context, args);
+                }
+              }
+            });
+
+            return __$$lifeCycles;
+          }
+        `,
+        linkAfter: [RAX_CHUNK_NAME.LifeCyclesBegin, RAX_CHUNK_NAME.LifeCyclesContent],
+      });
+    }
 
     return next;
   };
diff --git a/packages/code-generator/src/plugins/component/rax/containerMethods.ts b/packages/code-generator/src/plugins/component/rax/containerMethods.ts
index 50b3b16a3..12621e6e2 100644
--- a/packages/code-generator/src/plugins/component/rax/containerMethods.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerMethods.ts
@@ -46,7 +46,11 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
         _defineMethods() {
           const __$$methods = ({
       `,
-      linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd, CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod],
+      linkAfter: [
+        RAX_CHUNK_NAME.ClassRenderEnd,
+        CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod,
+        RAX_CHUNK_NAME.LifeCyclesEnd,
+      ],
     });
 
     next.chunks.push({
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
index bb5687ef1..1aa9f7e69 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
@@ -28,6 +28,8 @@ class Home$$Page extends Component {
     this._dataSourceEngine.reloadDataSource();
   }
 
+  componentWillUnmount() {}
+
   render() {
     const __$$context = this._context;
 
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index 42be52c51..067cb0830 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -43,8 +43,16 @@ class Home$$Page extends Component {
 
   _utils = this._defineUtils();
 
+  _lifeCycles = this._defineLifeCycles();
+
   componentDidMount() {
     this._dataSourceEngine.reloadDataSource();
+
+    this._lifeCycles.didMount();
+  }
+
+  componentWillUnmount() {
+    this._lifeCycles.willUnmount();
   }
 
   render() {
@@ -179,6 +187,29 @@ class Home$$Page extends Component {
     return utils;
   }
 
+  _defineLifeCycles() {
+    const __$$lifeCycles = {
+      didMount: function didMount() {
+        this.utils.Toast.show(`Hello ${this.state.user.name}!`);
+      },
+
+      willUnmount: function didMount() {
+        this.utils.Toast.show(`Bye, ${this.state.user.name}!`);
+      },
+    };
+
+    // 为所有的方法绑定上下文
+    Object.entries(__$$lifeCycles).forEach(([lifeCycleName, lifeCycleMethod]) => {
+      if (typeof lifeCycleMethod === 'function') {
+        __$$lifeCycles[lifeCycleName] = (...args) => {
+          return lifeCycleMethod.apply(this._context, args);
+        };
+      }
+    });
+
+    return __$$lifeCycles;
+  }
+
   _defineMethods() {
     const __$$methods = {
       hello: function hello() {
diff --git a/packages/code-generator/test-cases/rax-app/demo2/schema.json5 b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
index dabdd8aa1..ec1221ca6 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
@@ -52,7 +52,16 @@
         ],
       },
       props: {},
-      lifeCycles: {},
+      lifeCycles: {
+        didMount: {
+          type: 'JSExpression',
+          value: 'function didMount(){\n  this.utils.Toast.show(`Hello ${this.state.user.name}!`);\n}',
+        },
+        willUnmount: {
+          type: 'JSExpression',
+          value: 'function didMount(){\n  this.utils.Toast.show(`Bye, ${this.state.user.name}!`);\n}',
+        },
+      },
       methods: {
         hello: {
           type: 'JSExpression',

From 78f34ab1ca9982ade3723fcaabdb3cb32b2206da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Thu, 13 Aug 2020 21:16:26 +0800
Subject: [PATCH 30/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E8=A1=A5=E5=85=85?=
 =?UTF-8?q?=E4=B8=80=E4=B8=AA=E9=BB=98=E8=AE=A4=E7=9A=84=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=BA=90=E7=9A=84=E6=9E=84=E5=BB=BA=E5=90=8E=E7=9A=84=E6=A0=B7?=
 =?UTF-8?q?=E5=AD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rax/containerInjectDataSourceEngine.ts    | 27 +++++++++++++++++--
 .../demo-project/src/pages/Home/index.jsx     | 26 +++++++++++-------
 .../test-cases/rax-app/demo2/schema.json5     |  5 +++-
 3 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
index 686cf5bf4..2c8005535 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -1,4 +1,4 @@
-import { DataSourceConfig } from '@ali/lowcode-types';
+import { CompositeValue, DataSourceConfig, isJSExpression, isJSFunction } from '@ali/lowcode-types';
 
 import { CLASS_DEFINE_CHUNK_NAME, COMMON_CHUNK_NAME } from '../../../const/generator';
 
@@ -9,6 +9,7 @@ import {
   FileType,
   ICodeStruct,
 } from '../../../types';
+import { generateUnknownType } from '../../../utils/compositeType';
 import { isContainerSchema } from '../../../utils/schema';
 import { RAX_CHUNK_NAME } from './const';
 
@@ -67,7 +68,15 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       // TODO: 下面的定义应该需要调用 @ali/lowcode-datasource-engine 的方法来搞:
       content: `
         _defineDataSourceList() {
-          return ${JSON.stringify(dataSourceItems)};
+          return (function(){
+            return (${generateUnknownType([
+              ...dataSourceItems.map((item) => ({
+                ...item,
+                isInit: wrapAsFunction(item.isInit),
+                options: wrapAsFunction(item.options),
+              })),
+            ])});
+          }).call(this._context);
         }`,
       linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd],
     });
@@ -78,3 +87,17 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
 };
 
 export default pluginFactory;
+
+function wrapAsFunction(value: CompositeValue): CompositeValue {
+  if (isJSExpression(value) || isJSFunction(value)) {
+    return {
+      type: 'JSExpression',
+      value: `() => (${value.value})`,
+    };
+  }
+
+  return {
+    type: 'JSExpression',
+    value: `() => (${generateUnknownType(value)})`,
+  };
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index 067cb0830..899b98203 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -162,15 +162,23 @@ class Home$$Page extends Component {
   }
 
   _defineDataSourceList() {
-    return [
-      { id: 'urlParams', type: 'urlParams' },
-      { id: 'user', type: 'fetch', options: { method: 'GET', uri: 'https://shs.alibaba-inc.com/mock/1458/demo/user' } },
-      {
-        id: 'orders',
-        type: 'fetch',
-        options: { method: 'GET', uri: 'https://shs.alibaba-inc.com/mock/1458/demo/orders' },
-      },
-    ];
+    return function () {
+      return [
+        { id: 'urlParams', type: 'urlParams', isInit: () => undefined, options: () => undefined },
+        {
+          id: 'user',
+          type: 'fetch',
+          options: () => ({ method: 'GET', uri: 'https://shs.alibaba-inc.com/mock/1458/demo/user' }),
+          isInit: () => undefined,
+        },
+        {
+          id: 'orders',
+          type: 'fetch',
+          options: () => ({ method: 'GET', uri: this.state.user.ordersApiUri }),
+          isInit: () => undefined,
+        },
+      ];
+    }.call(this._context);
   }
 
   _defineUtils() {
diff --git a/packages/code-generator/test-cases/rax-app/demo2/schema.json5 b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
index ec1221ca6..dd6492370 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
@@ -89,7 +89,10 @@
             type: 'fetch',
             options: {
               method: 'GET',
-              uri: 'https://shs.alibaba-inc.com/mock/1458/demo/orders',
+              uri: {
+                type: 'JSExpression',
+                value: 'this.state.user.ordersApiUri',
+              },
             },
           },
         ],

From bb48fe1bd1ff54de1b172fac6ac2fd9f950b5d78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Thu, 13 Aug 2020 23:02:44 +0800
Subject: [PATCH 31/80] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20=E5=B0=86?=
 =?UTF-8?q?=E6=89=80=E6=9C=89=E7=9A=84=20schema=20=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E7=9A=84=E5=AE=9A=E4=B9=89=E9=83=BD=E6=94=B6=E6=95=9B=E5=88=B0?=
 =?UTF-8?q?=20types/schema.ts=20=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/rax/containerInjectDataSourceEngine.ts       | 7 +++++--
 .../plugins/project/framework/rax/plugins/packageJSON.ts   | 2 +-
 packages/code-generator/src/types/core.ts                  | 4 +---
 packages/code-generator/src/utils/schema.ts                | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
index 2c8005535..bd503911a 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -1,5 +1,3 @@
-import { CompositeValue, DataSourceConfig, isJSExpression, isJSFunction } from '@ali/lowcode-types';
-
 import { CLASS_DEFINE_CHUNK_NAME, COMMON_CHUNK_NAME } from '../../../const/generator';
 
 import {
@@ -8,7 +6,12 @@ import {
   ChunkType,
   FileType,
   ICodeStruct,
+  CompositeValue,
+  DataSourceConfig,
+  isJSExpression,
+  isJSFunction,
 } from '../../../types';
+
 import { generateUnknownType } from '../../../utils/compositeType';
 import { isContainerSchema } from '../../../utils/schema';
 import { RAX_CHUNK_NAME } from './const';
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
index 4da909235..f731164ed 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
@@ -1,4 +1,3 @@
-import { NpmInfo } from '@ali/lowcode-types';
 import { COMMON_CHUNK_NAME } from '../../../../../const/generator';
 
 import {
@@ -9,6 +8,7 @@ import {
   ICodeStruct,
   IPackageJSON,
   IProjectInfo,
+  NpmInfo,
 } from '../../../../../types';
 import { isNpmInfo } from '../../../../../utils/schema';
 import { calcCompatibleVersion } from '../../../../../utils/version';
diff --git a/packages/code-generator/src/types/core.ts b/packages/code-generator/src/types/core.ts
index 1d33616e0..c6adf5bbf 100644
--- a/packages/code-generator/src/types/core.ts
+++ b/packages/code-generator/src/types/core.ts
@@ -1,9 +1,7 @@
-import { JSExpression, JSFunction, NodeSchema } from '@ali/lowcode-types';
-
 import { CustomHandlerSet } from '../utils/compositeType';
 import { IParseResult } from './intermediate';
 import { IResultDir, IResultFile } from './result';
-import { IBasicSchema, IProjectSchema } from './schema';
+import { IBasicSchema, IProjectSchema, JSExpression, JSFunction, NodeSchema } from './schema';
 
 export enum FileType {
   CSS = 'css',
diff --git a/packages/code-generator/src/utils/schema.ts b/packages/code-generator/src/utils/schema.ts
index f741bb111..68dc4695f 100644
--- a/packages/code-generator/src/utils/schema.ts
+++ b/packages/code-generator/src/utils/schema.ts
@@ -1,4 +1,4 @@
-import { ContainerSchema, NpmInfo } from '@ali/lowcode-types';
+import { ContainerSchema, NpmInfo } from '../types';
 
 export function isContainerSchema(x: any): x is ContainerSchema {
   return typeof x === 'object' && x && typeof x.componentName === 'string' && typeof x.fileName === 'string';

From b17c9dde662eddfab9a43bc1e97fdc51a17c3024 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Fri, 14 Aug 2020 10:31:17 +0800
Subject: [PATCH 32/80] =?UTF-8?q?test:=20=F0=9F=92=8D=20=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=20Rax=20=E5=87=BA=E7=A0=81=E7=9A=84=20demo1=20=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E7=94=A8=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo1/expected/demo-project/src/pages/Home/index.jsx      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
index 1aa9f7e69..eb9d36f4c 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
@@ -75,7 +75,9 @@ class Home$$Page extends Component {
   }
 
   _defineDataSourceList() {
-    return [];
+    return function () {
+      return [];
+    }.call(this._context);
   }
 
   _defineUtils() {

From 202ade47a2c135f4c34b97931ee4f71036cdef77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Fri, 14 Aug 2020 10:31:47 +0800
Subject: [PATCH 33/80] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=BC=80=E5=8F=91=E6=B5=81=E7=A8=8B=E8=AF=B4=E6=98=8E?=
 =?UTF-8?q?,=E4=BB=A5=E5=A4=87=E5=90=8E=E7=BB=AD=E5=BC=80=E5=8F=91?=
 =?UTF-8?q?=E8=80=85=E5=8F=82=E8=80=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/README.md | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/code-generator/README.md b/packages/code-generator/README.md
index fe71e6c6a..35b2d9aba 100644
--- a/packages/code-generator/README.md
+++ b/packages/code-generator/README.md
@@ -1,9 +1,31 @@
 # 出码模块
 
+详细介绍看这里：<https://yuque.antfin-inc.com/docs/share/2b342641-6e01-4c77-b8e0-30421f55f69b>
+
 ## 安装接入
 
-
 ## 自定义导出
 
-
 ## 开始开发
+
+本项目隶属于 [ali-lowcode-engine](http://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine), 需要和整个 [ali-lowcode-engine](http://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine) 一起开发。
+
+所以先要初始化整个 [ali-lowcode-engine](http://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine) 的环境：
+
+1. 克隆 [ali-lowcode-engine](http://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine): `git clone git@gitlab.alibaba-inc.com:ali-lowcode/ali-lowcode-engine.git`
+2. 运行 `setup` 脚本，初始化环境： `npm run setup`
+
+然后，因为本项目依赖 `@ali/lowcode-types` 所以需要先构建下 `type`，即执行: `lerna run build --scope @ali/lowcode-types`
+
+最后，可以运行 `npm start` 命令启动本地调试（本项目通过 `ava` 进行单元测试，故 `start` 脚本其实就是 `watch` 模式的 `ava`):
+
+```sh
+# 到本项目目录下执行：（推荐）
+npm start
+
+# 或直接执行 ava：
+npx ava --watch
+
+# 或在 ali-lowcode-engine 工程根目录下执行: (不推荐，因为命令太长而且没法响应输入)
+lerna run start --stream --scope @ali/lowcode-code-generator
+```

From 058b087a2b7bc0f2c592ed0c44fc333aed2d92f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Fri, 14 Aug 2020 11:09:31 +0800
Subject: [PATCH 34/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=20Rax=20=E5=87=BA=E7=A0=81=E7=9A=84=E6=97=B6=E5=80=99=E7=9A=84?=
 =?UTF-8?q?=E5=85=A8=E5=B1=80=E6=A0=B7=E5=BC=8F=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/plugins/project/framework/rax/plugins/entry.ts    | 2 ++
 .../plugins/project/framework/rax/plugins/globalStyle.ts  | 4 +---
 .../rax-app/demo1/expected/demo-project/src/app.js        | 2 ++
 .../rax-app/demo1/expected/demo-project/src/global.scss   | 2 --
 .../rax-app/demo2/expected/demo-project/src/app.js        | 2 ++
 .../rax-app/demo2/expected/demo-project/src/global.scss   | 8 ++++++--
 .../code-generator/test-cases/rax-app/demo2/schema.json5  | 1 +
 7 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/entry.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/entry.ts
index e586ac2e2..b838f8abe 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/entry.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/entry.ts
@@ -24,6 +24,8 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       content: `
 import { runApp } from 'rax-app';
 import appConfig from './app.json';
+
+import './global.scss';
 `,
       linkAfter: [],
     });
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/globalStyle.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/globalStyle.ts
index a990947a9..78e409fd2 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/globalStyle.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/globalStyle.ts
@@ -21,9 +21,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       type: ChunkType.STRING,
       fileType: FileType.SCSS, // TODO: 样式文件的类型定制化？
       name: COMMON_CHUNK_NAME.StyleDepsImport,
-      content: `
-// TODO: 引入默认全局样式
-`,
+      content: ``,
       linkAfter: [],
     });
 
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/app.js b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/app.js
index f04a4233b..bc474c6e3 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/app.js
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/app.js
@@ -1,4 +1,6 @@
 import { runApp } from 'rax-app';
 import appConfig from './app.json';
 
+import './global.scss';
+
 runApp(appConfig);
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/global.scss b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/global.scss
index 5a853d5a9..0d203c62a 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/global.scss
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/global.scss
@@ -1,5 +1,3 @@
-// TODO: 引入默认全局样式
-
 body {
   -webkit-font-smoothing: antialiased;
 }
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/app.js b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/app.js
index f04a4233b..bc474c6e3 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/app.js
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/app.js
@@ -1,4 +1,6 @@
 import { runApp } from 'rax-app';
 import appConfig from './app.json';
 
+import './global.scss';
+
 runApp(appConfig);
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/global.scss b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/global.scss
index 5a853d5a9..2b98f3726 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/global.scss
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/global.scss
@@ -1,5 +1,9 @@
-// TODO: 引入默认全局样式
-
 body {
   -webkit-font-smoothing: antialiased;
 }
+
+page,
+body {
+  width: 750rpx;
+  overflow-x: hidden;
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo2/schema.json5 b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
index dd6492370..eb72af581 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
@@ -341,6 +341,7 @@
       },
     },
   ],
+  css: 'page,body{\n  width: 750rpx;\n  overflow-x: hidden;\n}',
   config: {
     sdkVersion: '1.0.3',
     historyMode: 'hash',

From 487f54d2d401fe71969cd471d7049dbfd3511a91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Fri, 14 Aug 2020 16:50:21 +0800
Subject: [PATCH 35/80] =?UTF-8?q?chore:=20=F0=9F=A4=96=20=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E5=87=BA=E7=A0=81=E6=A8=A1=E5=9D=97=E7=9A=84=E6=9E=84?=
 =?UTF-8?q?=E5=BB=BA=E6=89=93=E5=8C=85=E8=84=9A=E6=9C=AC(=E5=8F=82?=
 =?UTF-8?q?=E8=80=83=20types=20=E6=A8=A1=E5=9D=97=E7=9A=84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/build.json   | 5 +++++
 packages/code-generator/package.json | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 packages/code-generator/build.json

diff --git a/packages/code-generator/build.json b/packages/code-generator/build.json
new file mode 100644
index 000000000..bd5cf18dd
--- /dev/null
+++ b/packages/code-generator/build.json
@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "build-plugin-component"
+  ]
+}
diff --git a/packages/code-generator/package.json b/packages/code-generator/package.json
index 3f4af4a45..dca06c932 100644
--- a/packages/code-generator/package.json
+++ b/packages/code-generator/package.json
@@ -3,13 +3,16 @@
   "version": "0.8.10",
   "description": "出码引擎 for LowCode Engine",
   "main": "lib/index.js",
+  "module": "es/index.js",
+  "typings": "es/index.d.ts",
   "files": [
     "lib",
+    "es",
     "demo"
   ],
   "scripts": {
     "start": "ava --watch",
-    "build": "rimraf lib && tsc",
+    "build": "rimraf lib && build-scripts build --skip-demo",
     "demo": "node ./demo/demo.js",
     "test": "ava",
     "template": "node ./tools/createTemplate.js"
@@ -30,6 +33,7 @@
     "short-uuid": "^3.1.1"
   },
   "devDependencies": {
+    "@alib/build-scripts": "^0.1.18",
     "@types/babel__traverse": "^7.0.10",
     "ava": "^1.0.1",
     "rimraf": "^3.0.2",

From dd97a0c92a0b202576516e3351d71437799f817c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=A5=E5=B8=8C?= <armslave.yy@alibaba-inc.com>
Date: Sat, 15 Aug 2020 14:17:48 +0800
Subject: [PATCH 36/80] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Result=20use=20type?=
 =?UTF-8?q?s=20package?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../framework/rax/template/files/.editorconfig.ts        | 8 ++++----
 .../framework/rax/template/files/.eslintignore.ts        | 9 ++++-----
 .../project/framework/rax/template/files/.eslintrc.js.ts | 8 ++++----
 .../project/framework/rax/template/files/.gitignore.ts   | 9 ++++-----
 .../project/framework/rax/template/files/README.md.ts    | 9 ++++-----
 .../project/framework/rax/template/files/abc.json.ts     | 9 ++++-----
 .../project/framework/rax/template/files/build.json.ts   | 9 ++++-----
 .../src/plugins/project/framework/rax/template/index.ts  | 9 +++++----
 8 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/.editorconfig.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/.editorconfig.ts
index a2550904c..8fc51f1f8 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/.editorconfig.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/.editorconfig.ts
@@ -1,9 +1,9 @@
 
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     '.editorconfig',
     '',
     `# http://editorconfig.org
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintignore.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintignore.ts
index 0295fefe1..36b7eb0cc 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintignore.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintignore.ts
@@ -1,9 +1,8 @@
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     '.eslintignore',
     '',
     `# 忽略目录
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintrc.js.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintrc.js.ts
index 558fa1338..944c925ac 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintrc.js.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintrc.js.ts
@@ -1,9 +1,9 @@
 
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     '.eslintrc',
     'js',
     `module.exports = {
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/.gitignore.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/.gitignore.ts
index bea5e6f48..a3ff8f6ee 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/.gitignore.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/.gitignore.ts
@@ -1,9 +1,8 @@
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     '.gitignore',
     '',
     `# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/README.md.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/README.md.ts
index 773161d02..6a4969ecf 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/README.md.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/README.md.ts
@@ -1,9 +1,8 @@
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'README',
     'md',
     `# @ali/rax-component-demo
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/abc.json.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/abc.json.ts
index 303bc583c..b199762cd 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/abc.json.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/abc.json.ts
@@ -1,9 +1,8 @@
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'abc',
     'json',
     `{
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/build.json.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/build.json.ts
index bce5df835..ba4e9a9f3 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/template/files/build.json.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/files/build.json.ts
@@ -1,9 +1,8 @@
+import { ResultFile } from '@ali/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
 
-import ResultFile from '../../../../../../model/ResultFile';
-import { IResultFile } from '../../../../../../types';
-
-export default function getFile(): [string[], IResultFile] {
-  const file = new ResultFile(
+export default function getFile(): [string[], ResultFile] {
+  const file = createResultFile(
     'build',
     'json',
     `{
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/index.ts b/packages/code-generator/src/plugins/project/framework/rax/template/index.ts
index 12e3e65dd..8887a343f 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/template/index.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/index.ts
@@ -1,7 +1,8 @@
-import ResultDir from '../../../../../model/ResultDir';
-import { IProjectTemplate, IResultDir } from '../../../../../types';
+import { ResultDir } from '@ali/lowcode-types';
+import { IProjectTemplate } from '../../../../../types';
 
 import { runFileGenerator } from '../../../../../utils/templateHelper';
+import { createResultDir } from '../../../../../utils/resultHelper';
 
 import file0 from './files/.editorconfig';
 import file1 from './files/.eslintignore';
@@ -57,8 +58,8 @@ const raxAppTemplate: IProjectTemplate = {
     },
   },
 
-  generateTemplate(): IResultDir {
-    const root = new ResultDir('.');
+  generateTemplate(): ResultDir {
+    const root = createResultDir('.');
 
     runFileGenerator(root, file0);
     runFileGenerator(root, file1);

From 95d67c1d991fdf8e43201ca18bb0570c03d01300 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=A5=E5=B8=8C?= <armslave.yy@alibaba-inc.com>
Date: Sat, 15 Aug 2020 22:00:32 +0800
Subject: [PATCH 37/80] fix: enhance api design

---
 .../component/rax/containerInitState.ts       |  8 +-
 .../component/recore/pageDataSource.ts        |  4 +-
 packages/code-generator/src/types/core.ts     |  7 +-
 .../code-generator/src/utils/compositeType.ts | 95 ++++++++++---------
 .../code-generator/src/utils/nodeToJSX.ts     |  5 +-
 5 files changed, 59 insertions(+), 60 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/containerInitState.ts b/packages/code-generator/src/plugins/component/rax/containerInitState.ts
index 8dc634c98..c458d73d1 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInitState.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInitState.ts
@@ -34,8 +34,8 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       const state = ir.state;
       const fields = Object.keys(state).map<string>((stateName) => {
         // TODO: 这里用什么 handlers?
-        const [isString, value] = generateCompositeType(state[stateName], {});
-        return `${stateName}: ${isString ? `'${value}'` : value},`;
+        const value = generateCompositeType(state[stateName], {});
+        return `${stateName}: ${value}`;
       });
 
       if (cfg.implementType === 'inConstructor') {
@@ -43,7 +43,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
           type: ChunkType.STRING,
           fileType: cfg.fileType,
           name: CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
-          content: `this.state = { ${fields.join('')} };`,
+          content: `this.state = { ${fields.join(',')} };`,
           linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.ConstructorContent]],
         });
       } else if (cfg.implementType === 'insMember') {
@@ -51,7 +51,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
           type: ChunkType.STRING,
           fileType: cfg.fileType,
           name: CLASS_DEFINE_CHUNK_NAME.InsVar,
-          content: `state = { ${fields.join('')} };`,
+          content: `state = { ${fields.join(',')} };`,
           linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsVar]],
         });
       }
diff --git a/packages/code-generator/src/plugins/component/recore/pageDataSource.ts b/packages/code-generator/src/plugins/component/recore/pageDataSource.ts
index b4985abbb..898d1c99a 100644
--- a/packages/code-generator/src/plugins/component/recore/pageDataSource.ts
+++ b/packages/code-generator/src/plugins/component/recore/pageDataSource.ts
@@ -35,8 +35,8 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
 
       const extConfigs = Object.keys(rest).map((extConfigName) => {
         const value = (rest as Record<string, CompositeValue>)[extConfigName];
-        const [isString, valueStr] = generateCompositeType(value);
-        return `${extConfigName}: ${isString ? `'${valueStr}'` : valueStr}`;
+        const valueStr = generateCompositeType(value);
+        return `${extConfigName}: ${valueStr}`;
       });
 
       attrs = [...attrs, ...extConfigs];
diff --git a/packages/code-generator/src/types/core.ts b/packages/code-generator/src/types/core.ts
index fa865c626..27374baca 100644
--- a/packages/code-generator/src/types/core.ts
+++ b/packages/code-generator/src/types/core.ts
@@ -186,13 +186,8 @@ export interface CompositeValueCustomHandlerSet {
   function?: CompositeValueCustomHandler;
 }
 
-export interface CompositeTypeContainerHandlerSet {
-  default?: CompositeTypeContainerHandler;
-  string?: CompositeTypeContainerHandler;
-}
-
 export type CompositeValueGeneratorOptions = {
   handlers?: CompositeValueCustomHandlerSet;
-  containerHandlers?: CompositeTypeContainerHandlerSet;
+  containerHandler?: (value: string, isString: boolean, valStr: string) => string;
   nodeGenerator?: NodeGenerator;
 };
diff --git a/packages/code-generator/src/utils/compositeType.ts b/packages/code-generator/src/utils/compositeType.ts
index 9811c2d31..5c42dbc27 100644
--- a/packages/code-generator/src/utils/compositeType.ts
+++ b/packages/code-generator/src/utils/compositeType.ts
@@ -6,17 +6,14 @@ import {
   isJSFunction,
   isJSSlot,
 } from '@ali/lowcode-types';
+import _ from 'lodash';
+
 import { generateExpression, generateFunction } from './jsExpression';
 import { generateJsSlot } from './jsSlot';
 import { isValidIdentifier } from './validate';
 import { camelize } from './common';
 
-import { CompositeValueGeneratorOptions, CompositeTypeContainerHandlerSet, CodeGeneratorError } from '../types';
-
-const defaultContainerHandlers: CompositeTypeContainerHandlerSet = {
-  default: (v) => v,
-  string: (v) => `'${v}'`,
-};
+import { CompositeValueGeneratorOptions, CompositeTypeContainerHandler, CodeGeneratorError } from '../types';
 
 function generateArray(value: CompositeArray, options: CompositeValueGeneratorOptions = {}): string {
   const body = value.map((v) => generateUnknownType(v, options)).join(',');
@@ -52,67 +49,77 @@ function generateObject(value: CompositeObject, options: CompositeValueGenerator
 }
 
 function generateUnknownType(value: CompositeValue, options: CompositeValueGeneratorOptions = {}): string {
-  if (Array.isArray(value)) {
-    if (options.handlers && options.handlers.array) {
+  if (_.isUndefined(value)) {
+    return 'undefined';
+  }
+
+  if (_.isNull(value)) {
+    return 'null';
+  }
+
+  if (_.isArray(value)) {
+    if (options.handlers?.array) {
       return options.handlers.array(value);
     }
     return generateArray(value, options);
-  } else if (typeof value === 'object') {
-    if (value === null) {
-      return 'null';
-    }
+  }
 
-    if (isJSExpression(value)) {
-      if (options.handlers && options.handlers.expression) {
-        return options.handlers.expression(value);
-      }
-      return generateExpression(value);
+  if (isJSExpression(value)) {
+    if (options.handlers?.expression) {
+      return options.handlers.expression(value);
     }
+    return generateExpression(value);
+  }
 
-    if (isJSFunction(value)) {
-      if (options.handlers && options.handlers.function) {
-        return options.handlers.function(value);
-      }
-      return generateFunction(value, { isArrow: true });
+  if (isJSFunction(value)) {
+    if (options.handlers?.function) {
+      return options.handlers.function(value);
     }
+    return generateFunction(value, { isArrow: true });
+  }
 
-    if (isJSSlot(value)) {
-      if (options.nodeGenerator) {
-        return generateJsSlot(value, options.nodeGenerator);
-      }
-      throw new CodeGeneratorError("Can't find Node Generator");
+  if (isJSSlot(value)) {
+    if (options.nodeGenerator) {
+      return generateJsSlot(value, options.nodeGenerator);
     }
+    throw new CodeGeneratorError("Can't find Node Generator");
+  }
 
-    if (options.handlers && options.handlers.object) {
+  if (_.isObject(value)) {
+    if (options.handlers?.object) {
       return options.handlers.object(value);
     }
     return generateObject(value as CompositeObject, options);
-  } else if (typeof value === 'string') {
-    if (options.handlers && options.handlers.string) {
+  }
+
+  if (_.isString(value)) {
+    if (options.handlers?.string) {
       return options.handlers.string(value);
     }
     return `'${value}'`;
-  } else if (typeof value === 'number' && options.handlers && options.handlers.number) {
+  }
+
+  if (_.isNumber(value) && options.handlers?.number) {
     return options.handlers.number(value);
-  } else if (typeof value === 'boolean' && options.handlers && options.handlers.boolean) {
+  }
+
+  if (_.isBoolean(value) && options.handlers?.boolean) {
     return options.handlers.boolean(value);
-  } else if (typeof value === 'undefined') {
-    return 'undefined';
   }
 
   return JSON.stringify(value);
 }
 
-export function generateCompositeType(value: CompositeValue, options: CompositeValueGeneratorOptions = {}): string {
-  const result = generateUnknownType(value, options);
-  const containerHandlers = {
-    ...defaultContainerHandlers,
-    ...(options.containerHandlers || {}),
-  };
+const defaultContainer: CompositeTypeContainerHandler = (v: string) => v;
 
-  const isStringType = result.substr(0, 1) === "'" && result.substr(-1, 1) === "'";
-  if (isStringType) {
-    return (containerHandlers.string && containerHandlers.string(result.substring(1, result.length - 1))) || '';
+export function generateCompositeType(value: CompositeValue, options: CompositeValueGeneratorOptions = {}): string {
+  const isStringType = _.isString(value);
+  const result = generateUnknownType(value, options);
+  const handler: CompositeTypeContainerHandler = options.containerHandler || defaultContainer;
+
+  if (isStringType && result.length >= 2) {
+    return handler(result, true, result.substring(1, result.length - 1));
   }
-  return (containerHandlers.default && containerHandlers.default(result)) || '';
+
+  return handler(result, false, result);
 }
diff --git a/packages/code-generator/src/utils/nodeToJSX.ts b/packages/code-generator/src/utils/nodeToJSX.ts
index 0dff0c53c..fad8ef710 100644
--- a/packages/code-generator/src/utils/nodeToJSX.ts
+++ b/packages/code-generator/src/utils/nodeToJSX.ts
@@ -114,10 +114,7 @@ export function generateAttr(ctx: INodeGeneratorContext, attrName: string, attrV
     return [];
   }
   const valueStr = generateCompositeType(attrValue, {
-    containerHandlers: {
-      default: (v) => `{${v}}`,
-      string: (v) => `"${v}"`,
-    },
+    containerHandler: (v, isStr, vStr) => (isStr ? `"${vStr}"` : `{${v}}`),
     nodeGenerator: ctx.generator,
   });
   return [

From e689d7f3415368b286109269cf988f6fd3d21030 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=A5=E5=B8=8C?= <armslave.yy@alibaba-inc.com>
Date: Sun, 16 Aug 2020 20:56:37 +0800
Subject: [PATCH 38/80] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20node2jsx=20fun?=
 =?UTF-8?q?ction?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/plugins/component/rax/jsx.ts          |  15 +-
 .../src/plugins/component/react/jsx.ts        |   8 +-
 .../plugins/component/recore/pageVmBody.ts    |  13 +-
 packages/code-generator/src/types/core.ts     |  51 ++--
 .../code-generator/src/utils/compositeType.ts |   6 +-
 .../code-generator/src/utils/nodeToJSX.ts     | 283 ++++++++----------
 6 files changed, 165 insertions(+), 211 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/jsx.ts b/packages/code-generator/src/plugins/component/rax/jsx.ts
index d800feb43..85fdfe05a 100644
--- a/packages/code-generator/src/plugins/component/rax/jsx.ts
+++ b/packages/code-generator/src/plugins/component/rax/jsx.ts
@@ -13,7 +13,7 @@ import {
 import { RAX_CHUNK_NAME } from './const';
 import { COMMON_CHUNK_NAME } from '../../../const/generator';
 
-import { createNodeGenerator, generateReactCtrlLine, generateString } from '../../../utils/nodeToJSX';
+import { createNodeGenerator, generateReactCtrlLine } from '../../../utils/nodeToJSX';
 import { generateExpression } from '../../../utils/jsExpression';
 
 type PluginConfig = {
@@ -62,20 +62,15 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
     next.chunks = next.chunks.filter((chunk) => !isImportAliasDefineChunk(chunk));
 
     // 创建代码生成器
-    const generator = createNodeGenerator(
-      {
-        string: generateString,
-        expression: (input) => [handlers.expression(input)],
-        function: (input) => [handlers.function(input)],
-      },
-      [generateReactCtrlLine],
-      {
+    const generator = createNodeGenerator({
+      handlers: {
         expression: (input: JSExpression) => (isJSExpression(input) ? handlers.expression(input) : ''),
         function: (input: JSFunction) => (isJSFunction(input) ? handlers.function(input) : ''),
         loopDataExpr: (input: string) => (typeof input === 'string' ? transformers.transformLoopExpr(input) : ''),
         tagName: mapComponentNameToAliasOrKeepIt,
       },
-    );
+      plugins: [generateReactCtrlLine],
+    });
 
     // 生成 JSX 代码
     const jsxContent = generator(ir);
diff --git a/packages/code-generator/src/plugins/component/react/jsx.ts b/packages/code-generator/src/plugins/component/react/jsx.ts
index 54fa32782..942b2109f 100644
--- a/packages/code-generator/src/plugins/component/react/jsx.ts
+++ b/packages/code-generator/src/plugins/component/react/jsx.ts
@@ -23,7 +23,13 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
     ...config,
   };
 
-  const generator = createReactNodeGenerator({ nodeTypeMapping: cfg.nodeTypeMapping });
+  const { nodeTypeMapping } = cfg;
+
+  const generator = createReactNodeGenerator({
+    handlers: {
+      tagName: (v) => nodeTypeMapping[v] || v,
+    },
+  });
 
   const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
     const next: ICodeStruct = {
diff --git a/packages/code-generator/src/plugins/component/recore/pageVmBody.ts b/packages/code-generator/src/plugins/component/recore/pageVmBody.ts
index 4251bdfb7..494d30362 100644
--- a/packages/code-generator/src/plugins/component/recore/pageVmBody.ts
+++ b/packages/code-generator/src/plugins/component/recore/pageVmBody.ts
@@ -12,8 +12,7 @@ import {
 } from '../../../types';
 import { COMMON_CHUNK_NAME } from '../../../const/generator';
 
-import { createNodeGenerator, generateString } from '../../../utils/nodeToJSX';
-import { generateExpression } from '../../../utils/jsExpression';
+import { createNodeGenerator } from '../../../utils/nodeToJSX';
 import { generateCompositeType } from '../../../utils/compositeType';
 
 const generateGlobalProps = (ctx: INodeGeneratorContext, nodeItem: NodeSchema): CodePiece[] => {
@@ -53,13 +52,9 @@ const generateCtrlLine = (ctx: INodeGeneratorContext, nodeItem: NodeSchema): Cod
 };
 
 const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
-  const generator = createNodeGenerator(
-    {
-      string: generateString,
-      expression: (input) => [generateExpression(input)],
-    },
-    [generateGlobalProps, generateCtrlLine],
-  );
+  const generator = createNodeGenerator({
+    plugins: [generateGlobalProps, generateCtrlLine],
+  });
 
   const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
     const next: ICodeStruct = {
diff --git a/packages/code-generator/src/types/core.ts b/packages/code-generator/src/types/core.ts
index 27374baca..fb1574637 100644
--- a/packages/code-generator/src/types/core.ts
+++ b/packages/code-generator/src/types/core.ts
@@ -1,15 +1,11 @@
 import {
   ResultDir,
   ResultFile,
-  NodeData,
+  NodeDataType,
   NodeSchema,
   ProjectSchema,
   JSExpression,
   JSFunction,
-  CompositeArray,
-  CompositeObject,
-  JSONArray,
-  JSONObject,
   JSSlot,
 } from '@ali/lowcode-types';
 
@@ -149,45 +145,38 @@ export interface CodePiece {
   type: PIECE_TYPE;
 }
 
-// TODO: 这个 HandlerSet 和 CustomHandlerSet 为啥定义还不一样？
 export interface HandlerSet<T> {
-  string?: (input: string) => T[];
-  expression?: (input: JSExpression) => T[];
-  function?: (input: JSFunction) => T[];
-  node?: (input: NodeSchema) => T[];
-  common?: (input: unknown) => T[];
+  string?: (input: string) => T;
+  boolean?: (input: boolean) => T;
+  number?: (input: number) => T;
+  expression?: (input: JSExpression) => T;
+  function?: (input: JSFunction) => T;
+  slot?: (input: JSSlot) => T;
+  node?: (input: NodeSchema) => T;
+  array?: (input: any[]) => T;
+  object?: (input: object) => T;
+  common?: (input: unknown) => T;
+  tagName?: (input: string) => T;
 }
 
-export type ExtGeneratorPlugin = (
-  ctx: INodeGeneratorContext,
-  nodeItem: NodeSchema,
-  handlers: CustomHandlerSet,
-) => CodePiece[];
+export type ExtGeneratorPlugin = (ctx: INodeGeneratorContext, nodeItem: NodeSchema) => CodePiece[];
 
-export interface INodeGeneratorConfig {
-  nodeTypeMapping?: Record<string, string>;
-}
+export type NodeGeneratorConfig = {
+  handlers?: HandlerSet<string>;
+  plugins?: ExtGeneratorPlugin[];
+};
 
-export type NodeGenerator = (nodeItem: NodeData) => string;
+export type NodeGenerator = (nodeItem: NodeDataType) => string;
 
 export interface INodeGeneratorContext {
+  handlers: HandlerSet<string>;
   generator: NodeGenerator;
 }
 
 export type CompositeValueCustomHandler = (data: unknown) => string;
-export type CompositeTypeContainerHandler = (value: string) => string;
-export interface CompositeValueCustomHandlerSet {
-  boolean?: CompositeValueCustomHandler;
-  number?: CompositeValueCustomHandler;
-  string?: CompositeValueCustomHandler;
-  array?: CompositeValueCustomHandler;
-  object?: CompositeValueCustomHandler;
-  expression?: CompositeValueCustomHandler;
-  function?: CompositeValueCustomHandler;
-}
 
 export type CompositeValueGeneratorOptions = {
-  handlers?: CompositeValueCustomHandlerSet;
+  handlers?: HandlerSet<string>;
   containerHandler?: (value: string, isString: boolean, valStr: string) => string;
   nodeGenerator?: NodeGenerator;
 };
diff --git a/packages/code-generator/src/utils/compositeType.ts b/packages/code-generator/src/utils/compositeType.ts
index 5c42dbc27..dab597c3b 100644
--- a/packages/code-generator/src/utils/compositeType.ts
+++ b/packages/code-generator/src/utils/compositeType.ts
@@ -13,7 +13,7 @@ import { generateJsSlot } from './jsSlot';
 import { isValidIdentifier } from './validate';
 import { camelize } from './common';
 
-import { CompositeValueGeneratorOptions, CompositeTypeContainerHandler, CodeGeneratorError } from '../types';
+import { CompositeValueGeneratorOptions, CodeGeneratorError } from '../types';
 
 function generateArray(value: CompositeArray, options: CompositeValueGeneratorOptions = {}): string {
   const body = value.map((v) => generateUnknownType(v, options)).join(',');
@@ -110,12 +110,12 @@ function generateUnknownType(value: CompositeValue, options: CompositeValueGener
   return JSON.stringify(value);
 }
 
-const defaultContainer: CompositeTypeContainerHandler = (v: string) => v;
+const defaultContainer = (v: string) => v;
 
 export function generateCompositeType(value: CompositeValue, options: CompositeValueGeneratorOptions = {}): string {
   const isStringType = _.isString(value);
   const result = generateUnknownType(value, options);
-  const handler: CompositeTypeContainerHandler = options.containerHandler || defaultContainer;
+  const handler = options.containerHandler || defaultContainer;
 
   if (isStringType && result.length >= 2) {
     return handler(result, true, result.substring(1, result.length - 1));
diff --git a/packages/code-generator/src/utils/nodeToJSX.ts b/packages/code-generator/src/utils/nodeToJSX.ts
index fad8ef710..9cc0c25e0 100644
--- a/packages/code-generator/src/utils/nodeToJSX.ts
+++ b/packages/code-generator/src/utils/nodeToJSX.ts
@@ -4,10 +4,12 @@ import {
   JSExpression,
   NodeData,
   NodeSchema,
+  isNodeSchema,
   PropsMap,
   isJSExpression,
   isJSSlot,
   isDOMText,
+  NodeDataType,
 } from '@ali/lowcode-types';
 
 import {
@@ -18,11 +20,10 @@ import {
   NodeGenerator,
   ExtGeneratorPlugin,
   INodeGeneratorContext,
-  INodeGeneratorConfig,
+  NodeGeneratorConfig,
 } from '../types';
 
 import { generateCompositeType } from './compositeType';
-import { generateExpression } from './jsExpression';
 
 // tslint:disable-next-line: no-empty
 const noop = () => [];
@@ -75,40 +76,6 @@ export function handleSubNodes<T>(
   }
 }
 
-export function handleChildren<T>(
-  ctx: INodeGeneratorContext,
-  children: unknown,
-  handlers: HandlerSet<T>,
-  options?: {
-    rerun?: boolean;
-  },
-): T[] {
-  const opt = {
-    ...handleChildrenDefaultOptions,
-    ...(options || {}),
-  };
-
-  if (Array.isArray(children)) {
-    const list: NodeData[] = children as NodeData[];
-    return list.map((child) => handleChildren(ctx, child, handlers, opt)).reduce((p, c) => p.concat(c), []);
-  } else if (isDOMText(children)) {
-    const handler = handlers.string || handlers.common || noop;
-    return handler(children as string);
-  } else if (isJSExpression(children)) {
-    const handler = handlers.expression || handlers.common || noop;
-    return handler(children as JSExpression);
-  } else {
-    const handler = handlers.node || handlers.common || noop;
-    const child = children as NodeSchema;
-    let curRes = handler(child);
-    if (opt.rerun && child.children) {
-      const childRes = handleChildren(ctx, child.children, handlers, opt);
-      curRes = curRes.concat(childRes || []);
-    }
-    return curRes;
-  }
-}
-
 export function generateAttr(ctx: INodeGeneratorContext, attrName: string, attrValue: any): CodePiece[] {
   if (attrName === 'initValue') {
     return [];
@@ -149,102 +116,24 @@ export function generateAttrs(ctx: INodeGeneratorContext, nodeItem: NodeSchema):
   return pieces;
 }
 
-function mapNodeName(src: string, mapping: Record<string, string>): string {
-  if (mapping[src]) {
-    return mapping[src];
-  }
-
-  return src;
-}
-
-export function generateBasicNode(
-  ctx: INodeGeneratorContext,
-  nodeItem: NodeSchema,
-  mapping: Record<string, string>,
-): CodePiece[] {
+export function generateBasicNode(ctx: INodeGeneratorContext, nodeItem: NodeSchema): CodePiece[] {
   const pieces: CodePiece[] = [];
+  const tagName = (ctx.handlers.tagName || _.identity)(nodeItem.componentName);
+
   pieces.push({
-    value: mapNodeName(nodeItem.componentName, mapping),
+    value: tagName || '', // FIXME: type detection error
     type: PIECE_TYPE.TAG,
   });
 
   return pieces;
 }
 
-// TODO: 生成文档
-// 为包裹的代码片段生成子上下文，集成父级上下文，并传入子级上下文新增内容。（如果存在多级上下文怎么处理？）
-// 创建新的上下文，并从作用域中取对应同名变量塞到作用域里面？
-// export function createSubContext() {}
-
-/**
- * JSX 生成逻辑插件。在 React 代码模式下生成 loop 与 condition 相关的逻辑代码
- *
- * @export
- * @param {NodeSchema} nodeItem 当前 UI 节点
- * @returns {CodePiece[]} 实现功能的相关代码片段
- */
-export function generateReactCtrlLine(ctx: INodeGeneratorContext, nodeItem: NodeSchema): CodePiece[] {
-  const pieces: CodePiece[] = [];
-
-  if (nodeItem.loop) {
-    const loopItemName = nodeItem.loopArgs?.[0] || 'item';
-    const loopIndexName = nodeItem.loopArgs?.[1] || 'index';
-
-    const loopDataExpr = (handlers.loopDataExpr || _.identity)(
-      isJSExpression(nodeItem.loop) ? `(${nodeItem.loop.value})` : `(${JSON.stringify(nodeItem.loop)})`,
-    );
-
-    pieces.unshift({
-      value: `${loopDataExpr}.map((${loopItemName}, ${loopIndexName}) => (`,
-      type: PIECE_TYPE.BEFORE,
-    });
-
-    pieces.push({
-      value: '))',
-      type: PIECE_TYPE.AFTER,
-    });
-  }
-
-  if (nodeItem.condition) {
-    const value = generateCompositeType(nodeItem.condition, {
-      nodeGenerator: ctx.generator,
-    });
-
-    const conditionExpr = (handlers.conditionExpr || _.identity)(value);
-
-    pieces.unshift({
-      value: `(${conditionExpr}) && (`,
-      type: PIECE_TYPE.BEFORE,
-    });
-
-    pieces.push({
-      value: ')',
-      type: PIECE_TYPE.AFTER,
-    });
-  }
-
-  if (nodeItem.condition || nodeItem.loop) {
-    pieces.unshift({
-      value: '{',
-      type: PIECE_TYPE.BEFORE,
-    });
-
-    pieces.push({
-      value: '}',
-      type: PIECE_TYPE.AFTER,
-    });
-  }
-
-  return pieces;
-}
-
-export function linkPieces(pieces: CodePiece[], handlers: CustomHandlerSet): string {
+export function linkPieces(pieces: CodePiece[]): string {
   const tagsPieces = pieces.filter((p) => p.type === PIECE_TYPE.TAG);
   if (tagsPieces.length !== 1) {
     throw new CodeGeneratorError('One node only need one tag define');
   }
-
-  const tagName = (handlers.tagName || _.identity)(tagsPieces[0].value);
+  const tagName = tagsPieces[0].value;
 
   const beforeParts = pieces
     .filter((p) => p.type === PIECE_TYPE.BEFORE)
@@ -275,53 +164,133 @@ export function linkPieces(pieces: CodePiece[], handlers: CustomHandlerSet): str
   return `${beforeParts}<${tagName}${attrsParts} />${afterParts}`;
 }
 
-export function createNodeGenerator(
-  handlers: HandlerSet<string>,
-  plugins: ExtGeneratorPlugin[],
-  cfg?: INodeGeneratorConfig,
-): NodeGenerator {
-  let nodeTypeMapping: Record<string, string> = {};
-  if (cfg && cfg.nodeTypeMapping) {
-    nodeTypeMapping = cfg.nodeTypeMapping;
+export function generateNodeSchema(nodeItem: NodeSchema, ctx: INodeGeneratorContext): string {
+  let pieces: CodePiece[] = [];
+
+  plugins.forEach((p) => {
+    pieces = pieces.concat(p(ctx, nodeItem));
+  });
+  pieces = pieces.concat(generateBasicNode(ctx, nodeItem));
+  pieces = pieces.concat(generateAttrs(ctx, nodeItem));
+  if (nodeItem.children && (nodeItem.children as unknown[]).length > 0) {
+    pieces = pieces.concat(
+      handleChildren<string>(ctx, nodeItem.children, handlers).map((l) => ({
+        type: PIECE_TYPE.CHILDREN,
+        value: l,
+      })),
+    );
   }
 
-  const generateNode = (nodeItem: NodeSchema): string => {
-    let pieces: CodePiece[] = [];
-    const ctx: INodeGeneratorContext = {
-      generator: generateNode,
-    };
+  return linkPieces(pieces);
+}
 
-    plugins.forEach((p) => {
-      pieces = pieces.concat(p(ctx, nodeItem));
+// TODO: 生成文档
+// 为包裹的代码片段生成子上下文，集成父级上下文，并传入子级上下文新增内容。（如果存在多级上下文怎么处理？）
+// 创建新的上下文，并从作用域中取对应同名变量塞到作用域里面？
+// export function createSubContext() {}
+
+/**
+ * JSX 生成逻辑插件。在 React 代码模式下生成 loop 与 condition 相关的逻辑代码
+ *
+ * @export
+ * @param {NodeSchema} nodeItem 当前 UI 节点
+ * @returns {CodePiece[]} 实现功能的相关代码片段
+ */
+export function generateReactCtrlLine(ctx: INodeGeneratorContext, nodeItem: NodeSchema): CodePiece[] {
+  const pieces: CodePiece[] = [];
+
+  if (nodeItem.loop) {
+    const loopItemName = nodeItem.loopArgs?.[0] || 'item';
+    const loopIndexName = nodeItem.loopArgs?.[1] || 'index';
+
+    const loopDataExpr = (ctx.handlers.loopDataExpr || _.identity)(
+      isJSExpression(nodeItem.loop) ? `(${nodeItem.loop.value})` : `(${JSON.stringify(nodeItem.loop)})`,
+    );
+
+    pieces.unshift({
+      value: `${loopDataExpr}.map((${loopItemName}, ${loopIndexName}) => (`,
+      type: PIECE_TYPE.BEFORE,
     });
-    pieces = pieces.concat(generateBasicNode(ctx, nodeItem, nodeTypeMapping));
-    pieces = pieces.concat(generateAttrs(ctx, nodeItem));
-    if (nodeItem.children && (nodeItem.children as unknown[]).length > 0) {
-      pieces = pieces.concat(
-        handleChildren<string>(ctx, nodeItem.children, handlers).map((l) => ({
-          type: PIECE_TYPE.CHILDREN,
-          value: l,
-        })),
-      );
+
+    pieces.push({
+      value: '))',
+      type: PIECE_TYPE.AFTER,
+    });
+  }
+
+  if (nodeItem.condition) {
+    const value = generateCompositeType(nodeItem.condition, {
+      nodeGenerator: ctx.generator,
+    });
+
+    const conditionExpr = (ctx.handlers.conditionExpr || _.identity)(value);
+
+    pieces.unshift({
+      value: `(${conditionExpr}) && (`,
+      type: PIECE_TYPE.BEFORE,
+    });
+
+    pieces.push({
+      value: ')',
+      type: PIECE_TYPE.AFTER,
+    });
+  }
+
+  if (nodeItem.condition || nodeItem.loop) {
+    pieces.unshift({
+      value: '{',
+      type: PIECE_TYPE.BEFORE,
+    });
+
+    pieces.push({
+      value: '}',
+      type: PIECE_TYPE.AFTER,
+    });
+  }
+
+  return pieces;
+}
+
+const handleArray = (v: string[]) => v.join('');
+
+export function createNodeGenerator(cfg: NodeGeneratorConfig = {}): NodeGenerator {
+  let ctx: INodeGeneratorContext = { handlers: {}, generator: () => '' };
+
+  const generateNode = (nodeItem: NodeDataType): string => {
+    if (_.isArray(nodeItem)) {
+      const resList = nodeItem.map((n) => generateNode(n));
+      return (cfg?.handlers?.array || handleArray)(resList);
     }
 
-    return linkPieces(pieces, customHandlers);
+    if (isNodeSchema(nodeItem)) {
+      if (cfg?.handlers?.node) {
+        // TODO: children 的处理是否拆出来作为公用
+        return cfg.handlers.node(nodeItem);
+      }
+
+      return generateNodeSchema(nodeItem, ctx);
+    }
+
+    return generateCompositeType(nodeItem, {
+      handlers: cfg.handlers,
+      // FIXME: 这里和 children 类型的嵌套逻辑需要再思考一下
+      // containerHandler: (value: string, isString: boolean, valStr: string) => (isString ? valStr : value),
+      nodeGenerator: generateNode,
+    });
   };
 
-  handlers.node = (input: NodeSchema) => [generateNode(input)];
+  ctx = {
+    handlers: cfg?.handlers || {},
+    generator: generateNode,
+  };
 
   return generateNode;
 }
 
-export const generateString = (input: string) => [input];
-
-export function createReactNodeGenerator(cfg?: INodeGeneratorConfig): NodeGenerator {
-  return createNodeGenerator(
-    {
-      string: generateString,
-      expression: (input) => [generateExpression(input)],
-    },
-    [generateReactCtrlLine],
-    cfg,
-  );
+// TODO: 需要一个 merge config 的方法。
+export function createReactNodeGenerator(cfg?: NodeGeneratorConfig): NodeGenerator {
+  return createNodeGenerator({
+    plugins: [generateReactCtrlLine],
+    ...cfg,
+  });
 }

From 8114c6f0508045b045413dde51c3a8b7f246029f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Mon, 17 Aug 2020 10:06:37 +0800
Subject: [PATCH 39/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20urlParams=20?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E7=9A=84=E6=95=B0=E6=8D=AE=E6=BA=90=E4=B8=8D?=
 =?UTF-8?q?=E9=9C=80=E8=A6=81=20options,=20=E6=89=80=E4=BB=A5=20options=20?=
 =?UTF-8?q?=E6=94=B9=E6=88=90=E5=8F=AF=E9=80=89=E4=B8=BA=E5=A5=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/types/src/data-source.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/types/src/data-source.ts b/packages/types/src/data-source.ts
index 1bed43406..e33912fd8 100644
--- a/packages/types/src/data-source.ts
+++ b/packages/types/src/data-source.ts
@@ -10,7 +10,7 @@ export interface DataSourceConfig {
   type: string;
   requestHandler?: JSFunction;
   dataHandler?: JSFunction;
-  options: {
+  options?: {
     uri: string | JSExpression;
     params?: JSONObject | JSExpression;
     method?: string | JSExpression;

From 42b9db3f3296bf05000e276048c86ce2c1058d16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Mon, 17 Aug 2020 10:46:44 +0800
Subject: [PATCH 40/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Rax=20=E5=87=BA?=
 =?UTF-8?q?=E7=A0=81=E4=B8=AD=E6=B7=BB=E5=8A=A0=E6=95=B0=E6=8D=AE=E6=BA=90?=
 =?UTF-8?q?=E7=9A=84=20dataHandler=20=E5=B9=B6=E4=B8=8E=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=BA=90=E5=BC=95=E6=93=8E=E7=9A=84=E5=AF=B9=E9=BD=90=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rax/containerInjectDataSourceEngine.ts    | 34 ++++++----
 .../demo-project/src/pages/Home/index.jsx     | 11 ++--
 .../demo-project/src/pages/Home/index.jsx     | 65 +++++++++++++++----
 .../test-cases/rax-app/demo2/schema.json5     | 12 ++++
 4 files changed, 91 insertions(+), 31 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
index bd503911a..8c2f074a6 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -13,6 +13,7 @@ import {
 } from '../../../types';
 
 import { generateUnknownType } from '../../../utils/compositeType';
+import { parseExpressionConvertThis2Context } from '../../../utils/expressionParser';
 import { isContainerSchema } from '../../../utils/schema';
 import { RAX_CHUNK_NAME } from './const';
 
@@ -46,8 +47,8 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       fileType: cfg.fileType,
       name: CLASS_DEFINE_CHUNK_NAME.InsVar,
       content: `
-      _dataSourceList = this._defineDataSourceList();
-      _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceList, this._context);`,
+      _dataSourceConfig = this._defineDataSourceConfig();
+      _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });`,
       linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
     });
 
@@ -61,26 +62,33 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       linkAfter: [RAX_CHUNK_NAME.ClassDidMountBegin],
     });
 
-    const dataSource = isContainerSchema(pre.ir) ? pre.ir.dataSource : null;
-    const dataSourceItems: DataSourceConfig[] = (dataSource && dataSource.list) || [];
+    const dataSourceConfig = isContainerSchema(pre.ir) ? pre.ir.dataSource : null;
+    const dataSourceItems: DataSourceConfig[] = (dataSourceConfig && dataSourceConfig.list) || [];
 
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: cfg.fileType,
       name: CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod,
-      // TODO: 下面的定义应该需要调用 @ali/lowcode-datasource-engine 的方法来搞:
       content: `
-        _defineDataSourceList() {
-          return (function(){
-            return (${generateUnknownType([
+      _defineDataSourceConfig() {
+        const __$$context = this._context;
+        return (${generateUnknownType(
+          {
+            ...dataSourceConfig,
+            list: [
               ...dataSourceItems.map((item) => ({
                 ...item,
                 isInit: wrapAsFunction(item.isInit),
                 options: wrapAsFunction(item.options),
               })),
-            ])});
-          }).call(this._context);
-        }`,
+            ],
+          },
+          {
+            function: (jsFunc) => parseExpressionConvertThis2Context(jsFunc.value, '__$$context'),
+            expression: (jsExpr) => parseExpressionConvertThis2Context(jsExpr.value, '__$$context'),
+          },
+        )});
+      }`,
       linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd],
     });
 
@@ -95,12 +103,12 @@ function wrapAsFunction(value: CompositeValue): CompositeValue {
   if (isJSExpression(value) || isJSFunction(value)) {
     return {
       type: 'JSExpression',
-      value: `() => (${value.value})`,
+      value: `function(){ return ((${value.value}))}`,
     };
   }
 
   return {
     type: 'JSExpression',
-    value: `() => (${generateUnknownType(value)})`,
+    value: `function(){return((${generateUnknownType(value)}))}`,
   };
 }
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
index eb9d36f4c..53c839182 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
@@ -19,8 +19,8 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
-  _dataSourceList = this._defineDataSourceList();
-  _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceList, this._context);
+  _dataSourceConfig = this._defineDataSourceConfig();
+  _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
   _utils = this._defineUtils();
 
@@ -74,10 +74,9 @@ class Home$$Page extends Component {
     return context;
   }
 
-  _defineDataSourceList() {
-    return function () {
-      return [];
-    }.call(this._context);
+  _defineDataSourceConfig() {
+    const __$$context = this._context;
+    return { list: [] };
   }
 
   _defineUtils() {
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index 899b98203..bc5a5f34a 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -38,8 +38,8 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
-  _dataSourceList = this._defineDataSourceList();
-  _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceList, this._context);
+  _dataSourceConfig = this._defineDataSourceConfig();
+  _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
   _utils = this._defineUtils();
 
@@ -161,24 +161,65 @@ class Home$$Page extends Component {
     return context;
   }
 
-  _defineDataSourceList() {
-    return function () {
-      return [
-        { id: 'urlParams', type: 'urlParams', isInit: () => undefined, options: () => undefined },
+  _defineDataSourceConfig() {
+    const __$$context = this._context;
+    return {
+      list: [
+        {
+          id: 'urlParams',
+          type: 'urlParams',
+          isInit: function () {
+            return undefined;
+          },
+          options: function () {
+            return undefined;
+          },
+        },
         {
           id: 'user',
           type: 'fetch',
-          options: () => ({ method: 'GET', uri: 'https://shs.alibaba-inc.com/mock/1458/demo/user' }),
-          isInit: () => undefined,
+          options: function () {
+            return {
+              method: 'GET',
+              uri: 'https://shs.alibaba-inc.com/mock/1458/demo/user',
+            };
+          },
+          dataHandler: function (response) {
+            if (!response.success) {
+              throw new Error(response.message);
+            }
+
+            return response.data;
+          },
+          isInit: function () {
+            return undefined;
+          },
         },
         {
           id: 'orders',
           type: 'fetch',
-          options: () => ({ method: 'GET', uri: this.state.user.ordersApiUri }),
-          isInit: () => undefined,
+          options: function () {
+            return {
+              method: 'GET',
+              uri: __$$context.state.user.ordersApiUri,
+            };
+          },
+          dataHandler: function (response) {
+            if (!response.success) {
+              throw new Error(response.message);
+            }
+
+            return response.data.result;
+          },
+          isInit: function () {
+            return undefined;
+          },
         },
-      ];
-    }.call(this._context);
+      ],
+      dataHander: function (dataMap) {
+        console.info('All datasources loaded:', dataMap);
+      },
+    };
   }
 
   _defineUtils() {
diff --git a/packages/code-generator/test-cases/rax-app/demo2/schema.json5 b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
index eb72af581..67d60cedb 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
@@ -82,6 +82,10 @@
               method: 'GET',
               uri: 'https://shs.alibaba-inc.com/mock/1458/demo/user',
             },
+            dataHandler: {
+              type: 'JSFunction',
+              value: 'function (response) {\nif (!response.success){\n    throw new Error(response.message);\n  }\n  return response.data;\n}',
+            },
           },
           // 示例数据源：https://shs.alibaba-inc.com/mock/1458/demo/orders
           {
@@ -94,8 +98,16 @@
                 value: 'this.state.user.ordersApiUri',
               },
             },
+            dataHandler: {
+              type: 'JSFunction',
+              value: 'function (response) {\nif (!response.success){\n    throw new Error(response.message);\n  }\n  return response.data.result;\n}',
+            },
           },
         ],
+        dataHander: {
+          type: 'JSFunction',
+          value: 'function (dataMap) {\n  console.info("All datasources loaded:", dataMap);\n}',
+        },
       },
       children: [
         {

From acd1f0601ebbba22e99aaa1905933185dd1e5dd2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Mon, 17 Aug 2020 10:52:07 +0800
Subject: [PATCH 41/80] =?UTF-8?q?fix:=20=F0=9F=90=9B=20fix=20typo=20of=20d?=
 =?UTF-8?q?ataHandler?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo2/expected/demo-project/src/pages/Home/index.jsx        | 2 +-
 packages/code-generator/test-cases/rax-app/demo2/schema.json5   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index bc5a5f34a..970e1987d 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -216,7 +216,7 @@ class Home$$Page extends Component {
           },
         },
       ],
-      dataHander: function (dataMap) {
+      dataHandler: function (dataMap) {
         console.info('All datasources loaded:', dataMap);
       },
     };
diff --git a/packages/code-generator/test-cases/rax-app/demo2/schema.json5 b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
index 67d60cedb..e6ce17b43 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
@@ -104,7 +104,7 @@
             },
           },
         ],
-        dataHander: {
+        dataHandler: {
           type: 'JSFunction',
           value: 'function (dataMap) {\n  console.info("All datasources loaded:", dataMap);\n}',
         },

From 8ecc002f65e0b8f45da1372cf311513dec83993b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Mon, 17 Aug 2020 13:17:01 +0800
Subject: [PATCH 42/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Rax=20=E5=87=BA?=
 =?UTF-8?q?=E7=A0=81=E5=99=A8=E6=94=AF=E6=8C=81=E8=B7=AF=E7=94=B1=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/generator/ProjectBuilder.ts           |  62 ++-----
 .../code-generator/src/parser/SchemaParser.ts |   6 +-
 .../framework/rax/plugins/appConfig.ts        |  20 +-
 .../code-generator/src/types/intermediate.ts  |   1 +
 .../code-generator/src/utils/compositeType.ts |   6 -
 .../code-generator/src/utils/nodeToJSX.ts     |  14 +-
 .../test-cases/rax-app/demo1/schema.json5     |   3 +
 .../test-cases/rax-app/demo2/schema.json5     |   3 +
 .../demo3/expected/demo-project/.editorconfig |  12 ++
 .../demo3/expected/demo-project/.eslintignore |  11 ++
 .../demo3/expected/demo-project/.eslintrc.js  |   3 +
 .../demo3/expected/demo-project/.gitignore    |  17 ++
 .../demo3/expected/demo-project/README.md     |  15 ++
 .../demo3/expected/demo-project/abc.json      |   7 +
 .../demo3/expected/demo-project/build.json    |  12 ++
 .../demo3/expected/demo-project/package.json  |  35 ++++
 .../demo3/expected/demo-project/src/app.js    |   6 +
 .../demo3/expected/demo-project/src/app.json  |  19 ++
 .../demo-project/src/document/index.jsx       |  25 +++
 .../expected/demo-project/src/global.scss     |   9 +
 .../demo-project/src/pages/Detail/index.css   |   0
 .../demo-project/src/pages/Detail/index.jsx   | 136 ++++++++++++++
 .../demo-project/src/pages/Home/index.css     |   0
 .../demo-project/src/pages/Home/index.jsx     | 136 ++++++++++++++
 .../demo-project/src/pages/List/index.css     |   0
 .../demo-project/src/pages/List/index.jsx     | 139 ++++++++++++++
 .../demo3/expected/demo-project/src/utils.js  |   1 +
 .../test-cases/rax-app/demo3/schema.json5     | 175 ++++++++++++++++++
 28 files changed, 808 insertions(+), 65 deletions(-)
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/.editorconfig
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/.eslintignore
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/.eslintrc.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/.gitignore
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/README.md
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/abc.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/build.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/app.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/app.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/document/index.jsx
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/global.scss
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.css
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.css
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.css
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/utils.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/schema.json5

diff --git a/packages/code-generator/src/generator/ProjectBuilder.ts b/packages/code-generator/src/generator/ProjectBuilder.ts
index 0538f4b88..26ed4f4d8 100644
--- a/packages/code-generator/src/generator/ProjectBuilder.ts
+++ b/packages/code-generator/src/generator/ProjectBuilder.ts
@@ -24,8 +24,8 @@ interface IModuleInfo {
 
 function getDirFromRoot(root: IResultDir, path: string[]): IResultDir {
   let current: IResultDir = root;
-  path.forEach(p => {
-    const exist = current.dirs.find(d => d.name === p);
+  path.forEach((p) => {
+    const exist = current.dirs.find((d) => d.name === p);
     if (exist) {
       current = exist;
     } else {
@@ -76,7 +76,7 @@ export class ProjectBuilder implements IProjectBuilder {
     // components
     // pages
     const containerBuildResult: IModuleInfo[] = await Promise.all<IModuleInfo>(
-      parseResult.containers.map(async containerInfo => {
+      parseResult.containers.map(async (containerInfo) => {
         let builder: IModuleBuilder;
         let path: string[];
         if (containerInfo.containerType === 'Page') {
@@ -100,9 +100,7 @@ export class ProjectBuilder implements IProjectBuilder {
 
     // router
     if (parseResult.globalRouter && builders.router) {
-      const { files } = await builders.router.generateModule(
-        parseResult.globalRouter,
-      );
+      const { files } = await builders.router.generateModule(parseResult.globalRouter);
 
       buildResult.push({
         path: this.template.slots.router.path,
@@ -112,9 +110,7 @@ export class ProjectBuilder implements IProjectBuilder {
 
     // entry
     if (parseResult.project && builders.entry) {
-      const { files } = await builders.entry.generateModule(
-        parseResult.project,
-      );
+      const { files } = await builders.entry.generateModule(parseResult.project);
 
       buildResult.push({
         path: this.template.slots.entry.path,
@@ -123,10 +119,8 @@ export class ProjectBuilder implements IProjectBuilder {
     }
 
     // appConfig
-    if (parseResult.project && builders.appConfig) {
-      const { files } = await builders.appConfig.generateModule(
-        parseResult.project,
-      );
+    if (builders.appConfig) {
+      const { files } = await builders.appConfig.generateModule(parseResult);
 
       buildResult.push({
         path: this.template.slots.appConfig.path,
@@ -135,14 +129,8 @@ export class ProjectBuilder implements IProjectBuilder {
     }
 
     // constants?
-    if (
-      parseResult.project &&
-      builders.constants &&
-      this.template.slots.constants
-    ) {
-      const { files } = await builders.constants.generateModule(
-        parseResult.project,
-      );
+    if (parseResult.project && builders.constants && this.template.slots.constants) {
+      const { files } = await builders.constants.generateModule(parseResult.project);
 
       buildResult.push({
         path: this.template.slots.constants.path,
@@ -151,14 +139,8 @@ export class ProjectBuilder implements IProjectBuilder {
     }
 
     // utils?
-    if (
-      parseResult.globalUtils &&
-      builders.utils &&
-      this.template.slots.utils
-    ) {
-      const { files } = await builders.utils.generateModule(
-        parseResult.globalUtils,
-      );
+    if (parseResult.globalUtils && builders.utils && this.template.slots.utils) {
+      const { files } = await builders.utils.generateModule(parseResult.globalUtils);
 
       buildResult.push({
         path: this.template.slots.utils.path,
@@ -168,9 +150,7 @@ export class ProjectBuilder implements IProjectBuilder {
 
     // i18n?
     if (parseResult.globalI18n && builders.i18n && this.template.slots.i18n) {
-      const { files } = await builders.i18n.generateModule(
-        parseResult.globalI18n,
-      );
+      const { files } = await builders.i18n.generateModule(parseResult.globalI18n);
 
       buildResult.push({
         path: this.template.slots.i18n.path,
@@ -180,9 +160,7 @@ export class ProjectBuilder implements IProjectBuilder {
 
     // globalStyle
     if (parseResult.project && builders.globalStyle) {
-      const { files } = await builders.globalStyle.generateModule(
-        parseResult.project,
-      );
+      const { files } = await builders.globalStyle.generateModule(parseResult.project);
 
       buildResult.push({
         path: this.template.slots.globalStyle.path,
@@ -192,9 +170,7 @@ export class ProjectBuilder implements IProjectBuilder {
 
     // htmlEntry
     if (parseResult.project && builders.htmlEntry) {
-      const { files } = await builders.htmlEntry.generateModule(
-        parseResult.project,
-      );
+      const { files } = await builders.htmlEntry.generateModule(parseResult.project);
 
       buildResult.push({
         path: this.template.slots.htmlEntry.path,
@@ -204,9 +180,7 @@ export class ProjectBuilder implements IProjectBuilder {
 
     // packageJSON
     if (parseResult.project && builders.packageJSON) {
-      const { files } = await builders.packageJSON.generateModule(
-        parseResult.project,
-      );
+      const { files } = await builders.packageJSON.generateModule(parseResult.project);
 
       buildResult.push({
         path: this.template.slots.packageJSON.path,
@@ -217,14 +191,14 @@ export class ProjectBuilder implements IProjectBuilder {
     // Post Process
 
     // Combine Modules
-    buildResult.forEach(moduleInfo => {
+    buildResult.forEach((moduleInfo) => {
       let targetDir = getDirFromRoot(projectRoot, moduleInfo.path);
       if (moduleInfo.moduleName) {
         const dir = new ResultDir(moduleInfo.moduleName);
         targetDir.addDirectory(dir);
         targetDir = dir;
       }
-      moduleInfo.files.forEach(file => targetDir.addFile(file));
+      moduleInfo.files.forEach((file) => targetDir.addFile(file));
     });
 
     return projectRoot;
@@ -233,7 +207,7 @@ export class ProjectBuilder implements IProjectBuilder {
   private createModuleBuilders(): Record<string, IModuleBuilder> {
     const builders: Record<string, IModuleBuilder> = {};
 
-    Object.keys(this.plugins).forEach(pluginName => {
+    Object.keys(this.plugins).forEach((pluginName) => {
       if (this.plugins[pluginName].length > 0) {
         const options: { mainFileName?: string } = {};
         if (this.template.slots[pluginName] && this.template.slots[pluginName].fileName) {
diff --git a/packages/code-generator/src/parser/SchemaParser.ts b/packages/code-generator/src/parser/SchemaParser.ts
index 72e132371..c9b6e16d8 100644
--- a/packages/code-generator/src/parser/SchemaParser.ts
+++ b/packages/code-generator/src/parser/SchemaParser.ts
@@ -25,6 +25,7 @@ import {
   IProjectSchema,
   ISchemaParser,
   UtilItem,
+  IRouterInfo,
 } from '../types';
 
 const defaultContainer: IContainerInfo = {
@@ -144,20 +145,21 @@ class SchemaParser implements ISchemaParser {
     const containersDeps = ([] as IDependency[]).concat(...containers.map((c) => c.deps || []));
 
     // 分析路由配置
-    // TODO: 低代码规范里面的路由是咋弄的？
-    const routes = containers
+    const routes: IRouterInfo['routes'] = containers
       .filter((container) => container.containerType === 'Page')
       .map((page) => {
         const meta = (page as { meta?: IPageMeta }).meta as IPageMeta;
         if (meta) {
           return {
             path: meta.router,
+            fileName: page.fileName,
             componentName: page.moduleName,
           };
         }
 
         return {
           path: '',
+          fileName: page.fileName,
           componentName: page.moduleName,
         };
       });
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/appConfig.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/appConfig.ts
index 2d630c407..354e5f93c 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/appConfig.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/appConfig.ts
@@ -1,3 +1,4 @@
+import changeCase from 'change-case';
 import { COMMON_CHUNK_NAME } from '../../../../../const/generator';
 
 import {
@@ -6,7 +7,7 @@ import {
   ChunkType,
   FileType,
   ICodeStruct,
-  IRouterInfo,
+  IParseResult,
 } from '../../../../../types';
 
 const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
@@ -15,23 +16,22 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       ...pre,
     };
 
-    const ir = next.ir as IRouterInfo;
+    const ir = next.ir as IParseResult;
+
+    const routes = ir.globalRouter?.routes?.map((route) => ({
+      path: route.path,
+      source: `pages/${changeCase.pascalCase(route.fileName)}/index`,
+    })) || [{ path: '/', source: 'pages/Home/index' }];
 
-    // TODO: 如何生成路由?
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: FileType.JSON,
       name: COMMON_CHUNK_NAME.CustomContent,
       content: `
 {
-  "routes": [
-    {
-      "path": "/",
-      "source": "pages/Home/index"
-    }
-  ],
+  "routes": ${JSON.stringify(routes, null, 2)},
   "window": {
-    "title": "Rax App Demo"
+    "title": ${JSON.stringify(ir.project?.meta?.title || ir.project?.meta?.name || '')}
   }
 }
       `,
diff --git a/packages/code-generator/src/types/intermediate.ts b/packages/code-generator/src/types/intermediate.ts
index c69ace247..42d7fc69a 100644
--- a/packages/code-generator/src/types/intermediate.ts
+++ b/packages/code-generator/src/types/intermediate.ts
@@ -25,6 +25,7 @@ export interface IUtilInfo extends IWithDependency {
 export interface IRouterInfo extends IWithDependency {
   routes: Array<{
     path: string;
+    fileName: string;
     componentName: string;
   }>;
 }
diff --git a/packages/code-generator/src/utils/compositeType.ts b/packages/code-generator/src/utils/compositeType.ts
index 0993f11c5..d803a1b09 100644
--- a/packages/code-generator/src/utils/compositeType.ts
+++ b/packages/code-generator/src/utils/compositeType.ts
@@ -108,12 +108,6 @@ export function generateUnknownType(value: CompositeValue, handlers: CustomHandl
 
 export function generateCompositeType(value: CompositeValue, handlers: CustomHandlerSet = {}): [boolean, string] {
   const result = generateUnknownType(value, handlers);
-
-  // TODO：什么场景下会返回这样的字符串？？
-  if (result.substr(0, 1) === "'" && result.substr(-1, 1) === "'") {
-    return [true, result.substring(1, result.length - 1)];
-  }
-
   return [false, result];
 }
 
diff --git a/packages/code-generator/src/utils/nodeToJSX.ts b/packages/code-generator/src/utils/nodeToJSX.ts
index 7b5b96c6f..46d992824 100644
--- a/packages/code-generator/src/utils/nodeToJSX.ts
+++ b/packages/code-generator/src/utils/nodeToJSX.ts
@@ -11,7 +11,7 @@ import {
   CompositeValue,
   NodeSchema,
 } from '../types';
-import { CustomHandlerSet, generateCompositeType } from './compositeType';
+import { CustomHandlerSet, generateCompositeType, generateUnknownType } from './compositeType';
 import { generateExpression } from './jsExpression';
 
 // tslint:disable-next-line: no-empty
@@ -49,10 +49,18 @@ export function generateAttr(
     return [];
   }
 
-  const [isString, valueStr] = generateCompositeType(attrValue, customHandlers);
+  if (typeof attrValue === 'string') {
+    return [
+      {
+        value: `${attrName}=${JSON.stringify(attrValue)}`,
+        type: PIECE_TYPE.ATTR,
+      },
+    ];
+  }
+
   return [
     {
-      value: `${attrName}=${isString ? `"${valueStr}"` : `{${valueStr}}`}`,
+      value: `${attrName}={${generateUnknownType(attrValue, customHandlers)}}`,
       type: PIECE_TYPE.ATTR,
     },
   ];
diff --git a/packages/code-generator/test-cases/rax-app/demo1/schema.json5 b/packages/code-generator/test-cases/rax-app/demo1/schema.json5
index 510b70006..1d405aee8 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo1/schema.json5
@@ -23,6 +23,9 @@
       props: {},
       lifeCycles: {},
       fileName: 'home',
+      meta: {
+        router: '/',
+      },
       dataSource: {
         list: [],
       },
diff --git a/packages/code-generator/test-cases/rax-app/demo2/schema.json5 b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
index e6ce17b43..5154efdea 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
@@ -35,6 +35,9 @@
     {
       componentName: 'Page',
       fileName: 'home',
+      meta: {
+        router: '/',
+      },
       state: {
         clickCount: 0,
         user: { name: '张三', age: 18, avatar: 'https://gw.alicdn.com/tfs/TB1Ui9BMkY2gK0jSZFgXXc5OFXa-50-50.png' },
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/.editorconfig b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/.editorconfig
new file mode 100644
index 000000000..5760be583
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/.editorconfig
@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/.eslintignore b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/.eslintignore
new file mode 100644
index 000000000..3b437e614
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/.eslintignore
@@ -0,0 +1,11 @@
+# 忽略目录
+build/
+tests/
+demo/
+
+# node 覆盖率文件
+coverage/
+
+# 忽略文件
+**/*-min.js
+**/*.min.js
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/.eslintrc.js b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/.eslintrc.js
new file mode 100644
index 000000000..e2a7c5b54
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['rax'],
+};
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/.gitignore b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/.gitignore
new file mode 100644
index 000000000..50a53dace
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/.gitignore
@@ -0,0 +1,17 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+*~
+*.swp
+*.log
+
+.DS_Store
+.idea/
+.temp/
+
+build/
+dist/
+lib/
+coverage/
+node_modules/
+
+template.yml
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/README.md b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/README.md
new file mode 100644
index 000000000..6eff85d41
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/README.md
@@ -0,0 +1,15 @@
+# @ali/rax-component-demo
+
+## Getting Started
+
+### `npm run start`
+
+Runs the app in development mode.
+
+Open [http://localhost:9999](http://localhost:9999) to view it in the browser.
+
+The page will reload if you make edits.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/abc.json b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/abc.json
new file mode 100644
index 000000000..f9ee40f71
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/abc.json
@@ -0,0 +1,7 @@
+{
+  "type": "rax",
+  "builder": "@ali/builder-rax-v1",
+  "info": {
+    "raxVersion": "1.x"
+  }
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/build.json b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/build.json
new file mode 100644
index 000000000..f3e9b9323
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/build.json
@@ -0,0 +1,12 @@
+{
+  "inlineStyle": false,
+  "plugins": [
+    [
+      "build-plugin-rax-app",
+      {
+        "targets": ["web", "miniapp"]
+      }
+    ],
+    "@ali/build-plugin-rax-app-def"
+  ]
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json
new file mode 100644
index 000000000..7d41d4764
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "@ali/rax-app-demo",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "build": "rm -f ./dist/miniapp.tar.gz && npm run build:miniapp && cd build/miniapp && tar czf ../../dist/miniapp.tar.gz *",
+    "build:miniapp": "build-scripts build",
+    "start": "build-scripts start",
+    "lint": "eslint --ext .js --ext .jsx ./"
+  },
+  "dependencies": {
+    "@ali/lowcode-datasource-engine": "^0.1.0",
+    "universal-env": "^3.2.0",
+    "rax": "^1.1.0",
+    "rax-app": "^2.0.0",
+    "rax-document": "^0.1.0",
+    "rax-view": "^1.0.0",
+    "rax-text": "^1.0.0",
+    "rax-link": "^1.0.0",
+    "rax-image": "^1.0.0"
+  },
+  "devDependencies": {
+    "build-plugin-rax-app": "^5.0.0",
+    "@alib/build-scripts": "^0.1.0",
+    "@typescript-eslint/eslint-plugin": "^2.11.0",
+    "@typescript-eslint/parser": "^2.11.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.8.0",
+    "eslint-config-rax": "^0.1.0",
+    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-module": "^0.1.0",
+    "eslint-plugin-react": "^7.18.0",
+    "@ali/build-plugin-rax-app-def": "^1.0.0"
+  }
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/app.js b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/app.js
new file mode 100644
index 000000000..bc474c6e3
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/app.js
@@ -0,0 +1,6 @@
+import { runApp } from 'rax-app';
+import appConfig from './app.json';
+
+import './global.scss';
+
+runApp(appConfig);
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/app.json b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/app.json
new file mode 100644
index 000000000..5082c4f9d
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/app.json
@@ -0,0 +1,19 @@
+{
+  "routes": [
+    {
+      "path": "/",
+      "source": "pages/Home/index"
+    },
+    {
+      "path": "/list",
+      "source": "pages/List/index"
+    },
+    {
+      "path": "/detail",
+      "source": "pages/Detail/index"
+    }
+  ],
+  "window": {
+    "title": "Rax App Demo"
+  }
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/document/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/document/index.jsx
new file mode 100644
index 000000000..50569a9b6
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/document/index.jsx
@@ -0,0 +1,25 @@
+import { createElement } from 'rax';
+import { Root, Style, Script } from 'rax-document';
+
+function Document() {
+  return (
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"
+        />
+        <title>Rax App Demo</title>
+        <Style />
+      </head>
+      <body>
+        {/* root container */}
+        <Root />
+        <Script />
+      </body>
+    </html>
+  );
+}
+
+export default Document;
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/global.scss b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/global.scss
new file mode 100644
index 000000000..2b98f3726
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/global.scss
@@ -0,0 +1,9 @@
+body {
+  -webkit-font-smoothing: antialiased;
+}
+
+page,
+body {
+  width: 750rpx;
+  overflow-x: hidden;
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.css b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
new file mode 100644
index 000000000..e55caffea
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
@@ -0,0 +1,136 @@
+// 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
+// 例外：rax 框架的导出名和各种组件名除外。
+import { createElement, Component } from 'rax';
+
+import View from 'rax-view';
+
+import Text from 'rax-text';
+
+import Link from 'rax-link';
+
+import Image from 'rax-image';
+
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+
+import { isMiniApp as __$$isMiniApp } from 'universal-env';
+
+import __$$projectUtils from '../../utils';
+
+import './index.css';
+
+class Detail$$Page extends Component {
+  state = {};
+
+  _methods = this._defineMethods();
+
+  _context = this._createContext();
+
+  _dataSourceConfig = this._defineDataSourceConfig();
+  _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
+
+  _utils = this._defineUtils();
+
+  componentDidMount() {
+    this._dataSourceEngine.reloadDataSource();
+  }
+
+  componentWillUnmount() {}
+
+  render() {
+    const __$$context = this._context;
+
+    return (
+      <View>
+        <View>
+          <Text>This is the Detail Page</Text>
+        </View>
+        <Link href="javascript:history.back();" miniappHref="navigateBack:">
+          <Text>Go back</Text>
+        </Link>
+      </View>
+    );
+  }
+
+  _createContext() {
+    const self = this;
+
+    const context = {
+      get state() {
+        return self.state;
+      },
+      setState(newState) {
+        self.setState(newState);
+      },
+      get dataSourceMap() {
+        return self._dataSourceEngine.dataSourceMap || {};
+      },
+      async reloadDataSource() {
+        await self._dataSourceEngine.reloadDataSource();
+      },
+      get utils() {
+        return self._utils;
+      },
+      get page() {
+        return context;
+      },
+      get component() {
+        return context;
+      },
+      get props() {
+        return self.props;
+      },
+      ...this._methods,
+    };
+
+    return context;
+  }
+
+  _defineDataSourceConfig() {
+    const __$$context = this._context;
+    return { list: [] };
+  }
+
+  _defineUtils() {
+    const utils = {
+      ...__$$projectUtils,
+    };
+
+    Object.entries(utils).forEach(([name, util]) => {
+      if (typeof util === 'function') {
+        utils[name] = util.bind(this._context);
+      }
+    });
+
+    return utils;
+  }
+
+  _defineMethods() {
+    const __$$methods = {};
+
+    // 为所有的方法绑定上下文
+    Object.entries(__$$methods).forEach(([methodName, method]) => {
+      if (typeof method === 'function') {
+        __$$methods[methodName] = (...args) => {
+          return method.apply(this._context, args);
+        };
+      }
+    });
+
+    return __$$methods;
+  }
+}
+
+export default Detail$$Page;
+
+function __$$eval(expr) {
+  try {
+    return expr();
+  } catch (err) {
+    console.warn('Failed to evaluate: ', expr, err);
+  }
+}
+
+function __$$evalArray(expr) {
+  const res = __$$eval(expr);
+  return Array.isArray(res) ? res : [];
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.css b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
new file mode 100644
index 000000000..0a3d6b94f
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
@@ -0,0 +1,136 @@
+// 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
+// 例外：rax 框架的导出名和各种组件名除外。
+import { createElement, Component } from 'rax';
+
+import View from 'rax-view';
+
+import Text from 'rax-text';
+
+import Link from 'rax-link';
+
+import Image from 'rax-image';
+
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+
+import { isMiniApp as __$$isMiniApp } from 'universal-env';
+
+import __$$projectUtils from '../../utils';
+
+import './index.css';
+
+class Home$$Page extends Component {
+  state = {};
+
+  _methods = this._defineMethods();
+
+  _context = this._createContext();
+
+  _dataSourceConfig = this._defineDataSourceConfig();
+  _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
+
+  _utils = this._defineUtils();
+
+  componentDidMount() {
+    this._dataSourceEngine.reloadDataSource();
+  }
+
+  componentWillUnmount() {}
+
+  render() {
+    const __$$context = this._context;
+
+    return (
+      <View>
+        <View>
+          <Text>This is the Home Page</Text>
+        </View>
+        <Link href="#/list" miniappHref="navigate:/pages/List/index">
+          <Text>Go To The List Page</Text>
+        </Link>
+      </View>
+    );
+  }
+
+  _createContext() {
+    const self = this;
+
+    const context = {
+      get state() {
+        return self.state;
+      },
+      setState(newState) {
+        self.setState(newState);
+      },
+      get dataSourceMap() {
+        return self._dataSourceEngine.dataSourceMap || {};
+      },
+      async reloadDataSource() {
+        await self._dataSourceEngine.reloadDataSource();
+      },
+      get utils() {
+        return self._utils;
+      },
+      get page() {
+        return context;
+      },
+      get component() {
+        return context;
+      },
+      get props() {
+        return self.props;
+      },
+      ...this._methods,
+    };
+
+    return context;
+  }
+
+  _defineDataSourceConfig() {
+    const __$$context = this._context;
+    return { list: [] };
+  }
+
+  _defineUtils() {
+    const utils = {
+      ...__$$projectUtils,
+    };
+
+    Object.entries(utils).forEach(([name, util]) => {
+      if (typeof util === 'function') {
+        utils[name] = util.bind(this._context);
+      }
+    });
+
+    return utils;
+  }
+
+  _defineMethods() {
+    const __$$methods = {};
+
+    // 为所有的方法绑定上下文
+    Object.entries(__$$methods).forEach(([methodName, method]) => {
+      if (typeof method === 'function') {
+        __$$methods[methodName] = (...args) => {
+          return method.apply(this._context, args);
+        };
+      }
+    });
+
+    return __$$methods;
+  }
+}
+
+export default Home$$Page;
+
+function __$$eval(expr) {
+  try {
+    return expr();
+  } catch (err) {
+    console.warn('Failed to evaluate: ', expr, err);
+  }
+}
+
+function __$$evalArray(expr) {
+  const res = __$$eval(expr);
+  return Array.isArray(res) ? res : [];
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.css b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
new file mode 100644
index 000000000..edbb4c07d
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
@@ -0,0 +1,139 @@
+// 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
+// 例外：rax 框架的导出名和各种组件名除外。
+import { createElement, Component } from 'rax';
+
+import View from 'rax-view';
+
+import Text from 'rax-text';
+
+import Link from 'rax-link';
+
+import Image from 'rax-image';
+
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+
+import { isMiniApp as __$$isMiniApp } from 'universal-env';
+
+import __$$projectUtils from '../../utils';
+
+import './index.css';
+
+class List$$Page extends Component {
+  state = {};
+
+  _methods = this._defineMethods();
+
+  _context = this._createContext();
+
+  _dataSourceConfig = this._defineDataSourceConfig();
+  _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
+
+  _utils = this._defineUtils();
+
+  componentDidMount() {
+    this._dataSourceEngine.reloadDataSource();
+  }
+
+  componentWillUnmount() {}
+
+  render() {
+    const __$$context = this._context;
+
+    return (
+      <View>
+        <View>
+          <Text>This is the List Page</Text>
+        </View>
+        <Link href="#/detail" miniappHref="navigate:/pages/Detail/index">
+          <Text>Go To The Detail Page</Text>
+        </Link>
+        <Link href="javascript:history.back();" miniappHref="navigateBack:">
+          <Text>Go back</Text>
+        </Link>
+      </View>
+    );
+  }
+
+  _createContext() {
+    const self = this;
+
+    const context = {
+      get state() {
+        return self.state;
+      },
+      setState(newState) {
+        self.setState(newState);
+      },
+      get dataSourceMap() {
+        return self._dataSourceEngine.dataSourceMap || {};
+      },
+      async reloadDataSource() {
+        await self._dataSourceEngine.reloadDataSource();
+      },
+      get utils() {
+        return self._utils;
+      },
+      get page() {
+        return context;
+      },
+      get component() {
+        return context;
+      },
+      get props() {
+        return self.props;
+      },
+      ...this._methods,
+    };
+
+    return context;
+  }
+
+  _defineDataSourceConfig() {
+    const __$$context = this._context;
+    return { list: [] };
+  }
+
+  _defineUtils() {
+    const utils = {
+      ...__$$projectUtils,
+    };
+
+    Object.entries(utils).forEach(([name, util]) => {
+      if (typeof util === 'function') {
+        utils[name] = util.bind(this._context);
+      }
+    });
+
+    return utils;
+  }
+
+  _defineMethods() {
+    const __$$methods = {};
+
+    // 为所有的方法绑定上下文
+    Object.entries(__$$methods).forEach(([methodName, method]) => {
+      if (typeof method === 'function') {
+        __$$methods[methodName] = (...args) => {
+          return method.apply(this._context, args);
+        };
+      }
+    });
+
+    return __$$methods;
+  }
+}
+
+export default List$$Page;
+
+function __$$eval(expr) {
+  try {
+    return expr();
+  } catch (err) {
+    console.warn('Failed to evaluate: ', expr, err);
+  }
+}
+
+function __$$evalArray(expr) {
+  const res = __$$eval(expr);
+  return Array.isArray(res) ? res : [];
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/utils.js b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/utils.js
new file mode 100644
index 000000000..ff8b4c563
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/utils.js
@@ -0,0 +1 @@
+export default {};
diff --git a/packages/code-generator/test-cases/rax-app/demo3/schema.json5 b/packages/code-generator/test-cases/rax-app/demo3/schema.json5
new file mode 100644
index 000000000..cb8ba2f85
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo3/schema.json5
@@ -0,0 +1,175 @@
+{
+  // Schema 参见：https://yuque.antfin-inc.com/mo/spec/spec-materials#eNCJr
+  version: '1.0.0',
+  componentsMap: [
+    {
+      componentName: 'View',
+      package: 'rax-view',
+      version: '^1.0.0',
+      destructuring: false,
+      exportName: 'View',
+    },
+    {
+      componentName: 'Text',
+      package: 'rax-text',
+      version: '^1.0.0',
+      destructuring: false,
+      exportName: 'Text',
+    },
+    {
+      componentName: 'Link',
+      package: 'rax-link',
+      version: '^1.0.0',
+      destructuring: false,
+      exportName: 'Link',
+    },
+    {
+      componentName: 'Image',
+      package: 'rax-image',
+      version: '^1.0.0',
+      destructuring: false,
+      exportName: 'Image',
+    },
+    {
+      componentName: 'Page',
+      package: 'rax-view',
+      version: '^1.0.0',
+      destructuring: false,
+      exportName: 'Page',
+    },
+  ],
+  componentsTree: [
+    {
+      componentName: 'Page',
+      fileName: 'home',
+      state: {},
+      dataSource: {
+        list: [],
+      },
+      meta: {
+        router: '/',
+      },
+      children: [
+        {
+          componentName: 'View',
+          children: [
+            {
+              componentName: 'Text',
+              children: 'This is the Home Page',
+            },
+          ],
+        },
+        {
+          componentName: 'Link',
+          props: {
+            href: '#/list',
+            miniappHref: 'navigate:/pages/List/index',
+          },
+          children: [
+            {
+              componentName: 'Text',
+              children: 'Go To The List Page',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      componentName: 'Page',
+      fileName: 'list',
+      state: {},
+      dataSource: {
+        list: [],
+      },
+      meta: {
+        router: '/list',
+      },
+      children: [
+        {
+          componentName: 'View',
+          children: [
+            {
+              componentName: 'Text',
+              children: 'This is the List Page',
+            },
+          ],
+        },
+        {
+          componentName: 'Link',
+          props: {
+            href: '#/detail',
+            miniappHref: 'navigate:/pages/Detail/index',
+          },
+          children: [
+            {
+              componentName: 'Text',
+              children: 'Go To The Detail Page',
+            },
+          ],
+        },
+        {
+          componentName: 'Link',
+          props: {
+            href: 'javascript:history.back();',
+            miniappHref: 'navigateBack:',
+          },
+          children: [
+            {
+              componentName: 'Text',
+              children: 'Go back',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      componentName: 'Page',
+      fileName: 'detail',
+      state: {},
+      dataSource: {
+        list: [],
+      },
+      meta: {
+        router: '/detail',
+      },
+      children: [
+        {
+          componentName: 'View',
+          children: [
+            {
+              componentName: 'Text',
+              children: 'This is the Detail Page',
+            },
+          ],
+        },
+        {
+          componentName: 'Link',
+          props: {
+            href: 'javascript:history.back();',
+            miniappHref: 'navigateBack:',
+          },
+          children: [
+            {
+              componentName: 'Text',
+              children: 'Go back',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  css: 'page,body{\n  width: 750rpx;\n  overflow-x: hidden;\n}',
+  config: {
+    sdkVersion: '1.0.3',
+    historyMode: 'hash',
+    targetRootID: 'root',
+  },
+  meta: {
+    name: 'Rax App Demo',
+    git_group: 'demo-group',
+    project_name: 'demo-project',
+    description: '这是一个示例应用',
+    spma: 'spmademo',
+    creator: '张三',
+  },
+}

From 46c896eacfce28c6aa72d008bcd8e18ca4745f1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Mon, 17 Aug 2020 16:45:48 +0800
Subject: [PATCH 43/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E5=87=BA=E7=A0=81?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E7=9A=84=20DiskPublisher=20=E6=94=B9?=
 =?UTF-8?q?=E6=88=90=E6=94=AF=E6=8C=81=E4=BC=A0=E5=85=A5=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=20FS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/publisher/disk/index.ts               | 32 ++++++---------
 .../src/publisher/disk/utils.ts               | 41 ++++++++++---------
 2 files changed, 33 insertions(+), 40 deletions(-)

diff --git a/packages/code-generator/src/publisher/disk/index.ts b/packages/code-generator/src/publisher/disk/index.ts
index b63649ab9..ff85d6487 100644
--- a/packages/code-generator/src/publisher/disk/index.ts
+++ b/packages/code-generator/src/publisher/disk/index.ts
@@ -1,16 +1,14 @@
-import {
-  IResultDir,
-  PublisherFactory,
-  IPublisher,
-  IPublisherFactoryParams,
-  PublisherError,
-} from '../../types';
-import { writeFolder } from './utils';
+import * as defaultFs from 'fs';
+import { IResultDir, PublisherFactory, IPublisher, IPublisherFactoryParams, PublisherError } from '../../types';
+import { writeFolder, IFileSystem } from './utils';
+
+export type { IFileSystem };
 
 export interface IDiskFactoryParams extends IPublisherFactoryParams {
   outputPath?: string;
   projectSlug?: string;
   createProjectFolder?: boolean;
+  fs?: IFileSystem;
 }
 
 export interface IDiskPublisher extends IPublisher<IDiskFactoryParams, string> {
@@ -18,11 +16,10 @@ export interface IDiskPublisher extends IPublisher<IDiskFactoryParams, string> {
   setOutputPath: (path: string) => void;
 }
 
-export const createDiskPublisher: PublisherFactory<
-  IDiskFactoryParams,
-  IDiskPublisher
-> = (params: IDiskFactoryParams = {}): IDiskPublisher => {
-  let { project, outputPath = './' } = params;
+export const createDiskPublisher: PublisherFactory<IDiskFactoryParams, IDiskPublisher> = (
+  params: IDiskFactoryParams = {},
+): IDiskPublisher => {
+  let { project, outputPath = './', fs = defaultFs } = params;
 
   const getProject = (): IResultDir => {
     if (!project) {
@@ -49,19 +46,14 @@ export const createDiskPublisher: PublisherFactory<
 
     const projectOutputPath = options.outputPath || outputPath;
     const overrideProjectSlug = options.projectSlug || params.projectSlug;
-    const createProjectFolder =
-      options.createProjectFolder || params.createProjectFolder;
+    const createProjectFolder = options.createProjectFolder || params.createProjectFolder;
 
     if (overrideProjectSlug) {
       projectToPublish.name = overrideProjectSlug;
     }
 
     try {
-      await writeFolder(
-        projectToPublish,
-        projectOutputPath,
-        createProjectFolder,
-      );
+      await writeFolder(projectToPublish, projectOutputPath, createProjectFolder, fs);
       return { success: true, payload: projectOutputPath };
     } catch (error) {
       throw new PublisherError(error);
diff --git a/packages/code-generator/src/publisher/disk/utils.ts b/packages/code-generator/src/publisher/disk/utils.ts
index 35fbbc2ad..1bceffef8 100644
--- a/packages/code-generator/src/publisher/disk/utils.ts
+++ b/packages/code-generator/src/publisher/disk/utils.ts
@@ -1,39 +1,38 @@
-import { existsSync, mkdir, writeFile } from 'fs';
+import * as systemFs from 'fs';
 import { join } from 'path';
 
 import { IResultDir, IResultFile } from '../../types';
 
+export interface IFileSystem {
+  existsSync: typeof systemFs.existsSync;
+  mkdir: typeof systemFs.mkdir;
+  writeFile: typeof systemFs.writeFile;
+}
+
 export const writeFolder = async (
   folder: IResultDir,
   currentPath: string,
   createProjectFolder = true,
+  fs: IFileSystem = systemFs,
 ): Promise<void> => {
   const { name, files, dirs } = folder;
 
-  const folderPath = createProjectFolder
-    ? join(currentPath, name)
-    : currentPath;
+  const folderPath = createProjectFolder ? join(currentPath, name) : currentPath;
 
-  if (!existsSync(folderPath)) {
-    await createDirectory(folderPath);
+  if (!fs.existsSync(folderPath)) {
+    await createDirectory(folderPath, fs);
   }
 
-  const promises = [
-    writeFilesToFolder(folderPath, files),
-    writeSubFoldersToFolder(folderPath, dirs),
-  ];
+  const promises = [writeFilesToFolder(folderPath, files, fs), writeSubFoldersToFolder(folderPath, dirs, fs)];
 
   await Promise.all(promises);
 };
 
-const writeFilesToFolder = async (
-  folderPath: string,
-  files: IResultFile[],
-): Promise<void> => {
-  const promises = files.map(file => {
+const writeFilesToFolder = async (folderPath: string, files: IResultFile[], fs: IFileSystem): Promise<void> => {
+  const promises = files.map((file) => {
     const fileName = file.ext ? `${file.name}.${file.ext}` : file.name;
     const filePath = join(folderPath, fileName);
-    return writeContentToFile(filePath, file.content);
+    return writeContentToFile(filePath, file.content, 'utf8', fs);
   });
 
   await Promise.all(promises);
@@ -42,17 +41,18 @@ const writeFilesToFolder = async (
 const writeSubFoldersToFolder = async (
   folderPath: string,
   subFolders: IResultDir[],
+  fs: IFileSystem,
 ): Promise<void> => {
-  const promises = subFolders.map(subFolder => {
+  const promises = subFolders.map((subFolder) => {
     return writeFolder(subFolder, folderPath);
   });
 
   await Promise.all(promises);
 };
 
-const createDirectory = (pathToDir: string): Promise<void> => {
+const createDirectory = (pathToDir: string, fs: IFileSystem): Promise<void> => {
   return new Promise((resolve, reject) => {
-    mkdir(pathToDir, { recursive: true }, err => {
+    fs.mkdir(pathToDir, { recursive: true }, (err) => {
       err ? reject(err) : resolve();
     });
   });
@@ -62,9 +62,10 @@ const writeContentToFile = (
   filePath: string,
   fileContent: string,
   encoding: string = 'utf8',
+  fs: IFileSystem,
 ): Promise<void> => {
   return new Promise((resolve, reject) => {
-    writeFile(filePath, fileContent, encoding, err => {
+    fs.writeFile(filePath, fileContent, encoding, (err) => {
       err ? reject(err) : resolve();
     });
   });

From 7359d1d9853f8818abfe58125db7b9010c63539c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=A5=E5=B8=8C?= <armslave.yy@alibaba-inc.com>
Date: Mon, 17 Aug 2020 17:07:02 +0800
Subject: [PATCH 44/80] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20friendly=20nod?=
 =?UTF-8?q?eToJsx=20API=20&=20esmodule=20alias=20logic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/demo/demo.js          |  4 +-
 .../code-generator/src/parser/SchemaParser.ts |  4 +-
 .../src/plugins/common/esmodule.ts            | 73 ++++++++++---------
 .../component/rax/containerLifeCycle.ts       | 32 +++-----
 .../plugins/component/rax/containerMethods.ts |  2 +-
 .../framework/icejs/plugins/entryHtml.ts      |  2 +-
 .../framework/rax/plugins/entryDocument.ts    |  2 +-
 .../code-generator/src/solutions/rax-app.ts   |  2 +-
 packages/code-generator/src/types/core.ts     |  4 +
 .../code-generator/src/utils/jsExpression.ts  |  6 +-
 .../code-generator/src/utils/nodeToJSX.ts     | 52 ++++++++-----
 11 files changed, 98 insertions(+), 85 deletions(-)

diff --git a/packages/code-generator/demo/demo.js b/packages/code-generator/demo/demo.js
index 28b741f4a..2b6e02f52 100644
--- a/packages/code-generator/demo/demo.js
+++ b/packages/code-generator/demo/demo.js
@@ -171,5 +171,5 @@ function exportProject() {
 
 // main();
 // exportModule();
-// exportProject();
-demo();
+exportProject();
+// demo();
diff --git a/packages/code-generator/src/parser/SchemaParser.ts b/packages/code-generator/src/parser/SchemaParser.ts
index c16f06e2e..910f810c0 100644
--- a/packages/code-generator/src/parser/SchemaParser.ts
+++ b/packages/code-generator/src/parser/SchemaParser.ts
@@ -146,7 +146,7 @@ class SchemaParser implements ISchemaParser {
                   }
                 }
               }
-              return [''];
+              return '';
             },
           },
           {
@@ -236,7 +236,7 @@ class SchemaParser implements ISchemaParser {
     return handleSubNodes<string>(
       children,
       {
-        node: (i: NodeSchema) => [i.componentName],
+        node: (i: NodeSchema) => i.componentName,
       },
       {
         rerun: true,
diff --git a/packages/code-generator/src/plugins/common/esmodule.ts b/packages/code-generator/src/plugins/common/esmodule.ts
index 54dce18e2..49b26439a 100644
--- a/packages/code-generator/src/plugins/common/esmodule.ts
+++ b/packages/code-generator/src/plugins/common/esmodule.ts
@@ -50,7 +50,12 @@ function groupDepsByPack(deps: IDependency[]): Record<string, IDependency[]> {
   return depMap;
 }
 
-function buildPackageImport(pkg: string, deps: IDependency[], targetFileType: string): ICodeChunk[] {
+function buildPackageImport(
+  pkg: string,
+  deps: IDependency[],
+  targetFileType: string,
+  useAliasName: boolean,
+): ICodeChunk[] {
   const chunks: ICodeChunk[] = [];
   let defaultImport = '';
   let defaultImportAs = '';
@@ -60,20 +65,8 @@ function buildPackageImport(pkg: string, deps: IDependency[], targetFileType: st
     const srcName = dep.exportName;
     let targetName = dep.componentName || dep.exportName;
 
+    // 如果是自组件，则导出父组件，并且根据自组件命名规则，判断是否需要定义标识符
     if (dep.subName) {
-      chunks.push({
-        type: ChunkType.STRING,
-        fileType: targetFileType,
-        name: COMMON_CHUNK_NAME.ImportAliasDefine,
-        content: `const ${targetName} = ${srcName}.${dep.subName};`,
-        linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport, COMMON_CHUNK_NAME.InternalDepsImport],
-        ext: {
-          originalName: `${srcName}.${dep.subName}`,
-          aliasName: targetName,
-          dependency: dep,
-        },
-      });
-
       if (targetName !== `${srcName}.${dep.subName}`) {
         if (!isValidIdentifier(targetName)) {
           throw new CodeGeneratorError(`Invalid Identifier [${targetName}]`);
@@ -82,9 +75,14 @@ function buildPackageImport(pkg: string, deps: IDependency[], targetFileType: st
         chunks.push({
           type: ChunkType.STRING,
           fileType: targetFileType,
-          name: COMMON_CHUNK_NAME.FileVarDefine,
+          name: COMMON_CHUNK_NAME.ImportAliasDefine,
           content: `const ${targetName} = ${srcName}.${dep.subName};`,
           linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport, COMMON_CHUNK_NAME.InternalDepsImport],
+          ext: {
+            originalName: `${srcName}.${dep.subName}`,
+            aliasName: targetName,
+            dependency: dep,
+          },
         });
       }
 
@@ -94,30 +92,35 @@ function buildPackageImport(pkg: string, deps: IDependency[], targetFileType: st
     if (dep.destructuring) {
       imports[srcName] = targetName;
     } else if (defaultImport) {
-      // 有些时候，可能已经从某个包里引入了一个东东，但是希望能再起个别名，这时候用赋值语句代替
-      chunks.push({
-        type: ChunkType.STRING,
-        fileType: targetFileType,
-        name: COMMON_CHUNK_NAME.ImportAliasDefine,
-        content: `const ${targetName} = ${defaultImportAs};`,
-        linkAfter: [COMMON_CHUNK_NAME.InternalDepsImport, COMMON_CHUNK_NAME.ExternalDepsImport],
-        ext: {
-          originalName: defaultImportAs,
-          aliasName: targetName,
-          dependency: dep,
-        },
-      });
+      throw new CodeGeneratorError(`[${pkg}] has more than one default export.`);
     } else {
       defaultImport = srcName;
       defaultImportAs = targetName;
     }
+
+    if (targetName !== srcName) {
+      chunks.push({
+        type: ChunkType.STRING,
+        fileType: targetFileType,
+        name: COMMON_CHUNK_NAME.ImportAliasDefine,
+        content: '',
+        linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport, COMMON_CHUNK_NAME.InternalDepsImport],
+        ext: {
+          originalName: srcName,
+          aliasName: targetName,
+          dependency: dep,
+        },
+      });
+    }
   });
 
-  const items = Object.keys(imports).map((src) => (src === imports[src] ? src : `${src} as ${imports[src]}`));
+  const items = Object.keys(imports).map((src) =>
+    src === imports[src] || !useAliasName ? src : `${src} as ${imports[src]}`,
+  );
 
   const statementL = ['import'];
   if (defaultImport) {
-    statementL.push(defaultImportAs);
+    statementL.push(useAliasName ? defaultImportAs : defaultImport);
     if (items.length > 0) {
       statementL.push(',');
     }
@@ -152,13 +155,15 @@ function buildPackageImport(pkg: string, deps: IDependency[], targetFileType: st
 }
 
 type PluginConfig = {
-  fileType: string;
+  fileType?: string; // 导出的文件类型
+  useAliasName?: boolean; // 是否使用 componentName 重命名组件 identifier
 };
 
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?: PluginConfig) => {
-  const cfg: PluginConfig = {
+  const cfg = {
     fileType: FileType.JS,
-    ...config,
+    useAliasName: true,
+    ...(config || {}),
   };
 
   const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
@@ -172,7 +177,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?: Plu
       const packs = groupDepsByPack(ir.deps);
 
       Object.keys(packs).forEach((pkg) => {
-        const chunks = buildPackageImport(pkg, packs[pkg], cfg.fileType);
+        const chunks = buildPackageImport(pkg, packs[pkg], cfg.fileType, cfg.useAliasName);
         next.chunks.push(...chunks);
       });
     }
diff --git a/packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts b/packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts
index ea9d92ee2..18119a572 100644
--- a/packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerLifeCycle.ts
@@ -1,19 +1,11 @@
-import { CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
-import { RAX_CHUNK_NAME } from './const';
+// import { JSExpression } from '@ali/lowcode-types';
 
-import { getFuncExprBody, transformFuncExpr2MethodMember } from '../../../utils/jsExpression';
+// import { CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
+// import { RAX_CHUNK_NAME } from './const';
 
-import {
-  BuilderComponentPlugin,
-  BuilderComponentPluginFactory,
-  ChunkType,
-  CodeGeneratorError,
-  FileType,
-  ICodeChunk,
-  ICodeStruct,
-  IContainerInfo,
-  JSExpression,
-} from '../../../types';
+// import { getFuncExprBody, transformFuncExpr2MethodMember } from '../../../utils/jsExpression';
+
+import { BuilderComponentPlugin, BuilderComponentPluginFactory, ICodeStruct } from '../../../types';
 
 type PluginConfig = {
   fileType: string;
@@ -22,12 +14,12 @@ type PluginConfig = {
 };
 
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
-  const cfg: PluginConfig = {
-    fileType: FileType.JSX,
-    exportNameMapping: {},
-    normalizeNameMapping: {},
-    ...config,
-  };
+  // const cfg: PluginConfig = {
+  //   fileType: FileType.JSX,
+  //   exportNameMapping: {},
+  //   normalizeNameMapping: {},
+  //   ...config,
+  // };
 
   const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
     const next: ICodeStruct = {
diff --git a/packages/code-generator/src/plugins/component/rax/containerMethods.ts b/packages/code-generator/src/plugins/component/rax/containerMethods.ts
index b13c81071..833831bda 100644
--- a/packages/code-generator/src/plugins/component/rax/containerMethods.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerMethods.ts
@@ -1,4 +1,4 @@
-import { CLASS_DEFINE_CHUNK_NAME, COMMON_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
+import { CLASS_DEFINE_CHUNK_NAME } from '../../../const/generator';
 
 import {
   BuilderComponentPlugin,
diff --git a/packages/code-generator/src/plugins/project/framework/icejs/plugins/entryHtml.ts b/packages/code-generator/src/plugins/project/framework/icejs/plugins/entryHtml.ts
index aceb7c645..e5837a8dd 100644
--- a/packages/code-generator/src/plugins/project/framework/icejs/plugins/entryHtml.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/plugins/entryHtml.ts
@@ -28,7 +28,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
             <meta charset="utf-8" />
             <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
             <meta name="viewport" content="width=device-width" />
-            <title>${ir.meta.name}</title>
+            <title>${ir?.meta?.name || 'Ice App'}</title>
           </head>
           <body>
             <div id="app"></div>
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/entryDocument.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/entryDocument.ts
index ba8488c00..cb5240139 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/entryDocument.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/entryDocument.ts
@@ -34,7 +34,7 @@ function Document() {
           name="viewport"
           content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"
         />
-        <title>${ir.meta.name}</title>
+        <title>${ir?.meta?.name || 'Rax App'}</title>
         <Style />
       </head>
       <body>
diff --git a/packages/code-generator/src/solutions/rax-app.ts b/packages/code-generator/src/solutions/rax-app.ts
index 230c93813..11a215c5c 100644
--- a/packages/code-generator/src/solutions/rax-app.ts
+++ b/packages/code-generator/src/solutions/rax-app.ts
@@ -27,7 +27,7 @@ export default function createIceJsProjectBuilder(): IProjectBuilder {
     plugins: {
       components: [
         commonDeps(),
-        esModule({ fileType: 'jsx' }),
+        esModule({ fileType: 'jsx', useAliasName: false }),
         containerClass(),
         containerInitState(),
         containerMethods(),
diff --git a/packages/code-generator/src/types/core.ts b/packages/code-generator/src/types/core.ts
index fb1574637..8c4dd9458 100644
--- a/packages/code-generator/src/types/core.ts
+++ b/packages/code-generator/src/types/core.ts
@@ -154,9 +154,12 @@ export interface HandlerSet<T> {
   slot?: (input: JSSlot) => T;
   node?: (input: NodeSchema) => T;
   array?: (input: any[]) => T;
+  children?: (input: T[]) => T;
   object?: (input: object) => T;
   common?: (input: unknown) => T;
   tagName?: (input: string) => T;
+  loopDataExpr?: (input: string) => T;
+  conditionExpr?: (input: string) => T;
 }
 
 export type ExtGeneratorPlugin = (ctx: INodeGeneratorContext, nodeItem: NodeSchema) => CodePiece[];
@@ -170,6 +173,7 @@ export type NodeGenerator = (nodeItem: NodeDataType) => string;
 
 export interface INodeGeneratorContext {
   handlers: HandlerSet<string>;
+  plugins: ExtGeneratorPlugin[];
   generator: NodeGenerator;
 }
 
diff --git a/packages/code-generator/src/utils/jsExpression.ts b/packages/code-generator/src/utils/jsExpression.ts
index 9b948462f..d30e27141 100644
--- a/packages/code-generator/src/utils/jsExpression.ts
+++ b/packages/code-generator/src/utils/jsExpression.ts
@@ -1,4 +1,4 @@
-import { JSExpression, JSFunction, isJsExpression, isJsFunction } from '@ali/lowcode-types';
+import { JSExpression, JSFunction, isJSExpression, isJSFunction } from '@ali/lowcode-types';
 import { CodeGeneratorError } from '../types';
 
 export function transformFuncExpr2MethodMember(methodName: string, functionBody: string): string {
@@ -40,11 +40,11 @@ export function getArrowFunction(functionBody: string) {
 }
 
 export function isJsCode(value: unknown): boolean {
-  return isJsExpression(value) || isJsFunction(value);
+  return isJSExpression(value) || isJSFunction(value);
 }
 
 export function generateExpression(value: any): string {
-  if (isJsExpression(value)) {
+  if (isJSExpression(value)) {
     return (value as JSExpression).value || 'null';
   }
 
diff --git a/packages/code-generator/src/utils/nodeToJSX.ts b/packages/code-generator/src/utils/nodeToJSX.ts
index 9cc0c25e0..30a333c6b 100644
--- a/packages/code-generator/src/utils/nodeToJSX.ts
+++ b/packages/code-generator/src/utils/nodeToJSX.ts
@@ -18,7 +18,6 @@ import {
   CodePiece,
   HandlerSet,
   NodeGenerator,
-  ExtGeneratorPlugin,
   INodeGeneratorContext,
   NodeGeneratorConfig,
 } from '../types';
@@ -26,7 +25,7 @@ import {
 import { generateCompositeType } from './compositeType';
 
 // tslint:disable-next-line: no-empty
-const noop = () => [];
+const noop = () => undefined;
 
 const handleChildrenDefaultOptions = {
   rerun: false,
@@ -47,19 +46,24 @@ export function handleSubNodes<T>(
   if (Array.isArray(children)) {
     const list: NodeData[] = children as NodeData[];
     return list.map((child) => handleSubNodes(child, handlers, opt)).reduce((p, c) => p.concat(c), []);
-  } else if (isDOMText(children)) {
+  }
+
+  let result: T | undefined = undefined;
+  const childrenRes: T[] = [];
+  if (isDOMText(children)) {
     const handler = handlers.string || handlers.common || noop;
-    return handler(children as string);
+    result = handler(children as string);
   } else if (isJSExpression(children)) {
     const handler = handlers.expression || handlers.common || noop;
-    return handler(children as JSExpression);
+    result = handler(children as JSExpression);
   } else {
     const handler = handlers.node || handlers.common || noop;
     const child = children as NodeSchema;
-    let curRes = handler(child);
+    result = handler(child);
+
     if (opt.rerun && child.children) {
       const childRes = handleSubNodes(child.children, handlers, opt);
-      curRes = curRes.concat(childRes || []);
+      childrenRes.push(...childRes);
     }
     if (child.props) {
       // FIXME: currently only support PropsMap
@@ -69,11 +73,16 @@ export function handleSubNodes<T>(
         .forEach((propName) => {
           const soltVals = (childProps[propName] as JSSlot).value;
           const childRes = handleSubNodes(soltVals, handlers, opt);
-          curRes = curRes.concat(childRes || []);
+          childrenRes.push(...childRes);
         });
     }
-    return curRes;
   }
+
+  if (result !== undefined) {
+    childrenRes.unshift(result);
+  }
+
+  return childrenRes;
 }
 
 export function generateAttr(ctx: INodeGeneratorContext, attrName: string, attrValue: any): CodePiece[] {
@@ -167,18 +176,19 @@ export function linkPieces(pieces: CodePiece[]): string {
 export function generateNodeSchema(nodeItem: NodeSchema, ctx: INodeGeneratorContext): string {
   let pieces: CodePiece[] = [];
 
-  plugins.forEach((p) => {
+  ctx.plugins.forEach((p) => {
     pieces = pieces.concat(p(ctx, nodeItem));
   });
   pieces = pieces.concat(generateBasicNode(ctx, nodeItem));
   pieces = pieces.concat(generateAttrs(ctx, nodeItem));
-  if (nodeItem.children && (nodeItem.children as unknown[]).length > 0) {
-    pieces = pieces.concat(
-      handleChildren<string>(ctx, nodeItem.children, handlers).map((l) => ({
-        type: PIECE_TYPE.CHILDREN,
-        value: l,
-      })),
-    );
+
+  if (nodeItem.children) {
+    const childrenStr = ctx.generator(nodeItem.children);
+
+    pieces.push({
+      type: PIECE_TYPE.CHILDREN,
+      value: childrenStr,
+    });
   }
 
   return linkPieces(pieces);
@@ -191,6 +201,7 @@ export function generateNodeSchema(nodeItem: NodeSchema, ctx: INodeGeneratorCont
 
 /**
  * JSX 生成逻辑插件。在 React 代码模式下生成 loop 与 condition 相关的逻辑代码
+ * @type ExtGeneratorPlugin
  *
  * @export
  * @param {NodeSchema} nodeItem 当前 UI 节点
@@ -251,15 +262,15 @@ export function generateReactCtrlLine(ctx: INodeGeneratorContext, nodeItem: Node
   return pieces;
 }
 
-const handleArray = (v: string[]) => v.join('');
+const handleChildren = (v: string[]) => v.join('');
 
 export function createNodeGenerator(cfg: NodeGeneratorConfig = {}): NodeGenerator {
-  let ctx: INodeGeneratorContext = { handlers: {}, generator: () => '' };
+  let ctx: INodeGeneratorContext = { handlers: {}, plugins: [], generator: () => '' };
 
   const generateNode = (nodeItem: NodeDataType): string => {
     if (_.isArray(nodeItem)) {
       const resList = nodeItem.map((n) => generateNode(n));
-      return (cfg?.handlers?.array || handleArray)(resList);
+      return (cfg?.handlers?.children || handleChildren)(resList);
     }
 
     if (isNodeSchema(nodeItem)) {
@@ -281,6 +292,7 @@ export function createNodeGenerator(cfg: NodeGeneratorConfig = {}): NodeGenerato
 
   ctx = {
     handlers: cfg?.handlers || {},
+    plugins: cfg.plugins || [],
     generator: generateNode,
   };
 

From c42dba2b502d7f1e1f07d96358de0feb2f57b07f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Mon, 17 Aug 2020 17:38:22 +0800
Subject: [PATCH 45/80] =?UTF-8?q?chore:=20=F0=9F=A4=96=20=E4=BB=A5=20"."?=
 =?UTF-8?q?=20=E5=BC=80=E5=A4=B4=E7=9A=84=E6=96=87=E4=BB=B6=E5=9C=A8?=
 =?UTF-8?q?=E5=8F=91=E5=B8=83=20tnpm=20=E5=8C=85=E7=9A=84=E6=97=B6?=
 =?UTF-8?q?=E5=80=99=E4=BC=9A=E8=A2=AB=E5=BF=BD=E7=95=A5,=E6=89=80?=
 =?UTF-8?q?=E4=BB=A5=E6=A8=A1=E6=9D=BF=E6=96=87=E4=BB=B6=E5=BE=97=E6=94=B9?=
 =?UTF-8?q?=E6=88=90=E4=B8=8D=E4=BB=A5"."=E5=BC=80=E5=A4=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../template/files/{.editorconfig.ts => editorconfig.ts}  | 0
 .../template/files/{.eslintignore.ts => eslintignore.ts}  | 0
 .../template/files/{.eslintrc.js.ts => eslintrc.js.ts}    | 0
 .../rax/template/files/{.gitignore.ts => gitignore.ts}    | 0
 .../src/plugins/project/framework/rax/template/index.ts   | 8 ++++----
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename packages/code-generator/src/plugins/project/framework/rax/template/files/{.editorconfig.ts => editorconfig.ts} (100%)
 rename packages/code-generator/src/plugins/project/framework/rax/template/files/{.eslintignore.ts => eslintignore.ts} (100%)
 rename packages/code-generator/src/plugins/project/framework/rax/template/files/{.eslintrc.js.ts => eslintrc.js.ts} (100%)
 rename packages/code-generator/src/plugins/project/framework/rax/template/files/{.gitignore.ts => gitignore.ts} (100%)

diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/.editorconfig.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/editorconfig.ts
similarity index 100%
rename from packages/code-generator/src/plugins/project/framework/rax/template/files/.editorconfig.ts
rename to packages/code-generator/src/plugins/project/framework/rax/template/files/editorconfig.ts
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintignore.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/eslintignore.ts
similarity index 100%
rename from packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintignore.ts
rename to packages/code-generator/src/plugins/project/framework/rax/template/files/eslintignore.ts
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintrc.js.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/eslintrc.js.ts
similarity index 100%
rename from packages/code-generator/src/plugins/project/framework/rax/template/files/.eslintrc.js.ts
rename to packages/code-generator/src/plugins/project/framework/rax/template/files/eslintrc.js.ts
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/files/.gitignore.ts b/packages/code-generator/src/plugins/project/framework/rax/template/files/gitignore.ts
similarity index 100%
rename from packages/code-generator/src/plugins/project/framework/rax/template/files/.gitignore.ts
rename to packages/code-generator/src/plugins/project/framework/rax/template/files/gitignore.ts
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/index.ts b/packages/code-generator/src/plugins/project/framework/rax/template/index.ts
index 12e3e65dd..6859817ba 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/template/index.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/index.ts
@@ -3,10 +3,10 @@ import { IProjectTemplate, IResultDir } from '../../../../../types';
 
 import { runFileGenerator } from '../../../../../utils/templateHelper';
 
-import file0 from './files/.editorconfig';
-import file1 from './files/.eslintignore';
-import file2 from './files/.eslintrc.js';
-import file3 from './files/.gitignore';
+import file0 from './files/editorconfig';
+import file1 from './files/eslintignore';
+import file2 from './files/eslintrc.js';
+import file3 from './files/gitignore';
 import file4 from './files/README.md';
 import file5 from './files/abc.json';
 import file6 from './files/build.json';

From e4f6654aa7d0696e9a41da35a275668015ae067b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Mon, 17 Aug 2020 22:09:40 +0800
Subject: [PATCH 46/80] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=20rax-app=20=E7=9A=84=E9=BB=98=E8=AE=A4=E7=9A=84=20pa?=
 =?UTF-8?q?ckage.json=20=E7=9A=84=E8=84=9A=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/plugins/project/framework/rax/plugins/packageJSON.ts  | 4 +---
 .../rax-app/demo1/expected/demo-project/package.json          | 3 +--
 .../rax-app/demo2/expected/demo-project/package.json          | 3 +--
 .../rax-app/demo3/expected/demo-project/package.json          | 3 +--
 4 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
index f731164ed..63a113d32 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
@@ -28,9 +28,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       private: true,
       version: '1.0.0',
       scripts: {
-        build:
-          'rm -f ./dist/miniapp.tar.gz && npm run build:miniapp && cd build/miniapp && tar czf ../../dist/miniapp.tar.gz *',
-        'build:miniapp': 'build-scripts build',
+        build: 'build-scripts build',
         start: 'build-scripts start',
         lint: 'eslint --ext .js --ext .jsx ./',
       },
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
index 6d3ae68a5..a42398577 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
@@ -3,8 +3,7 @@
   "private": true,
   "version": "1.0.0",
   "scripts": {
-    "build": "rm -f ./dist/miniapp.tar.gz && npm run build:miniapp && cd build/miniapp && tar czf ../../dist/miniapp.tar.gz *",
-    "build:miniapp": "build-scripts build",
+    "build": "build-scripts build",
     "start": "build-scripts start",
     "lint": "eslint --ext .js --ext .jsx ./"
   },
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
index 893e55365..70f2530d9 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
@@ -3,8 +3,7 @@
   "private": true,
   "version": "1.0.0",
   "scripts": {
-    "build": "rm -f ./dist/miniapp.tar.gz && npm run build:miniapp && cd build/miniapp && tar czf ../../dist/miniapp.tar.gz *",
-    "build:miniapp": "build-scripts build",
+    "build": "build-scripts build",
     "start": "build-scripts start",
     "lint": "eslint --ext .js --ext .jsx ./"
   },
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json
index 7d41d4764..ab52a96fc 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json
@@ -3,8 +3,7 @@
   "private": true,
   "version": "1.0.0",
   "scripts": {
-    "build": "rm -f ./dist/miniapp.tar.gz && npm run build:miniapp && cd build/miniapp && tar czf ../../dist/miniapp.tar.gz *",
-    "build:miniapp": "build-scripts build",
+    "build": "build-scripts build",
     "start": "build-scripts start",
     "lint": "eslint --ext .js --ext .jsx ./"
   },

From 5f529aeb40c7f39346054f2027e0e224a3ca14ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Tue, 18 Aug 2020 13:57:44 +0800
Subject: [PATCH 47/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Rax=20=E5=87=BA?=
 =?UTF-8?q?=E7=A0=81=E9=80=82=E9=85=8D=E6=95=B0=E6=8D=AE=E6=BA=90=E5=BC=95?=
 =?UTF-8?q?=E6=93=8E=E7=9A=84=E9=BB=98=E8=AE=A4=20requestHandlers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rax/containerInjectDataSourceEngine.ts    | 33 ++++++++++++++++---
 .../demo-project/src/pages/Home/index.jsx     |  8 ++++-
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
index 8c2f074a6..0669a51e4 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -1,3 +1,4 @@
+import changeCase from 'change-case';
 import { CLASS_DEFINE_CHUNK_NAME, COMMON_CHUNK_NAME } from '../../../const/generator';
 
 import {
@@ -32,6 +33,27 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       ...pre,
     };
 
+    const dataSourceConfig = isContainerSchema(pre.ir) ? pre.ir.dataSource : null;
+    const dataSourceItems: DataSourceConfig[] = (dataSourceConfig && dataSourceConfig.list) || [];
+    const dataSourceEngineOptions = { runtimeConfig: true };
+    if (dataSourceItems.length > 0) {
+      Object.assign(dataSourceEngineOptions, {
+        requestHandlers: dataSourceItems.reduce(
+          (handlers, ds) =>
+            ds.type in handlers
+              ? handlers
+              : {
+                  ...handlers,
+                  [ds.type]: {
+                    type: 'JSExpression',
+                    value: `require('@ali/lowcode-datasource-engine/handlers/${changeCase.kebabCase(ds.type)}')`,
+                  },
+                },
+          {} as Record<string, CompositeValue>,
+        ),
+      });
+    }
+
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: FileType.JSX,
@@ -47,8 +69,12 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       fileType: cfg.fileType,
       name: CLASS_DEFINE_CHUNK_NAME.InsVar,
       content: `
-      _dataSourceConfig = this._defineDataSourceConfig();
-      _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });`,
+        _dataSourceConfig = this._defineDataSourceConfig();
+        _dataSourceEngine = __$$createDataSourceEngine(
+          this._dataSourceConfig,
+          this._context,
+          ${generateUnknownType(dataSourceEngineOptions)}
+        );`,
       linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
     });
 
@@ -62,9 +88,6 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       linkAfter: [RAX_CHUNK_NAME.ClassDidMountBegin],
     });
 
-    const dataSourceConfig = isContainerSchema(pre.ir) ? pre.ir.dataSource : null;
-    const dataSourceItems: DataSourceConfig[] = (dataSourceConfig && dataSourceConfig.list) || [];
-
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: cfg.fileType,
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index 970e1987d..ae81f5f2a 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -39,7 +39,13 @@ class Home$$Page extends Component {
   _context = this._createContext();
 
   _dataSourceConfig = this._defineDataSourceConfig();
-  _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
+  _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, {
+    runtimeConfig: true,
+    requestHandlers: {
+      urlParams: require('@ali/lowcode-datasource-engine/handlers/url-params'),
+      fetch: require('@ali/lowcode-datasource-engine/handlers/fetch'),
+    },
+  });
 
   _utils = this._defineUtils();
 

From c743afd9ee941d3acde6013d58cbdfb2074e7199 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Tue, 18 Aug 2020 14:32:43 +0800
Subject: [PATCH 48/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Rax=20=E5=87=BA?=
 =?UTF-8?q?=E7=A0=81=E4=B8=AD=E5=A2=9E=E5=8A=A0=E5=AF=B9=20urlParams=20?=
 =?UTF-8?q?=E8=BF=99=E7=A7=8D=E7=89=B9=E6=AE=8A=E6=95=B0=E6=8D=AE=E6=BA=90?=
 =?UTF-8?q?=E7=9A=84=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

urlParams 就是页面的参数, 在 Rax 应用里面得通过 withRouter 注入进组件里,并通过
this.props.location 获取,因而数据源的 handler 没法直接获取到,所以得传给对应的 handler
---
 .../code-generator/src/plugins/component/rax/commonDeps.ts   | 1 +
 .../src/plugins/component/rax/containerClass.ts              | 2 +-
 .../plugins/component/rax/containerInjectDataSourceEngine.ts | 4 +++-
 .../demo1/expected/demo-project/src/pages/Home/index.jsx     | 3 ++-
 .../demo2/expected/demo-project/src/pages/Home/index.jsx     | 5 +++--
 .../demo3/expected/demo-project/src/pages/Detail/index.jsx   | 3 ++-
 .../demo3/expected/demo-project/src/pages/Home/index.jsx     | 3 ++-
 .../demo3/expected/demo-project/src/pages/List/index.jsx     | 3 ++-
 8 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/commonDeps.ts b/packages/code-generator/src/plugins/component/rax/commonDeps.ts
index 9e8ad1f57..16191951e 100644
--- a/packages/code-generator/src/plugins/component/rax/commonDeps.ts
+++ b/packages/code-generator/src/plugins/component/rax/commonDeps.ts
@@ -23,6 +23,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
         // 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
         // 例外：rax 框架的导出名和各种组件名除外。
         import { createElement, Component } from 'rax';
+        import { withRouter as __$$withRouter } from 'rax-app';
       `,
       linkAfter: [],
     });
diff --git a/packages/code-generator/src/plugins/component/rax/containerClass.ts b/packages/code-generator/src/plugins/component/rax/containerClass.ts
index 0db104861..8c2bd058d 100644
--- a/packages/code-generator/src/plugins/component/rax/containerClass.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerClass.ts
@@ -125,7 +125,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       type: ChunkType.STRING,
       fileType: FileType.JSX,
       name: COMMON_CHUNK_NAME.FileExport,
-      content: `export default ${componentClassName};`,
+      content: `export default __$$withRouter(${componentClassName});`,
       linkAfter: [
         COMMON_CHUNK_NAME.ExternalDepsImport,
         COMMON_CHUNK_NAME.InternalDepsImport,
diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
index 0669a51e4..b953b3b2b 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -46,7 +46,9 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
                   ...handlers,
                   [ds.type]: {
                     type: 'JSExpression',
-                    value: `require('@ali/lowcode-datasource-engine/handlers/${changeCase.kebabCase(ds.type)}')`,
+                    value:
+                      `require('@ali/lowcode-datasource-engine/handlers/${changeCase.kebabCase(ds.type)}')` +
+                      (ds.type === 'urlParams' ? '({ search: this.props.location.search })' : ''),
                   },
                 },
           {} as Record<string, CompositeValue>,
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
index 53c839182..10070aa94 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
@@ -1,6 +1,7 @@
 // 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
 // 例外：rax 框架的导出名和各种组件名除外。
 import { createElement, Component } from 'rax';
+import { withRouter as __$$withRouter } from 'rax-app';
 
 import Page from 'rax-view';
 
@@ -109,7 +110,7 @@ class Home$$Page extends Component {
   }
 }
 
-export default Home$$Page;
+export default __$$withRouter(Home$$Page);
 
 function __$$eval(expr) {
   try {
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index ae81f5f2a..bfe1af5e2 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -1,6 +1,7 @@
 // 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
 // 例外：rax 框架的导出名和各种组件名除外。
 import { createElement, Component } from 'rax';
+import { withRouter as __$$withRouter } from 'rax-app';
 
 import View from 'rax-view';
 
@@ -42,7 +43,7 @@ class Home$$Page extends Component {
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, {
     runtimeConfig: true,
     requestHandlers: {
-      urlParams: require('@ali/lowcode-datasource-engine/handlers/url-params'),
+      urlParams: require('@ali/lowcode-datasource-engine/handlers/url-params')({ search: this.props.location.search }),
       fetch: require('@ali/lowcode-datasource-engine/handlers/fetch'),
     },
   });
@@ -286,7 +287,7 @@ class Home$$Page extends Component {
   }
 }
 
-export default Home$$Page;
+export default __$$withRouter(Home$$Page);
 
 function __$$eval(expr) {
   try {
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
index e55caffea..9fcf44663 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
@@ -1,6 +1,7 @@
 // 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
 // 例外：rax 框架的导出名和各种组件名除外。
 import { createElement, Component } from 'rax';
+import { withRouter as __$$withRouter } from 'rax-app';
 
 import View from 'rax-view';
 
@@ -120,7 +121,7 @@ class Detail$$Page extends Component {
   }
 }
 
-export default Detail$$Page;
+export default __$$withRouter(Detail$$Page);
 
 function __$$eval(expr) {
   try {
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
index 0a3d6b94f..380ba614f 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
@@ -1,6 +1,7 @@
 // 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
 // 例外：rax 框架的导出名和各种组件名除外。
 import { createElement, Component } from 'rax';
+import { withRouter as __$$withRouter } from 'rax-app';
 
 import View from 'rax-view';
 
@@ -120,7 +121,7 @@ class Home$$Page extends Component {
   }
 }
 
-export default Home$$Page;
+export default __$$withRouter(Home$$Page);
 
 function __$$eval(expr) {
   try {
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
index edbb4c07d..bb654b05b 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
@@ -1,6 +1,7 @@
 // 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
 // 例外：rax 框架的导出名和各种组件名除外。
 import { createElement, Component } from 'rax';
+import { withRouter as __$$withRouter } from 'rax-app';
 
 import View from 'rax-view';
 
@@ -123,7 +124,7 @@ class List$$Page extends Component {
   }
 }
 
-export default List$$Page;
+export default __$$withRouter(List$$Page);
 
 function __$$eval(expr) {
   try {

From 35fcdd955bbbe82d3bb087041d1f23ff71c65ce9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Tue, 18 Aug 2020 17:05:15 +0800
Subject: [PATCH 49/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E9=80=9A=E8=BF=87?=
 =?UTF-8?q?=20config.miniAppBuildType=20=E6=9D=A5=E6=94=AF=E6=8C=81=20Rax?=
 =?UTF-8?q?=20=E7=9A=84=20runtime=20=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/generator/ProjectBuilder.ts           |  12 ++
 .../plugins/project/framework/rax/index.ts    |   2 +
 .../framework/rax/plugins/buildConfig.ts      |  52 +++++++
 .../project/framework/rax/template/index.ts   |   6 +-
 .../code-generator/src/solutions/rax-app.ts   |   1 +
 packages/code-generator/src/types/schema.ts   |   1 +
 .../test-cases/rax-app/demo4/README.md        |   1 +
 .../demo4/expected/demo-project/.editorconfig |  12 ++
 .../demo4/expected/demo-project/.eslintignore |  11 ++
 .../demo4/expected/demo-project/.eslintrc.js  |   3 +
 .../demo4/expected/demo-project/.gitignore    |  17 +++
 .../demo4/expected/demo-project/README.md     |  15 ++
 .../demo4/expected/demo-project/abc.json      |   7 +
 .../demo4/expected/demo-project/build.json    |  15 ++
 .../demo4/expected/demo-project/package.json  |  34 +++++
 .../demo4/expected/demo-project/src/app.js    |   6 +
 .../demo4/expected/demo-project/src/app.json  |  11 ++
 .../demo-project/src/document/index.jsx       |  25 ++++
 .../expected/demo-project/src/global.scss     |   9 ++
 .../demo-project/src/pages/Home/index.css     |   0
 .../demo-project/src/pages/Home/index.jsx     | 134 ++++++++++++++++++
 .../demo4/expected/demo-project/src/utils.js  |   1 +
 .../test-cases/rax-app/demo4/schema.json5     |  84 +++++++++++
 23 files changed, 457 insertions(+), 2 deletions(-)
 create mode 100644 packages/code-generator/src/plugins/project/framework/rax/plugins/buildConfig.ts
 create mode 100644 packages/code-generator/test-cases/rax-app/demo4/README.md
 create mode 100644 packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/.editorconfig
 create mode 100644 packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/.eslintignore
 create mode 100644 packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/.eslintrc.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/.gitignore
 create mode 100644 packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/README.md
 create mode 100644 packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/abc.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/build.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/app.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/app.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/document/index.jsx
 create mode 100644 packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/global.scss
 create mode 100644 packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.css
 create mode 100644 packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
 create mode 100644 packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/utils.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo4/schema.json5

diff --git a/packages/code-generator/src/generator/ProjectBuilder.ts b/packages/code-generator/src/generator/ProjectBuilder.ts
index 26ed4f4d8..f0a13e962 100644
--- a/packages/code-generator/src/generator/ProjectBuilder.ts
+++ b/packages/code-generator/src/generator/ProjectBuilder.ts
@@ -128,6 +128,16 @@ export class ProjectBuilder implements IProjectBuilder {
       });
     }
 
+    // buildConfig
+    if (builders.buildConfig) {
+      const { files } = await builders.buildConfig.generateModule(parseResult);
+
+      buildResult.push({
+        path: this.template.slots.buildConfig.path,
+        files,
+      });
+    }
+
     // constants?
     if (parseResult.project && builders.constants && this.template.slots.constants) {
       const { files } = await builders.constants.generateModule(parseResult.project);
@@ -188,6 +198,8 @@ export class ProjectBuilder implements IProjectBuilder {
       });
     }
 
+    // TODO: 更多 slots 的处理？？是不是可以考虑把 template 中所有的 slots 都处理下？
+
     // Post Process
 
     // Combine Modules
diff --git a/packages/code-generator/src/plugins/project/framework/rax/index.ts b/packages/code-generator/src/plugins/project/framework/rax/index.ts
index 3f9080565..a17e82132 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/index.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/index.ts
@@ -1,6 +1,7 @@
 import template from './template';
 import entry from './plugins/entry';
 import appConfig from './plugins/appConfig';
+import buildConfig from './plugins/buildConfig';
 import entryDocument from './plugins/entryDocument';
 import globalStyle from './plugins/globalStyle';
 import packageJSON from './plugins/packageJSON';
@@ -9,6 +10,7 @@ export default {
   template,
   plugins: {
     appConfig,
+    buildConfig,
     entry,
     entryDocument,
     globalStyle,
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/buildConfig.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/buildConfig.ts
new file mode 100644
index 000000000..d29f2b8cc
--- /dev/null
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/buildConfig.ts
@@ -0,0 +1,52 @@
+import { COMMON_CHUNK_NAME } from '../../../../../const/generator';
+
+import {
+  BuilderComponentPlugin,
+  BuilderComponentPluginFactory,
+  ChunkType,
+  FileType,
+  ICodeStruct,
+  IParseResult,
+} from '../../../../../types';
+
+const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
+  const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+    const next: ICodeStruct = {
+      ...pre,
+    };
+
+    const ir = next.ir as IParseResult;
+    const miniAppBuildType = ir.project?.config.miniAppBuildType;
+
+    const buildCfg = {
+      inlineStyle: false,
+      plugins: [
+        [
+          'build-plugin-rax-app',
+          {
+            targets: ['web', 'miniapp'],
+            miniapp: miniAppBuildType
+              ? {
+                  buildType: miniAppBuildType,
+                }
+              : undefined,
+          },
+        ],
+        '@ali/build-plugin-rax-app-def',
+      ],
+    };
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JSON,
+      name: COMMON_CHUNK_NAME.CustomContent,
+      content: JSON.stringify(buildCfg, null, 2) + '\n',
+      linkAfter: [],
+    });
+
+    return next;
+  };
+  return plugin;
+};
+
+export default pluginFactory;
diff --git a/packages/code-generator/src/plugins/project/framework/rax/template/index.ts b/packages/code-generator/src/plugins/project/framework/rax/template/index.ts
index 6859817ba..924a599cb 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/template/index.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/template/index.ts
@@ -9,7 +9,6 @@ import file2 from './files/eslintrc.js';
 import file3 from './files/gitignore';
 import file4 from './files/README.md';
 import file5 from './files/abc.json';
-import file6 from './files/build.json';
 
 const raxAppTemplate: IProjectTemplate = {
   slots: {
@@ -31,6 +30,10 @@ const raxAppTemplate: IProjectTemplate = {
       path: ['src'],
       fileName: 'app',
     },
+    buildConfig: {
+      path: [],
+      fileName: 'build',
+    },
     constants: {
       path: ['src'],
       fileName: 'constants',
@@ -66,7 +69,6 @@ const raxAppTemplate: IProjectTemplate = {
     runFileGenerator(root, file3);
     runFileGenerator(root, file4);
     runFileGenerator(root, file5);
-    runFileGenerator(root, file6);
 
     return root;
   },
diff --git a/packages/code-generator/src/solutions/rax-app.ts b/packages/code-generator/src/solutions/rax-app.ts
index 85a0367f6..319cd53f2 100644
--- a/packages/code-generator/src/solutions/rax-app.ts
+++ b/packages/code-generator/src/solutions/rax-app.ts
@@ -52,6 +52,7 @@ export default function createIceJsProjectBuilder(): IProjectBuilder {
         css(),
       ],
       appConfig: [raxApp.plugins.appConfig()],
+      buildConfig: [raxApp.plugins.buildConfig()],
       entry: [raxApp.plugins.entry()],
       constants: [constants()],
       utils: [esModule(), utils()],
diff --git a/packages/code-generator/src/types/schema.ts b/packages/code-generator/src/types/schema.ts
index cb8ac1f23..8f7500a5e 100644
--- a/packages/code-generator/src/types/schema.ts
+++ b/packages/code-generator/src/types/schema.ts
@@ -56,6 +56,7 @@ export interface IAppConfig {
   targetRootID?: string; // 渲染根节点 ID
   layout?: NodeSchema;
   theme?: object; // 主题配置，根据接入的主题模块不同
+  miniAppBuildType?: 'runtime' | 'compile'; // 小程序的构建类型
 }
 
 export interface IAppMeta {
diff --git a/packages/code-generator/test-cases/rax-app/demo4/README.md b/packages/code-generator/test-cases/rax-app/demo4/README.md
new file mode 100644
index 000000000..b6613c4d3
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo4/README.md
@@ -0,0 +1 @@
+# 这个 demo 是用来演示运行时的方案的。
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/.editorconfig b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/.editorconfig
new file mode 100644
index 000000000..5760be583
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/.editorconfig
@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/.eslintignore b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/.eslintignore
new file mode 100644
index 000000000..3b437e614
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/.eslintignore
@@ -0,0 +1,11 @@
+# 忽略目录
+build/
+tests/
+demo/
+
+# node 覆盖率文件
+coverage/
+
+# 忽略文件
+**/*-min.js
+**/*.min.js
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/.eslintrc.js b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/.eslintrc.js
new file mode 100644
index 000000000..e2a7c5b54
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['rax'],
+};
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/.gitignore b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/.gitignore
new file mode 100644
index 000000000..50a53dace
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/.gitignore
@@ -0,0 +1,17 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+*~
+*.swp
+*.log
+
+.DS_Store
+.idea/
+.temp/
+
+build/
+dist/
+lib/
+coverage/
+node_modules/
+
+template.yml
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/README.md b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/README.md
new file mode 100644
index 000000000..6eff85d41
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/README.md
@@ -0,0 +1,15 @@
+# @ali/rax-component-demo
+
+## Getting Started
+
+### `npm run start`
+
+Runs the app in development mode.
+
+Open [http://localhost:9999](http://localhost:9999) to view it in the browser.
+
+The page will reload if you make edits.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/abc.json b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/abc.json
new file mode 100644
index 000000000..f9ee40f71
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/abc.json
@@ -0,0 +1,7 @@
+{
+  "type": "rax",
+  "builder": "@ali/builder-rax-v1",
+  "info": {
+    "raxVersion": "1.x"
+  }
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/build.json b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/build.json
new file mode 100644
index 000000000..69a413ad0
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/build.json
@@ -0,0 +1,15 @@
+{
+  "inlineStyle": false,
+  "plugins": [
+    [
+      "build-plugin-rax-app",
+      {
+        "targets": ["web", "miniapp"],
+        "miniapp": {
+          "buildType": "runtime"
+        }
+      }
+    ],
+    "@ali/build-plugin-rax-app-def"
+  ]
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json
new file mode 100644
index 000000000..c8b7cf47b
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@ali/rax-app-demo",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "build": "build-scripts build",
+    "start": "build-scripts start",
+    "lint": "eslint --ext .js --ext .jsx ./"
+  },
+  "dependencies": {
+    "@ali/lowcode-datasource-engine": "^0.1.0",
+    "universal-env": "^3.2.0",
+    "rax": "^1.1.0",
+    "rax-app": "^2.0.0",
+    "rax-document": "^0.1.0",
+    "@alife/right-design-card": "*",
+    "rax-view": "^1.0.0",
+    "rax-text": "^1.0.0",
+    "rax-image": "^1.0.0"
+  },
+  "devDependencies": {
+    "build-plugin-rax-app": "^5.0.0",
+    "@alib/build-scripts": "^0.1.0",
+    "@typescript-eslint/eslint-plugin": "^2.11.0",
+    "@typescript-eslint/parser": "^2.11.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.8.0",
+    "eslint-config-rax": "^0.1.0",
+    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-module": "^0.1.0",
+    "eslint-plugin-react": "^7.18.0",
+    "@ali/build-plugin-rax-app-def": "^1.0.0"
+  }
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/app.js b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/app.js
new file mode 100644
index 000000000..bc474c6e3
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/app.js
@@ -0,0 +1,6 @@
+import { runApp } from 'rax-app';
+import appConfig from './app.json';
+
+import './global.scss';
+
+runApp(appConfig);
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/app.json b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/app.json
new file mode 100644
index 000000000..63dec4d7d
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/app.json
@@ -0,0 +1,11 @@
+{
+  "routes": [
+    {
+      "path": "/",
+      "source": "pages/Home/index"
+    }
+  ],
+  "window": {
+    "title": "Rax App Demo"
+  }
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/document/index.jsx b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/document/index.jsx
new file mode 100644
index 000000000..50569a9b6
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/document/index.jsx
@@ -0,0 +1,25 @@
+import { createElement } from 'rax';
+import { Root, Style, Script } from 'rax-document';
+
+function Document() {
+  return (
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"
+        />
+        <title>Rax App Demo</title>
+        <Style />
+      </head>
+      <body>
+        {/* root container */}
+        <Root />
+        <Script />
+      </body>
+    </html>
+  );
+}
+
+export default Document;
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/global.scss b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/global.scss
new file mode 100644
index 000000000..2b98f3726
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/global.scss
@@ -0,0 +1,9 @@
+body {
+  -webkit-font-smoothing: antialiased;
+}
+
+page,
+body {
+  width: 750rpx;
+  overflow-x: hidden;
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.css b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
new file mode 100644
index 000000000..873a01400
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
@@ -0,0 +1,134 @@
+// 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
+// 例外：rax 框架的导出名和各种组件名除外。
+import { createElement, Component } from 'rax';
+import { withRouter as __$$withRouter } from 'rax-app';
+
+import Card from '@alife/right-design-card';
+
+import View from 'rax-view';
+
+import Text from 'rax-text';
+
+import Image from 'rax-image';
+
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+
+import { isMiniApp as __$$isMiniApp } from 'universal-env';
+
+import __$$projectUtils from '../../utils';
+
+import './index.css';
+
+class Home$$Page extends Component {
+  state = {};
+
+  _methods = this._defineMethods();
+
+  _context = this._createContext();
+
+  _dataSourceConfig = this._defineDataSourceConfig();
+  _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
+
+  _utils = this._defineUtils();
+
+  componentDidMount() {
+    this._dataSourceEngine.reloadDataSource();
+  }
+
+  componentWillUnmount() {}
+
+  render() {
+    const __$$context = this._context;
+
+    return (
+      <View>
+        <Card>
+          <Text>This is a demo card.</Text>
+        </Card>
+      </View>
+    );
+  }
+
+  _createContext() {
+    const self = this;
+
+    const context = {
+      get state() {
+        return self.state;
+      },
+      setState(newState) {
+        self.setState(newState);
+      },
+      get dataSourceMap() {
+        return self._dataSourceEngine.dataSourceMap || {};
+      },
+      async reloadDataSource() {
+        await self._dataSourceEngine.reloadDataSource();
+      },
+      get utils() {
+        return self._utils;
+      },
+      get page() {
+        return context;
+      },
+      get component() {
+        return context;
+      },
+      get props() {
+        return self.props;
+      },
+      ...this._methods,
+    };
+
+    return context;
+  }
+
+  _defineDataSourceConfig() {
+    const __$$context = this._context;
+    return { list: [] };
+  }
+
+  _defineUtils() {
+    const utils = {
+      ...__$$projectUtils,
+    };
+
+    Object.entries(utils).forEach(([name, util]) => {
+      if (typeof util === 'function') {
+        utils[name] = util.bind(this._context);
+      }
+    });
+
+    return utils;
+  }
+
+  _defineMethods() {
+    const __$$methods = {};
+
+    // 为所有的方法绑定上下文
+    Object.entries(__$$methods).forEach(([methodName, method]) => {
+      if (typeof method === 'function') {
+        __$$methods[methodName] = (...args) => {
+          return method.apply(this._context, args);
+        };
+      }
+    });
+
+    return __$$methods;
+  }
+}
+
+export default __$$withRouter(Home$$Page);
+
+function __$$eval(expr) {
+  try {
+    return expr();
+  } catch (err) {
+    console.warn('Failed to evaluate: ', expr, err);
+  }
+}
+
+function __$$evalArray(expr) {
+  const res = __$$eval(expr);
+  return Array.isArray(res) ? res : [];
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/utils.js b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/utils.js
new file mode 100644
index 000000000..ff8b4c563
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/utils.js
@@ -0,0 +1 @@
+export default {};
diff --git a/packages/code-generator/test-cases/rax-app/demo4/schema.json5 b/packages/code-generator/test-cases/rax-app/demo4/schema.json5
new file mode 100644
index 000000000..08afc1463
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo4/schema.json5
@@ -0,0 +1,84 @@
+{
+  version: '1.0.0',
+  componentsMap: [
+    {
+      componentName: 'Card',
+      package: '@alife/right-design-card',
+      version: '*',
+      destructuring: false,
+      exportName: 'Card',
+    },
+    {
+      componentName: 'View',
+      package: 'rax-view',
+      version: '^1.0.0',
+      destructuring: false,
+      exportName: 'View',
+    },
+    {
+      componentName: 'Text',
+      package: 'rax-text',
+      version: '^1.0.0',
+      destructuring: false,
+      exportName: 'Text',
+    },
+    {
+      componentName: 'Image',
+      package: 'rax-image',
+      version: '^1.0.0',
+      destructuring: false,
+      exportName: 'Image',
+    },
+    {
+      componentName: 'Page',
+      package: 'rax-view',
+      version: '^1.0.0',
+      destructuring: false,
+      exportName: 'Page',
+    },
+  ],
+  componentsTree: [
+    {
+      componentName: 'Page',
+      fileName: 'home',
+      meta: {
+        router: '/',
+      },
+      state: {},
+      props: {},
+      lifeCycles: {},
+      methods: {},
+      dataSource: {
+        list: [],
+      },
+      children: [
+        {
+          componentName: 'Card',
+          children: [
+            {
+              componentName: 'Text',
+              props: {},
+              children: 'This is a demo card.',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  utils: [],
+  css: 'page,body{\n  width: 750rpx;\n  overflow-x: hidden;\n}',
+  config: {
+    sdkVersion: '1.0.3',
+    historyMode: 'hash',
+    targetRootID: 'root',
+    miniAppBuildType: 'runtime',
+  },
+  meta: {
+    name: 'Rax App Demo',
+    git_group: 'demo-group',
+    project_name: 'demo-project',
+    description: '这是一个示例应用',
+    spma: 'spmademo',
+    creator: '张三',
+  },
+}

From fcf6c32e7646d225049898b578976ca07b4bf0b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Tue, 18 Aug 2020 17:21:17 +0800
Subject: [PATCH 50/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Rax=20=E5=87=BA?=
 =?UTF-8?q?=E7=A0=81=E6=94=AF=E6=8C=81=20constants=20=E5=B8=B8=E9=87=8F?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/rax/containerInjectContext.ts   | 13 +++-
 .../src/plugins/project/constants.ts          | 65 +++++++++----------
 .../expected/demo-project/src/constants.js    |  3 +
 .../demo-project/src/pages/Home/index.jsx     |  5 ++
 .../expected/demo-project/src/constants.js    |  3 +
 .../demo-project/src/pages/Home/index.jsx     |  5 ++
 .../expected/demo-project/src/constants.js    |  3 +
 .../demo-project/src/pages/Detail/index.jsx   |  5 ++
 .../demo-project/src/pages/Home/index.jsx     |  5 ++
 .../demo-project/src/pages/List/index.jsx     |  5 ++
 .../expected/demo-project/src/constants.js    |  3 +
 .../demo-project/src/pages/Home/index.jsx     |  5 ++
 12 files changed, 86 insertions(+), 34 deletions(-)
 create mode 100644 packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/constants.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/constants.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/constants.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/constants.js

diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
index 228d7dad5..26fc15e36 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
@@ -1,4 +1,4 @@
-import { CLASS_DEFINE_CHUNK_NAME } from '../../../const/generator';
+import { CLASS_DEFINE_CHUNK_NAME, COMMON_CHUNK_NAME } from '../../../const/generator';
 
 import {
   BuilderComponentPlugin,
@@ -24,6 +24,14 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       ...pre,
     };
 
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: cfg.fileType,
+      name: COMMON_CHUNK_NAME.InternalDepsImport,
+      content: `import __$$constants from '../../constants';`,
+      linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport],
+    });
+
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: cfg.fileType,
@@ -67,6 +75,9 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
             get props() {
               return self.props;
             },
+            get constants() {
+              return __$$constants;
+            },
             ...this._methods,
           };
 
diff --git a/packages/code-generator/src/plugins/project/constants.ts b/packages/code-generator/src/plugins/project/constants.ts
index cf798686b..4f41c9480 100644
--- a/packages/code-generator/src/plugins/project/constants.ts
+++ b/packages/code-generator/src/plugins/project/constants.ts
@@ -1,5 +1,5 @@
 import { COMMON_CHUNK_NAME } from '../../const/generator';
-import { generateCompositeType } from '../../utils/compositeType';
+import { generateUnknownType } from '../../utils/compositeType';
 import {
   BuilderComponentPlugin,
   BuilderComponentPluginFactory,
@@ -16,40 +16,39 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
     };
 
     const ir = next.ir as IProjectInfo;
-    if (ir.constants) {
-      const [, constantStr] = generateCompositeType(ir.constants);
 
-      next.chunks.push({
-        type: ChunkType.STRING,
-        fileType: FileType.JS,
-        name: COMMON_CHUNK_NAME.FileVarDefine,
-        content: `
-          const constantConfig = ${constantStr};
-        `,
-        linkAfter: [
-          COMMON_CHUNK_NAME.ExternalDepsImport,
-          COMMON_CHUNK_NAME.InternalDepsImport,
-          COMMON_CHUNK_NAME.ImportAliasDefine,
-        ],
-      });
+    const constantStr = generateUnknownType(ir.constants || {});
 
-      next.chunks.push({
-        type: ChunkType.STRING,
-        fileType: FileType.JS,
-        name: COMMON_CHUNK_NAME.FileExport,
-        content: `
-          export default constantConfig;
-        `,
-        linkAfter: [
-          COMMON_CHUNK_NAME.ExternalDepsImport,
-          COMMON_CHUNK_NAME.InternalDepsImport,
-          COMMON_CHUNK_NAME.ImportAliasDefine,
-          COMMON_CHUNK_NAME.FileVarDefine,
-          COMMON_CHUNK_NAME.FileUtilDefine,
-          COMMON_CHUNK_NAME.FileMainContent,
-        ],
-      });
-    }
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JS,
+      name: COMMON_CHUNK_NAME.FileVarDefine,
+      content: `
+        const __$$constants = (${constantStr});
+      `,
+      linkAfter: [
+        COMMON_CHUNK_NAME.ExternalDepsImport,
+        COMMON_CHUNK_NAME.InternalDepsImport,
+        COMMON_CHUNK_NAME.ImportAliasDefine,
+      ],
+    });
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JS,
+      name: COMMON_CHUNK_NAME.FileExport,
+      content: `
+        export default __$$constants;
+      `,
+      linkAfter: [
+        COMMON_CHUNK_NAME.ExternalDepsImport,
+        COMMON_CHUNK_NAME.InternalDepsImport,
+        COMMON_CHUNK_NAME.ImportAliasDefine,
+        COMMON_CHUNK_NAME.FileVarDefine,
+        COMMON_CHUNK_NAME.FileUtilDefine,
+        COMMON_CHUNK_NAME.FileMainContent,
+      ],
+    });
 
     return next;
   };
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/constants.js b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/constants.js
new file mode 100644
index 000000000..ea766c9da
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/constants.js
@@ -0,0 +1,3 @@
+const __$$constants = {};
+
+export default __$$constants;
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
index 10070aa94..fce1c34a9 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
@@ -11,6 +11,8 @@ import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-en
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
+import __$$constants from '../../constants';
+
 import __$$projectUtils from '../../utils';
 
 import './index.css';
@@ -69,6 +71,9 @@ class Home$$Page extends Component {
       get props() {
         return self.props;
       },
+      get constants() {
+        return __$$constants;
+      },
       ...this._methods,
     };
 
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/constants.js b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/constants.js
new file mode 100644
index 000000000..ea766c9da
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/constants.js
@@ -0,0 +1,3 @@
+const __$$constants = {};
+
+export default __$$constants;
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index bfe1af5e2..8b5352869 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -13,6 +13,8 @@ import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-en
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
+import __$$constants from '../../constants';
+
 import __$$projectUtils from '../../utils';
 
 import './index.css';
@@ -162,6 +164,9 @@ class Home$$Page extends Component {
       get props() {
         return self.props;
       },
+      get constants() {
+        return __$$constants;
+      },
       ...this._methods,
     };
 
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/constants.js b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/constants.js
new file mode 100644
index 000000000..ea766c9da
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/constants.js
@@ -0,0 +1,3 @@
+const __$$constants = {};
+
+export default __$$constants;
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
index 9fcf44663..1e104c597 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
@@ -15,6 +15,8 @@ import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-en
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
+import __$$constants from '../../constants';
+
 import __$$projectUtils from '../../utils';
 
 import './index.css';
@@ -80,6 +82,9 @@ class Detail$$Page extends Component {
       get props() {
         return self.props;
       },
+      get constants() {
+        return __$$constants;
+      },
       ...this._methods,
     };
 
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
index 380ba614f..cb2bd3bab 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
@@ -15,6 +15,8 @@ import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-en
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
+import __$$constants from '../../constants';
+
 import __$$projectUtils from '../../utils';
 
 import './index.css';
@@ -80,6 +82,9 @@ class Home$$Page extends Component {
       get props() {
         return self.props;
       },
+      get constants() {
+        return __$$constants;
+      },
       ...this._methods,
     };
 
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
index bb654b05b..bd95523fb 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
@@ -15,6 +15,8 @@ import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-en
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
+import __$$constants from '../../constants';
+
 import __$$projectUtils from '../../utils';
 
 import './index.css';
@@ -83,6 +85,9 @@ class List$$Page extends Component {
       get props() {
         return self.props;
       },
+      get constants() {
+        return __$$constants;
+      },
       ...this._methods,
     };
 
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/constants.js b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/constants.js
new file mode 100644
index 000000000..ea766c9da
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/constants.js
@@ -0,0 +1,3 @@
+const __$$constants = {};
+
+export default __$$constants;
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
index 873a01400..287c12ad2 100644
--- a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
@@ -15,6 +15,8 @@ import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-en
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
+import __$$constants from '../../constants';
+
 import __$$projectUtils from '../../utils';
 
 import './index.css';
@@ -77,6 +79,9 @@ class Home$$Page extends Component {
       get props() {
         return self.props;
       },
+      get constants() {
+        return __$$constants;
+      },
       ...this._methods,
     };
 

From fa939c4ab2546fd02724326a735927f1cd5217cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Tue, 18 Aug 2020 20:50:53 +0800
Subject: [PATCH 51/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20custom=20=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E7=9A=84=E6=95=B0=E6=8D=AE=E6=BA=90=E8=AF=B7=E6=B1=82?=
 =?UTF-8?q?=E4=B8=8D=E9=9C=80=E8=A6=81=20handler?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plugins/component/rax/containerInjectDataSourceEngine.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
index b953b3b2b..0b81ebe41 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -40,7 +40,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       Object.assign(dataSourceEngineOptions, {
         requestHandlers: dataSourceItems.reduce(
           (handlers, ds) =>
-            ds.type in handlers
+            ds.type in handlers && ds.type !== 'custom'
               ? handlers
               : {
                   ...handlers,

From 42e41bbd124a963490c9716ce3d9068f8319a029 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Tue, 18 Aug 2020 21:13:30 +0800
Subject: [PATCH 52/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=BA=90=E7=9A=84requestHandlers=E9=80=89=E9=A1=B9=E6=94=B9?=
 =?UTF-8?q?=E6=88=90requestHandlersMap,=20=E5=91=BD=E5=90=8D=E6=9B=B4?=
 =?UTF-8?q?=E6=B8=85=E6=99=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plugins/component/rax/containerInjectDataSourceEngine.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
index 0b81ebe41..5c4c6bd9a 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -38,7 +38,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
     const dataSourceEngineOptions = { runtimeConfig: true };
     if (dataSourceItems.length > 0) {
       Object.assign(dataSourceEngineOptions, {
-        requestHandlers: dataSourceItems.reduce(
+        requestHandlersMap: dataSourceItems.reduce(
           (handlers, ds) =>
             ds.type in handlers && ds.type !== 'custom'
               ? handlers

From 332a473cd24b31544f9d27c35790b1ef2089bfe1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Tue, 18 Aug 2020 23:03:43 +0800
Subject: [PATCH 53/80] =?UTF-8?q?fix:=20=F0=9F=90=9B=20=E8=A7=A3=E5=86=B3?=
 =?UTF-8?q?=20Rax=20=E5=87=BA=E7=A0=81=E5=88=B0=E5=B0=8F=E7=A8=8B=E5=BA=8F?=
 =?UTF-8?q?=E7=9A=84=E6=97=B6=E5=80=99=20require(xxx)=20=E8=AF=AD=E5=8F=A5?=
 =?UTF-8?q?=E4=B8=8D=E8=83=BD=E8=A2=AB=E7=BC=96=E8=AF=91=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rax/containerInjectDataSourceEngine.ts    | 40 +++++++++++--------
 .../demo-project/src/pages/Home/index.jsx     | 10 +++--
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
index 5c4c6bd9a..f6cca564d 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -11,6 +11,7 @@ import {
   DataSourceConfig,
   isJSExpression,
   isJSFunction,
+  JSExpression,
 } from '../../../types';
 
 import { generateUnknownType } from '../../../utils/compositeType';
@@ -37,23 +38,30 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
     const dataSourceItems: DataSourceConfig[] = (dataSourceConfig && dataSourceConfig.list) || [];
     const dataSourceEngineOptions = { runtimeConfig: true };
     if (dataSourceItems.length > 0) {
-      Object.assign(dataSourceEngineOptions, {
-        requestHandlersMap: dataSourceItems.reduce(
-          (handlers, ds) =>
-            ds.type in handlers && ds.type !== 'custom'
-              ? handlers
-              : {
-                  ...handlers,
-                  [ds.type]: {
-                    type: 'JSExpression',
-                    value:
-                      `require('@ali/lowcode-datasource-engine/handlers/${changeCase.kebabCase(ds.type)}')` +
-                      (ds.type === 'urlParams' ? '({ search: this.props.location.search })' : ''),
-                  },
-                },
-          {} as Record<string, CompositeValue>,
-        ),
+      const requestHandlersMap = {} as Record<string, JSExpression>;
+
+      dataSourceItems.forEach((ds) => {
+        if (!(ds.type in requestHandlersMap) && ds.type !== 'custom') {
+          const handlerName = '__$$' + changeCase.camelCase(ds.type) + 'RequestHandler';
+
+          requestHandlersMap[ds.type] = {
+            type: 'JSExpression',
+            value: handlerName + (ds.type === 'urlParams' ? '({ search: this.props.location.search })' : ''),
+          };
+
+          next.chunks.push({
+            type: ChunkType.STRING,
+            fileType: FileType.JSX,
+            name: COMMON_CHUNK_NAME.ExternalDepsImport,
+            content: `
+              import ${handlerName} from '@ali/lowcode-datasource-engine/handlers/${changeCase.kebabCase(ds.type)}';
+            `,
+            linkAfter: [],
+          });
+        }
       });
+
+      Object.assign(dataSourceEngineOptions, { requestHandlersMap });
     }
 
     next.chunks.push({
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index 8b5352869..05bdc9ac0 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -9,6 +9,10 @@ import Text from 'rax-text';
 
 import Image from 'rax-image';
 
+import __$$urlParamsRequestHandler from '@ali/lowcode-datasource-engine/handlers/url-params';
+
+import __$$fetchRequestHandler from '@ali/lowcode-datasource-engine/handlers/fetch';
+
 import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
@@ -44,9 +48,9 @@ class Home$$Page extends Component {
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, {
     runtimeConfig: true,
-    requestHandlers: {
-      urlParams: require('@ali/lowcode-datasource-engine/handlers/url-params')({ search: this.props.location.search }),
-      fetch: require('@ali/lowcode-datasource-engine/handlers/fetch'),
+    requestHandlersMap: {
+      urlParams: __$$urlParamsRequestHandler({ search: this.props.location.search }),
+      fetch: __$$fetchRequestHandler,
     },
   });
 

From bd8714810ae7e1b9e0062e50467b482dfb3e28e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Tue, 18 Aug 2020 23:32:13 +0800
Subject: [PATCH 54/80] =?UTF-8?q?test:=20=F0=9F=92=8D=20Rax=20=E5=87=BA?=
 =?UTF-8?q?=E7=A0=81=E7=9A=84=20demo2=20=E7=9A=84=E4=B8=A4=E4=B8=AA?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=BA=90=E4=B9=8B=E9=97=B4=E6=9C=89=E4=BE=9D?=
 =?UTF-8?q?=E8=B5=96=E5=85=B3=E7=B3=BB,=20=E6=95=85=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E4=B8=BA=20isSync=3Dtrue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo2/expected/demo-project/src/pages/Home/index.jsx        | 2 ++
 packages/code-generator/test-cases/rax-app/demo2/schema.json5   | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index 05bdc9ac0..b1b50c437 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -198,6 +198,7 @@ class Home$$Page extends Component {
             return {
               method: 'GET',
               uri: 'https://shs.alibaba-inc.com/mock/1458/demo/user',
+              isSync: true,
             };
           },
           dataHandler: function (response) {
@@ -218,6 +219,7 @@ class Home$$Page extends Component {
             return {
               method: 'GET',
               uri: __$$context.state.user.ordersApiUri,
+              isSync: true,
             };
           },
           dataHandler: function (response) {
diff --git a/packages/code-generator/test-cases/rax-app/demo2/schema.json5 b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
index 5154efdea..96818e695 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
@@ -84,6 +84,7 @@
             options: {
               method: 'GET',
               uri: 'https://shs.alibaba-inc.com/mock/1458/demo/user',
+              isSync: true,
             },
             dataHandler: {
               type: 'JSFunction',
@@ -100,6 +101,7 @@
                 type: 'JSExpression',
                 value: 'this.state.user.ordersApiUri',
               },
+              isSync: true,
             },
             dataHandler: {
               type: 'JSFunction',

From 624e2f8d1e276f10867541edf7cf573bd535e9c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 19 Aug 2020 09:50:16 +0800
Subject: [PATCH 55/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=BA=90=E5=BC=95=E6=93=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/datasource-engine/.gitignore         |   5 +
 .../handlers/fetch/index.d.ts                 |   1 +
 .../datasource-engine/handlers/fetch/index.js |   1 +
 .../handlers/mtop/index.d.ts                  |   1 +
 .../datasource-engine/handlers/mtop/index.js  |   1 +
 .../handlers/url-params/index.d.ts            |   1 +
 .../handlers/url-params/index.js              |   1 +
 packages/datasource-engine/package.json       |  34 +++++
 .../src/core/DataSourceEngine.ts              | 134 ++++++++++++++++++
 .../src/core/RuntimeDataSource.ts             |  98 +++++++++++++
 packages/datasource-engine/src/core/index.ts  |   1 +
 .../datasource-engine/src/handlers/fetch.ts   |  24 ++++
 .../datasource-engine/src/handlers/mtop.ts    |  15 ++
 .../src/handlers/url-params.ts                |  14 ++
 packages/datasource-engine/src/index.ts       |   2 +
 .../src/types/DataSourceConfig.ts             |   6 +
 .../src/types/DataSourceConfigItem.ts         |  17 +++
 .../src/types/DataSourceEngineOptions.ts      |   7 +
 .../src/types/DataSourceOptions.ts            |  10 ++
 .../src/types/IDataSourceEngine.ts            |   9 ++
 .../src/types/IDataSourceEngineFactory.ts     |  12 ++
 .../src/types/IRuntimeContext.ts              |  24 ++++
 .../src/types/IRuntimeDataSource.ts           |  22 +++
 .../src/types/RequestHandler.ts               |   6 +
 .../src/types/RuntimeDataSourceStatus.ts      |  14 ++
 packages/datasource-engine/src/types/index.ts |   1 +
 packages/datasource-engine/src/typing.d.ts    |   1 +
 packages/datasource-engine/tsconfig.json      |  80 +++++++++++
 28 files changed, 542 insertions(+)
 create mode 100644 packages/datasource-engine/.gitignore
 create mode 100644 packages/datasource-engine/handlers/fetch/index.d.ts
 create mode 100644 packages/datasource-engine/handlers/fetch/index.js
 create mode 100644 packages/datasource-engine/handlers/mtop/index.d.ts
 create mode 100644 packages/datasource-engine/handlers/mtop/index.js
 create mode 100644 packages/datasource-engine/handlers/url-params/index.d.ts
 create mode 100644 packages/datasource-engine/handlers/url-params/index.js
 create mode 100644 packages/datasource-engine/package.json
 create mode 100644 packages/datasource-engine/src/core/DataSourceEngine.ts
 create mode 100644 packages/datasource-engine/src/core/RuntimeDataSource.ts
 create mode 100644 packages/datasource-engine/src/core/index.ts
 create mode 100644 packages/datasource-engine/src/handlers/fetch.ts
 create mode 100644 packages/datasource-engine/src/handlers/mtop.ts
 create mode 100644 packages/datasource-engine/src/handlers/url-params.ts
 create mode 100644 packages/datasource-engine/src/index.ts
 create mode 100644 packages/datasource-engine/src/types/DataSourceConfig.ts
 create mode 100644 packages/datasource-engine/src/types/DataSourceConfigItem.ts
 create mode 100644 packages/datasource-engine/src/types/DataSourceEngineOptions.ts
 create mode 100644 packages/datasource-engine/src/types/DataSourceOptions.ts
 create mode 100644 packages/datasource-engine/src/types/IDataSourceEngine.ts
 create mode 100644 packages/datasource-engine/src/types/IDataSourceEngineFactory.ts
 create mode 100644 packages/datasource-engine/src/types/IRuntimeContext.ts
 create mode 100644 packages/datasource-engine/src/types/IRuntimeDataSource.ts
 create mode 100644 packages/datasource-engine/src/types/RequestHandler.ts
 create mode 100644 packages/datasource-engine/src/types/RuntimeDataSourceStatus.ts
 create mode 100644 packages/datasource-engine/src/types/index.ts
 create mode 100644 packages/datasource-engine/src/typing.d.ts
 create mode 100644 packages/datasource-engine/tsconfig.json

diff --git a/packages/datasource-engine/.gitignore b/packages/datasource-engine/.gitignore
new file mode 100644
index 000000000..28b6557db
--- /dev/null
+++ b/packages/datasource-engine/.gitignore
@@ -0,0 +1,5 @@
+/node_modules/
+*.log
+.DS_Store
+/es/
+/lib/
diff --git a/packages/datasource-engine/handlers/fetch/index.d.ts b/packages/datasource-engine/handlers/fetch/index.d.ts
new file mode 100644
index 000000000..86829236a
--- /dev/null
+++ b/packages/datasource-engine/handlers/fetch/index.d.ts
@@ -0,0 +1 @@
+export type * from '../../es/handlers/fetch';
diff --git a/packages/datasource-engine/handlers/fetch/index.js b/packages/datasource-engine/handlers/fetch/index.js
new file mode 100644
index 000000000..5abed6279
--- /dev/null
+++ b/packages/datasource-engine/handlers/fetch/index.js
@@ -0,0 +1 @@
+module.exports = require('../../lib/handlers/fetch').default;
diff --git a/packages/datasource-engine/handlers/mtop/index.d.ts b/packages/datasource-engine/handlers/mtop/index.d.ts
new file mode 100644
index 000000000..1d11c303b
--- /dev/null
+++ b/packages/datasource-engine/handlers/mtop/index.d.ts
@@ -0,0 +1 @@
+export type * from '../../es/handlers/mtop';
diff --git a/packages/datasource-engine/handlers/mtop/index.js b/packages/datasource-engine/handlers/mtop/index.js
new file mode 100644
index 000000000..89f131c78
--- /dev/null
+++ b/packages/datasource-engine/handlers/mtop/index.js
@@ -0,0 +1 @@
+module.exports = require('../../lib/handlers/mtop').default;
diff --git a/packages/datasource-engine/handlers/url-params/index.d.ts b/packages/datasource-engine/handlers/url-params/index.d.ts
new file mode 100644
index 000000000..58e059ec8
--- /dev/null
+++ b/packages/datasource-engine/handlers/url-params/index.d.ts
@@ -0,0 +1 @@
+export type * from '../../es/handlers/url-params';
diff --git a/packages/datasource-engine/handlers/url-params/index.js b/packages/datasource-engine/handlers/url-params/index.js
new file mode 100644
index 000000000..f9b01c61e
--- /dev/null
+++ b/packages/datasource-engine/handlers/url-params/index.js
@@ -0,0 +1 @@
+module.exports = require('../../lib/handlers/url-params').default;
diff --git a/packages/datasource-engine/package.json b/packages/datasource-engine/package.json
new file mode 100644
index 000000000..321e39a55
--- /dev/null
+++ b/packages/datasource-engine/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@ali/lowcode-datasource-engine",
+  "version": "0.1.11",
+  "description": "DataSource Engine for lowcode",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "typings": "es/index.d.ts",
+  "files": [
+    "handlers",
+    "src",
+    "lib",
+    "es"
+  ],
+  "scripts": {
+    "start": "tsc --watch",
+    "clean": "rm -rf es lib",
+    "build": "rm -rf es lib && tsc --module esnext --target es6 && mv lib es && tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "registry": "https://registry.npm.alibaba-inc.com"
+  },
+  "devDependencies": {
+    "typescript": "^3.9.7"
+  },
+  "dependencies": {
+    "@ali/universal-mtop": "^5.1.9",
+    "query-string": "^6.13.1",
+    "tslib": "^2.0.1",
+    "universal-request": "^2.2.0"
+  }
+}
diff --git a/packages/datasource-engine/src/core/DataSourceEngine.ts b/packages/datasource-engine/src/core/DataSourceEngine.ts
new file mode 100644
index 000000000..30052ee6c
--- /dev/null
+++ b/packages/datasource-engine/src/core/DataSourceEngine.ts
@@ -0,0 +1,134 @@
+import {
+  DataSourceConfig,
+  DataSourceEngineOptions,
+  IDataSourceEngine,
+  IDataSourceEngineFactory,
+  IRuntimeContext,
+} from '../types';
+import { RuntimeDataSource } from './RuntimeDataSource';
+
+export class DataSourceEngine implements IDataSourceEngine {
+  private _dataSourceMap: Record<string, RuntimeDataSource> = {};
+
+  constructor(
+    private _dataSourceConfig: DataSourceConfig,
+    private _runtimeContext: IRuntimeContext,
+    private _options?: DataSourceEngineOptions,
+  ) {
+    _dataSourceConfig.list?.forEach((ds) => {
+      // 确保数据源都有处理器
+      const requestHandler =
+        ds.requestHandler || _options?.requestHandlersMap?.[ds.type];
+      if (!requestHandler) {
+        throw new Error(`No request handler for "${ds.type}" data source`);
+      }
+
+      this._dataSourceMap[ds.id] = new RuntimeDataSource(
+        ds.id,
+        ds.type,
+        getValue(ds.options) || {},
+        requestHandler.bind(_runtimeContext),
+        ds.dataHandler ? ds.dataHandler.bind(_runtimeContext) : undefined,
+        (data) => {
+          _runtimeContext.setState({ [ds.id]: data });
+        },
+      );
+    });
+  }
+
+  public get dataSourceMap() {
+    return this._dataSourceMap;
+  }
+
+  public async reloadDataSource() {
+    try {
+      const allDataSourceConfigList = this._dataSourceConfig.list || [];
+
+      // urlParams 类型的优先加载
+      for (const ds of allDataSourceConfigList) {
+        if (ds.type === 'urlParams' && (getValue(ds.isInit) ?? true)) {
+          await this._dataSourceMap[ds.id].load();
+        }
+      }
+
+      await sleep(0); // TODO: 如何优雅地解决 setState 的异步问题？
+
+      // 然后是所有其他的
+      const remainDataSourceConfigList = allDataSourceConfigList.filter(
+        (x) => x.type !== 'urlParams',
+      );
+
+      // 先发起异步的
+      const asyncLoadings: Array<Promise<unknown>> = [];
+      for (const ds of remainDataSourceConfigList) {
+        if (getValue(ds.isInit) ?? true) {
+          const options = getValue(ds.options);
+          if (options && !options.isSync) {
+            this._dataSourceMap[ds.id].setOptions(options);
+            asyncLoadings.push(
+              this._dataSourceMap[ds.id].load(options?.params).catch(() => {}),
+            );
+          }
+        }
+      }
+
+      try {
+        // 再按先后顺序发起同步请求
+        for (const ds of remainDataSourceConfigList) {
+          if (getValue(ds.isInit) ?? true) {
+            const options = getValue(ds.options);
+            if (options && options.isSync) {
+              this._dataSourceMap[ds.id].setOptions(options);
+              await this._dataSourceMap[ds.id].load(options?.params);
+              await sleep(0); // TODO: 如何优雅地解决 setState 的异步问题？
+            }
+          }
+        }
+      } catch (e) {}
+
+      await Promise.all(asyncLoadings);
+    } finally {
+      const allDataHandler = this._dataSourceConfig.dataHandler;
+      if (allDataHandler) {
+        await allDataHandler(this._getDataMapOfAll());
+      }
+    }
+  }
+
+  private _getDataMapOfAll(): Record<string, unknown> {
+    const dataMap: Record<string, unknown> = {};
+
+    Object.entries(this._dataSourceMap).forEach(([dsId, ds]) => {
+      dataMap[dsId] = ds.data;
+    });
+
+    return dataMap;
+  }
+}
+
+export const create: IDataSourceEngineFactory['create'] = (
+  dataSourceConfig,
+  runtimeContext,
+  options,
+) => {
+  return new DataSourceEngine(dataSourceConfig, runtimeContext, options);
+};
+
+function getValue<T>(valueOrValueGetter: T | (() => T)): T;
+function getValue<T extends boolean>(
+  valueOrValueGetter: T | (() => T),
+): T | undefined {
+  if (typeof valueOrValueGetter === 'function') {
+    try {
+      return valueOrValueGetter();
+    } catch (e) {
+      return undefined;
+    }
+  } else {
+    return valueOrValueGetter;
+  }
+}
+
+function sleep(ms: number = 0) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
diff --git a/packages/datasource-engine/src/core/RuntimeDataSource.ts b/packages/datasource-engine/src/core/RuntimeDataSource.ts
new file mode 100644
index 000000000..e9ea43e87
--- /dev/null
+++ b/packages/datasource-engine/src/core/RuntimeDataSource.ts
@@ -0,0 +1,98 @@
+import {
+  DataSourceOptions,
+  IRuntimeDataSource,
+  RequestHandler,
+  RuntimeDataSourceStatus,
+} from '../types';
+
+export class RuntimeDataSource<
+  TParams extends Record<string, unknown> = Record<string, unknown>,
+  TRequestResult = unknown,
+  TResultData = unknown
+> implements IRuntimeDataSource<TParams, TResultData> {
+  private _status: RuntimeDataSourceStatus = RuntimeDataSourceStatus.Initial;
+  private _data?: TResultData;
+  private _error?: Error;
+  private _latestOptions: DataSourceOptions<TParams>;
+
+  constructor(
+    private _id: string,
+    private _type: string,
+    private _initialOptions: DataSourceOptions<TParams>,
+    private _requestHandler: RequestHandler<
+      DataSourceOptions<TParams>,
+      TRequestResult
+    >,
+    private _dataHandler:
+      | ((
+          data: TRequestResult | undefined,
+          error: unknown | undefined,
+        ) => TResultData | Promise<TResultData>)
+      | undefined,
+    private _onLoaded: (data: TResultData) => void,
+  ) {
+    this._latestOptions = _initialOptions;
+  }
+
+  public get status() {
+    return this._status;
+  }
+
+  public get data() {
+    return this._data;
+  }
+
+  public get error() {
+    return this._error;
+  }
+
+  public async load(params?: TParams): Promise<TResultData> {
+    try {
+      this._latestOptions = {
+        ...this._latestOptions,
+        params: {
+          ...this._latestOptions.params,
+          ...params,
+        } as TParams,
+      };
+
+      this._status = RuntimeDataSourceStatus.Loading;
+
+      const data = await this._request(this._latestOptions);
+
+      this._status = RuntimeDataSourceStatus.Loaded;
+
+      this._onLoaded(data);
+
+      this._data = data;
+      return data;
+    } catch (err) {
+      this._error = err;
+      this._status = RuntimeDataSourceStatus.Error;
+      throw err;
+    }
+  }
+
+  public setOptions(options: DataSourceOptions<TParams>) {
+    this._latestOptions = options;
+  }
+
+  private async _request(options: DataSourceOptions<TParams>) {
+    try {
+      const reqResult = await this._requestHandler(options);
+
+      const data = this._dataHandler
+        ? await this._dataHandler(reqResult, undefined)
+        : ((reqResult as unknown) as TResultData);
+
+      return data;
+    } catch (err) {
+      if (this._dataHandler) {
+        const data = await this._dataHandler(undefined, err);
+        return data;
+      }
+
+      throw err;
+    }
+  }
+}
diff --git a/packages/datasource-engine/src/core/index.ts b/packages/datasource-engine/src/core/index.ts
new file mode 100644
index 000000000..fb9854290
--- /dev/null
+++ b/packages/datasource-engine/src/core/index.ts
@@ -0,0 +1 @@
+export { create } from './DataSourceEngine';
diff --git a/packages/datasource-engine/src/handlers/fetch.ts b/packages/datasource-engine/src/handlers/fetch.ts
new file mode 100644
index 000000000..3db926c9f
--- /dev/null
+++ b/packages/datasource-engine/src/handlers/fetch.ts
@@ -0,0 +1,24 @@
+import request from 'universal-request';
+import type { AsObject, RequestOptions } from 'universal-request/lib/types';
+
+import { DataSourceOptions, RequestHandler } from '../types';
+
+const fetchHandler: RequestHandler = async ({
+  url,
+  uri,
+  data,
+  params,
+  ...otherOptions
+}: DataSourceOptions) => {
+  const reqOptions = {
+    url: ((url || uri) as unknown) as string,
+    data: ((data || params) as unknown) as AsObject,
+    ...otherOptions,
+  };
+
+  const res = await request(reqOptions as RequestOptions);
+
+  return res.data;
+};
+
+export default fetchHandler;
diff --git a/packages/datasource-engine/src/handlers/mtop.ts b/packages/datasource-engine/src/handlers/mtop.ts
new file mode 100644
index 000000000..88ab8e01b
--- /dev/null
+++ b/packages/datasource-engine/src/handlers/mtop.ts
@@ -0,0 +1,15 @@
+import mtop from '@ali/universal-mtop';
+import { RequestHandler } from '../types';
+
+const mtopHandler: RequestHandler = async ({ data, params, ...options }) => {
+  const reqOptions = {
+    ...options,
+    data: data || params,
+  };
+
+  const res = await mtop(reqOptions);
+
+  return res.data;
+};
+
+export default mtopHandler;
diff --git a/packages/datasource-engine/src/handlers/url-params.ts b/packages/datasource-engine/src/handlers/url-params.ts
new file mode 100644
index 000000000..d7fbfba3d
--- /dev/null
+++ b/packages/datasource-engine/src/handlers/url-params.ts
@@ -0,0 +1,14 @@
+import qs from 'query-string';
+import { RequestHandler } from '../types';
+
+export default function urlParamsHandler({
+  search,
+}: {
+  search: string | Record<string, unknown>;
+}): RequestHandler {
+  const urlParams = typeof search === 'string' ? qs.parse(search) : search;
+
+  return async () => {
+    return urlParams;
+  };
+}
diff --git a/packages/datasource-engine/src/index.ts b/packages/datasource-engine/src/index.ts
new file mode 100644
index 000000000..a5a9e0535
--- /dev/null
+++ b/packages/datasource-engine/src/index.ts
@@ -0,0 +1,2 @@
+export * from './core';
+export * from './types';
diff --git a/packages/datasource-engine/src/types/DataSourceConfig.ts b/packages/datasource-engine/src/types/DataSourceConfig.ts
new file mode 100644
index 000000000..8a3687834
--- /dev/null
+++ b/packages/datasource-engine/src/types/DataSourceConfig.ts
@@ -0,0 +1,6 @@
+import { DataSourceConfigItem } from './DataSourceConfigItem';
+
+export type DataSourceConfig = {
+  list?: DataSourceConfigItem[];
+  dataHandler?: (dataMap: Record<string, unknown>) => void | Promise<void>;
+};
diff --git a/packages/datasource-engine/src/types/DataSourceConfigItem.ts b/packages/datasource-engine/src/types/DataSourceConfigItem.ts
new file mode 100644
index 000000000..a8aa46965
--- /dev/null
+++ b/packages/datasource-engine/src/types/DataSourceConfigItem.ts
@@ -0,0 +1,17 @@
+import { DataSourceOptions } from './DataSourceOptions';
+import { RequestHandler } from './RequestHandler';
+
+export type DataSourceConfigItem = {
+  id: string;
+  type: string;
+  isInit?: boolean | (() => boolean | undefined);
+
+  options?: DataSourceOptions | (() => DataSourceOptions | undefined);
+
+  requestHandler?: RequestHandler;
+
+  dataHandler?: (
+    data: unknown | undefined,
+    error: unknown | undefined,
+  ) => unknown;
+};
diff --git a/packages/datasource-engine/src/types/DataSourceEngineOptions.ts b/packages/datasource-engine/src/types/DataSourceEngineOptions.ts
new file mode 100644
index 000000000..f2fd84b1a
--- /dev/null
+++ b/packages/datasource-engine/src/types/DataSourceEngineOptions.ts
@@ -0,0 +1,7 @@
+import { RequestHandler } from './RequestHandler';
+
+export type DataSourceEngineOptions = {
+  requestHandlersMap?: {
+    [dataSourceType: string]: RequestHandler;
+  };
+};
diff --git a/packages/datasource-engine/src/types/DataSourceOptions.ts b/packages/datasource-engine/src/types/DataSourceOptions.ts
new file mode 100644
index 000000000..55a317496
--- /dev/null
+++ b/packages/datasource-engine/src/types/DataSourceOptions.ts
@@ -0,0 +1,10 @@
+export type DataSourceOptions<TParams = Record<string, unknown>> = {
+  uri?: string;
+  params?: TParams;
+  method?: string;
+  isCors?: boolean;
+  timeout?: number;
+  headers?: Record<string, string>;
+  isSync?: boolean;
+  [key: string]: unknown;
+};
diff --git a/packages/datasource-engine/src/types/IDataSourceEngine.ts b/packages/datasource-engine/src/types/IDataSourceEngine.ts
new file mode 100644
index 000000000..4d19be842
--- /dev/null
+++ b/packages/datasource-engine/src/types/IDataSourceEngine.ts
@@ -0,0 +1,9 @@
+import { IRuntimeDataSource } from './IRuntimeDataSource';
+
+export interface IDataSourceEngine {
+  /** 数据源, key 是数据源的 ID */
+  readonly dataSourceMap: Record<string, IRuntimeDataSource>;
+
+  /** 重新加载所有的数据源 */
+  reloadDataSource(): Promise<void>;
+}
diff --git a/packages/datasource-engine/src/types/IDataSourceEngineFactory.ts b/packages/datasource-engine/src/types/IDataSourceEngineFactory.ts
new file mode 100644
index 000000000..4215049ea
--- /dev/null
+++ b/packages/datasource-engine/src/types/IDataSourceEngineFactory.ts
@@ -0,0 +1,12 @@
+import { DataSourceConfig } from './DataSourceConfig';
+import { DataSourceEngineOptions } from './DataSourceEngineOptions';
+import { IDataSourceEngine } from './IDataSourceEngine';
+import { IRuntimeContext } from './IRuntimeContext';
+
+export interface IDataSourceEngineFactory {
+  create(
+    dataSourceConfig: DataSourceConfig,
+    runtimeContext: IRuntimeContext,
+    options?: DataSourceEngineOptions,
+  ): IDataSourceEngine;
+}
diff --git a/packages/datasource-engine/src/types/IRuntimeContext.ts b/packages/datasource-engine/src/types/IRuntimeContext.ts
new file mode 100644
index 000000000..4fed73205
--- /dev/null
+++ b/packages/datasource-engine/src/types/IRuntimeContext.ts
@@ -0,0 +1,24 @@
+import { IRuntimeDataSource } from './IRuntimeDataSource';
+
+/** 运行时上下文 */
+export interface IRuntimeContext<
+  TState extends object = Record<string, unknown>
+> {
+  /** 当前容器的状态 */
+  readonly state: TState;
+
+  /** 设置状态(浅合并) */
+  setState(state: Partial<TState>): void;
+
+  /** 数据源, key 是数据源的 ID */
+  dataSourceMap: Record<string, IRuntimeDataSource>;
+
+  /** 重新加载所有的数据源 */
+  reloadDataSource(): Promise<void>;
+
+  /** 页面容器 */
+  readonly page: IRuntimeContext & { props: Record<string, unknown> };
+
+  /** 低代码业务组件容器 */
+  readonly component: IRuntimeContext & { props: Record<string, unknown> };
+}
diff --git a/packages/datasource-engine/src/types/IRuntimeDataSource.ts b/packages/datasource-engine/src/types/IRuntimeDataSource.ts
new file mode 100644
index 000000000..ccf133716
--- /dev/null
+++ b/packages/datasource-engine/src/types/IRuntimeDataSource.ts
@@ -0,0 +1,22 @@
+import { RuntimeDataSourceStatus } from './RuntimeDataSourceStatus';
+
+/**
+ * 运行时的数据源（对外暴露的接口）
+ * @see https://yuque.antfin-inc.com/mo/spec/spec-low-code-building-schema#Jwgj5
+ */
+export interface IRuntimeDataSource<TParams = unknown, TResultData = unknown> {
+  /** 当前状态(initial/loading/loaded/error) */
+  readonly status: RuntimeDataSourceStatus;
+
+  /** 加载成功时的数据 */
+  readonly data?: TResultData;
+
+  /** 加载出错的时候的错误信息 */
+  readonly error?: Error;
+
+  /**
+   * 加载数据 (无论是否曾经加载过)
+   * 注意：若提供 params，则会和默认配置的参数做浅合并；否则会使用默认配置的参数。
+   */
+  load(params?: TParams): Promise<TResultData>;
+}
diff --git a/packages/datasource-engine/src/types/RequestHandler.ts b/packages/datasource-engine/src/types/RequestHandler.ts
new file mode 100644
index 000000000..aa9708585
--- /dev/null
+++ b/packages/datasource-engine/src/types/RequestHandler.ts
@@ -0,0 +1,6 @@
+import { DataSourceOptions } from './DataSourceOptions';
+
+export type RequestHandler<
+  TOptions extends DataSourceOptions = DataSourceOptions,
+  TResult = unknown
+> = (options: TOptions) => Promise<TResult>;
diff --git a/packages/datasource-engine/src/types/RuntimeDataSourceStatus.ts b/packages/datasource-engine/src/types/RuntimeDataSourceStatus.ts
new file mode 100644
index 000000000..e089860ab
--- /dev/null
+++ b/packages/datasource-engine/src/types/RuntimeDataSourceStatus.ts
@@ -0,0 +1,14 @@
+/** 数据源的状态 */
+export enum RuntimeDataSourceStatus {
+  /** 初始状态，尚未加载 */
+  Initial = 'init',
+
+  /** 正在加载 */
+  Loading = 'loading',
+
+  /** 已加载(无错误) */
+  Loaded = 'loaded',
+
+  /** 加载出错了 */
+  Error = 'error',
+}
diff --git a/packages/datasource-engine/src/types/index.ts b/packages/datasource-engine/src/types/index.ts
new file mode 100644
index 000000000..31f0f3947
--- /dev/null
+++ b/packages/datasource-engine/src/types/index.ts
@@ -0,0 +1 @@
+export * from './DataSourceConfig';
export * from './DataSourceConfigItem';
export * from './DataSourceEngineOptions';
export * from './DataSourceOptions';
export * from './IDataSourceEngine';
export * from './IDataSourceEngineFactory';
export * from './IRuntimeContext';
export * from './IRuntimeDataSource';
export * from './RequestHandler';
export * from './RuntimeDataSourceStatus';
\ No newline at end of file
diff --git a/packages/datasource-engine/src/typing.d.ts b/packages/datasource-engine/src/typing.d.ts
new file mode 100644
index 000000000..2a2deec30
--- /dev/null
+++ b/packages/datasource-engine/src/typing.d.ts
@@ -0,0 +1 @@
+declare module '@ali/universal-mtop';
diff --git a/packages/datasource-engine/tsconfig.json b/packages/datasource-engine/tsconfig.json
new file mode 100644
index 000000000..e06677d2b
--- /dev/null
+++ b/packages/datasource-engine/tsconfig.json
@@ -0,0 +1,80 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+    /* Basic Options */
+    // "incremental": true,                   /* Enable incremental compilation */
+    "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+    "lib": [
+      "DOM",
+      "ES2015",
+      "ES2016",
+      "ES2017",
+      "ES2018",
+      "ES2019"
+    ] /* Specify library files to be included in the compilation. */,
+    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "declaration": true /* Generates corresponding '.d.ts' file. */,
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    "sourceMap": true /* Generates corresponding '.map' file. */,
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    "outDir": "./lib" /* Redirect output structure to the directory. */,
+    "rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
+    // "composite": true,                     /* Enable project compilation */
+    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+    "removeComments": false /* Do not emit comments to output. */,
+    // "noEmit": true,                        /* Do not emit outputs. */
+    "importHelpers": true /* Import emit helpers from 'tslib'. */,
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": true /* Enable all strict type-checking options. */,
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    "rootDirs": [
+      "src"
+    ] /* List of root folders whose combined content represents the structure of the project at runtime. */,
+    "typeRoots": [
+      "./node_modules/@types"
+    ] /* List of folders to include type definitions from. */,
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+
+    /* Advanced Options */
+    "skipLibCheck": true /* Skip type checking of declaration files. */,
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+  }
+}

From c2a7d631a13c4cb46f5e55c16cc511f7931b01c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 19 Aug 2020 17:21:17 +0800
Subject: [PATCH 56/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E8=BF=98=E5=8E=9F?=
 =?UTF-8?q?=E5=87=BA=E7=A0=81=E6=A8=A1=E5=9D=97=E7=9A=84=20solutions=20?=
 =?UTF-8?q?=E7=9A=84=E5=AF=BC=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/src/index.ts | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/code-generator/src/index.ts b/packages/code-generator/src/index.ts
index 87df670ee..79e527354 100644
--- a/packages/code-generator/src/index.ts
+++ b/packages/code-generator/src/index.ts
@@ -6,16 +6,12 @@ import { createProjectBuilder } from './generator/ProjectBuilder';
 import { createModuleBuilder } from './generator/ModuleBuilder';
 import { createDiskPublisher } from './publisher/disk';
 import { createZipPublisher } from './publisher/zip';
-// import createIceJsProjectBuilder from './solutions/icejs';
-// import createRecoreProjectBuilder from './solutions/recore';
+import createIceJsProjectBuilder from './solutions/icejs';
+import createRecoreProjectBuilder from './solutions/recore';
 
 // 引入说明
 import { REACT_CHUNK_NAME } from './plugins/component/react/const';
-import {
-  COMMON_CHUNK_NAME,
-  CLASS_DEFINE_CHUNK_NAME,
-  DEFAULT_LINK_AFTER,
-} from './const/generator';
+import { COMMON_CHUNK_NAME, CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from './const/generator';
 
 // 引入通用插件组
 import esmodule from './plugins/common/esmodule';
@@ -50,8 +46,8 @@ export default {
   createProjectBuilder,
   createModuleBuilder,
   solutions: {
-    // icejs: createIceJsProjectBuilder,
-    // recore: createRecoreProjectBuilder,
+    icejs: createIceJsProjectBuilder,
+    recore: createRecoreProjectBuilder,
   },
   solutionParts: {
     icejs,

From 27f0e1301010f991012ebfca1aef844bd58f542e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 19 Aug 2020 17:23:03 +0800
Subject: [PATCH 57/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E5=AF=BC=E5=87=BA?=
 =?UTF-8?q?=20Rax=20=E7=9A=84=20solutions=20=E7=9A=84=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/src/index.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/code-generator/src/index.ts b/packages/code-generator/src/index.ts
index 79e527354..e817d2277 100644
--- a/packages/code-generator/src/index.ts
+++ b/packages/code-generator/src/index.ts
@@ -8,6 +8,7 @@ import { createDiskPublisher } from './publisher/disk';
 import { createZipPublisher } from './publisher/zip';
 import createIceJsProjectBuilder from './solutions/icejs';
 import createRecoreProjectBuilder from './solutions/recore';
+import createRaxAppProjectBuilder from './solutions/rax-app';
 
 // 引入说明
 import { REACT_CHUNK_NAME } from './plugins/component/react/const';
@@ -39,6 +40,7 @@ import * as utilsTemplateHelper from './utils/templateHelper';
 
 // 引入内置解决方案模块
 import icejs from './plugins/project/framework/icejs';
+import rax from './plugins/project/framework/rax';
 
 export * from './types';
 
@@ -48,9 +50,11 @@ export default {
   solutions: {
     icejs: createIceJsProjectBuilder,
     recore: createRecoreProjectBuilder,
+    rax: createRaxAppProjectBuilder,
   },
   solutionParts: {
     icejs,
+    rax,
   },
   publishers: {
     disk: createDiskPublisher,

From 475534f51f93c52f575c3be3739cad9845bfa838 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 19 Aug 2020 17:25:16 +0800
Subject: [PATCH 58/80] =?UTF-8?q?test:=20=F0=9F=92=8D=20=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E7=9A=84=E6=97=B6=E5=80=99=E7=9B=B4=E6=8E=A5=E5=BC=95=E7=94=A8?=
 =?UTF-8?q?=20src=20=E5=AF=BC=E5=87=BA=E7=9A=84=20solutions.rax=20?=
 =?UTF-8?q?=E5=B0=B1=E8=A1=8C=E4=BA=86,=E4=B8=8D=E7=94=A8=E5=86=8D?=
 =?UTF-8?q?=E4=BB=8E=E5=AD=90=E7=9B=AE=E5=BD=95=E9=87=8C=E5=BC=95=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/test/rax-app.test.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/code-generator/test/rax-app.test.ts b/packages/code-generator/test/rax-app.test.ts
index 6ac4ce363..e3a05f61c 100644
--- a/packages/code-generator/test/rax-app.test.ts
+++ b/packages/code-generator/test/rax-app.test.ts
@@ -7,8 +7,8 @@ import path from 'path';
 import chalk from 'chalk';
 
 import CodeGenerator from '../src';
-import createRaxAppBuilder from '../src/solutions/rax-app';
-import { IProjectSchema } from '../src/types/schema';
+
+import type { IProjectSchema } from '../src/types/schema';
 
 const TEST_CASES_DIR = path.join(__dirname, '../test-cases/rax-app');
 
@@ -42,7 +42,7 @@ function defineTest(caseDirName: string) {
 }
 
 async function exportProject(schemaJson: IProjectSchema, targetPath: string, projectName: string) {
-  const raxAppBuilder = createRaxAppBuilder();
+  const raxAppBuilder = CodeGenerator.solutions.rax();
   const result = await raxAppBuilder.generateProject(schemaJson);
   const publisher = CodeGenerator.publishers.disk();
   await publisher.publish({

From 17dbb898e869d66f42cdaceeb10e958b2dbcdc84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=A5=E5=B8=8C?= <armslave.yy@alibaba-inc.com>
Date: Fri, 21 Aug 2020 09:46:11 +0800
Subject: [PATCH 59/80] =?UTF-8?q?style:=20=F0=9F=92=84=20lint=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/src/utils/expressionParser.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/code-generator/src/utils/expressionParser.ts b/packages/code-generator/src/utils/expressionParser.ts
index 0b7755171..d764798ef 100644
--- a/packages/code-generator/src/utils/expressionParser.ts
+++ b/packages/code-generator/src/utils/expressionParser.ts
@@ -7,7 +7,7 @@ import { isIdentifier, Node } from '@babel/types';
 import { OrderedSet } from './OrderedSet';
 
 export class ParseError extends Error {
-  constructor(public readonly expr: string, public readonly detail: unknown) {
+  constructor(readonly expr: string, readonly detail: unknown) {
     super(`Failed to parse expression "${expr}"`);
     Object.setPrototypeOf(this, new.target.prototype);
   }
@@ -160,7 +160,7 @@ export function parseExpressionGetGlobalVariables(
 
 export function parseExpressionConvertThis2Context(
   expr: string,
-  contextName: string = '__$$context',
+  contextName = '__$$context',
   localVariables: string[] = [],
 ): string {
   if (!expr) {

From facfa2afd6d6189c7ef46af8e78c09d368139f59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Fri, 21 Aug 2020 10:44:38 +0800
Subject: [PATCH 60/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=20Rax=20=E5=87=BA=E7=A0=81=E6=97=B6=E5=AF=B9=E7=BB=91=E5=AE=9A?=
 =?UTF-8?q?=E7=9A=84=E8=A1=A8=E8=BE=BE=E5=BC=8F=E7=9A=84=E5=8C=85=E8=A3=B9?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91,=20=E5=AF=B9=E4=BA=8E=E4=B8=80=E4=BA=9B?=
 =?UTF-8?q?=E7=AE=80=E5=8D=95=E7=9A=84=E5=AE=89=E5=85=A8=E7=9A=84=E8=A1=A8?=
 =?UTF-8?q?=E8=BE=BE=E5=BC=8F=E4=B8=8D=E5=81=9A=E5=8C=85=E8=A3=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/plugins/component/rax/jsx.ts          | 68 +++++++++++++++++--
 .../src/utils/expressionParser.ts             | 19 +++---
 .../demo-project/src/pages/Home/index.jsx     |  4 +-
 .../test-cases/rax-app/demo2/schema.json5     | 16 ++---
 4 files changed, 85 insertions(+), 22 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/jsx.ts b/packages/code-generator/src/plugins/component/rax/jsx.ts
index eb6c513af..a65ebba4e 100644
--- a/packages/code-generator/src/plugins/component/rax/jsx.ts
+++ b/packages/code-generator/src/plugins/component/rax/jsx.ts
@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import changeCase from 'change-case';
+import { Expression, MemberExpression } from '@babel/types';
 import {
   BuilderComponentPlugin,
   BuilderComponentPluginFactory,
@@ -25,7 +26,11 @@ import { generateExpression } from '../../../utils/jsExpression';
 import { CustomHandlerSet, generateUnknownType } from '../../../utils/compositeType';
 
 import { IScopeBindings, ScopeBindings } from '../../../utils/ScopeBindings';
-import { parseExpressionConvertThis2Context, parseExpressionGetGlobalVariables } from '../../../utils/expressionParser';
+import {
+  parseExpression,
+  parseExpressionConvertThis2Context,
+  parseExpressionGetGlobalVariables,
+} from '../../../utils/expressionParser';
 
 type PluginConfig = {
   fileType: string;
@@ -181,7 +186,62 @@ function transformLoopExpr(expr: string, handlers: CustomHandlerSet) {
 }
 
 function transformJsExpr(expr: string, handlers: CustomHandlerSet) {
-  return isLiteralAtomicExpr(expr) ? expr : `__$$eval(() => (${transformThis2Context(expr, handlers)}))`;
+  if (!expr) {
+    return 'undefined';
+  }
+
+  if (isLiteralAtomicExpr(expr)) {
+    return expr;
+  }
+
+  const exprAst = parseExpression(expr);
+  switch (exprAst.type) {
+    // 对于下面这些比较安全的字面值，可以直接返回对应的表达式，而非包一层
+    case 'BigIntLiteral':
+    case 'BooleanLiteral':
+    case 'DecimalLiteral':
+    case 'NullLiteral':
+    case 'NumericLiteral':
+    case 'RegExpLiteral':
+    case 'StringLiteral':
+      return expr;
+
+    // 对于直接写个函数的，则不用再包下，因为这样不会抛出异常的
+    case 'ArrowFunctionExpression':
+    case 'FunctionExpression':
+      return transformThis2Context(exprAst, handlers);
+
+    // 对于直接访问 this.xxx, this.utils.xxx, this.state.xxx 的也不用再包下
+    case 'MemberExpression':
+      if (isSimpleDirectlyAccessingThis(exprAst) || isSimpleDirectlyAccessingSafeProperties(exprAst)) {
+        return transformThis2Context(exprAst, handlers);
+      }
+
+      break;
+
+    default:
+      break;
+  }
+
+  // 其他的都需要包一层
+  return `__$$eval(() => (${transformThis2Context(exprAst, handlers)}))`;
+}
+
+/** this.xxx */
+function isSimpleDirectlyAccessingThis(exprAst: MemberExpression) {
+  return !exprAst.computed && exprAst.object.type === 'ThisExpression';
+}
+
+/** this.state.xxx 和 this.utils.xxx 等安全的肯定应该存在的东东 */
+function isSimpleDirectlyAccessingSafeProperties(exprAst: MemberExpression): boolean {
+  return (
+    !exprAst.computed &&
+    exprAst.object.type === 'MemberExpression' &&
+    exprAst.object.object.type === 'ThisExpression' &&
+    !exprAst.object.computed &&
+    exprAst.object.property.type === 'Identifier' &&
+    /^(state|utils|constants|i18n)$/.test(exprAst.object.property.name)
+  );
 }
 
 function isImportAliasDefineChunk(
@@ -206,14 +266,14 @@ function isImportAliasDefineChunk(
  * 判断是否是原子类型的表达式
  */
 function isLiteralAtomicExpr(expr: string): boolean {
-  return expr === 'null' || expr === 'undefined' || expr === 'true' || expr === 'false' || /^\d+$/.test(expr);
+  return expr === 'null' || expr === 'undefined' || expr === 'true' || expr === 'false' || /^-?\d+(\.\d+)?$/.test(expr);
 }
 
 /**
  * 将所有的 this.xxx 替换为 __$$context.xxx
  * @param expr
  */
-function transformThis2Context(expr: string, customHandlers: CustomHandlerSet): string {
+function transformThis2Context(expr: string | Expression, customHandlers: CustomHandlerSet): string {
   // return expr
   //   .replace(/\bthis\.item\./g, () => 'item.')
   //   .replace(/\bthis\.index\./g, () => 'index.')
diff --git a/packages/code-generator/src/utils/expressionParser.ts b/packages/code-generator/src/utils/expressionParser.ts
index 0b7755171..7a932f1b4 100644
--- a/packages/code-generator/src/utils/expressionParser.ts
+++ b/packages/code-generator/src/utils/expressionParser.ts
@@ -7,8 +7,8 @@ import { isIdentifier, Node } from '@babel/types';
 import { OrderedSet } from './OrderedSet';
 
 export class ParseError extends Error {
-  constructor(public readonly expr: string, public readonly detail: unknown) {
-    super(`Failed to parse expression "${expr}"`);
+  constructor(public readonly expr: string | t.Expression, public readonly detail: unknown) {
+    super(`Failed to parse expression "${typeof expr === 'string' ? expr : generate(expr)}"`);
     Object.setPrototypeOf(this, new.target.prototype);
   }
 }
@@ -159,7 +159,7 @@ export function parseExpressionGetGlobalVariables(
 }
 
 export function parseExpressionConvertThis2Context(
-  expr: string,
+  expr: string | t.Expression,
   contextName: string = '__$$context',
   localVariables: string[] = [],
 ): string {
@@ -168,7 +168,7 @@ export function parseExpressionConvertThis2Context(
   }
 
   try {
-    const exprAst = parser.parseExpression(expr);
+    const exprAst = typeof expr === 'string' ? parser.parseExpression(expr) : expr;
     const exprWrapAst = t.expressionStatement(exprAst);
     const fileAst = t.file(t.program([exprWrapAst]));
 
@@ -229,11 +229,14 @@ export function parseExpressionConvertThis2Context(
     const { code } = generate(exprWrapAst.expression, { sourceMaps: false });
     return code;
   } catch (e) {
-    // throw new ParseError(expr, e);
-    throw e;
+    throw new ParseError(expr, e);
   }
 }
 
-function indent(level: number) {
-  return ' '.repeat(level);
+export function parseExpression(expr: string) {
+  try {
+    return parser.parseExpression(expr);
+  } catch (e) {
+    throw new ParseError(expr, e);
+  }
 }
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index b1b50c437..f506deab2 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -79,7 +79,7 @@ class Home$$Page extends Component {
         <View>
           <Text>=== User Info: ===</Text>
         </View>
-        {__$$eval(() => __$$context.state.user) && (
+        {__$$context.state.user && (
           <View style={{ flexDirection: 'row' }}>
             <Image
               source={{ uri: __$$eval(() => __$$context.state.user.avatar) }}
@@ -128,7 +128,7 @@ class Home$$Page extends Component {
             });
           }}
         >
-          <Text>点击次数：{__$$eval(() => __$$context.state.clickCount)}(点击加 1)</Text>
+          <Text>点击次数：{__$$context.state.clickCount}(点击加 1)</Text>
         </View>
         <View>
           <Text>操作提示：</Text>
diff --git a/packages/code-generator/test-cases/rax-app/demo2/schema.json5 b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
index 96818e695..336e37b29 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
@@ -87,7 +87,7 @@
               isSync: true,
             },
             dataHandler: {
-              type: 'JSFunction',
+              type: 'JSExpression',
               value: 'function (response) {\nif (!response.success){\n    throw new Error(response.message);\n  }\n  return response.data;\n}',
             },
           },
@@ -104,13 +104,13 @@
               isSync: true,
             },
             dataHandler: {
-              type: 'JSFunction',
+              type: 'JSExpression',
               value: 'function (response) {\nif (!response.success){\n    throw new Error(response.message);\n  }\n  return response.data.result;\n}',
             },
           },
         ],
         dataHandler: {
-          type: 'JSFunction',
+          type: 'JSExpression',
           value: 'function (dataMap) {\n  console.info("All datasources loaded:", dataMap);\n}',
         },
       },
@@ -164,7 +164,7 @@
               componentName: 'View',
               props: {
                 onClick: {
-                  type: 'JSFunction',
+                  type: 'JSExpression',
                   value: 'this.hello',
                 },
               },
@@ -210,7 +210,7 @@
           props: {
             style: { flexDirection: 'row' },
             onClick: {
-              type: 'JSFunction',
+              type: 'JSExpression',
               value: 'function(){ this.utils.recordEvent(`CLICK_ORDER`, this.order.title) }',
             },
           },
@@ -260,7 +260,7 @@
           componentName: 'View',
           props: {
             onClick: {
-              type: 'JSFunction',
+              type: 'JSExpression',
               value: 'function (){ this.setState({ clickCount: this.state.clickCount + 1 }) }',
             },
           },
@@ -312,7 +312,7 @@
       name: 'formatPrice',
       type: 'function',
       content: {
-        type: 'JSFunction',
+        type: 'JSExpression',
         value: 'function formatPrice(price, unit) { return Number(price).toFixed(2) + unit; }',
       },
     },
@@ -321,7 +321,7 @@
       name: 'recordEvent',
       type: 'function',
       content: {
-        type: 'JSFunction',
+        type: 'JSExpression',
         value: 'function recordEvent(eventName, eventDetail) { \n  this.utils.Toast.show(`[EVENT]: ${eventName} ${eventDetail}`);\n  console.log(`[EVENT]: ${eventName} (detail: %o) (user: %o)`, eventDetail, this.state.user); }',
       },
     },

From 206a04eae864bfe10445893ef13f5b8cb2448848 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Fri, 21 Aug 2020 10:47:01 +0800
Subject: [PATCH 61/80] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20=E8=A1=A5?=
 =?UTF-8?q?=E5=85=85=E5=AF=B9=20transformThis2Context=20=E7=9A=84=E8=AF=B4?=
 =?UTF-8?q?=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/src/plugins/component/rax/jsx.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/code-generator/src/plugins/component/rax/jsx.ts b/packages/code-generator/src/plugins/component/rax/jsx.ts
index a65ebba4e..7cdb0c661 100644
--- a/packages/code-generator/src/plugins/component/rax/jsx.ts
+++ b/packages/code-generator/src/plugins/component/rax/jsx.ts
@@ -274,6 +274,7 @@ function isLiteralAtomicExpr(expr: string): boolean {
  * @param expr
  */
 function transformThis2Context(expr: string | Expression, customHandlers: CustomHandlerSet): string {
+  // 下面这种字符串替换的方式虽然简单直接，但是对于复杂场景会误匹配，故后期改成了解析 AST 然后修改 AST 最后再重新生成代码的方式
   // return expr
   //   .replace(/\bthis\.item\./g, () => 'item.')
   //   .replace(/\bthis\.index\./g, () => 'index.')

From 730387de95f4081db308ff743698e1c37fd3f6d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Fri, 21 Aug 2020 11:02:42 +0800
Subject: [PATCH 62/80] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20=E5=8E=BB?=
 =?UTF-8?q?=E6=8E=89=E4=B8=80=E4=BA=9B=E6=84=8F=E8=A7=81=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=E4=BA=86=E7=9A=84=20TODO?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/plugins/component/rax/containerInitState.ts             | 1 -
 .../src/plugins/component/rax/containerInjectUtils.ts           | 2 --
 2 files changed, 3 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/containerInitState.ts b/packages/code-generator/src/plugins/component/rax/containerInitState.ts
index 8dc634c98..6c5421133 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInitState.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInitState.ts
@@ -33,7 +33,6 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
     if (ir.state) {
       const state = ir.state;
       const fields = Object.keys(state).map<string>((stateName) => {
-        // TODO: 这里用什么 handlers?
         const [isString, value] = generateCompositeType(state[stateName], {});
         return `${stateName}: ${isString ? `'${value}'` : value},`;
       });
diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectUtils.ts b/packages/code-generator/src/plugins/component/rax/containerInjectUtils.ts
index 5fda869f2..b4a4c52f2 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectUtils.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectUtils.ts
@@ -43,14 +43,12 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
     });
 
-    // TODO: Page methods...
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: cfg.fileType,
       name: CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod,
 
       // 绑定下上下文，这样在所有的 utils 里面都能通过 this.xxx 来访问上下文了
-      // TODO: 要不要优化为通过 Proxy 的方式懒绑定？
       content: `
         _defineUtils() {
           const utils = {

From 166c70b94c58e2a3a511b6fe5f2a6f7433645919 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Fri, 21 Aug 2020 11:03:10 +0800
Subject: [PATCH 63/80] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20=E6=95=B4?=
 =?UTF-8?q?=E7=90=86=E4=BC=98=E5=8C=96=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/plugins/component/rax/jsx.ts          | 23 ++++---------------
 1 file changed, 5 insertions(+), 18 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/jsx.ts b/packages/code-generator/src/plugins/component/rax/jsx.ts
index 7cdb0c661..9cb1e9558 100644
--- a/packages/code-generator/src/plugins/component/rax/jsx.ts
+++ b/packages/code-generator/src/plugins/component/rax/jsx.ts
@@ -36,30 +36,12 @@ type PluginConfig = {
   fileType: string;
 };
 
-// TODO: componentName 若并非大写字符打头，甚至并非是一个有效的 JS 标识符怎么办？？
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
   const cfg: PluginConfig = {
     fileType: FileType.JSX,
     ...config,
   };
 
-  // 什么都不做的的话，会有 3 个问题：
-  // 1. 小程序出码的时候，循环变量没法拿到
-  // 2. 小程序出码的时候，很容易出现 Uncaught TypeError: Cannot read property 'avatar' of undefined 这样的异常(如下图的 50 行) -- 因为若直接出码，Rax 构建到小程序的时候会立即计算所有在视图中用到的变量
-  // 3. 通过 this.xxx 能拿到的东西太多了，而且自定义的 methods 可能会无意间破坏 Rax 框架或小程序框架在页面 this 上的东东
-  // const transformers = {
-  //   transformThis2Context: (expr: string) => expr,
-  //   transformJsExpr: (expr: string) => expr,
-  //   transformLoopExpr: (expr: string) => expr,
-  // };
-
-  // 不转换 this.xxx 到 __$$context.xxx 的话，依然会有上述的 1 和 3 的问题。
-  // const transformers = {
-  //   transformThis2Context: (expr: string) => expr,
-  //   transformJsExpr: (expr: string) => (isLiteralAtomicExpr(expr) ? expr : `__$$eval(() => (${expr}))`),
-  //   transformLoopExpr: (expr: string) => `__$$evalArray(() => (${expr}))`,
-  // };
-
   const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
     const next: ICodeStruct = {
       ...pre,
@@ -76,12 +58,17 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       }
     });
 
+    // 注意：这里其实隐含了一个假设：schema 中的 componentName 应该是一个有效的 JS 标识符，而且是大写字母打头的
     const mapComponentNameToAliasOrKeepIt = (componentName: string) =>
       componentsNameAliasMap.get(componentName) || componentName;
 
     // 然后过滤掉所有的别名 chunks
     next.chunks = next.chunks.filter((chunk) => !isImportAliasDefineChunk(chunk));
 
+    // 如果直接按目前的 React 的方式之间出码 JSX 的话，会有 3 个问题：
+    // 1. 小程序出码的时候，循环变量没法拿到
+    // 2. 小程序出码的时候，很容易出现 Uncaught TypeError: Cannot read property 'avatar' of undefined 这样的异常(如下图的 50 行) -- 因为若直接出码，Rax 构建到小程序的时候会立即计算所有在视图中用到的变量
+    // 3. 通过 this.xxx 能拿到的东西太多了，而且自定义的 methods 可能会无意间破坏 Rax 框架或小程序框架在页面 this 上的东东
     const customHandlers: CustomHandlerSet = {
       expression(this: CustomHandlerSet, input: JSExpression) {
         return transformJsExpr(generateExpression(input), this);

From e78dae09a6ed52cb96515273d4b9956f98148150 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Fri, 21 Aug 2020 11:04:06 +0800
Subject: [PATCH 64/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20globalStyle=20?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=AE=9A=E5=88=B6=E6=A0=B7=E5=BC=8F=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=E5=90=8E=E7=BC=80=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../framework/rax/plugins/globalStyle.ts      | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/globalStyle.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/globalStyle.ts
index 78e409fd2..ce3689f2b 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/globalStyle.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/globalStyle.ts
@@ -9,7 +9,18 @@ import {
   IProjectInfo,
 } from '../../../../../types';
 
-const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
+export type GlobalStylePluginConfig = {
+  fileType: string;
+};
+
+const pluginFactory: BuilderComponentPluginFactory<GlobalStylePluginConfig> = (
+  config?: Partial<GlobalStylePluginConfig>,
+) => {
+  const cfg: GlobalStylePluginConfig = {
+    fileType: FileType.SCSS,
+    ...config,
+  };
+
   const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
     const next: ICodeStruct = {
       ...pre,
@@ -19,7 +30,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
 
     next.chunks.push({
       type: ChunkType.STRING,
-      fileType: FileType.SCSS, // TODO: 样式文件的类型定制化？
+      fileType: cfg.fileType,
       name: COMMON_CHUNK_NAME.StyleDepsImport,
       content: ``,
       linkAfter: [],
@@ -27,7 +38,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
 
     next.chunks.push({
       type: ChunkType.STRING,
-      fileType: FileType.SCSS,
+      fileType: cfg.fileType,
       name: COMMON_CHUNK_NAME.StyleCssContent,
       content: `
 body {
@@ -39,7 +50,7 @@ body {
 
     next.chunks.push({
       type: ChunkType.STRING,
-      fileType: FileType.SCSS,
+      fileType: cfg.fileType,
       name: COMMON_CHUNK_NAME.StyleCssContent,
       content: ir.css || '',
       linkAfter: [COMMON_CHUNK_NAME.StyleDepsImport],

From 1970e75c28f1a709754dc0a79f5b352dc1fe7391 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Fri, 21 Aug 2020 11:04:49 +0800
Subject: [PATCH 65/80] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20=E6=A0=B9?=
 =?UTF-8?q?=E6=8D=AE=E6=98=A5=E5=B8=8C=E7=9A=84=E8=A7=A3=E9=87=8A=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=20generateAttr=20=E4=B8=AD=E8=BF=99=E5=9D=97=E7=89=B9?=
 =?UTF-8?q?=E6=AE=8A=E5=A4=84=E7=90=86=E7=9A=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/src/utils/nodeToJSX.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/code-generator/src/utils/nodeToJSX.ts b/packages/code-generator/src/utils/nodeToJSX.ts
index 46d992824..51bcd7a2d 100644
--- a/packages/code-generator/src/utils/nodeToJSX.ts
+++ b/packages/code-generator/src/utils/nodeToJSX.ts
@@ -44,7 +44,7 @@ export function generateAttr(
     return customHandlers.nodeAttr(attrName, attrValue);
   }
 
-  // TODO: 这两个为啥要特殊处理？？
+  // 为了规避一个上游 schema 引入的 bug
   if (attrName === 'initValue' || attrName === 'labelCol') {
     return [];
   }

From 8d198bd2a9e8d9b225f840e24213b841f2cefce8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Fri, 21 Aug 2020 13:01:22 +0800
Subject: [PATCH 66/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E4=B8=BA=20Rax=20?=
 =?UTF-8?q?=E5=87=BA=E7=A0=81=E5=A2=9E=E5=8A=A0=E5=AF=B9=20i18n=20?=
 =?UTF-8?q?=E7=9A=84=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/generator/ProjectBuilder.ts           |   4 +-
 .../component/rax/containerInjectContext.ts   |  47 +++++
 .../src/plugins/component/rax/jsx.ts          |  37 ++--
 .../src/plugins/project/i18n.ts               |  88 +++++-----
 .../demo1/expected/demo-project/src/i18n.js   |  13 ++
 .../demo-project/src/pages/Home/index.jsx     |  25 +++
 .../demo2/expected/demo-project/src/i18n.js   |  13 ++
 .../demo-project/src/pages/Home/index.jsx     |  25 +++
 .../demo3/expected/demo-project/src/i18n.js   |  13 ++
 .../demo-project/src/pages/Detail/index.jsx   |  25 +++
 .../demo-project/src/pages/Home/index.jsx     |  25 +++
 .../demo-project/src/pages/List/index.jsx     |  25 +++
 .../demo4/expected/demo-project/src/i18n.js   |  13 ++
 .../demo-project/src/pages/Home/index.jsx     |  25 +++
 .../demo5/expected/demo-project/.editorconfig |  12 ++
 .../demo5/expected/demo-project/.eslintignore |  11 ++
 .../demo5/expected/demo-project/.eslintrc.js  |   3 +
 .../demo5/expected/demo-project/.gitignore    |  17 ++
 .../demo5/expected/demo-project/README.md     |  15 ++
 .../demo5/expected/demo-project/abc.json      |   7 +
 .../demo5/expected/demo-project/build.json    |  12 ++
 .../demo5/expected/demo-project/package.json  |  32 ++++
 .../demo5/expected/demo-project/src/app.js    |   6 +
 .../demo5/expected/demo-project/src/app.json  |  11 ++
 .../expected/demo-project/src/constants.js    |   3 +
 .../demo-project/src/document/index.jsx       |  25 +++
 .../expected/demo-project/src/global.scss     |   3 +
 .../demo5/expected/demo-project/src/i18n.js   |  20 +++
 .../demo-project/src/pages/Home/index.css     |   0
 .../demo-project/src/pages/Home/index.jsx     | 162 ++++++++++++++++++
 .../demo5/expected/demo-project/src/utils.js  |   1 +
 .../test-cases/rax-app/demo5/schema.json5     |  73 ++++++++
 32 files changed, 735 insertions(+), 56 deletions(-)
 create mode 100644 packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/i18n.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/i18n.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/i18n.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/i18n.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.editorconfig
 create mode 100644 packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.eslintignore
 create mode 100644 packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.eslintrc.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.gitignore
 create mode 100644 packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/README.md
 create mode 100644 packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/abc.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/build.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/app.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/app.json
 create mode 100644 packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/constants.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/document/index.jsx
 create mode 100644 packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/global.scss
 create mode 100644 packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/i18n.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.css
 create mode 100644 packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx
 create mode 100644 packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/utils.js
 create mode 100644 packages/code-generator/test-cases/rax-app/demo5/schema.json5

diff --git a/packages/code-generator/src/generator/ProjectBuilder.ts b/packages/code-generator/src/generator/ProjectBuilder.ts
index f0a13e962..d00826993 100644
--- a/packages/code-generator/src/generator/ProjectBuilder.ts
+++ b/packages/code-generator/src/generator/ProjectBuilder.ts
@@ -159,8 +159,8 @@ export class ProjectBuilder implements IProjectBuilder {
     }
 
     // i18n?
-    if (parseResult.globalI18n && builders.i18n && this.template.slots.i18n) {
-      const { files } = await builders.i18n.generateModule(parseResult.globalI18n);
+    if (builders.i18n && this.template.slots.i18n) {
+      const { files } = await builders.i18n.generateModule(parseResult.project);
 
       buildResult.push({
         path: this.template.slots.i18n.path,
diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
index 26fc15e36..3c993a2cb 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
@@ -32,6 +32,15 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport],
     });
 
+    // TODO: i18n 是可选的，如果没有 i18n 这个文件怎么办？该怎么判断？
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: cfg.fileType,
+      name: COMMON_CHUNK_NAME.InternalDepsImport,
+      content: `import * as __$$i18n from '../../i18n';`,
+      linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport],
+    });
+
     next.chunks.push({
       type: ChunkType.STRING,
       fileType: cfg.fileType,
@@ -78,6 +87,16 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
             get constants() {
               return __$$constants;
             },
+            get i18n() {
+              return self._i18n;
+            },
+            getLocale() {
+              return __$$i18n.getLocale();
+            },
+            setLocale(locale) {
+              __$$i18n.setLocale(locale);
+              self.forceUpdate();
+            },
             ...this._methods,
           };
 
@@ -87,6 +106,34 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd],
     });
 
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: cfg.fileType,
+      name: CLASS_DEFINE_CHUNK_NAME.InsVar,
+      content: `
+        _i18n = this._createI18nDelegate();
+      `,
+      linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
+    });
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: cfg.fileType,
+      name: CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod,
+      content: `
+        _createI18nDelegate() {
+          return new Proxy(
+            {},
+            {
+              get(target, prop) {
+                return __$$i18n.i18n(prop);
+              },
+            },
+          );
+        }
+      `,
+      linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd],
+    });
     return next;
   };
   return plugin;
diff --git a/packages/code-generator/src/plugins/component/rax/jsx.ts b/packages/code-generator/src/plugins/component/rax/jsx.ts
index 9cb1e9558..c92f29f4f 100644
--- a/packages/code-generator/src/plugins/component/rax/jsx.ts
+++ b/packages/code-generator/src/plugins/component/rax/jsx.ts
@@ -182,17 +182,13 @@ function transformJsExpr(expr: string, handlers: CustomHandlerSet) {
   }
 
   const exprAst = parseExpression(expr);
-  switch (exprAst.type) {
-    // 对于下面这些比较安全的字面值，可以直接返回对应的表达式，而非包一层
-    case 'BigIntLiteral':
-    case 'BooleanLiteral':
-    case 'DecimalLiteral':
-    case 'NullLiteral':
-    case 'NumericLiteral':
-    case 'RegExpLiteral':
-    case 'StringLiteral':
-      return expr;
 
+  // 对于下面这些比较安全的字面值，可以直接返回对应的表达式，而非包一层
+  if (isSimpleStraightLiteral(exprAst)) {
+    return expr;
+  }
+
+  switch (exprAst.type) {
     // 对于直接写个函数的，则不用再包下，因为这样不会抛出异常的
     case 'ArrowFunctionExpression':
     case 'FunctionExpression':
@@ -221,8 +217,11 @@ function isSimpleDirectlyAccessingThis(exprAst: MemberExpression) {
 
 /** this.state.xxx 和 this.utils.xxx 等安全的肯定应该存在的东东 */
 function isSimpleDirectlyAccessingSafeProperties(exprAst: MemberExpression): boolean {
+  const isPropertySimpleStraight =
+    !exprAst.computed || (exprAst.property.type !== 'PrivateName' && isSimpleStraightLiteral(exprAst.property));
+
   return (
-    !exprAst.computed &&
+    isPropertySimpleStraight &&
     exprAst.object.type === 'MemberExpression' &&
     exprAst.object.object.type === 'ThisExpression' &&
     !exprAst.object.computed &&
@@ -231,6 +230,22 @@ function isSimpleDirectlyAccessingSafeProperties(exprAst: MemberExpression): boo
   );
 }
 
+/** 判断是非是一些简单直接的字面值 */
+function isSimpleStraightLiteral(expr: Expression): boolean {
+  switch (expr.type) {
+    case 'BigIntLiteral':
+    case 'BooleanLiteral':
+    case 'DecimalLiteral':
+    case 'NullLiteral':
+    case 'NumericLiteral':
+    case 'RegExpLiteral':
+    case 'StringLiteral':
+      return true;
+    default:
+      return false;
+  }
+}
+
 function isImportAliasDefineChunk(
   chunk: ICodeChunk,
 ): chunk is ICodeChunk & {
diff --git a/packages/code-generator/src/plugins/project/i18n.ts b/packages/code-generator/src/plugins/project/i18n.ts
index 2ecc68cfb..c5dc0911d 100644
--- a/packages/code-generator/src/plugins/project/i18n.ts
+++ b/packages/code-generator/src/plugins/project/i18n.ts
@@ -1,5 +1,5 @@
 import { COMMON_CHUNK_NAME } from '../../const/generator';
-import { generateCompositeType } from '../../utils/compositeType';
+
 import {
   BuilderComponentPlugin,
   BuilderComponentPluginFactory,
@@ -16,53 +16,55 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
     };
 
     const ir = next.ir as IProjectInfo;
-    if (ir.i18n) {
-      const [, i18nStr] = generateCompositeType(ir.i18n, {});
 
-      next.chunks.push({
-        type: ChunkType.STRING,
-        fileType: FileType.JS,
-        name: COMMON_CHUNK_NAME.FileMainContent,
-        content: `
-          const i18nConfig = ${i18nStr};
-          let locale = 'en_US';
+    const i18nStr = ir.i18n ? JSON.stringify(ir.i18n, null, 2) : '{}';
 
-          const changeLocale = (target) => {
-            locale = target;
-          };
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JS,
+      name: COMMON_CHUNK_NAME.FileMainContent,
+      content: `
+        const i18nConfig = ${i18nStr};
 
-          const i18n = key => i18nConfig && i18nConfig[locale] && i18nConfig[locale][key] || '';
-        `,
-        linkAfter: [
-          COMMON_CHUNK_NAME.ExternalDepsImport,
-          COMMON_CHUNK_NAME.InternalDepsImport,
-          COMMON_CHUNK_NAME.ImportAliasDefine,
-          COMMON_CHUNK_NAME.FileVarDefine,
-          COMMON_CHUNK_NAME.FileUtilDefine,
-        ],
-      });
+        let locale = 'en-US';
 
-      next.chunks.push({
-        type: ChunkType.STRING,
-        fileType: FileType.JS,
-        name: COMMON_CHUNK_NAME.FileExport,
-        content: `
-          export {
-            changeLocale,
-            i18n,
-          };
-        `,
-        linkAfter: [
-          COMMON_CHUNK_NAME.ExternalDepsImport,
-          COMMON_CHUNK_NAME.InternalDepsImport,
-          COMMON_CHUNK_NAME.ImportAliasDefine,
-          COMMON_CHUNK_NAME.FileVarDefine,
-          COMMON_CHUNK_NAME.FileUtilDefine,
-          COMMON_CHUNK_NAME.FileMainContent,
-        ],
-      });
-    }
+        const getLocale = () => locale;
 
+        const setLocale = (target) => {
+          locale = target;
+        };
+
+        const i18n = key => i18nConfig && i18nConfig[locale] && i18nConfig[locale][key] || '';
+      `,
+      linkAfter: [
+        COMMON_CHUNK_NAME.ExternalDepsImport,
+        COMMON_CHUNK_NAME.InternalDepsImport,
+        COMMON_CHUNK_NAME.ImportAliasDefine,
+        COMMON_CHUNK_NAME.FileVarDefine,
+        COMMON_CHUNK_NAME.FileUtilDefine,
+      ],
+    });
+
+    next.chunks.push({
+      type: ChunkType.STRING,
+      fileType: FileType.JS,
+      name: COMMON_CHUNK_NAME.FileExport,
+      content: `
+        export {
+          getLocale,
+          setLocale,
+          i18n,
+        };
+      `,
+      linkAfter: [
+        COMMON_CHUNK_NAME.ExternalDepsImport,
+        COMMON_CHUNK_NAME.InternalDepsImport,
+        COMMON_CHUNK_NAME.ImportAliasDefine,
+        COMMON_CHUNK_NAME.FileVarDefine,
+        COMMON_CHUNK_NAME.FileUtilDefine,
+        COMMON_CHUNK_NAME.FileMainContent,
+      ],
+    });
     return next;
   };
   return plugin;
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/i18n.js
new file mode 100644
index 000000000..705ba5495
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/i18n.js
@@ -0,0 +1,13 @@
+const i18nConfig = {};
+
+let locale = 'en-US';
+
+const getLocale = () => locale;
+
+const setLocale = (target) => {
+  locale = target;
+};
+
+const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+
+export { getLocale, setLocale, i18n };
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
index fce1c34a9..e3e89c9b0 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
@@ -13,6 +13,8 @@ import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
 import __$$constants from '../../constants';
 
+import * as __$$i18n from '../../i18n';
+
 import __$$projectUtils from '../../utils';
 
 import './index.css';
@@ -22,6 +24,8 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
+  _i18n = this._createI18nDelegate();
+
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -74,12 +78,33 @@ class Home$$Page extends Component {
       get constants() {
         return __$$constants;
       },
+      get i18n() {
+        return self._i18n;
+      },
+      getLocale() {
+        return __$$i18n.getLocale();
+      },
+      setLocale(locale) {
+        __$$i18n.setLocale(locale);
+        self.forceUpdate();
+      },
       ...this._methods,
     };
 
     return context;
   }
 
+  _createI18nDelegate() {
+    return new Proxy(
+      {},
+      {
+        get(target, prop) {
+          return __$$i18n.i18n(prop);
+        },
+      },
+    );
+  }
+
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/i18n.js
new file mode 100644
index 000000000..705ba5495
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/i18n.js
@@ -0,0 +1,13 @@
+const i18nConfig = {};
+
+let locale = 'en-US';
+
+const getLocale = () => locale;
+
+const setLocale = (target) => {
+  locale = target;
+};
+
+const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+
+export { getLocale, setLocale, i18n };
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index f506deab2..43c6ca91a 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -19,6 +19,8 @@ import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
 import __$$constants from '../../constants';
 
+import * as __$$i18n from '../../i18n';
+
 import __$$projectUtils from '../../utils';
 
 import './index.css';
@@ -45,6 +47,8 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
+  _i18n = this._createI18nDelegate();
+
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, {
     runtimeConfig: true,
@@ -171,12 +175,33 @@ class Home$$Page extends Component {
       get constants() {
         return __$$constants;
       },
+      get i18n() {
+        return self._i18n;
+      },
+      getLocale() {
+        return __$$i18n.getLocale();
+      },
+      setLocale(locale) {
+        __$$i18n.setLocale(locale);
+        self.forceUpdate();
+      },
       ...this._methods,
     };
 
     return context;
   }
 
+  _createI18nDelegate() {
+    return new Proxy(
+      {},
+      {
+        get(target, prop) {
+          return __$$i18n.i18n(prop);
+        },
+      },
+    );
+  }
+
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return {
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/i18n.js
new file mode 100644
index 000000000..705ba5495
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/i18n.js
@@ -0,0 +1,13 @@
+const i18nConfig = {};
+
+let locale = 'en-US';
+
+const getLocale = () => locale;
+
+const setLocale = (target) => {
+  locale = target;
+};
+
+const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+
+export { getLocale, setLocale, i18n };
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
index 1e104c597..c3f22edd7 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
@@ -17,6 +17,8 @@ import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
 import __$$constants from '../../constants';
 
+import * as __$$i18n from '../../i18n';
+
 import __$$projectUtils from '../../utils';
 
 import './index.css';
@@ -28,6 +30,8 @@ class Detail$$Page extends Component {
 
   _context = this._createContext();
 
+  _i18n = this._createI18nDelegate();
+
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -85,12 +89,33 @@ class Detail$$Page extends Component {
       get constants() {
         return __$$constants;
       },
+      get i18n() {
+        return self._i18n;
+      },
+      getLocale() {
+        return __$$i18n.getLocale();
+      },
+      setLocale(locale) {
+        __$$i18n.setLocale(locale);
+        self.forceUpdate();
+      },
       ...this._methods,
     };
 
     return context;
   }
 
+  _createI18nDelegate() {
+    return new Proxy(
+      {},
+      {
+        get(target, prop) {
+          return __$$i18n.i18n(prop);
+        },
+      },
+    );
+  }
+
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
index cb2bd3bab..dbd0e81ad 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
@@ -17,6 +17,8 @@ import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
 import __$$constants from '../../constants';
 
+import * as __$$i18n from '../../i18n';
+
 import __$$projectUtils from '../../utils';
 
 import './index.css';
@@ -28,6 +30,8 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
+  _i18n = this._createI18nDelegate();
+
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -85,12 +89,33 @@ class Home$$Page extends Component {
       get constants() {
         return __$$constants;
       },
+      get i18n() {
+        return self._i18n;
+      },
+      getLocale() {
+        return __$$i18n.getLocale();
+      },
+      setLocale(locale) {
+        __$$i18n.setLocale(locale);
+        self.forceUpdate();
+      },
       ...this._methods,
     };
 
     return context;
   }
 
+  _createI18nDelegate() {
+    return new Proxy(
+      {},
+      {
+        get(target, prop) {
+          return __$$i18n.i18n(prop);
+        },
+      },
+    );
+  }
+
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
index bd95523fb..c4e62dd2d 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
@@ -17,6 +17,8 @@ import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
 import __$$constants from '../../constants';
 
+import * as __$$i18n from '../../i18n';
+
 import __$$projectUtils from '../../utils';
 
 import './index.css';
@@ -28,6 +30,8 @@ class List$$Page extends Component {
 
   _context = this._createContext();
 
+  _i18n = this._createI18nDelegate();
+
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -88,12 +92,33 @@ class List$$Page extends Component {
       get constants() {
         return __$$constants;
       },
+      get i18n() {
+        return self._i18n;
+      },
+      getLocale() {
+        return __$$i18n.getLocale();
+      },
+      setLocale(locale) {
+        __$$i18n.setLocale(locale);
+        self.forceUpdate();
+      },
       ...this._methods,
     };
 
     return context;
   }
 
+  _createI18nDelegate() {
+    return new Proxy(
+      {},
+      {
+        get(target, prop) {
+          return __$$i18n.i18n(prop);
+        },
+      },
+    );
+  }
+
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/i18n.js
new file mode 100644
index 000000000..705ba5495
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/i18n.js
@@ -0,0 +1,13 @@
+const i18nConfig = {};
+
+let locale = 'en-US';
+
+const getLocale = () => locale;
+
+const setLocale = (target) => {
+  locale = target;
+};
+
+const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+
+export { getLocale, setLocale, i18n };
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
index 287c12ad2..0a93e8574 100644
--- a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
@@ -17,6 +17,8 @@ import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
 import __$$constants from '../../constants';
 
+import * as __$$i18n from '../../i18n';
+
 import __$$projectUtils from '../../utils';
 
 import './index.css';
@@ -28,6 +30,8 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
+  _i18n = this._createI18nDelegate();
+
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -82,12 +86,33 @@ class Home$$Page extends Component {
       get constants() {
         return __$$constants;
       },
+      get i18n() {
+        return self._i18n;
+      },
+      getLocale() {
+        return __$$i18n.getLocale();
+      },
+      setLocale(locale) {
+        __$$i18n.setLocale(locale);
+        self.forceUpdate();
+      },
       ...this._methods,
     };
 
     return context;
   }
 
+  _createI18nDelegate() {
+    return new Proxy(
+      {},
+      {
+        get(target, prop) {
+          return __$$i18n.i18n(prop);
+        },
+      },
+    );
+  }
+
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.editorconfig b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.editorconfig
new file mode 100644
index 000000000..5760be583
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.editorconfig
@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.eslintignore b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.eslintignore
new file mode 100644
index 000000000..3b437e614
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.eslintignore
@@ -0,0 +1,11 @@
+# 忽略目录
+build/
+tests/
+demo/
+
+# node 覆盖率文件
+coverage/
+
+# 忽略文件
+**/*-min.js
+**/*.min.js
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.eslintrc.js b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.eslintrc.js
new file mode 100644
index 000000000..e2a7c5b54
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['rax'],
+};
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.gitignore b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.gitignore
new file mode 100644
index 000000000..50a53dace
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.gitignore
@@ -0,0 +1,17 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+*~
+*.swp
+*.log
+
+.DS_Store
+.idea/
+.temp/
+
+build/
+dist/
+lib/
+coverage/
+node_modules/
+
+template.yml
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/README.md b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/README.md
new file mode 100644
index 000000000..6eff85d41
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/README.md
@@ -0,0 +1,15 @@
+# @ali/rax-component-demo
+
+## Getting Started
+
+### `npm run start`
+
+Runs the app in development mode.
+
+Open [http://localhost:9999](http://localhost:9999) to view it in the browser.
+
+The page will reload if you make edits.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/abc.json b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/abc.json
new file mode 100644
index 000000000..f9ee40f71
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/abc.json
@@ -0,0 +1,7 @@
+{
+  "type": "rax",
+  "builder": "@ali/builder-rax-v1",
+  "info": {
+    "raxVersion": "1.x"
+  }
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/build.json b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/build.json
new file mode 100644
index 000000000..f3e9b9323
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/build.json
@@ -0,0 +1,12 @@
+{
+  "inlineStyle": false,
+  "plugins": [
+    [
+      "build-plugin-rax-app",
+      {
+        "targets": ["web", "miniapp"]
+      }
+    ],
+    "@ali/build-plugin-rax-app-def"
+  ]
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json
new file mode 100644
index 000000000..a42398577
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@ali/rax-app-demo",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "build": "build-scripts build",
+    "start": "build-scripts start",
+    "lint": "eslint --ext .js --ext .jsx ./"
+  },
+  "dependencies": {
+    "@ali/lowcode-datasource-engine": "^0.1.0",
+    "universal-env": "^3.2.0",
+    "rax": "^1.1.0",
+    "rax-app": "^2.0.0",
+    "rax-document": "^0.1.0",
+    "rax-view": "^1.0.0",
+    "rax-text": "^1.0.0"
+  },
+  "devDependencies": {
+    "build-plugin-rax-app": "^5.0.0",
+    "@alib/build-scripts": "^0.1.0",
+    "@typescript-eslint/eslint-plugin": "^2.11.0",
+    "@typescript-eslint/parser": "^2.11.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.8.0",
+    "eslint-config-rax": "^0.1.0",
+    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-module": "^0.1.0",
+    "eslint-plugin-react": "^7.18.0",
+    "@ali/build-plugin-rax-app-def": "^1.0.0"
+  }
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/app.js b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/app.js
new file mode 100644
index 000000000..bc474c6e3
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/app.js
@@ -0,0 +1,6 @@
+import { runApp } from 'rax-app';
+import appConfig from './app.json';
+
+import './global.scss';
+
+runApp(appConfig);
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/app.json b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/app.json
new file mode 100644
index 000000000..63dec4d7d
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/app.json
@@ -0,0 +1,11 @@
+{
+  "routes": [
+    {
+      "path": "/",
+      "source": "pages/Home/index"
+    }
+  ],
+  "window": {
+    "title": "Rax App Demo"
+  }
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/constants.js b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/constants.js
new file mode 100644
index 000000000..ea766c9da
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/constants.js
@@ -0,0 +1,3 @@
+const __$$constants = {};
+
+export default __$$constants;
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/document/index.jsx b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/document/index.jsx
new file mode 100644
index 000000000..50569a9b6
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/document/index.jsx
@@ -0,0 +1,25 @@
+import { createElement } from 'rax';
+import { Root, Style, Script } from 'rax-document';
+
+function Document() {
+  return (
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"
+        />
+        <title>Rax App Demo</title>
+        <Style />
+      </head>
+      <body>
+        {/* root container */}
+        <Root />
+        <Script />
+      </body>
+    </html>
+  );
+}
+
+export default Document;
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/global.scss b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/global.scss
new file mode 100644
index 000000000..0d203c62a
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/global.scss
@@ -0,0 +1,3 @@
+body {
+  -webkit-font-smoothing: antialiased;
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/i18n.js
new file mode 100644
index 000000000..33f66ab5a
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/i18n.js
@@ -0,0 +1,20 @@
+const i18nConfig = {
+  'zh-CN': {
+    'hello-world': '你好，世界！',
+  },
+  'en-US': {
+    'hello-world': 'Hello world!',
+  },
+};
+
+let locale = 'en-US';
+
+const getLocale = () => locale;
+
+const setLocale = (target) => {
+  locale = target;
+};
+
+const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+
+export { getLocale, setLocale, i18n };
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.css b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx
new file mode 100644
index 000000000..fbfac0844
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx
@@ -0,0 +1,162 @@
+// 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
+// 例外：rax 框架的导出名和各种组件名除外。
+import { createElement, Component } from 'rax';
+import { withRouter as __$$withRouter } from 'rax-app';
+
+import Page from 'rax-view';
+
+import Text from 'rax-text';
+
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+
+import { isMiniApp as __$$isMiniApp } from 'universal-env';
+
+import __$$constants from '../../constants';
+
+import * as __$$i18n from '../../i18n';
+
+import __$$projectUtils from '../../utils';
+
+import './index.css';
+
+class Home$$Page extends Component {
+  _methods = this._defineMethods();
+
+  _context = this._createContext();
+
+  _i18n = this._createI18nDelegate();
+
+  _dataSourceConfig = this._defineDataSourceConfig();
+  _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
+
+  _utils = this._defineUtils();
+
+  componentDidMount() {
+    this._dataSourceEngine.reloadDataSource();
+  }
+
+  componentWillUnmount() {}
+
+  render() {
+    const __$$context = this._context;
+
+    return (
+      <Page>
+        <Text
+          onClick={function () {
+            __$$context.setLocale(__$$context.getLocale() === 'en-US' ? 'zh-CN' : 'en-US');
+          }}
+        >
+          {__$$context.i18n['hello-world']}
+        </Text>
+      </Page>
+    );
+  }
+
+  _createContext() {
+    const self = this;
+
+    const context = {
+      get state() {
+        return self.state;
+      },
+      setState(newState) {
+        self.setState(newState);
+      },
+      get dataSourceMap() {
+        return self._dataSourceEngine.dataSourceMap || {};
+      },
+      async reloadDataSource() {
+        await self._dataSourceEngine.reloadDataSource();
+      },
+      get utils() {
+        return self._utils;
+      },
+      get page() {
+        return context;
+      },
+      get component() {
+        return context;
+      },
+      get props() {
+        return self.props;
+      },
+      get constants() {
+        return __$$constants;
+      },
+      get i18n() {
+        return self._i18n;
+      },
+      getLocale() {
+        return __$$i18n.getLocale();
+      },
+      setLocale(locale) {
+        __$$i18n.setLocale(locale);
+        self.forceUpdate();
+      },
+      ...this._methods,
+    };
+
+    return context;
+  }
+
+  _createI18nDelegate() {
+    return new Proxy(
+      {},
+      {
+        get(target, prop) {
+          return __$$i18n.i18n(prop);
+        },
+      },
+    );
+  }
+
+  _defineDataSourceConfig() {
+    const __$$context = this._context;
+    return { list: [] };
+  }
+
+  _defineUtils() {
+    const utils = {
+      ...__$$projectUtils,
+    };
+
+    Object.entries(utils).forEach(([name, util]) => {
+      if (typeof util === 'function') {
+        utils[name] = util.bind(this._context);
+      }
+    });
+
+    return utils;
+  }
+
+  _defineMethods() {
+    const __$$methods = {};
+
+    // 为所有的方法绑定上下文
+    Object.entries(__$$methods).forEach(([methodName, method]) => {
+      if (typeof method === 'function') {
+        __$$methods[methodName] = (...args) => {
+          return method.apply(this._context, args);
+        };
+      }
+    });
+
+    return __$$methods;
+  }
+}
+
+export default __$$withRouter(Home$$Page);
+
+function __$$eval(expr) {
+  try {
+    return expr();
+  } catch (err) {
+    console.warn('Failed to evaluate: ', expr, err);
+  }
+}
+
+function __$$evalArray(expr) {
+  const res = __$$eval(expr);
+  return Array.isArray(res) ? res : [];
+}
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/utils.js b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/utils.js
new file mode 100644
index 000000000..ff8b4c563
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/utils.js
@@ -0,0 +1 @@
+export default {};
diff --git a/packages/code-generator/test-cases/rax-app/demo5/schema.json5 b/packages/code-generator/test-cases/rax-app/demo5/schema.json5
new file mode 100644
index 000000000..3c767dfd9
--- /dev/null
+++ b/packages/code-generator/test-cases/rax-app/demo5/schema.json5
@@ -0,0 +1,73 @@
+{
+  // 这是一个关于国际化的 schema 示例
+  // Schema 参见：https://yuque.antfin-inc.com/mo/spec/spec-materials#eNCJr
+  version: '1.0.0',
+  componentsMap: [
+    {
+      componentName: 'Page',
+      package: 'rax-view',
+      version: '^1.0.0',
+      destructuring: false,
+      exportName: 'Page',
+    },
+    {
+      componentName: 'Text',
+      package: 'rax-text',
+      version: '^1.0.0',
+      destructuring: false,
+      exportName: 'Text',
+    },
+  ],
+  componentsTree: [
+    {
+      componentName: 'Page',
+      props: {},
+      lifeCycles: {},
+      fileName: 'home',
+      meta: {
+        router: '/',
+      },
+      dataSource: {
+        list: [],
+      },
+      children: [
+        {
+          componentName: 'Text',
+          props: {
+            onClick: {
+              type: 'JSFunction',
+              value: "function () {\n  this.setLocale(this.getLocale() === 'en-US' ? 'zh-CN' : 'en-US');\n}",
+            },
+          },
+          children: [
+            {
+              type: 'JSExpression',
+              value: 'this.i18n["hello-world"]',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  i18n: {
+    'zh-CN': {
+      'hello-world': '你好，世界！',
+    },
+    'en-US': {
+      'hello-world': 'Hello world!',
+    },
+  },
+  config: {
+    sdkVersion: '1.0.3',
+    historyMode: 'hash',
+    targetRootID: 'root',
+  },
+  meta: {
+    name: 'Rax App Demo',
+    git_group: 'demo-group',
+    project_name: 'demo-project',
+    description: '这是一个示例应用',
+    spma: 'spmademo',
+    creator: '张三',
+  },
+}

From c7a10c035c4cb98fa7dece4a66e52de99ec65f1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Fri, 21 Aug 2020 13:30:11 +0800
Subject: [PATCH 67/80] =?UTF-8?q?fix:=20=F0=9F=90=9B=20=E7=BB=8F=E9=AA=8C?=
 =?UTF-8?q?=E8=AF=81=E5=8F=91=E7=8E=B0=E5=B0=8F=E7=A8=8B=E5=BA=8F=E9=87=8C?=
 =?UTF-8?q?=E9=9D=A2=E8=BF=98=E6=98=AF=E5=BE=97=E5=8C=85=E4=B8=8A=20eval?=
 =?UTF-8?q?=20=E5=90=A6=E5=88=99=20Rax=20=E6=A1=86=E6=9E=B6=E4=BC=9A?=
 =?UTF-8?q?=E8=AF=AF=E6=8A=8A=20context=20=E5=8F=91=E9=80=81=E5=88=B0?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E8=BF=9B=E7=A8=8B=E8=80=8C=E5=87=BA=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/src/plugins/component/rax/jsx.ts  | 8 --------
 .../demo2/expected/demo-project/src/pages/Home/index.jsx  | 6 +++---
 .../demo5/expected/demo-project/src/pages/Home/index.jsx  | 2 +-
 3 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/jsx.ts b/packages/code-generator/src/plugins/component/rax/jsx.ts
index c92f29f4f..2bf71b84a 100644
--- a/packages/code-generator/src/plugins/component/rax/jsx.ts
+++ b/packages/code-generator/src/plugins/component/rax/jsx.ts
@@ -194,14 +194,6 @@ function transformJsExpr(expr: string, handlers: CustomHandlerSet) {
     case 'FunctionExpression':
       return transformThis2Context(exprAst, handlers);
 
-    // 对于直接访问 this.xxx, this.utils.xxx, this.state.xxx 的也不用再包下
-    case 'MemberExpression':
-      if (isSimpleDirectlyAccessingThis(exprAst) || isSimpleDirectlyAccessingSafeProperties(exprAst)) {
-        return transformThis2Context(exprAst, handlers);
-      }
-
-      break;
-
     default:
       break;
   }
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index 43c6ca91a..3befd88d4 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -83,13 +83,13 @@ class Home$$Page extends Component {
         <View>
           <Text>=== User Info: ===</Text>
         </View>
-        {__$$context.state.user && (
+        {__$$eval(() => __$$context.state.user) && (
           <View style={{ flexDirection: 'row' }}>
             <Image
               source={{ uri: __$$eval(() => __$$context.state.user.avatar) }}
               style={{ width: '32px', height: '32px' }}
             />
-            <View onClick={__$$context.hello}>
+            <View onClick={__$$eval(() => __$$context.hello)}>
               <Text>{__$$eval(() => __$$context.state.user.name)}</Text>
               <Text>{__$$eval(() => __$$context.state.user.age)}岁</Text>
             </View>
@@ -132,7 +132,7 @@ class Home$$Page extends Component {
             });
           }}
         >
-          <Text>点击次数：{__$$context.state.clickCount}(点击加 1)</Text>
+          <Text>点击次数：{__$$eval(() => __$$context.state.clickCount)}(点击加 1)</Text>
         </View>
         <View>
           <Text>操作提示：</Text>
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx
index fbfac0844..40444b2f2 100644
--- a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx
@@ -47,7 +47,7 @@ class Home$$Page extends Component {
             __$$context.setLocale(__$$context.getLocale() === 'en-US' ? 'zh-CN' : 'en-US');
           }}
         >
-          {__$$context.i18n['hello-world']}
+          {__$$eval(() => __$$context.i18n['hello-world'])}
         </Text>
       </Page>
     );

From 9f129aa0ea592caea87e3d8ca5f61b31e5941cc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Fri, 21 Aug 2020 14:11:19 +0800
Subject: [PATCH 68/80] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Rax=20=E5=87=BA?=
 =?UTF-8?q?=E7=A0=81=E5=88=B0=E5=B0=8F=E7=A8=8B=E5=BA=8F,=20=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6=E5=A4=84=E7=90=86=E5=87=BD=E6=95=B0=E7=BB=91=E5=AE=9A?=
 =?UTF-8?q?=20JSExpression=20=E6=97=B6=E4=B9=9F=E4=B8=8D=E5=BA=94=E8=AF=A5?=
 =?UTF-8?q?=E5=8C=85=E8=A3=B9=E4=B8=80=E4=B8=AA=20eval,=20=E5=B0=8F?=
 =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E4=BC=9A=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/plugins/component/rax/jsx.ts          | 40 ++++++++-----------
 .../demo-project/src/pages/Home/index.jsx     |  2 +-
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/jsx.ts b/packages/code-generator/src/plugins/component/rax/jsx.ts
index 2bf71b84a..497282e39 100644
--- a/packages/code-generator/src/plugins/component/rax/jsx.ts
+++ b/packages/code-generator/src/plugins/component/rax/jsx.ts
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import changeCase from 'change-case';
-import { Expression, MemberExpression } from '@babel/types';
+import { Expression } from '@babel/types';
 import {
   BuilderComponentPlugin,
   BuilderComponentPluginFactory,
@@ -16,6 +16,7 @@ import {
   NodeSchema,
   NpmInfo,
   PIECE_TYPE,
+  isJSExpression,
 } from '../../../types';
 
 import { RAX_CHUNK_NAME } from './const';
@@ -202,26 +203,6 @@ function transformJsExpr(expr: string, handlers: CustomHandlerSet) {
   return `__$$eval(() => (${transformThis2Context(exprAst, handlers)}))`;
 }
 
-/** this.xxx */
-function isSimpleDirectlyAccessingThis(exprAst: MemberExpression) {
-  return !exprAst.computed && exprAst.object.type === 'ThisExpression';
-}
-
-/** this.state.xxx 和 this.utils.xxx 等安全的肯定应该存在的东东 */
-function isSimpleDirectlyAccessingSafeProperties(exprAst: MemberExpression): boolean {
-  const isPropertySimpleStraight =
-    !exprAst.computed || (exprAst.property.type !== 'PrivateName' && isSimpleStraightLiteral(exprAst.property));
-
-  return (
-    isPropertySimpleStraight &&
-    exprAst.object.type === 'MemberExpression' &&
-    exprAst.object.object.type === 'ThisExpression' &&
-    !exprAst.object.computed &&
-    exprAst.object.property.type === 'Identifier' &&
-    /^(state|utils|constants|i18n)$/.test(exprAst.object.property.name)
-  );
-}
-
 /** 判断是非是一些简单直接的字面值 */
 function isSimpleStraightLiteral(expr: Expression): boolean {
   switch (expr.type) {
@@ -284,12 +265,25 @@ function generateNodeAttrForRax(this: CustomHandlerSet, attrName: string, attrVa
       nodeAttr: undefined,
     });
   }
+  // else: onXxx 的都是事件处理函数需要特殊处理下
 
+  return generateEventHandlerAttrForRax(attrName, attrValue, this);
+}
+
+function generateEventHandlerAttrForRax(
+  attrName: string,
+  attrValue: CompositeValue,
+  handlers: CustomHandlerSet,
+): CodePiece[] {
   // 先出个码
-  const valueExpr = generateUnknownType(attrValue, this);
+  // -- 事件处理函数中 JSExpression 转成 JSFunction 来处理，避免当 JSExpression 处理的时候多包一层 eval 而导致 Rax 转码成小程序的时候出问题
+  const valueExpr = generateUnknownType(
+    isJSExpression(attrValue) ? { type: 'JSFunction', value: attrValue.value } : attrValue,
+    handlers,
+  );
 
   // 查询当前作用域下的变量
-  const currentScopeVariables = this.scopeBindings?.getAllBindings() || [];
+  const currentScopeVariables = handlers.scopeBindings?.getAllBindings() || [];
   if (currentScopeVariables.length <= 0) {
     return [
       {
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index 3befd88d4..f1dcacb95 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -89,7 +89,7 @@ class Home$$Page extends Component {
               source={{ uri: __$$eval(() => __$$context.state.user.avatar) }}
               style={{ width: '32px', height: '32px' }}
             />
-            <View onClick={__$$eval(() => __$$context.hello)}>
+            <View onClick={__$$context.hello}>
               <Text>{__$$eval(() => __$$context.state.user.name)}</Text>
               <Text>{__$$eval(() => __$$context.state.user.age)}岁</Text>
             </View>

From 8cdc0da8b30ff7db01a779c8a8fc018c658c0463 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Fri, 21 Aug 2020 14:15:16 +0800
Subject: [PATCH 69/80] =?UTF-8?q?chore:=20=F0=9F=A4=96=20recore=20?=
 =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E6=9C=89=E9=97=AE=E9=A2=98,=E6=95=85?=
 =?UTF-8?q?=E6=9A=82=E4=B8=94=E5=B1=8F=E8=94=BD=E6=8E=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/src/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/code-generator/src/index.ts b/packages/code-generator/src/index.ts
index e817d2277..65e08260b 100644
--- a/packages/code-generator/src/index.ts
+++ b/packages/code-generator/src/index.ts
@@ -7,7 +7,7 @@ import { createModuleBuilder } from './generator/ModuleBuilder';
 import { createDiskPublisher } from './publisher/disk';
 import { createZipPublisher } from './publisher/zip';
 import createIceJsProjectBuilder from './solutions/icejs';
-import createRecoreProjectBuilder from './solutions/recore';
+// import createRecoreProjectBuilder from './solutions/recore';
 import createRaxAppProjectBuilder from './solutions/rax-app';
 
 // 引入说明
@@ -49,7 +49,7 @@ export default {
   createModuleBuilder,
   solutions: {
     icejs: createIceJsProjectBuilder,
-    recore: createRecoreProjectBuilder,
+    // recore: createRecoreProjectBuilder,
     rax: createRaxAppProjectBuilder,
   },
   solutionParts: {

From 94bd602d091fb8ac4274e3918378d46664af33a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Fri, 21 Aug 2020 14:21:35 +0800
Subject: [PATCH 70/80] =?UTF-8?q?test:=20=F0=9F=92=8D=20=E4=B8=BA=20Rax=20?=
 =?UTF-8?q?=E5=87=BA=E7=A0=81=E7=9A=84=E5=90=84=E4=B8=AA=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E7=94=A8=E4=BE=8B=E7=9A=84=E6=B7=BB=E5=8A=A0=E6=B3=A8=E9=87=8A?=
 =?UTF-8?q?=E6=8F=8F=E8=BF=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/code-generator/test-cases/rax-app/demo1/schema.json5 | 1 +
 packages/code-generator/test-cases/rax-app/demo2/schema.json5 | 1 +
 packages/code-generator/test-cases/rax-app/demo3/schema.json5 | 1 +
 packages/code-generator/test-cases/rax-app/demo4/schema.json5 | 1 +
 4 files changed, 4 insertions(+)

diff --git a/packages/code-generator/test-cases/rax-app/demo1/schema.json5 b/packages/code-generator/test-cases/rax-app/demo1/schema.json5
index 1d405aee8..282f979e8 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo1/schema.json5
@@ -1,4 +1,5 @@
 {
+  // 本例是一个非常简单的 Hello world 页面
   // Schema 参见：https://yuque.antfin-inc.com/mo/spec/spec-materials#eNCJr
   version: '1.0.0',
   componentsMap: [
diff --git a/packages/code-generator/test-cases/rax-app/demo2/schema.json5 b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
index 336e37b29..9f7778e7f 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
@@ -1,4 +1,5 @@
 {
+  // 本例是一个比较复杂的，带有循环和条件渲染的，以及有各种事件处理函数的页面
   // Schema 参见：https://yuque.antfin-inc.com/mo/spec/spec-materials#eNCJr
   version: '1.0.0',
   componentsMap: [
diff --git a/packages/code-generator/test-cases/rax-app/demo3/schema.json5 b/packages/code-generator/test-cases/rax-app/demo3/schema.json5
index cb8ba2f85..5652b1db1 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo3/schema.json5
@@ -1,4 +1,5 @@
 {
+  // 本例是一个路由测试页面，里面有几个页面，相互之间有跳转关系的
   // Schema 参见：https://yuque.antfin-inc.com/mo/spec/spec-materials#eNCJr
   version: '1.0.0',
   componentsMap: [
diff --git a/packages/code-generator/test-cases/rax-app/demo4/schema.json5 b/packages/code-generator/test-cases/rax-app/demo4/schema.json5
index 08afc1463..efa43c840 100644
--- a/packages/code-generator/test-cases/rax-app/demo4/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo4/schema.json5
@@ -1,4 +1,5 @@
 {
+  // 本例是为了测试一下小程序的 runtime 模式
   version: '1.0.0',
   componentsMap: [
     {

From b9a562eeaba66adaefea22a95a44b04879f68f95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Sun, 30 Aug 2020 00:32:55 +0800
Subject: [PATCH 71/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E6=8C=89=20826=20?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90=E7=BB=93=E8=AE=BA=E8=B0=83=E6=95=B4=E5=87=BA?=
 =?UTF-8?q?=E7=A0=81=E5=92=8C=E6=95=B0=E6=8D=AE=E6=BA=90=E5=BC=95=E6=93=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/rax/containerInjectContext.ts   | 44 ++++---------------
 .../src/plugins/component/rax/jsx.ts          |  6 ++-
 .../framework/rax/plugins/packageJSON.ts      |  1 +
 .../src/plugins/project/i18n.ts               | 21 ++++++++-
 .../demo1/expected/demo-project/package.json  |  1 +
 .../demo1/expected/demo-project/src/i18n.js   | 22 +++++++++-
 .../demo-project/src/pages/Home/index.jsx     | 41 ++++++++---------
 .../demo2/expected/demo-project/package.json  |  1 +
 .../demo2/expected/demo-project/src/i18n.js   | 22 +++++++++-
 .../demo-project/src/pages/Home/index.jsx     | 41 ++++++++---------
 .../test-cases/rax-app/demo2/schema.json5     |  3 +-
 .../demo3/expected/demo-project/package.json  |  1 +
 .../demo3/expected/demo-project/src/i18n.js   | 22 +++++++++-
 .../demo-project/src/pages/Detail/index.jsx   | 41 ++++++++---------
 .../demo-project/src/pages/Home/index.jsx     | 41 ++++++++---------
 .../demo-project/src/pages/List/index.jsx     | 41 ++++++++---------
 .../demo4/expected/demo-project/package.json  |  1 +
 .../demo4/expected/demo-project/src/i18n.js   | 22 +++++++++-
 .../demo-project/src/pages/Home/index.jsx     | 41 ++++++++---------
 .../demo5/expected/demo-project/package.json  |  1 +
 .../demo5/expected/demo-project/src/i18n.js   | 22 +++++++++-
 .../demo-project/src/pages/Home/index.jsx     | 41 ++++++++---------
 .../src/core/DataSourceEngine.ts              | 23 +++-------
 .../src/core/RuntimeDataSource.ts             | 21 +++------
 .../datasource-engine/src/handlers/fetch.ts   |  2 +-
 .../datasource-engine/src/handlers/mtop.ts    |  9 ++--
 .../src/handlers/url-params.ts                | 10 ++---
 .../src/types/DataSourceResponse.ts           |  3 ++
 .../src/types/RequestHandler.ts               |  3 +-
 29 files changed, 316 insertions(+), 232 deletions(-)
 create mode 100644 packages/datasource-engine/src/types/DataSourceResponse.ts

diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
index 3c993a2cb..1ca20b1b5 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
@@ -59,11 +59,16 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
         _createContext() {
           const self = this;
 
+          // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+          self._latestState = self.state;
+
           const context = {
             get state() {
-              return self.state;
+              // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+              return self._latestState;
             },
             setState(newState) {
+              self._latestState = { ...self._latestState, ...newState };
               self.setState(newState);
             },
             get dataSourceMap() {
@@ -87,12 +92,9 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
             get constants() {
               return __$$constants;
             },
-            get i18n() {
-              return self._i18n;
-            },
-            getLocale() {
-              return __$$i18n.getLocale();
-            },
+            i18n: __$$i18n.i18n,
+            i18nFormat: __$$i18n.i18nFormat,
+            getLocale: __$$i18n.getLocale,
             setLocale(locale) {
               __$$i18n.setLocale(locale);
               self.forceUpdate();
@@ -106,34 +108,6 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd],
     });
 
-    next.chunks.push({
-      type: ChunkType.STRING,
-      fileType: cfg.fileType,
-      name: CLASS_DEFINE_CHUNK_NAME.InsVar,
-      content: `
-        _i18n = this._createI18nDelegate();
-      `,
-      linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
-    });
-
-    next.chunks.push({
-      type: ChunkType.STRING,
-      fileType: cfg.fileType,
-      name: CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod,
-      content: `
-        _createI18nDelegate() {
-          return new Proxy(
-            {},
-            {
-              get(target, prop) {
-                return __$$i18n.i18n(prop);
-              },
-            },
-          );
-        }
-      `,
-      linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd],
-    });
     return next;
   };
   return plugin;
diff --git a/packages/code-generator/src/plugins/component/rax/jsx.ts b/packages/code-generator/src/plugins/component/rax/jsx.ts
index 497282e39..e7fad7c27 100644
--- a/packages/code-generator/src/plugins/component/rax/jsx.ts
+++ b/packages/code-generator/src/plugins/component/rax/jsx.ts
@@ -126,7 +126,11 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       type: ChunkType.STRING,
       fileType: cfg.fileType,
       name: RAX_CHUNK_NAME.ClassRenderPre,
-      content: `const __$$context = this._context;`,
+      // TODO: setState, dataSourceMap, reloadDataSource, utils, i18n, i18nFormat, getLocale, setLocale 这些在 Rax 的编译模式下不能在视图中直接访问，需要转化成 this.xxx
+      content: `
+        const __$$context = this._context;
+        const { state, setState, dataSourceMap, reloadDataSource, utils, constants, i18n, i18nFormat, getLocale, setLocale } = __$$context;
+      `,
       linkAfter: [RAX_CHUNK_NAME.ClassRenderBegin],
     });
 
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
index 63a113d32..c47412f0e 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
@@ -35,6 +35,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       dependencies: {
         '@ali/lowcode-datasource-engine': '^0.1.0',
         'universal-env': '^3.2.0',
+        'intl-messageformat': '^9.3.6',
         rax: '^1.1.0',
         'rax-app': '^2.0.0',
         'rax-document': '^0.1.0',
diff --git a/packages/code-generator/src/plugins/project/i18n.ts b/packages/code-generator/src/plugins/project/i18n.ts
index c5dc0911d..df9a497f8 100644
--- a/packages/code-generator/src/plugins/project/i18n.ts
+++ b/packages/code-generator/src/plugins/project/i18n.ts
@@ -24,6 +24,8 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       fileType: FileType.JS,
       name: COMMON_CHUNK_NAME.FileMainContent,
       content: `
+        import IntlMessageFormat from 'intl-messageformat';
+
         const i18nConfig = ${i18nStr};
 
         let locale = 'en-US';
@@ -34,7 +36,23 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
           locale = target;
         };
 
-        const i18n = key => i18nConfig && i18nConfig[locale] && i18nConfig[locale][key] || '';
+        const i18nFormat = ({ id, defaultMessage }, variables) => {
+          const msg = i18nConfig && i18nConfig[locale] && i18nConfig[locale][id] || defaultMessage;
+          if (msg == null) {
+            console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
+            return \`\${id}\`;
+          }
+
+          if (!variables || !variables.length) {
+            return msg;
+          }
+
+          return new IntlMessageFormat(msg, locale).format(variables);
+        }
+
+        const i18n = id => {
+          return i18nFormat({ id });
+        };
       `,
       linkAfter: [
         COMMON_CHUNK_NAME.ExternalDepsImport,
@@ -54,6 +72,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
           getLocale,
           setLocale,
           i18n,
+          i18nFormat,
         };
       `,
       linkAfter: [
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
index a42398577..0d4d71bb6 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@ali/lowcode-datasource-engine": "^0.1.0",
     "universal-env": "^3.2.0",
+    "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
     "rax-app": "^2.0.0",
     "rax-document": "^0.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/i18n.js
index 705ba5495..8f0de31e0 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/i18n.js
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/i18n.js
@@ -1,3 +1,5 @@
+import IntlMessageFormat from 'intl-messageformat';
+
 const i18nConfig = {};
 
 let locale = 'en-US';
@@ -8,6 +10,22 @@ const setLocale = (target) => {
   locale = target;
 };
 
-const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+const i18nFormat = ({ id, defaultMessage }, variables) => {
+  const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
+  if (msg == null) {
+    console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
+    return `${id}`;
+  }
 
-export { getLocale, setLocale, i18n };
+  if (!variables || !variables.length) {
+    return msg;
+  }
+
+  return new IntlMessageFormat(msg, locale).format(variables);
+};
+
+const i18n = (id) => {
+  return i18nFormat({ id });
+};
+
+export { getLocale, setLocale, i18n, i18nFormat };
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
index e3e89c9b0..f7f5f00c2 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
@@ -24,8 +24,6 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -39,6 +37,18 @@ class Home$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <Page>
@@ -50,11 +60,16 @@ class Home$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -78,12 +93,9 @@ class Home$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -94,17 +106,6 @@ class Home$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
index 70f2530d9..0b4537b56 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@ali/lowcode-datasource-engine": "^0.1.0",
     "universal-env": "^3.2.0",
+    "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
     "rax-app": "^2.0.0",
     "rax-document": "^0.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/i18n.js
index 705ba5495..8f0de31e0 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/i18n.js
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/i18n.js
@@ -1,3 +1,5 @@
+import IntlMessageFormat from 'intl-messageformat';
+
 const i18nConfig = {};
 
 let locale = 'en-US';
@@ -8,6 +10,22 @@ const setLocale = (target) => {
   locale = target;
 };
 
-const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+const i18nFormat = ({ id, defaultMessage }, variables) => {
+  const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
+  if (msg == null) {
+    console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
+    return `${id}`;
+  }
 
-export { getLocale, setLocale, i18n };
+  if (!variables || !variables.length) {
+    return msg;
+  }
+
+  return new IntlMessageFormat(msg, locale).format(variables);
+};
+
+const i18n = (id) => {
+  return i18nFormat({ id });
+};
+
+export { getLocale, setLocale, i18n, i18nFormat };
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index f1dcacb95..66b6ce9a8 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -47,8 +47,6 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, {
     runtimeConfig: true,
@@ -74,6 +72,18 @@ class Home$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <View>
@@ -147,11 +157,16 @@ class Home$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -175,12 +190,9 @@ class Home$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -191,17 +203,6 @@ class Home$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return {
diff --git a/packages/code-generator/test-cases/rax-app/demo2/schema.json5 b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
index 9f7778e7f..a9f5813cd 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
@@ -348,10 +348,9 @@
         main: '/clone',
       },
     },
-    // 支持 TNPM
     {
       name: 'Toast',
-      type: 'tnpm',
+      type: 'npm',
       content: {
         package: 'universal-toast',
         version: '^1.2.0',
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json
index ab52a96fc..d9842a107 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@ali/lowcode-datasource-engine": "^0.1.0",
     "universal-env": "^3.2.0",
+    "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
     "rax-app": "^2.0.0",
     "rax-document": "^0.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/i18n.js
index 705ba5495..8f0de31e0 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/i18n.js
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/i18n.js
@@ -1,3 +1,5 @@
+import IntlMessageFormat from 'intl-messageformat';
+
 const i18nConfig = {};
 
 let locale = 'en-US';
@@ -8,6 +10,22 @@ const setLocale = (target) => {
   locale = target;
 };
 
-const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+const i18nFormat = ({ id, defaultMessage }, variables) => {
+  const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
+  if (msg == null) {
+    console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
+    return `${id}`;
+  }
 
-export { getLocale, setLocale, i18n };
+  if (!variables || !variables.length) {
+    return msg;
+  }
+
+  return new IntlMessageFormat(msg, locale).format(variables);
+};
+
+const i18n = (id) => {
+  return i18nFormat({ id });
+};
+
+export { getLocale, setLocale, i18n, i18nFormat };
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
index c3f22edd7..03a389ab0 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
@@ -30,8 +30,6 @@ class Detail$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -45,6 +43,18 @@ class Detail$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <View>
@@ -61,11 +71,16 @@ class Detail$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -89,12 +104,9 @@ class Detail$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -105,17 +117,6 @@ class Detail$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
index dbd0e81ad..8412a98f6 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
@@ -30,8 +30,6 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -45,6 +43,18 @@ class Home$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <View>
@@ -61,11 +71,16 @@ class Home$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -89,12 +104,9 @@ class Home$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -105,17 +117,6 @@ class Home$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
index c4e62dd2d..17a49c62f 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
@@ -30,8 +30,6 @@ class List$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -45,6 +43,18 @@ class List$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <View>
@@ -64,11 +74,16 @@ class List$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -92,12 +107,9 @@ class List$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -108,17 +120,6 @@ class List$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json
index c8b7cf47b..1510f3c4a 100644
--- a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@ali/lowcode-datasource-engine": "^0.1.0",
     "universal-env": "^3.2.0",
+    "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
     "rax-app": "^2.0.0",
     "rax-document": "^0.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/i18n.js
index 705ba5495..8f0de31e0 100644
--- a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/i18n.js
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/i18n.js
@@ -1,3 +1,5 @@
+import IntlMessageFormat from 'intl-messageformat';
+
 const i18nConfig = {};
 
 let locale = 'en-US';
@@ -8,6 +10,22 @@ const setLocale = (target) => {
   locale = target;
 };
 
-const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+const i18nFormat = ({ id, defaultMessage }, variables) => {
+  const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
+  if (msg == null) {
+    console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
+    return `${id}`;
+  }
 
-export { getLocale, setLocale, i18n };
+  if (!variables || !variables.length) {
+    return msg;
+  }
+
+  return new IntlMessageFormat(msg, locale).format(variables);
+};
+
+const i18n = (id) => {
+  return i18nFormat({ id });
+};
+
+export { getLocale, setLocale, i18n, i18nFormat };
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
index 0a93e8574..e5463339e 100644
--- a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
@@ -30,8 +30,6 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -45,6 +43,18 @@ class Home$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <View>
@@ -58,11 +68,16 @@ class Home$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -86,12 +101,9 @@ class Home$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -102,17 +114,6 @@ class Home$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json
index a42398577..0d4d71bb6 100644
--- a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@ali/lowcode-datasource-engine": "^0.1.0",
     "universal-env": "^3.2.0",
+    "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
     "rax-app": "^2.0.0",
     "rax-document": "^0.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/i18n.js
index 33f66ab5a..c3e7c955d 100644
--- a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/i18n.js
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/i18n.js
@@ -1,3 +1,5 @@
+import IntlMessageFormat from 'intl-messageformat';
+
 const i18nConfig = {
   'zh-CN': {
     'hello-world': '你好，世界！',
@@ -15,6 +17,22 @@ const setLocale = (target) => {
   locale = target;
 };
 
-const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+const i18nFormat = ({ id, defaultMessage }, variables) => {
+  const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
+  if (msg == null) {
+    console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
+    return `${id}`;
+  }
 
-export { getLocale, setLocale, i18n };
+  if (!variables || !variables.length) {
+    return msg;
+  }
+
+  return new IntlMessageFormat(msg, locale).format(variables);
+};
+
+const i18n = (id) => {
+  return i18nFormat({ id });
+};
+
+export { getLocale, setLocale, i18n, i18nFormat };
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx
index 40444b2f2..8a3656bfc 100644
--- a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx
@@ -24,8 +24,6 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -39,6 +37,18 @@ class Home$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <Page>
@@ -56,11 +66,16 @@ class Home$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -84,12 +99,9 @@ class Home$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -100,17 +112,6 @@ class Home$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/datasource-engine/src/core/DataSourceEngine.ts b/packages/datasource-engine/src/core/DataSourceEngine.ts
index 30052ee6c..1d15aeee1 100644
--- a/packages/datasource-engine/src/core/DataSourceEngine.ts
+++ b/packages/datasource-engine/src/core/DataSourceEngine.ts
@@ -17,8 +17,7 @@ export class DataSourceEngine implements IDataSourceEngine {
   ) {
     _dataSourceConfig.list?.forEach((ds) => {
       // 确保数据源都有处理器
-      const requestHandler =
-        ds.requestHandler || _options?.requestHandlersMap?.[ds.type];
+      const requestHandler = ds.requestHandler || _options?.requestHandlersMap?.[ds.type];
       if (!requestHandler) {
         throw new Error(`No request handler for "${ds.type}" data source`);
       }
@@ -51,12 +50,8 @@ export class DataSourceEngine implements IDataSourceEngine {
         }
       }
 
-      await sleep(0); // TODO: 如何优雅地解决 setState 的异步问题？
-
       // 然后是所有其他的
-      const remainDataSourceConfigList = allDataSourceConfigList.filter(
-        (x) => x.type !== 'urlParams',
-      );
+      const remainDataSourceConfigList = allDataSourceConfigList.filter((x) => x.type !== 'urlParams');
 
       // 先发起异步的
       const asyncLoadings: Array<Promise<unknown>> = [];
@@ -65,9 +60,7 @@ export class DataSourceEngine implements IDataSourceEngine {
           const options = getValue(ds.options);
           if (options && !options.isSync) {
             this._dataSourceMap[ds.id].setOptions(options);
-            asyncLoadings.push(
-              this._dataSourceMap[ds.id].load(options?.params).catch(() => {}),
-            );
+            asyncLoadings.push(this._dataSourceMap[ds.id].load(options?.params).catch(() => {}));
           }
         }
       }
@@ -106,18 +99,12 @@ export class DataSourceEngine implements IDataSourceEngine {
   }
 }
 
-export const create: IDataSourceEngineFactory['create'] = (
-  dataSourceConfig,
-  runtimeContext,
-  options,
-) => {
+export const create: IDataSourceEngineFactory['create'] = (dataSourceConfig, runtimeContext, options) => {
   return new DataSourceEngine(dataSourceConfig, runtimeContext, options);
 };
 
 function getValue<T>(valueOrValueGetter: T | (() => T)): T;
-function getValue<T extends boolean>(
-  valueOrValueGetter: T | (() => T),
-): T | undefined {
+function getValue<T extends boolean>(valueOrValueGetter: T | (() => T)): T | undefined {
   if (typeof valueOrValueGetter === 'function') {
     try {
       return valueOrValueGetter();
diff --git a/packages/datasource-engine/src/core/RuntimeDataSource.ts b/packages/datasource-engine/src/core/RuntimeDataSource.ts
index e9ea43e87..8f53b45f7 100644
--- a/packages/datasource-engine/src/core/RuntimeDataSource.ts
+++ b/packages/datasource-engine/src/core/RuntimeDataSource.ts
@@ -1,9 +1,5 @@
-import {
-  DataSourceOptions,
-  IRuntimeDataSource,
-  RequestHandler,
-  RuntimeDataSourceStatus,
-} from '../types';
+import { DataSourceOptions, IRuntimeDataSource, RequestHandler, RuntimeDataSourceStatus } from '../types';
+import { DataSourceResponse } from '../types/DataSourceResponse';
 
 export class RuntimeDataSource<
   TParams extends Record<string, unknown> = Record<string, unknown>,
@@ -19,13 +15,10 @@ export class RuntimeDataSource<
     private _id: string,
     private _type: string,
     private _initialOptions: DataSourceOptions<TParams>,
-    private _requestHandler: RequestHandler<
-      DataSourceOptions<TParams>,
-      TRequestResult
-    >,
+    private _requestHandler: RequestHandler<DataSourceOptions<TParams>, DataSourceResponse<TRequestResult>>,
     private _dataHandler:
       | ((
-          data: TRequestResult | undefined,
+          data: DataSourceResponse<TRequestResult> | undefined,
           error: unknown | undefined,
         ) => TResultData | Promise<TResultData>)
       | undefined,
@@ -79,11 +72,11 @@ export class RuntimeDataSource<
 
   private async _request(options: DataSourceOptions<TParams>) {
     try {
-      const reqResult = await this._requestHandler(options);
+      const response = await this._requestHandler(options);
 
       const data = this._dataHandler
-        ? await this._dataHandler(reqResult, undefined)
-        : ((reqResult as unknown) as TResultData);
+        ? await this._dataHandler(response, undefined)
+        : ((response.data as unknown) as TResultData);
 
       return data;
     } catch (err) {
diff --git a/packages/datasource-engine/src/handlers/fetch.ts b/packages/datasource-engine/src/handlers/fetch.ts
index 3db926c9f..d0f6d344b 100644
--- a/packages/datasource-engine/src/handlers/fetch.ts
+++ b/packages/datasource-engine/src/handlers/fetch.ts
@@ -18,7 +18,7 @@ const fetchHandler: RequestHandler = async ({
 
   const res = await request(reqOptions as RequestOptions);
 
-  return res.data;
+  return res;
 };
 
 export default fetchHandler;
diff --git a/packages/datasource-engine/src/handlers/mtop.ts b/packages/datasource-engine/src/handlers/mtop.ts
index 88ab8e01b..4894b9ad9 100644
--- a/packages/datasource-engine/src/handlers/mtop.ts
+++ b/packages/datasource-engine/src/handlers/mtop.ts
@@ -1,15 +1,18 @@
 import mtop from '@ali/universal-mtop';
 import { RequestHandler } from '../types';
 
-const mtopHandler: RequestHandler = async ({ data, params, ...options }) => {
+const mtopHandler: RequestHandler = async (options) => {
+  const { api, uri, data, params, type, method, ...otherOptions } = options;
   const reqOptions = {
-    ...options,
+    ...otherOptions,
+    api: api || uri,
     data: data || params,
+    type: type || method,
   };
 
   const res = await mtop(reqOptions);
 
-  return res.data;
+  return res;
 };
 
 export default mtopHandler;
diff --git a/packages/datasource-engine/src/handlers/url-params.ts b/packages/datasource-engine/src/handlers/url-params.ts
index d7fbfba3d..c5a37f4bd 100644
--- a/packages/datasource-engine/src/handlers/url-params.ts
+++ b/packages/datasource-engine/src/handlers/url-params.ts
@@ -1,14 +1,12 @@
 import qs from 'query-string';
 import { RequestHandler } from '../types';
 
-export default function urlParamsHandler({
-  search,
-}: {
-  search: string | Record<string, unknown>;
-}): RequestHandler {
+export default function urlParamsHandler({ search }: { search: string | Record<string, unknown> }): RequestHandler {
   const urlParams = typeof search === 'string' ? qs.parse(search) : search;
 
   return async () => {
-    return urlParams;
+    return {
+      data: urlParams,
+    };
   };
 }
diff --git a/packages/datasource-engine/src/types/DataSourceResponse.ts b/packages/datasource-engine/src/types/DataSourceResponse.ts
new file mode 100644
index 000000000..36bd45fff
--- /dev/null
+++ b/packages/datasource-engine/src/types/DataSourceResponse.ts
@@ -0,0 +1,3 @@
+export type DataSourceResponse<TData = unknown> = {
+  data: TData;
+};
diff --git a/packages/datasource-engine/src/types/RequestHandler.ts b/packages/datasource-engine/src/types/RequestHandler.ts
index aa9708585..c8a96f099 100644
--- a/packages/datasource-engine/src/types/RequestHandler.ts
+++ b/packages/datasource-engine/src/types/RequestHandler.ts
@@ -1,6 +1,7 @@
 import { DataSourceOptions } from './DataSourceOptions';
+import { DataSourceResponse } from './DataSourceResponse';
 
 export type RequestHandler<
   TOptions extends DataSourceOptions = DataSourceOptions,
-  TResult = unknown
+  TResult extends DataSourceResponse = DataSourceResponse
 > = (options: TOptions) => Promise<TResult>;

From 19fabc1760dac8e0259222c5eaa21a9f8108e6e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Sun, 30 Aug 2020 01:56:53 +0800
Subject: [PATCH 72/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E4=B8=8E=E5=9B=BD?=
 =?UTF-8?q?=E5=87=AF=E7=9A=84=E6=95=B0=E6=8D=AE=E6=BA=90=E4=BF=9D=E6=8C=81?=
 =?UTF-8?q?=E4=B8=80=E8=87=B4,=E5=B0=86=20urlParams=20=E6=89=80=E9=9C=80?=
 =?UTF-8?q?=E7=9A=84=20search=20=E5=8F=82=E6=95=B0=E7=9B=B4=E6=8E=A5?=
 =?UTF-8?q?=E4=BC=A0=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plugins/component/rax/containerInjectDataSourceEngine.ts    | 2 +-
 .../demo2/expected/demo-project/src/pages/Home/index.jsx        | 2 +-
 packages/datasource-engine/src/handlers/url-params.ts           | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
index f6cca564d..10b8a2e2c 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -46,7 +46,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
 
           requestHandlersMap[ds.type] = {
             type: 'JSExpression',
-            value: handlerName + (ds.type === 'urlParams' ? '({ search: this.props.location.search })' : ''),
+            value: handlerName + (ds.type === 'urlParams' ? '(this.props.location.search)' : ''),
           };
 
           next.chunks.push({
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index 66b6ce9a8..b3b0448e7 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -51,7 +51,7 @@ class Home$$Page extends Component {
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, {
     runtimeConfig: true,
     requestHandlersMap: {
-      urlParams: __$$urlParamsRequestHandler({ search: this.props.location.search }),
+      urlParams: __$$urlParamsRequestHandler(this.props.location.search),
       fetch: __$$fetchRequestHandler,
     },
   });
diff --git a/packages/datasource-engine/src/handlers/url-params.ts b/packages/datasource-engine/src/handlers/url-params.ts
index c5a37f4bd..67540c9f2 100644
--- a/packages/datasource-engine/src/handlers/url-params.ts
+++ b/packages/datasource-engine/src/handlers/url-params.ts
@@ -1,7 +1,7 @@
 import qs from 'query-string';
 import { RequestHandler } from '../types';
 
-export default function urlParamsHandler({ search }: { search: string | Record<string, unknown> }): RequestHandler {
+export default function urlParamsHandler(search: string | Record<string, unknown>): RequestHandler {
   const urlParams = typeof search === 'string' ? qs.parse(search) : search;
 
   return async () => {

From fea0946150ae03b4d9b3d796520f96c0b05eccb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Mon, 31 Aug 2020 10:21:18 +0800
Subject: [PATCH 73/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E4=B8=8E=E5=9B=BD?=
 =?UTF-8?q?=E5=87=AF=E7=9A=84=E6=95=B0=E6=8D=AE=E6=BA=90=E5=BC=95=E6=93=8E?=
 =?UTF-8?q?=E8=81=94=E8=B0=83,=E5=AF=B9=E9=BD=90=E5=8C=85=E5=90=8D?=
 =?UTF-8?q?=E5=92=8C=E5=AF=BC=E5=87=BA=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/rax/containerInjectDataSourceEngine.ts  | 11 +++++++----
 .../project/framework/rax/plugins/packageJSON.ts      |  7 ++++++-
 .../rax-app/demo1/expected/demo-project/package.json  |  6 +++++-
 .../expected/demo-project/src/pages/Home/index.jsx    |  2 +-
 .../rax-app/demo2/expected/demo-project/package.json  |  6 +++++-
 .../expected/demo-project/src/pages/Home/index.jsx    | 10 +++++-----
 .../rax-app/demo3/expected/demo-project/package.json  |  6 +++++-
 .../expected/demo-project/src/pages/Detail/index.jsx  |  2 +-
 .../expected/demo-project/src/pages/Home/index.jsx    |  2 +-
 .../expected/demo-project/src/pages/List/index.jsx    |  2 +-
 .../rax-app/demo4/expected/demo-project/package.json  |  6 +++++-
 .../expected/demo-project/src/pages/Home/index.jsx    |  2 +-
 .../rax-app/demo5/expected/demo-project/package.json  |  6 +++++-
 .../expected/demo-project/src/pages/Home/index.jsx    |  2 +-
 14 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
index 10b8a2e2c..50ae8d90e 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -42,19 +42,22 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
 
       dataSourceItems.forEach((ds) => {
         if (!(ds.type in requestHandlersMap) && ds.type !== 'custom') {
-          const handlerName = '__$$' + changeCase.camelCase(ds.type) + 'RequestHandler';
+          const handlerFactoryName = '__$$create' + changeCase.pascal(ds.type) + 'RequestHandler';
 
           requestHandlersMap[ds.type] = {
             type: 'JSExpression',
-            value: handlerName + (ds.type === 'urlParams' ? '(this.props.location.search)' : ''),
+            value: handlerFactoryName + (ds.type === 'urlParams' ? '(this.props.location.search)' : '()'),
           };
 
+          const handlerFactoryExportName = `create${changeCase.pascal(ds.type)}Handler`;
+          const handlerPkgName = `@ali/lowcode-datasource-${changeCase.kebab(ds.type)}-handler`;
+
           next.chunks.push({
             type: ChunkType.STRING,
             fileType: FileType.JSX,
             name: COMMON_CHUNK_NAME.ExternalDepsImport,
             content: `
-              import ${handlerName} from '@ali/lowcode-datasource-engine/handlers/${changeCase.kebabCase(ds.type)}';
+              import { ${handlerFactoryExportName} as ${handlerFactoryName} } from '${handlerPkgName}';
             `,
             linkAfter: [],
           });
@@ -69,7 +72,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       fileType: FileType.JSX,
       name: COMMON_CHUNK_NAME.ExternalDepsImport,
       content: `
-        import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+        import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine/runtime';
       `,
       linkAfter: [],
     });
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
index c47412f0e..7db3a0a38 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
@@ -33,7 +33,12 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
         lint: 'eslint --ext .js --ext .jsx ./',
       },
       dependencies: {
-        '@ali/lowcode-datasource-engine': '^0.1.0',
+        '@ali/lowcode-datasource-engine': '*',
+        // TODO: 如何动态获取下面这些依赖？
+        '@ali/lowcode-datasource-url-params-handler': '*',
+        '@ali/lowcode-datasource-fetch-handler': '*',
+        '@ali/lowcode-datasource-mtop-handler': '*',
+        '@ali/lowcode-datasource-mopen-handler': '*',
         'universal-env': '^3.2.0',
         'intl-messageformat': '^9.3.6',
         rax: '^1.1.0',
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
index 0d4d71bb6..33a086c66 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
@@ -8,7 +8,11 @@
     "lint": "eslint --ext .js --ext .jsx ./"
   },
   "dependencies": {
-    "@ali/lowcode-datasource-engine": "^0.1.0",
+    "@ali/lowcode-datasource-engine": "*",
+    "@ali/lowcode-datasource-url-params-handler": "*",
+    "@ali/lowcode-datasource-fetch-handler": "*",
+    "@ali/lowcode-datasource-mtop-handler": "*",
+    "@ali/lowcode-datasource-mopen-handler": "*",
     "universal-env": "^3.2.0",
     "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
index f7f5f00c2..cb5a4ddbe 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
@@ -7,7 +7,7 @@ import Page from 'rax-view';
 
 import Text from 'rax-text';
 
-import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine/runtime';
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
index 0b4537b56..aa61cda9c 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
@@ -8,7 +8,11 @@
     "lint": "eslint --ext .js --ext .jsx ./"
   },
   "dependencies": {
-    "@ali/lowcode-datasource-engine": "^0.1.0",
+    "@ali/lowcode-datasource-engine": "*",
+    "@ali/lowcode-datasource-url-params-handler": "*",
+    "@ali/lowcode-datasource-fetch-handler": "*",
+    "@ali/lowcode-datasource-mtop-handler": "*",
+    "@ali/lowcode-datasource-mopen-handler": "*",
     "universal-env": "^3.2.0",
     "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index b3b0448e7..5b78b28a0 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -9,11 +9,11 @@ import Text from 'rax-text';
 
 import Image from 'rax-image';
 
-import __$$urlParamsRequestHandler from '@ali/lowcode-datasource-engine/handlers/url-params';
+import { createUrlParamsHandler as __$$createUrlParamsRequestHandler } from '@ali/lowcode-datasource-url-params-handler';
 
-import __$$fetchRequestHandler from '@ali/lowcode-datasource-engine/handlers/fetch';
+import { createFetchHandler as __$$createFetchRequestHandler } from '@ali/lowcode-datasource-fetch-handler';
 
-import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine/runtime';
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
@@ -51,8 +51,8 @@ class Home$$Page extends Component {
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, {
     runtimeConfig: true,
     requestHandlersMap: {
-      urlParams: __$$urlParamsRequestHandler(this.props.location.search),
-      fetch: __$$fetchRequestHandler,
+      urlParams: __$$createUrlParamsRequestHandler(this.props.location.search),
+      fetch: __$$createFetchRequestHandler(),
     },
   });
 
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json
index d9842a107..f9451df10 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json
@@ -8,7 +8,11 @@
     "lint": "eslint --ext .js --ext .jsx ./"
   },
   "dependencies": {
-    "@ali/lowcode-datasource-engine": "^0.1.0",
+    "@ali/lowcode-datasource-engine": "*",
+    "@ali/lowcode-datasource-url-params-handler": "*",
+    "@ali/lowcode-datasource-fetch-handler": "*",
+    "@ali/lowcode-datasource-mtop-handler": "*",
+    "@ali/lowcode-datasource-mopen-handler": "*",
     "universal-env": "^3.2.0",
     "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
index 03a389ab0..91dbd2d75 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
@@ -11,7 +11,7 @@ import Link from 'rax-link';
 
 import Image from 'rax-image';
 
-import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine/runtime';
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
index 8412a98f6..d1d93e306 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
@@ -11,7 +11,7 @@ import Link from 'rax-link';
 
 import Image from 'rax-image';
 
-import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine/runtime';
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
index 17a49c62f..9c14cc6e5 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
@@ -11,7 +11,7 @@ import Link from 'rax-link';
 
 import Image from 'rax-image';
 
-import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine/runtime';
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json
index 1510f3c4a..c7a658230 100644
--- a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json
@@ -8,7 +8,11 @@
     "lint": "eslint --ext .js --ext .jsx ./"
   },
   "dependencies": {
-    "@ali/lowcode-datasource-engine": "^0.1.0",
+    "@ali/lowcode-datasource-engine": "*",
+    "@ali/lowcode-datasource-url-params-handler": "*",
+    "@ali/lowcode-datasource-fetch-handler": "*",
+    "@ali/lowcode-datasource-mtop-handler": "*",
+    "@ali/lowcode-datasource-mopen-handler": "*",
     "universal-env": "^3.2.0",
     "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
index e5463339e..6b550a1e3 100644
--- a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
@@ -11,7 +11,7 @@ import Text from 'rax-text';
 
 import Image from 'rax-image';
 
-import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine/runtime';
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json
index 0d4d71bb6..33a086c66 100644
--- a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json
@@ -8,7 +8,11 @@
     "lint": "eslint --ext .js --ext .jsx ./"
   },
   "dependencies": {
-    "@ali/lowcode-datasource-engine": "^0.1.0",
+    "@ali/lowcode-datasource-engine": "*",
+    "@ali/lowcode-datasource-url-params-handler": "*",
+    "@ali/lowcode-datasource-fetch-handler": "*",
+    "@ali/lowcode-datasource-mtop-handler": "*",
+    "@ali/lowcode-datasource-mopen-handler": "*",
     "universal-env": "^3.2.0",
     "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx
index 8a3656bfc..d7885feb3 100644
--- a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx
@@ -7,7 +7,7 @@ import Page from 'rax-view';
 
 import Text from 'rax-text';
 
-import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine/runtime';
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 

From 4baf0b4e00c434dce8eb766060bf87783396c901 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 9 Sep 2020 10:04:44 +0800
Subject: [PATCH 74/80] =?UTF-8?q?fix:=20=F0=9F=90=9B=20=E6=A0=B9=E6=8D=AE?=
 =?UTF-8?q?=E4=BD=8E=E4=BB=A3=E7=A0=81=E8=A7=84=E8=8C=83,=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=BA=90=E7=9A=84=E9=85=8D=E7=BD=AE=E4=B8=ADisInit?=
 =?UTF-8?q?=E5=92=8C=20type=20=E9=83=BD=E6=98=AF=E6=9C=89=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E5=80=BC=E7=9A=84,=E6=89=80=E4=BB=A5=E5=BA=94?=
 =?UTF-8?q?=E8=AF=A5=E6=98=AF=E5=8F=AF=E9=80=89=E7=9A=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/types/src/data-source.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/types/src/data-source.ts b/packages/types/src/data-source.ts
index e33912fd8..157e65648 100644
--- a/packages/types/src/data-source.ts
+++ b/packages/types/src/data-source.ts
@@ -6,8 +6,8 @@ import { CompositeValue, JSExpression, JSFunction, JSONObject } from './value-ty
  */
 export interface DataSourceConfig {
   id: string;
-  isInit: boolean | JSExpression;
-  type: string;
+  isInit?: boolean | JSExpression;
+  type?: string;
   requestHandler?: JSFunction;
   dataHandler?: JSFunction;
   options?: {

From ec8a191ef8590d038d4f5b57aab8c3f3e88c9e0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 9 Sep 2020 10:07:32 +0800
Subject: [PATCH 75/80] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=BA=90=E7=9A=84=E7=B1=BB=E5=9E=8B=E9=BB=98=E8=AE=A4=E6=98=AF?=
 =?UTF-8?q?=20fetch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rax/containerInjectDataSourceEngine.ts          | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
index 50ae8d90e..13ba44065 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -41,16 +41,17 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       const requestHandlersMap = {} as Record<string, JSExpression>;
 
       dataSourceItems.forEach((ds) => {
-        if (!(ds.type in requestHandlersMap) && ds.type !== 'custom') {
-          const handlerFactoryName = '__$$create' + changeCase.pascal(ds.type) + 'RequestHandler';
+        const dsType = ds.type || 'fetch';
+        if (!(dsType in requestHandlersMap) && dsType !== 'custom') {
+          const handlerFactoryName = '__$$create' + changeCase.pascal(dsType) + 'RequestHandler';
 
-          requestHandlersMap[ds.type] = {
+          requestHandlersMap[dsType] = {
             type: 'JSExpression',
-            value: handlerFactoryName + (ds.type === 'urlParams' ? '(this.props.location.search)' : '()'),
+            value: handlerFactoryName + (dsType === 'urlParams' ? '(this.props.location.search)' : '()'),
           };
 
-          const handlerFactoryExportName = `create${changeCase.pascal(ds.type)}Handler`;
-          const handlerPkgName = `@ali/lowcode-datasource-${changeCase.kebab(ds.type)}-handler`;
+          const handlerFactoryExportName = `create${changeCase.pascal(dsType)}Handler`;
+          const handlerPkgName = `@ali/lowcode-datasource-${changeCase.kebab(dsType)}-handler`;
 
           next.chunks.push({
             type: ChunkType.STRING,

From 96d0f45dfd3e7bc4a0feb2080762fb2af88c90f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 9 Sep 2020 10:10:59 +0800
Subject: [PATCH 76/80] =?UTF-8?q?chore:=20=F0=9F=A4=96=20fix=20lint=20erro?=
 =?UTF-8?q?r?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/plugins/component/rax/containerInjectDataSourceEngine.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
index 13ba44065..bf6d76f06 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/indent */
 import changeCase from 'change-case';
 import { CLASS_DEFINE_CHUNK_NAME, COMMON_CHUNK_NAME } from '../../../const/generator';
 

From ea9d71f81a062628f37829d2c8c022e1d90ca617 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=A5=E5=B8=8C?= <armslave.yy@alibaba-inc.com>
Date: Sat, 12 Sep 2020 02:30:18 +0800
Subject: [PATCH 77/80] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20support=20scop?=
 =?UTF-8?q?e=20info=20&=20use=20middleware=20style=20plugin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../code-generator/src/parser/SchemaParser.ts |   2 +-
 .../component/rax/containerInitState.ts       |   4 +-
 .../rax/containerInjectDataSourceEngine.ts    |  14 +-
 .../src/plugins/component/rax/jsx.ts          | 146 ++++-----
 .../component/react/containerDataSource.ts    |   5 +-
 .../component/react/containerInitState.ts     |   4 +-
 .../component/recore/pageDataSource.ts        |   7 +-
 .../plugins/component/recore/pageVmBody.ts    |  16 +-
 .../src/plugins/project/constants.ts          |   4 +-
 packages/code-generator/src/types/core.ts     |  71 ++--
 packages/code-generator/src/types/index.ts    |   1 +
 packages/code-generator/src/types/jsx.ts      |  29 ++
 packages/code-generator/src/utils/Scope.ts    |  27 ++
 .../code-generator/src/utils/aopHelper.ts     |  27 ++
 .../code-generator/src/utils/compositeType.ts | 103 ++++--
 packages/code-generator/src/utils/jsSlot.ts   |  28 +-
 .../code-generator/src/utils/nodeToJSX.ts     | 306 ++++++++++--------
 packages/code-generator/src/utils/schema.ts   |  78 ++++-
 18 files changed, 541 insertions(+), 331 deletions(-)
 create mode 100644 packages/code-generator/src/types/jsx.ts
 create mode 100644 packages/code-generator/src/utils/Scope.ts
 create mode 100644 packages/code-generator/src/utils/aopHelper.ts

diff --git a/packages/code-generator/src/parser/SchemaParser.ts b/packages/code-generator/src/parser/SchemaParser.ts
index 426479383..4f7781926 100644
--- a/packages/code-generator/src/parser/SchemaParser.ts
+++ b/packages/code-generator/src/parser/SchemaParser.ts
@@ -8,7 +8,7 @@ import { IPageMeta } from '../types';
 
 import { SUPPORT_SCHEMA_VERSION_LIST } from '../const';
 
-import { handleSubNodes } from '../utils/nodeToJSX';
+import { handleSubNodes } from '../utils/schema';
 import { uniqueArray } from '../utils/common';
 
 import {
diff --git a/packages/code-generator/src/plugins/component/rax/containerInitState.ts b/packages/code-generator/src/plugins/component/rax/containerInitState.ts
index c458d73d1..9974281bb 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInitState.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInitState.ts
@@ -1,6 +1,7 @@
 import { CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
 
 import { generateCompositeType } from '../../../utils/compositeType';
+import Scope from '../../../utils/Scope';
 
 import {
   BuilderComponentPlugin,
@@ -29,12 +30,13 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
     };
 
     const ir = next.ir as IContainerInfo;
+    const scope = Scope.createRootScope();
 
     if (ir.state) {
       const state = ir.state;
       const fields = Object.keys(state).map<string>((stateName) => {
         // TODO: 这里用什么 handlers?
-        const value = generateCompositeType(state[stateName], {});
+        const value = generateCompositeType(state[stateName], scope);
         return `${stateName}: ${value}`;
       });
 
diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
index 92285fbfd..3dea73068 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -2,6 +2,7 @@ import { CompositeValue, JSExpression, DataSourceConfig, isJSExpression, isJSFun
 import changeCase from 'change-case';
 
 import { CLASS_DEFINE_CHUNK_NAME, COMMON_CHUNK_NAME } from '../../../const/generator';
+import Scope from '../../../utils/Scope';
 
 import {
   BuilderComponentPlugin,
@@ -9,6 +10,7 @@ import {
   ChunkType,
   FileType,
   ICodeStruct,
+  IScope,
 } from '../../../types';
 
 import { generateCompositeType } from '../../../utils/compositeType';
@@ -31,6 +33,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       ...pre,
     };
 
+    const scope = Scope.createRootScope();
     const dataSourceConfig = isContainerSchema(pre.ir) ? pre.ir.dataSource : null;
     const dataSourceItems: DataSourceConfig[] = (dataSourceConfig && dataSourceConfig.list) || [];
     const dataSourceEngineOptions = { runtimeConfig: true };
@@ -80,7 +83,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
         _dataSourceEngine = __$$createDataSourceEngine(
           this._dataSourceConfig,
           this._context,
-          ${generateCompositeType(dataSourceEngineOptions)}
+          ${generateCompositeType(dataSourceEngineOptions, scope)}
         );`,
       linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
     });
@@ -108,11 +111,12 @@ _defineDataSourceConfig() {
       list: [
         ...dataSourceItems.map((item) => ({
           ...item,
-          isInit: wrapAsFunction(item.isInit),
-          options: wrapAsFunction(item.options),
+          isInit: wrapAsFunction(item.isInit, scope),
+          options: wrapAsFunction(item.options, scope),
         })),
       ],
     },
+    scope,
     {
       handlers: {
         function: (jsFunc) => parseExpressionConvertThis2Context(jsFunc.value, '__$$context'),
@@ -132,7 +136,7 @@ _defineDataSourceConfig() {
 
 export default pluginFactory;
 
-function wrapAsFunction(value: CompositeValue): CompositeValue {
+function wrapAsFunction(value: CompositeValue, scope: IScope): CompositeValue {
   if (isJSExpression(value) || isJSFunction(value)) {
     return {
       type: 'JSExpression',
@@ -142,6 +146,6 @@ function wrapAsFunction(value: CompositeValue): CompositeValue {
 
   return {
     type: 'JSExpression',
-    value: `function(){return((${generateCompositeType(value)}))}`,
+    value: `function(){return((${generateCompositeType(value, scope)}))}`,
   };
 }
diff --git a/packages/code-generator/src/plugins/component/rax/jsx.ts b/packages/code-generator/src/plugins/component/rax/jsx.ts
index 3204ebccc..33420aaae 100644
--- a/packages/code-generator/src/plugins/component/rax/jsx.ts
+++ b/packages/code-generator/src/plugins/component/rax/jsx.ts
@@ -14,16 +14,19 @@ import {
   IContainerInfo,
   PIECE_TYPE,
   HandlerSet,
+  IScope,
+  NodeGeneratorConfig,
+  NodePlugin,
+  AttrPlugin,
 } from '../../../types';
 
 import { RAX_CHUNK_NAME } from './const';
 import { COMMON_CHUNK_NAME } from '../../../const/generator';
 
 import { generateExpression } from '../../../utils/jsExpression';
-import { createNodeGenerator, generateReactCtrlLine, generateAttr } from '../../../utils/nodeToJSX';
+import { createNodeGenerator, generateConditionReactCtrl, generateReactExprInJS } from '../../../utils/nodeToJSX';
 import { generateCompositeType } from '../../../utils/compositeType';
-
-import { IScopeBindings, ScopeBindings } from '../../../utils/ScopeBindings';
+import Scope from '../../../utils/Scope';
 import {
   parseExpression,
   parseExpressionConvertThis2Context,
@@ -48,6 +51,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
     };
 
     const ir = next.ir as IContainerInfo;
+    const rootScope = Scope.createRootScope();
 
     // Rax 构建到小程序的时候，不能给组件起起别名，得直接引用，故这里将所有的别名替换掉
     // 先收集下所有的 alias 的映射
@@ -70,44 +74,24 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
     // 2. 小程序出码的时候，很容易出现 Uncaught TypeError: Cannot read property 'avatar' of undefined 这样的异常(如下图的 50 行) -- 因为若直接出码，Rax 构建到小程序的时候会立即计算所有在视图中用到的变量
     // 3. 通过 this.xxx 能拿到的东西太多了，而且自定义的 methods 可能会无意间破坏 Rax 框架或小程序框架在页面 this 上的东东
     const customHandlers: HandlerSet<string> = {
-      expression(this: CustomHandlerSet, input: JSExpression) {
-        return transformJsExpr(generateExpression(input), this);
+      expression(input: JSExpression, scope: IScope) {
+        return transformJsExpr(generateExpression(input), scope);
       },
-      function(input) {
-        return transformThis2Context(input.value || 'null', this);
+      function(input, scope: IScope) {
+        return transformThis2Context(input.value || 'null', scope);
       },
-      loopDataExpr(input) {
-        return typeof input === 'string' ? transformLoopExpr(input, this) : '';
-      },
-      tagName: mapComponentNameToAliasOrKeepIt,
-      nodeAttr: generateNodeAttrForRax,
     };
 
     // 创建代码生成器
     const commonNodeGenerator = createNodeGenerator({
       handlers: customHandlers,
-      plugins: [generateReactCtrlLine],
+      tagMapping: mapComponentNameToAliasOrKeepIt,
+      nodePlugins: [generateReactExprInJS, generateConditionReactCtrl, generateRaxLoopCtrl],
+      attrPlugins: [generateNodeAttrForRax],
     });
 
-    const raxCodeGenerator = (node: NodeSchema): string => {
-      if (node.loop) {
-        const loopItemName = node.loopArgs?.[0] || 'item';
-        const loopIndexName = node.loopArgs?.[1] || 'index';
-
-        return runInNewScope({
-          scopeHost: customHandlers,
-          newScopeOwnVariables: [loopItemName, loopIndexName],
-          run: () => commonNodeGenerator(node),
-        });
-      }
-
-      return commonNodeGenerator(node);
-    };
-
-    customHandlers.node = raxCodeGenerator;
-
     // 生成 JSX 代码
-    const jsxContent = raxCodeGenerator(ir);
+    const jsxContent = commonNodeGenerator(ir, rootScope);
 
     next.chunks.push({
       type: ChunkType.STRING,
@@ -164,11 +148,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
 
 export default pluginFactory;
 
-function transformLoopExpr(expr: string, handlers: CustomHandlerSet) {
-  return `__$$evalArray(() => (${transformThis2Context(expr, handlers)}))`;
-}
-
-function transformJsExpr(expr: string, handlers: CustomHandlerSet) {
+function transformJsExpr(expr: string, scope: IScope) {
   if (!expr) {
     return 'undefined';
   }
@@ -188,14 +168,14 @@ function transformJsExpr(expr: string, handlers: CustomHandlerSet) {
     // 对于直接写个函数的，则不用再包下，因为这样不会抛出异常的
     case 'ArrowFunctionExpression':
     case 'FunctionExpression':
-      return transformThis2Context(exprAst, handlers);
+      return transformThis2Context(exprAst, scope);
 
     default:
       break;
   }
 
   // 其他的都需要包一层
-  return `__$$eval(() => (${transformThis2Context(exprAst, handlers)}))`;
+  return `__$$eval(() => (${transformThis2Context(exprAst, scope)}))`;
 }
 
 /** 判断是非是一些简单直接的字面值 */
@@ -243,41 +223,79 @@ function isLiteralAtomicExpr(expr: string): boolean {
  * 将所有的 this.xxx 替换为 __$$context.xxx
  * @param expr
  */
-function transformThis2Context(expr: string | Expression, customHandlers: CustomHandlerSet): string {
+function transformThis2Context(expr: string | Expression, scope: IScope): string {
   // 下面这种字符串替换的方式虽然简单直接，但是对于复杂场景会误匹配，故后期改成了解析 AST 然后修改 AST 最后再重新生成代码的方式
   // return expr
   //   .replace(/\bthis\.item\./g, () => 'item.')
   //   .replace(/\bthis\.index\./g, () => 'index.')
   //   .replace(/\bthis\./g, () => '__$$context.');
 
-  return parseExpressionConvertThis2Context(expr, '__$$context', customHandlers.scopeBindings?.getAllBindings() || []);
+  return parseExpressionConvertThis2Context(expr, '__$$context', scope.bindings?.getAllBindings() || []);
 }
 
-function generateNodeAttrForRax(this: CustomHandlerSet, attrName: string, attrValue: CompositeValue): CodePiece[] {
-  if (!/^on/.test(attrName)) {
-    return generateAttr(attrName, attrValue, {
-      ...this,
-      nodeAttr: undefined,
+function generateRaxLoopCtrl(
+  nodeItem: NodeSchema,
+  scope: IScope,
+  config?: NodeGeneratorConfig,
+  next?: NodePlugin,
+): CodePiece[] {
+  if (nodeItem.loop) {
+    const loopItemName = nodeItem.loopArgs?.[0] || 'item';
+    const loopIndexName = nodeItem.loopArgs?.[1] || 'index';
+    const subScope = scope.createSubScope([loopItemName, loopIndexName]);
+    const pieces: CodePiece[] = next ? next(nodeItem, subScope, config) : [];
+
+    const loopDataExpr = `__$$evalArray(() => (${transformThis2Context(
+      generateCompositeType(nodeItem.loop, scope, { handlers: config?.handlers }),
+      scope,
+    )}))`;
+
+    pieces.unshift({
+      value: `${loopDataExpr}.map((${loopItemName}, ${loopIndexName}) => (`,
+      type: PIECE_TYPE.BEFORE,
     });
+
+    pieces.push({
+      value: '))',
+      type: PIECE_TYPE.AFTER,
+    });
+
+    return pieces;
+  }
+
+  return next ? next(nodeItem, scope, config) : [];
+}
+
+function generateNodeAttrForRax(
+  attrData: { attrName: string; attrValue: CompositeValue },
+  scope: IScope,
+  config?: NodeGeneratorConfig,
+  next?: AttrPlugin,
+): CodePiece[] {
+  if (!/^on/.test(attrData.attrName)) {
+    return next ? next(attrData, scope, config) : [];
   }
   // else: onXxx 的都是事件处理函数需要特殊处理下
-
-  return generateEventHandlerAttrForRax(attrName, attrValue, this);
+  return generateEventHandlerAttrForRax(attrData.attrName, attrData.attrValue, scope, config);
 }
 
 function generateEventHandlerAttrForRax(
   attrName: string,
   attrValue: CompositeValue,
-  handlers: CustomHandlerSet,
+  scope: IScope,
+  config?: NodeGeneratorConfig,
 ): CodePiece[] {
   // -- 事件处理函数中 JSExpression 转成 JSFunction 来处理，避免当 JSExpression 处理的时候多包一层 eval 而导致 Rax 转码成小程序的时候出问题
   const valueExpr = generateCompositeType(
     isJSExpression(attrValue) ? { type: 'JSFunction', value: attrValue.value } : attrValue,
-    handlers,
+    scope,
+    {
+      handlers: config?.handlers,
+    },
   );
 
   // 查询当前作用域下的变量
-  const currentScopeVariables = handlers.scopeBindings?.getAllBindings() || [];
+  const currentScopeVariables = scope.bindings?.getAllBindings() || [];
   if (currentScopeVariables.length <= 0) {
     return [
       {
@@ -322,31 +340,3 @@ function generateEventHandlerAttrForRax(
     },
   ];
 }
-
-function runInNewScope<T>({
-  scopeHost,
-  newScopeOwnVariables,
-  run,
-}: {
-  scopeHost: {
-    scopeBindings?: IScopeBindings;
-  };
-  newScopeOwnVariables: string[];
-  run: () => T;
-}): T {
-  const originalScopeBindings = scopeHost.scopeBindings;
-
-  try {
-    const newScope = new ScopeBindings(originalScopeBindings);
-
-    newScopeOwnVariables.forEach((varName) => {
-      newScope.addBinding(varName);
-    });
-
-    scopeHost.scopeBindings = newScope;
-
-    return run();
-  } finally {
-    scopeHost.scopeBindings = originalScopeBindings;
-  }
-}
diff --git a/packages/code-generator/src/plugins/component/react/containerDataSource.ts b/packages/code-generator/src/plugins/component/react/containerDataSource.ts
index b60cb9539..84accc118 100644
--- a/packages/code-generator/src/plugins/component/react/containerDataSource.ts
+++ b/packages/code-generator/src/plugins/component/react/containerDataSource.ts
@@ -1,6 +1,7 @@
 import { CLASS_DEFINE_CHUNK_NAME } from '../../../const/generator';
 
 import { generateCompositeType } from '../../../utils/compositeType';
+import Scope from '../../../utils/Scope';
 
 import {
   BuilderComponentPlugin,
@@ -28,10 +29,12 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
 
     const ir = next.ir as IContainerInfo;
 
+    const scope = Scope.createRootScope();
+
     if (ir.state) {
       const state = ir.state;
       const fields = Object.keys(state).map<string>((stateName) => {
-        const value = generateCompositeType(state[stateName]);
+        const value = generateCompositeType(state[stateName], scope);
         return `${stateName}: ${value},`;
       });
 
diff --git a/packages/code-generator/src/plugins/component/react/containerInitState.ts b/packages/code-generator/src/plugins/component/react/containerInitState.ts
index 9550244f1..503e7ed0f 100644
--- a/packages/code-generator/src/plugins/component/react/containerInitState.ts
+++ b/packages/code-generator/src/plugins/component/react/containerInitState.ts
@@ -1,6 +1,7 @@
 import { CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
 
 import { generateCompositeType } from '../../../utils/compositeType';
+import Scope from '../../../utils/Scope';
 
 import {
   BuilderComponentPlugin,
@@ -29,11 +30,12 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
     };
 
     const ir = next.ir as IContainerInfo;
+    const scope = Scope.createRootScope();
 
     if (ir.state) {
       const state = ir.state;
       const fields = Object.keys(state).map<string>((stateName) => {
-        const value = generateCompositeType(state[stateName]);
+        const value = generateCompositeType(state[stateName], scope);
         return `${stateName}: ${value},`;
       });
 
diff --git a/packages/code-generator/src/plugins/component/recore/pageDataSource.ts b/packages/code-generator/src/plugins/component/recore/pageDataSource.ts
index 898d1c99a..a071f65c9 100644
--- a/packages/code-generator/src/plugins/component/recore/pageDataSource.ts
+++ b/packages/code-generator/src/plugins/component/recore/pageDataSource.ts
@@ -1,6 +1,7 @@
 import { JSExpression, CompositeValue } from '@ali/lowcode-types';
 
 import { CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
+import Scope from '../../../utils/Scope';
 
 import {
   BuilderComponentPlugin,
@@ -27,6 +28,8 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
     };
 
     const ir = next.ir as IContainerInfo;
+    const scope = Scope.createRootScope();
+
     if (ir.dataSource) {
       const { dataSource } = ir;
       const { list, ...rest } = dataSource;
@@ -35,13 +38,13 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
 
       const extConfigs = Object.keys(rest).map((extConfigName) => {
         const value = (rest as Record<string, CompositeValue>)[extConfigName];
-        const valueStr = generateCompositeType(value);
+        const valueStr = generateCompositeType(value, scope);
         return `${extConfigName}: ${valueStr}`;
       });
 
       attrs = [...attrs, ...extConfigs];
 
-      const listProp = generateCompositeType((list as unknown) as CompositeValue, {
+      const listProp = generateCompositeType((list as unknown) as CompositeValue, scope, {
         handlers: {
           expression: packJsExpression,
         },
diff --git a/packages/code-generator/src/plugins/component/recore/pageVmBody.ts b/packages/code-generator/src/plugins/component/recore/pageVmBody.ts
index 494d30362..e30327372 100644
--- a/packages/code-generator/src/plugins/component/recore/pageVmBody.ts
+++ b/packages/code-generator/src/plugins/component/recore/pageVmBody.ts
@@ -6,7 +6,7 @@ import {
   ChunkType,
   ICodeStruct,
   IContainerInfo,
-  INodeGeneratorContext,
+  IScope,
   CodePiece,
   PIECE_TYPE,
 } from '../../../types';
@@ -14,8 +14,9 @@ import { COMMON_CHUNK_NAME } from '../../../const/generator';
 
 import { createNodeGenerator } from '../../../utils/nodeToJSX';
 import { generateCompositeType } from '../../../utils/compositeType';
+import Scope from '../../../utils/Scope';
 
-const generateGlobalProps = (ctx: INodeGeneratorContext, nodeItem: NodeSchema): CodePiece[] => {
+const generateGlobalProps = (nodeItem: NodeSchema): CodePiece[] => {
   return [
     {
       value: `{...globalProps.${nodeItem.componentName}}`,
@@ -24,11 +25,11 @@ const generateGlobalProps = (ctx: INodeGeneratorContext, nodeItem: NodeSchema):
   ];
 };
 
-const generateCtrlLine = (ctx: INodeGeneratorContext, nodeItem: NodeSchema): CodePiece[] => {
+const generateCtrlLine = (nodeItem: NodeSchema, scope: IScope): CodePiece[] => {
   const pieces: CodePiece[] = [];
 
   if (nodeItem.loop && nodeItem.loopArgs) {
-    const loopDataExp = generateCompositeType(nodeItem.loop);
+    const loopDataExp = generateCompositeType(nodeItem.loop, scope);
     pieces.push({
       type: PIECE_TYPE.ATTR,
       value: `x-for={${loopDataExp}}`,
@@ -41,7 +42,7 @@ const generateCtrlLine = (ctx: INodeGeneratorContext, nodeItem: NodeSchema): Cod
   }
 
   if (nodeItem.condition) {
-    const conditionExp = generateCompositeType(nodeItem.condition);
+    const conditionExp = generateCompositeType(nodeItem.condition, scope);
     pieces.push({
       type: PIECE_TYPE.ATTR,
       value: `x-if={${conditionExp}}`,
@@ -53,7 +54,7 @@ const generateCtrlLine = (ctx: INodeGeneratorContext, nodeItem: NodeSchema): Cod
 
 const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
   const generator = createNodeGenerator({
-    plugins: [generateGlobalProps, generateCtrlLine],
+    nodePlugins: [generateGlobalProps, generateCtrlLine],
   });
 
   const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
@@ -62,8 +63,9 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
     };
 
     const ir = next.ir as IContainerInfo;
+    const scope = Scope.createRootScope();
 
-    const vxContent = generator(ir);
+    const vxContent = generator(ir, scope);
 
     next.chunks.push({
       type: ChunkType.STRING,
diff --git a/packages/code-generator/src/plugins/project/constants.ts b/packages/code-generator/src/plugins/project/constants.ts
index 9916e0bcf..08870e507 100644
--- a/packages/code-generator/src/plugins/project/constants.ts
+++ b/packages/code-generator/src/plugins/project/constants.ts
@@ -8,6 +8,7 @@ import {
   ICodeStruct,
   IProjectInfo,
 } from '../../types';
+import Scope from '../../utils/Scope';
 
 const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
   const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
@@ -16,7 +17,8 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
     };
 
     const ir = next.ir as IProjectInfo;
-    const constantStr = generateCompositeType(ir.constants || {});
+    const scope = Scope.createRootScope();
+    const constantStr = generateCompositeType(ir.constants || {}, scope);
 
     next.chunks.push({
       type: ChunkType.STRING,
diff --git a/packages/code-generator/src/types/core.ts b/packages/code-generator/src/types/core.ts
index 93d069a9e..8666f507e 100644
--- a/packages/code-generator/src/types/core.ts
+++ b/packages/code-generator/src/types/core.ts
@@ -1,13 +1,11 @@
 import {
   JSONArray,
   JSONObject,
-  CompositeValue,
   CompositeArray,
   CompositeObject,
   ResultDir,
   ResultFile,
   NodeDataType,
-  NodeSchema,
   ProjectSchema,
   JSExpression,
   JSFunction,
@@ -15,6 +13,7 @@ import {
 } from '@ali/lowcode-types';
 
 import { IParseResult } from './intermediate';
+import { IScopeBindings } from '../utils/ScopeBindings';
 
 export enum FileType {
   CSS = 'css',
@@ -137,59 +136,35 @@ export interface IPluginOptions {
   fileDirDepth: number;
 }
 
-export enum PIECE_TYPE {
-  BEFORE = 'NodeCodePieceBefore',
-  TAG = 'NodeCodePieceTag',
-  ATTR = 'NodeCodePieceAttr',
-  CHILDREN = 'NodeCodePieceChildren',
-  AFTER = 'NodeCodePieceAfter',
-}
+export type BaseGenerator<I, T, C> = (input: I, scope: IScope, config?: C, next?: BaseGenerator<I, T, C>) => T;
+type CompositeTypeGenerator<I, T> =
+  | BaseGenerator<I, T, CompositeValueGeneratorOptions>
+  | Array<BaseGenerator<I, T, CompositeValueGeneratorOptions>>;
 
-export interface CodePiece {
-  value: string;
-  type: PIECE_TYPE;
-}
+export type NodeGenerator<T> = (nodeItem: NodeDataType, scope: IScope) => T;
 
 // FIXME: 在新的实现中，添加了第一参数 this: CustomHandlerSet 作为上下文。究其本质
 // scopeBindings?: IScopeBindings;
+// 这个组合只用来用来处理 CompositeValue 类型，不是这个类型的不要放在这里
 export interface HandlerSet<T> {
-  string?: (input: string) => T;
-  boolean?: (input: boolean) => T;
-  number?: (input: number) => T;
-  expression?: (input: JSExpression) => T;
-  function?: (input: JSFunction) => T;
-  slot?: (input: JSSlot) => T;
-  node?: (input: NodeSchema) => T;
-  array?: (input: JSONArray | CompositeArray) => T;
-  children?: (input: T[]) => T;
-  object?: (input: JSONObject | CompositeObject) => T;
-  common?: (input: unknown) => T;
-  tagName?: (input: string) => T;
-  loopDataExpr?: (input: string) => T;
-  conditionExpr?: (input: string) => T;
-  nodeAttrs?(node: NodeSchema): CodePiece[];
-  nodeAttr?(attrName: string, attrValue: CompositeValue): CodePiece[];
+  string?: CompositeTypeGenerator<string, T>;
+  boolean?: CompositeTypeGenerator<boolean, T>;
+  number?: CompositeTypeGenerator<number, T>;
+  expression?: CompositeTypeGenerator<JSExpression, T>;
+  function?: CompositeTypeGenerator<JSFunction, T>;
+  slot?: CompositeTypeGenerator<JSSlot, T>;
+  array?: CompositeTypeGenerator<JSONArray | CompositeArray, T>;
+  object?: CompositeTypeGenerator<JSONObject | CompositeObject, T>;
 }
 
-export type ExtGeneratorPlugin = (ctx: INodeGeneratorContext, nodeItem: NodeSchema) => CodePiece[];
-
-export type NodeGeneratorConfig = {
-  handlers?: HandlerSet<string>;
-  plugins?: ExtGeneratorPlugin[];
-};
-
-export type NodeGenerator = (nodeItem: NodeDataType) => string;
-
-export interface INodeGeneratorContext {
-  handlers: HandlerSet<string>;
-  plugins: ExtGeneratorPlugin[];
-  generator: NodeGenerator;
-}
-
-export type CompositeValueCustomHandler = (data: unknown) => string;
-
 export type CompositeValueGeneratorOptions = {
   handlers?: HandlerSet<string>;
-  containerHandler?: (value: string, isString: boolean, valStr: string) => string;
-  nodeGenerator?: NodeGenerator;
+  nodeGenerator?: NodeGenerator<string>;
 };
+
+export interface IScope {
+  // 作用域内定义
+  bindings?: IScopeBindings;
+  // TODO: 需要有上下文信息吗？ 描述什么内容
+  createSubScope: (ownIndentifiers: string[]) => IScope;
+}
diff --git a/packages/code-generator/src/types/index.ts b/packages/code-generator/src/types/index.ts
index c7ad3e521..92ca81924 100644
--- a/packages/code-generator/src/types/index.ts
+++ b/packages/code-generator/src/types/index.ts
@@ -3,3 +3,4 @@ export * from './deps';
 export * from './error';
 export * from './intermediate';
 export * from './publisher';
+export * from './jsx';
diff --git a/packages/code-generator/src/types/jsx.ts b/packages/code-generator/src/types/jsx.ts
new file mode 100644
index 000000000..6ec5c7fef
--- /dev/null
+++ b/packages/code-generator/src/types/jsx.ts
@@ -0,0 +1,29 @@
+import { NodeSchema, CompositeValue } from '@ali/lowcode-types';
+import { HandlerSet, BaseGenerator, NodeGenerator } from './core';
+
+export enum PIECE_TYPE {
+  BEFORE = 'NodeCodePieceBefore',
+  TAG = 'NodeCodePieceTag',
+  ATTR = 'NodeCodePieceAttr',
+  CHILDREN = 'NodeCodePieceChildren',
+  AFTER = 'NodeCodePieceAfter',
+}
+
+export interface CodePiece {
+  name?: string;
+  value: string;
+  type: PIECE_TYPE;
+}
+
+export type AttrData = { attrName: string; attrValue: CompositeValue };
+// 对 JSX 出码的理解，目前定制点包含 【包装】【标签名】【属性】
+export type AttrPlugin = BaseGenerator<AttrData, CodePiece[], NodeGeneratorConfig>;
+export type NodePlugin = BaseGenerator<NodeSchema, CodePiece[], NodeGeneratorConfig>;
+
+export type NodeGeneratorConfig = {
+  handlers?: HandlerSet<string>;
+  tagMapping?: (input: string) => string;
+  attrPlugins?: AttrPlugin[];
+  nodePlugins?: NodePlugin[];
+  self?: NodeGenerator<string>;
+};
diff --git a/packages/code-generator/src/utils/Scope.ts b/packages/code-generator/src/utils/Scope.ts
new file mode 100644
index 000000000..e8b7bf235
--- /dev/null
+++ b/packages/code-generator/src/utils/Scope.ts
@@ -0,0 +1,27 @@
+import { IScope } from '../types/core';
+import { IScopeBindings, ScopeBindings } from './ScopeBindings';
+
+class Scope implements IScope {
+  static createRootScope(): IScope {
+    return new Scope();
+  }
+
+  bindings?: IScopeBindings;
+
+  constructor() {
+    this.bindings = undefined;
+  }
+
+  createSubScope(ownIndentifiers: string[]): IScope {
+    const originalScopeBindings = this.bindings;
+    const newScopeBindings = new ScopeBindings(originalScopeBindings);
+    ownIndentifiers.forEach((identifier) => {
+      newScopeBindings.addBinding(identifier);
+    });
+    const newScope = new Scope();
+    newScope.bindings = newScopeBindings;
+    return newScope;
+  }
+}
+
+export default Scope;
diff --git a/packages/code-generator/src/utils/aopHelper.ts b/packages/code-generator/src/utils/aopHelper.ts
new file mode 100644
index 000000000..5c4478c3d
--- /dev/null
+++ b/packages/code-generator/src/utils/aopHelper.ts
@@ -0,0 +1,27 @@
+import { BaseGenerator, IScope } from '../types/core';
+
+export function executeFunctionStack<I, T, C>(
+  input: I,
+  scope: IScope,
+  funcs: BaseGenerator<I, T, C> | Array<BaseGenerator<I, T, C>>,
+  baseFunc: BaseGenerator<I, T, C>,
+  config?: C,
+): T {
+  const funcList: Array<BaseGenerator<I, T, C>> = [];
+  if (Array.isArray(funcs)) {
+    funcList.push(...funcs);
+  } else {
+    funcList.push(funcs);
+  }
+
+  let next: BaseGenerator<I, T, C> = baseFunc;
+  while (funcList.length > 0) {
+    const func = funcList.pop();
+    if (func) {
+      const warppedFunc = ((nextFunc) => (input: I, scope: IScope, cfg?: C) => func(input, scope, cfg, nextFunc))(next);
+      next = warppedFunc;
+    }
+  }
+
+  return next(input, scope, config);
+}
diff --git a/packages/code-generator/src/utils/compositeType.ts b/packages/code-generator/src/utils/compositeType.ts
index 8471e240f..01b953fc3 100644
--- a/packages/code-generator/src/utils/compositeType.ts
+++ b/packages/code-generator/src/utils/compositeType.ts
@@ -2,24 +2,27 @@ import {
   CompositeArray,
   CompositeValue,
   CompositeObject,
+  JSFunction,
   isJSExpression,
   isJSFunction,
   isJSSlot,
+  JSSlot,
 } from '@ali/lowcode-types';
 import _ from 'lodash';
 
-import { CompositeValueGeneratorOptions, CodeGeneratorError } from '../types';
+import { IScope, CompositeValueGeneratorOptions, CodeGeneratorError } from '../types';
 import { generateExpression, generateFunction } from './jsExpression';
 import { generateJsSlot } from './jsSlot';
 import { isValidIdentifier } from './validate';
 import { camelize } from './common';
+import { executeFunctionStack } from './aopHelper';
 
-function generateArray(value: CompositeArray, options: CompositeValueGeneratorOptions = {}): string {
-  const body = value.map((v) => generateUnknownType(v, options)).join(',');
+function generateArray(value: CompositeArray, scope: IScope, options: CompositeValueGeneratorOptions = {}): string {
+  const body = value.map((v) => generateUnknownType(v, scope, options)).join(',');
   return `[${body}]`;
 }
 
-function generateObject(value: CompositeObject, options: CompositeValueGeneratorOptions = {}): string {
+function generateObject(value: CompositeObject, scope: IScope, options: CompositeValueGeneratorOptions = {}): string {
   const body = Object.keys(value)
     .map((key) => {
       let propName = key;
@@ -39,7 +42,7 @@ function generateObject(value: CompositeObject, options: CompositeValueGenerator
           throw new CodeGeneratorError(`Propname: ${key} is not a valid identifier.`);
         }
       }
-      const v = generateUnknownType(value[key], options);
+      const v = generateUnknownType(value[key], scope, options);
       return `${propName}: ${v}`;
     })
     .join(',\n');
@@ -47,7 +50,34 @@ function generateObject(value: CompositeObject, options: CompositeValueGenerator
   return `{${body}}`;
 }
 
-function generateUnknownType(value: CompositeValue, options: CompositeValueGeneratorOptions = {}): string {
+function generateString(value: string): string {
+  return `'${value}'`;
+}
+
+function generateNumber(value: number): string {
+  return String(value);
+}
+
+function generateBool(value: boolean): string {
+  return value ? 'true' : 'false';
+}
+
+function genFunction(value: JSFunction): string {
+  return generateFunction(value, { isArrow: true });
+}
+
+function genJsSlot(value: JSSlot, scope: IScope, options: CompositeValueGeneratorOptions = {}) {
+  if (options.nodeGenerator) {
+    return generateJsSlot(value, scope, options.nodeGenerator);
+  }
+  return '';
+}
+
+function generateUnknownType(
+  value: CompositeValue,
+  scope: IScope,
+  options: CompositeValueGeneratorOptions = {},
+): string {
   if (_.isUndefined(value)) {
     return 'undefined';
   }
@@ -58,67 +88,70 @@ function generateUnknownType(value: CompositeValue, options: CompositeValueGener
 
   if (_.isArray(value)) {
     if (options.handlers?.array) {
-      return options.handlers.array(value);
+      return executeFunctionStack(value, scope, options.handlers.array, generateArray, options);
     }
-    return generateArray(value, options);
+    return generateArray(value, scope, options);
   }
 
   if (isJSExpression(value)) {
     if (options.handlers?.expression) {
-      return options.handlers.expression(value);
+      return executeFunctionStack(value, scope, options.handlers.expression, generateExpression, options);
     }
     return generateExpression(value);
   }
 
   if (isJSFunction(value)) {
     if (options.handlers?.function) {
-      return options.handlers.function(value);
+      return executeFunctionStack(value, scope, options.handlers.function, genFunction, options);
     }
-    return generateFunction(value, { isArrow: true });
+    return genFunction(value);
   }
 
   if (isJSSlot(value)) {
-    if (options.nodeGenerator) {
-      return generateJsSlot(value, options.nodeGenerator);
+    if (options.handlers?.slot) {
+      return executeFunctionStack(value, scope, options.handlers.slot, genJsSlot, options);
     }
-    throw new CodeGeneratorError("Can't find Node Generator");
+    return genJsSlot(value, scope, options);
   }
 
   if (_.isObject(value)) {
     if (options.handlers?.object) {
-      return options.handlers.object(value);
+      return executeFunctionStack(value, scope, options.handlers.object, generateObject, options);
     }
-    return generateObject(value as CompositeObject, options);
+    return generateObject(value as CompositeObject, scope, options);
   }
 
   if (_.isString(value)) {
     if (options.handlers?.string) {
-      return options.handlers.string(value);
+      return executeFunctionStack(value, scope, options.handlers.string, generateString, options);
     }
-    return `'${value}'`;
+    return generateString(value);
   }
 
-  if (_.isNumber(value) && options.handlers?.number) {
-    return options.handlers.number(value);
+  if (_.isNumber(value)) {
+    if (options.handlers?.number) {
+      return executeFunctionStack(value, scope, options.handlers.number, generateNumber, options);
+    }
+    return generateNumber(value);
   }
 
-  if (_.isBoolean(value) && options.handlers?.boolean) {
-    return options.handlers.boolean(value);
+  if (_.isBoolean(value)) {
+    if (options.handlers?.boolean) {
+      return executeFunctionStack(value, scope, options.handlers.boolean, generateBool, options);
+    }
+    return generateBool(value);
   }
 
-  return JSON.stringify(value);
+  throw new CodeGeneratorError('Meet unknown composite value type');
 }
 
-const defaultContainer = (v: string) => v;
-
-export function generateCompositeType(value: CompositeValue, options: CompositeValueGeneratorOptions = {}): string {
-  const isStringType = _.isString(value);
-  const result = generateUnknownType(value, options);
-  const handler = options.containerHandler || defaultContainer;
-
-  if (isStringType && result.length >= 2) {
-    return handler(result, true, result.substring(1, result.length - 1));
-  }
-
-  return handler(result, false, result);
+// 这一层曾经是对产出做最外层包装的，但其实包装逻辑不应该属于这一层
+// 这一层先不去掉，做冗余，方便后续重构
+export function generateCompositeType(
+  value: CompositeValue,
+  scope: IScope,
+  options: CompositeValueGeneratorOptions = {},
+): string {
+  const result = generateUnknownType(value, scope, options);
+  return result;
 }
diff --git a/packages/code-generator/src/utils/jsSlot.ts b/packages/code-generator/src/utils/jsSlot.ts
index 2cfb18436..b1d9c34bc 100644
--- a/packages/code-generator/src/utils/jsSlot.ts
+++ b/packages/code-generator/src/utils/jsSlot.ts
@@ -1,5 +1,5 @@
 import { JSSlot, isJSSlot } from '@ali/lowcode-types';
-import { CodeGeneratorError, NodeGenerator } from '../types';
+import { CodeGeneratorError, NodeGenerator, IScope } from '../types';
 
 function generateSingleLineComment(commentText: string): string {
   return (
@@ -12,23 +12,23 @@ function generateSingleLineComment(commentText: string): string {
   );
 }
 
-export function generateJsSlot(slot: any, generator: NodeGenerator): string {
+export function generateJsSlot(slot: any, scope: IScope, generator: NodeGenerator<string>): string {
   if (isJSSlot(slot)) {
     const { title, params, value } = slot as JSSlot;
-    if (!value) {
-      return 'null';
+    if (params) {
+      return [
+        title && generateSingleLineComment(title),
+        `(`,
+        ...(params || []),
+        `) => (`,
+        !value ? 'null' : generator(value, scope),
+        `)`,
+      ]
+        .filter(Boolean)
+        .join('');
     }
 
-    return [
-      title && generateSingleLineComment(title),
-      `(`,
-      ...(params || []),
-      `) => (`,
-      ...(!value ? ['null'] : !Array.isArray(value) ? [generator(value)] : value.map((node) => generator(node))),
-      `)`,
-    ]
-      .filter(Boolean)
-      .join('');
+    return !value ? 'null' : generator(value, scope);
   }
 
   throw new CodeGeneratorError('Not a JSSlot');
diff --git a/packages/code-generator/src/utils/nodeToJSX.ts b/packages/code-generator/src/utils/nodeToJSX.ts
index 3f454d076..a93ec64d2 100644
--- a/packages/code-generator/src/utils/nodeToJSX.ts
+++ b/packages/code-generator/src/utils/nodeToJSX.ts
@@ -1,113 +1,105 @@
 import _ from 'lodash';
-import {
-  JSSlot,
-  JSExpression,
-  NodeData,
-  NodeSchema,
-  isNodeSchema,
-  PropsMap,
-  isJSExpression,
-  isJSSlot,
-  isDOMText,
-  NodeDataType,
-} from '@ali/lowcode-types';
+import { NodeSchema, isNodeSchema, NodeDataType, CompositeValue } from '@ali/lowcode-types';
 
 import {
+  IScope,
   CodeGeneratorError,
   PIECE_TYPE,
   CodePiece,
-  HandlerSet,
   NodeGenerator,
-  INodeGeneratorContext,
   NodeGeneratorConfig,
+  NodePlugin,
+  AttrData,
 } from '../types';
 
 import { generateCompositeType } from './compositeType';
+import { executeFunctionStack } from './aopHelper';
 
-// tslint:disable-next-line: no-empty
-const noop = () => undefined;
-
-const handleChildrenDefaultOptions = {
-  rerun: false,
-};
-
-export function handleSubNodes<T>(
-  children: unknown,
-  handlers: HandlerSet<T>,
-  options?: {
-    rerun?: boolean;
-  },
-): T[] {
-  const opt = {
-    ...handleChildrenDefaultOptions,
-    ...(options || {}),
-  };
-
-  if (Array.isArray(children)) {
-    const list: NodeData[] = children as NodeData[];
-    return list.map((child) => handleSubNodes(child, handlers, opt)).reduce((p, c) => p.concat(c), []);
+function mergeNodeGeneratorConfig(cfg1: NodeGeneratorConfig, cfg2: NodeGeneratorConfig = {}): NodeGeneratorConfig {
+  const resCfg: NodeGeneratorConfig = {};
+  if (cfg1.handlers || cfg2.handlers) {
+    resCfg.handlers = {
+      ...(cfg1.handlers || {}),
+      ...(cfg2.handlers || {}),
+    };
   }
 
-  let result: T | undefined = undefined;
-  const childrenRes: T[] = [];
-  if (isDOMText(children)) {
-    const handler = handlers.string || handlers.common || noop;
-    result = handler(children as string);
-  } else if (isJSExpression(children)) {
-    const handler = handlers.expression || handlers.common || noop;
-    result = handler(children as JSExpression);
-  } else {
-    const handler = handlers.node || handlers.common || noop;
-    const child = children as NodeSchema;
-    result = handler(child);
-
-    if (opt.rerun && child.children) {
-      const childRes = handleSubNodes(child.children, handlers, opt);
-      childrenRes.push(...childRes);
-    }
-    if (child.props) {
-      // FIXME: currently only support PropsMap
-      const childProps = child.props as PropsMap;
-      Object.keys(childProps)
-        .filter((propName) => isJSSlot(childProps[propName]))
-        .forEach((propName) => {
-          const soltVals = (childProps[propName] as JSSlot).value;
-          const childRes = handleSubNodes(soltVals, handlers, opt);
-          childrenRes.push(...childRes);
-        });
-    }
+  if (cfg1.tagMapping || cfg2.tagMapping) {
+    resCfg.tagMapping = cfg2.tagMapping || cfg1.tagMapping;
   }
 
-  if (result !== undefined) {
-    childrenRes.unshift(result);
+  if (cfg1.attrPlugins || cfg2.attrPlugins) {
+    resCfg.attrPlugins = [];
+    resCfg.attrPlugins.push(...(cfg2.attrPlugins || []));
+    resCfg.attrPlugins.push(...(cfg1.attrPlugins || []));
   }
 
-  return childrenRes;
+  if (cfg1.nodePlugins || cfg2.nodePlugins) {
+    resCfg.nodePlugins = [];
+    resCfg.nodePlugins.push(...(cfg2.nodePlugins || []));
+    resCfg.nodePlugins.push(...(cfg1.nodePlugins || []));
+  }
+
+  return resCfg;
 }
 
-export function generateAttr(ctx: INodeGeneratorContext, attrName: string, attrValue: any): CodePiece[] {
-  if (ctx.handlers.nodeAttr) {
-    return ctx.handlers.nodeAttr(attrName, attrValue);
-  }
-
-  const valueStr = generateCompositeType(attrValue, {
-    containerHandler: (v, isStr, vStr) => (isStr ? `"${vStr}"` : `{${v}}`),
-    nodeGenerator: ctx.generator,
+function generateAttrValue(
+  attrData: { attrName: string; attrValue: CompositeValue },
+  scope: IScope,
+  config?: NodeGeneratorConfig,
+): CodePiece[] {
+  const valueStr = generateCompositeType(attrData.attrValue, scope, {
+    handlers: config?.handlers,
+    nodeGenerator: config?.self,
   });
-
   return [
     {
-      value: `${attrName}=${valueStr}`,
       type: PIECE_TYPE.ATTR,
+      name: attrData.attrName,
+      value: valueStr,
     },
   ];
 }
 
-export function generateAttrs(ctx: INodeGeneratorContext, nodeItem: NodeSchema): CodePiece[] {
-  if (ctx.handlers.nodeAttrs) {
-    return ctx.handlers.nodeAttrs(nodeItem);
+function generateAttr(
+  attrName: string,
+  attrValue: CompositeValue,
+  scope: IScope,
+  config?: NodeGeneratorConfig,
+): CodePiece[] {
+  let pieces: CodePiece[];
+  if (config?.attrPlugins) {
+    pieces = executeFunctionStack<AttrData, CodePiece[], NodeGeneratorConfig>(
+      { attrName, attrValue },
+      scope,
+      config.attrPlugins,
+      generateAttrValue,
+      config,
+    );
+  } else {
+    pieces = generateAttrValue({ attrName, attrValue }, scope, config);
   }
 
+  pieces = pieces.map((p) => {
+    // FIXME: 在经过 generateCompositeType 处理过之后，其实已经无法通过传入值的类型判断传出值是否为纯字面值字符串了（可能包裹了加工函数之类的）
+    //        因此这个处理最好的方式是对传出值做语法分析，判断以哪种模版产出 Attr 值
+    let newValue: string;
+    if (p.value && p.value[0] === "'" && p.value[p.value.length - 1] === "'") {
+      newValue = `"${p.value.substring(1, p.value.length - 1)}"`;
+    } else {
+      newValue = `{${p.value}}`;
+    }
+
+    return {
+      value: `${p.name}=${newValue}`,
+      type: PIECE_TYPE.ATTR,
+    };
+  });
+
+  return pieces;
+}
+
+function generateAttrs(nodeItem: NodeSchema, scope: IScope, config?: NodeGeneratorConfig): CodePiece[] {
   const { props } = nodeItem;
 
   let pieces: CodePiece[] = [];
@@ -115,12 +107,12 @@ export function generateAttrs(ctx: INodeGeneratorContext, nodeItem: NodeSchema):
   if (props) {
     if (!Array.isArray(props)) {
       Object.keys(props).forEach((propName: string) => {
-        pieces = pieces.concat(generateAttr(ctx, propName, props[propName]));
+        pieces = pieces.concat(generateAttr(propName, props[propName], scope, config));
       });
     } else {
       props.forEach((prop) => {
         if (prop.name && !prop.spread) {
-          pieces = pieces.concat(generateAttr(ctx, prop.name, prop.value));
+          pieces = pieces.concat(generateAttr(prop.name, prop.value, scope, config));
         }
 
         // TODO: 处理 spread 场景（<Xxx {...(something)}/>)
@@ -132,9 +124,9 @@ export function generateAttrs(ctx: INodeGeneratorContext, nodeItem: NodeSchema):
   return pieces;
 }
 
-export function generateBasicNode(ctx: INodeGeneratorContext, nodeItem: NodeSchema): CodePiece[] {
+function generateBasicNode(nodeItem: NodeSchema, scope: IScope, config?: NodeGeneratorConfig): CodePiece[] {
   const pieces: CodePiece[] = [];
-  const tagName = (ctx.handlers.tagName || _.identity)(nodeItem.componentName);
+  const tagName = (config?.tagMapping || _.identity)(nodeItem.componentName);
 
   pieces.push({
     value: tagName || '', // FIXME: type detection error
@@ -144,7 +136,14 @@ export function generateBasicNode(ctx: INodeGeneratorContext, nodeItem: NodeSche
   return pieces;
 }
 
-export function linkPieces(pieces: CodePiece[]): string {
+function generateSimpleNode(nodeItem: NodeSchema, scope: IScope, config?: NodeGeneratorConfig): CodePiece[] {
+  const basicParts = generateBasicNode(nodeItem, scope, config) || [];
+  const attrParts = generateAttrs(nodeItem, scope, config) || [];
+
+  return [...basicParts, ...attrParts];
+}
+
+function linkPieces(pieces: CodePiece[]): string {
   const tagsPieces = pieces.filter((p) => p.type === PIECE_TYPE.TAG);
   if (tagsPieces.length !== 1) {
     throw new CodeGeneratorError('One node only need one tag define');
@@ -180,17 +179,23 @@ export function linkPieces(pieces: CodePiece[]): string {
   return `${beforeParts}<${tagName}${attrsParts} />${afterParts}`;
 }
 
-export function generateNodeSchema(nodeItem: NodeSchema, ctx: INodeGeneratorContext): string {
-  let pieces: CodePiece[] = [];
+function generateNodeSchema(nodeItem: NodeSchema, scope: IScope, config?: NodeGeneratorConfig): string {
+  const pieces: CodePiece[] = [];
+  if (config?.nodePlugins) {
+    const res = executeFunctionStack<NodeSchema, CodePiece[], NodeGeneratorConfig>(
+      nodeItem,
+      scope,
+      config.nodePlugins,
+      generateSimpleNode,
+      config,
+    );
+    pieces.push(...res);
+  } else {
+    pieces.push(...generateSimpleNode(nodeItem, scope, config));
+  }
 
-  ctx.plugins.forEach((p) => {
-    pieces = pieces.concat(p(ctx, nodeItem));
-  });
-  pieces = pieces.concat(generateBasicNode(ctx, nodeItem));
-  pieces = pieces.concat(generateAttrs(ctx, nodeItem));
-
-  if (nodeItem.children) {
-    const childrenStr = ctx.generator(nodeItem.children);
+  if (nodeItem.children && config?.self) {
+    const childrenStr = config.self(nodeItem.children, scope);
 
     pieces.push({
       type: PIECE_TYPE.CHILDREN,
@@ -207,25 +212,28 @@ export function generateNodeSchema(nodeItem: NodeSchema, ctx: INodeGeneratorCont
 // export function createSubContext() {}
 
 /**
- * JSX 生成逻辑插件。在 React 代码模式下生成 loop 与 condition 相关的逻辑代码
- * @type ExtGeneratorPlugin
+ * JSX 生成逻辑插件。在 React 代码模式下生成 loop 相关的逻辑代码
+ * @type NodePlugin Extended
  *
  * @export
  * @param {NodeSchema} nodeItem 当前 UI 节点
  * @returns {CodePiece[]} 实现功能的相关代码片段
  */
-export function generateReactCtrlLine(ctx: INodeGeneratorContext, nodeItem: NodeSchema): CodePiece[] {
-  const pieces: CodePiece[] = [];
+export function generateReactLoopCtrl(
+  nodeItem: NodeSchema,
+  scope: IScope,
+  config?: NodeGeneratorConfig,
+  next?: NodePlugin,
+): CodePiece[] {
+  const pieces: CodePiece[] = next ? next(nodeItem, scope, config) : [];
 
   if (nodeItem.loop) {
     const loopItemName = nodeItem.loopArgs?.[0] || 'item';
     const loopIndexName = nodeItem.loopArgs?.[1] || 'index';
 
-    const rawLoopDataExpr = isJSExpression(nodeItem.loop)
-      ? `(${nodeItem.loop.value})`
-      : `(${JSON.stringify(nodeItem.loop)})`;
-
-    const loopDataExpr = ctx.handlers.loopDataExpr ? ctx.handlers.loopDataExpr(rawLoopDataExpr) : rawLoopDataExpr;
+    const loopDataExpr = generateCompositeType(nodeItem.loop, scope, {
+      handlers: config?.handlers,
+    });
 
     pieces.unshift({
       value: `${loopDataExpr}.map((${loopItemName}, ${loopIndexName}) => (`,
@@ -238,15 +246,32 @@ export function generateReactCtrlLine(ctx: INodeGeneratorContext, nodeItem: Node
     });
   }
 
+  return pieces;
+}
+
+/**
+ * JSX 生成逻辑插件。在 React 代码模式下生成 condition 相关的逻辑代码
+ * @type NodePlugin
+ *
+ * @export
+ * @param {NodeSchema} nodeItem 当前 UI 节点
+ * @returns {CodePiece[]} 实现功能的相关代码片段
+ */
+export function generateConditionReactCtrl(
+  nodeItem: NodeSchema,
+  scope: IScope,
+  config?: NodeGeneratorConfig,
+  next?: NodePlugin,
+): CodePiece[] {
+  const pieces: CodePiece[] = next ? next(nodeItem, scope, config) : [];
+
   if (nodeItem.condition) {
-    const value = generateCompositeType(nodeItem.condition, {
-      nodeGenerator: ctx.generator,
+    const value = generateCompositeType(nodeItem.condition, scope, {
+      handlers: config?.handlers,
     });
 
-    const conditionExpr = (ctx.handlers.conditionExpr || _.identity)(value);
-
     pieces.unshift({
-      value: `(${conditionExpr}) && (`,
+      value: `(${value}) && (`,
       type: PIECE_TYPE.BEFORE,
     });
 
@@ -256,6 +281,25 @@ export function generateReactCtrlLine(ctx: INodeGeneratorContext, nodeItem: Node
     });
   }
 
+  return pieces;
+}
+
+/**
+ * JSX 生成逻辑插件。在 React 代码模式下，如果 Node 生成结果是一个表达式，则对其进行 { Expression } 包装
+ * @type NodePlugin
+ *
+ * @export
+ * @param {NodeSchema} nodeItem 当前 UI 节点
+ * @returns {CodePiece[]} 实现功能的相关代码片段
+ */
+export function generateReactExprInJS(
+  nodeItem: NodeSchema,
+  scope: IScope,
+  config?: NodeGeneratorConfig,
+  next?: NodePlugin,
+): CodePiece[] {
+  const pieces: CodePiece[] = next ? next(nodeItem, scope, config) : [];
+
   if (nodeItem.condition || nodeItem.loop) {
     pieces.unshift({
       value: '{',
@@ -273,45 +317,35 @@ export function generateReactCtrlLine(ctx: INodeGeneratorContext, nodeItem: Node
 
 const handleChildren = (v: string[]) => v.join('');
 
-export function createNodeGenerator(cfg: NodeGeneratorConfig = {}): NodeGenerator {
-  let ctx: INodeGeneratorContext = { handlers: {}, plugins: [], generator: () => '' };
-
-  const generateNode = (nodeItem: NodeDataType): string => {
+export function createNodeGenerator(cfg: NodeGeneratorConfig = {}): NodeGenerator<string> {
+  const generateNode = (nodeItem: NodeDataType, scope: IScope): string => {
     if (_.isArray(nodeItem)) {
-      const resList = nodeItem.map((n) => generateNode(n));
-      return (cfg?.handlers?.children || handleChildren)(resList);
+      const resList = nodeItem.map((n) => generateNode(n, scope));
+      return handleChildren(resList);
     }
 
     if (isNodeSchema(nodeItem)) {
-      if (cfg?.handlers?.node) {
-        // TODO: children 的处理是否拆出来作为公用
-        return cfg.handlers.node(nodeItem);
-      }
-
-      return generateNodeSchema(nodeItem, ctx);
+      return generateNodeSchema(nodeItem, scope, {
+        ...cfg,
+        self: generateNode,
+      });
     }
 
-    return generateCompositeType(nodeItem, {
+    return generateCompositeType(nodeItem, scope, {
       handlers: cfg.handlers,
-      // FIXME: 这里和 children 类型的嵌套逻辑需要再思考一下
-      // containerHandler: (value: string, isString: boolean, valStr: string) => (isString ? valStr : value),
       nodeGenerator: generateNode,
     });
   };
 
-  ctx = {
-    handlers: cfg?.handlers || {},
-    plugins: cfg.plugins || [],
-    generator: generateNode,
-  };
-
   return generateNode;
 }
 
-// TODO: 需要一个 merge config 的方法。
-export function createReactNodeGenerator(cfg?: NodeGeneratorConfig): NodeGenerator {
-  return createNodeGenerator({
-    plugins: [generateReactCtrlLine],
-    ...cfg,
-  });
+const defaultReactGeneratorConfig: NodeGeneratorConfig = {
+  nodePlugins: [generateReactExprInJS, generateConditionReactCtrl, generateReactLoopCtrl],
+};
+
+export function createReactNodeGenerator(cfg?: NodeGeneratorConfig): NodeGenerator<string> {
+  const newCfg = mergeNodeGeneratorConfig(defaultReactGeneratorConfig, cfg);
+
+  return createNodeGenerator(newCfg);
 }
diff --git a/packages/code-generator/src/utils/schema.ts b/packages/code-generator/src/utils/schema.ts
index f741bb111..373de303e 100644
--- a/packages/code-generator/src/utils/schema.ts
+++ b/packages/code-generator/src/utils/schema.ts
@@ -1,4 +1,15 @@
-import { ContainerSchema, NpmInfo } from '@ali/lowcode-types';
+import {
+  JSSlot,
+  JSExpression,
+  NodeData,
+  NodeSchema,
+  PropsMap,
+  isJSExpression,
+  isJSSlot,
+  isDOMText,
+  ContainerSchema,
+  NpmInfo,
+} from '@ali/lowcode-types';
 
 export function isContainerSchema(x: any): x is ContainerSchema {
   return typeof x === 'object' && x && typeof x.componentName === 'string' && typeof x.fileName === 'string';
@@ -7,3 +18,68 @@ export function isContainerSchema(x: any): x is ContainerSchema {
 export function isNpmInfo(x: any): x is NpmInfo {
   return typeof x === 'object' && x && typeof x.package === 'string';
 }
+
+// tslint:disable-next-line: no-empty
+const noop = () => undefined;
+
+const handleChildrenDefaultOptions = {
+  rerun: false,
+};
+
+export function handleSubNodes<T>(
+  children: unknown,
+  handlers: {
+    string?: (i: string) => T;
+    expression?: (i: JSExpression) => T;
+    node?: (i: NodeSchema) => T;
+  },
+  options?: {
+    rerun?: boolean;
+  },
+): T[] {
+  const opt = {
+    ...handleChildrenDefaultOptions,
+    ...(options || {}),
+  };
+
+  if (Array.isArray(children)) {
+    const list: NodeData[] = children as NodeData[];
+    return list.map((child) => handleSubNodes(child, handlers, opt)).reduce((p, c) => p.concat(c), []);
+  }
+
+  let result: T | undefined = undefined;
+  const childrenRes: T[] = [];
+  if (isDOMText(children)) {
+    const handler = handlers.string || noop;
+    result = handler(children as string);
+  } else if (isJSExpression(children)) {
+    const handler = handlers.expression || noop;
+    result = handler(children as JSExpression);
+  } else {
+    const handler = handlers.node || noop;
+    const child = children as NodeSchema;
+    result = handler(child);
+
+    if (opt.rerun && child.children) {
+      const childRes = handleSubNodes(child.children, handlers, opt);
+      childrenRes.push(...childRes);
+    }
+    if (child.props) {
+      // FIXME: currently only support PropsMap
+      const childProps = child.props as PropsMap;
+      Object.keys(childProps)
+        .filter((propName) => isJSSlot(childProps[propName]))
+        .forEach((propName) => {
+          const soltVals = (childProps[propName] as JSSlot).value;
+          const childRes = handleSubNodes(soltVals, handlers, opt);
+          childrenRes.push(...childRes);
+        });
+    }
+  }
+
+  if (result !== undefined) {
+    childrenRes.unshift(result);
+  }
+
+  return childrenRes;
+}

From 97242c3c481ea46347df1d2c03e8dd92a9037b20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=A5=E5=B8=8C?= <armslave.yy@alibaba-inc.com>
Date: Sun, 13 Sep 2020 17:19:33 +0800
Subject: [PATCH 78/80] fix: miss scope

---
 packages/code-generator/package.json                     | 1 +
 .../code-generator/src/plugins/component/react/jsx.ts    | 9 +++++----
 .../plugins/project/framework/rax/plugins/buildConfig.ts | 1 +
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/code-generator/package.json b/packages/code-generator/package.json
index dca06c932..d8b05838a 100644
--- a/packages/code-generator/package.json
+++ b/packages/code-generator/package.json
@@ -13,6 +13,7 @@
   "scripts": {
     "start": "ava --watch",
     "build": "rimraf lib && build-scripts build --skip-demo",
+    "build:tsc": "rimraf lib && tsc",
     "demo": "node ./demo/demo.js",
     "test": "ava",
     "template": "node ./tools/createTemplate.js"
diff --git a/packages/code-generator/src/plugins/component/react/jsx.ts b/packages/code-generator/src/plugins/component/react/jsx.ts
index 942b2109f..c172d0375 100644
--- a/packages/code-generator/src/plugins/component/react/jsx.ts
+++ b/packages/code-generator/src/plugins/component/react/jsx.ts
@@ -5,11 +5,13 @@ import {
   FileType,
   ICodeStruct,
   IContainerInfo,
+  IScope,
 } from '../../../types';
 
 import { REACT_CHUNK_NAME } from './const';
 
 import { createReactNodeGenerator } from '../../../utils/nodeToJSX';
+import Scope from '../../../utils/Scope';
 
 type PluginConfig = {
   fileType?: string;
@@ -26,9 +28,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
   const { nodeTypeMapping } = cfg;
 
   const generator = createReactNodeGenerator({
-    handlers: {
-      tagName: (v) => nodeTypeMapping[v] || v,
-    },
+    tagMapping: (v) => nodeTypeMapping[v] || v,
   });
 
   const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
@@ -37,7 +37,8 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
     };
 
     const ir = next.ir as IContainerInfo;
-    const jsxContent = generator(ir);
+    const scope: IScope = Scope.createRootScope();
+    const jsxContent = generator(ir, scope);
 
     next.chunks.push({
       type: ChunkType.STRING,
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/buildConfig.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/buildConfig.ts
index d29f2b8cc..c746e6ccb 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/buildConfig.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/buildConfig.ts
@@ -16,6 +16,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
     };
 
     const ir = next.ir as IParseResult;
+    // TODO: miniAppBuildType 这个东西是不是不应该在 schema 里面，而是应该由 plugin 的构造参数传入
     const miniAppBuildType = ir.project?.config.miniAppBuildType;
 
     const buildCfg = {

From 584b4c25eed67dc8ffee41674792612105a5661b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=A5=E5=B8=8C?= <armslave.yy@alibaba-inc.com>
Date: Sun, 13 Sep 2020 17:38:08 +0800
Subject: [PATCH 79/80] fix: miniAppBuildType config(temp)

---
 packages/code-generator/src/parser/SchemaParser.ts              | 1 +
 .../src/plugins/project/framework/rax/plugins/buildConfig.ts    | 2 +-
 packages/code-generator/src/types/intermediate.ts               | 1 +
 packages/types/src/schema.ts                                    | 1 +
 4 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/code-generator/src/parser/SchemaParser.ts b/packages/code-generator/src/parser/SchemaParser.ts
index 4f7781926..284577d3b 100644
--- a/packages/code-generator/src/parser/SchemaParser.ts
+++ b/packages/code-generator/src/parser/SchemaParser.ts
@@ -226,6 +226,7 @@ class SchemaParser implements ISchemaParser {
       project: {
         css: schema.css,
         constants: schema.constants,
+        config: schema.config || {},
         i18n: schema.i18n,
         containersDeps,
         utilsDeps,
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/buildConfig.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/buildConfig.ts
index c746e6ccb..c424bad13 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/buildConfig.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/buildConfig.ts
@@ -17,7 +17,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
 
     const ir = next.ir as IParseResult;
     // TODO: miniAppBuildType 这个东西是不是不应该在 schema 里面，而是应该由 plugin 的构造参数传入
-    const miniAppBuildType = ir.project?.config.miniAppBuildType;
+    const miniAppBuildType = ir.project?.config?.miniAppBuildType;
 
     const buildCfg = {
       inlineStyle: false,
diff --git a/packages/code-generator/src/types/intermediate.ts b/packages/code-generator/src/types/intermediate.ts
index 11e6cc7b3..816d7ce05 100644
--- a/packages/code-generator/src/types/intermediate.ts
+++ b/packages/code-generator/src/types/intermediate.ts
@@ -42,6 +42,7 @@ export interface IProjectInfo {
     name?: string;
     title?: string;
   };
+  config?: Record<string, any>;
 }
 
 export interface IPageMeta {
diff --git a/packages/types/src/schema.ts b/packages/types/src/schema.ts
index d33fde4d5..d65bd5643 100644
--- a/packages/types/src/schema.ts
+++ b/packages/types/src/schema.ts
@@ -98,6 +98,7 @@ export interface ProjectSchema {
   constants?: JSONObject;
   css?: string;
   dataSource?: DataSource;
+  config?: Record<string, any>;
 }
 
 export function isNodeSchema(data: any): data is NodeSchema {

From 7f6fbe8939b779bbca591bf2437e89484af765cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=A5=E5=B8=8C?= <armslave.yy@alibaba-inc.com>
Date: Sun, 13 Sep 2020 23:19:11 +0800
Subject: [PATCH 80/80] fix: fix test result

---
 packages/code-generator/package.json          |  3 +-
 .../code-generator/src/parser/SchemaParser.ts |  9 +++-
 .../src/plugins/common/esmodule.ts            | 21 ++++------
 .../src/plugins/component/rax/jsx.ts          | 12 ++++--
 .../component/react/reactCommonDeps.ts        |  1 -
 .../framework/rax/plugins/packageJSON.ts      |  2 +-
 .../code-generator/src/types/intermediate.ts  |  5 +--
 .../code-generator/src/utils/nodeToJSX.ts     | 41 +++++++++++++------
 packages/types/src/schema.ts                  |  1 +
 scripts/setup.sh                              |  2 +-
 10 files changed, 58 insertions(+), 39 deletions(-)

diff --git a/packages/code-generator/package.json b/packages/code-generator/package.json
index d8b05838a..6fab8bc5c 100644
--- a/packages/code-generator/package.json
+++ b/packages/code-generator/package.json
@@ -12,7 +12,8 @@
   ],
   "scripts": {
     "start": "ava --watch",
-    "build": "rimraf lib && build-scripts build --skip-demo",
+    "build": "npm run build:tsc",
+    "build:bs": "rimraf lib && rimraf es && build-scripts build --skip-demo",
     "build:tsc": "rimraf lib && tsc",
     "demo": "node ./demo/demo.js",
     "test": "ava",
diff --git a/packages/code-generator/src/parser/SchemaParser.ts b/packages/code-generator/src/parser/SchemaParser.ts
index 284577d3b..f63db51a6 100644
--- a/packages/code-generator/src/parser/SchemaParser.ts
+++ b/packages/code-generator/src/parser/SchemaParser.ts
@@ -208,7 +208,13 @@ class SchemaParser implements ISchemaParser {
       const p = (con.deps || [])
         .map((dep) => (dep.dependencyType === DependencyType.External ? dep : null))
         .filter((dep) => dep !== null);
-      npms.push(...((p as unknown) as INpmPackage[]));
+      const npmInfos: INpmPackage[] = p
+        .filter((i) => Boolean(i))
+        .map((i) => ({
+          package: (i as IExternalDependency).package,
+          version: (i as IExternalDependency).version,
+        }));
+      npms.push(...npmInfos);
     });
     npms = uniqueArray<INpmPackage>(npms, (i) => i.package);
 
@@ -227,6 +233,7 @@ class SchemaParser implements ISchemaParser {
         css: schema.css,
         constants: schema.constants,
         config: schema.config || {},
+        meta: schema.meta || {},
         i18n: schema.i18n,
         containersDeps,
         utilsDeps,
diff --git a/packages/code-generator/src/plugins/common/esmodule.ts b/packages/code-generator/src/plugins/common/esmodule.ts
index 49b26439a..f196f1a69 100644
--- a/packages/code-generator/src/plugins/common/esmodule.ts
+++ b/packages/code-generator/src/plugins/common/esmodule.ts
@@ -28,22 +28,17 @@ function groupDepsByPack(deps: IDependency[]): Record<string, IDependency[]> {
   };
 
   // TODO: main 这个信息到底怎么用，是不是外部包不需要使用？
-  // deps.forEach(dep => {
-  //   if (dep.dependencyType === DependencyType.Internal) {
-  //     addDep(
-  //       `${(dep as IInternalDependency).moduleName}${`/${dep.main}` || ''}`,
-  //       dep,
-  //     );
-  //   } else {
-  //     addDep(`${(dep as IExternalDependency).package}${`/${dep.main}` || ''}`, dep);
-  //   }
-  // });
-
+  const depMainBlackList = ['lib', 'lib/index', 'es', 'es/index', 'main'];
   deps.forEach((dep) => {
     if (dep.dependencyType === DependencyType.Internal) {
-      addDep(`${(dep as IInternalDependency).moduleName}`, dep);
+      addDep(`${(dep as IInternalDependency).moduleName}${dep.main ? `/${dep.main}` : ''}`, dep);
     } else {
-      addDep(`${(dep as IExternalDependency).package}`, dep);
+      let depMain = '';
+      // TODO: 部分类型的 main 暂时认为没用
+      if (dep.main && depMainBlackList.indexOf(dep.main) < 0) {
+        depMain = dep.main;
+      }
+      addDep(`${(dep as IExternalDependency).package}${depMain ? `/${depMain}` : ''}`, dep);
     }
   });
 
diff --git a/packages/code-generator/src/plugins/component/rax/jsx.ts b/packages/code-generator/src/plugins/component/rax/jsx.ts
index fc0cb838c..7c352292d 100644
--- a/packages/code-generator/src/plugins/component/rax/jsx.ts
+++ b/packages/code-generator/src/plugins/component/rax/jsx.ts
@@ -304,7 +304,8 @@ function generateEventHandlerAttrForRax(
     return [
       {
         type: PIECE_TYPE.ATTR,
-        value: `${attrName}={${valueExpr}}`,
+        name: attrName,
+        value: valueExpr,
       },
     ];
   }
@@ -316,7 +317,8 @@ function generateEventHandlerAttrForRax(
     return [
       {
         type: PIECE_TYPE.ATTR,
-        value: `${attrName}={${valueExpr}}`,
+        name: attrName,
+        value: valueExpr,
       },
     ];
   }
@@ -336,11 +338,13 @@ function generateEventHandlerAttrForRax(
   return [
     ...referencedLocalVariables.map((localVar) => ({
       type: PIECE_TYPE.ATTR,
-      value: `data-${changeCase.snake(localVar)}={${localVar}}`,
+      name: `data-${changeCase.snake(localVar)}`,
+      value: localVar,
     })),
     {
       type: PIECE_TYPE.ATTR,
-      value: `${attrName}={${wrappedAttrValueExpr}}`,
+      name: attrName,
+      value: wrappedAttrValueExpr,
     },
   ];
 }
diff --git a/packages/code-generator/src/plugins/component/react/reactCommonDeps.ts b/packages/code-generator/src/plugins/component/react/reactCommonDeps.ts
index 2e75a5b7e..d1fcfeed3 100644
--- a/packages/code-generator/src/plugins/component/react/reactCommonDeps.ts
+++ b/packages/code-generator/src/plugins/component/react/reactCommonDeps.ts
@@ -6,7 +6,6 @@ import {
   ChunkType,
   FileType,
   ICodeStruct,
-  IContainerInfo,
 } from '../../../types';
 
 const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
index b834a2855..6ea209f39 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
@@ -85,7 +85,7 @@ function getNpmDependencies(project: IProjectInfo): NpmInfo[] {
   const npmDeps: NpmInfo[] = [];
   const npmNameToPkgMap = new Map<string, NpmInfo>();
 
-  const allDeps = [...(project.containersDeps || []), ...(project.utilsDeps || [])];
+  const allDeps = project.packages;
 
   allDeps.forEach((dep) => {
     if (!isNpmInfo(dep)) {
diff --git a/packages/code-generator/src/types/intermediate.ts b/packages/code-generator/src/types/intermediate.ts
index 816d7ce05..145a86994 100644
--- a/packages/code-generator/src/types/intermediate.ts
+++ b/packages/code-generator/src/types/intermediate.ts
@@ -38,10 +38,7 @@ export interface IProjectInfo {
   constants?: JSONObject;
   i18n?: I18nMap;
   packages: INpmPackage[];
-  meta?: {
-    name?: string;
-    title?: string;
-  };
+  meta?: { name?: string; title?: string } | Record<string, any>;
   config?: Record<string, any>;
 }
 
diff --git a/packages/code-generator/src/utils/nodeToJSX.ts b/packages/code-generator/src/utils/nodeToJSX.ts
index a93ec64d2..173dad20e 100644
--- a/packages/code-generator/src/utils/nodeToJSX.ts
+++ b/packages/code-generator/src/utils/nodeToJSX.ts
@@ -43,6 +43,14 @@ function mergeNodeGeneratorConfig(cfg1: NodeGeneratorConfig, cfg2: NodeGenerator
   return resCfg;
 }
 
+export function isPureString(v: string) {
+  return v[0] === "'" && v[v.length - 1] === "'";
+}
+
+export function getPureStringContent(v: string) {
+  return v.substring(1, v.length - 1);
+}
+
 function generateAttrValue(
   attrData: { attrName: string; attrValue: CompositeValue },
   scope: IScope,
@@ -84,8 +92,9 @@ function generateAttr(
     // FIXME: 在经过 generateCompositeType 处理过之后，其实已经无法通过传入值的类型判断传出值是否为纯字面值字符串了（可能包裹了加工函数之类的）
     //        因此这个处理最好的方式是对传出值做语法分析，判断以哪种模版产出 Attr 值
     let newValue: string;
-    if (p.value && p.value[0] === "'" && p.value[p.value.length - 1] === "'") {
-      newValue = `"${p.value.substring(1, p.value.length - 1)}"`;
+    if (p.value && isPureString(p.value)) {
+      const content = getPureStringContent(p.value);
+      newValue = `"${content}"`;
     } else {
       newValue = `{${p.value}}`;
     }
@@ -139,8 +148,17 @@ function generateBasicNode(nodeItem: NodeSchema, scope: IScope, config?: NodeGen
 function generateSimpleNode(nodeItem: NodeSchema, scope: IScope, config?: NodeGeneratorConfig): CodePiece[] {
   const basicParts = generateBasicNode(nodeItem, scope, config) || [];
   const attrParts = generateAttrs(nodeItem, scope, config) || [];
+  const childrenParts: CodePiece[] = [];
+  if (nodeItem.children && config?.self) {
+    const childrenStr = config.self(nodeItem.children, scope);
 
-  return [...basicParts, ...attrParts];
+    childrenParts.push({
+      type: PIECE_TYPE.CHILDREN,
+      value: childrenStr,
+    });
+  }
+
+  return [...basicParts, ...attrParts, ...childrenParts];
 }
 
 function linkPieces(pieces: CodePiece[]): string {
@@ -194,15 +212,6 @@ function generateNodeSchema(nodeItem: NodeSchema, scope: IScope, config?: NodeGe
     pieces.push(...generateSimpleNode(nodeItem, scope, config));
   }
 
-  if (nodeItem.children && config?.self) {
-    const childrenStr = config.self(nodeItem.children, scope);
-
-    pieces.push({
-      type: PIECE_TYPE.CHILDREN,
-      value: childrenStr,
-    });
-  }
-
   return linkPieces(pieces);
 }
 
@@ -331,10 +340,16 @@ export function createNodeGenerator(cfg: NodeGeneratorConfig = {}): NodeGenerato
       });
     }
 
-    return generateCompositeType(nodeItem, scope, {
+    const valueStr = generateCompositeType(nodeItem, scope, {
       handlers: cfg.handlers,
       nodeGenerator: generateNode,
     });
+
+    if (isPureString(valueStr)) {
+      return getPureStringContent(valueStr);
+    }
+
+    return `{${valueStr}}`;
   };
 
   return generateNode;
diff --git a/packages/types/src/schema.ts b/packages/types/src/schema.ts
index d65bd5643..d14b536b6 100644
--- a/packages/types/src/schema.ts
+++ b/packages/types/src/schema.ts
@@ -99,6 +99,7 @@ export interface ProjectSchema {
   css?: string;
   dataSource?: DataSource;
   config?: Record<string, any>;
+  meta?: Record<string, any>;
 }
 
 export function isNodeSchema(data: any): data is NodeSchema {
diff --git a/scripts/setup.sh b/scripts/setup.sh
index 7aced60d2..ee864f795 100755
--- a/scripts/setup.sh
+++ b/scripts/setup.sh
@@ -1,6 +1,6 @@
 #!/usr/bin/env bash
 
-tnpm i -g lerna @ali/tyarn
+tnpm i -g lerna @ali/tyarn tsc
 
 rm -rf node_modules package-lock.json yarn.lock
 lerna clean -y