[会议] Vue 技术栈方案讨论

[PeachScript]

• 时间: 2023.11.03
• 人员: @jeffwcx @xierenyuan @PeachScript
• 讨论纪要:

1.resolve.customParser 确定现在不开放，官方的维护团队将基于社区成熟方案提供新的 parser，替换当前 dumi 内置的闭源解析器
2. resolveDemoModule 的实现收敛到 TechStack 中，需要提供处理 block parse 的新方法，名称是什么？ （tryloadBlock @PeachScript ） @jeffwcx
3. preset 名称已确认为 @dumijs/preset-vue
4. Vue 2 支持计划讨论：
- vue-loader 有同名不同版本的问题， 要么让用户自己安装，要么我们分成两个 preset 实现
- 先保持现状，在发布后看 Vue 2 用户的反馈
5. globalInject 选项先不加，后续使用运行时钩子的形式来实现 @jeffwcx
- 给 demo 运行时添加自定义的全局代码，Vue 配置 app，preset-vue -> setupDemoApp(app)
6. requireHook 里只多了 tapable， @xierenyuan 确认 vue-loader 是否有依赖，没有依赖就可以直接移除
7. renderToCanvas 待定，需要考虑运行时独立渲染 demo 时套娃的情况 @PeachScript
8. openCodeSandbox 要考虑技术栈开发者没有实现，但同时也没有禁用该按钮导致打开报错的情况 @PeachScript
9. LanguageMetaParser、createRemoteClass 需要再看看概念上是否要做调整 @PeachScript
10. babel-plugin-iife 的实现需要看一下 @PeachScript

[PeachScript]

几项待办更新：

2. tryloadBlock @PeachScript

重新捋了下逻辑，倾向于这么设计：

// 技术栈上新增方法
function onBlockLoad(args: { entryPointCode?: string} & onLoadArgs): null | { type: 'module' | 'text'; content: string;  }

理由：

1. 相较于原有的 tryLoadBlock 更具有确定性，把 block 资产解析的控制权都交给技术栈，而不是由技术栈在 react 技术栈逻辑的基础上做调整
2. 未来如果新增 onBlockResolve 也具有一致性
3. 和 react 技术栈强相关的逻辑（例如只把 tsx-like 的文件当做 module）都可以放进 react 技术栈里

7. renderToCanvas 待定，需要考虑运行时独立渲染 demo 时套娃的情况 @PeachScript

赞成 demo 独立打开应该与 React 解耦，也赞成 Storybook 的设计方式，但我还是倾向于不在 Vue 技术栈的 PR 中做比较大的改动，原因是在 dumi 已经有『技术栈』概念的基础上，相关逻辑都收在技术栈里会更加干净，技术栈开发者要关心的细节也更少

但未来 mpa 还是要做的，能明显提升 demo 独立访问的体验，所以这一次也需要做好和 React 解耦的准备，大致的思路（仅作示意）：

// DumiDemo 做逻辑调整
const demo = demos[props.demo.id];

useEffect(() => {
  if (demo.renderType === 'CANCELABLE_FN') {
    return demo.component(ref.current);
  }
});

// techStack 可以选择声明 renderType，为 CANCELABLE_FN 时对外部 demo 做调整
demo.renderType = techStack.renderType;

if (外部 demo && techStack.renderType === 'CANCELABLE_FN') {
  demo.component = `
function(elm) {
  let cancel;
  import(...).then(fn => cancel = fn(elm));
  return () => { cancel() }
}`;
} else {
  // 原逻辑
  component = `React.memo(React.lazy(() => import(...)))`;
}

给技术栈增加一种 Cancelable Function 的渲染方式，非 React 技术栈无需再套 React 组件及关心 React 生命周期，也给未来实现 mpa 留出了空间。

8. openCodeSandbox 要考虑技术栈开发者没有实现，但同时也没有禁用该按钮导致打开报错的情况 @PeachScript

出现这个问题实际上是技术栈开发者的疏漏，如果技术栈不支持相关能力，应当通过 generatePreviewerProps 方法返回 disabledActions 把相关按钮主动禁用

为了一个可能存在的异常链路要增加复杂的 runtimeApi 设计，这个收益是比较低的；如果一定要解，也建议从编译时去解，比如让 techStack 主动声明 runtimePlugin 属性，由框架去解析 runtimePlugin 的导出来判断是否有实现相关按钮的能力，最后再决定如何设置 previewerProps

9. LanguageMetaParser、createRemoteClass 需要再看看概念上是否要做调整 @PeachScript

WIP，不希望拆这两个概念但还没想清楚怎么解

10. babel-plugin-iife 的实现需要看一下 @PeachScript

看了下功能上和 crates/swc_plugin_react_demo 是类似的，但实际上 dumi 这个 SWC 插件也和 react demo 无关，所以我的想法是 dumi 提供 tech-stack-utils.js 的产物，里面暴露原有 transformCode 中调用 SWC 的逻辑，这样我们只需要维护一套相同的逻辑，在 Vue 的 transformCode 中类似这样：

import { transformDemoCode } from 'dumi/tech-stack-utils';

transformCode() {
  const result = transformVue(...);
  const code = transformDemoCode(result);

  return `
const app = createApp(${code});
...
`
}

[jeffwcx]

1. 赞同使用onBlockLoad 方法，但为什么type只有module和text两个值?
2. 下面这种方式下其实之前我也实现过类似的，不过这种情况下生成的冗余代码就会比较多，不知道会不会有影响

component = `
function(elm) {
  let cancel;
  import(...).then(fn => cancel = fn(elm));
  return () => { cancel() }
}`

transformCode() {
  const result = transformVue(...);
  const code = transformDemoCode(result);

  return `
const app = createApp(${code});
...
`
}

3. 如果一定要解，也建议从编译时去解，比如让 techStack 主动声明 runtimePlugin 属性，由框架去解析 runtimePlugin 的导出来判断是否有实现相关按钮的能力，最后再决定如何设置 previewerProps

我会尝试实现这个，这种应该开发者体验是最佳的

4. WIP，不希望拆这两个概念但还没想清楚怎么解

这个我可以尝试合成一个API，但我建议保留组合式的api

5. 所以我的想法是 dumi 提供 tech-stack-utils.js 的产物，里面暴露原有 transformCode 中调用 SWC 的逻辑，这样我们只需要维护一套相同的逻辑

可以是可以，但是在vue jsx中会有点问题

const isTSX = opts.fileAbsPath.endsWith('.tsx');
const plugins: PluginItem[] = [];
const presets: PluginItem[] = [];
if (isTSX) {
  presets.push([
    require.resolve(
      '@umijs/bundler-utils/compiled/babel/preset-typescript',
    ),
    { isTSX, allExtensions: isTSX },
  ]);
}
plugins.push(
  require.resolve('dumi/compiled/@vue/babel-plugin-jsx'),
  require.resolve('babel-plugin-iife'),
);
const result = transformSync(raw, {
  filename: opts.fileAbsPath,
  plugins,
  presets,
});

这里只需要一次transform就可以了，如果使用来自swc的能力，这里会拆分成两个transform

或者 允许用户添加swc插件,目前有一个非官方的swc插件 swc-plugin-vue-jsx

[PeachScript]

1...为什么type只有module和text两个值?

这和目前的逻辑是等价的，module 指 js module 需要 esbuild 继续 load，text 指其他当做文本文件处理的文件（比如 less、json），不会继续 load

2...不过这种情况下生成的冗余代码就会比较多

公共 client 代码可以提成独立模块，require 进去，比如 require('/path/to/vue-app-creator')(code)

5...这里会拆分成两个transform

拆分成两次 transform 维护成本更低，SWC 很快耗时基本可以忽略，后续可以蹲一个 Vue 官方的 SWC 插件

[PeachScript]

记个 TODO：2.3 会支持 demo 编辑实时预览，需要评估下 Vue.js 技术栈怎么支持编辑实时预览，sucrase 目前不支持编译 Vue 组件

[jeffwcx]

好的，我这几天看下，之前sfc编译也是用sucrase，后面因为不想这么多依赖改成了babel

[jeffwcx]

目前进度 @PeachScript #1922

• onBlockLoad(html/xml Frontmatter)
• demo渲染: 添加render = { type: 'CANCELABLE', plugin?: RUNTIME_PLUGIN_KEY, func?: `// cancelable函数` }选项，可配合Runtime Plugin去掉冗余代码
• tech-stack-utils(移除babel-plugin-iife)
• openCodeSandbox等通过modifyCodeSandboxData等实现
• bundler-utils(添加若干babel插件，还有什么需要添加呢？)
• 采用createApiParser创建API Table支持
• demo编辑试试预览，得合并进2.3之后再看看怎么实现
• vue-demi可以实现一个Vue2/3通用库（不过实际开发组件库中，文档的实际渲染只能使用vue3），所以暂不开发Vue2？

[lk0606]

目前可以支持vue2吗，或者我通过怎样的方式曲线支持vue2

[jeffwcx]

当前进度(3月14日,4月3日)：

• dumi-vue-meta完善
• surcase 添加vue jsx支持
• webpack配置（svgo尚未配置）
• bug: dumi-afx-deps解析问题 #1957 这个问题会导致react的API Table渲染出现一定的问题

[devmsg]

啥时候支持一下呀

[jeffwcx]

已经发布2.3.0-rc.0了，坐等正式发布喽