refactor(Shiki): prepare Shiki highlighter for external usage (#1720)

docs/components/content/Playground.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref, useAsyncData, shallowRef, computed, onMounted, watch, useRoute } from '#imports'
-import { parse } from '../../../src/runtime/markdown-parser'
-import { useShiki } from '../../editor/useShiki.ts'
+import { transformContent } from '../../../src/runtime/transformers'
 
 const INITIAL_CODE = `---
 title: MDC
@@ -32,32 +31,15 @@ This syntax supercharges regular Markdown to write documents interacting deeply
   ::
 ::
 `
-const shiki = await useShiki()
+
 const route = useRoute()
 
 const content = ref(route.query.content || INITIAL_CODE)
 
 const { data: doc, refresh } = await useAsyncData('playground-' + content.value, async () => {
   try {
-    // const startParse = Date.now()
-    let parsed = await parse(content.value)
-    // const startHighlight = Date.now()
-    parsed = await shiki(parsed)
-
-    // console.log(`Parsed: ${startHighlight - startParse}ms, Highlighted: ${Date.now() - startHighlight}ms`)
-
-    return {
-      _id: 'content:index.md',
-      _path: '/',
-      _file: 'index.md',
-      _extension: 'md',
-      _draft: false,
-      _type: 'markdown',
-      updatedAt: new Date().toISOString(),
-      ...parsed.meta || {},
-      ...parsed,
-      meta: undefined
-    }
+    const parsed = await transformContent('content:index.md', content.value)
+    return parsed
   } catch (e) {
     return doc.value
   }

docs/editor/Editor.vue

@@ -24,7 +24,7 @@ const raw = ref(props.modelValue)
 
 const emit = defineEmits(['update:modelValue'])
 
-function update (content) {
+function update (content: string) {
   emit('update:modelValue', content)
 }
 </script>

src/module.ts

@@ -465,22 +465,6 @@ export default defineNuxtModule<ModuleOptions>({
       addImports({ name: 'navigationDisabled', as: 'fetchContentNavigation', from: resolveRuntimeModule('./composables/utils') })
     }
 
-    // Register highlighter
-    if (options.highlight) {
-      contentContext.transformers.push(resolveRuntimeModule('./transformers/shiki'))
-      // @ts-ignore
-      contentContext.highlight.apiURL = `${options.api.baseURL}/highlight`
-
-      nuxt.hook('nitro:config', (nitroConfig) => {
-        nitroConfig.handlers = nitroConfig.handlers || []
-        nitroConfig.handlers.push({
-          method: 'post',
-          route: `${options.api.baseURL}/highlight`,
-          handler: resolveRuntimeModule('./server/api/highlight')
-        })
-      })
-    }
-
     // Register document-driven
     if (options.documentDriven) {
       // Enable every feature by default

src/runtime/server/storage.ts

@@ -66,7 +66,7 @@ const contentIgnorePredicate = (key: string) => {
 }
 
 export const getContentsIds = async (event: H3Event, prefix?: string) => {
-  let keys = []
+  let keys: string[] = []
 
   if (isProduction) {
     keys = await cacheParsedStorage.getKeys(prefix)

src/runtime/transformers/index.ts

@@ -5,17 +5,19 @@ import csv from './csv'
 import markdown from './markdown'
 import yaml from './yaml'
 import pathMeta from './path-meta'
+import shiki from './shiki'
 import json from './json'
 
 const TRANSFORMERS = [
   csv,
   markdown,
   json,
   yaml,
+  shiki,
   pathMeta
 ]
 
-function getParser (ext, additionalTransformers: ContentTransformer[] = []): ContentTransformer | undefined {
+function getParser (ext: string, additionalTransformers: ContentTransformer[] = []): ContentTransformer | undefined {
   let parser = additionalTransformers.find(p => ext.match(new RegExp(p.extensions.join('|'), 'i')) && p.parse)
   if (!parser) {
     parser = TRANSFORMERS.find(p => ext.match(new RegExp(p.extensions.join('|'), 'i')) && p.parse)
@@ -24,7 +26,7 @@ function getParser (ext, additionalTransformers: ContentTransformer[] = []): Con
   return parser
 }
 
-function getTransformers (ext, additionalTransformers: ContentTransformer[] = []) {
+function getTransformers (ext: string, additionalTransformers: ContentTransformer[] = []) {
   return [
     ...additionalTransformers.filter(p => ext.match(new RegExp(p.extensions.join('|'), 'i')) && p.transform),
     ...TRANSFORMERS.filter(p => ext.match(new RegExp(p.extensions.join('|'), 'i')) && p.transform)
@@ -34,7 +36,7 @@ function getTransformers (ext, additionalTransformers: ContentTransformer[] = []
 /**
  * Parse content file using registered plugins
  */
-export async function transformContent (id, content, options: TransformContentOptions = {}) {
+export async function transformContent (id: string, content: string, options: TransformContentOptions = {}) {
   const { transformers = [] } = options
   // Call hook before parsing the file
   const file = { _id: id, body: content }
@@ -54,8 +56,14 @@ export async function transformContent (id, content, options: TransformContentOp
   const result = await matchedTransformers.reduce(async (prev, cur) => {
     const next = (await prev) || parsed
 
-    const transformOptions = options[camelCase(cur.name)] || {}
-    return cur.transform!(next, transformOptions)
+    const transformOptions = options[camelCase(cur.name)]
+
+    // disable transformer if options is false
+    if (transformOptions === false) {
+      return next
+    }
+
+    return cur.transform!(next, transformOptions || {})
   }, Promise.resolve(parsed))
 
   return result