feat: support vue tech stack

.eslintignore

@@ -1,3 +1,4 @@
 /dist
 /compiled
 /theme-default
+/runtime

assets-types/typings/atom/index.d.ts

@@ -41,6 +41,18 @@ export interface AtomComponentAsset extends AtomBaseAsset {
    * props definition of component
    */
   propsConfig: ObjectPropertySchema;
+  /**
+   * slots definition of component
+   */
+  slotsConfig?: ObjectPropertySchema;
+  /**
+   * events definition of component
+   */
+  eventsConfig?: ObjectPropertySchema;
+  /**
+   * methods definition of component
+   */
+  methodsConfig?: ObjectPropertySchema;
 
   /**
    * available parent components of component

assets-types/typings/atom/props/index.d.ts

@@ -115,13 +115,29 @@ export interface ObjectPropertySchema extends BasePropertySchema {
   required?: string[];
 }
 
+export interface FunctionArgSchema {
+  key: string;
+  type: PropertySchema | string;
+  hasQuestionToken?: boolean;
+}
+
+export interface FunctionPropertySchema extends BasePropertySchema {
+  type: 'function';
+  signature: {
+    isAsync: boolean;
+    returnType: PropertySchema;
+    arguments: FunctionArgSchema[];
+  };
+}
+
 /**
  * prop definition
  */
 export type PropertySchema =
   | BasePropertySchema
   | ObjectPropertySchema
   | ArrayPropertySchema
+  | FunctionPropertySchema
   | StringPropertySchema
   | NumberPropertySchema
   | BooleanPropertySchema;

assets-types/typings/example.d.ts

@@ -64,6 +64,10 @@ export interface ExampleBlockAsset extends ExampleBaseAsset {
       value: string;
     }
   >;
+  /**
+   * Entry file name, you can find the relevant entry file content from `dependencies`
+   */
+  entry: string;
 }
 
 /**

docs/config/index.md

@@ -89,7 +89,7 @@ export default () => '我会被编译，展示为组件';
 
 ### apiParser
 
-- 类型：`{ unpkgHost?: 'https://unpkg.com'; resolveFilter?: (args: { id: string; ids: string; type: 'COMPONENT' | 'FUNCTION' }) => boolean }`
+- 类型：`{ unpkgHost?: 'https://unpkg.com'; resolveFilter?: (args: { id: string; ids: string; type: 'COMPONENT' | 'FUNCTION' }) => boolean; customParser: ({ entryFile: string; resolveDir: string }) => BaseAtomAssetsParser }`
 - 默认值：`undefined`
 
 启用 API 自动解析功能，开启后可使用 `API` 全局组件，参考[指南 - 自动 API 表格](../guide/auto-api-table.md)。
@@ -98,6 +98,8 @@ export default () => '我会被编译，展示为组件';
 
 `resolveFilter` 配置项用于跳过指定原子资产的解析以提升性能。部分组件属性或函数签名存在多层嵌套，甚至是循环引用时，会导致解析结果巨大，此时可以通过该配置项跳过解析。
 
+`customParser` 配置项主要提供外部解析器支持，用户通过配置该项可以实现对其他框架 API 解析的支持，具体实现方法参考[插件 - 添加技术栈 - API Table 支持](../plugin/techstack.md#api-table-支持)
+
 ### autoAlias
 
 - 类型：`boolean`
@@ -203,6 +205,29 @@ export default () => (
 );
 ```
 
+### resolveDemoModule
+
+- 类型：`Record<string, { transform: ((text: string) => string) | 'html', loader: Loader }>`
+- 默认值：`undefined`
+
+在分析依赖和处理资源时如何解析 Demo 模块
+
+`transform`可以是一个函数或一个`html`字面量。如果指定为`html`，程序将在内部提取所有`script`标签中内容。
+
+`loader` 将指定模块类型来处理`transform`返回的内容。
+
+以 Vue 为例，为了对.vue 文件进行依赖分析，可以这样配置：
+
+```ts
+export default {
+  resolveDemoModule: {
+    '.vue': { transform: 'html', loader: 'tsx' },
+  },
+};
+```
+
+这意味着 vue 文件将被处理为 html，并且脚本中的内容将被提取出来，然后这些内容将作为 tsx 文件进行依赖分析。
+
 ## 主题配置项
 
 通过 `themeConfig` 可配置传递给主题的配置项：

docs/guide/vue-api-table.md

@@ -0,0 +1,162 @@
+---
+title: 自动 API 表格
+group:
+  title: 使用vue
+  order: 1
+order: 2
+---
+
+# Vue 的自动 API 表格
+
+dumi 支持 Vue 组件的自动 API 表格生成，用户只需配置`entryFile`即可开始 API 表格的使用：
+
+```ts
+import { defineConfig } from 'dumi';
+
+export default defineConfig({
+  resolve: {
+    // 配置入口文件路径，API 解析将从这里开始
+    entryFile: './src/index.ts',
+  },
+});
+```
+
+不需要配置`apiParser`，因为`dumi-plugin-vue`已经自动配置了`customParser`。
+
+## tsconfig 配置
+
+Vue 组件的元信息提取主要使用 TypeScript 的 TypeChecker, 所以配置`tsconfig.json`时请务必将`strictNullChecks`设为`false`
+
+```json
+{
+  "compilerOptions": {
+    "strictNullChecks": false
+  }
+}
+```
+
+如果项目中一定要使用`strictNullChecks`，你也可以为 Vue 解析专门配置一个`tsconfig.vue.json`文件
+
+```ts
+// .dumirc.ts
+import * as path from 'path';
+export default {
+  plugins: ['dumi-plugin-vue'],
+  themeConfig: {
+    vue: {
+      parserOptions: {
+        tsconfigPath: path.resolve(__dirname, './tsconfig.vue.json');
+      },
+    },
+  },
+};
+
+```
+
+## JSDoc 编写
+
+:::warning
+推荐在 props 中定义组件的事件，这样可以获得完整的 JSDoc 支持
+:::
+
+插件主要支持以下 JSDoc 标签：
+
+### @description
+
+属性描述，可以在`props`, `slots`, `methods`中使用，例如：
+
+```ts
+export default defineComponent({
+  props: {
+    /**
+     * @description 标题
+     */
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+});
+```
+
+### @default
+
+当 prop 的`default`选项为函数时，`default`值不会被解析，这时可以使用`@default`来声明它
+
+```ts
+defineComponent({
+  props: {
+    /**
+     * @default {}
+     */
+    foo: {
+      default() {
+        return {};
+      },
+    },
+  },
+});
+```
+
+### @exposed/@expose
+
+:::warning
+组件实例的方法或是属性的暴露，必须使用@exposed/@expose 标识，单文件组件也不例外
+:::
+
+```ts
+defineExpose({
+  /**
+   * @exposed
+   */
+  focus() {},
+});
+```
+
+JSX/TSX 的组件方法暴露比较麻烦，需要用户另外声明
+
+```ts
+export default Button as typeof Button & {
+  new (): {
+    /**
+     * The signature of the expose api should be obtained from here
+     * @exposed
+     */
+    focus: () => void;
+  };
+};
+```
+
+### @ignore
+
+被`@ignore`标记的属性就会被忽略，不会被解析
+
+## Markdown 编写
+
+在 Markdown 文件编写时
+
+```md
+<API id="Button"></API>
+```
+
+只显示 Vue 组件的`props`部分，完整的显示应该这样编写：
+
+```md
+## Button API
+
+### Props
+
+<API id="Button" type="props"></API>
+
+### Slots
+
+<API id="Button" type="slots"></API>
+
+### Events
+
+<API id="Button" type="events"></API>
+
+### Methods
+
+<API id="Button" type="methods"></API>
+```

docs/guide/vue.md

@@ -0,0 +1,92 @@
+---
+title: 安装插件
+group:
+  title: 使用vue
+  order: 1
+order: 1
+---
+
+# 安装 Vue 支持插件
+
+dumi 中对 Vue 的支持主要通过`dumi-plugin-vue`插件实现, 目前只支持 Vue3
+
+## 安装
+
+```bash
+pnpm i -D dumi-plugin-vue
+```
+
+## 配置
+
+```ts
+// .dumirc.ts
+export default {
+  plugins: ['dumi-plugin-vue'],
+};
+```
+
+## 插件选项
+
+### parserOptions
+
+Vue 组件元数据解析选项
+
+例如，以下配置可以使得名称为`InternalType`的类型跳过检查
+
+```ts
+// .dumirc.ts
+export default {
+  plugins: ['dumi-plugin-vue'],
+  themeConfig: {
+    vue: {
+      parserOptions: {
+        checkerOptions: {
+          schema: { ignore: ['InternalType'] },
+        },
+      },
+    },
+  },
+};
+```
+
+默认情况下，从`node_modules`中引入所有类型不会被解析，这样可以有效避免元信息冗余，你也可以通过配置`exclude`来定制化类型引入
+
+```ts
+// .dumirc.ts
+export default {
+  plugins: ['dumi-plugin-vue'],
+  themeConfig: {
+    vue: {
+      parserOptions: {
+        checkerOptions: {
+          schema: { exclude: [/node_modules/, /mylib/] },
+        },
+      },
+    },
+  },
+};
+```
+
+### globalInject
+
+全局脚本注入
+
+Vue 的 UI 框架通常都有全局导入的功能，以 ElementPlus 为例，我们可以通过以下配置将 ElementPlus 全局导入
+
+```ts
+// .dumirc.ts
+export default {
+  plugins: ['dumi-plugin-vue'],
+  themeConfig: {
+    vue: {
+      globalInject: {
+        imports: `
+          import ElementPlus from 'element-plus';
+          import 'element-plus/dist/index.css';
+        `,
+        statements: `app.use(ElementPlus, { size: 'small', zIndex: 3000 });`,
+      },
+    },
+  },
+};
+```