From 7c9516a5198bb6647712f0a07b108fa9d20ae116 Mon Sep 17 00:00:00 2001 From: bdbch <6538827+bdbch@users.noreply.github.com> Date: Mon, 15 Jul 2024 14:05:47 +0200 Subject: [PATCH] fix: fix shiki setup (#5347) --- demos/package.json | 2 +- demos/preview/shiki.worker.js | 86 +++++++---------------------------- demos/vite.config.ts | 4 ++ package-lock.json | 60 +++++++++++++----------- 4 files changed, 55 insertions(+), 97 deletions(-) diff --git a/demos/package.json b/demos/package.json index 454f49bd1..c35703fcb 100644 --- a/demos/package.json +++ b/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", diff --git a/demos/preview/shiki.worker.js b/demos/preview/shiki.worker.js index 36b82d8ec..aecdb964c 100644 --- a/demos/preview/shiki.worker.js +++ b/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()) - - shiki.setOnigasmWASM(arrayBuffer) - - highlighter = await shiki.getHighlighter({ - theme, + highlighter = await shiki.createHighlighter({ + themes: ['material-theme-darker'], langs: [ - { - id: 'html', - scopeName: langHTML.scopeName, - grammar: langHTML, - embeddedLangs: ['javascript', 'css'], - }, - { - id: 'javascript', - scopeName: langJS.scopeName, - 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'], - }, + 'html', + 'js', + 'jsx', + 'ts', + 'tsx', + 'css', + 'vue-html', + 'vue', + 'scss', ], }) @@ -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 }) diff --git a/demos/vite.config.ts b/demos/vite.config.ts index 3d7ab61f6..b8739a988 100644 --- a/demos/vite.config.ts +++ b/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' } }), diff --git a/package-lock.json b/package-lock.json index 5ade1ced9..06c0626d1 100644 --- a/package-lock.json +++ b/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",