fix: fix shiki setup (#5347)

demos/package.json

@@ -18,7 +18,7 @@
     "lexical": "^0.11.1",
     "lowlight": "^2.7.0",
     "remixicon": "^2.5.0",
-    "shiki": "^0.10.0",
+    "shiki": "^1.10.3",
     "simplify-js": "^1.2.4",
     "y-prosemirror": "^1.2.9",
     "y-webrtc": "^10.3.0",

demos/preview/shiki.worker.js

@@ -1,15 +1,4 @@
 import * as shiki from 'shiki'
-import onigasm from 'shiki/dist/onig.wasm?url'
-import langCSS from 'shiki/languages/css.tmLanguage.json'
-import langHTML from 'shiki/languages/html.tmLanguage.json'
-import langJS from 'shiki/languages/javascript.tmLanguage.json'
-import langJSX from 'shiki/languages/jsx.tmLanguage.json'
-import langSCSS from 'shiki/languages/scss.tmLanguage.json'
-import langTSX from 'shiki/languages/tsx.tmLanguage.json'
-import langTS from 'shiki/languages/typescript.tmLanguage.json'
-import langVue from 'shiki/languages/vue.tmLanguage.json'
-import langVueHTML from 'shiki/languages/vue-html.tmLanguage.json'
-import theme from 'shiki/themes/material-darker.json'
 
 let highlighter = null
 
@@ -18,64 +7,18 @@ async function init() {
     return highlighter
   }
 
-  const arrayBuffer = await fetch(onigasm).then(response => response.arrayBuffer())
+  highlighter = await shiki.createHighlighter({
-
+    themes: ['material-theme-darker'],
-  shiki.setOnigasmWASM(arrayBuffer)
-
-  highlighter = await shiki.getHighlighter({
-    theme,
     langs: [
-      {
+      'html',
-        id: 'html',
+      'js',
-        scopeName: langHTML.scopeName,
+      'jsx',
-        grammar: langHTML,
+      'ts',
-        embeddedLangs: ['javascript', 'css'],
+      'tsx',
-      },
+      'css',
-      {
+      'vue-html',
-        id: 'javascript',
+      'vue',
-        scopeName: langJS.scopeName,
+      'scss',
-        grammar: langJS,
-        aliases: ['js'],
-      },
-      {
-        id: 'jsx',
-        scopeName: langJSX.scopeName,
-        grammar: langJSX,
-      },
-      {
-        id: 'typescript',
-        scopeName: langTS.scopeName,
-        grammar: langTS,
-        aliases: ['ts'],
-      },
-      {
-        id: 'tsx',
-        scopeName: langTSX.scopeName,
-        grammar: langTSX,
-      },
-      {
-        id: 'vue-html',
-        scopeName: langVueHTML.scopeName,
-        grammar: langVueHTML,
-        embeddedLangs: ['vue', 'javascript'],
-      },
-      {
-        id: 'vue',
-        scopeName: langVue.scopeName,
-        grammar: langVue,
-        embeddedLangs: ['json', 'markdown', 'pug', 'haml', 'vue-html', 'sass', 'scss', 'less', 'stylus', 'postcss', 'css', 'typescript', 'coffee', 'javascript'],
-      },
-      {
-        id: 'css',
-        scopeName: langCSS.scopeName,
-        grammar: langCSS,
-      },
-      {
-        id: 'scss',
-        scopeName: langSCSS.scopeName,
-        grammar: langSCSS,
-        embeddedLangs: ['css'],
-      },
     ],
   })
 
@@ -84,9 +27,12 @@ async function init() {
 
 // eslint-disable-next-line
 self.addEventListener('message', async event => {
-  init().then(() => {
+  init().then(async () => {
     const { code, language } = event.data
-    const html = highlighter.codeToHtml(code, language)
+
+    await highlighter.loadLanguage(language)
+
+    const html = highlighter.codeToHtml(code, { lang: language, theme: 'material-theme-darker' })
 
     // eslint-disable-next-line
     self.postMessage({ code, language, html })

demos/vite.config.ts

@@ -65,6 +65,10 @@ export default defineConfig({
     },
   },
 
+  worker: {
+    format: 'es',
+  },
+
   plugins: [
     // checker({ typescript: { tsconfigPath: './tsconfig.base.json' } }),
     // checker({ typescript: { tsconfigPath: './tsconfig.react.json' } }),

package-lock.json

@@ -62,7 +62,7 @@
         "lexical": "^0.11.1",
         "lowlight": "^2.7.0",
         "remixicon": "^2.5.0",
-        "shiki": "^0.10.0",
+        "shiki": "^1.10.3",
         "simplify-js": "^1.2.4",
         "y-prosemirror": "^1.2.9",
         "y-webrtc": "^10.3.0",
@@ -114,6 +114,14 @@
         "yjs": "^13.6.8"
       }
     },
+    "demos/node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "demos/node_modules/@vitejs/plugin-vue": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.5.tgz",
@@ -607,6 +615,15 @@
         "node": ">=10"
       }
     },
+    "demos/node_modules/shiki": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.10.3.tgz",
+      "integrity": "sha512-eneCLncGuvPdTutJuLyUGS8QNPAVFO5Trvld2wgEq1e002mwctAhJKeMGWtWVXOIEzmlcLRqcgPSorR6AVzOmQ==",
+      "dependencies": {
+        "@shikijs/core": "1.10.3",
+        "@types/hast": "^3.0.4"
+      }
+    },
     "demos/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -5016,6 +5033,22 @@
         "win32"
       ]
     },
+    "node_modules/@shikijs/core": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.10.3.tgz",
+      "integrity": "sha512-D45PMaBaeDHxww+EkcDQtDAtzv00Gcsp72ukBtaLSmqRvh0WgGMq3Al0rl1QQBZfuneO75NXMIzEZGFitThWbg==",
+      "dependencies": {
+        "@types/hast": "^3.0.4"
+      }
+    },
+    "node_modules/@shikijs/core/node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@sveltejs/vite-plugin-svelte": {
       "version": "2.5.3",
       "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.5.3.tgz",
@@ -11375,11 +11408,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/jsonc-parser": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
-      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
-    },
     "node_modules/jsondiffpatch": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/jsondiffpatch/-/jsondiffpatch-0.4.1.tgz",
@@ -14954,16 +14982,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/shiki": {
-      "version": "0.10.1",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.10.1.tgz",
-      "integrity": "sha512-VsY7QJVzU51j5o1+DguUd+6vmCmZ5v/6gYu4vyYAhzjuNQU6P/vmSy4uQaOhvje031qQMiW0d2BwgMH52vqMng==",
-      "dependencies": {
-        "jsonc-parser": "^3.0.0",
-        "vscode-oniguruma": "^1.6.1",
-        "vscode-textmate": "5.2.0"
-      }
-    },
     "node_modules/side-channel": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
@@ -17232,16 +17250,6 @@
       "integrity": "sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA==",
       "dev": true
     },
-    "node_modules/vscode-oniguruma": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz",
-      "integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA=="
-    },
-    "node_modules/vscode-textmate": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-5.2.0.tgz",
-      "integrity": "sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ=="
-    },
     "node_modules/vscode-uri": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",