From 16fb8864645f64e7863bbe561f9ce34c8e91cfcf Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 2 Sep 2024 12:19:59 +0800 Subject: [PATCH] refactor: use JavaScriptRegexp Engine for shiki, drop wasm --- packages/applet/package.json | 2 +- packages/chrome-extension/manifest.json | 2 +- packages/client/package.json | 2 +- packages/firefox-extension/manifest.json | 2 +- packages/ui/package.json | 2 +- packages/ui/src/composables/shiki.ts | 6 +-- pnpm-lock.yaml | 66 ++++++++++++------------ 7 files changed, 42 insertions(+), 40 deletions(-) diff --git a/packages/applet/package.json b/packages/applet/package.json index 9d848b9a8..dc8822d08 100644 --- a/packages/applet/package.json +++ b/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" }, diff --git a/packages/chrome-extension/manifest.json b/packages/chrome-extension/manifest.json index d295902c6..ba30deb3e 100644 --- a/packages/chrome-extension/manifest.json +++ b/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", diff --git a/packages/client/package.json b/packages/client/package.json index 857ddd8df..0c3566e2a 100644 --- a/packages/client/package.json +++ b/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", diff --git a/packages/firefox-extension/manifest.json b/packages/firefox-extension/manifest.json index c6e0be877..c328ee869 100644 --- a/packages/firefox-extension/manifest.json +++ b/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": { diff --git a/packages/ui/package.json b/packages/ui/package.json index b3bb488f9..8620090e2 100644 --- a/packages/ui/package.json +++ b/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" }, diff --git a/packages/ui/src/composables/shiki.ts b/packages/ui/src/composables/shiki.ts index 4bbed9527..18e037c24 100644 --- a/packages/ui/src/composables/shiki.ts +++ b/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() @@ -9,6 +8,7 @@ let promise: Promise | 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 }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3562a5f6f..2f8684888 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -183,8 +183,8 @@ importers: specifier: ^1.0.0 version: 1.0.0 shiki: - specifier: ^1.14.1 - version: 1.14.1 + specifier: ^1.16.1 + version: 1.16.1 splitpanes: specifier: ^3.1.5 version: 3.1.5 @@ -266,8 +266,8 @@ importers: specifier: ^10.0.1 version: 10.0.1 shiki: - specifier: ^1.14.1 - version: 1.14.1 + specifier: ^1.16.1 + version: 1.16.1 splitpanes: specifier: ^3.1.5 version: 3.1.5 @@ -454,7 +454,7 @@ importers: version: 5.1.2(vite@5.4.2(@types/node@20.16.1)(sass@1.77.8)(terser@5.26.0))(vue@3.4.38(typescript@5.5.4)) tsx: specifier: ^4.18.0 - version: 4.18.0 + version: 4.19.0 unbuild: specifier: ^2.0.0 version: 2.0.0(sass@1.77.8)(typescript@5.5.4) @@ -804,8 +804,8 @@ importers: specifier: ^7.5.4 version: 7.5.4 shiki: - specifier: '>=1.10.0' - version: 1.14.1 + specifier: '>=1.16.0' + version: 1.16.1 vue: specifier: '>=3.0.0-0' version: 3.4.38(typescript@5.5.4) @@ -2670,9 +2670,15 @@ packages: '@shikijs/core@1.14.1': resolution: {integrity: sha512-KyHIIpKNaT20FtFPFjCQB5WVSTpLR/n+jQXhWHWVUMm9MaOaG9BGOG0MSyt7yA4+Lm+4c9rTc03tt3nYzeYSfw==} + '@shikijs/core@1.16.1': + resolution: {integrity: sha512-aI0hBtw+a6KsJp2jcD4YuQqKpeCbURMZbhHVozDknJpm+KJqeMRkEnfBC8BaKE/5XC+uofPgCLsa/TkTk0Ba0w==} + '@shikijs/transformers@1.14.1': resolution: {integrity: sha512-JJqL8QBVCJh3L61jqqEXgFq1cTycwjcGj7aSmqOEsbxnETM9hRlaB74QuXvY/fVJNjbNt8nvWo0VwAXKvMSLRg==} + '@shikijs/vscode-textmate@9.2.0': + resolution: {integrity: sha512-5FinaOp6Vdh/dl4/yaOTh0ZeKch+rYS8DUb38V3GMKYVkdqzxw53lViRKUYkVILRiVQT7dcPC7VvAKOR73zVtQ==} + '@sideway/address@4.1.4': resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==} @@ -2864,9 +2870,6 @@ packages: '@types/eslint@8.56.10': resolution: {integrity: sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==} - '@types/eslint@9.6.0': - resolution: {integrity: sha512-gi6WQJ7cHRgZxtkQEoyHMppPjq9Kxo5Tjn2prSKDSmZrCz8TZ3jSRCeTJm+WoM+oB0WG37bRqLzaaU3q7JypGg==} - '@types/eslint@9.6.1': resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==} @@ -7594,6 +7597,9 @@ packages: shiki@1.14.1: resolution: {integrity: sha512-FujAN40NEejeXdzPt+3sZ3F2dx1U24BY2XTY01+MG8mbxCiA2XukXdcbyMyLAHJ/1AUUnQd1tZlvIjefWWEJeA==} + shiki@1.16.1: + resolution: {integrity: sha512-tCJIMaxDVB1mEIJ5TvfZU7kCPB5eo9fli5+21Olc/bmyv+w8kye3JOp+LZRmGkAyT71hrkefQhTiY+o9mBikRQ==} + side-channel@1.0.4: resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} @@ -8052,11 +8058,6 @@ packages: typescript: optional: true - tsx@4.18.0: - resolution: {integrity: sha512-a1jaKBSVQkd6yEc1/NI7G6yHFfefIcuf3QJST7ZEyn4oQnxLYrZR5uZAM8UrwUa3Ge8suiZHcNS1gNrEvmobqg==} - engines: {node: '>=18.0.0'} - hasBin: true - tsx@4.19.0: resolution: {integrity: sha512-bV30kM7bsLZKZIOCHeMNVMJ32/LuJzLVajkQI/qf92J2Qr08ueLQvW00PUZGiuLPP760UINwupgUj8qrSCPUKg==} engines: {node: '>=18.0.0'} @@ -10690,10 +10691,17 @@ snapshots: dependencies: '@types/hast': 3.0.4 + '@shikijs/core@1.16.1': + dependencies: + '@shikijs/vscode-textmate': 9.2.0 + '@types/hast': 3.0.4 + '@shikijs/transformers@1.14.1': dependencies: shiki: 1.14.1 + '@shikijs/vscode-textmate@9.2.0': {} + '@sideway/address@4.1.4': dependencies: '@hapi/hoek': 9.3.0 @@ -10870,7 +10878,7 @@ snapshots: '@types/eslint-scope@3.7.7': dependencies: - '@types/eslint': 9.6.0 + '@types/eslint': 9.6.1 '@types/estree': 1.0.5 '@types/eslint@8.56.10': @@ -10878,11 +10886,6 @@ snapshots: '@types/estree': 1.0.5 '@types/json-schema': 7.0.15 - '@types/eslint@9.6.0': - dependencies: - '@types/estree': 1.0.5 - '@types/json-schema': 7.0.15 - '@types/eslint@9.6.1': dependencies: '@types/estree': 1.0.5 @@ -13374,7 +13377,7 @@ snapshots: eslint-flat-config-utils@0.3.1: dependencies: - '@types/eslint': 9.6.0 + '@types/eslint': 9.6.1 pathe: 1.1.2 eslint-formatting-reporter@0.0.0(eslint@9.9.1(jiti@1.21.6)): @@ -13605,7 +13608,7 @@ snapshots: eslint-vitest-rule-tester@0.6.1(eslint@9.9.1(jiti@1.21.6))(typescript@5.5.4)(vitest@2.0.5(@types/node@20.16.1)(jsdom@25.0.0)(sass@1.77.8)(terser@5.26.0)): dependencies: '@antfu/utils': 0.7.10 - '@types/eslint': 9.6.0 + '@types/eslint': 9.6.1 '@typescript-eslint/utils': 8.3.0(eslint@9.9.1(jiti@1.21.6))(typescript@5.5.4) eslint: 9.9.1(jiti@1.21.6) vitest: 2.0.5(@types/node@20.16.1)(jsdom@25.0.0)(sass@1.77.8)(terser@5.26.0) @@ -16293,6 +16296,12 @@ snapshots: '@shikijs/core': 1.14.1 '@types/hast': 3.0.4 + shiki@1.16.1: + dependencies: + '@shikijs/core': 1.16.1 + '@shikijs/vscode-textmate': 9.2.0 + '@types/hast': 3.0.4 + side-channel@1.0.4: dependencies: call-bind: 1.0.2 @@ -16790,13 +16799,6 @@ snapshots: - tsx - yaml - tsx@4.18.0: - dependencies: - esbuild: 0.23.0 - get-tsconfig: 4.7.5 - optionalDependencies: - fsevents: 2.3.3 - tsx@4.19.0: dependencies: esbuild: 0.23.0 @@ -17248,7 +17250,7 @@ snapshots: dependencies: '@docsearch/css': 3.6.1 '@docsearch/js': 3.6.1(@algolia/client-search@4.22.0)(search-insights@2.13.0) - '@shikijs/core': 1.14.1 + '@shikijs/core': 1.16.1 '@shikijs/transformers': 1.14.1 '@types/markdown-it': 14.1.2 '@vitejs/plugin-vue': 5.1.2(vite@5.4.2(@types/node@20.16.1)(sass@1.77.8)(terser@5.26.0))(vue@3.4.38(typescript@5.5.4)) @@ -17259,7 +17261,7 @@ snapshots: focus-trap: 7.5.4 mark.js: 8.11.1 minisearch: 7.1.0 - shiki: 1.14.1 + shiki: 1.16.1 vite: 5.4.2(@types/node@20.16.1)(sass@1.77.8)(terser@5.26.0) vue: 3.4.38(typescript@5.5.4) optionalDependencies: