diff --git a/docs/guide/vue-api-table.md b/docs/guide/vue-api-table.md index da1f8eeee..50105f93a 100644 --- a/docs/guide/vue-api-table.md +++ b/docs/guide/vue-api-table.md @@ -46,6 +46,10 @@ export default { }; ``` +:::info +若您的项目 Monorepo 项目, 默认的 tsconfigPath 为 `//tsconfig.json`。 `` 为 Monorepo 项目目录; `` 则为子包`package.json` 中的 `repository.directory` 选项 +::: + ## checkerOptions 我们还可以通过 checkerOptions 选项来配置 Type Checker: @@ -57,9 +61,7 @@ export default { plugins: ['@dumijs/preset-vue'], vue: { checkerOptions: { - schema: { - exclude: /src\/runtime\//, - }, + exclude: /src\/runtime\//, }, }, }; @@ -74,12 +76,10 @@ export default { plugins: ['@dumijs/preset-vue'], vue: { checkerOptions: { - schema: { - externalSymbolLinkMappings: { - typescript: { - Promise: - 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise', - }, + externalSymbolLinkMappings: { + typescript: { + Promise: + 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise', }, }, }, diff --git a/docs/guide/vue.md b/docs/guide/vue.md index 169250fb9..49d75d101 100644 --- a/docs/guide/vue.md +++ b/docs/guide/vue.md @@ -44,7 +44,7 @@ export default { presets: ['@dumijs/preset-vue'], vue: { checkerOptions: { - schema: { ignore: ['InternalType'] }, + ignore: ['InternalType'], }, }, }; @@ -58,7 +58,7 @@ export default { presets: ['@dumijs/preset-vue'], vue: { checkerOptions: { - schema: { exclude: [/node_modules/, /mylib/] }, + exclude: [/node_modules/, /mylib/], }, }, }; @@ -68,7 +68,13 @@ export default { ### tsconfigPath -TypeChecker 使用的 tsconfig,默认值为 `/tsconfig.json` +TypeChecker 使用的 tsconfig,默认值为 `//tsconfig.json` + +> 默认情况下,如果您的项目位于 Monorepo 中,则 `` 为 Monorepo 项目目录;而 `` 则为 `package.json` 中的 `repository.directory` 选项 + +## directory + +默认情况下,该选项是 `package.json` 中的 `repository.directory` 选项 ### compiler diff --git a/docs/plugin/market.md b/docs/plugin/market.md index 8d48d174f..07fcd77f6 100644 --- a/docs/plugin/market.md +++ b/docs/plugin/market.md @@ -9,6 +9,10 @@ toc: null 阅读更多关于 [如何使用插件](./index.md#配置),或 [如何编写属于你自己的插件](./new.md) 并与社区分享! +## 官方插件 + +- [**preset-vue**](https://github.com/umijs/dumi/tree/master/suites/preset-vue): Vue 插件,支持 Vue Demo 渲染及编辑,API Table 等 + ## 社区插件 - [**color-chunk**](https://github.com/Wxh16144/dumi-plugin-color-chunk#readme): 美化内联代码颜色块儿 \`#f00\`。 diff --git a/docs/plugin/techstack.md b/docs/plugin/techstack.md index 767b1ee9f..f69ff466f 100644 --- a/docs/plugin/techstack.md +++ b/docs/plugin/techstack.md @@ -54,7 +54,7 @@ api.registerTechStack(() => VueSfcTechStack); ### runtimeOpts: 运行时配置 -有三个选项可供选择: +有四个选项可供选择: ```ts { @@ -62,6 +62,7 @@ api.registerTechStack(() => VueSfcTechStack); compilePath: '...', rendererPath: '...', pluginPath: '...', + preflightPath: '...' }, } @@ -77,7 +78,10 @@ import { createApp } from 'vue'; const renderer: IDemoCancelableFn = function (canvas, component) { const app = createApp(component); - app.config.errorHandler = (e) => console.error(e); + // 抛给 react 处理 + app.config.errorHandler = (err) => { + throw err; + }; app.mount(canvas); return () => { app.unmount(); @@ -115,6 +119,10 @@ const rendererPath = getPluginPath(api, 'renderer.mjs'); 得到的`rendererPath`我们就可以提供给 dumi 了。 +`preflightPath` 是和 `rendererPath` 配套的地址,在用户编辑 demo 时, dumi 会在组件被加载之前使用 preflight 进行预加载,并将发现的错误提示给用户。这能有效提升用户的编辑体验,请务必实现。 + +`preflightPath`的提供方式和`rendererPath`如出一辙,这里就不赘述了。 + `compilePath`则是浏览器端 Vue 实时编译库所在地址,dumi 会在用户进行实时代码编辑时,通过 ```ts @@ -123,8 +131,6 @@ const { compile } = await import(compilePath); 进行实时代码编译。 -`compilePath`的提供方式和`rendererPath`如出一辙,这里就不赘述了。 - 在实际实现过程中,主要难度还是在于提供轻量的,浏览器端运行的编译器。 常用的浏览器端编译器有[@babel/standalone](https://babeljs.io/docs/babel-standalone),但其体积过大,使用时请谨慎。 @@ -183,8 +189,8 @@ API Table 的支持主要在于对框架元信息信息的提取,例如针对 ```ts import { ILanguageMetaParser, IPatchFile } from 'dumi/tech-stack-utils'; -class VueMetaParser implements LanguageMetaParser { - async patch(file: PatchFile) { +class VueMetaParser implements ILanguageMetaParser { + async patch(file: IPatchFile) { // ... } async parse() {