From fb08a2dc10452408e1c908d37923a6c0fa25f4ff Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Wed, 12 Mar 2025 23:38:58 +0800 Subject: [PATCH] feat(plugin-md-power): cleanup the `env` passed into `renderInline` (#519) --- docs/notes/theme/guide/代码/twoslash.md | 19 +++++++++++++++++++ .../src/node/container/codeTabs.ts | 3 ++- .../src/node/container/tabs.ts | 3 ++- .../plugin-md-power/src/node/inline/abbr.ts | 3 ++- .../src/node/utils/cleanMarkdownEnv.ts | 18 ++++++++++++++++++ 5 files changed, 43 insertions(+), 3 deletions(-) create mode 100644 plugins/plugin-md-power/src/node/utils/cleanMarkdownEnv.ts diff --git a/docs/notes/theme/guide/代码/twoslash.md b/docs/notes/theme/guide/代码/twoslash.md index 0f34f0a4..616ea693 100644 --- a/docs/notes/theme/guide/代码/twoslash.md +++ b/docs/notes/theme/guide/代码/twoslash.md @@ -61,9 +61,20 @@ const c = 1 ### 启用功能 +在启用功能前，您需要先安装 `@vuepress/shiki-twoslash` 包： + +::: npm-to + +```sh +npm i @vuepress/shiki-twoslash +``` + +::: + 在 主题配置中，启用 `twoslash` 选项。 ::: code-tabs + @tab .vuepress/config.ts ```ts @@ -78,6 +89,14 @@ export default defineUserConfig({ ::: +::: important +`twoslash` 对于大多数用户而言，不是必要的功能，且 `twoslash` 相关的依赖包体积较大， +因此将 `twoslash` 的相关实现均迁移到了 `@vuepress/shiki-twoslash` 中， +这可以有效减少主题的初始安装体积。 +仅在您需要使用 `twoslash` 功能时，才需要安装 `@vuepress/shiki-twoslash`。 + +::: + ### 从 `node_modules` 中导入类型文件 __twoslash__ 最大的特点就是对代码块进行类型编译，默认支持从项目的 `node_modules` 中导入类型文件。 diff --git a/plugins/plugin-md-power/src/node/container/codeTabs.ts b/plugins/plugin-md-power/src/node/container/codeTabs.ts index a16bda12..7352a03b 100644 --- a/plugins/plugin-md-power/src/node/container/codeTabs.ts +++ b/plugins/plugin-md-power/src/node/container/codeTabs.ts @@ -3,6 +3,7 @@ import type { CodeTabsOptions } from '../../shared/index.js' import { tab } from '@mdit/plugin-tab' import { isPlainObject } from '@vuepress/helper' import { definitions, getFileIconName, getFileIconTypeFromExtension } from '../fileIcons/index.js' +import { cleanMarkdownEnv } from '../utils/cleanMarkdownEnv.js' import { stringifyProp } from '../utils/stringifyProp.js' export function createCodeTabIconGetter( @@ -42,7 +43,7 @@ export const codeTabs: PluginWithOptions = (md, options: CodeTa tabsOpenRenderer: ({ active, data }, tokens, index, _, env) => { const { meta } = tokens[index] - const titles = data.map(({ title }) => md.renderInline(title, env)) + const titles = data.map(({ title }) => md.renderInline(title, cleanMarkdownEnv(env))) const tabsData = data.map((item, dataIndex) => { const { id = titles[dataIndex] } = item diff --git a/plugins/plugin-md-power/src/node/container/tabs.ts b/plugins/plugin-md-power/src/node/container/tabs.ts index 4ce723ba..17de57c2 100644 --- a/plugins/plugin-md-power/src/node/container/tabs.ts +++ b/plugins/plugin-md-power/src/node/container/tabs.ts @@ -1,5 +1,6 @@ import type { PluginSimple } from 'markdown-it' import { tab } from '@mdit/plugin-tab' +import { cleanMarkdownEnv } from '../utils/cleanMarkdownEnv.js' import { stringifyProp } from '../utils/stringifyProp.js' export const tabs: PluginSimple = (md) => { @@ -8,7 +9,7 @@ export const tabs: PluginSimple = (md) => { tabsOpenRenderer: ({ active, data }, tokens, index, _, env) => { const { meta } = tokens[index] - const titles = data.map(({ title }) => md.renderInline(title, env)) + const titles = data.map(({ title }) => md.renderInline(title, cleanMarkdownEnv(env))) const tabsData = data.map((item, dataIndex) => { const { id = titles[dataIndex] } = item diff --git a/plugins/plugin-md-power/src/node/inline/abbr.ts b/plugins/plugin-md-power/src/node/inline/abbr.ts index 42f88c72..52cec264 100644 --- a/plugins/plugin-md-power/src/node/inline/abbr.ts +++ b/plugins/plugin-md-power/src/node/inline/abbr.ts @@ -8,6 +8,7 @@ import type { RuleCore } from 'markdown-it/lib/parser_core.mjs' import type StateBlock from 'markdown-it/lib/rules_block/state_block.mjs' import type StateCore from 'markdown-it/lib/rules_core/state_core.mjs' import type Token from 'markdown-it/lib/token.mjs' +import { cleanMarkdownEnv } from '../utils/cleanMarkdownEnv.js' interface AbbrStateBlock extends StateBlock { env: { @@ -176,6 +177,6 @@ export const abbrPlugin: PluginSimple = (md) => { md.renderer.rules.abbreviation = (tokens, idx, _, env) => { const { content, info } = tokens[idx] - return `${content}${info ? `` : ''}` + return `${content}${info ? `` : ''}` } } diff --git a/plugins/plugin-md-power/src/node/utils/cleanMarkdownEnv.ts b/plugins/plugin-md-power/src/node/utils/cleanMarkdownEnv.ts new file mode 100644 index 00000000..d93c7476 --- /dev/null +++ b/plugins/plugin-md-power/src/node/utils/cleanMarkdownEnv.ts @@ -0,0 +1,18 @@ +import type { MarkdownEnv } from 'vuepress/markdown' + +export interface CleanMarkdownEnv extends MarkdownEnv { + references?: unknown + abbreviations?: unknown + annotations?: unknown +} + +export function cleanMarkdownEnv(env: CleanMarkdownEnv): CleanMarkdownEnv { + return { + base: env.base, + filePath: env.filePath, + filePathRelative: env.filePathRelative, + references: env.references, + abbreviations: env.abbreviations, + annotations: env.annotations, + } +}