refactor: use JavaScriptRegexp Engine for shiki, drop wasm (#592)

Author: alexzhang1030

packages/applet/package.json

@@ -35,7 +35,7 @@
     "@vue/devtools-ui": "workspace:^",
     "lodash-es": "^4.17.21",
     "perfect-debounce": "^1.0.0",
-    "shiki": "^1.14.1",
+    "shiki": "^1.16.1",
     "splitpanes": "^3.1.5",
     "vue-virtual-scroller": "2.0.0-beta.8"
   },

packages/chrome-extension/manifest.json

@@ -33,7 +33,7 @@
     }
   ],
   "content_security_policy": {
-    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
+    "extension_pages": "script-src 'self'; object-src 'self'"
   },
   "description": "DevTools browser extension for Vue.js",
   "devtools_page": "pages/devtools-background.html",

packages/client/package.json

@@ -36,7 +36,7 @@
     "fast-deep-equal": "^3.1.3",
     "fuse.js": "^7.0.0",
     "minimatch": "^10.0.1",
-    "shiki": "^1.14.1",
+    "shiki": "^1.16.1",
     "splitpanes": "^3.1.5",
     "vis-network": "^9.1.9",
     "vite-hot-client": "^0.2.3",

packages/firefox-extension/manifest.json

@@ -34,7 +34,7 @@
       "run_at": "document_idle"
     }
   ],
-  "content_security_policy": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'",
+  "content_security_policy": "script-src 'self'; object-src 'self'",
   "description": "DevTools browser extension for Vue.js",
   "devtools_page": "devtools-background.html",
   "icons": {

packages/ui/package.json

@@ -33,7 +33,7 @@
   "peerDependencies": {
     "@unocss/reset": ">=0.50.0-0",
     "floating-vue": ">=2.0.0-0",
-    "shiki": ">=1.10.0",
+    "shiki": ">=1.16.0",
     "unocss": ">=0.50.0-0",
     "vue": ">=3.0.0-0"
   },

packages/ui/src/composables/shiki.ts

@@ -1,6 +1,5 @@
 import type { BuiltinLanguage, HighlighterCore } from 'shiki'
-import { createHighlighterCore } from 'shiki/core'
-import getWasm from 'shiki/wasm'
+import { createHighlighterCore, createJavaScriptRegexEngine } from 'shiki/core'
 import { shallowRef } from 'vue'
 
 export const shiki = shallowRef<HighlighterCore>()
@@ -9,6 +8,7 @@ let promise: Promise<any> | null = null
 
 export function renderCodeHighlight(code: string, lang: BuiltinLanguage | 'text' = 'text') {
   if (!promise && !shiki.value) {
+    const jsEngine = createJavaScriptRegexEngine()
     // Only loading when needed
     promise = createHighlighterCore({
       themes: [
@@ -27,7 +27,7 @@ export function renderCodeHighlight(code: string, lang: BuiltinLanguage | 'text'
         import('shiki/langs/diff.mjs'),
         import('shiki/langs/shellscript.mjs'),
       ],
-      loadWasm: getWasm,
+      engine: jsEngine,
     }).then((i) => {
       shiki.value = i
     })