Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: vue usage supplement explanation #2079

Merged
merged 1 commit into from
Apr 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions docs/guide/vue-api-table.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@ export default {
};
```

:::info
若您的项目 Monorepo 项目, 默认的 tsconfigPath 为 `<project-root>/<directory>/tsconfig.json`。 `<project-root>` 为 Monorepo 项目目录; `<directory>` 则为子包`package.json` 中的 `repository.directory` 选项
:::

## checkerOptions

我们还可以通过 checkerOptions 选项来配置 Type Checker:
Expand All @@ -57,9 +61,7 @@ export default {
plugins: ['@dumijs/preset-vue'],
vue: {
checkerOptions: {
schema: {
exclude: /src\/runtime\//,
},
exclude: /src\/runtime\//,
},
},
};
Expand All @@ -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',
},
},
},
Expand Down
12 changes: 9 additions & 3 deletions docs/guide/vue.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export default {
presets: ['@dumijs/preset-vue'],
vue: {
checkerOptions: {
schema: { ignore: ['InternalType'] },
ignore: ['InternalType'],
},
},
};
Expand All @@ -58,7 +58,7 @@ export default {
presets: ['@dumijs/preset-vue'],
vue: {
checkerOptions: {
schema: { exclude: [/node_modules/, /mylib/] },
exclude: [/node_modules/, /mylib/],
},
},
};
Expand All @@ -68,7 +68,13 @@ export default {

### tsconfigPath

TypeChecker 使用的 tsconfig,默认值为 `<project-root>/tsconfig.json`
TypeChecker 使用的 tsconfig,默认值为 `<project-root>/<directory>/tsconfig.json`

> 默认情况下,如果您的项目位于 Monorepo 中,则 `<project-root>` 为 Monorepo 项目目录;而 `<directory>` 则为 `package.json` 中的 `repository.directory` 选项

## directory

默认情况下,该选项是 `package.json` 中的 `repository.directory` 选项

### compiler

Expand Down
4 changes: 4 additions & 0 deletions docs/plugin/market.md
Original file line number Diff line number Diff line change
Expand Up @@ -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\`。
Expand Down
18 changes: 12 additions & 6 deletions docs/plugin/techstack.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,14 +54,15 @@ api.registerTechStack(() => VueSfcTechStack);

### runtimeOpts: 运行时配置

有三个选项可供选择
有四个选项可供选择

```ts
{
runtimeOpts: {
compilePath: '...',
rendererPath: '...',
pluginPath: '...',
preflightPath: '...'
},
}

Expand All @@ -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();
Expand Down Expand Up @@ -115,6 +119,10 @@ const rendererPath = getPluginPath(api, 'renderer.mjs');

得到的`rendererPath`我们就可以提供给 dumi 了。

`preflightPath` 是和 `rendererPath` 配套的地址,在用户编辑 demo 时, dumi 会在组件被加载之前使用 preflight 进行预加载,并将发现的错误提示给用户。这能有效提升用户的编辑体验,请务必实现。

`preflightPath`的提供方式和`rendererPath`如出一辙,这里就不赘述了。

`compilePath`则是浏览器端 Vue 实时编译库所在地址,dumi 会在用户进行实时代码编辑时,通过

```ts
Expand All @@ -123,8 +131,6 @@ const { compile } = await import(compilePath);

进行实时代码编译。

`compilePath`的提供方式和`rendererPath`如出一辙,这里就不赘述了。

在实际实现过程中,主要难度还是在于提供轻量的,浏览器端运行的编译器。

常用的浏览器端编译器有[@babel/standalone](https://babeljs.io/docs/babel-standalone),但其体积过大,使用时请谨慎。
Expand Down Expand Up @@ -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() {
Expand Down
Loading