feat: support local components (#78)

* docs: update

* feat: parse local components

* fix: update

* refactor: module exports to exportList

* fix: update workspace

---------

Co-authored-by: wwsun <ww.sww@outlook.com>

Author: wwsun

README.md

@@ -53,10 +53,10 @@ gantt
 
 ## 💻 Development
 
-### Recommended Development Environment
+### Environment
 
-- Node.js >= 16.0.0
-- Yarn >= 1.22.0
+- Node `>= 18`
+- Yarn `>= 1.22 && < 2`
 
 ### Development Quick Start
 

README.zh-CN.md

@@ -55,8 +55,8 @@ gantt
 
 ### 推荐开发环境
 
-- Node.js >= 16.0.0
-- Yarn >= 1.22.0
+- Node `>= 18`
+- Yarn `>= 1.22 && < 2`
 
 ### 本地开发调试方法
 

apps/playground/src/helpers/mock-files.ts

@@ -75,6 +75,18 @@ const tangoConfigJson = {
   },
 };
 
+const helperCode = `
+export function registerComponentPrototype(proto) {
+  if (!proto) return;
+  if (!window.localTangoComponentPrototypes) {
+    window.localTangoComponentPrototypes = {};
+  }
+  if (proto.name) {
+    window.localTangoComponentPrototypes[proto.name] = proto;
+  }
+}
+`;
+
 const routesCode = `
 import Index from "./pages/list";
 
@@ -143,7 +155,7 @@ import {
   FormilyForm,
 } from "@music163/antd";
 import { Space } from '@music163/antd';
-import { MyButton } from '../components/button';
+import { LocalButton } from '../components';
 
 class App extends React.Component {
   render() {
@@ -153,7 +165,7 @@ class App extends React.Component {
        </Section>
        <Section>
        <Space>
-          <MyButton />
+          <LocalButton />
           <Button>button</Button>
           <Input />
           </Space>
@@ -162,18 +174,52 @@ class App extends React.Component {
     );
   }
 }
+
 export default definePage(App);
 `;
 
 const componentsButtonCode = `
 import React from 'react';
+import { registerComponentPrototype } from '../utils';
+
+export default function MyButton(props) {
+  return <button {...props}>my button</button>
+}
+
+registerComponentPrototype({
+  name: 'LocalButton',
+  title: 'Local Button',
+  exportType: 'namedExport',
+  package: '/src/components',
+  props: [
+    { name: 'background', title: '背景色', setter: 'colorSetter'  },
+  ],
+});
+`;
+
+const componentsInputCode = `
+import React from 'react';
+import { registerComponentPrototype } from '../utils';
 
-export function MyButton() {
-  return <button>my button</button>
+export default function MyInput(props) {
+  return <input {...props} />;
 }
+
+registerComponentPrototype({
+  name: 'LocalInput',
+  title: 'Local Input',
+  exportType: 'namedExport',
+  package: '/src/components',
+  props: [
+    { name: 'color', title: '文本色', setter: 'colorSetter'  },
+  ],
+});
 `;
 
-const componentsPrototypeCode = ``;
+const componentsEntryCode = `
+export { default as LocalButton } from './button';
+export { default as LocalInput } from './input';
+`;
 
 const storeApp = `
 import { defineStore } from '@music163/tango-boot';
@@ -260,14 +306,15 @@ export const sampleFiles = [
   { filename: '/src/index.js', code: entryCode },
   { filename: '/src/pages/list.js', code: viewHomeCode },
   { filename: '/src/components/button.js', code: componentsButtonCode },
-  { filename: '/src/components/prototype.js', code: componentsPrototypeCode },
+  { filename: '/src/components/input.js', code: componentsInputCode },
+  { filename: '/src/components/index.js', code: componentsEntryCode },
   { filename: '/src/routes.js', code: routesCode },
   { filename: '/src/stores/index.js', code: storeIndexCode },
   { filename: '/src/stores/app.js', code: storeApp },
   { filename: '/src/stores/counter.js', code: storeCounter },
   { filename: '/src/services/index.js', code: serviceCode },
   { filename: '/src/services/sub.js', code: subServiceCode },
-  { filename: '/src/utils/index.js', code: `export function foo() {}` },
+  { filename: '/src/utils/index.js', code: helperCode },
 ];
 
 export const genDefaultPage = (index: number) => ({

apps/playground/src/pages/index.tsx

@@ -33,7 +33,6 @@ const workspace = new Workspace({
 // 2. 引擎初始化
 const engine = createEngine({
   workspace,
-  defaultActiveSidebarPanel: 'outline',
 });
 
 // @ts-ignore
@@ -121,6 +120,9 @@ export default function App() {
                       workspace.setComponentPrototypes(sandboxWindow.TangoAntd.prototypes);
                     }
                   }
+                  if (sandboxWindow.localTangoComponentPrototypes) {
+                    workspace.setComponentPrototypes(sandboxWindow.localTangoComponentPrototypes);
+                  }
                   setMenuLoading(false);
                 }
               }}

packages/core/src/helpers/ast/traverse.ts

@@ -22,7 +22,7 @@ import {
   code2expression,
   object2node,
 } from './parse';
-import { isValidComponentName } from '../string';
+import { getFullPath, isValidComponentName } from '../string';
 import { isDefineService, isDefineStore, isTangoVariable } from '../assert';
 import type {
   IRouteData,
@@ -32,6 +32,7 @@ import type {
   IServiceFunctionPayload,
   InsertChildPositionType,
   IImportSpecifierData,
+  IExportSpecifierData,
 } from '../../types';
 import { IdGenerator } from '../id-generator';
 
@@ -1330,6 +1331,33 @@ export function traverseViewFile(ast: t.File, idGenerator: IdGenerator) {
   };
 }
 
+export function traverseComponentsEntryFile(ast: t.File, baseDir?: string) {
+  const exportMap: Record<string, IExportSpecifierData> = {};
+  traverse(ast, {
+    ExportNamedDeclaration(path) {
+      const node = path.node;
+      let source = node2value(node.source);
+      if (baseDir) {
+        // fix relative source path
+        source = getFullPath(baseDir, source);
+      }
+      node.specifiers.forEach((specifier) => {
+        if (t.isExportSpecifier(specifier)) {
+          const name = keyNode2value(specifier.exported) as string;
+          if (name) {
+            exportMap[name] = {
+              source,
+              exportedName: name,
+            };
+          }
+        }
+      });
+    },
+  });
+
+  return { ast, exportMap };
+}
+
 /**
  * 解析导入语句
  */

packages/core/src/helpers/string.ts

@@ -33,6 +33,10 @@ export function inferFileType(filename: string): FileType {
     return FileType.JsonViewModule;
   }
 
+  if (/\/(blocks|components)\/index\.js/.test(filename)) {
+    return FileType.ComponentsEntryModule;
+  }
+
   if (/\/services\/.+\.js$/.test(filename)) {
     return FileType.ServiceModule;
   }
@@ -49,10 +53,6 @@ export function inferFileType(filename: string): FileType {
     return FileType.StoreModule;
   }
 
-  if (/\/blocks\/[\w-]+\/index\.js/.test(filename)) {
-    return FileType.BlockEntryModule;
-  }
-
   if (/\.jsx?$/.test(filename)) {
     return FileType.Module;
   }
@@ -170,24 +170,35 @@ export function getBlockNameByFilename(filename: string) {
 }
 
 /**
- * FIXME: 有问题，需要优化下
- * 基于 from 文件的地址计算 to 文件的相对引用路径
- * @param from
- * @param to
+ * 合并两个路径
+ * @param root
+ * @param filename
+ * @returns
+ */
+export function getFullPath(root: string, filename: string) {
+  return path.join(root, filename);
+}
+
+/**
+ * 计算 targetFile 在 sourceFile 中的相对引用路径
+ * @param sourceFile
+ * @param targetFile
+ * @returns
  */
-export function getRelativePath(from: string, to: string) {
-  const fromFolder = path.dirname(from);
-  return path.relative(fromFolder, to);
+export function getRelativePath(sourceFile: string, targetFile: string) {
+  sourceFile = path.dirname(sourceFile);
+  return path.relative(sourceFile, targetFile);
 }
 
 /**
  * 判断给定字符串是否是文件路径
  * @example ./pages/index.js -- yes
  * @example ../pages/index.js -- yes
+ * @example ../components -- yes
  * @example /src/pages/index.js -- yes
  * @example @music163/tango-designer -- no
  * @param str
  */
 export function isFilepath(str: string) {
-  return /^(\.\.?\/|\/).*\.[a-z]+$/.test(str);
+  return /^(\.\.?\/|\/).*(\.[a-z]+)?$/.test(str);
 }

packages/core/src/models/component-module.ts

@@ -0,0 +1,40 @@
+import path from 'path';
+import { action, computed, makeObservable, observable } from 'mobx';
+import { TangoModule } from './module';
+import { IWorkspace } from './interfaces';
+import { IExportSpecifierData, IFileConfig } from '../types';
+import { traverseComponentsEntryFile } from '../helpers';
+
+/**
+ * 本地组件目录的入口文件，例如 '/components/index.js' 或 `/blocks/index.js`
+ */
+export class TangoComponentsEntryModule extends TangoModule {
+  exportList: Record<string, IExportSpecifierData>;
+
+  constructor(workspace: IWorkspace, props: IFileConfig) {
+    super(workspace, props, false);
+    this.update(props.code, false, false);
+    makeObservable(this, {
+      _code: observable,
+      _cleanCode: observable,
+      exportList: observable,
+      code: computed,
+      cleanCode: computed,
+      update: action,
+    });
+  }
+
+  _analysisAst() {
+    const baseDir = path.dirname(this.filename);
+    const { exportMap } = traverseComponentsEntryFile(this.ast, baseDir);
+    this.exportList = exportMap;
+    Object.keys(this.exportList).forEach((key) => {
+      this.workspace.componentPrototypes.set(key, {
+        name: key,
+        exportType: 'namedExport',
+        package: baseDir,
+        type: 'element',
+      });
+    });
+  }
+}

packages/core/src/models/interfaces.ts

@@ -266,5 +266,5 @@ export interface IWorkspace {
   get pages(): any[];
   get bizComps(): string[];
   get baseComps(): string[];
-  get blocks(): any[];
+  get localComps(): string[];
 }

packages/core/src/models/module.ts

@@ -22,9 +22,9 @@ export class TangoModule extends TangoFile {
   ast: t.File;
 
   /**
-   * 导入语句
+   * 导入的依赖列表
    */
-  imports: ImportDeclarationDataType;
+  importList: ImportDeclarationDataType;
 
   constructor(workspace: IWorkspace, props: IFileConfig, isSyncCode = true) {
     super(workspace, props, isSyncCode);
@@ -95,7 +95,7 @@ export class TangoModule extends TangoFile {
 
   _analysisAst() {
     const { imports } = traverseFile(this.ast);
-    this.imports = imports;
+    this.importList = imports;
   }
 }
 

packages/core/src/models/service-module.ts

@@ -59,7 +59,7 @@ export class TangoServiceModule extends TangoModule {
 
   _analysisAst() {
     const { imports, services, baseConfig } = traverseServiceFile(this.ast);
-    this.imports = imports;
+    this.importList = imports;
     this._serviceFunctions = services;
     this._baseConfig = baseConfig;
     if (baseConfig.namespace) {

packages/core/src/models/view-module.ts

@@ -159,7 +159,7 @@ export class TangoViewModule extends TangoModule implements IViewFile {
     this._cleanCode = ast2code(cleanAst);
 
     this._importedModules = importedModules;
-    this.imports = imports;
+    this.importList = imports;
     this.importMap = buildImportMap(imports);
     this.variables = variables;
 
@@ -180,7 +180,7 @@ export class TangoViewModule extends TangoModule implements IViewFile {
    * 依赖列表
    */
   listImportSources() {
-    return Object.keys(this.imports);
+    return Object.keys(this.importList);
   }
 
   /**
@@ -227,7 +227,7 @@ export class TangoViewModule extends TangoModule implements IViewFile {
    * @returns
    */
   addImportSpecifiers(source: string, newSpecifiers: IImportSpecifierData[]) {
-    const existSpecifiers = this.imports[source];
+    const existSpecifiers = this.importList[source];
     if (existSpecifiers) {
       const insertedSpecifiers = newSpecifiers.filter((item) => {
         return !existSpecifiers.find((existItem) => existItem.localName === item.localName);