feat: support localizing

packages/material-parser/package.json

@@ -20,6 +20,7 @@
     "jest-watch-typeahead": "^0.3.1",
     "js-yaml": "^3.13.1",
     "json-schema-to-typescript": "^8.2.0",
+    "tslib": "^1.11.1",
     "typescript": "^3.8.3"
   },
   "scripts": {

packages/material-parser/src/generate.ts

@@ -46,7 +46,7 @@ export async function genManifest(
       package: matScanModel.pkgName,
       version: matScanModel.pkgVersion,
       exportName: matParsedModel.componentName,
-      main: matScanModel.mainEntry,
+      main: matScanModel.entryFilePath,
       destructuring: false,
       subName: '',
     },

packages/material-parser/src/index.ts

@@ -10,17 +10,17 @@ import generate from './generate';
 import parse from './parse';
 import localize from './localize';
 
-export default async function(
+export default async function(options: IMaterializeOptions): Promise<ComponentMeta[]> {
-  options: IMaterializeOptions,
-): Promise<ComponentMeta[]> {
   const { accesser = 'local' } = options;
   if (accesser === 'online') {
-    const { entry, cwd } = await localize(options);
+    const entry = await localize(options);
     options.entry = entry;
-    options.cwd = cwd;
   }
   const scanedModel = await scan(options);
-  const parsedModel = await parse(scanedModel.modules[0]);
+  const parsedModel = await parse({
+    filePath: scanedModel.entryFilePath,
+    fileContent: scanedModel.entryFileContent,
+  });
   const result = await generate(scanedModel, parsedModel);
   return result;
 }

packages/material-parser/src/localize.ts

@@ -33,13 +33,13 @@ export async function createFakePackage(params: {
     pkgJsonFilePath,
     JSON.stringify({
       name: params.pkgName,
-      version: params.pkgVersion,
+      version: params.pkgVersion || '0.0.0',
       dependencies: {
-        [params.pkgName]: params.pkgVersion,
+        [params.pkgName]: params.pkgVersion || 'latest',
       },
     }),
   );
-  debugger;
+
   // 安装依赖
   const npmClient = params.npmClient || 'tnpm';
   await spawn(npmClient, ['i'], { stdio: 'inherit', cwd: tempDir } as any);
@@ -68,12 +68,12 @@ export async function createTempDir(): Promise<string> {
  * @returns {{ [key: string]: any }}
  * @memberof OnlineAccesser
  */
-export function getPkgNameAndVersion(
+export function getPkgNameAndVersion(pkgNameWithVersion: string): { [key: string]: any } {
-  pkgNameWithVersion: string,
-): { [key: string]: any } {
   const matches = pkgNameWithVersion.match(/(@\d+\.\d+\.\d+)$/);
   if (!matches) {
-    throw new OtterError(`Illegal semver version: ${pkgNameWithVersion}`);
+    return {
+      name: pkgNameWithVersion,
+    };
   }
   const semverObj = semver.coerce(matches[0]);
   const name = pkgNameWithVersion.replace(matches[0], '');
@@ -84,12 +84,7 @@ export function getPkgNameAndVersion(
 }
 
 // 将问题转化为本地物料化场景
-export default async function localize(
+export default async function localize(options: IMaterializeOptions): Promise<string> {
-  options: IMaterializeOptions,
-): Promise<{
-  cwd: string;
-  entry: string;
-}> {
   // 创建临时目录
   const tempDir = await createTempDir();
   // 创建组件包
@@ -101,8 +96,5 @@ export default async function localize(
     npmClient: options.npmClient,
   });
 
-  return {
+  return join(tempDir, 'node_modules', name);
-    cwd: tempDir,
-    entry: join(tempDir, 'node_modules', name),
-  };
 }

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

@@ -5,10 +5,7 @@ import { IMaterialParsedModel, IMaterialScanModel } from '../types';
 import resolver from './resolver';
 import handlers from './handlers';
 
-export default function parse(params: {
+export default function parse(params: { fileContent: string; filePath: string }): Promise<IMaterialParsedModel[]> {
-  fileContent: string;
-  filePath: string;
-}): Promise<IMaterialParsedModel[]> {
   const { fileContent, filePath } = params;
   const result = reactDocs.parse(
     fileContent,

packages/material-parser/src/parse/transform.ts

@@ -49,10 +49,7 @@ export function transformType(type: any) {
       } = type;
       if (properties.length === 0) {
         result.type = 'object';
-      } else if (
+      } else if (properties.length === 1 && typeof properties[0].key === 'object') {
-        properties.length === 1 &&
-        typeof properties[0].key === 'object'
-      ) {
         result.type = 'objectOf';
         const v = transformType(properties[0].value);
         if (typeof v.type === 'string') result.value = v.type;
@@ -81,7 +78,7 @@ export function transformType(type: any) {
       break;
     case 'exact':
     case 'shape':
-      result.value = Object.keys(value).map(n => {
+      result.value = Object.keys(value).map((n) => {
         // tslint:disable-next-line:variable-name
         const { name: _name, ...others } = value[n];
         return transformItem(n, {
@@ -110,13 +107,7 @@ export function transformType(type: any) {
 }
 
 export function transformItem(name: string, item: any) {
-  const {
+  const { description, flowType, type = flowType, required, defaultValue } = item;
-    description,
-    flowType,
-    type = flowType,
-    required,
-    defaultValue,
-  } = item;
   const result: any = {
     name,
     propType: transformType({
@@ -133,6 +124,9 @@ export function transformItem(name: string, item: any) {
       result.defaultValue = value;
     } catch (e) {}
   }
+  if (result.propType === undefined) {
+    delete result.propType;
+  }
 
   return result;
 }

packages/material-parser/src/scan.ts

@@ -1,26 +1,25 @@
 import { IMaterializeOptions, IMaterialScanModel, SourceType } from './types';
-import { pathExists, readFile } from 'fs-extra';
+import { pathExists, readFile, lstatSync } from 'fs-extra';
 import { join } from 'path';
 import { debug } from './otter-core';
 const log = debug.extend('mat');
 
-export default async function scan(
+export default async function scan(options: IMaterializeOptions): Promise<IMaterialScanModel> {
-  options: IMaterializeOptions,
-): Promise<IMaterialScanModel> {
   const model: IMaterialScanModel = {
     pkgName: '',
     pkgVersion: '',
-    mainEntry: '',
     sourceType: SourceType.MODULE,
-    modules: [],
+    entryFilePath: '',
+    entryFileContent: '',
   };
   log('options', options);
   // 入口文件路径
-  let entryFilePath = null;
+  let entryFilePath = options.entry;
-  const cwd = options.cwd ? options.cwd : '';
+  const stats = lstatSync(entryFilePath);
-  const entry = options.entry;
+  debugger;
-  const isDepsMode = cwd !== entry;
+  if (!stats.isFile()) {
-  const pkgJsonPath = join(cwd, 'package.json');
+    let mainFilePath = '';
+    const pkgJsonPath = join(entryFilePath, 'package.json');
     // 判断是否存在 package.json
     if (!(await pathExists(pkgJsonPath))) {
       throw new Error(`Cannot find package.json. ${pkgJsonPath}`);
@@ -29,30 +28,26 @@ export default async function scan(
     let pkgJson = await resolvePkgJson(pkgJsonPath);
     model.pkgName = pkgJson.name;
     model.pkgVersion = pkgJson.version;
-  if (isDepsMode) {
-    pkgJson = await resolvePkgJson(join(entry, 'package.json'));
-  }
     if (pkgJson.module) {
       // 支持 es module
       model.sourceType = SourceType.MODULE;
-    entryFilePath = pkgJson.module;
+      mainFilePath = pkgJson.module;
     } else if (pkgJson.main) {
       // 支持 commonjs
       model.sourceType = SourceType.MAIN;
-    entryFilePath = pkgJson.main;
+      mainFilePath = pkgJson.main;
     } else {
-    entryFilePath = './index.js';
+      mainFilePath = './index.js';
     }
-  entryFilePath = join(isDepsMode ? entry : cwd, entryFilePath);
+    entryFilePath = join(entryFilePath, mainFilePath);
+  }
+
   log('entryFilePath', entryFilePath);
-  const entryFile = await loadFile(entryFilePath);
+  const entryFileContent = await loadFile(entryFilePath);
-  log('entryFile', entryFile);
+  log('entryFile', entryFileContent);
-  model.mainEntry = entryFilePath;
+  model.entryFilePath = entryFilePath;
+  model.entryFileContent = entryFileContent;
   // 记录入口文件
-  model.modules.push({
-    filePath: entryFilePath,
-    fileContent: entryFile,
-  });
   log('model', model);
   return model;
 }
@@ -65,9 +60,7 @@ export async function loadFile(filePath: string): Promise<string> {
   return content.toString();
 }
 
-export async function resolvePkgJson(
+export async function resolvePkgJson(pkgJsonPath: string): Promise<{ [k: string]: any }> {
-  pkgJsonPath: string,
-): Promise<{ [k: string]: any }> {
   const content = await loadFile(pkgJsonPath);
   const json = JSON.parse(content);
   return json;

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

@@ -2,15 +2,12 @@
  * 对应扫描阶段的产物
  */
 interface IMaterialScanModel {
-  /** 入口文件地址 */
-  mainEntry: string;
   /** 标记物料组件包所使用的模块规范 */
   sourceType: 'module' | 'main';
-  /** 每个文件对应的文件内容 */
+  /** 入口文件路径 */
-  modules: {
+  entryFilePath: string;
-    filePath: string;
+  /** 入口文件内容 */
-    fileContent: string;
+  entryFileContent: string;
-  }[];
   /** 当前包名 */
   pkgName: string;
   /** 当前包版本 */

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

@@ -7,7 +7,7 @@ import IExtensionConfigManifest from './IExtensionConfigManifest';
  */
 interface IMaterializeOptions {
   /**
-   * 入口文件路径或包名
+   * 组件文件(夹)路径或包名
    * 形如：
    *  本地路径：/usr/project/src/container/DemoMaterial
    *  包名：@ali/demo-material@0.0.1
@@ -22,13 +22,6 @@ interface IMaterializeOptions {
    */
   accesser: 'local' | 'online';
 
-  /**
-   * 当 accesser=local 时，需要通过此配置项指定当前工作目录，形如：/usr/.../demo-project
-   * @type {string}
-   * @memberof IMaterializeOptions
-   */
-  cwd?: string;
-
   /**
    * 扩展点
    */

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

@@ -9,10 +9,7 @@ Generated by [AVA](https://avajs.dev).
 > Snapshot 1
 
     {
-      mainEntry: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/multiple-exported-component/es/index.js',
+      entryFileContent: `import AIMakeBlank from './basic/AIMakeBlank';␊
-      modules: [
-        {
-          fileContent: `import AIMakeBlank from './basic/AIMakeBlank';␊
       import AIMakeIcon from './basic/AIMakeIcon';␊
       import AIMakeImage from './basic/AIMakeImage';␊
       import AIMakeLink from './basic/AIMakeLink';␊
@@ -22,9 +19,7 @@ Generated by [AVA](https://avajs.dev).
       ␊
       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',
+      entryFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine-v0.8/packages/material-parser/test/fixtures/multiple-exported-component/es/index.js',
-        },
-      ],
       pkgName: 'multiple-exported-component',
       pkgVersion: '1.0.0',
       sourceType: 'module',
@@ -35,10 +30,7 @@ Generated by [AVA](https://avajs.dev).
 > Snapshot 1
 
     {
-      mainEntry: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/single-exported-component/es/index.js',
+      entryFileContent: `import _classCallCheck from "@babel/runtime/helpers/classCallCheck";␊
-      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";␊
@@ -123,9 +115,7 @@ Generated by [AVA](https://avajs.dev).
         optionalNumber: 123,␊
       };␊
       export default Demo;`,
-          filePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine/packages/material-parser/test/fixtures/single-exported-component/es/index.js',
+      entryFilePath: '/Users/gengyang/code/frontend/low-code/ali-lowcode-engine-v0.8/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/index.ts

@@ -12,7 +12,6 @@ const tsComponent = getFromFixtures('ts-component');
 
 test('materialize single exported component by local', async t => {
   const options: IMaterializeOptions = {
-    cwd: singleExportedComptPath,
     entry: singleExportedComptPath,
     accesser: 'local',
   };
@@ -24,7 +23,6 @@ test('materialize single exported component by local', async t => {
 
 test('materialize multiple exported component by local', async t => {
   const options: IMaterializeOptions = {
-    cwd: multiExportedComptPath,
     entry: multiExportedComptPath,
     accesser: 'local',
   };
@@ -56,6 +54,17 @@ test('materialize multiple exported component by online', async t => {
   t.snapshot(actual);
 });
 
+test('materialize @ali/lowcode-editor-skeleton by online', async t => {
+  const options: IMaterializeOptions = {
+    entry: '@ali/lowcode-editor-skeleton',
+    accesser: 'online',
+  };
+
+  const actual = await parse(options);
+
+  t.snapshot(actual);
+});
+
 test('ts component by local', async t => {
   const options: IMaterializeOptions = {
     entry: tsComponent,

packages/material-parser/test/scan.ts

@@ -8,7 +8,6 @@ const singleExportedComptPath = getFromFixtures('single-exported-component');
 test.serial('scan multiple exported component', async t => {
 
   const actual = await scan({
-    cwd: multiExportedComptPath,
     entry: multiExportedComptPath,
     accesser: 'local',
   });
@@ -18,7 +17,6 @@ test.serial('scan multiple exported component', async t => {
 test.serial('scan single exported component', async t => {
 
   const actual = await scan({
-    cwd: singleExportedComptPath,
     entry: singleExportedComptPath,
     accesser: 'local',
   });