feat(plugin-shiki): add built-in twoslash support

.vscode/settings.json

@@ -50,6 +50,7 @@
     "lightmode",
     "linkify",
     "mathjax",
+    "mdast",
     "mdit",
     "meteorlxy",
     "mhchem",
@@ -78,6 +79,7 @@
     "trackpad",
     "tsbuildinfo",
     "twikoo",
+    "twoslash",
     "umami",
     "unmount",
     "vuejs",

docs/.vuepress/config.ts

@@ -26,8 +26,6 @@ import theme from './theme.js'
 
 const __dirname = import.meta.dirname || getDirname(import.meta.url)
 
-const IS_PROD = process.env.NODE_ENV === 'production'
-
 export default defineUserConfig({
   // set site base to default value
   base: (process.env.BASE as '/' | `/${string}/` | undefined) || '/',
@@ -155,39 +153,21 @@ export default defineUserConfig({
         NpmBadge: path.resolve(__dirname, './components/NpmBadge.vue'),
       },
     }),
-    // only enable shiki plugin in production mode
-    IS_PROD
-      ? shikiPlugin({
-          langs: [
-            'bash',
-            'diff',
-            'json',
-            'md',
-            'scss',
-            'ts',
-            'vue',
-            'less',
-            'java',
-            'py',
-            'vb',
-            'bat',
-            'cs',
-            'cpp',
-          ],
-          themes: {
-            light: 'one-light',
-            dark: 'one-dark-pro',
-          },
-          lineNumbers: 10,
-          notationDiff: true,
-          notationErrorLevel: true,
-          notationFocus: true,
-          notationHighlight: true,
-          notationWordHighlight: true,
-          whitespace: true,
-          collapsedLines: false,
-        })
-      : [],
+    shikiPlugin({
+      themes: {
+        light: 'one-light',
+        dark: 'one-dark-pro',
+      },
+      lineNumbers: 10,
+      notationDiff: true,
+      notationErrorLevel: true,
+      notationFocus: true,
+      notationHighlight: true,
+      notationWordHighlight: true,
+      whitespace: true,
+      collapsedLines: false,
+      twoslash: true,
+    }),
     cachePlugin(),
   ],
 

docs/.vuepress/theme.ts

@@ -66,22 +66,7 @@ export default defaultTheme({
     hint: {
       alert: true,
     },
-    // use shiki plugin in production mode instead
-    prismjs: IS_PROD
-      ? false
-      : {
-          themes: {
-            light: 'one-light',
-            dark: 'one-dark',
-          },
-          lineNumbers: 10,
-          notationDiff: true,
-          notationErrorLevel: true,
-          notationFocus: true,
-          notationHighlight: true,
-          notationWordHighlight: true,
-          whitespace: true,
-          collapsedLines: false,
-        },
+    // use shiki plugin instead
+    prismjs: false,
   },
 })

docs/package.json

@@ -9,6 +9,7 @@
     "docs:serve": "http-server -a localhost .vuepress/dist"
   },
   "dependencies": {
+    "@vuepress/shiki-twoslash": "workspace:*",
     "@vuepress/bundler-vite": "2.0.0-rc.19",
     "@vuepress/bundler-webpack": "2.0.0-rc.19",
     "@vuepress/helper": "workspace:*",

docs/plugins/markdown/shiki.md

@@ -671,6 +671,45 @@ body > div {
 - Also see：
   - [Shiki > Render Whitespace](https://shiki.style/packages/transformers#transformerrenderwhitespace)
 
+### twoslash
+
+- Type: `boolean | TwoslashOptions`
+
+- Default: `false`
+
+- Details: Whether enable [twoslash](https://github.com/twoslashes/twoslash).
+
+  ::: tip
+
+  For size reasons, the plugin does not include the `@vuepress/shiki-twoslash` package by default. If you want to use it, you need to install it manually.
+
+  :::
+
+- Also see:
+
+  - [Shiki > Twoslash](https://shiki.style/packages/twoslash)
+  - [Twoslash > TwoslashOptions](https://github.com/twoslashes/twoslash/blob/main/packages/twoslash/src/types/options.ts#L18)
+
+- Example:
+
+  **Input:**
+
+  ````md
+  ```ts twoslash
+  const a = 1
+  const b = 2
+  console.log(a + b)
+  ```
+  ````
+
+  **Output:**
+
+  ```ts twoslash
+  const a = 1
+  const b = 23
+  console.log(a + b)
+  ```
+
 ## Advanced Options
 
 ### defaultLang

docs/zh/plugins/markdown/shiki.md

@@ -673,6 +673,45 @@ body > div {
 - 参考：
   - [Shiki > 空白符渲染](https://shiki.tmrs.site/packages/transformers#transformerrenderwhitespace)
 
+### twoslash
+
+- 类型： `boolean | TwoslashOptions`
+
+- 默认值： `false`
+
+- 详情： 是否启用 [twoslash](https://github.com/twoslashes/twoslash).
+
+  ::: tip
+
+  出于体积考虑，该插件默认不包含`@vuepress/shiki-twoslash`包。如需使用，需手动安装。
+
+  :::
+
+- 参考：
+
+  - [Shiki > Twoslash](https://shiki.style/packages/twoslash)
+  - [Twoslash > TwoslashOptions](https://github.com/twoslashes/twoslash/blob/main/packages/twoslash/src/types/options.ts#L18)
+
+- 示例：
+
+  **输入：**
+
+  ````md
+  ```ts twoslash
+  const a = 1
+  const b = 2
+  console.log(a + b)
+  ```
+  ````
+
+  **输出：**
+
+  ```ts twoslash
+  const a = 1
+  const b = 23
+  console.log(a + b)
+  ```
+
 ## 高级选项
 
 ### defaultLang

plugins/markdown/plugin-shiki/package.json

@@ -39,16 +39,22 @@
     "style": "sass src:lib --embed-sources --style=compressed --pkg-importer=node"
   },
   "dependencies": {
-    "@shikijs/transformers": "^2.1.0",
+    "@shikijs/transformers": "^2.3.2",
     "@vuepress/helper": "workspace:*",
     "@vuepress/highlighter-helper": "workspace:*",
     "nanoid": "^5.0.9",
-    "shiki": "^2.1.0",
+    "shiki": "^2.3.2",
     "synckit": "^0.9.2"
   },
   "peerDependencies": {
+    "@vuepress/shiki-twoslash": "workspace:*",
     "vuepress": "2.0.0-rc.19"
   },
+  "peerDependenciesMeta": {
+    "@vuepress/shiki-twoslash": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },

plugins/markdown/plugin-shiki/src/node/markdown/highlighter/createShikiHighlighter.ts

@@ -1,9 +1,11 @@
 import { createRequire } from 'node:module'
+import type { TwoslashTransformer } from '@vuepress/shiki-twoslash'
 import type { BundledLanguage, BundledTheme, HighlighterGeneric } from 'shiki'
 import { createHighlighter, isSpecialLang } from 'shiki'
 import { createSyncFn } from 'synckit'
+import { isPlainObject } from 'vuepress/shared'
+import type { ShikiPluginOptions } from '../../options.js'
 import type { ShikiResolveLang } from '../../resolveLang.js'
-import type { ShikiHighlightOptions } from '../../types.js'
 import { resolveLanguage } from '../../utils.js'
 
 const require = createRequire(import.meta.url)
@@ -20,9 +22,10 @@ export const createShikiHighlighter = async ({
   defaultLang,
   shikiSetup,
   ...options
-}: ShikiHighlightOptions = {}): Promise<{
+}: ShikiPluginOptions = {}): Promise<{
   highlighter: HighlighterGeneric<BundledLanguage, BundledTheme>
   loadLang: ShikiLoadLang
+  twoslashTransformer: TwoslashTransformer
 }> => {
   const highlighter = await createHighlighter({
     langs: [...langs, ...Object.values(langAlias)],
@@ -60,7 +63,19 @@ export const createShikiHighlighter = async ({
     return rawGetLanguage.call(highlighter, name)
   }
 
+  let twoslashTransformer: TwoslashTransformer = () => []
+
+  if (options.twoslash) {
+    const { createTwoslashTransformer } = await import(
+      '@vuepress/shiki-twoslash'
+    )
+
+    twoslashTransformer = await createTwoslashTransformer({
+      twoslashOptions: isPlainObject(options.twoslash) ? options.twoslash : {},
+    })
+  }
+
   await shikiSetup?.(highlighter)
 
-  return { highlighter, loadLang }
+  return { highlighter, loadLang, twoslashTransformer }
 }

plugins/markdown/plugin-shiki/src/node/markdown/highlighter/getHighLightFunction.ts

@@ -1,4 +1,5 @@
 import { transformerCompactLineOptions } from '@shikijs/transformers'
+import type { TwoslashTransformer } from '@vuepress/shiki-twoslash'
 import type { BundledLanguage, BundledTheme, HighlighterGeneric } from 'shiki'
 import {
   getTransformers,
@@ -22,6 +23,7 @@ export const getHighLightFunction = (
   options: ShikiHighlightOptions,
   loadLang: ShikiLoadLang,
   markdownFilePathGetter: MarkdownFilePathGetter,
+  twoslashTransformer: TwoslashTransformer = () => [],
 ): MarkdownItHighlight => {
   const transformers = getTransformers(options)
 
@@ -42,6 +44,7 @@ export const getHighLightFunction = (
             ? [transformerCompactLineOptions(attrsToLines(attrs))]
             : []),
           ...whitespaceTransformer(attrs, options.whitespace),
+          ...twoslashTransformer(attrs),
           ...(options.transformers ?? []),
         ],
         ...('themes' in options

plugins/markdown/plugin-shiki/src/node/options.ts

@@ -2,6 +2,7 @@ import type {
   MarkdownItCollapsedLinesOptions,
   MarkdownItLineNumbersOptions,
 } from '@vuepress/highlighter-helper'
+import type { TwoslashOptions } from '@vuepress/shiki-twoslash'
 import type { MarkdownItPreWrapperOptions } from './markdown/index.js'
 import type { ShikiHighlightOptions } from './types.js'
 
@@ -11,4 +12,13 @@ import type { ShikiHighlightOptions } from './types.js'
 export type ShikiPluginOptions = MarkdownItLineNumbersOptions &
   MarkdownItPreWrapperOptions &
   Pick<MarkdownItCollapsedLinesOptions, 'collapsedLines'> &
-  ShikiHighlightOptions
+  ShikiHighlightOptions & {
+    /**
+     * Enable twoslash
+     *
+     * @description You should install `@shikijs/twoslash` manually.
+     *
+     * @default false
+     */
+    twoslash?: TwoslashOptions | boolean
+  }

plugins/markdown/plugin-shiki/src/node/prepareClientConfigFile.ts

@@ -15,13 +15,15 @@ export const prepareClientConfigFile = (
     notationHighlight,
     notationWordHighlight,
     whitespace,
+    twoslash,
   }: ShikiPluginOptions,
 ): Promise<string> => {
   const imports: string[] = [
     `import "${getModulePath('@vuepress/highlighter-helper/styles/base.css', import.meta)}"`,
     `import "${getModulePath(`${PLUGIN_NAME}/styles/shiki.css`, import.meta)}"`,
   ]
 
+  const enhances: string[] = []
   const setups: string[] = []
 
   if (lineNumbers !== 'disable') {
@@ -80,15 +82,42 @@ export const prepareClientConfigFile = (
     setups.push('setupCollapsedLines()')
   }
 
+  if (twoslash) {
+    imports.push(
+      `import { enhanceTwoslash } from "${getModulePath('@vuepress/shiki-twoslash/client', import.meta)}"`,
+    )
+    imports.push(
+      `import "${getModulePath('@vuepress/shiki-twoslash/styles/twoslash.css', import.meta)}"`,
+    )
+    enhances.push('enhanceTwoslash(app)')
+  }
+
   let code = imports.join('\n')
 
-  if (setups.length) {
-    code += `\n
+  if (setups.length || enhances.length) {
+    code += `
 export default {
+`
+
+    if (enhances.length) {
+      code += `\
+  enhance({ app }) {
+    ${enhances.join('\n    ')}
+  },
+`
+    }
+
+    if (setups.length) {
+      code += `\
   setup() {
     ${setups.join('\n    ')}
-  }
-}\n`
+  },
+`
+    }
+
+    code += `\
+}
+`
   }
 
   return app.writeTemp('shiki/config.js', code)