demos: move shiki to worker

demos/preview/Shiki.vue

@@ -4,18 +4,7 @@
 </template>
 
 <script>
-import * as shiki from 'shiki'
+import Worker from './shiki.worker?worker'
-import onigasm from 'shiki/dist/onigasm.wasm?url'
-import theme from 'shiki/themes/material-darker.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 langTS from 'shiki/languages/typescript.tmLanguage.json'
-import langTSX from 'shiki/languages/tsx.tmLanguage.json'
-import langVueHTML from 'shiki/languages/vue-html.tmLanguage.json'
-import langVue from 'shiki/languages/vue.tmLanguage.json'
-import langCSS from 'shiki/languages/css.tmLanguage.json'
-import langSCSS from 'shiki/languages/scss.tmLanguage.json'
 
 export default {
   props: {
@@ -32,6 +21,7 @@ export default {
 
   data() {
     return {
+      worker: new Worker(),
       html: null,
       highlighter: window?.highlighter,
     }
@@ -55,88 +45,19 @@ export default {
 
   methods: {
     render() {
-      try {
+      this.worker.postMessage({
-        requestAnimationFrame(() => {
+        code: this.code,
-          this.html = this.highlighter?.codeToHtml(this.code, this.language)
+        language: this.language,
       })
-      } catch {
-        console.warn(`[shiki]: missing language: ${this.language}`)
-      }
-    },
-
-    async initHighlighter() {
-      if (window.highlighter) {
-        return
-      }
-
-      const arrayBuffer = await fetch(onigasm).then(response => response.arrayBuffer())
-
-      shiki.setOnigasmWASM(arrayBuffer)
-
-      const highlighter = await shiki.getHighlighter({
-        theme,
-        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'],
-          },
-        ],
-      })
-
-      window.highlighter = highlighter
-      this.highlighter = highlighter
     },
   },
 
   created() {
-    this.initHighlighter()
+    this.worker.addEventListener('message', event => {
+      const { html } = event.data
+
+      this.html = html
+    })
   },
 }
 </script>

demos/preview/shiki.worker.js

@@ -0,0 +1,92 @@
+import * as shiki from 'shiki'
+import onigasm from 'shiki/dist/onigasm.wasm?url'
+import theme from 'shiki/themes/material-darker.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 langTS from 'shiki/languages/typescript.tmLanguage.json'
+import langTSX from 'shiki/languages/tsx.tmLanguage.json'
+import langVueHTML from 'shiki/languages/vue-html.tmLanguage.json'
+import langVue from 'shiki/languages/vue.tmLanguage.json'
+import langCSS from 'shiki/languages/css.tmLanguage.json'
+import langSCSS from 'shiki/languages/scss.tmLanguage.json'
+
+let highlighter = null
+
+async function init() {
+  if (highlighter) {
+    return highlighter
+  }
+
+  const arrayBuffer = await fetch(onigasm).then(response => response.arrayBuffer())
+
+  shiki.setOnigasmWASM(arrayBuffer)
+
+  highlighter = await shiki.getHighlighter({
+    theme,
+    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'],
+      },
+    ],
+  })
+
+  return highlighter
+}
+
+self.addEventListener('message', async event => {
+  init().then(() => {
+    const { code, language } = event.data
+    const html = highlighter.codeToHtml(code, language)
+
+    self.postMessage({ code, language, html })
+  })
+})