feat: support vue tech stack

[jeffwcx]

🤔 这个变动的性质是？/ What is the nature of this change?

• 新特性提交 / New feature
• bug 修复 / Fix bug
• 样式优化 / Style optimization
• 代码风格优化 / Code style optimization
• 性能优化 / Performance optimization
• 构建优化 / Build optimization
• 网站、文档、Demo 改进 / Website, documentation, demo improvements
• 重构代码或样式 / Refactor code or style
• 测试相关 / Test related
• 其他 / Other

🔗 相关 Issue / Related Issue

#1157
#1320

💡 需求背景和解决方案 / Background or solution

主要分为两个部分：

一. 为dumi本身添加开放能力

1. IDumiTechStack扩展

export abstract class IDumiTechStack {
  /**
   * 组件在React中如何渲染
   */
  abstract render?: IDumiTechStackRenderType;

 /**
   * 默认情况下， dumi 只支持js/jsx/ts/tsx模块的依赖分析，
   * 所以对于无法识别的文件类型需要通过此方法将文件转换为js模块
   */
  abstract onBlockLoad?(
    args: IDumiTechStackOnBlockLoadArgs,
  ): IDumiTechStackOnBlockLoadResult | null;
}

2. dumi/tech-stack-utils

提供了transformDemoCode, extractScript函数及IDumiTechStack相关类型

用以帮助开放者更快地开发技术栈

3. API Table开放能力支持

dumi提供createApiParser方便用户创建解析器

import {
  BaseApiParserOptions,
  LanguageMetaParser,
  PatchFile,
  createApiParser,
} from 'dumi';

export interface VueApiParserOptions extends BaseApiParserOptions {
  // ...
}
export const VueApiParser = createApiParser({
  filename: __filename,
  worker: (class {
      constructor(opts: VueApiParserOptions) {
        // ...
      }
      async patch(file: PatchFile) {
        // ...
      }
      async parse() {
        // ...
      }
    
      async destroy() {
        // ...
      }
  }), // 需要实现`LanguageMetaParser`接口
  parseOptions: {
    // 主线程侧，只需要处理文件更改
    handleWatcher(watcher, { parse, patch, watchArgs }) {
      return watcher.on('all', (ev, file) => {
        if (
          ['add', 'change', 'unlink'].includes(ev) &&
          /((?<!\.d)\.ts|\.(jsx?|tsx|vue))$/.test(file)
        ) {
          const cwd = watchArgs.options.cwd!;
          patch({
            event: ev,
            fileName: path.join(cwd, file),
          });
          parse();
        }
      });
    },
  },
});

二. 基于开放能力提供Vue插件@dumijs/preset-vue

1. 实现IDumiTechStack接口
2. demo编译：采用官方的@vue/compiler-sfc进行编译，并通过transformDemoCode封装成iife表达式
3. 添加对外部 Demo 的编译及打包支持，对 webpack 进行配置，由于 dumi 本身是 react 框架，所以不能粗暴地移除对 react 的支持，而是需要将 react 相关配置限定在.dumi中
4. API Table支持
   为了更有效地提取Vue组件信息，重写了vue-component-meta 形成了更强大的dumi-vue-meta包

更多阅读

• 安装 Vue 支持插件
• Vue 的自动 API 表格
• 如何添加技术栈

📝 更新日志 / Changelog

Language	Changelog
🇺🇸 English	Add open APIs for implementing tech stacks and Vue plugin based on them
🇨🇳 Chinese	添加实现技术栈的开放API以及基于此的Vue插件

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dumi	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 4, 2024 8:31am

[PeachScript]

这里的思路是否可以改成在 techStack 上新增 getEntryScriptCode 方法，该方法是可选的，Vue 技术栈会提取 .vue 中的 script 并返回，rehypeDemo 再将内容作为 entryPointCode 传给 parseBlockAsset 解析器

好处是不新增配置项，复杂度都集中在 techStack 内部

[jeffwcx]

已经在本地实现了，但是具体的传递模式还是得再讨论讨论

[PeachScript]

这部分要不提到 Umi 层，看起来只缺了 tapable：https://github.com/umijs/umi/blob/e80e805a1ba26855df505fcbb95a44a63b94015d/packages/bundler-webpack/src/requireHook.ts

[jeffwcx]

这块配置我是参照umi/preset-vue的，最好能提到umi，不需要这边引入额外的脚本

[PeachScript]

@xierenyuan preset-vue 的这部分逻辑有什么特殊之处么，是否可以合并到 bundler-webpack 里呢

[PeachScript]

babel 最好也用 umi 打包好的版本，避免 babel 多版本引起怪异的问题，可以在 dumi 根目录创建 bundler-utils.js（类似 plugin-utils.js），把 bundler-utils 的部分内容 re-export 出来

下面的 typescript 插件应该也有预打包好的版本

[PeachScript]

这个插件看看能不能预打包一份，把 babel external 指向 dumi 导出的那份，避免 babel 多版本，ref: https://github.com/umijs/father/blob/master/docs/config.md#prebundle

[PeachScript]

MFSU 适配都做了，细致👍

[PeachScript]

这里的思路没太看懂，为什么这里要提一层 MetaParser 的概念，而不是基于原有的 AtomParser 提取类似 IDumiTechStack 的抽象类，然后再实现 ReactAtomParser 和 VueAtomParser 呢

[PeachScript]

这个 PR 太大了，我先合并到 feature，有 comment 的地方我单独提个 PR 发你 review 看看 @jeffwcx

[PeachScript]

这里用法有调整，文档需要更新

[jeffwcx]

好的，我会发pr

[PeachScript]

先合并到 tech-stack-utils.js

[PeachScript]

先不导出，因为 Demo Page 也是内置的页面组件

[PeachScript]

和下面重复了

Suggested change

renderOpts: {{{renderRenderOpts}}},

[PeachScript]

key 就是 id，节约产物尺寸

Suggested change

id: "{{{id}}}",

[PeachScript]

lang 应该是必然存在的？

[PeachScript]

这里的类型要看一下在哪里声明

[PeachScript]

删掉无用配置

Suggested change

	esm: {},
	prebundle: {
	deps: {},
	},