Merge remote-tracking branch 'origin/release/0.9.18' into feat/rax-miniapp

2026-01-13 01:21:58 +00:00 · 2020-09-14 09:53:22 +08:00 · 2020-09-14 09:53:22 +08:00 · d4f8467abd
commit d4f8467abd
parent c44cb3846b efe1c7de23
783 changed files with 47324 additions and 45031 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -1,9 +1,9 @@
-# http://editorconfig.org
 root = true

 [*]
 indent_style = space
 indent_size = 2
+end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
--- a/.eslintignore
+++ b/.eslintignore
@ -1,7 +1,13 @@
-.idea/
-.vscode/
-build/
+# 忽略目录
+node_modules
+build
+dist
+es
+lib
 .*
 ~*
-node_modules

+# 忽略文件
+**/*.min.js
+**/*-min.js
+**/*.bundle.js
--- a/.eslintrc
+++ b/.eslintrc
@ -1,3 +0,0 @@
-{
-  "extends": "./node_modules/@ali/lowcode-config/.eslintrc"
-}
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,3 @@
+module.exports = {
+  extends: 'eslint-config-ali/typescript/react',
+};
--- a/.prettierignore
+++ b/.prettierignore
@ -1,4 +0,0 @@
-**/test/**/*.ts
-**/test/**/*.js
-**/template/**/*.template
-**/template/**/*.tpl
--- a/.prettierrc
+++ b/.prettierrc
@ -1,8 +0,0 @@
-{
-  "trailingComma": "all",
-  "tabWidth": 2,
-  "semi": true,
-  "singleQuote": true,
-  "printWidth": 120,
-  "arrowParens": "always"
-}
--- a/.prettierrc.js
+++ b/.prettierrc.js
@ -0,0 +1,7 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};
--- a/.stylelintignore
+++ b/.stylelintignore
@ -0,0 +1,9 @@
+# 忽略目录
+node_modules/
+build/
+dist/
+
+# 忽略文件
+**/*.min.css
+**/*-min.css
+**/*.bundle.css
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@ -0,0 +1,3 @@
+module.exports = {
+  extends: 'stylelint-config-ali',
+};
--- a/README.md
+++ b/README.md
@ -1,22 +1,20 @@
 ## Ali Lowcode Engine（阿里低代码引擎）

-[Lerna](https://github.com/lerna/lerna) + [TS](https://www.typescriptlang.org/)
-
 ## 开发

-#### 创建新包：
+#### 创建新包

 - `./scripts/create.sh <package-name>`

-#### 跑起来：
+#### 运行示例

 - `npm run setup`
 - `npm start`

-#### 开发提交：
+#### 开发提交

 - `git add <your-files>`
- `npm run commit` # 在根目录
+- `git commit -a "feat: xxx"`

 ## 发布

@ -24,7 +22,6 @@

 ## 注意

- Commit 动作尽量使用 `npm run commit`，其内部调用了 `git cz`，方便按语义化版本自动递增，以及自动生成 `CHANGELOG.md`
 - `packages` 工程里一些开发时公共依赖（比如：`typescript`、`ava` 等）会放到工程顶层
 - 工程里的 `.md`、`test/` 等文件修改不会产生新的发布
 - 当工程里存在多个 ts 文件的目录时，最终产生的文件会按文件夹形式放到 `lib` 下
--- a/commitlint.config.js
+++ b/commitlint.config.js
@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['ali'],
+};
--- a/package.json
+++ b/package.json
@ -12,40 +12,33 @@
  "scripts": {
    "build": "./scripts/build.sh",
    "clean": "rm -rf ./packages/*/lib ./packages/*/es ./packages/*/dist ./packages/*/build",
-    "commit": "git-cz",
+    "lint": "eslint --ext .ts,.tsx,.js,.jsx ./ --quiet",
+    "lint:fix": "eslint --ext .ts,.tsx,.js,.jsx ./ --quiet --fix",
    "pub": "lerna publish --force-publish --cd-version prepatch",
    "setup": "./scripts/setup.sh",
    "start": "./scripts/start.sh",
    "start:server": "./scripts/start-server.sh",
    "test": "lerna run test --stream",
-    "test:snapshot": "lerna run test:snapshot"
+    "test:snapshot": "lerna run test:snapshot",
+    "xima:fix": "xima fix",
+    "xima:scan": "xima scan"
  },
-  "lint-staged": {
-    "*.{tsx,ts}": [
-      "eslint --quiet",
-      "git add"
-    ]
-  },
-  "config": {
-    "commitizen": {
-      "path": "node_modules/cz-conventional-changelog"
+  "husky": {
+    "hooks": {
+      "commit-msg": "xima exec commitlint -E HUSKY_GIT_PARAMS"
    }
  },
+  "lint-staged": {
+    "**/*.{css,scss,less}": "xima exec stylelint",
+    "**/*.{js,jsx,ts,tsx}": "xima exec eslint"
+  },
  "devDependencies": {
-    "@ali/lowcode-config": "^2.0.5",
    "ava": "^1.0.1",
-    "babel-eslint": "^10.0.3",
-    "commitizen": "^3.0.5",
-    "cz-conventional-changelog": "^2.1.0",
-    "eslint": "^6.5.1",
-    "git-cz": "^4.3.1",
-    "husky": "^4.2.3",
    "lerna": "^2.11.0",
-    "lint-staged": "^8.1.0",
-    "prettier": "^1.15.3",
    "ts-node": "^7.0.1",
    "tslib": "^1.9.3",
-    "typescript": "^3.2.2"
+    "typescript": "^3.2.2",
+    "xima": "^0.2.15"
  },
  "engines": {
    "node": ">=10.0.0"
--- a/packages/code-generator/demo/demo.js
+++ b/packages/code-generator/demo/demo.js
@ -59,7 +59,7 @@ function main() {

  builder.generateProject(schemaJson).then((result) => {
    displayResultInConsole(result);
-    writeResultToDisk(result, 'output/lowcodeDemo').then((response) => console.log('Write to disk: ', JSON.stringify(response)),);
+    writeResultToDisk(result, 'output/lowcodeDemo').then((response) => console.log('Write to disk: ', JSON.stringify(response)));
    return result;
  });
 }
@ -160,7 +160,7 @@ function exportProject() {

  builder.generateProject(schemaJson).then((result) => {
    displayResultInConsole(result);
-    writeResultToDisk(result, 'output/lowcodeDemo').then((response) => console.log('Write to disk: ', JSON.stringify(response)),);
+    writeResultToDisk(result, 'output/lowcodeDemo').then((response) => console.log('Write to disk: ', JSON.stringify(response)));
    return result;
  });
 }
--- a/packages/code-generator/src/@types/ali__my-prettier/index.d.ts
+++ b/packages/code-generator/src/@types/ali__my-prettier/index.d.ts
@ -1,4 +1,4 @@
-/// <reference types="node" />
+// / <reference types="node" />

 declare module '@ali/my-prettier' {
  function format(text: string, type: string): string;
--- a/packages/code-generator/src/const/generator.ts
+++ b/packages/code-generator/src/const/generator.ts
@ -109,6 +109,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';
--- a/packages/code-generator/src/const/index.ts
+++ b/packages/code-generator/src/const/index.ts
@ -1,4 +1,4 @@
-export const NATIVE_ELE_PKG: string = 'native';
+export const NATIVE_ELE_PKG = 'native';

 export const CONTAINER_TYPE = {
  COMPONENT: 'Component',
--- a/packages/code-generator/src/generator/CodeBuilder.ts
+++ b/packages/code-generator/src/generator/CodeBuilder.ts
@ -58,7 +58,7 @@ export default class Builder implements ICodeBuilder {
      const { type, content, name } = unprocessedChunks[indexToRemove];
      const compiledContent = this.generateByType(type, content);
      if (compiledContent) {
-        resultingString.push(compiledContent + '\n');
+        resultingString.push(`${compiledContent }\n`);
      }

      unprocessedChunks.splice(indexToRemove, 1);
@ -95,8 +95,6 @@ export default class Builder implements ICodeBuilder {
  // remove invalid chunks (which did not end up being created) from the linkAfter fields
  // one use-case is when you want to remove the import plugin
  private cleanupInvalidChunks(linkAfter: string[], chunks: ICodeChunk[]) {
-    return linkAfter.filter(chunkName =>
-      chunks.some(chunk => chunk.name === chunkName),
-    );
+    return linkAfter.filter(chunkName => chunks.some(chunk => chunk.name === chunkName));
  }
 }
--- a/packages/code-generator/src/generator/ModuleBuilder.ts
+++ b/packages/code-generator/src/generator/ModuleBuilder.ts
@ -51,7 +51,7 @@ export function createModuleBuilder(

    if (options.postProcessors.length > 0) {
      files = files.map((file) => {
-        let content = file.content;
+        let { content } = file;
        const type = file.ext;
        options.postProcessors.forEach((processer) => {
          content = processer(content, type);
--- a/packages/code-generator/src/generator/ProjectBuilder.ts
+++ b/packages/code-generator/src/generator/ProjectBuilder.ts
@ -40,7 +40,9 @@ function getDirFromRoot(root: IResultDir, path: string[]): IResultDir {

 export class ProjectBuilder implements IProjectBuilder {
  private template: IProjectTemplate;
+
  private plugins: IProjectPlugins;
+
  private postProcessors: PostProcessor[];

  constructor({
--- a/packages/code-generator/src/model/ResultDir.ts
+++ b/packages/code-generator/src/model/ResultDir.ts
@ -2,7 +2,9 @@ import { CodeGeneratorError, IResultDir, IResultFile } from '../types';

 export default class ResultDir implements IResultDir {
  public name: string;
+
  public dirs: IResultDir[];
+
  public files: IResultFile[];

  constructor(name: string) {
--- a/packages/code-generator/src/model/ResultFile.ts
+++ b/packages/code-generator/src/model/ResultFile.ts
@ -2,10 +2,12 @@ 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 = '') {
+  constructor(name: string, ext = 'jsx', content = '') {
    this.name = name;
    this.ext = ext;
    this.content = content;
--- a/packages/code-generator/src/parser/SchemaParser.ts
+++ b/packages/code-generator/src/parser/SchemaParser.ts
@ -95,7 +95,7 @@ class SchemaParser implements ISchemaParser {
        });
      }
    } else {
-      throw new CodeGeneratorError(`Can't find anything to generate.`);
+      throw new CodeGeneratorError('Can\'t find anything to generate.');
    }

    // 建立所有容器的内部依赖索引
--- a/packages/code-generator/src/plugins/common/requireUtils.ts
+++ b/packages/code-generator/src/plugins/common/requireUtils.ts
@ -19,7 +19,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
      type: ChunkType.STRING,
      fileType: FileType.JSX,
      name: COMMON_CHUNK_NAME.InternalDepsImport,
-      content: `import * from 'react';`,
+      content: 'import * from \'react\';',
      linkAfter: [],
    });

--- a/packages/code-generator/src/plugins/component/react/containerClass.ts
+++ b/packages/code-generator/src/plugins/component/react/containerClass.ts
@ -35,7 +35,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
      type: ChunkType.STRING,
      fileType: FileType.JSX,
      name: CLASS_DEFINE_CHUNK_NAME.End,
-      content: `}`,
+      content: '}',
      linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start, REACT_CHUNK_NAME.ClassRenderEnd],
    });

--- a/packages/code-generator/src/plugins/component/react/containerDataSource.ts
+++ b/packages/code-generator/src/plugins/component/react/containerDataSource.ts
@ -29,7 +29,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
    const ir = next.ir as IContainerInfo;

    if (ir.state) {
-      const state = ir.state;
+      const { state } = ir;
      const fields = Object.keys(state).map<string>((stateName) => {
        const value = generateCompositeType(state[stateName]);
        return `${stateName}: ${value},`;
--- a/packages/code-generator/src/plugins/component/react/containerInitState.ts
+++ b/packages/code-generator/src/plugins/component/react/containerInitState.ts
@ -31,7 +31,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
    const ir = next.ir as IContainerInfo;

    if (ir.state) {
-      const state = ir.state;
+      const { state } = ir;
      const fields = Object.keys(state).map<string>((stateName) => {
        const value = generateCompositeType(state[stateName]);
        return `${stateName}: ${value},`;
--- a/packages/code-generator/src/plugins/component/react/containerInjectUtils.ts
+++ b/packages/code-generator/src/plugins/component/react/containerInjectUtils.ts
@ -10,7 +10,7 @@ import {

 type PluginConfig = {
  fileType: string;
-}
+};

 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
  const cfg: PluginConfig = {
@ -27,7 +27,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
      type: ChunkType.STRING,
      fileType: cfg.fileType,
      name: CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
-      content: `this.utils = utils;`,
+      content: 'this.utils = utils;',
      linkAfter: [CLASS_DEFINE_CHUNK_NAME.ConstructorStart],
    });

--- a/packages/code-generator/src/plugins/component/react/containerLifeCycle.ts
+++ b/packages/code-generator/src/plugins/component/react/containerLifeCycle.ts
@ -35,7 +35,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
    const ir = next.ir as IContainerInfo;

    if (ir.lifeCycles) {
-      const lifeCycles = ir.lifeCycles;
+      const { lifeCycles } = ir;
      const chunks = Object.keys(lifeCycles).map<ICodeChunk>((lifeCycleName) => {
        const normalizeName = cfg.normalizeNameMapping[lifeCycleName] || lifeCycleName;
        const exportName = cfg.exportNameMapping[lifeCycleName] || lifeCycleName;
--- a/packages/code-generator/src/plugins/component/react/containerMethod.ts
+++ b/packages/code-generator/src/plugins/component/react/containerMethod.ts
@ -30,7 +30,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
    const ir = next.ir as IContainerInfo;

    if (ir.methods) {
-      const methods = ir.methods;
+      const { methods } = ir;
      const chunks = Object.keys(methods).map<ICodeChunk>((methodName) => ({
        type: ChunkType.STRING,
        fileType: cfg.fileType,
--- a/packages/code-generator/src/plugins/component/react/jsx.ts
+++ b/packages/code-generator/src/plugins/component/react/jsx.ts
@ -14,7 +14,7 @@ import { createReactNodeGenerator } from '../../../utils/nodeToJSX';
 type PluginConfig = {
  fileType?: string;
  nodeTypeMapping?: Record<string, string>;
-}
+};

 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
  const cfg = {
--- a/packages/code-generator/src/plugins/component/react/reactCommonDeps.ts
+++ b/packages/code-generator/src/plugins/component/react/reactCommonDeps.ts
@ -19,7 +19,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
      type: ChunkType.STRING,
      fileType: FileType.JSX,
      name: COMMON_CHUNK_NAME.ExternalDepsImport,
-      content: `import React from 'react';`,
+      content: 'import React from \'react\';',
      linkAfter: [],
    });

--- a/packages/code-generator/src/plugins/component/recore/pageFrame.ts
+++ b/packages/code-generator/src/plugins/component/recore/pageFrame.ts
@ -21,7 +21,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
      type: ChunkType.STRING,
      fileType: FileType.TS,
      name: COMMON_CHUNK_NAME.ExternalDepsImport,
-      content: `import { BaseController } from '@ali/recore-renderer';`,
+      content: 'import { BaseController } from \'@ali/recore-renderer\';',
      linkAfter: [],
    });

@ -37,7 +37,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
      type: ChunkType.STRING,
      fileType: FileType.TS,
      name: CLASS_DEFINE_CHUNK_NAME.End,
-      content: `}`,
+      content: '}',
      linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.End]],
    });

--- a/packages/code-generator/src/plugins/component/recore/pageVmHeader.ts
+++ b/packages/code-generator/src/plugins/component/recore/pageVmHeader.ts
@ -17,7 +17,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
      type: ChunkType.STRING,
      fileType: 'vx',
      name: COMMON_CHUNK_NAME.CustomContent,
-      content: `<div {...globalProps.div} className="recore-loading" x-if={this.__loading} />`,
+      content: '<div {...globalProps.div} className="recore-loading" x-if={this.__loading} />',
      linkAfter: [],
    });

--- a/packages/code-generator/src/plugins/component/style/css.ts
+++ b/packages/code-generator/src/plugins/component/style/css.ts
@ -12,7 +12,7 @@ import {
 type PluginConfig = {
  fileType: string;
  moduleFileType: string;
-}
+};

 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
  const cfg: PluginConfig = {
--- a/packages/code-generator/src/plugins/project/framework/icejs/plugins/router.ts
+++ b/packages/code-generator/src/plugins/project/framework/icejs/plugins/router.ts
@ -38,15 +38,15 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
            component: BasicLayout,
            children: [
              ${ir.routes
-                .map(
-                  route => `
+    .map(
+      route => `
                    {
                      path: '${route.path}',
                      component: ${route.componentName},
                    }
                  `,
-                )
-                .join(',')}
+    )
+    .join(',')}
            ],
          },
        ];
--- 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
@ -25,4 +25,3 @@ export default function getFile(): [string[], IResultFile] {

  return [[], file];
 }
-  
--- 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
@ -29,4 +29,3 @@ export default function getFile(): [string[], IResultFile] {

  return [[], file];
 }
-  
--- 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
@ -63,4 +63,3 @@ export default function getFile(): [string[], IResultFile] {

  return [[], file];
 }
-  
--- 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
@ -48,4 +48,3 @@ export default function getFile(): [string[], IResultFile] {

  return [['public'], file];
 }
-  
--- 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
@ -72,6 +72,5 @@ export default {
    `,
  );

-  return [['src','config'], file];
+  return [['src', 'config'], file];
 }
-  
--- 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
@ -38,6 +38,5 @@ export default componentsMap;
    `,
  );

-  return [['src','config'], file];
+  return [['src', 'config'], file];
 }
-  
--- 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
@ -24,6 +24,5 @@ export default {
    `,
  );

-  return [['src','config'], file];
+  return [['src', 'config'], file];
 }
-  
--- 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
@ -98,4 +98,3 @@ app.run();

  return [['src'], file];
 }
-  
--- 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
@ -50,4 +50,3 @@ export default function getFile(): [string[], IResultFile] {

  return [[], file];
 }
-  
--- a/packages/code-generator/src/postprocessor/prettier/index.ts
+++ b/packages/code-generator/src/postprocessor/prettier/index.ts
@ -7,7 +7,7 @@ const PARSERS = ['css', 'scss', 'less', 'json', 'html', 'vue'];

 type ProcessorConfig = {
  customFileTypeParser: Record<string, string>;
-}
+};

 const factory: PostProcessorFactory<ProcessorConfig> = (config?: ProcessorConfig) => {
  const cfg: ProcessorConfig = {
@ -23,7 +23,7 @@ const factory: PostProcessorFactory<ProcessorConfig> = (config?: ProcessorConfig
      parser = 'typescript';
    } else if (PARSERS.indexOf(fileType) >= 0) {
      parser = fileType as prettier.BuiltInParserName;
-    } else if (cfg.customFileTypeParser[fileType]){
+    } else if (cfg.customFileTypeParser[fileType]) {
      parser = cfg.customFileTypeParser[fileType] as prettier.BuiltInParserName;
    } else if (fileType === 'vx') {
      return mypretter(content, fileType);
--- a/packages/code-generator/src/publisher/disk/index.ts
+++ b/packages/code-generator/src/publisher/disk/index.ts
@ -19,8 +19,8 @@ export interface IDiskPublisher extends IPublisher<IDiskFactoryParams, string> {
 }

 export const createDiskPublisher: PublisherFactory<
-  IDiskFactoryParams,
-  IDiskPublisher
+IDiskFactoryParams,
+IDiskPublisher
 > = (params: IDiskFactoryParams = {}): IDiskPublisher => {
  let { project, outputPath = './' } = params;

--- a/packages/code-generator/src/publisher/disk/utils.ts
+++ b/packages/code-generator/src/publisher/disk/utils.ts
@ -61,7 +61,7 @@ const createDirectory = (pathToDir: string): Promise<void> => {
 const writeContentToFile = (
  filePath: string,
  fileContent: string,
-  encoding: string = 'utf8',
+  encoding = 'utf8',
 ): Promise<void> => {
  return new Promise((resolve, reject) => {
    writeFile(filePath, fileContent, encoding, err => {
--- a/packages/code-generator/src/publisher/zip/index.ts
+++ b/packages/code-generator/src/publisher/zip/index.ts
@ -5,7 +5,7 @@ import {
  IPublisherFactoryParams,
  PublisherError,
 } from '../../types';
-import { isNodeProcess, writeZipToDisk, generateProjectZip } from './utils'
+import { isNodeProcess, writeZipToDisk, generateProjectZip } from './utils';

 // export type ZipBuffer = Buffer | Blob;
 export type ZipBuffer = Buffer;
@ -30,12 +30,12 @@ export const createZipPublisher: PublisherFactory<ZipFactoryParams, ZipPublisher
  const getProject = () => project;
  const setProject = (projectToSet: IResultDir) => {
    project = projectToSet;
-  }
+  };

  const getOutputPath = () => outputPath;
  const setOutputPath = (path: string) => {
    outputPath = path;
-  }
+  };

  const publish = async (options: ZipFactoryParams = {}) => {
    const projectToPublish = options.project || project;
@ -57,7 +57,7 @@ export const createZipPublisher: PublisherFactory<ZipFactoryParams, ZipPublisher
    } catch (error) {
      throw new PublisherError(error);
    }
-  }
+  };

  return {
    publish,
@ -66,4 +66,4 @@ export const createZipPublisher: PublisherFactory<ZipFactoryParams, ZipPublisher
    getOutputPath,
    setOutputPath,
  };
-}
+};
--- a/packages/code-generator/src/publisher/zip/utils.ts
+++ b/packages/code-generator/src/publisher/zip/utils.ts
@ -8,7 +8,7 @@ export const isNodeProcess = (): boolean => {
    typeof process.versions === 'object' &&
    typeof process.versions.node !== 'undefined'
  );
-}
+};

 export const writeZipToDisk = (
  zipFolderPath: string,
@ -27,7 +27,7 @@ export const writeZipToDisk = (
  const writeStream = fs.createWriteStream(zipPath);
  writeStream.write(content);
  writeStream.end();
-}
+};

 export const generateProjectZip = async (project: IResultDir): Promise<ZipBuffer> => {
  let zip = new JSZip();
@ -35,12 +35,12 @@ export const generateProjectZip = async (project: IResultDir): Promise<ZipBuffer
  // const zipType = isNodeProcess() ? 'nodebuffer' : 'blob';
  const zipType = 'nodebuffer'; // 目前先只支持 node 调用
  return zip.generateAsync({ type: zipType });
-}
+};

 const writeFolderToZip = (
  folder: IResultDir,
  parentFolder: JSZip,
-  ignoreFolder: boolean = false,
+  ignoreFolder = false,
 ) => {
  const zipFolder = ignoreFolder ? parentFolder : parentFolder.folder(folder.name);
  if (zipFolder !== null) {
@ -57,4 +57,4 @@ const writeFolderToZip = (
  }

  return parentFolder;
-}
+};
--- a/packages/code-generator/src/utils/nodeToJSX.ts
+++ b/packages/code-generator/src/utils/nodeToJSX.ts
@ -236,7 +236,7 @@ export function linkPieces(pieces: CodePiece[]): string {
    .map((p) => p.value)
    .join(' ');

-  attrsParts = !!attrsParts ? ` ${attrsParts}` : '';
+  attrsParts = attrsParts ? ` ${attrsParts}` : '';

  if (childrenParts) {
    return `${beforeParts}<${tagName}${attrsParts}>${childrenParts}</${tagName}>${afterParts}`;
--- a/packages/code-generator/tools/createTemplate.js
+++ b/packages/code-generator/tools/createTemplate.js
@ -1,4 +1,4 @@
-const fs = require("fs");
+const fs = require('fs');
 const path = require('path');

 console.log(process.argv);
@ -15,7 +15,7 @@ if (!root) {
 function cloneStr(str, times) {
  let count = times;
  const arr = [];
-  while(count > 0) {
+  while (count > 0) {
    arr.push(str);
    count -= 1;
  }
@ -23,7 +23,7 @@ function cloneStr(str, times) {
 }

 function createTemplateFile(root, internalPath, fileName) {
-  //不是文件夹,则添加type属性为文件后缀名
+  // 不是文件夹,则添加type属性为文件后缀名
  const fileTypeSrc = path.extname(fileName);
  const fileType = fileTypeSrc.substring(1);
  const baseName = path.basename(fileName, fileTypeSrc);
@ -62,24 +62,24 @@ ${content}
 function fileDisplay(root, internalPath) {
  const dirPath = path.join(root, internalPath);
  const filesList = fs.readdirSync(dirPath);
-  for(let i = 0; i < filesList.length; i++){
-    //描述此文件/文件夹的对象
+  for (let i = 0; i < filesList.length; i++) {
+    // 描述此文件/文件夹的对象
    const fileName = filesList[i];
-    //拼接当前文件的路径(上一层路径+当前file的名字)
+    // 拼接当前文件的路径(上一层路径+当前file的名字)
    const filePath = path.join(dirPath, fileName);
-    //根据文件路径获取文件信息，返回一个fs.Stats对象
+    // 根据文件路径获取文件信息，返回一个fs.Stats对象
    const stats = fs.statSync(filePath);
-    if(stats.isDirectory()){
-      //递归调用
+    if (stats.isDirectory()) {
+      // 递归调用
      fileDisplay(root, path.join(internalPath, fileName));
-    }else{
+    } else {
      createTemplateFile(root, internalPath, fileName);
    }
  }
 }

-//调用函数遍历根目录，同时传递 文件夹路径和对应的数组
-//请使用同步读取
+// 调用函数遍历根目录，同时传递 文件夹路径和对应的数组
+// 请使用同步读取
 fileDisplay(root, '');
-//读取完毕则写入到txt文件中
+// 读取完毕则写入到txt文件中
 // fs.writeFileSync('./data.txt', JSON.stringify(arr));
--- a/packages/demo-server/.eslintrc.js
+++ b/packages/demo-server/.eslintrc.js
@ -1,24 +0,0 @@
-module.exports = {
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    project: 'tsconfig.json',
-    sourceType: 'module',
-  },
-  plugins: ['@typescript-eslint/eslint-plugin'],
-  extends: [
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'prettier',
-    'prettier/@typescript-eslint',
-  ],
-  root: true,
-  env: {
-    node: true,
-    jest: true,
-  },
-  rules: {
-    '@typescript-eslint/interface-name-prefix': 'off',
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-  },
-};
--- a/packages/demo-server/.prettierrc
+++ b/packages/demo-server/.prettierrc
@ -1,4 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all"
-}
--- a/packages/demo-server/package.json
+++ b/packages/demo-server/package.json
@ -5,8 +5,6 @@
  "description": "低代码引擎 DEMO Server 端",
  "scripts": {
    "prebuild": "rimraf dist",
-    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
-    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "start": "nest start",
    "start:debug": "nest start --debug --watch",
    "start:dev": "nest start --watch",
@ -49,13 +47,7 @@
    "@types/jest": "25.2.3",
    "@types/node": "^13.9.1",
    "@types/supertest": "^2.0.8",
-    "@typescript-eslint/eslint-plugin": "3.0.2",
-    "@typescript-eslint/parser": "3.0.2",
-    "eslint": "7.1.0",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-plugin-import": "^2.20.1",
    "jest": "26.0.1",
-    "prettier": "^1.19.1",
    "supertest": "^4.0.2",
    "ts-jest": "26.1.0",
    "ts-loader": "^6.2.1",
--- a/packages/demo-server/src/api/api.controller.ts
+++ b/packages/demo-server/src/api/api.controller.ts
@ -5,7 +5,7 @@ import { GenerateProjectDto } from '../dto/generate-project.dto';

@Controller('api')
 export class ApiController {
-  constructor(private readonly apiService: ApiService) {}
+  private readonly apiService: ApiService;

  @Get('generate/test')
  generateTest() {
--- a/packages/demo-server/src/app.controller.ts
+++ b/packages/demo-server/src/app.controller.ts
@ -3,7 +3,7 @@ import { AppService } from './app.service';

@Controller()
 export class AppController {
-  constructor(private readonly appService: AppService) {}
+  private readonly appService: AppService;

  @Get()
  getHello(): string {
--- a/packages/demo-server/src/publisher/index.ts
+++ b/packages/demo-server/src/publisher/index.ts
@ -1,5 +1,5 @@
 import { IResultDir } from '@ali/lowcode-code-generator';
-import { isNodeProcess, writeZipToDisk, generateProjectZip } from './utils'
+import { isNodeProcess, writeZipToDisk, generateProjectZip } from './utils';

 export type PublisherFactory<T, U> = (configuration?: Partial<T>) => U;

@ -17,7 +17,7 @@ export interface IPublisherResponse<T> {
  payload?: T;
 }

-declare type ZipPublisherResponse = string | Buffer | Blob
+declare type ZipPublisherResponse = string | Buffer | Blob;

 export interface ZipFactoryParams extends IPublisherFactoryParams {
  outputPath?: string
@ -32,39 +32,39 @@ export interface ZipPublisher extends IPublisher<ZipFactoryParams, ZipPublisherR
 export const createZipPublisher: PublisherFactory<ZipFactoryParams, ZipPublisher> = (
  params: ZipFactoryParams = {}
 ): ZipPublisher => {
-  let { project, outputPath } = params
+  let { project, outputPath } = params;

-  const getProject = () => project
+  const getProject = () => project;
  const setProject = (projectToSet: IResultDir) => {
-    project = projectToSet
-  }
+    project = projectToSet;
+  };

-  const getOutputPath = () => outputPath
+  const getOutputPath = () => outputPath;
  const setOutputPath = (path: string) => {
-    outputPath = path
-  }
+    outputPath = path;
+  };

  const publish = async (options: ZipFactoryParams = {}) => {
-    const projectToPublish = options.project || project
+    const projectToPublish = options.project || project;
    if (!projectToPublish) {
      throw new Error('MissingProject');
    }

-    const zipName = options.projectSlug || params.projectSlug || projectToPublish.name
+    const zipName = options.projectSlug || params.projectSlug || projectToPublish.name;

    try {
-      const zipContent = await generateProjectZip(projectToPublish)
+      const zipContent = await generateProjectZip(projectToPublish);

      // If not output path is provided, zip is not written to disk
-      const projectOutputPath = options.outputPath || outputPath
+      const projectOutputPath = options.outputPath || outputPath;
      if (projectOutputPath && isNodeProcess()) {
-        await writeZipToDisk(projectOutputPath, zipContent, zipName)
+        await writeZipToDisk(projectOutputPath, zipContent, zipName);
      }
-      return { success: true, payload: zipContent }
+      return { success: true, payload: zipContent };
    } catch (error) {
      throw new Error('ZipUnexpected');
    }
-  }
+  };

  return {
    publish,
@ -72,5 +72,5 @@ export const createZipPublisher: PublisherFactory<ZipFactoryParams, ZipPublisher
    setProject,
    getOutputPath,
    setOutputPath,
-  }
-}
+  };
+};
--- a/packages/demo-server/src/publisher/utils.ts
+++ b/packages/demo-server/src/publisher/utils.ts
@ -6,52 +6,52 @@ export const isNodeProcess = (): boolean => {
    typeof process === 'object' &&
    typeof process.versions === 'object' &&
    typeof process.versions.node !== 'undefined'
-  )
-}
+  );
+};

 export const writeZipToDisk = (
  zipFolderPath: string,
  content: Buffer | Blob,
  zipName: string
 ): void => {
-  const fs = require('fs')
-  const path = require('path')
+  const fs = require('fs');
+  const path = require('path');

  if (!fs.existsSync(zipFolderPath)) {
-    fs.mkdirSync(zipFolderPath, { recursive: true })
+    fs.mkdirSync(zipFolderPath, { recursive: true });
  }

-  const zipPath = path.join(zipFolderPath, `${zipName}.zip`)
+  const zipPath = path.join(zipFolderPath, `${zipName}.zip`);

-  const writeStream = fs.createWriteStream(zipPath)
-  writeStream.write(content)
-  writeStream.end()
-}
+  const writeStream = fs.createWriteStream(zipPath);
+  writeStream.write(content);
+  writeStream.end();
+};

 export const generateProjectZip = async (project: IResultDir): Promise<Buffer | Blob> => {
-  let zip = new JSZip()
-  zip = writeFolderToZip(project, zip, true)
-  const zipType = isNodeProcess() ? 'nodebuffer' : 'blob'
-  return zip.generateAsync({ type: zipType })
-}
+  let zip = new JSZip();
+  zip = writeFolderToZip(project, zip, true);
+  const zipType = isNodeProcess() ? 'nodebuffer' : 'blob';
+  return zip.generateAsync({ type: zipType });
+};

 const writeFolderToZip = (
  folder: IResultDir,
  parentFolder: JSZip,
-  ignoreFolder: boolean = false
+  ignoreFolder = false
 ) => {
-  const zipFolder = ignoreFolder ? parentFolder : parentFolder.folder(folder.name)
+  const zipFolder = ignoreFolder ? parentFolder : parentFolder.folder(folder.name);

  folder.files.forEach((file: IResultFile) => {
    // 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)
-  })
+    const fileName = file.ext ? `${file.name}.${file.ext}` : file.name;
+    zipFolder.file(fileName, file.content, options);
+  });

  folder.dirs.forEach((subFolder: IResultDir) => {
-    writeFolderToZip(subFolder, zipFolder)
-  })
+    writeFolderToZip(subFolder, zipFolder);
+  });

-  return parentFolder
-}
+  return parentFolder;
+};
--- a/packages/demo/public/assets.json
+++ b/packages/demo/public/assets.json
@ -13107,30 +13107,6 @@
    }
  ],
  "componentList": [
-    {
-      "title": "Util",
-      "children": [
-        {
-          "componentName": "Dropdown",
-          "title": "下拉菜单",
-          "icon": "",
-          "package": "@alifd/next",
-          "library": "Next",
-          "snippets": [
-            {
-              "title": "下拉菜单",
-              "screenshot": "",
-              "schema": {
-                "componentName": "Dropdown",
-                "props": {  "trigger": [{    "componentName": "Button",    "props": {      "type": "primary"    },    "children": "确定"  }],  "triggerType": "click"},
-                "children": [{  "componentName": "Menu",  "props": {    "style": {      "width": 200    }  },  "children": [{    "componentName": "Menu.Item",    "props": {},    "children": "Option 1"  }, {    "componentName": "Menu.Item",    "props": {      "disabled": false    },    "children": "option 2"  }, {    "componentName": "Menu.Item",    "props": {      "disabled": false    },    "children": "option 3"  }]}]
-              }
-            }
-          ]
-        }
-      ],
-      "icon": ""
-    },
    {
      "title": "DataDisplay",
      "children": [
@ -15388,5 +15364,31 @@
      ],
      "icon": ""
    }
+  ],
+  "bizComponentList": [
+    {
+      "title": "Util",
+      "children": [
+        {
+          "componentName": "Dropdown",
+          "title": "下拉菜单",
+          "icon": "",
+          "package": "@alifd/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "下拉菜单",
+              "screenshot": "",
+              "schema": {
+                "componentName": "Dropdown",
+                "props": {  "trigger": [{    "componentName": "Button",    "props": {      "type": "primary"    },    "children": "确定"  }],  "triggerType": "click"},
+                "children": [{  "componentName": "Menu",  "props": {    "style": {      "width": 200    }  },  "children": [{    "componentName": "Menu.Item",    "props": {},    "children": "Option 1"  }, {    "componentName": "Menu.Item",    "props": {      "disabled": false    },    "children": "option 2"  }, {    "componentName": "Menu.Item",    "props": {      "disabled": false    },    "children": "option 3"  }]}]
+              }
+            }
+          ]
+        }
+      ],
+      "icon": ""
+    }
  ]
 }
--- a/packages/demo/src/app/plugins/provider.ts
+++ b/packages/demo/src/app/plugins/provider.ts
@ -34,7 +34,7 @@ export default class Preview extends ReactProvider {
      containerId,
      components: { ...builtInComps, ...buildComponents({ '@alifd/next': 'Next' }, componentsMap) },
      componentsMap,
-      utils: utils,
+      utils,
      constants,
    };
  }
@ -44,7 +44,7 @@ export default class Preview extends ReactProvider {
    const appSchemaStr = localStorage.getItem('lce-dev-store');
    const appSchema = JSON.parse(appSchemaStr || '');
    const idx = appSchema.componentsTree.findIndex(
-      (page: any, idx: number) => (page.fileName || `page${idx}`) === pageId,
+      (page: any, index: number) => (page.fileName || `page${index}`) === pageId,
    );
    const schema = appSchema.componentsTree[idx];
    return schema;
--- a/packages/demo/src/editor/components.ts
+++ b/packages/demo/src/editor/components.ts
@ -2,7 +2,7 @@ import logo from '@ali/lowcode-plugin-sample-logo';
 import samplePreview from '@ali/lowcode-plugin-sample-preview';
 import undoRedo from '@ali/lowcode-plugin-undo-redo';
 import componentsPane from '@ali/lowcode-plugin-components-pane';
-import outline, { OutlinePane } from '@ali/lowcode-plugin-outline-pane';
+import outline from '@ali/lowcode-plugin-outline-pane';
 import zhEn from '@ali/lowcode-plugin-zh-en';
 import eventBindDialog from '@ali/lowcode-plugin-event-bind-dialog';
 import variableBindDialog from '@ali/lowcode-plugin-variable-bind-dialog';
--- a/packages/demo/src/editor/config.ts
+++ b/packages/demo/src/editor/config.ts
@ -123,9 +123,6 @@ export default {
      const simulatorUrl = [
        'https://dev.g.alicdn.com/ali-lowcode/ali-lowcode-engine/0.9.50/react-simulator-renderer.css',
        'https://dev.g.alicdn.com/ali-lowcode/ali-lowcode-engine/0.9.50/react-simulator-renderer.js',
-        //  for debug simulator
-        // 'http://localhost:3333/js/react-simulator-renderer.js', 
-   
      ];
      editor.set('simulatorUrl', simulatorUrl);
      // editor.set('renderEnv', 'rax');
--- a/packages/demo/src/editor/index.tsx
+++ b/packages/demo/src/editor/index.tsx
@ -1,5 +1,5 @@
 import { render } from 'react-dom';
-import GeneralWorkbench, { editor } from '@ali/lowcode-editor-preset-general';
+import GeneralWorkbench from '@ali/lowcode-editor-preset-general';
 import config from './config';
 import components from './components';
 import './global.scss';
--- a/packages/demo/src/editor/plugins/codeout.tsx
+++ b/packages/demo/src/editor/plugins/codeout.tsx
@ -28,7 +28,7 @@ const Codeout = ({ editor }: PluginProps) => {
    const designer = editor.get(Designer);
    if (designer) {
      const assets = editor.get('assets') as { components: BasicSection[] };
-      const components = assets.components;
+      const { components } = assets;

      const componentsMap = components
        .filter((c) => !!c.npm)
--- a/packages/demo/src/editor/plugins/saveload.tsx
+++ b/packages/demo/src/editor/plugins/saveload.tsx
@ -22,10 +22,7 @@ interface BasicSection {

 const Codeout = ({ editor }: PluginProps) => {
  const handleSaveClick = () => {
-
-    debugger;
-
-    let schema = editor.get('designer').project.getSchema();
+    const schema = editor.get('designer').project.getSchema();
    console.log(schema);


--- a/packages/demo/src/vision/loader.ts
+++ b/packages/demo/src/vision/loader.ts
--- a/packages/demo/src/vision/module.d.ts
+++ b/packages/demo/src/vision/module.d.ts
@ -9,5 +9,5 @@ declare module '@ali/ve-page-history';
 declare module '@ali/ve-i18n-manage-pane';
 declare module '@ali/ve-action-pane';
 declare module '@ali/vu-legao-design-fetch-context';
-declare module "@ali/vu-function-parser";
-declare module "compare-versions";
+declare module '@ali/vu-function-parser';
+declare module 'compare-versions';
--- a/packages/demo/src/vision/upgrade-assets.ts
+++ b/packages/demo/src/vision/upgrade-assets.ts
--- a/packages/designer/.eslintrc.js
+++ b/packages/designer/.eslintrc.js
@ -0,0 +1,16 @@
+module.exports = {
+  extends: 'eslint-config-ali/typescript/react',
+  rules: {
+    'react/no-multi-comp': 1,
+    'no-unused-expressions': 1,
+    'implicit-arrow-linebreak': 1,
+    'no-nested-ternary': 1,
+    'no-mixed-operators': 1,
+    '@typescript-eslint/no-parameter-properties': 1,
+    '@typescript-eslint/ban-types': 1,
+    'no-shadow': 1,
+    'no-prototype-builtins': 1,
+    'no-useless-constructor': 1,
+    'no-empty-function': 1,
+  }
+}
--- a/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx
+++ b/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx
@ -38,6 +38,7 @@ export class BorderDetectingInstance extends PureComponent<{
 }

@observer
+// eslint-disable-next-line react/no-multi-comp
 export class BorderDetecting extends Component<{ host: BuiltinSimulatorHost }> {
  shouldComponentUpdate() {
    return false;
@ -56,14 +57,15 @@ export class BorderDetecting extends Component<{ host: BuiltinSimulatorHost }> {
  }

  @computed get current() {
-    const host = this.props.host;
+    const { host } = this.props;
    const doc = host.currentDocument;
    console.info(doc);
    if (!doc) {
      return null;
    }
-    const selection = doc.selection;
-    const current = host.designer.detecting.current;
+    const { selection } = doc;
+    const { current } = host.designer.detecting; 
+    
    if (!current || current.document !== doc || selection.has(current.id)) {
      return null;
    }
@ -71,8 +73,8 @@ export class BorderDetecting extends Component<{ host: BuiltinSimulatorHost }> {
  }

  render() {
-    const host = this.props.host;
-    const current = this.current;
+    const { host } = this.props;
+    const { current } = this;
    if (!current || host.viewport.scrolling || host.liveEditing.editing) {
      return null;
    }
--- a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx
+++ b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx
@ -24,7 +24,7 @@ export default class BoxResizing extends Component<{ host: BuiltinSimulatorHost
    if (!doc || doc.suspensed) {
      return null;
    }
-    const selection = doc.selection;
+    const { selection } = doc;
    return this.dragging ? selection.getTopNodes() : selection.getNodes();
  }

@ -38,7 +38,7 @@ export default class BoxResizing extends Component<{ host: BuiltinSimulatorHost
  }

  render() {
-    const selecting = this.selecting;
+    const { selecting } = this;
    if (!selecting || selecting.length < 1) {
      // DIRTY FIX, recore has a bug!
      return <Fragment />;
@ -58,6 +58,7 @@ export default class BoxResizing extends Component<{ host: BuiltinSimulatorHost
 }

@observer
+// eslint-disable-next-line react/no-multi-comp
 export class BoxResizingForNode extends Component<{ host: BuiltinSimulatorHost; node: Node }> {
  static contextType = SimulatorContext;

@ -80,7 +81,7 @@ export class BoxResizingForNode extends Component<{ host: BuiltinSimulatorHost;
  render() {
    const { instances } = this;
    const { node } = this.props;
-    const designer = this.host.designer;
+    const { designer } = this.host;

    if (!instances || instances.length < 1) {
      return null;
@ -105,6 +106,7 @@ export class BoxResizingForNode extends Component<{ host: BuiltinSimulatorHost;
 }

@observer
+// eslint-disable-next-line react/no-multi-comp
 export class BoxResizingInstance extends Component<{
  observed: OffsetObserver;
  highlight?: boolean;
@ -113,8 +115,11 @@ export class BoxResizingInstance extends Component<{
 }> {
  // private outline: any;
  private willUnbind: () => any;
+
  private outlineRight: any;
+
  private outlineLeft: any;
+
  private dragEngine: DragResizeEngine;

  constructor(props: any) {
--- a/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx
+++ b/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx
@ -55,10 +55,12 @@ export class BorderSelectingInstance extends Component<{
 }

@observer
+// eslint-disable-next-line react/no-multi-comp
 class Toolbar extends Component<{ observed: OffsetObserver }> {
  shouldComponentUpdate() {
    return false;
  }
+
  render() {
    const { observed } = this.props;
    const { height, width } = observed.viewport;
@ -149,6 +151,7 @@ function createAction(content: ReactNode | ComponentType<any> | ActionContentObj
 }

@observer
+// eslint-disable-next-line react/no-multi-comp
 export class BorderSelectingForNode extends Component<{ host: BuiltinSimulatorHost; node: Node }> {
  get host(): BuiltinSimulatorHost {
    return this.props.host;
@ -169,7 +172,7 @@ export class BorderSelectingForNode extends Component<{ host: BuiltinSimulatorHo
  render() {
    const { instances } = this;
    const { node } = this.props;
-    const designer = this.host.designer;
+    const { designer } = this.host;

    if (!instances || instances.length < 1) {
      return null;
@ -192,6 +195,7 @@ export class BorderSelectingForNode extends Component<{ host: BuiltinSimulatorHo
 }

@observer
+// eslint-disable-next-line react/no-multi-comp
 export class BorderSelecting extends Component<{ host: BuiltinSimulatorHost }> {
  get host(): BuiltinSimulatorHost {
    return this.props.host;
@ -206,7 +210,7 @@ export class BorderSelecting extends Component<{ host: BuiltinSimulatorHost }> {
    if (!doc || doc.suspensed || this.host.liveEditing.editing) {
      return null;
    }
-    const selection = doc.selection;
+    const { selection } = doc;
    return this.dragging ? selection.getTopNodes() : selection.getNodes();
  }

@ -215,7 +219,7 @@ export class BorderSelecting extends Component<{ host: BuiltinSimulatorHost }> {
  }

  render() {
-    const selecting = this.selecting;
+    const { selecting } = this;
    if (!selecting || selecting.length < 1) {
      return null;
    }
--- a/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts
+++ b/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts
@ -1,7 +1,7 @@
 import { EventEmitter } from 'events';
-import { ISimulatorHost, isSimulatorHost } from '../../simulator';
+import { ISimulatorHost } from '../../simulator';
 import { Designer, Point } from '../../designer';
-import { setNativeSelection, cursor } from '@ali/lowcode-utils';
+import { cursor } from '@ali/lowcode-utils';
 // import Cursor from './cursor';
 // import Pages from './pages';

@ -19,7 +19,7 @@ function makeEventsHandler(
  // }
  docs.add(sourceDoc);
  // if (sourceDoc !== topDoc || isDragEvent(boostEvent)) {
-  sensors.forEach((sim) => {
+  sensors.forEach(sim => {
    const sdoc = sim.contentDocument;
    if (sdoc) {
      docs.add(sdoc);
@ -28,32 +28,21 @@ function makeEventsHandler(
  // }

  return (handle: (sdoc: Document) => void) => {
-    docs.forEach((doc) => handle(doc));
+    docs.forEach(doc => handle(doc));
  };
 }

 // 拖动缩放
 export default class DragResizeEngine {
  private emitter: EventEmitter;
+
  private dragResizing = false;

-  constructor(readonly designer: Designer) {
+  constructor(designer: Designer) {
    this.designer = designer;
    this.emitter = new EventEmitter();
  }

-  private getMasterSensors(): ISimulatorHost[] {
-    return this.designer.project.documents
-      .map((doc) => {
-        // TODO: not use actived,
-        if (doc.actived && doc.simulator?.sensorAvailable) {
-          return doc.simulator;
-        }
-        return null;
-      })
-      .filter(Boolean) as any;
-  }
-
  isDragResizing() {
    return this.dragResizing;
  }
@ -83,14 +72,12 @@ export default class DragResizeEngine {
    const masterSensors = this.getMasterSensors();

    const createResizeEvent = (e: MouseEvent | DragEvent): Point => {
-      const evt: any = {};
-
      const sourceDocument = e.view?.document;

      if (!sourceDocument || sourceDocument === document) {
        return e;
      }
-      const srcSim = masterSensors.find((sim) => sim.contentDocument === sourceDocument);
+      const srcSim = masterSensors.find(sim => sim.contentDocument === sourceDocument);
      if (srcSim) {
        return srcSim.viewport.toGlobalPoint(e);
      }
@ -99,7 +86,7 @@ export default class DragResizeEngine {

    const over = (e: MouseEvent) => {
      const handleEvents = makeEventsHandler(e, masterSensors);
-      handleEvents((doc) => {
+      handleEvents(doc => {
        doc.removeEventListener('mousemove', move, true);
        doc.removeEventListener('mouseup', over, true);
      });
@ -114,7 +101,7 @@ export default class DragResizeEngine {
      node = boost(e);
      startEvent = createResizeEvent(e);
      const handleEvents = makeEventsHandler(e, masterSensors);
-      handleEvents((doc) => {
+      handleEvents(doc => {
        doc.addEventListener('mousemove', move, true);
        doc.addEventListener('mouseup', over, true);
      });
@ -136,7 +123,9 @@ export default class DragResizeEngine {
    };
  }

-  onResize(func: (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => any) {
+  onResize(
+    func: (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => any,
+  ) {
    this.emitter.on('resize', func);
    return () => {
      this.emitter.removeListener('resize', func);
@ -149,6 +138,18 @@ export default class DragResizeEngine {
      this.emitter.removeListener('resizeEnd', func);
    };
  }
+
+  private getMasterSensors(): ISimulatorHost[] {
+    return this.designer.project.documents
+      .map(doc => {
+        // TODO: not use actived,
+        if (doc.actived && doc.simulator?.sensorAvailable) {
+          return doc.simulator;
+        }
+        return null;
+      })
+      .filter(Boolean) as any;
+  }
 }

 // new DragResizeEngine();
--- a/packages/designer/src/builtin-simulator/bem-tools/insertion.tsx
+++ b/packages/designer/src/builtin-simulator/bem-tools/insertion.tsx
@ -1,15 +1,14 @@
 import { Component } from 'react';
-import { computed, observer } from '@ali/lowcode-editor-core';
-import { SimulatorContext } from '../context';
+import { observer } from '@ali/lowcode-editor-core';
 import { BuiltinSimulatorHost } from '../host';
 import {
  DropLocation,
  Rect,
  isLocationChildrenDetail,
  LocationChildrenDetail,
-  isVertical
+  isVertical,
 } from '../../designer';
-import { ISimulatorHost, } from '../../simulator';
+import { ISimulatorHost } from '../../simulator';
 import { ParentalNode } from '../../document';
 import './insertion.less';

--- a/packages/designer/src/builtin-simulator/create-simulator.ts
+++ b/packages/designer/src/builtin-simulator/create-simulator.ts
@ -8,8 +8,8 @@ import {
  isAssetItem,
  AssetType,
  assetItem,
-} from '@ali/lowcode-utils';
-import { isCSSUrl } from '@ali/lowcode-utils';
+  isCSSUrl } from '@ali/lowcode-utils';
+
 import { BuiltinSimulatorRenderer } from './renderer';

 export function createSimulator(
@ -65,7 +65,7 @@ export function createSimulator(

  const styleFrags = Object.keys(styles)
    .map((key) => {
-      return styles[key].join('\n') + `<meta level="${key}" />`;
+      return `${styles[key].join('\n') }<meta level="${key}" />`;
    })
    .join('');
  const scriptFrags = Object.keys(scripts)
--- a/packages/designer/src/builtin-simulator/host-view.tsx
+++ b/packages/designer/src/builtin-simulator/host-view.tsx
@ -20,31 +20,36 @@ type SimulatorHostProps = BuiltinSimulatorProps & {

 export class BuiltinSimulatorHostView extends Component<SimulatorHostProps> {
  readonly host: BuiltinSimulatorHost;
+
  constructor(props: any) {
    super(props);
    const { project } = this.props;
    this.host = (project.simulator as BuiltinSimulatorHost) || new BuiltinSimulatorHost(project);
    this.host.setProps(this.props);
  }
+
  shouldComponentUpdate(nextProps: BuiltinSimulatorProps) {
    this.host.setProps(nextProps);
    return false;
  }
+
  componentDidMount() {
    if (this.props.onMount) {
      this.props.onMount(this.host);
    }
  }
+
  render() {
    return (
      <div className="lc-simulator">
-        {/*progressing.visible ? <PreLoaderView /> : null*/}
+        {/* progressing.visible ? <PreLoaderView /> : null */}
        <Canvas host={this.host} />
      </div>
    );
  }
 }

+// eslint-disable-next-line react/no-multi-comp
@observer
 class Canvas extends Component<{ host: BuiltinSimulatorHost }> {
  render() {
@ -67,11 +72,12 @@ class Canvas extends Component<{ host: BuiltinSimulatorHost }> {
  }
 }

+// eslint-disable-next-line react/no-multi-comp
@observer
 class Content extends Component<{ host: BuiltinSimulatorHost }> {
  render() {
    const sim = this.props.host;
-    const viewport = sim.viewport;
+    const { viewport } = sim;
    const frameStyle = {
      transform: `scale(${viewport.scale})`,
      height: viewport.contentHeight,
--- a/packages/designer/src/builtin-simulator/host.ts
+++ b/packages/designer/src/builtin-simulator/host.ts
@ -1369,4 +1369,4 @@ function getMatched(elements: Array<Element | Text>, selector: string): Element
 interface DropContainer {
  container: ParentalNode;
  instance: ComponentInstance;
-}
+}
--- a/packages/designer/src/builtin-simulator/live-editing/live-editing.ts
+++ b/packages/designer/src/builtin-simulator/live-editing/live-editing.ts
@ -34,13 +34,15 @@ function addLiveEditingSpecificRule(rule: SpecificRule) {

 export class LiveEditing {
  static addLiveEditingSpecificRule = addLiveEditingSpecificRule;
+
  static addLiveEditingSaveHandler = addLiveEditingSaveHandler;

  @obx.ref private _editing: Prop | null = null;
+
  apply(target: EditingTarget) {
    const { node, event, rootElement } = target;
    const targetElement = event.target as HTMLElement;
-    const liveTextEditing = node.componentMeta.liveTextEditing;
+    const { liveTextEditing } = node.componentMeta;

    const editor = globalContext.get(Editor);
    const npm = node?.componentMeta?.npm;
@ -64,14 +66,14 @@ export class LiveEditing {
            return false;
          }
          setterPropElement = queryPropElement(rootElement, targetElement, config.selector);
-          return setterPropElement ? true : false;
+          return !!setterPropElement;
        });
        propTarget = matched?.propTarget;
      }
    } else {
      specificRules.some((rule) => {
        matched = rule(target);
-        return matched ? true : false;
+        return !!matched;
      });
      if (matched) {
        propTarget = matched.propTarget;
@ -79,15 +81,15 @@ export class LiveEditing {
      }
    }

-    if (!propTarget) {
-      // 自动纯文本编辑满足一下情况：
-      //  1. children 内容都是 Leaf 且都是文本（一期）
-      //  2. DOM 节点是单层容器，子集都是文本节点 (已满足)
-      const isAllText = node.children?.every(item => {
-        return item.isLeaf() && item.getProp('children')?.type === 'literal';
-      });
-      // TODO:
-    }
+    // if (!propTarget) {
+    //   // 自动纯文本编辑满足一下情况：
+    //   //  1. children 内容都是 Leaf 且都是文本（一期）
+    //   //  2. DOM 节点是单层容器，子集都是文本节点 (已满足)
+    //   const isAllText = node.children?.every(item => {
+    //     return item.isLeaf() && item.getProp('children')?.type === 'literal';
+    //   });
+    //   // TODO:
+    // }

    if (propTarget && setterPropElement) {
      const prop = node.getProp(propTarget, true)!;
@ -119,8 +121,10 @@ export class LiveEditing {
        console.info(e.code);
        switch (e.code) {
          case 'Enter':
+            break;
            // TODO: check is richtext?
          case 'Escape':
+            break;
          case 'Tab':
            setterPropElement?.blur();
        }
@ -128,7 +132,7 @@ export class LiveEditing {
        // enter
        // tab
      };
-      const focusout = (e: FocusEvent) => {
+      const focusout = (/* e: FocusEvent */) => {
        this.saveAndDispose();
      };
      setterPropElement.addEventListener('focusout', focusout);
@ -147,8 +151,6 @@ export class LiveEditing {
    // TODO: process enter | esc events & joint the FocusTracker

    // TODO: upward testing for b/i/a html elements
-
-    
  }

  get editing() {
@ -156,7 +158,9 @@ export class LiveEditing {
  }

  private _dispose?: () => void;
+
  private _save?: () => void;
+
  saveAndDispose() {
    if (this._save) {
      this._save();
--- a/packages/designer/src/builtin-simulator/node-selector/index.tsx
+++ b/packages/designer/src/builtin-simulator/node-selector/index.tsx
@ -58,17 +58,20 @@ export default class InstanceNodeSelector extends React.Component<IProps, IState
      });
    }
  };
+
  onMouseOver = (node: Node) => (_: any, flag = true) => {
    if (node && typeof node.hover === 'function') {
      node.hover(flag);
    }
  };
+
  onMouseOut = (node: Node) => (_: any, flag = false) => {
    if (node && typeof node.hover === 'function') {
      node.hover(flag);
    }
  };
-  renderNodes = (node: Node) => {
+
+  renderNodes = (/* node: Node */) => {
    const nodes = this.state.parentNodes || [];
    const children = nodes.map((node, key) => {
      return (
--- a/packages/designer/src/builtin-simulator/resource-consumer.ts
+++ b/packages/designer/src/builtin-simulator/resource-consumer.ts
@ -21,16 +21,19 @@ export type RendererConsumer<T> = (renderer: BuiltinSimulatorRenderer, data: T)

 export default class ResourceConsumer<T = any> {
  private emitter = new EventEmitter();
+
  @obx.ref private _data: T | typeof UNSET = UNSET;

  private _providing?: () => void;
+
+  private _consuming?: () => void;
+
  constructor(provider: () => T, private consumer?: RendererConsumer<T>) {
    this._providing = autorun(() => {
      this._data = provider();
    });
  }

-  private _consuming?: () => void;
  consume(consumerOrRenderer: BuiltinSimulatorRenderer | ((data: T) => any)) {
    if (this._consuming) {
      return;
@ -72,6 +75,7 @@ export default class ResourceConsumer<T = any> {
  }

  private _firstConsumed = false;
+
  private resovleFirst?: () => void;

  waitFirstConsume(): Promise<any> {
--- a/packages/designer/src/builtin-simulator/utils/parse-metadata.ts
+++ b/packages/designer/src/builtin-simulator/utils/parse-metadata.ts
@ -16,6 +16,7 @@ export const primitiveTypes = [
  'any',
 ];

+// eslint-disable-next-line @typescript-eslint/ban-types
 function makeRequired(propType: any, lowcodeType: string | object) {
  function lowcodeCheckTypeIsRequired(...rest: any[]) {
    return propType.isRequired(...rest);
@ -32,6 +33,7 @@ function makeRequired(propType: any, lowcodeType: string | object) {
  return lowcodeCheckTypeIsRequired;
 }

+// eslint-disable-next-line @typescript-eslint/ban-types
 function define(propType: any = PropTypes.any, lowcodeType: string | object = {}) {
  if (!propType._inner && propType.name !== 'lowcodeCheckType') {
    propType.lowcodeType = lowcodeType;
@ -136,7 +138,7 @@ export function parseProps(component: any): PropConfig[] {
  Object.keys(propTypes).forEach(key => {
    const propTypeItem = propTypes[key];
    const defaultValue = defaultProps[key];
-    const lowcodeType = propTypeItem.lowcodeType;
+    const { lowcodeType } = propTypeItem;
    if (lowcodeType) {
      result[key] = {
        name: key,
--- a/packages/designer/src/builtin-simulator/utils/path.ts
+++ b/packages/designer/src/builtin-simulator/utils/path.ts
@ -158,7 +158,7 @@ export function joinPath(...segments: string[]) {
      if (path === '') {
        path += seg;
      } else {
-        path += '/' + seg;
+        path += `/${ seg}`;
      }
    }
  }
--- a/packages/designer/src/builtin-simulator/utils/throttle.ts
+++ b/packages/designer/src/builtin-simulator/utils/throttle.ts
@ -1,5 +1,6 @@
 const useRAF = typeof requestAnimationFrame === 'function';

+// eslint-disable-next-line @typescript-eslint/ban-types
 export function throttle(func: Function, delay: number) {
  let lastArgs: any;
  let lastThis: any;
--- a/packages/designer/src/builtin-simulator/viewport.ts
+++ b/packages/designer/src/builtin-simulator/viewport.ts
@ -4,7 +4,9 @@ import { AutoFit, IViewport } from '../simulator';

 export default class Viewport implements IViewport {
  @obx.ref private rect?: DOMRect;
+
  private _bounds?: DOMRect;
+
  get bounds(): DOMRect {
    if (this._bounds) {
      return this._bounds;
@ -17,12 +19,13 @@ export default class Viewport implements IViewport {
  }

  get contentBounds(): DOMRect {
-    const bounds = this.bounds;
-    const scale = this.scale;
+    const { bounds } = this;
+    const { scale } = this;
    return new DOMRect(0, 0, bounds.width / scale, bounds.height / scale);
  }

  private viewportElement?: HTMLElement;
+
  mount(viewportElement: HTMLElement | null) {
    if (!viewportElement || this.viewportElement === viewportElement) {
      return;
@ -67,7 +70,7 @@ export default class Viewport implements IViewport {
    }
  }

-  @obx.ref private _scale: number = 1;
+  @obx.ref private _scale = 1;

  /**
   * 缩放比例
@ -87,6 +90,7 @@ export default class Viewport implements IViewport {
  }

  @obx.ref private _contentWidth: number | AutoFit = AutoFit;
+
  @obx.ref private _contentHeight: number | AutoFit = AutoFit;

  @computed get contentHeight(): number | AutoFit {
@ -106,15 +110,19 @@ export default class Viewport implements IViewport {
  }

  @obx.ref private _scrollX = 0;
+
  @obx.ref private _scrollY = 0;
+
  get scrollX() {
    return this._scrollX;
  }
+
  get scrollY() {
    return this._scrollY;
  }

  private _scrollTarget?: ScrollTarget;
+
  /**
   * 滚动对象
   */
@ -123,6 +131,7 @@ export default class Viewport implements IViewport {
  }

  @obx private _scrolling = false;
+
  get scrolling(): boolean {
    return this._scrolling;
  }
--- a/packages/designer/src/component-meta.ts
+++ b/packages/designer/src/component-meta.ts
@ -13,7 +13,7 @@ import {
  FieldConfig,
 } from '@ali/lowcode-types';
 import { computed } from '@ali/lowcode-editor-core';
-import { Node, ParentalNode, TransformStage } from './document';
+import { Node, ParentalNode } from './document';
 import { Designer } from './designer';
 import { intlNode } from './locale';
 import { IconContainer } from './icons/container';
@ -63,45 +63,62 @@ function buildFilter(rule?: string | string[] | RegExp | NestingFilter) {

 export class ComponentMeta {
  readonly isComponentMeta = true;
+
  private _npm?: NpmInfo;
+
  get npm() {
    return this._npm;
  }
+
  private _componentName?: string;
+
  get componentName(): string {
    return this._componentName!;
  }
+
  private _isContainer?: boolean;
+
  get isContainer(): boolean {
    return this._isContainer! || this.isRootComponent();
  }
+
  private _isModal?: boolean;
+
  get isModal(): boolean {
    return this._isModal!;
  }
+
  private _descriptor?: string;
+
  get descriptor(): string | undefined {
    return this._descriptor;
  }
+
  private _rootSelector?: string;
+
  get rootSelector(): string | undefined {
    return this._rootSelector;
  }
+
  private _transformedMetadata?: TransformedComponentMetadata;
+
  get configure() {
    const config = this._transformedMetadata?.configure;
    return config?.combined || config?.props || [];
  }

  private _liveTextEditing?: LiveTextEditingConfig[];
+
  get liveTextEditing() {
    return this._liveTextEditing;
  }

  private parentWhitelist?: NestingFilter | null;
+
  private childWhitelist?: NestingFilter | null;

  private _title?: TitleContent;
+
  get title(): string | I18nData | ReactElement {
    // TODO: 标记下。这块需要康师傅加一下API，页面正常渲染。
    // string | i18nData | ReactElement
@ -123,6 +140,7 @@ export class ComponentMeta {
  }

  private _acceptable?: boolean;
+
  get acceptable(): boolean {
    return this._acceptable!;
  }
@ -145,7 +163,7 @@ export class ComponentMeta {
    // 额外转换逻辑
    this._transformedMetadata = this.transformMetadata(metadata);

-    const title = this._transformedMetadata.title;
+    const { title } = this._transformedMetadata;
    if (title) {
      this._title =
        typeof title === 'string'
@ -182,8 +200,8 @@ export class ComponentMeta {

    const { component } = configure;
    if (component) {
-      this._isContainer = component.isContainer ? true : false;
-      this._isModal = component.isModal ? true : false;
+      this._isContainer = !!component.isContainer;
+      this._isModal = !!component.isModal;
      this._descriptor = component.descriptor;
      this._rootSelector = component.rootSelector;
      if (component.nestingRule) {
@ -208,11 +226,12 @@ export class ComponentMeta {
    return result as any;
  }

-  isRootComponent(includeBlock: boolean = true) {
+  isRootComponent(includeBlock = true) {
    return this.componentName === 'Page' || this.componentName === 'Component' || (includeBlock && this.componentName === 'Block');
  }

  @computed get availableActions() {
+    // eslint-disable-next-line prefer-const
    let { disableBehaviors, actions } = this._transformedMetadata?.configure.component || {};
    const disabled = ensureAList(disableBehaviors) || (this.isRootComponent(false) ? ['copy', 'remove'] : null);
    actions = builtinComponentActions.concat(this.designer.getGlobalComponentActions() || [], actions || []);
@ -313,6 +332,7 @@ registerMetadataTransducer((metadata) => {
  if (!component.nestingRule) {
    let m;
    // uri match xx.Group set subcontrolling: true, childWhiteList
+    // eslint-disable-next-line no-cond-assign
    if ((m = /^(.+)\.Group$/.exec(componentName))) {
      // component.subControlling = true;
      if (!component.nestingRule) {
@ -320,16 +340,16 @@ registerMetadataTransducer((metadata) => {
          childWhitelist: [`${m[1]}`],
        };
      }
-    }
-    // uri match xx.Node set selfControlled: false, parentWhiteList
-    else if ((m = /^(.+)\.Node$/.exec(componentName))) {
+    // eslint-disable-next-line no-cond-assign
+    } else if ((m = /^(.+)\.Node$/.exec(componentName))) {
+      // uri match xx.Node set selfControlled: false, parentWhiteList
      // component.selfControlled = false;
      component.nestingRule = {
        parentWhitelist: [`${m[1]}`, componentName],
      };
-    }
-    // uri match .Item .Node .Option set parentWhiteList
-    else if ((m = /^(.+)\.(Item|Node|Option)$/.exec(componentName))) {
+    // eslint-disable-next-line no-cond-assign
+    } else if ((m = /^(.+)\.(Item|Node|Option)$/.exec(componentName))) {
+      // uri match .Item .Node .Option set parentWhiteList
      component.nestingRule = {
        parentWhitelist: [`${m[1]}`],
      };
--- a/packages/designer/src/designer/active-tracker.ts
+++ b/packages/designer/src/designer/active-tracker.ts
@ -1,6 +1,6 @@
 import { EventEmitter } from 'events';
 import { LocationDetail } from './location';
-import { Node,  isNode } from '../document/node/node';
+import { Node, isNode } from '../document/node/node';
 import { ComponentInstance } from '../simulator';
 import { obx } from '@ali/lowcode-editor-core';

--- a/packages/designer/src/designer/builtin-hotkey.ts
+++ b/packages/designer/src/designer/builtin-hotkey.ts
@ -107,7 +107,7 @@ hotkey.bind(['command+c', 'ctrl+c', 'command+x', 'ctrl+x'], (e, action) => {
  let selected = doc.selection.getTopNodes(true);
  selected = selected.filter((node) => {
    return node.canPerformAction('copy');
-  })
+  });
  if (!selected || selected.length < 1) {
    return;
  }
@ -242,11 +242,10 @@ hotkey.bind(['option+left', 'option+right'], (e, action) => {
      parent.insertAfter(firstNode, silbing);
    }
    firstNode?.select();
-    return;
  }
 });

-hotkey.bind(['option+up'], (e, action) => {
+hotkey.bind(['option+up'], (e) => {
  const designer = focusing.focusDesigner;
  const doc = designer?.currentDocument;
  if (isFormEvent(e) || !doc) {
@ -275,7 +274,6 @@ hotkey.bind(['option+up'], (e, action) => {
      parent.insertBefore(firstNode, silbing);
    }
    firstNode?.select();
-    return;
  } else {
    const place = parent.getSuitablePlace(firstNode, null); // upwards
    if (place) {
@ -285,7 +283,7 @@ hotkey.bind(['option+up'], (e, action) => {
  }
 });

-hotkey.bind(['option+down'], (e, action) => {
+hotkey.bind(['option+down'], (e) => {
  const designer = focusing.focusDesigner;
  const doc = designer?.currentDocument;
  if (isFormEvent(e) || !doc) {
@ -315,7 +313,6 @@ hotkey.bind(['option+down'], (e, action) => {
      parent.insertAfter(firstNode, silbing);
    }
    firstNode?.select();
-    return;
  } else {
    const place = parent.getSuitablePlace(firstNode, null); // upwards
    if (place) {
--- a/packages/designer/src/designer/clipboard.ts
+++ b/packages/designer/src/designer/clipboard.ts
@ -1,5 +1,5 @@
 function getDataFromPasteEvent(event: ClipboardEvent) {
-  const clipboardData = event.clipboardData;
+  const { clipboardData } = event;
  if (!clipboardData) {
    return null;
  }
@ -14,7 +14,7 @@ function getDataFromPasteEvent(event: ClipboardEvent) {
      return data;
    } else if (data.componentName) {
      return {
-        componentsTree: [ data ]
+        componentsTree: [data],
      };
    }
  } catch (error) {
@ -34,12 +34,13 @@ function getDataFromPasteEvent(event: ClipboardEvent) {
    return {
      code: clipboardData.getData('text/plain'),
      maps: {},
-    };*/
+    }; */
  }
 }

 class Clipboard {
  private copyPasters: HTMLTextAreaElement[] = [];
+
  private waitFn?: (data: any, e: ClipboardEvent) => void;

  isCopyPasteEvent(e: Event) {
--- a/packages/designer/src/designer/designer-view.tsx
+++ b/packages/designer/src/designer/designer-view.tsx
@ -24,7 +24,7 @@ export class DesignerView extends Component<DesignerProps & {

  shouldComponentUpdate(nextProps: DesignerProps) {
    this.designer.setProps(nextProps);
-    const props = this.props;
+    const { props } = this;
    if (
      nextProps.className !== props.className ||
      nextProps.style !== props.style ||
@ -44,7 +44,7 @@ export class DesignerView extends Component<DesignerProps & {
    this.designer.postEvent('mount', this.designer);
  }

-  componentWillMount() {
+  UNSAFE_componentWillMount() {
    this.designer.purge();
  }

--- a/packages/designer/src/designer/designer.ts
+++ b/packages/designer/src/designer/designer.ts
@ -44,9 +44,13 @@ export interface DesignerProps {

 export class Designer {
  readonly dragon = new Dragon(this);
+
  readonly activeTracker = new ActiveTracker();
+
  readonly detecting = new Detecting();
+
  readonly project: Project;
+
  readonly editor: IEditor;

  get currentDocument() {
@ -132,6 +136,7 @@ export class Designer {
              [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
              parent?.componentMeta?.componentName ||
              '';
+            // eslint-disable-next-line no-unused-expressions
            this.editor?.emit('designer.drag', {
              time: (endTime - startTime).toFixed(2),
              selected: nodes
@ -139,6 +144,7 @@ export class Designer {
                  if (!n) {
                    return;
                  }
+                  // eslint-disable-next-line no-shadow
                  const npm = n?.componentMeta?.npm;
                  return (
                    [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
@ -171,9 +177,8 @@ export class Designer {
        selectionDispose();
        selectionDispose = undefined;
      }
-      // TODO: 加开关控制(yiyi)
-      // 避免选中 Page 组件，默认选中第一个子节点
      const currentSelection = this.currentSelection;
+      // TODO: yiyi 加开关控制，避免选中 Page 组件，默认选中第一个子节点
      if (currentSelection && currentSelection.selected.length === 0) {
        const rootNodeChildrens = this.currentDocument.getRoot().getChildren().children;
        if (rootNodeChildrens.length > 0) {
@ -195,7 +200,7 @@ export class Designer {
      }
      this.postEvent('history.change', this.currentHistory);
      if (this.currentHistory) {
-        const currentHistory = this.currentHistory;
+        const { currentHistory } = this;
        historyDispose = currentHistory.onStateChange(() => {
          this.postEvent('history.change', currentHistory);
        });
@ -225,6 +230,7 @@ export class Designer {
  get dropLocation() {
    return this._dropLocation;
  }
+
  /**
   * 创建插入位置，考虑放到 dragon 中
   */
@ -254,6 +260,7 @@ export class Designer {
  }

  private oobxList: OffsetObserver[] = [];
+
  createOffsetObserver(nodeInstance: INodeSelector): OffsetObserver | null {
    const oobx = createOffsetObserver(nodeInstance);
    this.clearOobxList();
@ -310,6 +317,7 @@ export class Designer {
  }

  private props?: DesignerProps;
+
  setProps(nextProps: DesignerProps) {
    const props = this.props ? { ...this.props, ...nextProps } : nextProps;
    if (this.props) {
@ -388,6 +396,7 @@ export class Designer {
  }

  @obx.val private _componentMetasMap = new Map<string, ComponentMeta>();
+
  private _lostComponentMetasMap = new Map<string, ComponentMeta>();

  private buildComponentMetasMap(metas: ComponentMetadata[]) {
@ -459,6 +468,7 @@ export class Designer {
  }

  private propsReducers = new Map<TransformStage, PropsReducer[]>();
+
  transformProps(props: CompositeObject | PropsList, node: Node, stage: TransformStage) {
    if (Array.isArray(props)) {
      // current not support, make this future
@ -472,7 +482,7 @@ export class Designer {

    return reducers.reduce((xprops, reducer) => {
      try {
-        return reducer(xprops, node)
+        return reducer(xprops, node);
      } catch (e) {
        // todo: add log
        console.warn(e);
--- a/packages/designer/src/designer/detecting.ts
+++ b/packages/designer/src/designer/detecting.ts
@ -3,18 +3,22 @@ import { Node, DocumentModel } from '../document';

 export class Detecting {
  @obx.ref private _enable = true;
+
  get enable() {
    return this._enable;
  }
+
  set enable(flag: boolean) {
    this._enable = flag;
    if (!flag) {
      this._current = null;
    }
  }
+
  @obx.ref xRayMode = false;

  @obx.ref private _current: Node | null = null;
+
  get current() {
    return this._current;
  }
--- a/packages/designer/src/designer/drag-ghost/index.tsx
+++ b/packages/designer/src/designer/drag-ghost/index.tsx
@ -9,9 +9,13 @@ type offBinding = () => any;
@observer
 export default class DragGhost extends Component<{ designer: Designer }> {
  private dispose: offBinding[] = [];
+
  @obx.ref private dragObject: DragObject | null = null;
+
  @obx.ref private x = 0;
+
  @obx.ref private y = 0;
+
  private dragon = this.props.designer.dragon;

  constructor(props: any) {
@ -48,7 +52,7 @@ export default class DragGhost extends Component<{ designer: Designer }> {
  }

  renderGhostGroup() {
-    const dragObject = this.dragObject;
+    const { dragObject } = this;
    if (isDragNodeObject(dragObject)) {
      return dragObject.nodes.map(node => {
        const ghost = (
--- a/packages/designer/src/designer/dragon.ts
+++ b/packages/designer/src/designer/dragon.ts
@ -77,6 +77,7 @@ export interface ISensor {
 export type DragObject = DragNodeObject | DragNodeDataObject | DragAnyObject;

 export enum DragObjectType {
+  // eslint-disable-next-line no-shadow
  Node = 'node',
  NodeData = 'nodedata',
 }
@ -191,11 +192,13 @@ export class Dragon {
   * current actived sensor, 可用于感应区高亮
   */
  @obx.ref private _activeSensor: ISensor | undefined;
+
  get activeSensor(): ISensor | undefined {
    return this._activeSensor;
  }

  @obx.ref private _dragging = false;
+
  get dragging(): boolean {
    return this._dragging;
  }
@ -237,7 +240,7 @@ export class Dragon {
   * @param boostEvent 拖拽初始时事件
   */
  boost(dragObject: DragObject, boostEvent: MouseEvent | DragEvent) {
-    const designer = this.designer;
+    const { designer } = this;
    const masterSensors = this.getMasterSensors();
    const handleEvents = makeEventsHandler(boostEvent, masterSensors);
    const newBie = !isDragNodeObject(dragObject);
--- a/packages/designer/src/designer/index.ts
+++ b/packages/designer/src/designer/index.ts
@ -1,4 +1,5 @@
 import './builtin-hotkey';
+
 export * from './designer';
 export * from './designer-view';
 export * from './dragon';
--- a/packages/designer/src/designer/location.ts
+++ b/packages/designer/src/designer/location.ts
@ -127,9 +127,13 @@ export function getWindow(elem: Element | Document): Window {

 export class DropLocation {
  readonly target: ParentalNode;
+
  readonly detail: LocationDetail;
+
  readonly event: LocateEvent;
+
  readonly source: string;
+
  get document(): DocumentModel {
    return this.target.document;
  }
--- a/packages/designer/src/designer/offset-observer.ts
+++ b/packages/designer/src/designer/offset-observer.ts
@ -7,14 +7,23 @@ export class OffsetObserver {
  readonly id = uniqueId('oobx');

  private lastOffsetLeft?: number;
+
  private lastOffsetTop?: number;
+
  private lastOffsetHeight?: number;
+
  private lastOffsetWidth?: number;
+
  @obx private _height = 0;
+
  @obx private _width = 0;
+
  @obx private _left = 0;
+
  @obx private _top = 0;
+
  @obx private _right = 0;
+
  @obx private _bottom = 0;

  @computed get height() {
@ -42,6 +51,7 @@ export class OffsetObserver {
  }

  @obx hasOffset = false;
+
  @computed get offsetLeft() {
    if (this.isRoot) {
      return this.viewport.scrollX * this.scale;
@ -51,6 +61,7 @@ export class OffsetObserver {
    }
    return this.lastOffsetLeft;
  }
+
  @computed get offsetTop() {
    if (this.isRoot) {
      return this.viewport.scrollY * this.scale;
@ -60,12 +71,14 @@ export class OffsetObserver {
    }
    return this.lastOffsetTop;
  }
+
  @computed get offsetHeight() {
    if (!this.viewport.scrolling || this.lastOffsetHeight == null) {
      this.lastOffsetHeight = this.isRoot ? this.viewport.height : this.height;
    }
    return this.lastOffsetHeight;
  }
+
  @computed get offsetWidth() {
    if (!this.viewport.scrolling || this.lastOffsetWidth == null) {
      this.lastOffsetWidth = this.isRoot ? this.viewport.width : this.width;
@ -78,8 +91,11 @@ export class OffsetObserver {
  }

  private pid: number | undefined;
+
  readonly viewport: IViewport;
+
  private isRoot: boolean;
+
  readonly node: Node;

  readonly compute: () => void;
@ -109,18 +125,17 @@ export class OffsetObserver {

      if (!rect) {
        this.hasOffset = false;
-      } else {
-        if (!this.viewport.scrolling || !this.hasOffset) {
-          this._height = rect.height;
-          this._width = rect.width;
-          this._left = rect.left;
-          this._top = rect.top;
-          this._right = rect.right;
-          this._bottom = rect.bottom;
-          this.hasOffset = true;
-        }
+      } else if (!this.viewport.scrolling || !this.hasOffset) {
+        this._height = rect.height;
+        this._width = rect.width;
+        this._left = rect.left;
+        this._top = rect.top;
+        this._right = rect.right;
+        this._bottom = rect.bottom;
+        this.hasOffset = true;
      }
-      this.pid = pid = (window as any).requestIdleCallback(compute);
+      this.pid = (window as any).requestIdleCallback(compute);
+      pid = this.pid;
    };

    this.compute = compute;
@ -128,7 +143,8 @@ export class OffsetObserver {
    // try first
    compute();
    // try second, ensure the dom mounted
-    this.pid = pid = (window as any).requestIdleCallback(compute);
+    this.pid = (window as any).requestIdleCallback(compute);
+    pid = this.pid;
  }

  purge() {
--- a/packages/designer/src/designer/scroller.ts
+++ b/packages/designer/src/designer/scroller.ts
@ -4,9 +4,11 @@ export class ScrollTarget {
  get left() {
    return 'scrollX' in this.target ? this.target.scrollX : this.target.scrollLeft;
  }
+
  get top() {
    return 'scrollY' in this.target ? this.target.scrollY : this.target.scrollTop;
  }
+
  scrollTo(options: { left?: number; top?: number }) {
    this.target.scrollTo(options);
  }
@ -24,6 +26,7 @@ export class ScrollTarget {
  }

  private doe?: HTMLElement;
+
  constructor(private target: Window | Element) {
    if (isWindow(target)) {
      this.doe = target.document.documentElement;
@ -50,6 +53,8 @@ export interface IScrollable {
 export class Scroller {
  private pid: number | undefined;

+  constructor(private scrollable: IScrollable) {}
+
  get scrollTarget(): ScrollTarget | null {
    let target = this.scrollable.scrollTarget;
    if (!target) {
@ -62,19 +67,17 @@ export class Scroller {
    return target;
  }

-  constructor(private scrollable: IScrollable) {}
-
  scrollTo(options: { left?: number; top?: number }) {
    this.cancel();

-    const scrollTarget = this.scrollTarget;
+    const { scrollTarget } = this;
    if (!scrollTarget) {
      return;
    }

    let pid: number;
-    const left = scrollTarget.left;
-    const top = scrollTarget.top;
+    const { left } = scrollTarget;
+    const { top } = scrollTarget;
    const end = () => {
      this.cancel();
    };
@ -106,20 +109,22 @@ export class Scroller {
      scrollTarget.scrollTo(opt);

      if (time < 1) {
-        this.pid = pid = requestAnimationFrame(animate);
+        this.pid = requestAnimationFrame(animate);
+        pid = this.pid;
      } else {
        end();
      }
    };

-    this.pid = pid = requestAnimationFrame(animate);
+    this.pid = requestAnimationFrame(animate);
+    pid = this.pid;
  }

  scrolling(point: { globalX: number; globalY: number }) {
    this.cancel();

    const { bounds, scale = 1 } = this.scrollable;
-    const scrollTarget = this.scrollTarget;
+    const { scrollTarget } = this;
    if (!scrollTarget || !bounds) {
      return;
    }
--- a/packages/designer/src/designer/setting/setting-field.ts
+++ b/packages/designer/src/designer/setting/setting-field.ts
@ -19,29 +19,37 @@ function getSettingFieldCollectorKey(parent: SettingEntry, config: FieldConfig)

 export class SettingField extends SettingPropEntry implements SettingEntry {
  readonly isSettingField = true;
+
  readonly isRequired: boolean;
+
  readonly transducer: Transducer;
+
  private _config: FieldConfig;
+
  extraProps: FieldExtraProps;

  // ==== dynamic properties ====
  private _title?: TitleContent;
+
  get title() {
    // FIXME! intl
    return this._title || (typeof this.name === 'number' ? `项目 ${this.name}` : this.name);
  }
+
  private _setter?: SetterType | DynamicSetter;
+
  @computed get setter(): SetterType | null {
    if (!this._setter) {
      return null;
    }
    if (isDynamicSetter(this._setter)) {
-      return this._setter.call(this,this);
+      return this._setter.call(this, this);
    }
    return this._setter;
  }

  @obx.ref private _expanded = true;
+
  get expanded(): boolean {
    return this._expanded;
  }
@ -62,7 +70,7 @@ export class SettingField extends SettingPropEntry implements SettingEntry {
      ...extraProps,
    };
    this.isRequired = config.isRequired || (setter as any)?.isRequired;
-    this._expanded = extraProps?.defaultCollapsed ? false : true;
+    this._expanded = !extraProps?.defaultCollapsed;

    // initial items
    if (items && items.length > 0) {
--- a/packages/designer/src/designer/setting/setting-prop-entry.ts
+++ b/packages/designer/src/designer/setting/setting-prop-entry.ts
@ -1,4 +1,4 @@
-import { obx, computed, autorun } from '@ali/lowcode-editor-core';
+import { obx, computed } from '@ali/lowcode-editor-core';
 import { IEditor, isJSExpression } from '@ali/lowcode-types';
 import { uniqueId } from '@ali/lowcode-utils';
 import { SettingEntry } from './setting-entry';
@ -10,24 +10,36 @@ import { EventEmitter } from 'events';
 export class SettingPropEntry implements SettingEntry {
  // === static properties ===
  readonly editor: IEditor;
+
  readonly isSameComponent: boolean;
+
  readonly isMultiple: boolean;
+
  readonly isSingle: boolean;
+
  readonly nodes: Node[];
+
  readonly componentMeta: ComponentMeta | null;
+
  readonly designer: Designer;
+
  readonly top: SettingEntry;
+
  readonly isGroup: boolean;
+
  readonly type: 'field' | 'group';
+
  readonly id = uniqueId('entry');

  readonly emitter = new EventEmitter();

  // ==== dynamic properties ====
  @obx.ref private _name: string | number;
+
  get name() {
    return this._name;
  }
+
  @computed get path() {
    const path = this.parent.path.slice();
    if (this.type === 'field') {
@ -133,7 +145,7 @@ export class SettingPropEntry implements SettingEntry {
   * 获取当前属性值
   */
  @computed getValue(): any {
-    let val: any = undefined;
+    let val: any;
    if (this.type === 'field') {
      val = this.parent.getPropValue(this.name);
    }
@ -271,6 +283,7 @@ export class SettingPropEntry implements SettingEntry {
  isIgnore() {
    return false;
  }
+
  /*
  getConfig<K extends keyof IPropConfig>(configName?: K): IPropConfig[K] | IPropConfig {
    if (configName) {
@ -287,6 +300,7 @@ export class SettingPropEntry implements SettingEntry {
    }
    return '';
  }
+
  setVariableValue(value: string) {
    const v = this.getValue();
    this.setValue({
@ -295,6 +309,7 @@ export class SettingPropEntry implements SettingEntry {
      mock: isJSExpression(v) ? v.mock : v,
    });
  }
+
  setUseVariable(flag: boolean) {
    if (this.isUseVariable() === flag) {
      return;
@ -310,12 +325,15 @@ export class SettingPropEntry implements SettingEntry {
      });
    }
  }
+
  isUseVariable() {
    return isJSExpression(this.getValue());
  }
+
  get useVariable() {
    return this.isUseVariable();
  }
+
  getMockOrValue() {
    const v = this.getValue();
    if (isJSExpression(v)) {
--- a/packages/designer/src/designer/setting/setting-top-entry.ts
+++ b/packages/designer/src/designer/setting/setting-top-entry.ts
@ -2,7 +2,7 @@ import { EventEmitter } from 'events';
 import { CustomView, isCustomView, IEditor } from '@ali/lowcode-types';
 import { computed } from '@ali/lowcode-editor-core';
 import { SettingEntry } from './setting-entry';
-import { SettingField, isSettingField } from './setting-field';
+import { SettingField } from './setting-field';
 import { SettingPropEntry } from './setting-prop-entry';
 import { Node } from '../../document';
 import { ComponentMeta } from '../../component-meta';
@ -17,12 +17,19 @@ function generateSessionId(nodes: Node[]) {

 export class SettingTopEntry implements SettingEntry {
  private emitter = new EventEmitter();
+
  private _items: Array<SettingField | CustomView> = [];
+
  private _componentMeta: ComponentMeta | null = null;
-  private _isSame: boolean = true;
+
+  private _isSame = true;
+
  private _settingFieldMap: { [prop: string]: SettingField } = {};
+
  readonly path = [];
+
  readonly top = this;
+
  readonly parent = this;

  get componentMeta() {
@ -55,7 +62,9 @@ export class SettingTopEntry implements SettingEntry {
  }

  readonly id: string;
+
  readonly first: Node;
+
  readonly designer: Designer;

  constructor(readonly editor: IEditor, readonly nodes: Node[]) {
@ -75,7 +84,7 @@ export class SettingTopEntry implements SettingEntry {

  private setupComponentMeta() {
    // todo: enhance compile a temp configure.compiled
-    const first = this.first;
+    const { first } = this;
    const meta = first.componentMeta;
    const l = this.nodes.length;
    let theSame = true;
@ -100,7 +109,7 @@ export class SettingTopEntry implements SettingEntry {
      const settingFieldMap: { [prop: string]: SettingField } = {};
      const settingFieldCollector = (name: string | number, field: SettingField) => {
        settingFieldMap[name] = field;
-      }
+      };
      this._items = this.componentMeta.configure.map((item) => {
        if (isCustomView(item)) {
          return item;
@ -209,18 +218,23 @@ export class SettingTopEntry implements SettingEntry {
  getStatus() {

  }
+
  setStatus() {

  }
+
  getChildren() {
    // this.nodes.map()
  }
+
  getDOMNode() {

  }
+
  getId() {
    return this.id;
  }
+
  getPage() {
    return this.first.document;
  }
@ -231,6 +245,7 @@ export class SettingTopEntry implements SettingEntry {
  get node() {
    return this.getNode();
  }
+
  getNode() {
    return this.nodes[0];
  }
--- a/Show More
+++ b/Show More