fix(highlight): do not include shiki in bundle when highlight is disa…

…bled
nobkd · Nov 9, 2023 · 7cb2b9d · 7cb2b9d
1 parent 2e7dcdb
commit 7cb2b9d
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 14 deletions.
diff --git a/src/module.ts b/src/module.ts
@@ -58,6 +58,18 @@ export default defineNuxtModule<ModuleOptions>({
       )
     })
 
+    // Enable wasm for shikiji
+    if (options.highlight) {
+      nuxt.options.nitro.experimental = nuxt.options.nitro.experimental || {}
+      nuxt.options.nitro.experimental.wasm = true
+      // Add server handlers
+      addServerHandler({ route: '/api/_mdc/highlight', handler: resolver.resolve('./runtime/shiki/event-handler') })
+
+      options.rehypePlugins = options.rehypePlugins || {}
+      options.rehypePlugins.highlight = options.rehypePlugins.highlight || {}
+      options.rehypePlugins.highlight.src = options.rehypePlugins.highlight.src || resolver.resolve('./runtime/shiki/index')
+    }
+
     // Add imports template
     const { dst: templatePath } = addTemplate({ filename: 'mdc-imports.mjs', getContents: mdcImportTemplate, options, write: true })
     nuxt.options.alias['#mdc-imports'] = process.env.NODE_ENV === 'development' ? pathToFileURL(templatePath).href : templatePath
@@ -82,14 +94,6 @@ export default defineNuxtModule<ModuleOptions>({
       })
     }
 
-    // Enable wasm for shikiji
-    if (options.highlight) {
-      nuxt.options.nitro.experimental = nuxt.options.nitro.experimental || {}
-      nuxt.options.nitro.experimental.wasm = true
-      // Add server handlers
-      addServerHandler({ route: '/api/_mdc/highlight', handler: resolver.resolve('./runtime/shiki/event-handler') })
-    }
-
     extendViteConfig((config) => {
       config.optimizeDeps = config.optimizeDeps || {}
       config.optimizeDeps.exclude = config.optimizeDeps.exclude || []

diff --git a/src/runtime/parser/index.ts b/src/runtime/parser/index.ts
@@ -7,7 +7,6 @@ import { defu } from 'defu'
 import { useProcessorPlugins } from './utils/plugins'
 import { compileHast } from './compiler'
 import { defaults } from './options'
-import { rehypeShiki } from '../shiki'
 import { generateToc } from './toc'
 import { nodeTextContent } from '../utils/node'
 
@@ -23,6 +22,11 @@ export const parseMarkdown = async (md: string, opts: MDCParseOptions = {}) => {
     highlight: moduleOptions?.highlight,
   }, defaults)
 
+  if (options.rehype?.plugins?.highlight) {
+    options.rehype.plugins.highlight.options = options.highlight || {}
+  }
+
+
   // Extract front matter data
   const { content, data: frontmatter } = await parseFrontMatter(md)
 
@@ -37,10 +41,6 @@ export const parseMarkdown = async (md: string, opts: MDCParseOptions = {}) => {
   // Turns markdown into HTML to support rehype
   processor.use(remark2rehype as any, (options.rehype as any)?.options)
 
-  if (options.highlight) {
-    processor.use(rehypeShiki, options.highlight)
-  }
-
   // Apply custom plguins to extend rehybe capabilities
   await useProcessorPlugins(processor as any, options.rehype?.plugins)
 

diff --git a/src/runtime/shiki/index.ts b/src/runtime/shiki/index.ts
@@ -39,7 +39,7 @@ const defaults: RehypeShikiOption = {
     return Promise.resolve({ tree: [{ type: 'text', value: code }], className: '', style: '' } as HighlightResult)
   }
 }
-
+export default rehypeShiki
 export function rehypeShiki(opts: RehypeShikiOption = {}) {
   const options = { ...defaults, ...opts }
 

diff --git a/test/utils/parser.ts b/test/utils/parser.ts
@@ -3,6 +3,7 @@ import { parseMarkdown as _parseMarkDown } from '../../src/runtime/parser'
 import type { MDCParseOptions } from '../../src/runtime/types'
 import type { Theme } from '../../src/runtime/shiki/types'
 import { useShikiHighlighter } from '../../src/runtime/shiki/highlighter'
+import rehypeShiki from '../../src/runtime/shiki'
 
 vi.mock('#mdc-imports', () => {
   return {
@@ -21,6 +22,10 @@ export const parseMarkdown = (md: string, options: MDCParseOptions = {}) => {
       const shikiHighlighter = useShikiHighlighter({})
       return await shikiHighlighter.getHighlightedAST(code as string, lang as any, theme as Theme, { highlights })
     }
+    options.rehype = options.rehype || {}
+    options.rehype.plugins = options.rehype?.plugins || {}
+    options.rehype.plugins.highlight = options.rehype?.plugins.highlight || {}
+    options.rehype.plugins.highlight.instance = rehypeShiki
   }
 
   return _parseMarkDown(md, options)