chore: upgrade shiki v3 (#349)

Author: farnabaz

package.json

@@ -68,11 +68,12 @@
     "lint": "eslint .",
     "typecheck": "nuxt typecheck",
     "test": "vitest run",
-    "test:watch": "vitest watch"
+    "test:watch": "vitest watch",
+    "verify": "npm run dev:prepare && npm run lint && npm run test && npm run typecheck"
   },
   "dependencies": {
     "@nuxt/kit": "^3.15.2",
-    "@shikijs/transformers": "^1.27.2",
+    "@shikijs/transformers": "^3.0.0",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.4",
     "@vue/compiler-core": "^3.5.13",
@@ -105,7 +106,7 @@
     "remark-rehype": "^11.1.1",
     "remark-stringify": "^11.0.0",
     "scule": "^1.3.0",
-    "shiki": "^1.27.2",
+    "shiki": "^3.0.0",
     "ufo": "^1.5.4",
     "unified": "^11.0.5",
     "unist-builder": "^4.0.0",

playground/nuxt.config.ts

@@ -14,7 +14,7 @@ export default defineNuxtConfig({
         default: 'vitesse-light',
         dark: 'material-theme-palenight'
       },
-      shikiEngine: 'javascript',
+      shikiEngine: 'oniguruma',
       preload: [
         'sql'
       ]

playground/pages/index.vue

@@ -51,7 +51,7 @@ onMounted(() => {
         <Editor v-model:code="source" class="flex-1" />
         <!-- MDC AST -->
         <code class="text-xs px-2 py-1">MDC AST</code>
-        <Editor :code="JSON.stringify(ast?.body, null, 2)" language="json" class="flex-1" read-only />
+        <Editor :code="JSON.stringify(ast?.body, null, 2) || ''" language="json" class="flex-1" read-only />
       </div>
       <div class="flex-1 h-full flex flex-col  border-2 border-neutral-900">
         <code class="text-xs px-2 py-1">Source -> MDC -> Render</code>

pnpm-lock.yaml

@@ -1,5 +1,5 @@
 import type { CodeToHastOptions } from 'shiki/core'
-import type { HighlighterCore, LanguageInput, ShikiTransformer, ThemeInput, RegexEngine } from 'shiki'
+import { type HighlighterCore, type LanguageInput, type ShikiTransformer, type ThemeInput, type RegexEngine, createJavaScriptRegexEngine } from 'shiki'
 import type { Element } from 'hast'
 import type { MdcConfig, Highlighter } from '@nuxtjs/mdc'
 
@@ -39,7 +39,7 @@ export function createShikiHighlighter({
     const shiki: HighlighterCore = await createHighlighterCore({
       langs,
       themes,
-      engine
+      engine: engine || createJavaScriptRegexEngine()
     })
 
     for await (const config of await getConfigs()) {

src/runtime/highlighter/shiki.ts

@@ -75,7 +75,7 @@ export async function mdcHighlighter({
       'import { getMdcConfigs } from \'#mdc-configs\'',
       shikiEngine === 'javascript'
         ? 'import { createJavaScriptRegexEngine } from \'shiki/engine/javascript\''
-        : 'import { createWasmOnigEngine } from \'shiki/engine/oniguruma\'',
+        : 'import { createOnigurumaEngine } from \'shiki/engine/oniguruma\'',
       code,
       'const bundledLangs = {',
       ...Array.from(langsMap.entries())
@@ -94,7 +94,7 @@ export async function mdcHighlighter({
       }),
       shikiEngine === 'javascript'
         ? 'const engine = createJavaScriptRegexEngine({ forgiving: true })'
-        : `const engine = createWasmOnigEngine(() => import('shiki/wasm'))`,
+        : `const engine = createOnigurumaEngine(() => import('shiki/wasm'))`,
       'const highlighter = createShikiHighlighter({ bundledLangs, bundledThemes, options, getMdcConfigs, engine })',
       'export default highlighter'
     ].join('\n')

src/templates/mdc-highlighter.ts

@@ -1,5 +1,5 @@
 import { vi } from 'vitest'
-import { createWasmOnigEngine } from 'shiki/engine/oniguruma'
+import { createOnigurumaEngine } from 'shiki/engine/oniguruma'
 import { createShikiHighlighter } from '../../src/runtime/highlighter/shiki'
 import { rehypeHighlight } from '../../src/runtime/highlighter/rehype-nuxt'
 import type { MDCParseOptions } from '../../src/types'
@@ -35,7 +35,7 @@ export const parseMarkdown = (md: string, options: MDCParseOptions = {}) => {
       ],
       options: {},
       getMdcConfigs: async () => [],
-      engine: createWasmOnigEngine(import('shiki/wasm'))
+      engine: createOnigurumaEngine(import('shiki/wasm'))
     })
 
     options.highlight.highlighter = highlighter