refactor: switch to shikiji

packages/devtools-kit/build.config.ts

@@ -23,7 +23,7 @@ export default defineBuildConfig({
     'hookable',
     'vite-plugin-vue-inspector',
     'error-stack-parser-es',
-    'shiki-es',
+    'shikiji',
   ],
   declaration: true,
   rollup: {

packages/devtools-kit/src/_types/client-api.ts

@@ -4,7 +4,7 @@ import type { AppConfig } from 'nuxt/schema'
 import type { NuxtApp } from 'nuxt/dist/app/nuxt'
 import type { Hookable } from 'hookable'
 import type { BirpcReturn } from 'birpc'
-import type { Lang } from 'shiki-es'
+import type { BuiltinLanguages } from 'shikiji'
 import type { ServerFunctions } from './rpc'
 import type { HookInfo, LoadingTimeMetric, PluginMetric, VueInspectorClient, VueInspectorData } from './integrations'
 import type { TimelineMetrics } from './timeline-metrics'
@@ -112,7 +112,7 @@ export interface NuxtDevtoolsHostClient {
 
 export interface NuxtDevtoolsClient {
   rpc: BirpcReturn<ServerFunctions>
-  renderCodeHighlight: (code: string, lang?: Lang) => {
+  renderCodeHighlight: (code: string, lang?: BuiltinLanguages) => {
     code: string
     supported: boolean
   }

packages/devtools-ui-kit/src/components/NCodeBlock.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 // This components requires to run in DevTools to render correctly
 import { computed, nextTick } from 'vue'
-import type { Lang } from 'shiki-es'
+import type { BuiltinLanguages } from 'shikiji'
 import { devToolsClient } from '../runtime/client'
 
 const props = withDefaults(
   defineProps<{
     code: string
-    lang?: Lang | 'text'
+    lang?: BuiltinLanguages | 'text'
     lines?: boolean
     transformRendered?: (code: string) => string
   }>(), {

packages/devtools/client/components/DataSchemaDrawer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { InputData, jsonInputForTargetLanguage, quicktype } from 'quicktype-core'
 import { all as languages } from 'quicktype-core/dist/language/All'
-import type { Lang } from 'shiki-es'
+import type { BuiltinLanguages } from 'shikiji'
 
 const input = useSchemaInput()
 
@@ -43,7 +43,7 @@ const generatedJson = computedAsync(async () => {
   return result.lines.join('\n')
 })
 
-const shikiLanguage = computed<Lang>(() => {
+const shikiLanguage = computed<BuiltinLanguages>(() => {
   const lang = selectedLang.value.toLocaleLowerCase()
   if (lang.startsWith('javascript'))
     return 'javascript'
@@ -52,7 +52,7 @@ const shikiLanguage = computed<Lang>(() => {
   else if (lang.startsWith('typescript'))
     return 'typescript'
   else
-    return lang as Lang
+    return lang as BuiltinLanguages
 })
 
 watch(options, () => {

packages/devtools/client/composables/client-services/shiki.ts

@@ -1,30 +1,34 @@
-import type { Highlighter, Lang } from 'shiki-es'
-import { getHighlighter } from 'shiki-es'
+import type { BuiltinLanguages, HighlighterCore } from 'shikiji'
+import { getHighlighterCore } from 'shikiji/core'
+import { getWasmInlined } from 'shikiji/wasm'
 
-export const shiki = ref<Highlighter>()
+export const shiki = shallowRef<HighlighterCore>()
 
 let promise: Promise<any> | null = null
 
-export function renderCodeHighlight(code: string, lang?: Lang) {
+export function renderCodeHighlight(code: string, lang: BuiltinLanguages | 'text' = 'text') {
   const mode = useColorMode()
 
   if (!promise && !shiki.value) {
     // Only loading when needed
-    promise = getHighlighter({
+    promise = getHighlighterCore({
       themes: [
-        'vitesse-dark',
-        'vitesse-light',
+        import('shikiji/themes/vitesse-dark.mjs'),
+        import('shikiji/themes/vitesse-light.mjs'),
       ],
       langs: [
-        'css',
-        'javascript',
-        'typescript',
-        'html',
-        'vue',
-        'vue-html',
-        'bash',
-        'diff',
+        import('shikiji/langs/json.mjs'),
+        import('shikiji/langs/yaml.mjs'),
+        import('shikiji/langs/css.mjs'),
+        import('shikiji/langs/javascript.mjs'),
+        import('shikiji/langs/typescript.mjs'),
+        import('shikiji/langs/vue.mjs'),
+        import('shikiji/langs/vue-html.mjs'),
+        import('shikiji/langs/html.mjs'),
+        import('shikiji/langs/diff.mjs'),
+        import('shikiji/langs/shellscript.mjs'),
       ],
+      loadWasm: getWasmInlined,
     }).then((i) => {
       shiki.value = i
     })

packages/devtools/client/modules/markdown.ts

@@ -1,7 +1,8 @@
 import { defineNuxtModule } from '@nuxt/kit'
 import Markdown from 'vite-plugin-vue-markdown'
 import LinkAttributes from 'markdown-it-link-attributes'
-import { getHighlighter } from 'shiki'
+import type { BuiltinLanguages } from 'shikiji'
+import { getHighlighter } from 'shikiji'
 
 export default defineNuxtModule({
   async setup(_, nuxt) {
@@ -24,6 +25,7 @@ export default defineNuxtModule({
         'vitesse-light',
       ],
     })
+
     nuxt.hook('vite:extendConfig', async (config) => {
       config.plugins!.push(
         Markdown({
@@ -36,9 +38,10 @@ export default defineNuxtModule({
               },
             })
             md.options.highlight = (code, lang) => {
-              const dark = highlighter.codeToHtml(code, { lang, theme: 'vitesse-dark' })
+              const _lang = (highlighter.getLoadedLanguages().includes(lang) ? lang : 'text') as BuiltinLanguages
+              const dark = highlighter.codeToHtml(code, { lang: _lang || 'text', theme: 'vitesse-dark' })
                 .replace('<pre class="shiki"', '<pre class="shiki shiki-dark"')
-              const light = highlighter.codeToHtml(code, { lang: lang || 'text', theme: 'vitesse-light' })
+              const light = highlighter.codeToHtml(code, { lang: _lang || 'text', theme: 'vitesse-light' })
                 .replace('<pre class="shiki"', '<pre class="shiki shiki-light"')
               return `<div class="shiki-container">${dark}${light}</div>`
             }

packages/devtools/package.json

@@ -106,8 +106,7 @@
     "ofetch": "^1.1.1",
     "ohash": "^1.1.2",
     "quicktype-core": "^23.0.64",
-    "shiki": "^0.14.3",
-    "shiki-es": "^0.14.0",
+    "shikiji": "^0.2.2",
     "simple-git": "^3.19.1",
     "splitpanes": "^3.1.5",
     "theme-vitesse": "^0.7.2",