fix: check highlight result not empty #451 (#452)

Co-authored-by: Farnabaz <farnabaz@gmail.com>

Author: PBK-B

src/module.ts

@@ -66,6 +66,7 @@ export default defineNuxtModule<ModuleOptions>({
         map: options.components!.map!,
       },
       headings: options.headings!,
+      highlight: options.highlight!,
     })
 
     nuxt.options.build.transpile ||= []
@@ -273,6 +274,7 @@ declare module '@nuxt/schema' {
         map: Record<string, string>
       }
       headings: ModuleOptions['headings']
+      highlight: ModuleOptions['highlight']
     }
   }
 

src/runtime/highlighter/rehype-nuxt.ts

@@ -1,5 +1,21 @@
 import type { HighlightResult, RehypeHighlightOption } from '@nuxtjs/mdc'
 import { rehypeHighlight as rehypeHighlightUniversal } from './rehype'
+import { useRuntimeConfig } from '#imports'
+
+class HighlighterError extends Error {
+  constructor(
+    message: string,
+    public readonly httpStatus?: number,
+  ) {
+    super(message)
+    this.name = 'HighlighterError'
+  }
+}
+
+function isHighlightResult(res?: HighlightResult): res is HighlightResult {
+  if (!res) return false
+  return 'tree' in res
+}
 
 const defaults: RehypeHighlightOption = {
   theme: {},
@@ -9,17 +25,32 @@ const defaults: RehypeHighlightOption = {
         return import('#mdc-highlighter').then(h => h.default(code, lang, theme, options)).catch(() => ({}))
       }
 
-      return await $fetch('/api/_mdc/highlight', {
+      if (import.meta.client) {
+        const highlight = useRuntimeConfig().public.mdc.highlight
+        if (highlight === false) {
+          return Promise.resolve({ tree: [{ type: 'text', value: code }], className: '', style: '' } as HighlightResult)
+        }
+        // https://github.com/nuxt-content/mdc/blob/690fd5359e743db04edf21bcd488f2c5292db176/src/module.ts#L78
+        if (highlight?.noApiRoute === true) {
+          return import('#mdc-highlighter').then(h => h.default(code, lang, theme, options)).catch(() => ({}))
+        }
+      }
+
+      const result = await $fetch<HighlightResult | undefined>('/api/_mdc/highlight', {
         params: {
           code,
           lang,
           theme: JSON.stringify(theme),
           options: JSON.stringify(options),
         },
       })
+      if (!isHighlightResult(result)) {
+        throw new HighlighterError(`result:${result}`)
+      }
+      return result
     }
     catch (e: any) {
-      if (import.meta.client && e?.response?.status === 404) {
+      if (import.meta.client && (e?.response?.status > 399 || e?.name == 'HighlighterError')) {
         window.sessionStorage.setItem('mdc-shiki-highlighter', 'browser')
         return this.highlighter?.(code, lang, theme, options)
       }

test/utils/parser.ts

@@ -6,6 +6,16 @@ import type { MDCParseOptions } from '../../src/types'
 import { parseMarkdown as _parseMarkDown } from '../../src/runtime/parser'
 import { stringifyMarkdown as _stringifyMarkDown } from '../../src/runtime/stringify'
 
+vi.mock('#imports', () => {
+  return {
+    useRuntimeConfig: vi.fn().mockReturnValue({
+      public: {
+        mdc: {},
+      },
+    }),
+  }
+})
+
 vi.mock('#mdc-imports', () => {
   return {
     remarkPlugins: {},