feat: immigrate aimake materialin

.eslintignore

@@ -1,15 +0,0 @@
-node_modules
-dist
-build
-coverage
-expected
-website
-gh-pages
-vendors
-packages/build-scripts/test
-packages/build-scripts/bin
-packages/build-scripts/lib
-packages/build-plugin-store/lib
-packages/build-plugin-ice-router/lib
-packages/build-plugin-ice-stark-child/lib
-packages/build-plugin-env-config/lib

.eslintrc.js

@@ -1,34 +0,0 @@
-const { eslint, tslint, deepmerge } = require('@ice/spec');
-
-const commonRules = {
-  'global-require': 0,
-  'import/no-dynamic-require': 0,
-  'no-restricted-syntax': ['error', "BinaryExpression[operator='of']"],
-};
-
-const jsRules = deepmerge(eslint, {
-  rules: {
-    ...commonRules,
-  },
-});
-
-const tsRules = deepmerge(tslint, {
-  rules: {
-    ...commonRules,
-    '@typescript-eslint/explicit-function-return-type': ['warn', {
-      allowTypedFunctionExpressions: true,
-    }],
-  },
-});
-
-delete tsRules.root;
-
-module.exports = {
-  ...jsRules,
-  overrides: [
-    {
-      ...tsRules,
-      files: ['**/*.ts', '**/*.tsx'],
-    },
-  ],
-};

package.json

@@ -5,10 +5,11 @@
     "boot": "lerna bootstrap --registry http://registry.npm.alibaba-inc.com --hoist",
     "clean": "rimraf ./packages/*/lib ./packages/*/node_modules",
     "pub": "npm run test && lerna publish --registry http://registry.npm.alibaba-inc.com",
-    "lint": "eslint --cache --quiet --ext .ts ./",
-    "lint:fix": "eslint --fix --cache --quiet --ext .ts ./",
+    "lint": "tslint -p tsconfig.json",
+    "lint:fix": "tslint --fix -p tsconfig.json",
     "build": "lerna run build",
-    "test": "lerna run test"
+    "test": "lerna run test",
+    "snapshot": "lerna run snapshot"
   },
   "devDependencies": {
     "@types/node": "^10.12.18",
@@ -31,7 +32,7 @@
   "lint-staged": {
     "*.ts": [
       "prettier --write",
-      "eslint --fix --cache --quiet --ext .ts ./",
+      "tslint --fix -p tsconfig.json",
       "git add"
     ]
   },

packages/material-parser/package.json

@@ -8,7 +8,11 @@
     "schemas"
   ],
   "devDependencies": {
+    "@types/debug": "^4.1.5",
+    "@types/fs-extra": "^8.0.1",
     "@types/js-yaml": "^3.12.2",
+    "@types/lodash": "^4.14.149",
+    "@types/semver": "^7.1.0",
     "ajv": "^6.10.2",
     "better-ajv-errors": "^0.6.4",
     "globby": "^10.0.1",
@@ -20,10 +24,12 @@
     "build": "tsc",
     "prebuild": "npm run schema",
     "test": "ava",
+    "snapshot": "ava --update-snapshots",
     "schema": "node ./scripts/transform.js"
   },
   "ava": {
     "compileEnhancements": false,
+    "snapshotDir": "test/fixtures/__snapshots__",
     "extensions": [
       "ts"
     ],
@@ -31,5 +37,17 @@
       "ts-node/register"
     ]
   },
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "@babel/generator": "^7.8.4",
+    "@babel/parser": "^7.8.4",
+    "@babel/traverse": "^7.8.4",
+    "@babel/types": "^7.8.3",
+    "cross-spawn-promise": "^0.10.2",
+    "debug": "^4.1.1",
+    "fs-extra": "^8.1.0",
+    "lodash": "^4.17.15",
+    "semver": "^7.1.3",
+    "short-uuid": "^3.1.1"
+  }
 }

packages/material-parser/src/Materialize.ts

@@ -0,0 +1,48 @@
+import LocalAccesser from './accesser/LocalAccesser';
+import OnlineAccesser from './accesser/OnlineAccesser';
+import { IMaterialinSchema } from './otter-core';
+import { IAccesser, IMaterializeOptions } from './types';
+
+/**
+ * 物料化（将普通组件包装为可接入和可流通的物料组件的过程，称为物料化）运行于 node 端
+ * @class Materialize
+ */
+class Materialize {
+  /**
+   * 物料化配置项
+   * @private
+   * @type {IMaterializeOptions}
+   * @memberof Materialize
+   */
+  private options: IMaterializeOptions;
+
+  /**
+   * 接入器
+   * @private
+   * @type {IAccesser}
+   * @memberof Materialize
+   */
+  private accesser?: IAccesser;
+
+  constructor(options: IMaterializeOptions) {
+    this.options = options;
+  }
+
+  /**
+   * 开始物料化
+   *
+   * @returns {Promise<IMaterialinSchema>}
+   * @memberof Materialize
+   */
+  public async start(): Promise<IMaterialinSchema> {
+    // 分发请求到对应接入器
+    if (this.options.accesser === 'local') {
+      this.accesser = new LocalAccesser(this.options);
+    } else {
+      this.accesser = new OnlineAccesser(this.options);
+    }
+    return this.accesser.access();
+  }
+}
+
+export default Materialize;

packages/material-parser/src/accesser/BaseAccesser.ts

@@ -0,0 +1,26 @@
+import { IMaterialinSchema } from '../otter-core';
+import { IAccesser, IMaterializeOptions } from '../types';
+
+/**
+ * 接入器模板基类
+ * @abstract
+ * @class BaseAccesser
+ * @implements {IAccesser}
+ */
+abstract class BaseAccesser implements IAccesser {
+  /**
+   * 物料化配置项
+   * @protected
+   * @type {IMaterializeOptions}
+   * @memberof BaseAccesser
+   */
+  protected options: IMaterializeOptions;
+
+  constructor(options: IMaterializeOptions) {
+    this.options = options;
+  }
+
+  public abstract access(): Promise<IMaterialinSchema>;
+}
+
+export default BaseAccesser;

packages/material-parser/src/accesser/LocalAccesser.ts

@@ -0,0 +1,77 @@
+import Generator from '../generator/Generator';
+import { debug, IMaterialinSchema } from '../otter-core';
+import BaseParser from '../parser/BaseParser';
+import ReactParser from '../parser/ReactParser';
+import Scanner from '../scanner/Scanner';
+import { IMaterialParsedModel, IMaterialScanModel, IParser } from '../types';
+import BaseAccesser from './BaseAccesser';
+
+const log = debug.extend('mat');
+
+/**
+ * 本地接入器
+ * @class LocalAccesser
+ * @extends {BaseAccesser}
+ */
+class LocalAccesser extends BaseAccesser {
+  /**
+   * 扫描器实例
+   * @private
+   * @type {Scanner}
+   * @memberof LocalAccesser
+   */
+  private scanner!: Scanner;
+
+  /**
+   * 解析器实例
+   * @private
+   * @type {IParser}
+   * @memberof LocalAccesser
+   */
+  private parser!: IParser;
+
+  /**
+   * 生成器实例
+   * @private
+   * @type {Generator}
+   * @memberof LocalAccesser
+   */
+  private generator!: Generator;
+
+  public async access(): Promise<IMaterialinSchema> {
+    await this.init();
+    // 开始扫描
+    const matScanModel: IMaterialScanModel = await this.scanner.scan();
+    log('matScanModel', matScanModel);
+    // 开始解析
+    const matParsedModels: IMaterialParsedModel[] = await this.parser.parse(
+      matScanModel,
+    );
+    log('matParsedModels', matParsedModels);
+    // 开始生产
+    const material: IMaterialinSchema = await this.generator.generate(
+      matScanModel,
+      matParsedModels,
+    );
+    log('material', material);
+    return material;
+  }
+
+  /**
+   * 初始化
+   * @private
+   * @returns {Promise<void>}
+   * @memberof LocalAccesser
+   */
+  private async init(): Promise<void> {
+    const options = this.options;
+    this.scanner = new Scanner(options);
+    const ecology = await BaseParser.recognizeEcology(options);
+    if (ecology === 'react') {
+      this.parser = new ReactParser(options);
+      this.generator = new Generator(options);
+    }
+  }
+}
+
+export default LocalAccesser;

packages/material-parser/src/accesser/OnlineAccesser.ts

@@ -0,0 +1,121 @@
+import spawn from 'cross-spawn-promise';
+import { ensureDir, ensureFile, writeFile } from 'fs-extra';
+import { join } from 'path';
+import semver from 'semver';
+import uuid from 'short-uuid';
+import { debug, IMaterialinSchema, OtterError } from '../otter-core';
+import { IMaterializeOptions } from '../types';
+import BaseAccesser from './BaseAccesser';
+import LocalAccesser from './LocalAccesser';
+
+const log = debug.extend('mat');
+
+/**
+ * 在线接入
+ * @class OnlineAccesser
+ * @extends {BaseAccesser}
+ */
+class OnlineAccesser extends BaseAccesser {
+  /**
+   * 临时目录
+   *
+   * @private
+   * @type {string}
+   * @memberof OnlineAccesser
+   */
+  private tempDir: string = '';
+
+  public async access(): Promise<IMaterialinSchema> {
+    // 创建临时目录
+    this.tempDir = await this.createTempDir();
+    // 创建组件包
+    const { name, version } = this.getPkgNameAndVersion(this.options.entry);
+    await this.createFakePackage({
+      pkgName: name,
+      pkgVersion: version,
+    });
+    // 将问题转化为本地物料化场景
+    const options: IMaterializeOptions = {
+      cwd: this.tempDir,
+      entry: join(this.tempDir, 'node_modules', name),
+      accesser: 'local',
+      isExportedAsMultiple: this.options.isExportedAsMultiple,
+    };
+    const localAccesser = new LocalAccesser(options);
+    return localAccesser.access();
+  }
+
+  /**
+   * 创建组件包
+   *
+   * @private
+   * @param {{
+   *     pkgName: string;
+   *     pkgVersion: string;
+   *   }} params
+   * @returns {Promise<void>}
+   * @memberof OnlineAccesser
+   */
+  private async createFakePackage(params: {
+    pkgName: string;
+    pkgVersion: string;
+  }): Promise<void> {
+    // 创建临时组件包
+    const tempDir = this.tempDir;
+    const pkgJsonFilePath = join(tempDir, 'package.json');
+    await ensureFile(pkgJsonFilePath);
+    await writeFile(
+      pkgJsonFilePath,
+      JSON.stringify({
+        name: params.pkgName,
+        version: params.pkgVersion,
+        dependencies: {
+          [params.pkgName]: params.pkgVersion,
+        },
+      }),
+    );
+    // 安装依赖
+    const npmClient = this.options.npmClient || 'tnpm';
+    await spawn(npmClient, ['i'], { stdio: 'inherit', cwd: tempDir } as any);
+  }
+
+  /**
+   * 创建临时目录
+   *
+   * @private
+   * @returns {Promise<string>} 返回临时文件夹路径
+   * @memberof LocalGenerator
+   */
+  private async createTempDir(): Promise<string> {
+    const tempDirName = uuid.generate();
+    const tempDir = join(__dirname, '../../node_modules/.temp/', tempDirName);
+    await ensureDir(tempDir);
+    log('create temp dir successfully', tempDir);
+    return tempDir;
+  }
+
+  /**
+   * 分离物料组件名称和版本号
+   *
+   * @private
+   * @param {string} pkgNameWithVersion
+   * @returns {{ [key: string]: any }}
+   * @memberof OnlineAccesser
+   */
+  private getPkgNameAndVersion(
+    pkgNameWithVersion: string,
+  ): { [key: string]: any } {
+    const matches = pkgNameWithVersion.match(/(@\d+\.\d+\.\d+)$/);
+    if (!matches) {
+      throw new OtterError(`Illegal semver version: ${pkgNameWithVersion}`);
+    }
+    const semverObj = semver.coerce(matches[0]);
+    const name = pkgNameWithVersion.replace(matches[0], '');
+    return {
+      version: semverObj && semverObj.version,
+      name,
+    };
+  }
+}
+
+export default OnlineAccesser;

packages/material-parser/src/extensions/MatBuildBundle.ts

@@ -0,0 +1,18 @@
+/**
+ * 获取打包后的 bundle 文件（物料化场景下可以使用此扩展点）
+ * - 扩展点名称：mat:build:bundle
+ * - 对应 Studio 所处状态：进入 就绪态 前
+ *
+ * @export
+ * @param {{
+ *   bundleJS: string, // bundle 文件内容
+ *   bundleObj: {[key: string]: any} // bundle 对象
+ * }} params
+ * @returns {Promise<void>}
+ */
+export default function matBuildBundle(params: {
+  bundleJS: string; // bundle 文件内容
+  bundleObj: { [key: string]: any }; // bundle 对象
+}): Promise<void> {
+  return Promise.resolve();
+}

packages/material-parser/src/extensions/MatConfigContainer.ts

@@ -0,0 +1,31 @@
+import { writeFile } from 'fs-extra';
+
+/**
+ * 处理 containerJS（物料化场景下可以使用此扩展点）
+ * - 扩展点名称：mat:config:container
+ * - 对应 Studio 所处状态：进入 就绪态 前
+ *
+ * @export
+ * @param {{
+ *   filePath: string,
+ *   fileContent: string,
+ * }} params
+ * @returns {Promise<{
+ *   filePath: string,
+ *   fileContent: string,
+ * }>}
+ */
+export default async function matConfigContainer(params: {
+  filePath: string;
+  fileContent: string;
+}): Promise<{
+  filePath: string;
+  fileContent: string;
+}> {
+  await writeFile(params.filePath, params.fileContent);
+
+  return {
+    filePath: params.filePath,
+    fileContent: params.fileContent,
+  };
+}

packages/material-parser/src/extensions/MatConfigManifest.ts

@@ -0,0 +1,37 @@
+import { writeFile } from 'fs-extra';
+import { IMaterialinManifest } from '../otter-core';
+
+/**
+ * 配置 manifest（物料化场景下可以使用此扩展点）
+ * - 扩展点名称：mat:config:manifest
+ * - 对应 Studio 所处状态：进入 就绪态 前
+ *
+ * @export
+ * @param {{
+ *   manifestObj: IMaterialinManifest,
+ *   manifestFilePath: string,
+ * }} params
+ * @returns {Promise<{
+ *   manifestJS: string,
+ *   manifestFilePath: string,
+ *   manifestObj: IMaterialinManifest,
+ * }>}
+ */
+export default async function matConfigManifest(params: {
+  manifestObj: IMaterialinManifest;
+  manifestFilePath: string;
+}): Promise<{
+  manifestJS: string;
+  manifestFilePath: string;
+  manifestObj: IMaterialinManifest;
+}> {
+  const manifestJS = `export default ${JSON.stringify(params.manifestObj)}`;
+
+  await writeFile(params.manifestFilePath, manifestJS);
+
+  return Promise.resolve({
+    manifestJS,
+    manifestObj: params.manifestObj,
+    manifestFilePath: params.manifestFilePath,
+  });
+}

packages/material-parser/src/extensions/MatGenerateBuildJS.ts

@@ -0,0 +1,27 @@
+/**
+ * 生成 build 文件，可用于多组件导出场景（物料化场景下可以使用此扩展点）
+ * - 扩展点名称：mat:generate:buildjs
+ * - 对应 Studio 所处状态：进入 就绪态 前
+ *
+ * @export
+ * @param {{
+ *   buildFileContent: string; // build 文件内容
+ *   buildFilePath: string; // build 文件默认路径
+ * }} params
+ * @returns {Promise<{
+ *   buildFileContent: string;
+ *   buildFilePath: string;
+ * }>}
+ */
+export default function matGenerateBuildJS(params: {
+  buildFileContent: string; // build 文件内容
+  buildFilePath: string; // build 文件默认路径
+}): Promise<{
+  buildFileContent: string;
+  buildFilePath: string;
+}> {
+  return Promise.resolve({
+    buildFilePath: params.buildFilePath,
+    buildFileContent: params.buildFileContent,
+  });
+}

packages/material-parser/src/extensions/MatLoadMaterials.ts

@@ -0,0 +1,16 @@
+import { IMaterialinSchema } from '../otter-core';
+
+/**
+ * 加载物料（物料接入场景下可以使用此扩展点）
+ * - 扩展点名称：mat:config:load
+ * - 对应 Studio 所处状态：进入 就绪态 前
+ *
+ * @export
+ * @param {string[]} pkgNameList
+ * @returns {Promise<IMaterialinSchema[]>}
+ */
+export default function matLoadMaterials(
+  pkgNameList: string[],
+): Promise<IMaterialinSchema[]> {
+  return Promise.resolve([]);
+}

packages/material-parser/src/extensions/index.ts

@@ -0,0 +1,12 @@
+import { ExtensionName } from '../types';
+import MatBuildBundle from './MatBuildBundle';
+import MatConfigContainer from './MatConfigContainer';
+import MatConfigManifest from './MatConfigManifest';
+import MatGenerateBuildJS from './MatGenerateBuildJS';
+
+export default {
+  [ExtensionName.CONFIGMANIFEST]: MatConfigManifest,
+  [ExtensionName.BUILDBUNDLE]: MatBuildBundle,
+  [ExtensionName.CONFIGCONTAINER]: MatConfigContainer,
+  [ExtensionName.GENERATEBUILDJS]: MatGenerateBuildJS,
+};

packages/material-parser/src/generator/Generator.ts

@@ -0,0 +1,194 @@
+import { dirname, join } from 'path';
+import defaultExtension from '../extensions';
+import { debug, IMaterialinManifest, IMaterialinProp } from '../otter-core';
+import {
+  ICompiler,
+  IGenerator,
+  IMaterializeOptions,
+  IMaterialParsedModel,
+  IMaterialScanModel,
+} from '../types';
+
+const log = debug.extend('mat');
+
+/**
+ * 用于物料工作台
+ */
+class Generator implements IGenerator {
+  /**
+   * 物料化配置项
+   * @protected
+   * @type {IMaterializeOptions}
+   * @memberof BaseGenerator
+   */
+  /**
+   * 物料化配置项
+   * @protected
+   * @type {IMaterializeOptions}
+   * @memberof BaseGenerator
+   */
+  protected options!: IMaterializeOptions;
+
+  /**
+   * 编译器实例
+   * @protected
+   * @type {ICompiler}
+   * @memberof BaseGenerator
+   */
+  protected compiler!: ICompiler;
+
+  constructor(options: IMaterializeOptions) {
+    this.options = options;
+  }
+
+  public async generate(
+    matScanModel: IMaterialScanModel,
+    matParsedModels: IMaterialParsedModel[],
+  ): Promise<any> {
+    // const model: IMaterialinSchema = {} as any;
+    // 标记协议版本号
+    // model.version = '1.0.0';
+    // 组装 pkgInfo
+    // model.pkgInfo = pkgInfo;
+    const containerList = [];
+    for (const matParsedModel of matParsedModels) {
+      // TODO 可以开放扩展点让上层使用者指定导出哪些组件或者不导出哪些组件
+      // 默认排除掉 defaultExportName 为空的组件
+      if (
+        !matParsedModel.defaultExportName ||
+        !matParsedModel.defaultExportName.length
+      ) {
+        log('skip', matParsedModel.filePath);
+        continue;
+      }
+      // 组装 manifest
+      const manifest: any = await this.genManifest(matParsedModel);
+
+      containerList.push(manifest);
+    }
+
+    // const components: IMaterialinComponent[] = bundle.bundleObj.components;
+    // Object.keys(bundle.bundleObj.Modules).forEach(key => {
+    //   const { origin, manifest } = bundle.bundleObj.Modules[key];
+    //   const component: IMaterialinComponent = {
+    //     componentName: key,
+    //     origin,
+    //     manifest,
+    //   };
+    //   components.push(component);
+    // });
+    // model.components = components;
+    // log('materialsModel', JSON.stringify(bundle.bundleObj));
+
+    return containerList;
+  }
+
+  /**
+   * 生成 manifest
+   *
+   * @param {IMaterialParsedModel} matParsedModel
+   * @returns {Promise<{
+   *     manifestFilePath: string, // manifest 文件路径
+   *     manifestJS: string, // manifest 文件内容
+   *     manifestObj: IMaterialinManifest, // manifest 文件对象
+   *   }>}
+   * @memberof LocalGenerator
+   */
+  public async genManifest(
+    matParsedModel: IMaterialParsedModel,
+  ): Promise<{
+    manifestFilePath: string; // manifest 文件路径
+    manifestJS: string; // manifest 文件内容
+    manifestObj: IMaterialinManifest; // manifest 文件对象
+  }> {
+    const manifestObj: IMaterialinManifest = {
+      name: matParsedModel.defaultExportName,
+      settings: {
+        type: 'element_inline',
+        insertionModes: 'tbrl',
+        handles: ['cut', 'copy', 'duplicate', 'delete', 'paste'],
+        shouldActive: true,
+        shouldDrag: true,
+        props: [],
+      },
+    };
+
+    const defaultManifestFilePath = join(
+      dirname(matParsedModel.filePath),
+      './manifest.js',
+    );
+
+    // 填充 props
+    manifestObj.settings.props = this.populateProps(matParsedModel);
+    // 执行扩展点
+    const manifest: any = await this.executeExtensionPoint(
+      'mat:config:manifest',
+      {
+        manifestObj,
+        manifestFilePath: defaultManifestFilePath,
+      },
+    );
+    return {
+      manifestJS: manifest.manifestJS,
+      manifestObj: manifest.manifestObj,
+      manifestFilePath: manifest.manifestFilePath,
+    };
+  }
+
+  /**
+   * 填充 props
+   *
+   * @public
+   * @param {IMaterialParsedModel} matParsedModel
+   * @returns {IMaterialinProp[]}
+   * @memberof BaseGenerator
+   */
+  public populateProps(
+    matParsedModel: IMaterialParsedModel,
+  ): IMaterialinProp[] {
+    // 填充 props
+    const props: IMaterialinProp[] = [];
+    matParsedModel.propsTypes.forEach(item => {
+      const defaultValueItem = matParsedModel.propsDefaults.find(
+        inner => inner.name === item.name,
+      );
+      props.push({
+        name: item.name,
+        label: item.name,
+        renderer: '',
+        defaultValue: defaultValueItem
+          ? defaultValueItem.defaultValue
+          : undefined,
+      });
+    });
+
+    return props;
+  }
+
+  /**
+   * 执行扩展点
+   * @param {string} extName 扩展点名称
+   * @param {...any[]} args 参数
+   * @returns {Promise<any>}
+   * @memberof BaseGenerator
+   */
+  public async executeExtensionPoint(
+    extName: string,
+    ...args: any[]
+  ): Promise<any> {
+    const options = this.options;
+    const optionsExtensions: any = options.extensions;
+    const defaultExtensions: any = defaultExtension;
+
+    const ext: any =
+      optionsExtensions && optionsExtensions[extName]
+        ? optionsExtensions[extName]
+        : defaultExtensions[extName];
+    if (!ext) {
+      throw new Error(`Unsupported extension point: ${extName}`);
+    }
+    return ext(...args);
+  }
+}
+
+export default Generator;

packages/material-parser/src/index.ts

@@ -1,2 +1,8 @@
+import Materialize from './Materialize';
+
 export { default as validate } from './validate';
-export { default as schema } from './schema.json';
+export { default as schema } from './validate/schema.json';
+
+export * from './types';
+
+export default Materialize;

packages/material-parser/src/otter-core/OtterError.ts

@@ -0,0 +1,70 @@
+import { _ } from './index';
+import { IOtterErrorOptions } from './types';
+
+/**
+ * Fix the prototype chain of the error
+ *
+ * Use Object.setPrototypeOf
+ * Support ES6 environments
+ *
+ * Fallback setting __proto__
+ * Support IE11+, see https://docs.microsoft.com/en-us/scripting/javascript/reference/javascript-version-information
+ */
+function fixPrototype(target: Error, prototype: {}) {
+  const setPrototypeOf: typeof Object.setPrototypeOf = (Object as any)
+    .setPrototypeOf;
+  setPrototypeOf
+    ? setPrototypeOf(target, prototype)
+    : ((target as any).__proto__ = prototype);
+}
+
+/**
+ * Capture and fix the error stack when available
+ *
+ * Use Error.captureStackTrace
+ * Support v8 environments
+ */
+function fixStackTrace(target: Error, fn: any = target.constructor) {
+  const captureStackTrace: any = (Error as any).captureStackTrace;
+  if (captureStackTrace) {
+    captureStackTrace(target, fn);
+  }
+}
+
+class OtterError extends Error {
+  public name: string = '';
+
+  public urlRoot: string = 'https://docs.aimake.io/otter/';
+
+  private options: IOtterErrorOptions = {
+    url: '/',
+    version: '0.0.0',
+  };
+
+  constructor(message?: string, options?: IOtterErrorOptions) {
+    super(message);
+
+    // set error name as constructor name, make it not enumerable to keep native Error behavior
+    // see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target#new.target_in_constructors
+    Object.defineProperty(this, 'name', {
+      value: new.target.name,
+      enumerable: false,
+    });
+
+    // fix the extended error prototype chain
+    // because typescript __extends implementation can't
+    // see https://github.com/Microsoft/TypeScript-wiki/blob/master/Breaking-Changes.md#extending-built-ins-like-error-array-and-map-may-no-longer-work
+    fixPrototype(this, new.target.prototype);
+    // try to remove constructor from stack trace
+    fixStackTrace(this);
+
+    _.extend(this.options, options || {});
+  }
+
+  public toString() {
+    const url = this.urlRoot + this.options.version + this.options.url;
+    return `${this.name}: ${this.message} See: ${url}`;
+  }
+}
+
+export default OtterError;

packages/material-parser/src/otter-core/index.ts

@@ -0,0 +1,21 @@
+import _debug from 'debug';
+import _lodash from 'lodash';
+
+import _OtterError from './OtterError';
+
+export * from './types';
+export * from './schema/types';
+
+/**
+ * Dev helper
+ */
+export const debug = _debug('otter');
+export const enableDebug = () => _debug.enable('otter:*');
+export const disableDebug = () => _debug.disable();
+
+export const OtterError = _OtterError;
+
+/**
+ * Dev utils
+ */
+export const _ = _lodash;

packages/material-parser/src/otter-core/schema/types.ts

@@ -0,0 +1,238 @@
+// 搭建基础协议、搭建入料协议的数据规范
+
+/**
+ * 搭建基础协议
+ *
+ * @export
+ * @interface IBasicSchema
+ */
+export interface IBasicSchema {
+  version: string; // 当前协议版本号
+  componentsMap: IComponentsMapItem[]; // 组件映射关系(用于描述 componentName 到公域组件映射关系的规范)
+  componentsTree: IComponentsTreeItem[]; // 描述模版/页面/区块/低代码业务组件的组件树(用于描述搭建出来的组件树结构的规范)
+}
+
+/**
+ * 搭建基础协议 - 单个组件描述
+ *
+ * @export
+ * @interface IComponentsMapItem
+ */
+export interface IComponentsMapItem {
+  componentName: string; // 组件名称
+  package: string; // 组件包的名称
+  version: string; // 组件包的版本
+  originalPackage: string; // 组件的原始包名称
+  originalVersion: string; // 组件的原始包版本
+  destructuring: boolean; // 组件是否是解构方式方式导出
+  exportName: string; // 导出命名
+  subName?: string; // 下标子组件名称
+}
+
+/**
+ * 搭建基础协议 - 单个组件树节点描述
+ *
+ * @export
+ * @interface IComponentsTreeItem
+ */
+export interface IComponentsTreeItem {
+  id: string; // 节点的唯一标识
+  componentName: string; // 组件名称
+  pkg: string; // 组件所属的包
+  props?: {
+    className?: string; // 组件样式类名
+    style?: { [cssAttribute: string]: string | number }; // 组件内联样式
+    [propName: string]: any; // 业务属性
+  }; // 组件属性对象
+  children?: IComponentsTreeItem[] | string; // 子节点
+  dataSource?: IDataSource; // 数据源
+  state?: {
+    // 初始数据状态
+    [key: string]: any;
+  };
+  methods?: {
+    // 自定事件绑定
+    [methodName: string]: IJSExpression;
+  };
+  lifeCycles?: {
+    // 组件生命周期
+    didMount?: IJSExpression;
+    willMount?: IJSExpression;
+  };
+}
+
+/**
+ * 搭建基础协议 - 函数表达式
+ *
+ * @export
+ * @interface IComponentLifeCycle
+ */
+export interface IJSExpression {
+  type: 'JSExpression';
+  value: string;
+}
+
+/**
+ * 搭建基础协议 - 数据源
+ *
+ * @export
+ * @interface IDataSource
+ */
+export interface IDataSource {
+  list: IDataSourceRequest[]; // 数据源配置列表
+}
+
+/**
+ * 搭建基础协议 - 数据源单个配置
+ *
+ * @export
+ * @interface IDataSourceRequest
+ */
+export interface IDataSourceRequest {
+  id: string; // 数据请求 ID
+  isInit: boolean; // 表示在组件初始化渲染时是否自动发送当前数据请求
+  type: 'fetch' | 'jsonp' | 'custom'; // 数据请求类型
+  options?: IRequestOptions; // 请求参数配置
+  dataHandler?: any; // 数据结果处理函数，形如：(data, err) => Object
+}
+
+/**
+ * 搭建基础协议 - 请求参数配置
+ *
+ * @export
+ * @interface IRequestOptions
+ */
+export interface IRequestOptions {
+  uri: string; // 请求地址
+  params?: {
+    // 请求参数
+    [key: string]: any;
+  };
+  method: 'GET' | 'POST';
+  isCors: boolean; // 是否支持跨域，对应credentials = 'include'
+  timeout: number; // 超时时长
+  headers?: {
+    // 自定义请求头
+    [key: string]: any;
+  };
+}
+
+/**
+ * 组件描述协议
+ *
+ * @export
+ * @interface IMaterialinSchema
+ */
+export interface IMaterialinSchema {
+  version: string; // 当前协议版本号
+  components: IMaterialinComponent[]; // 组件集合
+  pkgInfo: IMaterialinPkgInfo; // 组件包信息描述
+}
+
+/**
+ * 组件描述协议 - 组件包信息描述（供出码引擎消费）
+ *
+ * @export
+ * @interface IMaterialinPkgInfo
+ */
+export interface IMaterialinPkgInfo {
+  // 包名
+  package: string;
+  // 版本号
+  version: string;
+  // 源版本号
+  originalVersion: string;
+  // 源组件包
+  originalPackage: string;
+  // 组件是否是 export 方式导出
+  defaultExportedName: string;
+}
+
+/**
+ * 组件描述协议 - 单个组件描述
+ *
+ * @export
+ * @interface IMaterialinComponent
+ */
+export interface IMaterialinComponent {
+  componentName: string; // 组件名
+  manifest: IMaterialinManifest; // 组件配置信息描述
+  origin: any; // 组件源
+}
+
+/**
+ * 组件描述协议 - 组件配置信息描述
+ *
+ * @export
+ * @interface IMaterialinManifest
+ */
+export interface IMaterialinManifest {
+  name: string; // 组件名
+  settings: IMaterialinSettings; // 定义组件的配置属性
+  description?: string; // 组件的描述
+  coverImage?: string; // 组件的封面图 URL
+  category?: string; // 组件的分类
+  presets?: IMaterialinPreset[]; // 定义组件左侧预览信息
+}
+
+/**
+ * 组件描述协议 - 组件配置属性（直接影响组件在编排工作区中的行为表现）
+ *
+ * @export
+ * @interface IMaterialinSettings
+ */
+export interface IMaterialinSettings {
+  type: 'element_inline' | 'element_block' | 'container'; // 定义组件在编排画布上的渲染类型
+  // 定义组件对于拖拽行为的响应，支持：t、b、r、l、v 组合；形如：tbrl
+  // t：允许元素在组件顶部插入
+  // b：允许元素在组件底部插入
+  // r：允许元素在组件右侧插入
+  // l：允许元素在组件左侧插入
+  // v：允许将元素拖放到组件内部
+  insertionModes: string; // 定义组件在编排画布上的响应模式
+  handles: Array<'cut' | 'copy' | 'paste' | 'delete' | 'duplicate'>; // 定义组件需要响应的右键菜单操作
+  shouldActive: boolean; // 用于控制物料组件在画布区块中是否响应用户鼠标的 Click 操作
+  shouldDrag: boolean; // 用于控制物料组件在画布区块中是否可以被用户拖拽
+  props: IMaterialinProp[]; // 物料组件属性配置
+  lifeCycle?: IMaterialinLifeCycle; // 组件生命周期
+}
+
+/**
+ * 组件描述协议 - 定义组件左侧预览信息
+ *
+ * @export
+ * @interface IMaterialinPreset
+ */
+export interface IMaterialinPreset {
+  alias: string; // 组件的别名
+  thumbnail: string; // 组件的预览缩略图 URL
+  colSpan?: number; // 代表组件所占栅格数
+  customProps?: object; // 自定义属性值
+}
+
+/**
+ * 组件描述协议 - 组件属性的描述
+ *
+ * @export
+ * @interface IMaterialinProp
+ */
+export interface IMaterialinProp {
+  name: string; // 属性名
+  label: string; // 属性展示名称
+  renderer: string; // 属性编辑器类型
+  defaultValue?: any; // 属性默认值
+  params?: any; // 属性编辑器的参数
+  placeholder?: string; // 属性编辑器的 placeholder 信息
+  hint?: string; // 属性编辑器的提示信息（类似于 tooltip 效果），用于帮助用户理解属性的使用方法
+}
+
+/**
+ * 组件描述协议 - 组件生命周期描述
+ *
+ * @export
+ * @interface IMaterialinLifeCycle
+ */
+export interface IMaterialinLifeCycle {
+  didMount?: any; // 组件渲染完成后的钩子
+  didUpdate?: any; // 组件数据状态更新时的钩子
+}

packages/material-parser/src/otter-core/types.ts

@@ -0,0 +1,40 @@
+import { IBasicSchema } from './schema/types';
+
+/**
+ *
+ * @export
+ * @interface IOtterErrorOptions
+ */
+export interface IOtterErrorOptions {
+  url?: string;
+  version?: string;
+}
+
+/**
+ * 组件集合
+ *
+ * @export
+ * @interface IComponents
+ */
+export interface IComponents {
+  [componentPackage: string]: {
+    // 组件包名称
+    [componentName: string]: any; // 组件
+  };
+}
+
+/**
+ * 渲染引擎的输入
+ * 编排引擎、渲染引擎使用
+ *
+ * @export
+ * @interface IRenderInputData
+ */
+export interface IRenderInputData {
+  schema: IBasicSchema;
+  components: IComponents;
+  options?: {
+    domId?: string;
+    propsHooks?: { [propName: string]: any };
+  };
+}

packages/material-parser/src/parser/BaseParser.ts

@@ -0,0 +1,76 @@
+import { OtterError } from '../otter-core';
+import {
+  EcologyType,
+  IMaterializeOptions,
+  IMaterialParsedModel,
+  IMaterialScanModel,
+  IParser,
+  SourceType,
+} from '../types';
+
+/**
+ * 解析器基类
+ * @abstract
+ * @class BaseParser
+ * @implements {IParser}
+ */
+abstract class BaseParser implements IParser {
+  /**
+   * 识别语法生态，判断是 react、vue、rax
+   * @static
+   * @param {IMaterializeOptions} options
+   * @returns {Promise<EcologyType>}
+   * @memberof BaseParser
+   */
+  public static recognizeEcology(
+    options: IMaterializeOptions,
+  ): Promise<EcologyType> {
+    // TODO 识别物料组件生态
+    return Promise.resolve(EcologyType.REACT);
+  }
+
+  private options: IMaterializeOptions;
+
+  constructor(options: IMaterializeOptions) {
+    this.options = options;
+  }
+
+  public async parse(
+    model: IMaterialScanModel,
+  ): Promise<IMaterialParsedModel[]> {
+    const results: IMaterialParsedModel[] = [];
+    switch (model.sourceType) {
+      case SourceType.MODULE: {
+        for (const item of model.modules) {
+          const parsedModel: IMaterialParsedModel = await this.parseES6({
+            model,
+            filePath: item.filePath,
+            fileContent: item.fileContent,
+          });
+          results.push(parsedModel);
+        }
+        break;
+      }
+      case SourceType.MAIN: {
+        this.parseES5(model);
+        break;
+      }
+      default: {
+        throw new OtterError(`Unsupported SourceType [${model.sourceType}]`);
+      }
+    }
+    return results;
+  }
+
+  public abstract parseES5(
+    model: IMaterialScanModel,
+  ): Promise<IMaterialParsedModel>;
+
+  public abstract parseES6(params: {
+    model: IMaterialScanModel;
+    filePath: string;
+    fileContent: string;
+  }): Promise<IMaterialParsedModel>;
+}
+
+export default BaseParser;

packages/material-parser/src/parser/ReactParser.ts

@@ -0,0 +1,962 @@
+import { CodeGenerator } from '@babel/generator';
+import { parse } from '@babel/parser';
+import traverse from '@babel/traverse';
+import * as t from '@babel/types';
+import { debug } from '../otter-core';
+import { IMaterialParsedModel, IMaterialScanModel, SourceType } from '../types';
+import BaseParser from './BaseParser';
+
+const log = debug.extend('mat');
+
+/**
+ * 解析 react 生态下的组件
+ *
+ * @class ReactParser
+ * @extends {BaseParser}
+ */
+class ReactParser extends BaseParser {
+  /**
+   * 解析 ExportStatement
+   * @static
+   * @returns {Promise<any>}
+   * @memberof ReactParser
+   */
+  public static async parseExportedStatement(
+    fileContent: string,
+    sourceType: string,
+  ): Promise<
+    Array<{
+      localName: string;
+      exportedName: string;
+      source: string;
+    }>
+  > {
+    const ast = await parse(fileContent, {
+      sourceType: sourceType === SourceType.MODULE ? 'module' : 'script',
+      plugins: ['jsx'],
+    });
+
+    const specifiers: any = [];
+
+    // 组装 localName 和 exportedName
+    traverse(ast, {
+      enter(path) {
+        if (t.isExportNamedDeclaration(path.node)) {
+          path.node.specifiers.forEach(spec => {
+            if (t.isExportSpecifier(spec)) {
+              const source = (path.node as t.ExportNamedDeclaration).source;
+              specifiers.push({
+                localName: spec.local.name,
+                exportedName: spec.exported.name,
+                source: t.isLiteral(source) ? (source as any).value : '',
+              });
+            }
+          });
+        }
+      },
+    });
+    // 组装 source
+    traverse(ast, {
+      enter(path) {
+        if (t.isImportDeclaration(path.node)) {
+          const source = path.node.source;
+          path.node.specifiers.forEach(spec => {
+            if (t.isImportDefaultSpecifier(spec)) {
+              const target = specifiers.find(
+                (inner: any) => inner.localName === spec.local.name,
+              );
+              if (target) {
+                target.source = source.value;
+              }
+            }
+          });
+        }
+      },
+    });
+    debug('specifiers', specifiers);
+    return specifiers;
+  }
+
+  public async parseES5(
+    model: IMaterialScanModel,
+  ): Promise<IMaterialParsedModel> {
+    const parsedModel: IMaterialParsedModel = {
+      filePath: '',
+      defaultExportName: '',
+      componentNames: [],
+      importModules: [],
+      exportModules: [],
+      subModules: [],
+      propsTypes: [],
+      propsDefaults: [],
+    };
+
+    const mainEntryItem: any = model.modules.find(
+      item => item.filePath === model.mainEntry,
+    );
+    // log('mainEntryItem', mainEntryItem);
+    const ast = await parse(mainEntryItem.file, {
+      sourceType: 'script',
+      plugins: ['jsx'],
+    });
+
+    // 获取 defaultExportName
+    traverse(ast, {
+      enter(path) {
+        if (t.isExpressionStatement(path.node)) {
+          if (
+            t.isAssignmentExpression(path.node.expression) &&
+            t.isMemberExpression(path.node.expression.left) &&
+            t.isIdentifier(path.node.expression.left.object) &&
+            t.isIdentifier(path.node.expression.right) &&
+            path.node.expression.left.object.name === 'exports' &&
+            (path.node.expression.left.property.name === 'default' ||
+              path.node.expression.left.property.value === 'default')
+          ) {
+            // 支持 export default Demo 写法
+            const tempVarName = path.node.expression.right.name;
+            let defaultExportName = '';
+            traverse(ast, {
+              enter(innerPath) {
+                if (
+                  t.isVariableDeclaration(innerPath.node) &&
+                  Array.isArray(innerPath.node.declarations) &&
+                  innerPath.node.declarations.length &&
+                  t.isVariableDeclarator(innerPath.node.declarations[0]) &&
+                  t.isIdentifier(innerPath.node.declarations[0].id) &&
+                  innerPath.node.declarations[0].id.name === tempVarName &&
+                  t.isIdentifier(innerPath.node.declarations[0].init)
+                ) {
+                  defaultExportName = innerPath.node.declarations[0].init.name;
+                }
+              },
+            });
+            parsedModel.defaultExportName = defaultExportName;
+            log('isIdentifier defaultExportName', defaultExportName);
+          }
+        }
+      },
+    });
+
+    traverse(ast, {
+      enter(path) {
+        // 获取 componentNames
+        if (t.isVariableDeclaration(path.node)) {
+          if (
+            t.isVariableDeclarator(path.node.declarations) &&
+            t.isIdentifier(path.node.declarations.init) &&
+            t.isIdentifier(path.node.declarations.id)
+          ) {
+            const exportedName = path.node.declarations.init.name;
+            const localName = path.node.declarations.id.name;
+            log('isIdentifier componentNames', exportedName);
+            parsedModel.componentNames.push({
+              exportedName,
+              localName,
+            });
+          }
+        }
+        // 获取 exportModules
+        if (t.isExpressionStatement(path.node)) {
+          // 对应 export function DemoFunc() {} 或 export { DemoFunc } 写法
+          if (
+            t.isAssignmentExpression(path.node.expression) &&
+            t.isMemberExpression(path.node.expression.left) &&
+            t.isIdentifier(path.node.expression.left.object) &&
+            t.isIdentifier(path.node.expression.left.property) &&
+            t.isIdentifier(path.node.expression.right) &&
+            path.node.expression.left.object.name === 'exports'
+          ) {
+            const exportedName = path.node.expression.left.property.name;
+            const localName = path.node.expression.right.name;
+            parsedModel.exportModules.push({
+              exportedName:
+                exportedName === 'default'
+                  ? parsedModel.defaultExportName
+                  : exportedName,
+              localName:
+                exportedName === 'default'
+                  ? parsedModel.defaultExportName
+                  : localName,
+            });
+          }
+          // 支持 export { default as DemoFunc } from './DemoFunc' 写法
+          if (
+            t.isCallExpression(path.node.expression) &&
+            t.isMemberExpression(path.node.expression.callee) &&
+            t.isIdentifier(path.node.expression.callee.object) &&
+            t.isIdentifier(path.node.expression.callee.property) &&
+            path.node.expression.callee.object.name === 'Object' &&
+            path.node.expression.callee.property.name === 'defineProperty' &&
+            Array.isArray(path.node.expression.arguments) &&
+            t.isIdentifier(path.node.expression.arguments[0]) &&
+            (path.node.expression.arguments[0] as t.Identifier).name ===
+              'exports' &&
+            t.isLiteral(path.node.expression.arguments[1])
+          ) {
+            // 对应 export function DemoFunc() {} 或 export { DemoFunc } 写法
+            const args = path.node.expression.arguments as any;
+            const funcName = args[1].value;
+            if (funcName !== '__esModule') {
+              parsedModel.exportModules.push({
+                exportedName: funcName,
+                localName: funcName,
+              });
+            }
+          }
+        }
+        // 获取 importModules
+        if (
+          t.isVariableDeclaration(path.node) &&
+          Array.isArray(path.node.declarations) &&
+          path.node.declarations.length
+        ) {
+          path.node.declarations.forEach(dec => {
+            // 支持 import Demo from './demo' 写法
+            if (
+              t.isVariableDeclarator(dec) &&
+              t.isIdentifier(dec.id) &&
+              t.isCallExpression(dec.init) &&
+              t.isIdentifier(dec.init.callee) &&
+              ['_interopRequireWildcard', '_interopRequireDefault'].includes(
+                dec.init.callee.name,
+              ) &&
+              // dec.init.callee.name === '_interopRequireWildcard' &&
+              Array.isArray(dec.init.arguments) &&
+              t.isCallExpression(dec.init.arguments[0]) &&
+              t.isIdentifier(
+                (dec.init.arguments[0] as t.CallExpression).callee,
+              ) &&
+              ((dec.init.arguments[0] as t.CallExpression)
+                .callee as t.Identifier).name === 'require'
+            ) {
+              const localName = dec.id.name;
+              const args = (dec.init.arguments[0] as t.CallExpression)
+                .arguments as any;
+              const source = args[0].value;
+              parsedModel.importModules.push({
+                importDefaultName: localName,
+                localName,
+                source,
+              });
+            }
+
+            // 支持 import { Demo as Demo2 } from './demo' 写法
+            if (
+              t.isVariableDeclarator(dec) &&
+              t.isIdentifier(dec.id) &&
+              t.isCallExpression(dec.init) &&
+              t.isIdentifier(dec.init.callee) &&
+              dec.init.callee.name === 'require' &&
+              Array.isArray(dec.init.arguments) &&
+              t.isLiteral(dec.init.arguments[0])
+            ) {
+              const args = dec.init.arguments as any;
+              const source = args[0].value;
+              const importName = dec.id.name;
+              const localName = dec.id.name;
+              // 遍历查找出 importName 和 localName
+              // ES5 本身并不支持按需加载，故 import 都是全量导入
+              // 但如果使用了诸如：babel-plugin-import 等插件，会自动更改编译之后的 ES5 代码
+              parsedModel.importModules.push({
+                importName,
+                localName,
+                source,
+              });
+            }
+          });
+        }
+
+        // 获取 subModules
+        if (
+          t.isExpressionStatement(path.node) &&
+          t.isAssignmentExpression(path.node.expression) &&
+          t.isMemberExpression(path.node.expression.left)
+        ) {
+          if (
+            t.isIdentifier(path.node.expression.left.object) &&
+            path.node.expression.left.object.name ===
+              parsedModel.defaultExportName
+          ) {
+            // 支持 SFC.SubDemo1 = SubDemo1; 写法
+            if (t.isIdentifier(path.node.expression.right)) {
+              parsedModel.subModules.push({
+                objectName: [path.node.expression.left.object.name],
+                propertyName: path.node.expression.left.property.name,
+                isValueAnonymousFunc: false,
+                value: path.node.expression.right.name,
+              });
+            }
+
+            // 支持 SFC.SubDemo2 = function() {}; 写法
+            if (t.isFunctionExpression(path.node.expression.right)) {
+              const rightID = path.node.expression.right.id as any;
+              parsedModel.subModules.push({
+                objectName: [path.node.expression.left.object.name],
+                propertyName: path.node.expression.left.property.name,
+                isValueAnonymousFunc: !rightID,
+                value: rightID ? rightID.name : undefined,
+              });
+            }
+          }
+
+          if (t.isMemberExpression(path.node.expression.left.object)) {
+            if (t.isIdentifier(path.node.expression.right)) {
+              // 支持 DemoFunc4.Test.Obj2 = Obj3; 写法
+              const tempLeftObject = path.node.expression.left.object as any;
+              parsedModel.subModules.push({
+                objectName: [
+                  tempLeftObject.object.name,
+                  tempLeftObject.property.name,
+                ],
+                propertyName: path.node.expression.left.property.name,
+                isValueAnonymousFunc: false,
+                value: path.node.expression.right.name,
+              });
+            }
+            if (t.isFunctionExpression(path.node.expression.right)) {
+              // 支持 DemoFunc4.Test.Obj2 = function() {}; 写法
+              const rightID = path.node.expression.right.id as any;
+              const tempLeftObject = path.node.expression.left.object as any;
+              parsedModel.subModules.push({
+                objectName: [
+                  tempLeftObject.object.name,
+                  tempLeftObject.property.name,
+                ],
+                propertyName: path.node.expression.left.property.name,
+                isValueAnonymousFunc: !rightID,
+                value: rightID ? rightID.name : undefined,
+              });
+            }
+          }
+        }
+
+        // 获取 propsTypes 和 defaultProps
+        if (
+          t.isExpressionStatement(path.node) &&
+          t.isAssignmentExpression(path.node.expression) &&
+          t.isMemberExpression(path.node.expression.left) &&
+          t.isObjectExpression(path.node.expression.right) &&
+          t.isIdentifier(path.node.expression.left.object) &&
+          t.isIdentifier(path.node.expression.left.property) &&
+          path.node.expression.left.object.name ===
+            parsedModel.defaultExportName &&
+          ['propTypes', 'defaultProps'].includes(
+            path.node.expression.left.property.name,
+          )
+        ) {
+          // 处理 propTypes
+          if (path.node.expression.left.property.name === 'propTypes') {
+            path.node.expression.right.properties.forEach(prop => {
+              if (t.isProperty(prop)) {
+                if (t.isMemberExpression(prop.value)) {
+                  if (t.isIdentifier(prop.value.object)) {
+                    // 支持 optionalArray: PropTypes.array 写法
+                    parsedModel.propsTypes.push({
+                      name: prop.key.name,
+                      type: prop.value.property.name,
+                      required: false,
+                    });
+                  }
+                  if (t.isMemberExpression(prop.value.object)) {
+                    // 支持 optionalArray: PropTypes.array.isRequired 写法
+                    parsedModel.propsTypes.push({
+                      name: prop.key.name,
+                      type: prop.value.object.property.name,
+                      required:
+                        prop.value.object.property.name === 'isRequired',
+                    });
+                  }
+                  if (
+                    t.isCallExpression(prop.value.object) &&
+                    t.isMemberExpression(prop.value.object.callee)
+                  ) {
+                    // 支持 optionalArray: PropTypes.shape().isRequired 写法
+                    parsedModel.propsTypes.push({
+                      name: prop.key.name,
+                      type: prop.value.object.callee.property.name,
+                      required: prop.value.property.name === 'isRequired',
+                    });
+                  }
+                }
+                if (
+                  t.isCallExpression(prop.value) &&
+                  t.isMemberExpression(prop.value.callee)
+                ) {
+                  // 支持 optionalArray: PropTypes.shape() 写法
+                  parsedModel.propsTypes.push({
+                    name: prop.key.name,
+                    type: prop.value.callee.property.name,
+                    required: false,
+                  });
+                }
+              }
+            });
+          }
+          // 处理 defaultProps
+          if (path.node.expression.left.property.name === 'defaultProps') {
+            path.node.expression.right.properties.forEach(prop => {
+              if (t.isProperty(prop)) {
+                if (t.isObjectExpression(prop.value)) {
+                  const defaultValue = new CodeGenerator(
+                    t.objectExpression(prop.value.properties),
+                  ).generate().code;
+                  parsedModel.propsDefaults.push({
+                    name: prop.key.name,
+                    defaultValue,
+                  });
+                }
+              }
+            });
+          }
+        }
+      },
+    });
+
+    log('traverse done.');
+    log('parsedModel.defaultExportName', parsedModel.defaultExportName);
+    log('parsedModel.componentNames', parsedModel.componentNames);
+    log('parsedModel.importModules', parsedModel.importModules);
+    log('parsedModel.exportModules', parsedModel.exportModules);
+    log('parsedModel.subModules', parsedModel.subModules);
+    log('parsedModel.propsTypes', parsedModel.propsTypes);
+    log('parsedModel.propsDefaults', parsedModel.propsDefaults);
+    log('parsedModel', parsedModel);
+    return parsedModel;
+  }
+
+  public async parseES6(params: {
+    model: IMaterialScanModel;
+    filePath: string;
+    fileContent: string;
+  }): Promise<IMaterialParsedModel> {
+    const ast = await parse(params.fileContent, {
+      sourceType:
+        params.model.sourceType === SourceType.MODULE ? 'module' : 'script',
+      plugins: ['jsx'],
+    });
+
+    const defaultExportName = await this.parseDefaultExportNameES6(ast);
+    const componentNames = await this.parseComponentNamesES6(ast);
+    const importModules = await this.parseImportModulesES6(ast);
+    const exportModules = await ReactParser.parseExportedStatement(
+      params.fileContent,
+      params.model.sourceType,
+    );
+    const subModules = await this.parseSubModulesES6(ast);
+    const propsTypes = await this.parsePropsTypesES6(ast, defaultExportName);
+    const propsDefaults = await this.parseDefaultPropsES6(
+      ast,
+      defaultExportName,
+    );
+
+    return {
+      filePath: params.filePath,
+      defaultExportName,
+      componentNames,
+      importModules,
+      exportModules,
+      subModules,
+      propsTypes,
+      propsDefaults,
+    } as IMaterialParsedModel;
+  }
+
+  /**
+   * 解析 AST 获取 defaultExportName
+   * 支持的写法：
+   * - export default Demo
+   * - export default function Demo() {}
+   * - export default class Demo {}
+   *
+   * @private
+   * @param {*} ast
+   * @memberof ReactParser
+   */
+  private async parseDefaultExportNameES6(ast: any): Promise<string> {
+    let defaultExportName = '';
+    traverse(ast, {
+      enter(path) {
+        // 获取 defaultExportName
+        if (t.isExportDefaultDeclaration(path.node)) {
+          if (t.isIdentifier(path.node.declaration)) {
+            // 支持 export default Demo 写法
+            defaultExportName = path.node.declaration.name;
+            log('isIdentifier defaultExportName', defaultExportName);
+          }
+          if (t.isFunctionDeclaration(path.node.declaration)) {
+            if (t.isIdentifier(path.node.declaration.id)) {
+              // 支持 export default function Demo() {} 写法
+              defaultExportName = path.node.declaration.id.name;
+              log('isFunctionDeclaration defaultExportName', defaultExportName);
+            }
+          }
+          if (t.isClassDeclaration(path.node.declaration)) {
+            if (t.isIdentifier(path.node.declaration.id)) {
+              // 支持 export default class Demo {} 写法
+              defaultExportName = path.node.declaration.id.name;
+              log('isClassDeclaration defaultExportName', defaultExportName);
+            }
+          }
+          if (t.isCallExpression(path.node.declaration)) {
+            const traverseCallExp: any = (args: any[]) => {
+              const arg = args[0];
+              if (t.isIdentifier(arg)) {
+                return arg.name;
+              }
+              return traverseCallExp(arg.arguments);
+            };
+            defaultExportName = traverseCallExp(
+              path.node.declaration.arguments,
+            );
+          }
+        }
+      },
+    });
+    return defaultExportName;
+  }
+
+  /**
+   * 解析 AST 获取 importModules
+   * 支持的写法：
+   * - import Demo from './demo'
+   * - import { Demo as Demo2 } from './demo'
+   * - import * as Demo from './demo'
+   *
+   * @private
+   * @param {*} ast
+   * @returns {Promise<Array<{
+   *     importDefaultName?: string,
+   *     importName?: string,
+   *     localName: string,
+   *     source: string,
+   *   }>>}
+   * @memberof ReactParser
+   */
+  private async parseImportModulesES6(
+    ast: any,
+  ): Promise<
+    Array<{
+      importDefaultName?: string;
+      importName?: string;
+      localName: string;
+      source: string;
+    }>
+  > {
+    const results: any[] = [];
+    traverse(ast, {
+      enter(path) {
+        // 写法支持：import Demo from './demo';
+        if (t.isImportDeclaration(path.node)) {
+          if (
+            Array.isArray(path.node.specifiers) &&
+            path.node.specifiers.length
+          ) {
+            const source = path.node.source.value;
+            path.node.specifiers.forEach(spec => {
+              if (t.isImportDefaultSpecifier(spec)) {
+                // 支持 import Demo from './demo' 写法
+                results.push({
+                  importDefaultName: spec.local.name,
+                  localName: spec.local.name,
+                  source,
+                });
+              }
+              if (t.isImportSpecifier(spec)) {
+                // 支持 import { Demo as Demo2 } from './demo' 写法
+                results.push({
+                  importName: spec.imported.name,
+                  localName: spec.local.name,
+                  source,
+                });
+              }
+              if (t.isImportNamespaceSpecifier(spec)) {
+                // 支持 import * as Demo from './demo' 写法
+                results.push({
+                  importName: spec.local.name,
+                  localName: spec.local.name,
+                  source,
+                });
+              }
+            });
+          }
+        }
+      },
+    });
+    return results;
+  }
+
+  /**
+   * 解析 AST 获取 componentNames
+   *
+   * @private
+   * @param {*} ast
+   * @returns {Promise<Array<{
+   *     exportedName: string,
+   *     localName: string,
+   *   }>>}
+   * @memberof ReactParser
+   */
+  private async parseComponentNamesES6(
+    ast: any,
+  ): Promise<
+    Array<{
+      exportedName: string;
+      localName: string;
+    }>
+  > {
+    const results: any[] = [];
+    traverse(ast, {
+      enter(path) {
+        if (t.isFunctionDeclaration(path.node)) {
+          if (t.isIdentifier(path.node.id)) {
+            const funcName = path.node.id.name;
+            debug('isIdentifier componentNames', funcName);
+            results.push({
+              exportedName: funcName,
+              localName: funcName,
+            });
+          }
+        }
+      },
+    });
+    return results;
+  }
+
+  /**
+   * 解析 AST 获取 subModules
+   * 支持的写法：
+   * - DemoFunc4.Test = Test;
+   * - DemoFunc4.Test = function() {};
+   * - DemoFunc4.Test.Obj2 = Obj3;
+   * - DemoFunc4.Test.Obj2 = function() {};
+   *
+   * @private
+   * @param {*} ast
+   * @returns {Promise<Array<{
+   *     objectName: string[],
+   *     propertyName: string,
+   *     value?: string,
+   *     isValueAnonymousFunc: boolean,
+   *   }>>}
+   * @memberof ReactParser
+   */
+  private async parseSubModulesES6(
+    ast: any,
+  ): Promise<
+    Array<{
+      objectName: string[];
+      propertyName: string;
+      value?: string;
+      isValueAnonymousFunc: boolean;
+    }>
+  > {
+    const results: any[] = [];
+    traverse(ast, {
+      enter(path) {
+        if (t.isExpressionStatement(path.node)) {
+          if (t.isAssignmentExpression(path.node.expression)) {
+            if (t.isMemberExpression(path.node.expression.left)) {
+              if (t.isIdentifier(path.node.expression.left.object)) {
+                if (t.isIdentifier(path.node.expression.right)) {
+                  // 支持 DemoFunc4.Test = Test; 写法
+                  results.push({
+                    objectName: [path.node.expression.left.object.name],
+                    propertyName: path.node.expression.left.property.name,
+                    isValueAnonymousFunc: false,
+                    value: path.node.expression.right.name,
+                  });
+                }
+                if (t.isFunctionExpression(path.node.expression.right)) {
+                  // 支持 DemoFunc4.Test = function() {}; 写法
+                  const rightID = !path.node.expression.right.id as any;
+                  results.push({
+                    objectName: [path.node.expression.left.object.name],
+                    propertyName: path.node.expression.left.property.name,
+                    isValueAnonymousFunc: !!rightID,
+                    value: rightID ? rightID.name : undefined,
+                  });
+                }
+              }
+              if (t.isMemberExpression(path.node.expression.left.object)) {
+                if (t.isIdentifier(path.node.expression.right)) {
+                  // 支持 DemoFunc4.Test.Obj2 = Obj3; 写法
+                  const tempLeftObject = path.node.expression.left
+                    .object as any;
+                  results.push({
+                    objectName: [
+                      tempLeftObject.object.name,
+                      tempLeftObject.property.name,
+                    ],
+                    propertyName: path.node.expression.left.property.name,
+                    isValueAnonymousFunc: false,
+                    value: path.node.expression.right.name,
+                  });
+                }
+                if (t.isFunctionExpression(path.node.expression.right)) {
+                  // 支持 DemoFunc4.Test.Obj2 = function() {}; 写法
+                  const rightID = !path.node.expression.right.id as any;
+                  const tempLeftObject = path.node.expression.left
+                    .object as any;
+                  results.push({
+                    objectName: [
+                      tempLeftObject.object.name,
+                      tempLeftObject.property.name,
+                    ],
+                    propertyName: path.node.expression.left.property.name,
+                    isValueAnonymousFunc: !!rightID,
+                    value: rightID ? rightID.name : undefined,
+                  });
+                }
+              }
+            }
+          }
+        }
+      },
+    });
+    return results;
+  }
+
+  /**
+   * 解析 AST 获取 propsTypes
+   * 支持的写法：
+   * - static propTypes = { sth: PropTypes.any.isRequired }
+   * - Demo.propTypes = {}
+   *
+   * @private
+   * @param {*} ast
+   * @param {string} defaultExportName
+   * @returns {Promise<Array<{
+   *     name: string,
+   *     type: string,
+   *     typeRaw?: any,
+   *     required: boolean,
+   *   }>>}
+   * @memberof ReactParser
+   */
+  private async parsePropsTypesES6(
+    ast: any,
+    defaultExportName: string,
+  ): Promise<
+    Array<{
+      name: string;
+      type: string;
+      typeRaw?: any;
+      required: boolean;
+    }>
+  > {
+    const results: any[] = [];
+    traverse(ast, {
+      enter(path) {
+        // 支持 static propTypes = { sth: PropTypes.any.isRequired }; 写法
+        if (
+          t.isExpressionStatement(path.node) &&
+          t.isCallExpression(path.node.expression)
+        ) {
+          const args = path.node.expression.arguments;
+          if (
+            t.isIdentifier(args[0]) &&
+            // args[0].name === defaultExportName &&
+            t.isLiteral(args[1]) &&
+            (args[1] as any).value === 'propTypes' &&
+            t.isObjectExpression(args[2])
+          ) {
+            const properties = (args[2] as t.ObjectExpression).properties;
+            properties.forEach((prop: any) => {
+              if (t.isProperty(prop)) {
+                if (t.isMemberExpression(prop.value)) {
+                  if (t.isIdentifier(prop.value.object)) {
+                    // 支持 optionalArray: PropTypes.array 写法
+                    results.push({
+                      name: prop.key.name,
+                      type: prop.value.property.name,
+                      required: false,
+                    });
+                  }
+                  if (t.isMemberExpression(prop.value.object)) {
+                    // 支持 optionalArray: PropTypes.array.isRequired 写法
+                    results.push({
+                      name: prop.key.name,
+                      type: prop.value.object.property.name,
+                      required:
+                        prop.value.object.property.name === 'isRequired',
+                    });
+                  }
+                  if (
+                    t.isCallExpression(prop.value.object) &&
+                    t.isMemberExpression(prop.value.object.callee)
+                  ) {
+                    // 支持 optionalArray: PropTypes.shape().isRequired 写法
+                    results.push({
+                      name: prop.key.name,
+                      type: prop.value.object.callee.property.name,
+                      required: prop.value.property.name === 'isRequired',
+                    });
+                  }
+                }
+                if (
+                  t.isCallExpression(prop.value) &&
+                  t.isMemberExpression(prop.value.callee)
+                ) {
+                  // 支持 optionalArray: PropTypes.shape() 写法
+                  results.push({
+                    name: prop.key.name,
+                    type: prop.value.callee.property.name,
+                    required: false,
+                  });
+                }
+              }
+            });
+          }
+        }
+
+        // 支持 Demo.propTypes = {}; 写法
+        if (
+          t.isExpressionStatement(path.node) &&
+          t.isAssignmentExpression(path.node.expression) &&
+          t.isMemberExpression(path.node.expression.left) &&
+          t.isObjectExpression(path.node.expression.right) &&
+          t.isIdentifier(path.node.expression.left.object) &&
+          t.isIdentifier(path.node.expression.left.property) &&
+          path.node.expression.left.object.name === defaultExportName &&
+          ['propTypes'].includes(path.node.expression.left.property.name)
+        ) {
+          // 处理 propTypes
+          path.node.expression.right.properties.forEach(prop => {
+            if (t.isProperty(prop)) {
+              if (t.isMemberExpression(prop.value)) {
+                if (t.isIdentifier(prop.value.object)) {
+                  // 支持 optionalArray: PropTypes.array 写法
+                  results.push({
+                    name: prop.key.name,
+                    type: prop.value.property.name,
+                    required: false,
+                  });
+                }
+                if (t.isMemberExpression(prop.value.object)) {
+                  // 支持 optionalArray: PropTypes.array.isRequired 写法
+                  results.push({
+                    name: prop.key.name,
+                    type: prop.value.object.property.name,
+                    required: prop.value.object.property.name === 'isRequired',
+                  });
+                }
+                if (
+                  t.isCallExpression(prop.value.object) &&
+                  t.isMemberExpression(prop.value.object.callee)
+                ) {
+                  // 支持 optionalArray: PropTypes.shape().isRequired 写法
+                  results.push({
+                    name: prop.key.name,
+                    type: prop.value.object.callee.property.name,
+                    required: prop.value.property.name === 'isRequired',
+                  });
+                }
+              }
+              if (
+                t.isCallExpression(prop.value) &&
+                t.isMemberExpression(prop.value.callee)
+              ) {
+                // 支持 optionalArray: PropTypes.shape() 写法
+                results.push({
+                  name: prop.key.name,
+                  type: prop.value.callee.property.name,
+                  required: false,
+                });
+              }
+            }
+          });
+        }
+      },
+    });
+    return results;
+  }
+
+  /**
+   * 解析 AST 获取 defaultProps
+   * 支持的写法：
+   * - static defaultProps = {};
+   * - Demo.defaultProps = {};
+   *
+   * @private
+   * @param {*} ast
+   * @param {string} defaultExportName
+   * @returns {Promise<Array<{
+   *     name: string,
+   *     defaultValue: any,
+   *   }>>}
+   * @memberof ReactParser
+   */
+  private async parseDefaultPropsES6(
+    ast: any,
+    defaultExportName: string,
+  ): Promise<
+    Array<{
+      name: string;
+      defaultValue: any;
+    }>
+  > {
+    const results: any[] = [];
+    traverse(ast, {
+      enter(path) {
+        if (
+          t.isExpressionStatement(path.node) &&
+          t.isCallExpression(path.node.expression)
+        ) {
+          const args = path.node.expression.arguments;
+          if (
+            t.isIdentifier(args[0]) &&
+            // args[0].name === defaultExportName &&
+            t.isLiteral(args[1]) &&
+            (args[1] as any).value === 'defaultProps' &&
+            t.isObjectExpression(args[2])
+          ) {
+            const properties = (args[2] as t.ObjectExpression).properties;
+            properties.forEach((prop: any) => {
+              if (t.isProperty(prop)) {
+                if (t.isObjectExpression(prop.value)) {
+                  const defaultValue = new CodeGenerator(
+                    t.objectExpression(prop.value.properties),
+                  ).generate().code;
+                  results.push({
+                    name: prop.key.name,
+                    defaultValue,
+                  });
+                }
+              }
+            });
+          }
+        }
+
+        if (
+          t.isExpressionStatement(path.node) &&
+          t.isAssignmentExpression(path.node.expression) &&
+          t.isMemberExpression(path.node.expression.left) &&
+          t.isObjectExpression(path.node.expression.right) &&
+          t.isIdentifier(path.node.expression.left.object) &&
+          t.isIdentifier(path.node.expression.left.property) &&
+          path.node.expression.left.object.name === defaultExportName &&
+          ['defaultProps'].includes(path.node.expression.left.property.name)
+        ) {
+          // 处理 defaultProps
+          path.node.expression.right.properties.forEach(prop => {
+            if (t.isProperty(prop)) {
+              if (t.isObjectExpression(prop.value)) {
+                const defaultValue = new CodeGenerator(
+                  t.objectExpression(prop.value.properties),
+                ).generate().code;
+                results.push({
+                  name: prop.key.name,
+                  defaultValue,
+                });
+              }
+            }
+          });
+        }
+      },
+    });
+    return results;
+  }
+}
+
+export default ReactParser;

packages/material-parser/src/scanner/Scanner.ts

@@ -0,0 +1,169 @@
+import { pathExists, readFile, statSync } from 'fs-extra';
+import { dirname, join } from 'path';
+import { debug } from '../otter-core';
+import BaseParser from '../parser/BaseParser';
+import ReactParser from '../parser/ReactParser';
+import {
+  IMaterializeOptions,
+  IMaterialScanModel,
+  IScanner,
+  SourceType,
+} from '../types';
+
+const log = debug.extend('mat');
+
+/**
+ * 文件扫描器
+ *
+ * @class Scanner
+ * @implements {IScanner}
+ */
+class Scanner implements IScanner {
+  public options: IMaterializeOptions;
+
+  constructor(options: IMaterializeOptions) {
+    this.options = options;
+  }
+
+  public async scan(): Promise<IMaterialScanModel> {
+    const model: IMaterialScanModel = {
+      pkgName: '',
+      pkgVersion: '',
+      mainEntry: '',
+      sourceType: SourceType.MODULE,
+      modules: [],
+    };
+    const options = this.options;
+    log('options', options);
+    // 入口文件路径
+    let entryFilePath = null;
+    const cwd = options.cwd ? options.cwd : '';
+    const entry = options.entry;
+    const isDepsMode = cwd !== entry;
+    const pkgJsonPath = join(cwd, 'package.json');
+    // 判断是否存在 package.json
+    if (!(await pathExists(pkgJsonPath))) {
+      throw new Error(`Cannot find package.json. ${pkgJsonPath}`);
+    }
+    // 读取 package.json
+    let pkgJson = await this.resolvePkgJson(pkgJsonPath);
+    model.pkgName = pkgJson.name;
+    model.pkgVersion = pkgJson.version;
+    if (isDepsMode) {
+      pkgJson = await this.resolvePkgJson(join(entry, 'package.json'));
+    }
+    if (pkgJson.module) {
+      // 支持 es module
+      model.sourceType = SourceType.MODULE;
+      entryFilePath = pkgJson.module;
+    } else if (pkgJson.main) {
+      // 支持 commonjs
+      model.sourceType = SourceType.MAIN;
+      entryFilePath = pkgJson.main;
+    } else {
+      entryFilePath = './index.js';
+    }
+    entryFilePath = join(isDepsMode ? entry : cwd, entryFilePath);
+    log('entryFilePath', entryFilePath);
+    const entryFile = await this.loadFile(entryFilePath);
+    log('entryFile', entryFile);
+    model.mainEntry = entryFilePath;
+    // 记录入口文件
+    model.modules.push({
+      filePath: entryFilePath,
+      fileContent: entryFile,
+    });
+    log('model', model);
+    if (options.isExportedAsMultiple) {
+      // 解析 entryFile，提取出 export 语句
+      const modules = await this.parseEntryFile({
+        entryFile,
+        entryFilePath,
+        sourceType: model.sourceType,
+      });
+      model.modules.push(...modules);
+    }
+    log('model', model);
+    return model;
+  }
+
+  /**
+   * 判断是否为文件夹
+   * @param {string} filePath 文件路径
+   * @returns {Promise<boolean>}
+   * @memberof LocalScanner
+   */
+  public async isDirectory(filePath: string): Promise<boolean> {
+    log('materialIn', 'isDirectory - filePath', filePath);
+    const stats = statSync(filePath);
+    return stats.isDirectory();
+  }
+
+  public async loadFile(filePath: string): Promise<string> {
+    const content: string | Buffer = await readFile(filePath);
+    if (typeof content === 'string') {
+      return content;
+    }
+    return content.toString();
+  }
+
+  public async resolvePkgJson(
+    pkgJsonPath: string,
+  ): Promise<{ [k: string]: any }> {
+    const content = await this.loadFile(pkgJsonPath);
+    const json = JSON.parse(content);
+    return json;
+  }
+
+  /**
+   * 解析入口文件，获取要导出的模块内容
+   * @private
+   * @param {{
+   *     entryFile: string;
+   *     entryFilePath: string;
+   *     sourceType: string;
+   *   }} params
+   * @returns {Promise<any>}
+   * @memberof LocalScanner
+   */
+  private async parseEntryFile(params: {
+    entryFile: string;
+    entryFilePath: string;
+    sourceType: string;
+  }): Promise<any> {
+    const modules: any = [];
+    const entryFileDirName = dirname(params.entryFilePath);
+    const ecology = await BaseParser.recognizeEcology(this.options);
+    if (ecology === 'react') {
+      const exportedList = await ReactParser.parseExportedStatement(
+        params.entryFile,
+        params.sourceType,
+      );
+      if (Array.isArray(exportedList)) {
+        for (const item of exportedList) {
+          if (item.source && item.source.length) {
+            try {
+              let filePath = join(entryFileDirName, item.source);
+              if (await this.isDirectory(filePath)) {
+                filePath = join(filePath, 'index.js');
+              } else {
+                filePath = join(filePath, '.js');
+              }
+              debug('filePath', filePath);
+              modules.push({
+                filePath,
+                fileContent: await this.loadFile(filePath),
+              });
+            } catch (e) {
+              debug('error', 'parseEntryFile', e.message);
+            }
+          }
+        }
+      }
+    }
+    debug('modules', modules);
+    return modules;
+  }
+}
+
+export default Scanner;

packages/material-parser/src/types/ChannelType.ts

@@ -0,0 +1,11 @@
+/**
+ * 物料接入渠道
+ */
+enum ChannelType {
+  /** 本地 */
+  LOCAL = 'local',
+  /** 在线 */
+  ONLINE = 'online',
+}
+
+export default ChannelType;

packages/material-parser/src/types/EcologyType.ts

@@ -0,0 +1,15 @@
+/**
+ * 语法生态
+ */
+enum EcologyType {
+  /** react 生态 */
+  REACT = 'react',
+  /** vue 生态 */
+  VUE = 'vue',
+  /** rax 生态 */
+  RAX = 'rax',
+  /** angular 生态 */
+  ANGULAR = 'angular',
+}
+
+export default EcologyType;

packages/material-parser/src/types/ExtensionName.ts

@@ -0,0 +1,17 @@
+/**
+ * 扩展点名称
+ */
+enum ExtensionName {
+  /** 加载物料 */
+  LOADMATERIALS = 'mat:load:materials',
+  /** 配置 manifest */
+  CONFIGMANIFEST = 'mat:config:manifest',
+  /** 获取打包后的 bundle */
+  BUILDBUNDLE = 'mat:build:bundle',
+  /** 配置 containerJS */
+  CONFIGCONTAINER = 'mat:config:container',
+  /** 生成 buildJS */
+  GENERATEBUILDJS = 'mat:generate:buildjs',
+}
+
+export default ExtensionName;

packages/material-parser/src/types/IAccesser.ts

@@ -0,0 +1,16 @@
+import { IMaterialinSchema } from '../otter-core';
+
+/**
+ * 接入器接口（用于定义物料化组件的接入渠道）
+ * @interface IAccesser
+ */
+interface IAccesser {
+  /**
+   * 接入
+   * @returns {Promise<IMaterialinSchema>}
+   * @memberof IAccesser
+   */
+  access(): Promise<IMaterialinSchema>;
+}
+
+export default IAccesser;

packages/material-parser/src/types/ICompiler.ts

@@ -0,0 +1,15 @@
+/**
+ * 编译器 - 用于编译并打包生成 bundle.js
+ * @interface ICompiler
+ */
+interface ICompiler {
+  /**
+   * 编译
+   * @param {{ [key: string]: any }} config webpack 配置文件
+   * @returns {Promise<void>}
+   * @memberof ICompiler
+   */
+  compile(config: { [key: string]: any }): Promise<void>;
+}
+
+export default ICompiler;

packages/material-parser/src/types/IExtensionBuildBundle.ts

@@ -0,0 +1,10 @@
+/**
+ * 扩展点：获取打包后的 bundle 文件
+ * （物料化场景）
+ */
+type IExtensionBuildBundle = (params: {
+  bundleJS: string; // bundle 文件内容
+  bundleObj: { [key: string]: any }; // bundle 对象
+}) => Promise<void>;
+
+export default IExtensionBuildBundle;

packages/material-parser/src/types/IExtensionConfigContainer.ts

@@ -0,0 +1,13 @@
+/**
+ * 扩展点：配置 container
+ * （物料化场景）
+ */
+type IExtensionConfigContainer = (params: {
+  filePath: string; // container 文件默认路径
+  fileContent: string; // container 文件内容
+}) => Promise<{
+  filePath: string;
+  fileContent: string;
+}>;
+
+export default IExtensionConfigContainer;

packages/material-parser/src/types/IExtensionConfigManifest.ts

@@ -0,0 +1,15 @@
+import { IMaterialinManifest } from '../otter-core';
+/**
+ * 扩展点：配置 manifest
+ * （物料化场景）
+ */
+type IExtensionConfigManifest = (params: {
+  manifestObj: IMaterialinManifest; // manifest 配置对象
+  manifestFilePath: string; // manifest 文件默认路径
+}) => Promise<{
+  manifestJS: string; // manifest 文件内容
+  manifestFilePath: string; // manifest 文件路径
+  manifestObj: IMaterialinManifest; // manifest 文件对象
+}>;
+
+export default IExtensionConfigManifest;

packages/material-parser/src/types/IExtensionGenerateBuildJS.ts

@@ -0,0 +1,13 @@
+/**
+ * 扩展点：生成 build 文件
+ * （物料化场景）
+ */
+type IExtensionGenerateBuildJS = (params: {
+  buildFilePath: string; // 文件默认路径
+  buildFileContent: string; // 文件内容
+}) => Promise<{
+  buildFilePath: string;
+  buildFileContent: string;
+}>;
+
+export default IExtensionGenerateBuildJS;

packages/material-parser/src/types/IExtensionLoadMaterials.ts

@@ -0,0 +1,12 @@
+import { IMaterialinSchema } from '../otter-core';
+
+/**
+ * 扩展点：加载物料（物料接入场景）
+ *
+ * @interface IExtensionLoadMaterials
+ */
+type IExtensionLoadMaterials = (
+  pkgNameList: string[],
+) => Promise<IMaterialinSchema[]>;
+
+export default IExtensionLoadMaterials;

packages/material-parser/src/types/IGenerator.ts

@@ -0,0 +1,20 @@
+import { IMaterialinSchema } from '../otter-core';
+import IMaterialParsedModel from './IMaterialParsedModel';
+import IMaterialScanModel from './IMaterialScanModel';
+
+/**
+ * 生成器
+ */
+export default interface IGenerator {
+  /**
+   * 根据前面两阶段的产物生成最终编排引擎需要的物料
+   * @param {IMaterialScanModel} matScanModel 对应扫描阶段产物
+   * @param {IMaterialParsedModel[]} matParsedModels 对应解析阶段产物
+   * @returns {Promise<IMaterialinSchema>}
+   * @memberof IGenerator
+   */
+  generate(
+    matScanModel: IMaterialScanModel,
+    matParsedModels: IMaterialParsedModel[],
+  ): Promise<IMaterialinSchema>;
+}

packages/material-parser/src/types/IMaterialInOptions.ts

@@ -0,0 +1,23 @@
+import ExtensionName from './ExtensionName';
+import IExtensionLoadMaterials from './IExtensionLoadMaterials';
+
+interface IMaterialInOptions {
+  /**
+   * 配置从哪些 CDN 加载组件
+   * （当 channel=online 时生效）
+   * 形如：
+   *  https://unpkg.alibaba-inc.com/
+   *  https://unpkg.com/
+   *  https://cdn.jsdelivr.net/npm/
+   */
+  cdn?: string[];
+
+  /**
+   * 扩展点
+   */
+  extensions?: {
+    [ExtensionName.LOADMATERIALS]?: IExtensionLoadMaterials;
+  };
+}
+
+export default IMaterialInOptions;

packages/material-parser/src/types/IMaterialParsedModel.ts

@@ -0,0 +1,45 @@
+/**
+ * 对应解析器分析出的一些关键信息
+ */
+interface IMaterialParsedModel {
+  filePath: string;
+  defaultExportName: string;
+  componentNames: Array<{
+    exportedName: string;
+    localName: string;
+    source?: string;
+  }>;
+  importModules: Array<{
+    importDefaultName?: string;
+    importName?: string;
+    localName?: string;
+    source: string;
+  }>;
+  exportModules: Array<{
+    exportedName: string;
+    localName: string;
+    source?: string;
+  }>;
+  /**
+   * 子模块，形如：Demo.SubModule = value; 或者 Demo.SubModule.Sub = subValue;
+   */
+  subModules: Array<{
+    objectName: string[];
+    propertyName: string;
+    value?: string;
+    // value 是否对应匿名函数
+    isValueAnonymousFunc: boolean;
+  }>;
+  propsTypes: Array<{
+    name: string;
+    type: string;
+    typeRaw?: any;
+    required: boolean;
+  }>;
+  propsDefaults: Array<{
+    name: string;
+    defaultValue: any;
+  }>;
+}
+
+export default IMaterialParsedModel;

packages/material-parser/src/types/IMaterialScanModel.ts

@@ -0,0 +1,20 @@
+/**
+ * 对应扫描阶段的产物
+ */
+interface IMaterialScanModel {
+  /** 入口文件地址 */
+  mainEntry: string;
+  /** 标记物料组件包所使用的模块规范 */
+  sourceType: 'module' | 'main';
+  /** 每个文件对应的文件内容 */
+  modules: Array<{
+    filePath: string;
+    fileContent: string;
+  }>;
+  /** 当前包名 */
+  pkgName: string;
+  /** 当前包版本 */
+  pkgVersion: string;
+}
+
+export default IMaterialScanModel;

packages/material-parser/src/types/IMaterializeOptions.ts

@@ -0,0 +1,59 @@
+import ExtensionName from './ExtensionName';
+import IExtensionBuildBundle from './IExtensionBuildBundle';
+import IExtensionConfigContainer from './IExtensionConfigContainer';
+import IExtensionConfigManifest from './IExtensionConfigManifest';
+import IExtensionGenerateBuildJS from './IExtensionGenerateBuildJS';
+
+/**
+ * 物料化配置项
+ * @interface IMaterializeOptions
+ */
+interface IMaterializeOptions {
+  /**
+   * 入口文件路径或包名
+   * 形如：
+   *  本地路径：/usr/project/src/container/DemoMaterial
+   *  包名：@ali/demo-material@0.0.1
+   */
+  entry: string;
+
+  /**
+   * 接入渠道
+   * （local：表示本地物料工作台方式接入，online：表示在线 npm 包接入）
+   * @type {('local' | 'online')}
+   * @memberof IMaterializeOptions
+   */
+  accesser: 'local' | 'online';
+
+  /**
+   * 是否为多组件透出场景
+   * （true：表示多组件透出场景，false：表示单组件透出场景）
+   * @type {boolean}
+   * @memberof IMaterializeOptions
+   */
+  isExportedAsMultiple: boolean;
+
+  /**
+   * 当 accesser=local 时，需要通过此配置项指定当前工作目录，形如：/usr/.../demo-project
+   * @type {string}
+   * @memberof IMaterializeOptions
+   */
+  cwd?: string;
+
+  /**
+   * 扩展点
+   */
+  extensions?: {
+    [ExtensionName.CONFIGMANIFEST]?: IExtensionConfigManifest;
+    [ExtensionName.CONFIGCONTAINER]?: IExtensionConfigContainer;
+    [ExtensionName.BUILDBUNDLE]?: IExtensionBuildBundle;
+    [ExtensionName.GENERATEBUILDJS]?: IExtensionGenerateBuildJS;
+  };
+
+  /**
+   * 当 accesser=online 时，配置要使用的 npm client，如：tnpm、cnpm、yarn、npm
+   */
+  npmClient?: string;
+}
+
+export default IMaterializeOptions;

packages/material-parser/src/types/IParser.ts

@@ -0,0 +1,42 @@
+import IMaterialParsedModel from './IMaterialParsedModel';
+import IMaterialScanModel from './IMaterialScanModel';
+
+/**
+ * 解析器
+ * @interface IParser
+ */
+interface IParser {
+  /**
+   * 根据 IScanner 阶段的产出结果，解析对文件内容进行 AST 解析
+   * @param {IMaterialScanModel} model IScanner 阶段的产出结果
+   * @returns {Promise<IMaterialParsedModel[]>}
+   * @memberof IParser
+   */
+  parse(model: IMaterialScanModel): Promise<IMaterialParsedModel[]>;
+
+  /**
+   * 解析 ES5 语法
+   * @param {IMaterialScanModel} model
+   * @returns {Promise<IMaterialParsedModel>}
+   * @memberof IParser
+   */
+  parseES5(model: IMaterialScanModel): Promise<IMaterialParsedModel>;
+
+  /**
+   * 解析 ESM 语法
+   * @param {{
+   *     model: IMaterialScanModel,
+   *     filePath: string, // 要解析的文件路径
+   *     fileContent: string // 要解析的文件内容
+   *   }} params
+   * @returns {Promise<IMaterialParsedModel>}
+   * @memberof IParser
+   */
+  parseES6(params: {
+    model: IMaterialScanModel;
+    filePath: string;
+    fileContent: string;
+  }): Promise<IMaterialParsedModel>;
+}
+
+export default IParser;

packages/material-parser/src/types/IScanner.ts

@@ -0,0 +1,32 @@
+import IMaterialScanModel from './IMaterialScanModel';
+
+/**
+ * 扫描器接口
+ * @interface IScanner
+ */
+interface IScanner {
+  /**
+   * 扫描
+   * @returns {Promise<IMaterialScanModel>} 扫描产物
+   * @memberof IScanner
+   */
+  scan(): Promise<IMaterialScanModel>;
+
+  /**
+   * 加载文件
+   * @param {string} filePath 文件地址
+   * @returns {Promise<string>} 返回文件内容
+   * @memberof IScanner
+   */
+  loadFile(filePath: string): Promise<string>;
+
+  /**
+   * 解析 package.json 文件
+   * @param {string} pkgJsonPath 文件路径
+   * @returns {Promise<{ [k: string]: any }>} package 文件信息
+   * @memberof IScanner
+   */
+  resolvePkgJson(pkgJsonPath: string): Promise<{ [k: string]: any }>;
+}
+
+export default IScanner;

packages/material-parser/src/types/SourceType.ts

@@ -0,0 +1,11 @@
+/**
+ * 物料组件支持的模块规范
+ */
+enum SourceType {
+  /** ES6 规范 */
+  MODULE = 'module',
+  /** CommonJS 规范 */
+  MAIN = 'main',
+}
+
+export default SourceType;

packages/material-parser/src/types/index.ts

@@ -0,0 +1,37 @@
+import ChannelType from './ChannelType';
+import EcologyType from './EcologyType';
+import ExtensionName from './ExtensionName';
+import IAccesser from './IAccesser';
+import ICompiler from './ICompiler';
+import IExtensionBuildBundle from './IExtensionBuildBundle';
+import IExtensionConfigContainer from './IExtensionConfigContainer';
+import IExtensionConfigManifest from './IExtensionConfigManifest';
+import IExtensionLoadMaterials from './IExtensionLoadMaterials';
+import IGenerator from './IGenerator';
+import IMaterialInOptions from './IMaterialInOptions';
+import IMaterializeOptions from './IMaterializeOptions';
+import IMaterialParsedModel from './IMaterialParsedModel';
+import IMaterialScanModel from './IMaterialScanModel';
+import IParser from './IParser';
+import IScanner from './IScanner';
+import SourceType from './SourceType';
+
+export {
+  IGenerator,
+  IParser,
+  IScanner,
+  ExtensionName,
+  IExtensionConfigManifest,
+  IExtensionConfigContainer,
+  IExtensionLoadMaterials,
+  IExtensionBuildBundle,
+  IMaterialInOptions,
+  IMaterializeOptions,
+  IMaterialScanModel,
+  IMaterialParsedModel,
+  SourceType,
+  ChannelType,
+  EcologyType,
+  IAccesser,
+  ICompiler,
+};

packages/material-parser/test/Materialize.ts

@@ -0,0 +1,63 @@
+import test from 'ava';
+import Materialize from '../src/Materialize';
+import { IMaterializeOptions } from '../src/types';
+import { getFromFixtures } from './helpers';
+
+const multiExportedComptPath = getFromFixtures('multiple-exported-component');
+const singleExportedComptPath = getFromFixtures('single-exported-component');
+const singleExportedComponent = '@ali/demo-biz-test090702@0.0.2';
+const multipleExportedComponent = '@ali/aimake-basic@0.1.0';
+
+test('materialize single exported component by local', async t => {
+  const options: IMaterializeOptions = {
+    cwd: singleExportedComptPath,
+    entry: singleExportedComptPath,
+    accesser: 'local',
+    isExportedAsMultiple: false,
+  };
+
+  const instance = new Materialize(options);
+  const actual = await instance.start();
+
+  t.snapshot(actual);
+});
+
+test('materialize multiple exported component by local', async t => {
+  const options: IMaterializeOptions = {
+    cwd: multiExportedComptPath,
+    entry: multiExportedComptPath,
+    accesser: 'local',
+    isExportedAsMultiple: true,
+  };
+
+  const instance = new Materialize(options);
+  const actual = await instance.start();
+
+  t.snapshot(actual);
+});
+
+// test('materialize single exported component by online', async t => {
+//   const options: IMaterializeOptions = {
+//     entry: singleExportedComponent,
+//     accesser: 'online',
+//     isExportedAsMultiple: false,
+//   };
+
+//   const instance = new Materialize(options);
+//   const actual = await instance.start();
+
+//   t.snapshot(actual);
+// });
+
+// test('materialize multiple exported component by online', async t => {
+//   const options: IMaterializeOptions = {
+//     entry: multipleExportedComponent,
+//     accesser: 'online',
+//     isExportedAsMultiple: false,
+//   };
+
+//   const instance = new Materialize(options);
+//   const actual = await instance.start();
+
+//   t.snapshot(actual);
+// });

packages/material-parser/test/accesser/LocalAccesser.ts

@@ -0,0 +1,29 @@
+import test from 'ava';
+import LocalAccesser from '../../src/accesser/LocalAccesser';
+import { IMaterializeOptions } from '../../src/types';
+import { getFromFixtures } from '../helpers';
+
+const multiExportedComptPath = getFromFixtures('multiple-exported-component');
+const singleExportedComptPath = getFromFixtures('single-exported-component');
+
+test.serial('access single exported component by local', async t => {
+  const options: IMaterializeOptions = {
+    entry: singleExportedComptPath,
+    accesser: 'local',
+    isExportedAsMultiple: false,
+  };
+  const accesser = new LocalAccesser(options);
+  const actual = await accesser.access();
+  t.snapshot(actual);
+});
+
+test.serial('access multiple exported component by local', async t => {
+  const options: IMaterializeOptions = {
+    entry: multiExportedComptPath,
+    accesser: 'local',
+    isExportedAsMultiple: true,
+  };
+  const accesser = new LocalAccesser(options);
+  const actual = await accesser.access();
+  t.snapshot(actual);
+});

packages/material-parser/test/accesser/OnlineAccesser.ts

@@ -0,0 +1,42 @@
+import test from 'ava';
+import OnlineAccesser from '../../src/accesser/OnlineAccesser';
+import { IMaterializeOptions } from '../../src/types';
+
+const singleExportedComponent = '@ali/demo-biz-test090702@0.0.2';
+const multipleExportedComponent = '@ali/aimake-basic@0.1.0';
+
+test.serial('online accesser', t => {
+  t.pass();
+})
+// test.serial('access single exported component by online', async t => {
+//   const options: IMaterializeOptions = {
+//     entry: singleExportedComponent,
+//     accesser: 'online',
+//     isExportedAsMultiple: false,
+//   };
+//   const accesser = new OnlineAccesser(options);
+//   const actual = await accesser.access();
+//   t.snapshot(actual);
+// });
+
+// test.serial('access multiple exported component by online', async t => {
+//   const options: IMaterializeOptions = {
+//     entry: multipleExportedComponent,
+//     accesser: 'online',
+//     isExportedAsMultiple: true,
+//   };
+//   const accesser = new OnlineAccesser(options);
+//   const actual = await accesser.access();
+//   t.snapshot(actual);
+// });
+
+// test.serial('access @alifd/next@1.17.12 by online', async t => {
+//   const options: IMaterializeOptions = {
+//     entry: '@alifd/next@1.17.12',
+//     accesser: 'online',
+//     isExportedAsMultiple: true,
+//   };
+//   const accesser = new OnlineAccesser(options);
+//   const actual = await accesser.access();
+//   t.snapshot(actual);
+// });

packages/material-parser/test/accesser/snapshots/LocalAccesser.ts.md

@@ -0,0 +1,529 @@
+# Snapshot report for `test/accesser/LocalAccesser.ts`
+
+The actual snapshot is saved in `LocalAccesser.ts.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## access multiple exported component by local
+
+> Snapshot 1
+
+    [
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeBlank/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeBlank","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"styleFlexLayout","label":"styleFlexLayout","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"},{"name":"id","label":"id","renderer":""}]}}',
+        manifestObj: {
+          name: 'AIMakeBlank',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleFlexLayout',
+                name: 'styleFlexLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'id',
+                name: 'id',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeIcon/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeIcon","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"className","label":"className","renderer":""},{"name":"iconClassName","label":"iconClassName","renderer":""},{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleText","label":"styleText","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeIcon',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'className',
+                name: 'className',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'iconClassName',
+                name: 'iconClassName',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleText',
+                name: 'styleText',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeImage/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeImage","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeImage',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeLink/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeLink","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleText","label":"styleText","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeLink',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleText',
+                name: 'styleText',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakePlaceholder/manifest.js',
+        manifestJS: 'export default {"name":"AIMakePlaceholder","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakePlaceholder',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeText/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeText","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"type","label":"type","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleText","label":"styleText","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeText',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'type',
+                name: 'type',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleText',
+                name: 'styleText',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/Root/manifest.js',
+        manifestJS: 'export default {"name":"Root","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"style","label":"style","renderer":"","defaultValue":"{\\n  padding: 0,\\n  backgroundColor: \'#f0f2f5\',\\n  minHeight: \'100%\'\\n}"},{"name":"children","label":"children","renderer":""}]}}',
+        manifestObj: {
+          name: 'Root',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: `{␊
+                  padding: 0,␊
+                  backgroundColor: '#f0f2f5',␊
+                  minHeight: '100%'␊
+                }`,
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+    ]
+
+## access single exported component by local
+
+> Snapshot 1
+
+    [
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/single-exported-component/es/manifest.js',
+        manifestJS: 'export default {"name":"Demo","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"optionalArray","label":"optionalArray","renderer":""},{"name":"optionalBool","label":"optionalBool","renderer":""},{"name":"optionalFunc","label":"optionalFunc","renderer":""},{"name":"optionalNumber","label":"optionalNumber","renderer":""},{"name":"optionalObject","label":"optionalObject","renderer":""},{"name":"optionalString","label":"optionalString","renderer":""},{"name":"optionalSymbol","label":"optionalSymbol","renderer":""},{"name":"optionalNode","label":"optionalNode","renderer":""},{"name":"optionalElement","label":"optionalElement","renderer":""},{"name":"optionalElementType","label":"optionalElementType","renderer":""},{"name":"optionalMessage","label":"optionalMessage","renderer":""},{"name":"optionalEnum","label":"optionalEnum","renderer":""},{"name":"optionalUnion","label":"optionalUnion","renderer":""},{"name":"optionalArrayOf","label":"optionalArrayOf","renderer":""},{"name":"optionalObjectOf","label":"optionalObjectOf","renderer":""},{"name":"optionalObjectWithShape","label":"optionalObjectWithShape","renderer":""},{"name":"optionalObjectWithShape2","label":"optionalObjectWithShape2","renderer":""},{"name":"optionalObjectWithStrictShape","label":"optionalObjectWithStrictShape","renderer":""},{"name":"requiredFunc","label":"requiredFunc","renderer":""},{"name":"requiredAny","label":"requiredAny","renderer":""}]}}',
+        manifestObj: {
+          name: 'Demo',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'optionalArray',
+                name: 'optionalArray',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalBool',
+                name: 'optionalBool',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalFunc',
+                name: 'optionalFunc',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalNumber',
+                name: 'optionalNumber',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalObject',
+                name: 'optionalObject',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalString',
+                name: 'optionalString',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalSymbol',
+                name: 'optionalSymbol',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalNode',
+                name: 'optionalNode',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalElement',
+                name: 'optionalElement',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalElementType',
+                name: 'optionalElementType',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalMessage',
+                name: 'optionalMessage',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalEnum',
+                name: 'optionalEnum',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalUnion',
+                name: 'optionalUnion',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalArrayOf',
+                name: 'optionalArrayOf',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalObjectOf',
+                name: 'optionalObjectOf',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalObjectWithShape',
+                name: 'optionalObjectWithShape',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalObjectWithShape2',
+                name: 'optionalObjectWithShape2',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalObjectWithStrictShape',
+                name: 'optionalObjectWithStrictShape',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'requiredFunc',
+                name: 'requiredFunc',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'requiredAny',
+                name: 'requiredAny',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+    ]

packages/material-parser/test/accesser/snapshots/OnlineAccesser.ts.md

@@ -0,0 +1,408 @@
+# Snapshot report for `test/accesser/OnlineAccesser.ts`
+
+The actual snapshot is saved in `OnlineAccesser.ts.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## access multiple exported component by online
+
+> Snapshot 1
+
+    [
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/node_modules/.temp/kDKCQ3wGKzpHh6KU5ExdE1/node_modules/@ali/aimake-basic/es/basic/AIMakeBlank/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeBlank","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"styleFlexLayout","label":"styleFlexLayout","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"},{"name":"id","label":"id","renderer":""}]}}',
+        manifestObj: {
+          name: 'AIMakeBlank',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleFlexLayout',
+                name: 'styleFlexLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'id',
+                name: 'id',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/node_modules/.temp/kDKCQ3wGKzpHh6KU5ExdE1/node_modules/@ali/aimake-basic/es/basic/AIMakeIcon/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeIcon","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"className","label":"className","renderer":""},{"name":"iconClassName","label":"iconClassName","renderer":""},{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleText","label":"styleText","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeIcon',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'className',
+                name: 'className',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'iconClassName',
+                name: 'iconClassName',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleText',
+                name: 'styleText',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/node_modules/.temp/kDKCQ3wGKzpHh6KU5ExdE1/node_modules/@ali/aimake-basic/es/basic/AIMakeImage/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeImage","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeImage',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/node_modules/.temp/kDKCQ3wGKzpHh6KU5ExdE1/node_modules/@ali/aimake-basic/es/basic/AIMakeLink/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeLink","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleText","label":"styleText","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeLink',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleText',
+                name: 'styleText',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/node_modules/.temp/kDKCQ3wGKzpHh6KU5ExdE1/node_modules/@ali/aimake-basic/es/basic/AIMakePlaceholder/manifest.js',
+        manifestJS: 'export default {"name":"AIMakePlaceholder","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakePlaceholder',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/node_modules/.temp/kDKCQ3wGKzpHh6KU5ExdE1/node_modules/@ali/aimake-basic/es/basic/AIMakeText/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeText","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"type","label":"type","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleText","label":"styleText","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeText',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'type',
+                name: 'type',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleText',
+                name: 'styleText',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/node_modules/.temp/kDKCQ3wGKzpHh6KU5ExdE1/node_modules/@ali/aimake-basic/es/basic/Root/manifest.js',
+        manifestJS: 'export default {"name":"Root","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"style","label":"style","renderer":"","defaultValue":"{\\n  padding: 0,\\n  backgroundColor: \'#f0f2f5\',\\n  minHeight: \'100%\'\\n}"},{"name":"children","label":"children","renderer":""}]}}',
+        manifestObj: {
+          name: 'Root',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: `{␊
+                  padding: 0,␊
+                  backgroundColor: '#f0f2f5',␊
+                  minHeight: '100%'␊
+                }`,
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+    ]
+
+## access single exported component by online
+
+> Snapshot 1
+
+    [
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/node_modules/.temp/todtaTTK9KxDGepu5Kbb9G/node_modules/@ali/demo-biz-test090702/es/manifest.js',
+        manifestJS: 'export default {"name":"Demo","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[]}}',
+        manifestObj: {
+          name: 'Demo',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+    ]

packages/material-parser/test/fixtures/__snapshots__/test/Materialize.ts.md

@@ -0,0 +1,563 @@
+# Snapshot report for `test/Materialize.ts`
+
+The actual snapshot is saved in `Materialize.ts.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## materialize multiple exported component by local
+
+> Snapshot 1
+
+    [
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeBlank/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeBlank","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"styleFlexLayout","label":"styleFlexLayout","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"},{"name":"id","label":"id","renderer":""}]}}',
+        manifestObj: {
+          name: 'AIMakeBlank',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleFlexLayout',
+                name: 'styleFlexLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'id',
+                name: 'id',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeIcon/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeIcon","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"className","label":"className","renderer":""},{"name":"iconClassName","label":"iconClassName","renderer":""},{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleText","label":"styleText","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeIcon',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'className',
+                name: 'className',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'iconClassName',
+                name: 'iconClassName',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleText',
+                name: 'styleText',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeImage/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeImage","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeImage',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeLink/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeLink","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleText","label":"styleText","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeLink',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleText',
+                name: 'styleText',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakePlaceholder/manifest.js',
+        manifestJS: 'export default {"name":"AIMakePlaceholder","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakePlaceholder',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeText/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeText","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"type","label":"type","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleText","label":"styleText","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeText',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'type',
+                name: 'type',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleText',
+                name: 'styleText',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/Root/manifest.js',
+        manifestJS: 'export default {"name":"Root","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"style","label":"style","renderer":"","defaultValue":"{\\n  padding: 0,\\n  backgroundColor: \'#f0f2f5\',\\n  minHeight: \'100%\'\\n}"},{"name":"children","label":"children","renderer":""}]}}',
+        manifestObj: {
+          name: 'Root',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: `{␊
+                  padding: 0,␊
+                  backgroundColor: '#f0f2f5',␊
+                  minHeight: '100%'␊
+                }`,
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+    ]
+
+## materialize multiple exported component by online
+
+> Snapshot 1
+
+    []
+
+## materialize single exported component by local
+
+> Snapshot 1
+
+    [
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/single-exported-component/es/manifest.js',
+        manifestJS: 'export default {"name":"Demo","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"optionalArray","label":"optionalArray","renderer":""},{"name":"optionalBool","label":"optionalBool","renderer":""},{"name":"optionalFunc","label":"optionalFunc","renderer":""},{"name":"optionalNumber","label":"optionalNumber","renderer":""},{"name":"optionalObject","label":"optionalObject","renderer":""},{"name":"optionalString","label":"optionalString","renderer":""},{"name":"optionalSymbol","label":"optionalSymbol","renderer":""},{"name":"optionalNode","label":"optionalNode","renderer":""},{"name":"optionalElement","label":"optionalElement","renderer":""},{"name":"optionalElementType","label":"optionalElementType","renderer":""},{"name":"optionalMessage","label":"optionalMessage","renderer":""},{"name":"optionalEnum","label":"optionalEnum","renderer":""},{"name":"optionalUnion","label":"optionalUnion","renderer":""},{"name":"optionalArrayOf","label":"optionalArrayOf","renderer":""},{"name":"optionalObjectOf","label":"optionalObjectOf","renderer":""},{"name":"optionalObjectWithShape","label":"optionalObjectWithShape","renderer":""},{"name":"optionalObjectWithShape2","label":"optionalObjectWithShape2","renderer":""},{"name":"optionalObjectWithStrictShape","label":"optionalObjectWithStrictShape","renderer":""},{"name":"requiredFunc","label":"requiredFunc","renderer":""},{"name":"requiredAny","label":"requiredAny","renderer":""}]}}',
+        manifestObj: {
+          name: 'Demo',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'optionalArray',
+                name: 'optionalArray',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalBool',
+                name: 'optionalBool',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalFunc',
+                name: 'optionalFunc',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalNumber',
+                name: 'optionalNumber',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalObject',
+                name: 'optionalObject',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalString',
+                name: 'optionalString',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalSymbol',
+                name: 'optionalSymbol',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalNode',
+                name: 'optionalNode',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalElement',
+                name: 'optionalElement',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalElementType',
+                name: 'optionalElementType',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalMessage',
+                name: 'optionalMessage',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalEnum',
+                name: 'optionalEnum',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalUnion',
+                name: 'optionalUnion',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalArrayOf',
+                name: 'optionalArrayOf',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalObjectOf',
+                name: 'optionalObjectOf',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalObjectWithShape',
+                name: 'optionalObjectWithShape',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalObjectWithShape2',
+                name: 'optionalObjectWithShape2',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalObjectWithStrictShape',
+                name: 'optionalObjectWithStrictShape',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'requiredFunc',
+                name: 'requiredFunc',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'requiredAny',
+                name: 'requiredAny',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+    ]
+
+## materialize single exported component by online
+
+> Snapshot 1
+
+    [
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/node_modules/.temp/xsxTSTosqFrpoTUsaDCkQs/node_modules/@ali/demo-biz-test090702/es/manifest.js',
+        manifestJS: 'export default {"name":"Demo","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[]}}',
+        manifestObj: {
+          name: 'Demo',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+    ]

packages/material-parser/test/fixtures/__snapshots__/test/accesser/LocalAccesser.ts.md

@@ -0,0 +1,529 @@
+# Snapshot report for `test/accesser/LocalAccesser.ts`
+
+The actual snapshot is saved in `LocalAccesser.ts.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## access multiple exported component by local
+
+> Snapshot 1
+
+    [
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeBlank/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeBlank","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"styleFlexLayout","label":"styleFlexLayout","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"},{"name":"id","label":"id","renderer":""}]}}',
+        manifestObj: {
+          name: 'AIMakeBlank',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleFlexLayout',
+                name: 'styleFlexLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'id',
+                name: 'id',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeIcon/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeIcon","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"className","label":"className","renderer":""},{"name":"iconClassName","label":"iconClassName","renderer":""},{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleText","label":"styleText","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeIcon',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'className',
+                name: 'className',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'iconClassName',
+                name: 'iconClassName',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleText',
+                name: 'styleText',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeImage/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeImage","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeImage',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeLink/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeLink","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleText","label":"styleText","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeLink',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleText',
+                name: 'styleText',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakePlaceholder/manifest.js',
+        manifestJS: 'export default {"name":"AIMakePlaceholder","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakePlaceholder',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeText/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeText","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"type","label":"type","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleText","label":"styleText","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeText',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'type',
+                name: 'type',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleText',
+                name: 'styleText',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/Root/manifest.js',
+        manifestJS: 'export default {"name":"Root","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"style","label":"style","renderer":"","defaultValue":"{\\n  padding: 0,\\n  backgroundColor: \'#f0f2f5\',\\n  minHeight: \'100%\'\\n}"},{"name":"children","label":"children","renderer":""}]}}',
+        manifestObj: {
+          name: 'Root',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: `{␊
+                  padding: 0,␊
+                  backgroundColor: '#f0f2f5',␊
+                  minHeight: '100%'␊
+                }`,
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+    ]
+
+## access single exported component by local
+
+> Snapshot 1
+
+    [
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/single-exported-component/es/manifest.js',
+        manifestJS: 'export default {"name":"Demo","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"optionalArray","label":"optionalArray","renderer":""},{"name":"optionalBool","label":"optionalBool","renderer":""},{"name":"optionalFunc","label":"optionalFunc","renderer":""},{"name":"optionalNumber","label":"optionalNumber","renderer":""},{"name":"optionalObject","label":"optionalObject","renderer":""},{"name":"optionalString","label":"optionalString","renderer":""},{"name":"optionalSymbol","label":"optionalSymbol","renderer":""},{"name":"optionalNode","label":"optionalNode","renderer":""},{"name":"optionalElement","label":"optionalElement","renderer":""},{"name":"optionalElementType","label":"optionalElementType","renderer":""},{"name":"optionalMessage","label":"optionalMessage","renderer":""},{"name":"optionalEnum","label":"optionalEnum","renderer":""},{"name":"optionalUnion","label":"optionalUnion","renderer":""},{"name":"optionalArrayOf","label":"optionalArrayOf","renderer":""},{"name":"optionalObjectOf","label":"optionalObjectOf","renderer":""},{"name":"optionalObjectWithShape","label":"optionalObjectWithShape","renderer":""},{"name":"optionalObjectWithShape2","label":"optionalObjectWithShape2","renderer":""},{"name":"optionalObjectWithStrictShape","label":"optionalObjectWithStrictShape","renderer":""},{"name":"requiredFunc","label":"requiredFunc","renderer":""},{"name":"requiredAny","label":"requiredAny","renderer":""}]}}',
+        manifestObj: {
+          name: 'Demo',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'optionalArray',
+                name: 'optionalArray',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalBool',
+                name: 'optionalBool',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalFunc',
+                name: 'optionalFunc',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalNumber',
+                name: 'optionalNumber',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalObject',
+                name: 'optionalObject',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalString',
+                name: 'optionalString',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalSymbol',
+                name: 'optionalSymbol',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalNode',
+                name: 'optionalNode',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalElement',
+                name: 'optionalElement',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalElementType',
+                name: 'optionalElementType',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalMessage',
+                name: 'optionalMessage',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalEnum',
+                name: 'optionalEnum',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalUnion',
+                name: 'optionalUnion',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalArrayOf',
+                name: 'optionalArrayOf',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalObjectOf',
+                name: 'optionalObjectOf',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalObjectWithShape',
+                name: 'optionalObjectWithShape',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalObjectWithShape2',
+                name: 'optionalObjectWithShape2',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'optionalObjectWithStrictShape',
+                name: 'optionalObjectWithStrictShape',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'requiredFunc',
+                name: 'requiredFunc',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'requiredAny',
+                name: 'requiredAny',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+    ]

packages/material-parser/test/fixtures/__snapshots__/test/accesser/OnlineAccesser.ts.md

@@ -0,0 +1,408 @@
+# Snapshot report for `test/accesser/OnlineAccesser.ts`
+
+The actual snapshot is saved in `OnlineAccesser.ts.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## access multiple exported component by online
+
+> Snapshot 1
+
+    [
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/node_modules/.temp/8u9fhc4duv8uWDztUQ7Uxh/node_modules/@ali/aimake-basic/es/basic/AIMakeBlank/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeBlank","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"styleFlexLayout","label":"styleFlexLayout","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"},{"name":"id","label":"id","renderer":""}]}}',
+        manifestObj: {
+          name: 'AIMakeBlank',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleFlexLayout',
+                name: 'styleFlexLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'id',
+                name: 'id',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/node_modules/.temp/8u9fhc4duv8uWDztUQ7Uxh/node_modules/@ali/aimake-basic/es/basic/AIMakeIcon/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeIcon","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"className","label":"className","renderer":""},{"name":"iconClassName","label":"iconClassName","renderer":""},{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleText","label":"styleText","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeIcon',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'className',
+                name: 'className',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'iconClassName',
+                name: 'iconClassName',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleText',
+                name: 'styleText',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/node_modules/.temp/8u9fhc4duv8uWDztUQ7Uxh/node_modules/@ali/aimake-basic/es/basic/AIMakeImage/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeImage","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeImage',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/node_modules/.temp/8u9fhc4duv8uWDztUQ7Uxh/node_modules/@ali/aimake-basic/es/basic/AIMakeLink/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeLink","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleText","label":"styleText","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeLink',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleText',
+                name: 'styleText',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/node_modules/.temp/8u9fhc4duv8uWDztUQ7Uxh/node_modules/@ali/aimake-basic/es/basic/AIMakePlaceholder/manifest.js',
+        manifestJS: 'export default {"name":"AIMakePlaceholder","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakePlaceholder',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/node_modules/.temp/8u9fhc4duv8uWDztUQ7Uxh/node_modules/@ali/aimake-basic/es/basic/AIMakeText/manifest.js',
+        manifestJS: 'export default {"name":"AIMakeText","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"children","label":"children","renderer":""},{"name":"type","label":"type","renderer":""},{"name":"styleBoxModel","label":"styleBoxModel","renderer":""},{"name":"styleText","label":"styleText","renderer":""},{"name":"styleLayout","label":"styleLayout","renderer":""},{"name":"styleBackground","label":"styleBackground","renderer":""},{"name":"style","label":"style","renderer":"","defaultValue":"{}"}]}}',
+        manifestObj: {
+          name: 'AIMakeText',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'type',
+                name: 'type',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBoxModel',
+                name: 'styleBoxModel',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleText',
+                name: 'styleText',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleLayout',
+                name: 'styleLayout',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'styleBackground',
+                name: 'styleBackground',
+                renderer: '',
+              },
+              {
+                defaultValue: '{}',
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/node_modules/.temp/8u9fhc4duv8uWDztUQ7Uxh/node_modules/@ali/aimake-basic/es/basic/Root/manifest.js',
+        manifestJS: 'export default {"name":"Root","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"style","label":"style","renderer":"","defaultValue":"{\\n  padding: 0,\\n  backgroundColor: \'#f0f2f5\',\\n  minHeight: \'100%\'\\n}"},{"name":"children","label":"children","renderer":""}]}}',
+        manifestObj: {
+          name: 'Root',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [
+              {
+                defaultValue: `{␊
+                  padding: 0,␊
+                  backgroundColor: '#f0f2f5',␊
+                  minHeight: '100%'␊
+                }`,
+                label: 'style',
+                name: 'style',
+                renderer: '',
+              },
+              {
+                defaultValue: undefined,
+                label: 'children',
+                name: 'children',
+                renderer: '',
+              },
+            ],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+    ]
+
+## access single exported component by online
+
+> Snapshot 1
+
+    [
+      {
+        manifestFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/node_modules/.temp/rT9SFxrRVdFSqBfMvpxH2T/node_modules/@ali/demo-biz-test090702/es/manifest.js',
+        manifestJS: 'export default {"name":"Demo","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[]}}',
+        manifestObj: {
+          name: 'Demo',
+          settings: {
+            handles: [
+              'cut',
+              'copy',
+              'duplicate',
+              'delete',
+              'paste',
+            ],
+            insertionModes: 'tbrl',
+            props: [],
+            shouldActive: true,
+            shouldDrag: true,
+            type: 'element_inline',
+          },
+        },
+      },
+    ]

packages/material-parser/test/fixtures/__snapshots__/test/generator/Generator.ts.md

@@ -0,0 +1,981 @@
+# Snapshot report for `test/generator/Generator.ts`
+
+The actual snapshot is saved in `Generator.ts.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## generate multiple exported components with extensions
+
+> Snapshot 1
+
+    Object @Module {
+      components: [
+        {
+          componentName: 'AIMakeBlank',
+          manifest: {
+            name: 'AIMakeBlank',
+            settings: {
+              handles: [
+                'cut',
+                'copy',
+                'duplicate',
+                'delete',
+                'paste',
+              ],
+              insertionModes: 'tbrl',
+              props: [
+                {
+                  label: 'children',
+                  name: 'children',
+                  renderer: '',
+                },
+                {
+                  label: 'styleBoxModel',
+                  name: 'styleBoxModel',
+                  renderer: '',
+                },
+                {
+                  label: 'styleLayout',
+                  name: 'styleLayout',
+                  renderer: '',
+                },
+                {
+                  label: 'styleBackground',
+                  name: 'styleBackground',
+                  renderer: '',
+                },
+                {
+                  label: 'styleFlexLayout',
+                  name: 'styleFlexLayout',
+                  renderer: '',
+                },
+                {
+                  defaultValue: '{}',
+                  label: 'style',
+                  name: 'style',
+                  renderer: '',
+                },
+                {
+                  label: 'id',
+                  name: 'id',
+                  renderer: '',
+                },
+              ],
+              shouldActive: true,
+              shouldDrag: true,
+              type: 'element_inline',
+            },
+          },
+          origin: Function r {
+            defaultProps: {
+              border: false,
+              borderRadius: false,
+              display: false,
+              height: false,
+              margin: false,
+              padding: false,
+              width: false,
+            },
+            propTypes: {
+              border: Function e {
+                isRequired: [Circular],
+              },
+              borderRadius: Function e {
+                isRequired: [Circular],
+              },
+              display: Function e {
+                isRequired: [Circular],
+              },
+              height: Function e {
+                isRequired: [Circular],
+              },
+              margin: Function e {
+                isRequired: [Circular],
+              },
+              padding: Function e {
+                isRequired: [Circular],
+              },
+              width: Function e {
+                isRequired: [Circular],
+              },
+            },
+          },
+        },
+        {
+          componentName: 'AIMakeIcon',
+          manifest: {
+            name: 'AIMakeIcon',
+            settings: {
+              handles: [
+                'cut',
+                'copy',
+                'duplicate',
+                'delete',
+                'paste',
+              ],
+              insertionModes: 'tbrl',
+              props: [
+                {
+                  label: 'className',
+                  name: 'className',
+                  renderer: '',
+                },
+                {
+                  label: 'iconClassName',
+                  name: 'iconClassName',
+                  renderer: '',
+                },
+                {
+                  label: 'children',
+                  name: 'children',
+                  renderer: '',
+                },
+                {
+                  label: 'styleBoxModel',
+                  name: 'styleBoxModel',
+                  renderer: '',
+                },
+                {
+                  label: 'styleText',
+                  name: 'styleText',
+                  renderer: '',
+                },
+                {
+                  label: 'styleBackground',
+                  name: 'styleBackground',
+                  renderer: '',
+                },
+                {
+                  defaultValue: '{}',
+                  label: 'style',
+                  name: 'style',
+                  renderer: '',
+                },
+              ],
+              shouldActive: true,
+              shouldDrag: true,
+              type: 'element_inline',
+            },
+          },
+          origin: Function t {
+            createFromIconfont: Function {},
+            defaultProps: {
+              children: '',
+              className: '',
+              iconClassName: 'iconfont',
+              style: {},
+            },
+            propTypes: {
+              children: Function e {
+                isRequired: [Circular],
+              },
+              className: Function e {
+                isRequired: [Circular],
+              },
+              iconClassName: Function e {
+                isRequired: [Circular],
+              },
+              style: Function e {
+                isRequired: [Circular],
+              },
+              styleBackground: Function e {
+                isRequired: [Circular],
+              },
+              styleBoxModel: Function e {
+                isRequired: [Circular],
+              },
+              styleText: Function e {
+                isRequired: [Circular],
+              },
+            },
+          },
+        },
+        {
+          componentName: 'AIMakeImage',
+          manifest: {
+            name: 'AIMakeImage',
+            settings: {
+              handles: [
+                'cut',
+                'copy',
+                'duplicate',
+                'delete',
+                'paste',
+              ],
+              insertionModes: 'tbrl',
+              props: [
+                {
+                  label: 'styleBoxModel',
+                  name: 'styleBoxModel',
+                  renderer: '',
+                },
+                {
+                  defaultValue: '{}',
+                  label: 'style',
+                  name: 'style',
+                  renderer: '',
+                },
+              ],
+              shouldActive: true,
+              shouldDrag: true,
+              type: 'element_inline',
+            },
+          },
+          origin: Function r {
+            defaultProps: {
+              border: false,
+              borderRadius: false,
+              display: false,
+              height: false,
+              margin: false,
+              padding: false,
+              width: false,
+            },
+            propTypes: {
+              border: Function e {
+                isRequired: [Circular],
+              },
+              borderRadius: Function e {
+                isRequired: [Circular],
+              },
+              display: Function e {
+                isRequired: [Circular],
+              },
+              height: Function e {
+                isRequired: [Circular],
+              },
+              margin: Function e {
+                isRequired: [Circular],
+              },
+              padding: Function e {
+                isRequired: [Circular],
+              },
+              width: Function e {
+                isRequired: [Circular],
+              },
+            },
+          },
+        },
+        {
+          componentName: 'AIMakeLink',
+          manifest: {
+            name: 'AIMakeLink',
+            settings: {
+              handles: [
+                'cut',
+                'copy',
+                'duplicate',
+                'delete',
+                'paste',
+              ],
+              insertionModes: 'tbrl',
+              props: [
+                {
+                  label: 'children',
+                  name: 'children',
+                  renderer: '',
+                },
+                {
+                  label: 'styleBoxModel',
+                  name: 'styleBoxModel',
+                  renderer: '',
+                },
+                {
+                  label: 'styleText',
+                  name: 'styleText',
+                  renderer: '',
+                },
+                {
+                  label: 'styleLayout',
+                  name: 'styleLayout',
+                  renderer: '',
+                },
+                {
+                  label: 'styleBackground',
+                  name: 'styleBackground',
+                  renderer: '',
+                },
+                {
+                  defaultValue: '{}',
+                  label: 'style',
+                  name: 'style',
+                  renderer: '',
+                },
+              ],
+              shouldActive: true,
+              shouldDrag: true,
+              type: 'element_inline',
+            },
+          },
+          origin: Function r {
+            defaultProps: {
+              border: false,
+              borderRadius: false,
+              display: false,
+              height: false,
+              margin: false,
+              padding: false,
+              width: false,
+            },
+            propTypes: {
+              border: Function e {
+                isRequired: [Circular],
+              },
+              borderRadius: Function e {
+                isRequired: [Circular],
+              },
+              display: Function e {
+                isRequired: [Circular],
+              },
+              height: Function e {
+                isRequired: [Circular],
+              },
+              margin: Function e {
+                isRequired: [Circular],
+              },
+              padding: Function e {
+                isRequired: [Circular],
+              },
+              width: Function e {
+                isRequired: [Circular],
+              },
+            },
+          },
+        },
+        {
+          componentName: 'AIMakePlaceholder',
+          manifest: {
+            name: 'AIMakePlaceholder',
+            settings: {
+              handles: [
+                'cut',
+                'copy',
+                'duplicate',
+                'delete',
+                'paste',
+              ],
+              insertionModes: 'tbrl',
+              props: [
+                {
+                  label: 'children',
+                  name: 'children',
+                  renderer: '',
+                },
+                {
+                  label: 'styleBoxModel',
+                  name: 'styleBoxModel',
+                  renderer: '',
+                },
+                {
+                  label: 'styleLayout',
+                  name: 'styleLayout',
+                  renderer: '',
+                },
+                {
+                  defaultValue: '{}',
+                  label: 'style',
+                  name: 'style',
+                  renderer: '',
+                },
+              ],
+              shouldActive: true,
+              shouldDrag: true,
+              type: 'element_inline',
+            },
+          },
+          origin: Function r {
+            defaultProps: {
+              border: false,
+              borderRadius: false,
+              display: false,
+              height: false,
+              margin: false,
+              padding: false,
+              width: false,
+            },
+            propTypes: {
+              border: Function e {
+                isRequired: [Circular],
+              },
+              borderRadius: Function e {
+                isRequired: [Circular],
+              },
+              display: Function e {
+                isRequired: [Circular],
+              },
+              height: Function e {
+                isRequired: [Circular],
+              },
+              margin: Function e {
+                isRequired: [Circular],
+              },
+              padding: Function e {
+                isRequired: [Circular],
+              },
+              width: Function e {
+                isRequired: [Circular],
+              },
+            },
+          },
+        },
+        {
+          componentName: 'AIMakeText',
+          manifest: {
+            name: 'AIMakeText',
+            settings: {
+              handles: [
+                'cut',
+                'copy',
+                'duplicate',
+                'delete',
+                'paste',
+              ],
+              insertionModes: 'tbrl',
+              props: [
+                {
+                  label: 'children',
+                  name: 'children',
+                  renderer: '',
+                },
+                {
+                  label: 'type',
+                  name: 'type',
+                  renderer: '',
+                },
+                {
+                  label: 'styleBoxModel',
+                  name: 'styleBoxModel',
+                  renderer: '',
+                },
+                {
+                  label: 'styleText',
+                  name: 'styleText',
+                  renderer: '',
+                },
+                {
+                  label: 'styleLayout',
+                  name: 'styleLayout',
+                  renderer: '',
+                },
+                {
+                  label: 'styleBackground',
+                  name: 'styleBackground',
+                  renderer: '',
+                },
+                {
+                  defaultValue: '{}',
+                  label: 'style',
+                  name: 'style',
+                  renderer: '',
+                },
+              ],
+              shouldActive: true,
+              shouldDrag: true,
+              type: 'element_inline',
+            },
+          },
+          origin: Function r {
+            defaultProps: {
+              border: false,
+              borderRadius: false,
+              display: false,
+              height: false,
+              margin: false,
+              padding: false,
+              width: false,
+            },
+            propTypes: {
+              border: Function e {
+                isRequired: [Circular],
+              },
+              borderRadius: Function e {
+                isRequired: [Circular],
+              },
+              display: Function e {
+                isRequired: [Circular],
+              },
+              height: Function e {
+                isRequired: [Circular],
+              },
+              margin: Function e {
+                isRequired: [Circular],
+              },
+              padding: Function e {
+                isRequired: [Circular],
+              },
+              width: Function e {
+                isRequired: [Circular],
+              },
+            },
+          },
+        },
+        {
+          componentName: 'Root',
+          manifest: {
+            name: 'Root',
+            settings: {
+              handles: [
+                'cut',
+                'copy',
+                'duplicate',
+                'delete',
+                'paste',
+              ],
+              insertionModes: 'tbrl',
+              props: [
+                {
+                  defaultValue: `{␊
+                    padding: 0,␊
+                    backgroundColor: '#f0f2f5',␊
+                    minHeight: '100%'␊
+                  }`,
+                  label: 'style',
+                  name: 'style',
+                  renderer: '',
+                },
+                {
+                  label: 'children',
+                  name: 'children',
+                  renderer: '',
+                },
+              ],
+              shouldActive: true,
+              shouldDrag: true,
+              type: 'element_inline',
+            },
+          },
+          origin: Function t {
+            defaultProps: {
+              children: null,
+              style: {
+                backgroundColor: '#f0f2f5',
+                minHeight: '100%',
+                padding: 0,
+              },
+            },
+            propTypes: {
+              children: Function e {
+                isRequired: [Circular],
+              },
+              style: Function e {
+                isRequired: [Circular],
+              },
+            },
+          },
+        },
+      ],
+      pkgInfo: {
+        defaultExportedName: '',
+        originalPackage: 'multiple-exported-component',
+        originalVersion: '1.0.0',
+        package: 'multiple-exported-component',
+        version: '1.0.0',
+      },
+      version: '1.0.0',
+    }
+
+## generate single exported components
+
+> Snapshot 1
+
+    Object @Module {
+      components: [
+        {
+          componentName: 'Demo',
+          manifest: {
+            name: 'Demo',
+            settings: {
+              handles: [
+                'cut',
+                'copy',
+                'duplicate',
+                'delete',
+                'paste',
+              ],
+              insertionModes: 'tbrl',
+              props: [
+                {
+                  label: 'optionalArray',
+                  name: 'optionalArray',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalBool',
+                  name: 'optionalBool',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalFunc',
+                  name: 'optionalFunc',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalNumber',
+                  name: 'optionalNumber',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalObject',
+                  name: 'optionalObject',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalString',
+                  name: 'optionalString',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalSymbol',
+                  name: 'optionalSymbol',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalNode',
+                  name: 'optionalNode',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalElement',
+                  name: 'optionalElement',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalElementType',
+                  name: 'optionalElementType',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalMessage',
+                  name: 'optionalMessage',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalEnum',
+                  name: 'optionalEnum',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalUnion',
+                  name: 'optionalUnion',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalArrayOf',
+                  name: 'optionalArrayOf',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalObjectOf',
+                  name: 'optionalObjectOf',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalObjectWithShape',
+                  name: 'optionalObjectWithShape',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalObjectWithShape2',
+                  name: 'optionalObjectWithShape2',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalObjectWithStrictShape',
+                  name: 'optionalObjectWithStrictShape',
+                  renderer: '',
+                },
+                {
+                  label: 'requiredFunc',
+                  name: 'requiredFunc',
+                  renderer: '',
+                },
+                {
+                  label: 'requiredAny',
+                  name: 'requiredAny',
+                  renderer: '',
+                },
+              ],
+              shouldActive: true,
+              shouldDrag: true,
+              type: 'element_inline',
+            },
+          },
+          origin: Function t {
+            defaultProps: {},
+            propTypes: {
+              optionalArray: Function e {
+                isRequired: [Circular],
+              },
+              optionalArrayOf: Function e {
+                isRequired: [Circular],
+              },
+              optionalBool: Function e {
+                isRequired: [Circular],
+              },
+              optionalElement: Function e {
+                isRequired: [Circular],
+              },
+              optionalElementType: Function e {
+                isRequired: [Circular],
+              },
+              optionalEnum: Function e {
+                isRequired: [Circular],
+              },
+              optionalFunc: Function e {
+                isRequired: [Circular],
+              },
+              optionalMessage: Function e {
+                isRequired: [Circular],
+              },
+              optionalNode: Function e {
+                isRequired: [Circular],
+              },
+              optionalNumber: Function e {
+                isRequired: [Circular],
+              },
+              optionalObject: Function e {
+                isRequired: [Circular],
+              },
+              optionalObjectOf: Function e {
+                isRequired: [Circular],
+              },
+              optionalObjectWithShape: Function e {
+                isRequired: [Circular],
+              },
+              optionalObjectWithShape2: Function e {
+                isRequired: [Circular],
+              },
+              optionalObjectWithStrictShape: Function e {
+                isRequired: [Circular],
+              },
+              optionalString: Function e {
+                isRequired: [Circular],
+              },
+              optionalSymbol: Function e {
+                isRequired: [Circular],
+              },
+              optionalUnion: Function e {
+                isRequired: [Circular],
+              },
+              requiredAny: Function e {
+                isRequired: [Circular],
+              },
+              requiredFunc: Function e {
+                isRequired: [Circular],
+              },
+            },
+          },
+        },
+      ],
+      pkgInfo: {
+        defaultExportedName: 'Demo',
+        originalPackage: 'single-exported-component',
+        originalVersion: '1.0.0',
+        package: 'single-exported-component',
+        version: '1.0.0',
+      },
+      version: '1.0.0',
+    }
+
+## generate single exported components with extensions
+
+> Snapshot 1
+
+    Object @Module {
+      components: [
+        {
+          componentName: 'Demo',
+          manifest: {
+            name: 'Demo',
+            settings: {
+              handles: [
+                'cut',
+                'copy',
+                'duplicate',
+                'delete',
+                'paste',
+              ],
+              insertionModes: 'tbrl',
+              props: [
+                {
+                  label: 'optionalArray',
+                  name: 'optionalArray',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalBool',
+                  name: 'optionalBool',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalFunc',
+                  name: 'optionalFunc',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalNumber',
+                  name: 'optionalNumber',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalObject',
+                  name: 'optionalObject',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalString',
+                  name: 'optionalString',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalSymbol',
+                  name: 'optionalSymbol',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalNode',
+                  name: 'optionalNode',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalElement',
+                  name: 'optionalElement',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalElementType',
+                  name: 'optionalElementType',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalMessage',
+                  name: 'optionalMessage',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalEnum',
+                  name: 'optionalEnum',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalUnion',
+                  name: 'optionalUnion',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalArrayOf',
+                  name: 'optionalArrayOf',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalObjectOf',
+                  name: 'optionalObjectOf',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalObjectWithShape',
+                  name: 'optionalObjectWithShape',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalObjectWithShape2',
+                  name: 'optionalObjectWithShape2',
+                  renderer: '',
+                },
+                {
+                  label: 'optionalObjectWithStrictShape',
+                  name: 'optionalObjectWithStrictShape',
+                  renderer: '',
+                },
+                {
+                  label: 'requiredFunc',
+                  name: 'requiredFunc',
+                  renderer: '',
+                },
+                {
+                  label: 'requiredAny',
+                  name: 'requiredAny',
+                  renderer: '',
+                },
+              ],
+              shouldActive: true,
+              shouldDrag: true,
+              type: 'element_inline',
+            },
+          },
+          origin: Function t {
+            defaultProps: {},
+            propTypes: {
+              optionalArray: Function e {
+                isRequired: [Circular],
+              },
+              optionalArrayOf: Function e {
+                isRequired: [Circular],
+              },
+              optionalBool: Function e {
+                isRequired: [Circular],
+              },
+              optionalElement: Function e {
+                isRequired: [Circular],
+              },
+              optionalElementType: Function e {
+                isRequired: [Circular],
+              },
+              optionalEnum: Function e {
+                isRequired: [Circular],
+              },
+              optionalFunc: Function e {
+                isRequired: [Circular],
+              },
+              optionalMessage: Function e {
+                isRequired: [Circular],
+              },
+              optionalNode: Function e {
+                isRequired: [Circular],
+              },
+              optionalNumber: Function e {
+                isRequired: [Circular],
+              },
+              optionalObject: Function e {
+                isRequired: [Circular],
+              },
+              optionalObjectOf: Function e {
+                isRequired: [Circular],
+              },
+              optionalObjectWithShape: Function e {
+                isRequired: [Circular],
+              },
+              optionalObjectWithShape2: Function e {
+                isRequired: [Circular],
+              },
+              optionalObjectWithStrictShape: Function e {
+                isRequired: [Circular],
+              },
+              optionalString: Function e {
+                isRequired: [Circular],
+              },
+              optionalSymbol: Function e {
+                isRequired: [Circular],
+              },
+              optionalUnion: Function e {
+                isRequired: [Circular],
+              },
+              requiredAny: Function e {
+                isRequired: [Circular],
+              },
+              requiredFunc: Function e {
+                isRequired: [Circular],
+              },
+            },
+          },
+        },
+      ],
+      pkgInfo: {
+        defaultExportedName: 'Demo',
+        originalPackage: 'single-exported-component',
+        originalVersion: '1.0.0',
+        package: 'single-exported-component',
+        version: '1.0.0',
+      },
+      version: '1.0.0',
+    }

packages/material-parser/test/fixtures/__snapshots__/test/scanner/LocalScanner.ts.md

@@ -0,0 +1,633 @@
+# Snapshot report for `test/scanner/LocalScanner.ts`
+
+The actual snapshot is saved in `LocalScanner.ts.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## scan from multiple exported component
+
+> Snapshot 1
+
+    {
+      mainEntry: '/Users/hongboy/WebstormProjects/aimake-otter-engine-1016/packages/otter-engine-materialin/test/fixtures/multiple-exported-component/es/index.js',
+      modules: [
+        {
+          fileContent: `import AIMakeBlank from './basic/AIMakeBlank';␊
+          import AIMakeIcon from './basic/AIMakeIcon';␊
+          import AIMakeImage from './basic/AIMakeImage';␊
+          import AIMakeLink from './basic/AIMakeLink';␊
+          import AIMakePlaceholder from './basic/AIMakePlaceholder';␊
+          import AIMakeText from './basic/AIMakeText';␊
+          import Root from './basic/Root';␊
+          export { AIMakeBlank, AIMakeIcon, AIMakeImage, AIMakeLink, AIMakePlaceholder, AIMakeText, Root };␊
+          `,
+          filePath: '/Users/hongboy/WebstormProjects/aimake-otter-engine-1016/packages/otter-engine-materialin/test/fixtures/multiple-exported-component/es/index.js',
+        },
+        {
+          fileContent: `import _extends from "@babel/runtime/helpers/extends";␊
+          import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React, { Component } from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import HOCBoxModelProps from '../utils/HOCBoxModelProps';␊
+          import HOCLayoutProps from '../utils/HOCLayoutProps';␊
+          import HOCBackgroundProps from '../utils/HOCBackgroundProps';␊
+          import HOCFlexLayoutProps from '../utils/HOCFlexLayoutProps';␊
+          ␊
+          var AIMakeBlank =␊
+          /*#__PURE__*/␊
+          function (_Component) {␊
+            _inherits(AIMakeBlank, _Component);␊
+          ␊
+            function AIMakeBlank() {␊
+              _classCallCheck(this, AIMakeBlank);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(AIMakeBlank).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(AIMakeBlank, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var merged = {};␊
+                var _this$props = this.props,␊
+                    children = _this$props.children,␊
+                    styleBoxModel = _this$props.styleBoxModel,␊
+                    styleLayout = _this$props.styleLayout,␊
+                    styleBackground = _this$props.styleBackground,␊
+                    styleFlexLayout = _this$props.styleFlexLayout,␊
+                    style = _this$props.style,␊
+                    id = _this$props.id;␊
+                var styles = { ...styleBoxModel,␊
+                  ...styleLayout,␊
+                  ...styleBackground,␊
+                  ...styleFlexLayout,␊
+                  ...style␊
+                };␊
+          ␊
+                if (id) {␊
+                  merged.id = id;␊
+                }␊
+          ␊
+                return React.createElement("div", _extends({␊
+                  style: styles␊
+                }, merged), children);␊
+              }␊
+            }]);␊
+          ␊
+            return AIMakeBlank;␊
+          }(Component);␊
+          ␊
+          _defineProperty(AIMakeBlank, "propTypes", {␊
+            children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),␊
+            styleBoxModel: PropTypes.object.isRequired,␊
+            styleLayout: PropTypes.object.isRequired,␊
+            styleBackground: PropTypes.object.isRequired,␊
+            styleFlexLayout: PropTypes.object.isRequired,␊
+            style: PropTypes.object,␊
+            id: PropTypes.string␊
+          });␊
+          ␊
+          _defineProperty(AIMakeBlank, "defaultProps", {␊
+            children: [],␊
+            style: {},␊
+            id: ''␊
+          });␊
+          ␊
+          export default HOCBoxModelProps(HOCLayoutProps(HOCBackgroundProps(HOCFlexLayoutProps(AIMakeBlank))));`,
+          filePath: '/Users/hongboy/WebstormProjects/aimake-otter-engine-1016/packages/otter-engine-materialin/test/fixtures/multiple-exported-component/es/basic/AIMakeBlank/index.js',
+        },
+        {
+          fileContent: `import _extends from "@babel/runtime/helpers/extends";␊
+          import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";␊
+          import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React, { Component } from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import classNames from 'classnames';␊
+          import createFromIconfont from './IconFont';␊
+          ␊
+          var AIMakeIcon =␊
+          /*#__PURE__*/␊
+          function (_Component) {␊
+            _inherits(AIMakeIcon, _Component);␊
+          ␊
+            function AIMakeIcon() {␊
+              _classCallCheck(this, AIMakeIcon);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(AIMakeIcon).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(AIMakeIcon, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var _this$props = this.props,␊
+                    className = _this$props.className,␊
+                    iconClassName = _this$props.iconClassName,␊
+                    children = _this$props.children,␊
+                    styleBoxModel = _this$props.styleBoxModel,␊
+                    styleText = _this$props.styleText,␊
+                    styleBackground = _this$props.styleBackground,␊
+                    style = _this$props.style,␊
+                    otherProps = _objectWithoutProperties(_this$props, ["className", "iconClassName", "children", "styleBoxModel", "styleText", "styleBackground", "style"]);␊
+          ␊
+                var styles = { ...styleBoxModel,␊
+                  ...styleText,␊
+                  ...styleBackground,␊
+                  ...style␊
+                };␊
+                return React.createElement("i", _extends({}, otherProps, {␊
+                  className: classNames(className, iconClassName),␊
+                  style: styles␊
+                }), children);␊
+              }␊
+            }]);␊
+          ␊
+            return AIMakeIcon;␊
+          }(Component);␊
+          ␊
+          _defineProperty(AIMakeIcon, "propTypes", {␊
+            className: PropTypes.string,␊
+            iconClassName: PropTypes.string,␊
+            children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),␊
+            styleBoxModel: PropTypes.object.isRequired,␊
+            styleText: PropTypes.object.isRequired,␊
+            styleBackground: PropTypes.object.isRequired,␊
+            style: PropTypes.object␊
+          });␊
+          ␊
+          _defineProperty(AIMakeIcon, "defaultProps", {␊
+            className: '',␊
+            iconClassName: 'iconfont',␊
+            children: '',␊
+            style: {}␊
+          });␊
+          ␊
+          AIMakeIcon.createFromIconfont = createFromIconfont;␊
+          export default AIMakeIcon;`,
+          filePath: '/Users/hongboy/WebstormProjects/aimake-otter-engine-1016/packages/otter-engine-materialin/test/fixtures/multiple-exported-component/es/basic/AIMakeIcon/index.js',
+        },
+        {
+          fileContent: `import _extends from "@babel/runtime/helpers/extends";␊
+          import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";␊
+          import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React, { Component } from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import HOCBoxModelProps from '../utils/HOCBoxModelProps';␊
+          ␊
+          var AIMakeImage =␊
+          /*#__PURE__*/␊
+          function (_Component) {␊
+            _inherits(AIMakeImage, _Component);␊
+          ␊
+            function AIMakeImage() {␊
+              _classCallCheck(this, AIMakeImage);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(AIMakeImage).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(AIMakeImage, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var _this$props = this.props,␊
+                    styleBoxModel = _this$props.styleBoxModel,␊
+                    style = _this$props.style,␊
+                    otherProps = _objectWithoutProperties(_this$props, ["styleBoxModel", "style"]);␊
+          ␊
+                var styles = { ...styleBoxModel,␊
+                  ...style␊
+                };␊
+                return React.createElement("img", _extends({}, otherProps, {␊
+                  style: styles,␊
+                  alt: "AIMakeImage"␊
+                }));␊
+              }␊
+            }]);␊
+          ␊
+            return AIMakeImage;␊
+          }(Component);␊
+          ␊
+          _defineProperty(AIMakeImage, "propTypes", {␊
+            styleBoxModel: PropTypes.object.isRequired,␊
+            style: PropTypes.object␊
+          });␊
+          ␊
+          _defineProperty(AIMakeImage, "defaultProps", {␊
+            style: {}␊
+          });␊
+          ␊
+          export default HOCBoxModelProps(AIMakeImage);`,
+          filePath: '/Users/hongboy/WebstormProjects/aimake-otter-engine-1016/packages/otter-engine-materialin/test/fixtures/multiple-exported-component/es/basic/AIMakeImage/index.js',
+        },
+        {
+          fileContent: `import _extends from "@babel/runtime/helpers/extends";␊
+          import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";␊
+          import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React, { Component } from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import HOCBoxModelProps from '../utils/HOCBoxModelProps';␊
+          import HOCTextProps from '../utils/HOCTextProps';␊
+          import HOCLayoutProps from '../utils/HOCLayoutProps';␊
+          import HOCBackgroundProps from '../utils/HOCBackgroundProps';␊
+          ␊
+          var AIMakeLink =␊
+          /*#__PURE__*/␊
+          function (_Component) {␊
+            _inherits(AIMakeLink, _Component);␊
+          ␊
+            function AIMakeLink() {␊
+              _classCallCheck(this, AIMakeLink);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(AIMakeLink).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(AIMakeLink, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var _this$props = this.props,␊
+                    children = _this$props.children,␊
+                    styleBoxModel = _this$props.styleBoxModel,␊
+                    styleText = _this$props.styleText,␊
+                    styleLayout = _this$props.styleLayout,␊
+                    styleBackground = _this$props.styleBackground,␊
+                    style = _this$props.style,␊
+                    otherProps = _objectWithoutProperties(_this$props, ["children", "styleBoxModel", "styleText", "styleLayout", "styleBackground", "style"]);␊
+          ␊
+                var styles = { ...styleBoxModel,␊
+                  ...styleText,␊
+                  ...styleLayout,␊
+                  ...styleBackground,␊
+                  ...style␊
+                };␊
+          ␊
+                if (typeof children !== 'string') {␊
+                  styles.display = 'inline-block';␊
+                }␊
+          ␊
+                return React.createElement("a", _extends({}, otherProps, {␊
+                  style: styles␊
+                }), [children]);␊
+              }␊
+            }]);␊
+          ␊
+            return AIMakeLink;␊
+          }(Component);␊
+          ␊
+          _defineProperty(AIMakeLink, "propTypes", {␊
+            children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),␊
+            styleBoxModel: PropTypes.object.isRequired,␊
+            styleText: PropTypes.object.isRequired,␊
+            styleLayout: PropTypes.object.isRequired,␊
+            styleBackground: PropTypes.object.isRequired,␊
+            style: PropTypes.object␊
+          });␊
+          ␊
+          _defineProperty(AIMakeLink, "defaultProps", {␊
+            children: '',␊
+            style: {}␊
+          });␊
+          ␊
+          export default HOCBoxModelProps(HOCTextProps(HOCLayoutProps(HOCBackgroundProps(AIMakeLink))));`,
+          filePath: '/Users/hongboy/WebstormProjects/aimake-otter-engine-1016/packages/otter-engine-materialin/test/fixtures/multiple-exported-component/es/basic/AIMakeLink/index.js',
+        },
+        {
+          fileContent: `import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React, { Component } from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import HOCBoxModelProps from '../utils/HOCBoxModelProps';␊
+          import HOCLayoutProps from '../utils/HOCLayoutProps';␊
+          ␊
+          var AIMakePlaceholder =␊
+          /*#__PURE__*/␊
+          function (_Component) {␊
+            _inherits(AIMakePlaceholder, _Component);␊
+          ␊
+            function AIMakePlaceholder() {␊
+              _classCallCheck(this, AIMakePlaceholder);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(AIMakePlaceholder).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(AIMakePlaceholder, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var _this$props = this.props,␊
+                    children = _this$props.children,␊
+                    styleBoxModel = _this$props.styleBoxModel,␊
+                    styleLayout = _this$props.styleLayout,␊
+                    style = _this$props.style;␊
+                var styles = { ...styleBoxModel,␊
+                  ...styleLayout,␊
+                  ...style␊
+                };␊
+                var placeholderStyle = {␊
+                  display: 'inline-block',␊
+                  border: '1px dashed #aaa',␊
+                  lineHeight: styles.height,␊
+                  backgroundColor: '#F5E075',␊
+                  overflow: 'hidden',␊
+                  textAlign: 'center',␊
+                  ...styles␊
+                };␊
+                return React.createElement("div", {␊
+                  style: placeholderStyle␊
+                }, children);␊
+              }␊
+            }]);␊
+          ␊
+            return AIMakePlaceholder;␊
+          }(Component);␊
+          ␊
+          _defineProperty(AIMakePlaceholder, "propTypes", {␊
+            children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),␊
+            styleBoxModel: PropTypes.object.isRequired,␊
+            styleLayout: PropTypes.object.isRequired,␊
+            style: PropTypes.object␊
+          });␊
+          ␊
+          _defineProperty(AIMakePlaceholder, "defaultProps", {␊
+            children: '',␊
+            style: {}␊
+          });␊
+          ␊
+          export default HOCBoxModelProps(HOCLayoutProps(AIMakePlaceholder));`,
+          filePath: '/Users/hongboy/WebstormProjects/aimake-otter-engine-1016/packages/otter-engine-materialin/test/fixtures/multiple-exported-component/es/basic/AIMakePlaceholder/index.js',
+        },
+        {
+          fileContent: `import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React, { Component } from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import HOCBoxModelProps from '../utils/HOCBoxModelProps';␊
+          import HOCTextProps from '../utils/HOCTextProps';␊
+          import HOCLayoutProps from '../utils/HOCLayoutProps';␊
+          import HOCBackgroundProps from '../utils/HOCBackgroundProps';␊
+          ␊
+          var AIMakeText =␊
+          /*#__PURE__*/␊
+          function (_Component) {␊
+            _inherits(AIMakeText, _Component);␊
+          ␊
+            function AIMakeText() {␊
+              var _this;␊
+          ␊
+              _classCallCheck(this, AIMakeText);␊
+          ␊
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {␊
+                args[_key] = arguments[_key];␊
+              }␊
+          ␊
+              _this = _possibleConstructorReturn(this, _getPrototypeOf(AIMakeText).call(this, ...args));␊
+          ␊
+              _defineProperty(_assertThisInitialized(_this), "generateComponentType", function (componentType) {␊
+                var componentNameMap = {␊
+                  h1: 'h1',␊
+                  h2: 'h2',␊
+                  h3: 'h3',␊
+                  h4: 'h4',␊
+                  h5: 'h5',␊
+                  paragraph: 'p',␊
+                  label: 'label'␊
+                };␊
+                return componentNameMap[componentType] || 'div';␊
+              });␊
+          ␊
+              return _this;␊
+            }␊
+          ␊
+            _createClass(AIMakeText, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var _this$props = this.props,␊
+                    children = _this$props.children,␊
+                    type = _this$props.type,␊
+                    styleBoxModel = _this$props.styleBoxModel,␊
+                    styleText = _this$props.styleText,␊
+                    styleLayout = _this$props.styleLayout,␊
+                    styleBackground = _this$props.styleBackground,␊
+                    style = _this$props.style;␊
+                var styles = { ...styleBoxModel,␊
+                  ...styleText,␊
+                  ...styleLayout,␊
+                  ...styleBackground,␊
+                  ...style␊
+                };␊
+                var Comp = this.generateComponentType(type);␊
+                var labelStyle = Comp === 'label' ? {␊
+                  display: 'inline-block'␊
+                } : {};␊
+                return React.createElement(Comp, {␊
+                  className: "AIMakeText",␊
+                  style: Object.assign(labelStyle, styles)␊
+                }, [children]);␊
+              }␊
+            }]);␊
+          ␊
+            return AIMakeText;␊
+          }(Component);␊
+          ␊
+          _defineProperty(AIMakeText, "propTypes", {␊
+            children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.string]),␊
+            type: PropTypes.string,␊
+            styleBoxModel: PropTypes.object.isRequired,␊
+            styleText: PropTypes.object.isRequired,␊
+            styleLayout: PropTypes.object.isRequired,␊
+            styleBackground: PropTypes.object.isRequired,␊
+            style: PropTypes.object␊
+          });␊
+          ␊
+          _defineProperty(AIMakeText, "defaultProps", {␊
+            children: '',␊
+            type: '',␊
+            // paragraph || label␊
+            style: {}␊
+          });␊
+          ␊
+          export default HOCBoxModelProps(HOCTextProps(HOCLayoutProps(HOCBackgroundProps(AIMakeText))));`,
+          filePath: '/Users/hongboy/WebstormProjects/aimake-otter-engine-1016/packages/otter-engine-materialin/test/fixtures/multiple-exported-component/es/basic/AIMakeText/index.js',
+        },
+        {
+          fileContent: `import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React from 'react';␊
+          import PropTypes from 'prop-types';␊
+          ␊
+          var Root =␊
+          /*#__PURE__*/␊
+          function (_React$Component) {␊
+            _inherits(Root, _React$Component);␊
+          ␊
+            function Root() {␊
+              _classCallCheck(this, Root);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(Root).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(Root, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var _this$props = this.props,␊
+                    style = _this$props.style,␊
+                    children = _this$props.children;␊
+                var newStyle = Object.assign({}, Root.defaultProps.style, style);␊
+                return React.createElement("div", {␊
+                  style: newStyle␊
+                }, children);␊
+              }␊
+            }]);␊
+          ␊
+            return Root;␊
+          }(React.Component);␊
+          ␊
+          _defineProperty(Root, "propTypes", {␊
+            style: PropTypes.object,␊
+            children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])␊
+          });␊
+          ␊
+          _defineProperty(Root, "defaultProps", {␊
+            style: {␊
+              padding: 0,␊
+              backgroundColor: '#f0f2f5',␊
+              minHeight: '100%'␊
+            },␊
+            children: null␊
+          });␊
+          ␊
+          export default Root;`,
+          filePath: '/Users/hongboy/WebstormProjects/aimake-otter-engine-1016/packages/otter-engine-materialin/test/fixtures/multiple-exported-component/es/basic/Root/index.js',
+        },
+      ],
+      pkgName: 'multiple-exported-component',
+      pkgVersion: '1.0.0',
+      sourceType: 'module',
+    }
+
+## scan from single exported component
+
+> Snapshot 1
+
+    {
+      mainEntry: '/Users/hongboy/WebstormProjects/aimake-otter-engine-1016/packages/otter-engine-materialin/test/fixtures/single-exported-component/es/index.js',
+      modules: [
+        {
+          fileContent: `import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          ␊
+          /* eslint-disable react/no-unused-prop-types */␊
+          ␊
+          /* eslint-disable react/require-default-props */␊
+          import React from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import "./main.css";␊
+          ␊
+          var Demo =␊
+          /*#__PURE__*/␊
+          function (_React$Component) {␊
+            _inherits(Demo, _React$Component);␊
+          ␊
+            function Demo() {␊
+              _classCallCheck(this, Demo);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(Demo).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(Demo, [{␊
+              key: "render",␊
+              value: function render() {␊
+                return React.createElement("div", null, " Test ");␊
+              }␊
+            }]);␊
+          ␊
+            return Demo;␊
+          }(React.Component);␊
+          ␊
+          Demo.propTypes = {␊
+            optionalArray: PropTypes.array,␊
+            optionalBool: PropTypes.bool,␊
+            optionalFunc: PropTypes.func,␊
+            optionalNumber: PropTypes.number,␊
+            optionalObject: PropTypes.object,␊
+            optionalString: PropTypes.string,␊
+            optionalSymbol: PropTypes.symbol,␊
+            // Anything that can be rendered: numbers, strings, elements or an array␊
+            // (or fragment) containing these types.␊
+            optionalNode: PropTypes.node,␊
+            // A React element (ie. <MyComponent />).␊
+            optionalElement: PropTypes.element,␊
+            // A React element type (ie. MyComponent).␊
+            optionalElementType: PropTypes.elementType,␊
+            // You can also declare that a prop is an instance of a class. This uses␊
+            // JS's instanceof operator.␊
+            optionalMessage: PropTypes.instanceOf(Demo),␊
+            // You can ensure that your prop is limited to specific values by treating␊
+            // it as an enum.␊
+            optionalEnum: PropTypes.oneOf(['News', 'Photos']),␊
+            // An object that could be one of many types␊
+            optionalUnion: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Demo)]),␊
+            // An array of a certain type␊
+            optionalArrayOf: PropTypes.arrayOf(PropTypes.number),␊
+            // An object with property values of a certain type␊
+            optionalObjectOf: PropTypes.objectOf(PropTypes.number),␊
+            // You can chain any of the above with `isRequired` to make sure a warning␊
+            // is shown if the prop isn't provided.␊
+            // An object taking on a particular shape␊
+            optionalObjectWithShape: PropTypes.shape({␊
+              optionalProperty: PropTypes.string,␊
+              requiredProperty: PropTypes.number.isRequired␊
+            }),␊
+            optionalObjectWithShape2: PropTypes.shape({␊
+              optionalProperty: PropTypes.string,␊
+              requiredProperty: PropTypes.number.isRequired␊
+            }).isRequired,␊
+            // An object with warnings on extra properties␊
+            optionalObjectWithStrictShape: PropTypes.exact({␊
+              optionalProperty: PropTypes.string,␊
+              requiredProperty: PropTypes.number.isRequired␊
+            }),␊
+            requiredFunc: PropTypes.func.isRequired,␊
+            // A value of any data type␊
+            requiredAny: PropTypes.any.isRequired␊
+          };␊
+          Demo.defaultProps = {};␊
+          export default Demo;`,
+          filePath: '/Users/hongboy/WebstormProjects/aimake-otter-engine-1016/packages/otter-engine-materialin/test/fixtures/single-exported-component/es/index.js',
+        },
+      ],
+      pkgName: 'single-exported-component',
+      pkgVersion: '1.0.0',
+      sourceType: 'module',
+    }

packages/material-parser/test/fixtures/__snapshots__/test/scanner/OnlineScanner.ts.md

@@ -0,0 +1,580 @@
+# Snapshot report for `test/scanner/OnlineScanner.ts`
+
+The actual snapshot is saved in `OnlineScanner.ts.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## scan multiple exported component from online
+
+> Snapshot 1
+
+    {
+      mainEntry: '@ali/aimake-basic@0.1.0/es/index.js',
+      modules: [
+        {
+          fileContent: `import AIMakeBlank from './basic/AIMakeBlank';␊
+          import AIMakeIcon from './basic/AIMakeIcon';␊
+          import AIMakeImage from './basic/AIMakeImage';␊
+          import AIMakeLink from './basic/AIMakeLink';␊
+          import AIMakePlaceholder from './basic/AIMakePlaceholder';␊
+          import AIMakeText from './basic/AIMakeText';␊
+          import Root from './basic/Root';␊
+          export { AIMakeBlank, AIMakeIcon, AIMakeImage, AIMakeLink, AIMakePlaceholder, AIMakeText, Root };`,
+          filePath: '@ali/aimake-basic@0.1.0/es/index.js',
+        },
+        {
+          fileContent: `import _extends from "@babel/runtime/helpers/extends";␊
+          import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React, { Component } from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import HOCBoxModelProps from '../utils/HOCBoxModelProps';␊
+          import HOCLayoutProps from '../utils/HOCLayoutProps';␊
+          import HOCBackgroundProps from '../utils/HOCBackgroundProps';␊
+          import HOCFlexLayoutProps from '../utils/HOCFlexLayoutProps';␊
+          ␊
+          var AIMakeBlank =␊
+          /*#__PURE__*/␊
+          function (_Component) {␊
+            _inherits(AIMakeBlank, _Component);␊
+          ␊
+            function AIMakeBlank() {␊
+              _classCallCheck(this, AIMakeBlank);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(AIMakeBlank).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(AIMakeBlank, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var merged = {};␊
+                var _this$props = this.props,␊
+                    children = _this$props.children,␊
+                    styleBoxModel = _this$props.styleBoxModel,␊
+                    styleLayout = _this$props.styleLayout,␊
+                    styleBackground = _this$props.styleBackground,␊
+                    styleFlexLayout = _this$props.styleFlexLayout,␊
+                    style = _this$props.style,␊
+                    id = _this$props.id;␊
+                var styles = { ...styleBoxModel,␊
+                  ...styleLayout,␊
+                  ...styleBackground,␊
+                  ...styleFlexLayout,␊
+                  ...style␊
+                };␊
+          ␊
+                if (id) {␊
+                  merged.id = id;␊
+                }␊
+          ␊
+                return React.createElement("div", _extends({␊
+                  style: styles␊
+                }, merged), children);␊
+              }␊
+            }]);␊
+          ␊
+            return AIMakeBlank;␊
+          }(Component);␊
+          ␊
+          _defineProperty(AIMakeBlank, "propTypes", {␊
+            children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),␊
+            styleBoxModel: PropTypes.object.isRequired,␊
+            styleLayout: PropTypes.object.isRequired,␊
+            styleBackground: PropTypes.object.isRequired,␊
+            styleFlexLayout: PropTypes.object.isRequired,␊
+            style: PropTypes.object,␊
+            id: PropTypes.string␊
+          });␊
+          ␊
+          _defineProperty(AIMakeBlank, "defaultProps", {␊
+            children: [],␊
+            style: {},␊
+            id: ''␊
+          });␊
+          ␊
+          export default HOCBoxModelProps(HOCLayoutProps(HOCBackgroundProps(HOCFlexLayoutProps(AIMakeBlank))));`,
+          filePath: '@ali/aimake-basic@0.1.0/es/basic/AIMakeBlank/index.js',
+        },
+        {
+          fileContent: `import _extends from "@babel/runtime/helpers/extends";␊
+          import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";␊
+          import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React, { Component } from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import classNames from 'classnames';␊
+          import createFromIconfont from './IconFont';␊
+          ␊
+          var AIMakeIcon =␊
+          /*#__PURE__*/␊
+          function (_Component) {␊
+            _inherits(AIMakeIcon, _Component);␊
+          ␊
+            function AIMakeIcon() {␊
+              _classCallCheck(this, AIMakeIcon);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(AIMakeIcon).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(AIMakeIcon, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var _this$props = this.props,␊
+                    className = _this$props.className,␊
+                    iconClassName = _this$props.iconClassName,␊
+                    children = _this$props.children,␊
+                    styleBoxModel = _this$props.styleBoxModel,␊
+                    styleText = _this$props.styleText,␊
+                    styleBackground = _this$props.styleBackground,␊
+                    style = _this$props.style,␊
+                    otherProps = _objectWithoutProperties(_this$props, ["className", "iconClassName", "children", "styleBoxModel", "styleText", "styleBackground", "style"]);␊
+          ␊
+                var styles = { ...styleBoxModel,␊
+                  ...styleText,␊
+                  ...styleBackground,␊
+                  ...style␊
+                };␊
+                return React.createElement("i", _extends({}, otherProps, {␊
+                  className: classNames(className, iconClassName),␊
+                  style: styles␊
+                }), children);␊
+              }␊
+            }]);␊
+          ␊
+            return AIMakeIcon;␊
+          }(Component);␊
+          ␊
+          _defineProperty(AIMakeIcon, "propTypes", {␊
+            className: PropTypes.string,␊
+            iconClassName: PropTypes.string,␊
+            children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),␊
+            styleBoxModel: PropTypes.object.isRequired,␊
+            styleText: PropTypes.object.isRequired,␊
+            styleBackground: PropTypes.object.isRequired,␊
+            style: PropTypes.object␊
+          });␊
+          ␊
+          _defineProperty(AIMakeIcon, "defaultProps", {␊
+            className: '',␊
+            iconClassName: 'iconfont',␊
+            children: '',␊
+            style: {}␊
+          });␊
+          ␊
+          AIMakeIcon.createFromIconfont = createFromIconfont;␊
+          export default AIMakeIcon;`,
+          filePath: '@ali/aimake-basic@0.1.0/es/basic/AIMakeIcon/index.js',
+        },
+        {
+          fileContent: `import _extends from "@babel/runtime/helpers/extends";␊
+          import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";␊
+          import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React, { Component } from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import HOCBoxModelProps from '../utils/HOCBoxModelProps';␊
+          ␊
+          var AIMakeImage =␊
+          /*#__PURE__*/␊
+          function (_Component) {␊
+            _inherits(AIMakeImage, _Component);␊
+          ␊
+            function AIMakeImage() {␊
+              _classCallCheck(this, AIMakeImage);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(AIMakeImage).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(AIMakeImage, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var _this$props = this.props,␊
+                    styleBoxModel = _this$props.styleBoxModel,␊
+                    style = _this$props.style,␊
+                    otherProps = _objectWithoutProperties(_this$props, ["styleBoxModel", "style"]);␊
+          ␊
+                var styles = { ...styleBoxModel,␊
+                  ...style␊
+                };␊
+                return React.createElement("img", _extends({}, otherProps, {␊
+                  style: styles,␊
+                  alt: "AIMakeImage"␊
+                }));␊
+              }␊
+            }]);␊
+          ␊
+            return AIMakeImage;␊
+          }(Component);␊
+          ␊
+          _defineProperty(AIMakeImage, "propTypes", {␊
+            styleBoxModel: PropTypes.object.isRequired,␊
+            style: PropTypes.object␊
+          });␊
+          ␊
+          _defineProperty(AIMakeImage, "defaultProps", {␊
+            style: {}␊
+          });␊
+          ␊
+          export default HOCBoxModelProps(AIMakeImage);`,
+          filePath: '@ali/aimake-basic@0.1.0/es/basic/AIMakeImage/index.js',
+        },
+        {
+          fileContent: `import _extends from "@babel/runtime/helpers/extends";␊
+          import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";␊
+          import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React, { Component } from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import HOCBoxModelProps from '../utils/HOCBoxModelProps';␊
+          import HOCTextProps from '../utils/HOCTextProps';␊
+          import HOCLayoutProps from '../utils/HOCLayoutProps';␊
+          import HOCBackgroundProps from '../utils/HOCBackgroundProps';␊
+          ␊
+          var AIMakeLink =␊
+          /*#__PURE__*/␊
+          function (_Component) {␊
+            _inherits(AIMakeLink, _Component);␊
+          ␊
+            function AIMakeLink() {␊
+              _classCallCheck(this, AIMakeLink);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(AIMakeLink).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(AIMakeLink, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var _this$props = this.props,␊
+                    children = _this$props.children,␊
+                    styleBoxModel = _this$props.styleBoxModel,␊
+                    styleText = _this$props.styleText,␊
+                    styleLayout = _this$props.styleLayout,␊
+                    styleBackground = _this$props.styleBackground,␊
+                    style = _this$props.style,␊
+                    otherProps = _objectWithoutProperties(_this$props, ["children", "styleBoxModel", "styleText", "styleLayout", "styleBackground", "style"]);␊
+          ␊
+                var styles = { ...styleBoxModel,␊
+                  ...styleText,␊
+                  ...styleLayout,␊
+                  ...styleBackground,␊
+                  ...style␊
+                };␊
+          ␊
+                if (typeof children !== 'string') {␊
+                  styles.display = 'inline-block';␊
+                }␊
+          ␊
+                return React.createElement("a", _extends({}, otherProps, {␊
+                  style: styles␊
+                }), [children]);␊
+              }␊
+            }]);␊
+          ␊
+            return AIMakeLink;␊
+          }(Component);␊
+          ␊
+          _defineProperty(AIMakeLink, "propTypes", {␊
+            children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),␊
+            styleBoxModel: PropTypes.object.isRequired,␊
+            styleText: PropTypes.object.isRequired,␊
+            styleLayout: PropTypes.object.isRequired,␊
+            styleBackground: PropTypes.object.isRequired,␊
+            style: PropTypes.object␊
+          });␊
+          ␊
+          _defineProperty(AIMakeLink, "defaultProps", {␊
+            children: '',␊
+            style: {}␊
+          });␊
+          ␊
+          export default HOCBoxModelProps(HOCTextProps(HOCLayoutProps(HOCBackgroundProps(AIMakeLink))));`,
+          filePath: '@ali/aimake-basic@0.1.0/es/basic/AIMakeLink/index.js',
+        },
+        {
+          fileContent: `import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React, { Component } from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import HOCBoxModelProps from '../utils/HOCBoxModelProps';␊
+          import HOCLayoutProps from '../utils/HOCLayoutProps';␊
+          ␊
+          var AIMakePlaceholder =␊
+          /*#__PURE__*/␊
+          function (_Component) {␊
+            _inherits(AIMakePlaceholder, _Component);␊
+          ␊
+            function AIMakePlaceholder() {␊
+              _classCallCheck(this, AIMakePlaceholder);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(AIMakePlaceholder).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(AIMakePlaceholder, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var _this$props = this.props,␊
+                    children = _this$props.children,␊
+                    styleBoxModel = _this$props.styleBoxModel,␊
+                    styleLayout = _this$props.styleLayout,␊
+                    style = _this$props.style;␊
+                var styles = { ...styleBoxModel,␊
+                  ...styleLayout,␊
+                  ...style␊
+                };␊
+                var placeholderStyle = {␊
+                  display: 'inline-block',␊
+                  border: '1px dashed #aaa',␊
+                  lineHeight: styles.height,␊
+                  backgroundColor: '#F5E075',␊
+                  overflow: 'hidden',␊
+                  textAlign: 'center',␊
+                  ...styles␊
+                };␊
+                return React.createElement("div", {␊
+                  style: placeholderStyle␊
+                }, children);␊
+              }␊
+            }]);␊
+          ␊
+            return AIMakePlaceholder;␊
+          }(Component);␊
+          ␊
+          _defineProperty(AIMakePlaceholder, "propTypes", {␊
+            children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),␊
+            styleBoxModel: PropTypes.object.isRequired,␊
+            styleLayout: PropTypes.object.isRequired,␊
+            style: PropTypes.object␊
+          });␊
+          ␊
+          _defineProperty(AIMakePlaceholder, "defaultProps", {␊
+            children: '',␊
+            style: {}␊
+          });␊
+          ␊
+          export default HOCBoxModelProps(HOCLayoutProps(AIMakePlaceholder));`,
+          filePath: '@ali/aimake-basic@0.1.0/es/basic/AIMakePlaceholder/index.js',
+        },
+        {
+          fileContent: `import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React, { Component } from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import HOCBoxModelProps from '../utils/HOCBoxModelProps';␊
+          import HOCTextProps from '../utils/HOCTextProps';␊
+          import HOCLayoutProps from '../utils/HOCLayoutProps';␊
+          import HOCBackgroundProps from '../utils/HOCBackgroundProps';␊
+          ␊
+          var AIMakeText =␊
+          /*#__PURE__*/␊
+          function (_Component) {␊
+            _inherits(AIMakeText, _Component);␊
+          ␊
+            function AIMakeText() {␊
+              var _this;␊
+          ␊
+              _classCallCheck(this, AIMakeText);␊
+          ␊
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {␊
+                args[_key] = arguments[_key];␊
+              }␊
+          ␊
+              _this = _possibleConstructorReturn(this, _getPrototypeOf(AIMakeText).call(this, ...args));␊
+          ␊
+              _defineProperty(_assertThisInitialized(_this), "generateComponentType", function (componentType) {␊
+                var componentNameMap = {␊
+                  h1: 'h1',␊
+                  h2: 'h2',␊
+                  h3: 'h3',␊
+                  h4: 'h4',␊
+                  h5: 'h5',␊
+                  paragraph: 'p',␊
+                  label: 'label'␊
+                };␊
+                return componentNameMap[componentType] || 'div';␊
+              });␊
+          ␊
+              return _this;␊
+            }␊
+          ␊
+            _createClass(AIMakeText, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var _this$props = this.props,␊
+                    children = _this$props.children,␊
+                    type = _this$props.type,␊
+                    styleBoxModel = _this$props.styleBoxModel,␊
+                    styleText = _this$props.styleText,␊
+                    styleLayout = _this$props.styleLayout,␊
+                    styleBackground = _this$props.styleBackground,␊
+                    style = _this$props.style;␊
+                var styles = { ...styleBoxModel,␊
+                  ...styleText,␊
+                  ...styleLayout,␊
+                  ...styleBackground,␊
+                  ...style␊
+                };␊
+                var Comp = this.generateComponentType(type);␊
+                var labelStyle = Comp === 'label' ? {␊
+                  display: 'inline-block'␊
+                } : {};␊
+                return React.createElement(Comp, {␊
+                  className: "AIMakeText",␊
+                  style: Object.assign(labelStyle, styles)␊
+                }, [children]);␊
+              }␊
+            }]);␊
+          ␊
+            return AIMakeText;␊
+          }(Component);␊
+          ␊
+          _defineProperty(AIMakeText, "propTypes", {␊
+            children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.string]),␊
+            type: PropTypes.string,␊
+            styleBoxModel: PropTypes.object.isRequired,␊
+            styleText: PropTypes.object.isRequired,␊
+            styleLayout: PropTypes.object.isRequired,␊
+            styleBackground: PropTypes.object.isRequired,␊
+            style: PropTypes.object␊
+          });␊
+          ␊
+          _defineProperty(AIMakeText, "defaultProps", {␊
+            children: '',␊
+            type: '',␊
+            // paragraph || label␊
+            style: {}␊
+          });␊
+          ␊
+          export default HOCBoxModelProps(HOCTextProps(HOCLayoutProps(HOCBackgroundProps(AIMakeText))));`,
+          filePath: '@ali/aimake-basic@0.1.0/es/basic/AIMakeText/index.js',
+        },
+        {
+          fileContent: `import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React from 'react';␊
+          import PropTypes from 'prop-types';␊
+          ␊
+          var Root =␊
+          /*#__PURE__*/␊
+          function (_React$Component) {␊
+            _inherits(Root, _React$Component);␊
+          ␊
+            function Root() {␊
+              _classCallCheck(this, Root);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(Root).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(Root, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var _this$props = this.props,␊
+                    style = _this$props.style,␊
+                    children = _this$props.children;␊
+                var newStyle = Object.assign({}, Root.defaultProps.style, style);␊
+                return React.createElement("div", {␊
+                  style: newStyle␊
+                }, children);␊
+              }␊
+            }]);␊
+          ␊
+            return Root;␊
+          }(React.Component);␊
+          ␊
+          _defineProperty(Root, "propTypes", {␊
+            style: PropTypes.object,␊
+            children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])␊
+          });␊
+          ␊
+          _defineProperty(Root, "defaultProps", {␊
+            style: {␊
+              padding: 0,␊
+              backgroundColor: '#f0f2f5',␊
+              minHeight: '100%'␊
+            },␊
+            children: null␊
+          });␊
+          ␊
+          export default Root;`,
+          filePath: '@ali/aimake-basic@0.1.0/es/basic/Root/index.js',
+        },
+      ],
+      pkgName: '@ali/aimake-basic',
+      pkgVersion: '0.1.0',
+      sourceType: 'module',
+    }
+
+## scan single exported component from online
+
+> Snapshot 1
+
+    {
+      mainEntry: '@ali/demo-biz-test090702@0.0.2/es/index.js',
+      modules: [
+        {
+          fileContent: `import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import React from 'react'; // import PropTypes from 'prop-types';␊
+          ␊
+          import "./main.css";␊
+          ␊
+          var Demo =␊
+          /*#__PURE__*/␊
+          function (_React$Component) {␊
+            _inherits(Demo, _React$Component);␊
+          ␊
+            function Demo() {␊
+              _classCallCheck(this, Demo);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(Demo).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(Demo, [{␊
+              key: "render",␊
+              value: function render() {␊
+                return React.createElement("div", null, " Test ");␊
+              }␊
+            }]);␊
+          ␊
+            return Demo;␊
+          }(React.Component);␊
+          ␊
+          export default Demo;`,
+          filePath: '@ali/demo-biz-test090702@0.0.2/es/index.js',
+        },
+      ],
+      pkgName: '@ali/demo-biz-test090702',
+      pkgVersion: '0.0.2',
+      sourceType: 'module',
+    }

packages/material-parser/test/fixtures/__snapshots__/test/scanner/Scanner.ts.md

@@ -0,0 +1,633 @@
+# Snapshot report for `test/scanner/Scanner.ts`
+
+The actual snapshot is saved in `Scanner.ts.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## scan multiple exported component
+
+> Snapshot 1
+
+    {
+      mainEntry: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/index.js',
+      modules: [
+        {
+          fileContent: `import AIMakeBlank from './basic/AIMakeBlank';␊
+          import AIMakeIcon from './basic/AIMakeIcon';␊
+          import AIMakeImage from './basic/AIMakeImage';␊
+          import AIMakeLink from './basic/AIMakeLink';␊
+          import AIMakePlaceholder from './basic/AIMakePlaceholder';␊
+          import AIMakeText from './basic/AIMakeText';␊
+          import Root from './basic/Root';␊
+          export { AIMakeBlank, AIMakeIcon, AIMakeImage, AIMakeLink, AIMakePlaceholder, AIMakeText, Root };␊
+          `,
+          filePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/index.js',
+        },
+        {
+          fileContent: `import _extends from "@babel/runtime/helpers/extends";␊
+          import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React, { Component } from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import HOCBoxModelProps from '../utils/HOCBoxModelProps';␊
+          import HOCLayoutProps from '../utils/HOCLayoutProps';␊
+          import HOCBackgroundProps from '../utils/HOCBackgroundProps';␊
+          import HOCFlexLayoutProps from '../utils/HOCFlexLayoutProps';␊
+          ␊
+          var AIMakeBlank =␊
+          /*#__PURE__*/␊
+          function (_Component) {␊
+            _inherits(AIMakeBlank, _Component);␊
+          ␊
+            function AIMakeBlank() {␊
+              _classCallCheck(this, AIMakeBlank);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(AIMakeBlank).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(AIMakeBlank, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var merged = {};␊
+                var _this$props = this.props,␊
+                    children = _this$props.children,␊
+                    styleBoxModel = _this$props.styleBoxModel,␊
+                    styleLayout = _this$props.styleLayout,␊
+                    styleBackground = _this$props.styleBackground,␊
+                    styleFlexLayout = _this$props.styleFlexLayout,␊
+                    style = _this$props.style,␊
+                    id = _this$props.id;␊
+                var styles = { ...styleBoxModel,␊
+                  ...styleLayout,␊
+                  ...styleBackground,␊
+                  ...styleFlexLayout,␊
+                  ...style␊
+                };␊
+          ␊
+                if (id) {␊
+                  merged.id = id;␊
+                }␊
+          ␊
+                return React.createElement("div", _extends({␊
+                  style: styles␊
+                }, merged), children);␊
+              }␊
+            }]);␊
+          ␊
+            return AIMakeBlank;␊
+          }(Component);␊
+          ␊
+          _defineProperty(AIMakeBlank, "propTypes", {␊
+            children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),␊
+            styleBoxModel: PropTypes.object.isRequired,␊
+            styleLayout: PropTypes.object.isRequired,␊
+            styleBackground: PropTypes.object.isRequired,␊
+            styleFlexLayout: PropTypes.object.isRequired,␊
+            style: PropTypes.object,␊
+            id: PropTypes.string␊
+          });␊
+          ␊
+          _defineProperty(AIMakeBlank, "defaultProps", {␊
+            children: [],␊
+            style: {},␊
+            id: ''␊
+          });␊
+          ␊
+          export default HOCBoxModelProps(HOCLayoutProps(HOCBackgroundProps(HOCFlexLayoutProps(AIMakeBlank))));`,
+          filePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeBlank/index.js',
+        },
+        {
+          fileContent: `import _extends from "@babel/runtime/helpers/extends";␊
+          import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";␊
+          import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React, { Component } from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import classNames from 'classnames';␊
+          import createFromIconfont from './IconFont';␊
+          ␊
+          var AIMakeIcon =␊
+          /*#__PURE__*/␊
+          function (_Component) {␊
+            _inherits(AIMakeIcon, _Component);␊
+          ␊
+            function AIMakeIcon() {␊
+              _classCallCheck(this, AIMakeIcon);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(AIMakeIcon).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(AIMakeIcon, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var _this$props = this.props,␊
+                    className = _this$props.className,␊
+                    iconClassName = _this$props.iconClassName,␊
+                    children = _this$props.children,␊
+                    styleBoxModel = _this$props.styleBoxModel,␊
+                    styleText = _this$props.styleText,␊
+                    styleBackground = _this$props.styleBackground,␊
+                    style = _this$props.style,␊
+                    otherProps = _objectWithoutProperties(_this$props, ["className", "iconClassName", "children", "styleBoxModel", "styleText", "styleBackground", "style"]);␊
+          ␊
+                var styles = { ...styleBoxModel,␊
+                  ...styleText,␊
+                  ...styleBackground,␊
+                  ...style␊
+                };␊
+                return React.createElement("i", _extends({}, otherProps, {␊
+                  className: classNames(className, iconClassName),␊
+                  style: styles␊
+                }), children);␊
+              }␊
+            }]);␊
+          ␊
+            return AIMakeIcon;␊
+          }(Component);␊
+          ␊
+          _defineProperty(AIMakeIcon, "propTypes", {␊
+            className: PropTypes.string,␊
+            iconClassName: PropTypes.string,␊
+            children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),␊
+            styleBoxModel: PropTypes.object.isRequired,␊
+            styleText: PropTypes.object.isRequired,␊
+            styleBackground: PropTypes.object.isRequired,␊
+            style: PropTypes.object␊
+          });␊
+          ␊
+          _defineProperty(AIMakeIcon, "defaultProps", {␊
+            className: '',␊
+            iconClassName: 'iconfont',␊
+            children: '',␊
+            style: {}␊
+          });␊
+          ␊
+          AIMakeIcon.createFromIconfont = createFromIconfont;␊
+          export default AIMakeIcon;`,
+          filePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeIcon/index.js',
+        },
+        {
+          fileContent: `import _extends from "@babel/runtime/helpers/extends";␊
+          import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";␊
+          import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React, { Component } from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import HOCBoxModelProps from '../utils/HOCBoxModelProps';␊
+          ␊
+          var AIMakeImage =␊
+          /*#__PURE__*/␊
+          function (_Component) {␊
+            _inherits(AIMakeImage, _Component);␊
+          ␊
+            function AIMakeImage() {␊
+              _classCallCheck(this, AIMakeImage);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(AIMakeImage).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(AIMakeImage, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var _this$props = this.props,␊
+                    styleBoxModel = _this$props.styleBoxModel,␊
+                    style = _this$props.style,␊
+                    otherProps = _objectWithoutProperties(_this$props, ["styleBoxModel", "style"]);␊
+          ␊
+                var styles = { ...styleBoxModel,␊
+                  ...style␊
+                };␊
+                return React.createElement("img", _extends({}, otherProps, {␊
+                  style: styles,␊
+                  alt: "AIMakeImage"␊
+                }));␊
+              }␊
+            }]);␊
+          ␊
+            return AIMakeImage;␊
+          }(Component);␊
+          ␊
+          _defineProperty(AIMakeImage, "propTypes", {␊
+            styleBoxModel: PropTypes.object.isRequired,␊
+            style: PropTypes.object␊
+          });␊
+          ␊
+          _defineProperty(AIMakeImage, "defaultProps", {␊
+            style: {}␊
+          });␊
+          ␊
+          export default HOCBoxModelProps(AIMakeImage);`,
+          filePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeImage/index.js',
+        },
+        {
+          fileContent: `import _extends from "@babel/runtime/helpers/extends";␊
+          import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";␊
+          import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React, { Component } from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import HOCBoxModelProps from '../utils/HOCBoxModelProps';␊
+          import HOCTextProps from '../utils/HOCTextProps';␊
+          import HOCLayoutProps from '../utils/HOCLayoutProps';␊
+          import HOCBackgroundProps from '../utils/HOCBackgroundProps';␊
+          ␊
+          var AIMakeLink =␊
+          /*#__PURE__*/␊
+          function (_Component) {␊
+            _inherits(AIMakeLink, _Component);␊
+          ␊
+            function AIMakeLink() {␊
+              _classCallCheck(this, AIMakeLink);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(AIMakeLink).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(AIMakeLink, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var _this$props = this.props,␊
+                    children = _this$props.children,␊
+                    styleBoxModel = _this$props.styleBoxModel,␊
+                    styleText = _this$props.styleText,␊
+                    styleLayout = _this$props.styleLayout,␊
+                    styleBackground = _this$props.styleBackground,␊
+                    style = _this$props.style,␊
+                    otherProps = _objectWithoutProperties(_this$props, ["children", "styleBoxModel", "styleText", "styleLayout", "styleBackground", "style"]);␊
+          ␊
+                var styles = { ...styleBoxModel,␊
+                  ...styleText,␊
+                  ...styleLayout,␊
+                  ...styleBackground,␊
+                  ...style␊
+                };␊
+          ␊
+                if (typeof children !== 'string') {␊
+                  styles.display = 'inline-block';␊
+                }␊
+          ␊
+                return React.createElement("a", _extends({}, otherProps, {␊
+                  style: styles␊
+                }), [children]);␊
+              }␊
+            }]);␊
+          ␊
+            return AIMakeLink;␊
+          }(Component);␊
+          ␊
+          _defineProperty(AIMakeLink, "propTypes", {␊
+            children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),␊
+            styleBoxModel: PropTypes.object.isRequired,␊
+            styleText: PropTypes.object.isRequired,␊
+            styleLayout: PropTypes.object.isRequired,␊
+            styleBackground: PropTypes.object.isRequired,␊
+            style: PropTypes.object␊
+          });␊
+          ␊
+          _defineProperty(AIMakeLink, "defaultProps", {␊
+            children: '',␊
+            style: {}␊
+          });␊
+          ␊
+          export default HOCBoxModelProps(HOCTextProps(HOCLayoutProps(HOCBackgroundProps(AIMakeLink))));`,
+          filePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeLink/index.js',
+        },
+        {
+          fileContent: `import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React, { Component } from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import HOCBoxModelProps from '../utils/HOCBoxModelProps';␊
+          import HOCLayoutProps from '../utils/HOCLayoutProps';␊
+          ␊
+          var AIMakePlaceholder =␊
+          /*#__PURE__*/␊
+          function (_Component) {␊
+            _inherits(AIMakePlaceholder, _Component);␊
+          ␊
+            function AIMakePlaceholder() {␊
+              _classCallCheck(this, AIMakePlaceholder);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(AIMakePlaceholder).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(AIMakePlaceholder, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var _this$props = this.props,␊
+                    children = _this$props.children,␊
+                    styleBoxModel = _this$props.styleBoxModel,␊
+                    styleLayout = _this$props.styleLayout,␊
+                    style = _this$props.style;␊
+                var styles = { ...styleBoxModel,␊
+                  ...styleLayout,␊
+                  ...style␊
+                };␊
+                var placeholderStyle = {␊
+                  display: 'inline-block',␊
+                  border: '1px dashed #aaa',␊
+                  lineHeight: styles.height,␊
+                  backgroundColor: '#F5E075',␊
+                  overflow: 'hidden',␊
+                  textAlign: 'center',␊
+                  ...styles␊
+                };␊
+                return React.createElement("div", {␊
+                  style: placeholderStyle␊
+                }, children);␊
+              }␊
+            }]);␊
+          ␊
+            return AIMakePlaceholder;␊
+          }(Component);␊
+          ␊
+          _defineProperty(AIMakePlaceholder, "propTypes", {␊
+            children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),␊
+            styleBoxModel: PropTypes.object.isRequired,␊
+            styleLayout: PropTypes.object.isRequired,␊
+            style: PropTypes.object␊
+          });␊
+          ␊
+          _defineProperty(AIMakePlaceholder, "defaultProps", {␊
+            children: '',␊
+            style: {}␊
+          });␊
+          ␊
+          export default HOCBoxModelProps(HOCLayoutProps(AIMakePlaceholder));`,
+          filePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakePlaceholder/index.js',
+        },
+        {
+          fileContent: `import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React, { Component } from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import HOCBoxModelProps from '../utils/HOCBoxModelProps';␊
+          import HOCTextProps from '../utils/HOCTextProps';␊
+          import HOCLayoutProps from '../utils/HOCLayoutProps';␊
+          import HOCBackgroundProps from '../utils/HOCBackgroundProps';␊
+          ␊
+          var AIMakeText =␊
+          /*#__PURE__*/␊
+          function (_Component) {␊
+            _inherits(AIMakeText, _Component);␊
+          ␊
+            function AIMakeText() {␊
+              var _this;␊
+          ␊
+              _classCallCheck(this, AIMakeText);␊
+          ␊
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {␊
+                args[_key] = arguments[_key];␊
+              }␊
+          ␊
+              _this = _possibleConstructorReturn(this, _getPrototypeOf(AIMakeText).call(this, ...args));␊
+          ␊
+              _defineProperty(_assertThisInitialized(_this), "generateComponentType", function (componentType) {␊
+                var componentNameMap = {␊
+                  h1: 'h1',␊
+                  h2: 'h2',␊
+                  h3: 'h3',␊
+                  h4: 'h4',␊
+                  h5: 'h5',␊
+                  paragraph: 'p',␊
+                  label: 'label'␊
+                };␊
+                return componentNameMap[componentType] || 'div';␊
+              });␊
+          ␊
+              return _this;␊
+            }␊
+          ␊
+            _createClass(AIMakeText, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var _this$props = this.props,␊
+                    children = _this$props.children,␊
+                    type = _this$props.type,␊
+                    styleBoxModel = _this$props.styleBoxModel,␊
+                    styleText = _this$props.styleText,␊
+                    styleLayout = _this$props.styleLayout,␊
+                    styleBackground = _this$props.styleBackground,␊
+                    style = _this$props.style;␊
+                var styles = { ...styleBoxModel,␊
+                  ...styleText,␊
+                  ...styleLayout,␊
+                  ...styleBackground,␊
+                  ...style␊
+                };␊
+                var Comp = this.generateComponentType(type);␊
+                var labelStyle = Comp === 'label' ? {␊
+                  display: 'inline-block'␊
+                } : {};␊
+                return React.createElement(Comp, {␊
+                  className: "AIMakeText",␊
+                  style: Object.assign(labelStyle, styles)␊
+                }, [children]);␊
+              }␊
+            }]);␊
+          ␊
+            return AIMakeText;␊
+          }(Component);␊
+          ␊
+          _defineProperty(AIMakeText, "propTypes", {␊
+            children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.string]),␊
+            type: PropTypes.string,␊
+            styleBoxModel: PropTypes.object.isRequired,␊
+            styleText: PropTypes.object.isRequired,␊
+            styleLayout: PropTypes.object.isRequired,␊
+            styleBackground: PropTypes.object.isRequired,␊
+            style: PropTypes.object␊
+          });␊
+          ␊
+          _defineProperty(AIMakeText, "defaultProps", {␊
+            children: '',␊
+            type: '',␊
+            // paragraph || label␊
+            style: {}␊
+          });␊
+          ␊
+          export default HOCBoxModelProps(HOCTextProps(HOCLayoutProps(HOCBackgroundProps(AIMakeText))));`,
+          filePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/AIMakeText/index.js',
+        },
+        {
+          fileContent: `import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          import _defineProperty from "@babel/runtime/helpers/defineProperty";␊
+          import React from 'react';␊
+          import PropTypes from 'prop-types';␊
+          ␊
+          var Root =␊
+          /*#__PURE__*/␊
+          function (_React$Component) {␊
+            _inherits(Root, _React$Component);␊
+          ␊
+            function Root() {␊
+              _classCallCheck(this, Root);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(Root).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(Root, [{␊
+              key: "render",␊
+              value: function render() {␊
+                var _this$props = this.props,␊
+                    style = _this$props.style,␊
+                    children = _this$props.children;␊
+                var newStyle = Object.assign({}, Root.defaultProps.style, style);␊
+                return React.createElement("div", {␊
+                  style: newStyle␊
+                }, children);␊
+              }␊
+            }]);␊
+          ␊
+            return Root;␊
+          }(React.Component);␊
+          ␊
+          _defineProperty(Root, "propTypes", {␊
+            style: PropTypes.object,␊
+            children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])␊
+          });␊
+          ␊
+          _defineProperty(Root, "defaultProps", {␊
+            style: {␊
+              padding: 0,␊
+              backgroundColor: '#f0f2f5',␊
+              minHeight: '100%'␊
+            },␊
+            children: null␊
+          });␊
+          ␊
+          export default Root;`,
+          filePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/basic/Root/index.js',
+        },
+      ],
+      pkgName: 'multiple-exported-component',
+      pkgVersion: '1.0.0',
+      sourceType: 'module',
+    }
+
+## scan single exported component
+
+> Snapshot 1
+
+    {
+      mainEntry: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/single-exported-component/es/index.js',
+      modules: [
+        {
+          fileContent: `import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
+          import _createClass from "@babel/runtime/helpers/createClass";␊
+          import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";␊
+          import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";␊
+          import _inherits from "@babel/runtime/helpers/inherits";␊
+          ␊
+          /* eslint-disable react/no-unused-prop-types */␊
+          ␊
+          /* eslint-disable react/require-default-props */␊
+          import React from 'react';␊
+          import PropTypes from 'prop-types';␊
+          import "./main.css";␊
+          ␊
+          var Demo =␊
+          /*#__PURE__*/␊
+          function (_React$Component) {␊
+            _inherits(Demo, _React$Component);␊
+          ␊
+            function Demo() {␊
+              _classCallCheck(this, Demo);␊
+          ␊
+              return _possibleConstructorReturn(this, _getPrototypeOf(Demo).apply(this, arguments));␊
+            }␊
+          ␊
+            _createClass(Demo, [{␊
+              key: "render",␊
+              value: function render() {␊
+                return React.createElement("div", null, " Test ");␊
+              }␊
+            }]);␊
+          ␊
+            return Demo;␊
+          }(React.Component);␊
+          ␊
+          Demo.propTypes = {␊
+            optionalArray: PropTypes.array,␊
+            optionalBool: PropTypes.bool,␊
+            optionalFunc: PropTypes.func,␊
+            optionalNumber: PropTypes.number,␊
+            optionalObject: PropTypes.object,␊
+            optionalString: PropTypes.string,␊
+            optionalSymbol: PropTypes.symbol,␊
+            // Anything that can be rendered: numbers, strings, elements or an array␊
+            // (or fragment) containing these types.␊
+            optionalNode: PropTypes.node,␊
+            // A React element (ie. <MyComponent />).␊
+            optionalElement: PropTypes.element,␊
+            // A React element type (ie. MyComponent).␊
+            optionalElementType: PropTypes.elementType,␊
+            // You can also declare that a prop is an instance of a class. This uses␊
+            // JS's instanceof operator.␊
+            optionalMessage: PropTypes.instanceOf(Demo),␊
+            // You can ensure that your prop is limited to specific values by treating␊
+            // it as an enum.␊
+            optionalEnum: PropTypes.oneOf(['News', 'Photos']),␊
+            // An object that could be one of many types␊
+            optionalUnion: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Demo)]),␊
+            // An array of a certain type␊
+            optionalArrayOf: PropTypes.arrayOf(PropTypes.number),␊
+            // An object with property values of a certain type␊
+            optionalObjectOf: PropTypes.objectOf(PropTypes.number),␊
+            // You can chain any of the above with `isRequired` to make sure a warning␊
+            // is shown if the prop isn't provided.␊
+            // An object taking on a particular shape␊
+            optionalObjectWithShape: PropTypes.shape({␊
+              optionalProperty: PropTypes.string,␊
+              requiredProperty: PropTypes.number.isRequired␊
+            }),␊
+            optionalObjectWithShape2: PropTypes.shape({␊
+              optionalProperty: PropTypes.string,␊
+              requiredProperty: PropTypes.number.isRequired␊
+            }).isRequired,␊
+            // An object with warnings on extra properties␊
+            optionalObjectWithStrictShape: PropTypes.exact({␊
+              optionalProperty: PropTypes.string,␊
+              requiredProperty: PropTypes.number.isRequired␊
+            }),␊
+            requiredFunc: PropTypes.func.isRequired,␊
+            // A value of any data type␊
+            requiredAny: PropTypes.any.isRequired␊
+          };␊
+          Demo.defaultProps = {};␊
+          export default Demo;`,
+          filePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/single-exported-component/es/index.js',
+        },
+      ],
+      pkgName: 'single-exported-component',
+      pkgVersion: '1.0.0',
+      sourceType: 'module',
+    }

packages/material-parser/test/fixtures/antd-component/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "antd-component",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "dependencies": {
+    "antd": "^3.24.1"
+  },
+  "devDependencies": {
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

packages/material-parser/test/fixtures/antd-component/src/antd/affix/container.js

@@ -0,0 +1,5 @@
+
+      import Affix from './../../../node_modules/antd/es/affix/index.js';
+      import manifest from './manifest.js';
+      export default { origin: Affix, manifest };
+    

packages/material-parser/test/fixtures/antd-component/src/antd/affix/manifest.js

@@ -0,0 +1 @@
+const manifest = {"name":"Affix","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[]}}; export default manifest;

packages/material-parser/test/fixtures/antd-component/src/antd/anchor/container.js

@@ -0,0 +1,5 @@
+
+      import Anchor from './../../../node_modules/antd/es/anchor/index.js';
+      import manifest from './manifest.js';
+      export default { origin: Anchor, manifest };
+    

packages/material-parser/test/fixtures/antd-component/src/antd/anchor/manifest.js

@@ -0,0 +1 @@
+const manifest = {"name":"Anchor","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[]}}; export default manifest;

packages/material-parser/test/fixtures/antd-component/src/antd/breadcrumb/container.js

@@ -0,0 +1,5 @@
+
+      import Breadcrumb from './../../../node_modules/antd/es/breadcrumb/index.js';
+      import manifest from './manifest.js';
+      export default { origin: Breadcrumb, manifest };
+    

packages/material-parser/test/fixtures/antd-component/src/antd/breadcrumb/manifest.js

@@ -0,0 +1 @@
+const manifest = {"name":"Breadcrumb","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[]}}; export default manifest;

packages/material-parser/test/fixtures/antd-component/src/antd/button/container.js

@@ -0,0 +1,5 @@
+
+      import Button from './../../../node_modules/antd/es/button/index.js';
+      import manifest from './manifest.js';
+      export default { origin: Button, manifest };
+    

packages/material-parser/test/fixtures/antd-component/src/antd/button/manifest.js

@@ -0,0 +1 @@
+const manifest = {"name":"Button","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[]}}; export default manifest;

packages/material-parser/test/fixtures/antd-component/src/antd/calendar/container.js

@@ -0,0 +1,5 @@
+
+      import Calendar from './../../../node_modules/antd/es/calendar/index.js';
+      import manifest from './manifest.js';
+      export default { origin: Calendar, manifest };
+    

packages/material-parser/test/fixtures/antd-component/src/antd/calendar/manifest.js

@@ -0,0 +1 @@
+const manifest = {"name":"Calendar","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[{"name":"monthCellRender","label":"monthCellRender","renderer":""},{"name":"dateCellRender","label":"dateCellRender","renderer":""},{"name":"monthFullCellRender","label":"monthFullCellRender","renderer":""},{"name":"dateFullCellRender","label":"dateFullCellRender","renderer":""},{"name":"fullscreen","label":"fullscreen","renderer":""},{"name":"locale","label":"locale","renderer":"","defaultValue":"{}"},{"name":"prefixCls","label":"prefixCls","renderer":""},{"name":"className","label":"className","renderer":""},{"name":"style","label":"style","renderer":""},{"name":"onPanelChange","label":"onPanelChange","renderer":""},{"name":"value","label":"value","renderer":""},{"name":"onSelect","label":"onSelect","renderer":""},{"name":"onChange","label":"onChange","renderer":""},{"name":"headerRender","label":"headerRender","renderer":""}]}}; export default manifest;

packages/material-parser/test/fixtures/antd-component/src/antd/cascader/container.js

@@ -0,0 +1,5 @@
+
+      import Cascader from './../../../node_modules/antd/es/cascader/index.js';
+      import manifest from './manifest.js';
+      export default { origin: Cascader, manifest };
+    

packages/material-parser/test/fixtures/antd-component/src/antd/cascader/manifest.js

@@ -0,0 +1 @@
+const manifest = {"name":"Cascader","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[]}}; export default manifest;

packages/material-parser/test/fixtures/antd-component/src/antd/checkbox/container.js

@@ -0,0 +1,5 @@
+
+      import Checkbox from './../../../node_modules/antd/es/checkbox/index.js';
+      import manifest from './manifest.js';
+      export default { origin: Checkbox, manifest };
+    

packages/material-parser/test/fixtures/antd-component/src/antd/checkbox/manifest.js

@@ -0,0 +1 @@
+const manifest = {"name":"Checkbox","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[]}}; export default manifest;

packages/material-parser/test/fixtures/antd-component/src/antd/col/container.js

@@ -0,0 +1,5 @@
+
+      import Col from './../../../node_modules/antd/es/col/index.js';
+      import manifest from './manifest.js';
+      export default { origin: Col, manifest };
+    

packages/material-parser/test/fixtures/antd-component/src/antd/col/manifest.js

@@ -0,0 +1 @@
+const manifest = {"name":"Col","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[]}}; export default manifest;

packages/material-parser/test/fixtures/antd-component/src/antd/collapse/container.js

@@ -0,0 +1,5 @@
+
+      import Collapse from './../../../node_modules/antd/es/collapse/index.js';
+      import manifest from './manifest.js';
+      export default { origin: Collapse, manifest };
+    

packages/material-parser/test/fixtures/antd-component/src/antd/collapse/manifest.js

@@ -0,0 +1 @@
+const manifest = {"name":"Collapse","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[]}}; export default manifest;

packages/material-parser/test/fixtures/antd-component/src/antd/config-provider/container.js

@@ -0,0 +1,5 @@
+
+      import ConfigProvider from './../../../node_modules/antd/es/config-provider/index.js';
+      import manifest from './manifest.js';
+      export default { origin: ConfigProvider, manifest };
+    

packages/material-parser/test/fixtures/antd-component/src/antd/config-provider/manifest.js

@@ -0,0 +1 @@
+const manifest = {"name":"ConfigProvider","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[]}}; export default manifest;

packages/material-parser/test/fixtures/antd-component/src/antd/date-picker/container.js

@@ -0,0 +1,5 @@
+
+      import DatePicker from './../../../node_modules/antd/es/date-picker/index.js';
+      import manifest from './manifest.js';
+      export default { origin: DatePicker, manifest };
+    

packages/material-parser/test/fixtures/antd-component/src/antd/date-picker/manifest.js

@@ -0,0 +1 @@
+const manifest = {"name":"DatePicker","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[]}}; export default manifest;

packages/material-parser/test/fixtures/antd-component/src/antd/descriptions/container.js

@@ -0,0 +1,5 @@
+
+      import Descriptions from './../../../node_modules/antd/es/descriptions/index.js';
+      import manifest from './manifest.js';
+      export default { origin: Descriptions, manifest };
+    

packages/material-parser/test/fixtures/antd-component/src/antd/descriptions/manifest.js

@@ -0,0 +1 @@
+const manifest = {"name":"Descriptions","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[]}}; export default manifest;

packages/material-parser/test/fixtures/antd-component/src/antd/divider/container.js

@@ -0,0 +1,5 @@
+
+      import Divider from './../../../node_modules/antd/es/divider/index.js';
+      import manifest from './manifest.js';
+      export default { origin: Divider, manifest };
+    

packages/material-parser/test/fixtures/antd-component/src/antd/divider/manifest.js

@@ -0,0 +1 @@
+const manifest = {"name":"Divider","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[]}}; export default manifest;

packages/material-parser/test/fixtures/antd-component/src/antd/drawer/container.js

@@ -0,0 +1,5 @@
+
+      import Drawer from './../../../node_modules/antd/es/drawer/index.js';
+      import manifest from './manifest.js';
+      export default { origin: Drawer, manifest };
+    

packages/material-parser/test/fixtures/antd-component/src/antd/drawer/manifest.js

@@ -0,0 +1 @@
+const manifest = {"name":"Drawer","settings":{"type":"element_inline","insertionModes":"tbrl","handles":["cut","copy","duplicate","delete","paste"],"shouldActive":true,"shouldDrag":true,"props":[]}}; export default manifest;

packages/material-parser/test/fixtures/antd-component/src/antd/dropdown/container.js

@@ -0,0 +1,5 @@
+
+      import Dropdown from './../../../node_modules/antd/es/dropdown/index.js';
+      import manifest from './manifest.js';
+      export default { origin: Dropdown, manifest };
+