feat(plugin-md-power): cleanup the env passed into renderInline (#519)

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` 中导入类型文件。

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<CodeTabsOptions> = (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
 

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
 

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 `<Abbreviation>${content}${info ? `<template #tooltip>${md.renderInline(info, env)}</template>` : ''}</Abbreviation>`
+    return `<Abbreviation>${content}${info ? `<template #tooltip>${md.renderInline(info, cleanMarkdownEnv(env))}</template>` : ''}</Abbreviation>`
   }
 }

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,
+  }
+}