perf(devtools): optimize shiki bundle size

Author: harlan-zw

Diff for: client/composables/shiki.ts

@@ -1,34 +1,29 @@
-import type { Highlighter, Lang } from 'shiki'
-import { getHighlighter } from 'shiki'
+import type { HighlighterCore } from 'shiki'
+import { createHighlighterCore } from 'shiki/core'
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
 import { computed, ref, toValue } from 'vue'
 import type { MaybeRef } from '@vueuse/core'
 import { devtools } from './rpc'
 
-export const shiki = ref<Highlighter>()
+export const shiki = ref<HighlighterCore>()
 
 export function loadShiki() {
   // Only loading when needed
-  return getHighlighter({
+  return createHighlighterCore({
     themes: [
-      'vitesse-dark',
-      'vitesse-light',
+      import('@shikijs/themes/vitesse-light'),
+      import('@shikijs/themes/vitesse-dark'),
     ],
     langs: [
-      'css',
-      'javascript',
-      'typescript',
-      'html',
-      'vue',
-      'vue-html',
-      'bash',
-      'diff',
+      import('@shikijs/langs/json'),
     ],
+    engine: createJavaScriptRegexEngine(),
   }).then((i) => {
     shiki.value = i
   })
 }
 
-export function renderCodeHighlight(code: MaybeRef<string>, lang?: Lang) {
+export function renderCodeHighlight(code: MaybeRef<string>, lang: 'json') {
   return computed(() => {
     const colorMode = devtools.value?.colorMode || 'light'
     return shiki.value!.codeToHtml(toValue(code), {