refactor(plugin-shiki): code and test refactor (#302)

vuepress · Dec 13, 2024 · 8acd640 · 8acd640
1 parent 356e1a2
commit 8acd640
Show file tree

Hide file tree

Showing 10 changed files with 160 additions and 130 deletions.
diff --git a/...ghlighter/createMarkdownFilePathGetter.ts → ...ghlighter/createMarkdownFilePathGetter.ts b/...ghlighter/createMarkdownFilePathGetter.ts → ...ghlighter/createMarkdownFilePathGetter.ts
@@ -11,7 +11,7 @@ export const createMarkdownFilePathGetter = (
   const rawRender = md.render.bind(md)
 
   // we need to store file path before each render
-  md.render = (src, env: MarkdownEnv) => {
+  md.render = (src, env: MarkdownEnv = {}) => {
     store.path = env.filePathRelative
 
     return rawRender(src, env)

diff --git a/plugins/markdown/plugin-shiki/src/node/markdown/highlighter/createShikiHighlighter.ts b/plugins/markdown/plugin-shiki/src/node/markdown/highlighter/createShikiHighlighter.ts
@@ -0,0 +1,27 @@
+import type { BundledLanguage, BundledTheme, HighlighterGeneric } from 'shiki'
+import { createHighlighter } from 'shiki'
+import { bundledLanguageNames } from '../../shiki.js'
+import type { ShikiHighlightOptions } from '../../types.js'
+
+export const createShikiHighlighter = async ({
+  langs = bundledLanguageNames,
+  langAlias = {},
+  defaultLang,
+  shikiSetup,
+  ...options
+}: ShikiHighlightOptions = {}): Promise<
+  HighlighterGeneric<BundledLanguage, BundledTheme>
+> => {
+  const shikiHighlighter = await createHighlighter({
+    langs,
+    langAlias,
+    themes:
+      'themes' in options
+        ? Object.values(options.themes)
+        : [options.theme ?? 'nord'],
+  })
+
+  await shikiSetup?.(shikiHighlighter)
+
+  return shikiHighlighter
+}
diff --git a/...c/node/markdown/applyHighlighter/index.ts → ...kdown/highlighter/getHighLightFunction.ts b/...c/node/markdown/applyHighlighter/index.ts → ...kdown/highlighter/getHighLightFunction.ts
@@ -1,56 +1,37 @@
 import { transformerCompactLineOptions } from '@shikijs/transformers'
-import type MarkdownIt from 'markdown-it'
-import { createHighlighter } from 'shiki'
-import type { App } from 'vuepress'
-import { bundledLanguageNames } from '../../shiki.js'
+import type { BundledLanguage, BundledTheme, HighlighterGeneric } from 'shiki'
 import {
   getTransformers,
   whitespaceTransformer,
 } from '../../transformers/getTransformers.js'
 import type { ShikiHighlightOptions } from '../../types.js'
 import { attrsToLines } from '../../utils.js'
-import { createMarkdownFilePathGetter } from './createMarkdownFilePathGetter.js'
+import type { MarkdownFilePathGetter } from './createMarkdownFilePathGetter.js'
 import { getLanguage } from './getLanguage.js'
 import { handleMustache } from './handleMustache.js'
 
-export const applyHighlighter = async (
-  md: MarkdownIt,
-  app: App,
-  {
-    langs = bundledLanguageNames,
-    langAlias = {},
-    defaultLang,
-    transformers: userTransformers = [],
-    ...options
-  }: ShikiHighlightOptions = {},
-): Promise<void> => {
-  const logLevel = options.logLevel ?? (app.env.isDebug ? 'debug' : 'warn')
-  const getMarkdownFilePath =
-    logLevel === 'debug' ? createMarkdownFilePathGetter(md) : null
-
-  const highlighter = await createHighlighter({
-    langs,
-    langAlias,
-    themes:
-      'themes' in options
-        ? Object.values(options.themes)
-        : [options.theme ?? 'nord'],
-  })
-
-  await options.shikiSetup?.(highlighter)
+type MarkdownItHighlight = (
+  content: string,
+  language: string,
+  attrs: string,
+) => string
 
+export const getHighLightFunction = (
+  highlighter: HighlighterGeneric<BundledLanguage, BundledTheme>,
+  options: ShikiHighlightOptions,
+  markdownFilePathGetter: MarkdownFilePathGetter,
+): MarkdownItHighlight => {
   const transformers = getTransformers(options)
   const loadedLanguages = highlighter.getLoadedLanguages()
 
-  md.options.highlight = (content, language, attrs) =>
+  return (content, language, attrs) =>
     handleMustache(content, (str) =>
       highlighter.codeToHtml(str, {
         lang: getLanguage(
           language,
           loadedLanguages,
-          defaultLang,
-          logLevel,
-          getMarkdownFilePath!,
+          options,
+          markdownFilePathGetter,
         ),
         meta: {
           /**
@@ -65,7 +46,7 @@ export const applyHighlighter = async (
             ? [transformerCompactLineOptions(attrsToLines(attrs))]
             : []),
           ...whitespaceTransformer(attrs, options.whitespace),
-          ...userTransformers,
+          ...(options.transformers ?? []),
         ],
         ...('themes' in options
           ? {

diff --git a/.../markdown/applyHighlighter/getLanguage.ts → .../node/markdown/highlighter/getLanguage.ts b/.../markdown/applyHighlighter/getLanguage.ts → .../node/markdown/highlighter/getLanguage.ts
@@ -1,5 +1,6 @@
 import { isSpecialLang } from 'shiki'
 import { colors } from 'vuepress/utils'
+import type { ShikiHighlightOptions } from '../../types.js'
 import { logger, resolveLanguage } from '../../utils.js'
 import type { MarkdownFilePathGetter } from './createMarkdownFilePathGetter.js'
 
@@ -8,9 +9,8 @@ const WARNED_LANGS = new Set<string>()
 export const getLanguage = (
   lang: string,
   loadedLanguages: string[],
-  defaultLang: string | undefined,
-  logLevel: string,
-  getMarkdownFilePath: MarkdownFilePathGetter,
+  { defaultLang, logLevel }: ShikiHighlightOptions,
+  markdownFilePathGetter: MarkdownFilePathGetter,
 ): string => {
   let result = resolveLanguage(lang)
 
@@ -26,7 +26,7 @@ export const getLanguage = (
     // log file path if unknown language is found
     if (logLevel === 'debug') {
       logger.info(
-        `Unknown language ${colors.cyan(result)} found in ${colors.cyan(getMarkdownFilePath())}`,
+        `Unknown language ${colors.cyan(result)} found in ${colors.cyan(markdownFilePathGetter())}`,
       )
     }
 

diff --git a/...rkdown/applyHighlighter/handleMustache.ts → ...de/markdown/highlighter/handleMustache.ts b/...rkdown/applyHighlighter/handleMustache.ts → ...de/markdown/highlighter/handleMustache.ts
diff --git a/plugins/markdown/plugin-shiki/src/node/markdown/highlighter/index.ts b/plugins/markdown/plugin-shiki/src/node/markdown/highlighter/index.ts
@@ -0,0 +1,3 @@
+export * from './createMarkdownFilePathGetter.js'
+export * from './createShikiHighlighter.js'
+export * from './getHighLightFunction.js'
diff --git a/plugins/markdown/plugin-shiki/src/node/markdown/index.ts b/plugins/markdown/plugin-shiki/src/node/markdown/index.ts
@@ -1,3 +1,3 @@
-export * from './applyHighlighter/index.js'
+export * from './highlighter/index.js'
 export * from './highlightLinesPlugin.js'
 export * from './preWrapperPlugin.js'
diff --git a/plugins/markdown/plugin-shiki/src/node/shikiPlugin.ts b/plugins/markdown/plugin-shiki/src/node/shikiPlugin.ts
@@ -8,50 +8,60 @@ import {
 } from '@vuepress/highlighter-helper'
 import type { Plugin } from 'vuepress/core'
 import { isPlainObject } from 'vuepress/shared'
+import { createMarkdownFilePathGetter } from './markdown/highlighter/createMarkdownFilePathGetter.js'
 import type { MarkdownItPreWrapperOptions } from './markdown/index.js'
 import {
-  applyHighlighter,
+  createShikiHighlighter,
+  getHighLightFunction,
   highlightLinesPlugin,
   preWrapperPlugin,
 } from './markdown/index.js'
 import type { ShikiPluginOptions } from './options.js'
 import { prepareClientConfigFile } from './prepareClientConfigFile.js'
 
-export const shikiPlugin = (options: ShikiPluginOptions = {}): Plugin => {
-  const opt: ShikiPluginOptions = {
-    preWrapper: true,
-    lineNumbers: true,
-    collapsedLines: 'disable',
-    ...options,
-  }
+export const shikiPlugin = (_options: ShikiPluginOptions = {}): Plugin => {
+  return (app) => {
+    // FIXME: Remove in stable version
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    const { code } = app.options.markdown
+    const options = {
+      ...(isPlainObject(code) ? code : {}),
+      ..._options,
+    }
+
+    options.logLevel ??= app.env.isDebug ? 'debug' : 'warn'
+    options.preWrapper ??= true
+    options.lineNumbers ??= true
+    options.collapsedLines ??= 'disable'
+
+    return {
+      name: '@vuepress/plugin-shiki',
+
+      extendsMarkdown: async (md) => {
+        const { preWrapper, lineNumbers, collapsedLines } = options
+
+        const markdownFilePathGetter = createMarkdownFilePathGetter(md)
+        const shikiHighlighter = await createShikiHighlighter(options)
+
+        md.options.highlight = getHighLightFunction(
+          shikiHighlighter,
+          options,
+          markdownFilePathGetter,
+        )
+
+        md.use(highlightLinesPlugin)
+        md.use<MarkdownItPreWrapperOptions>(preWrapperPlugin, { preWrapper })
+        if (preWrapper) {
+          md.use<MarkdownItLineNumbersOptions>(lineNumbersPlugin, {
+            lineNumbers,
+          })
+          md.use<MarkdownItCollapsedLinesOptions>(collapsedLinesPlugin, {
+            collapsedLines,
+          })
+        }
+      },
 
-  return {
-    name: '@vuepress/plugin-shiki',
-
-    extendsMarkdown: async (md, app) => {
-      // FIXME: Remove in stable version
-      // eslint-disable-next-line @typescript-eslint/no-deprecated
-      const { code } = app.options.markdown
-
-      await applyHighlighter(md, app, {
-        ...(isPlainObject(code) ? code : {}),
-        ...options,
-      })
-
-      const { preWrapper, lineNumbers, collapsedLines } = opt
-
-      md.use(highlightLinesPlugin)
-      md.use<MarkdownItPreWrapperOptions>(preWrapperPlugin, { preWrapper })
-      if (preWrapper) {
-        md.use<MarkdownItLineNumbersOptions>(lineNumbersPlugin, {
-          lineNumbers,
-        })
-        md.use<MarkdownItCollapsedLinesOptions>(collapsedLinesPlugin, {
-          collapsedLines,
-        })
-      }
-    },
-
-    clientConfigFile: (app) => prepareClientConfigFile(app, opt),
+      clientConfigFile: () => prepareClientConfigFile(app, options),
+    }
   }
 }