[Feature] Offline usage

src/lib/components/LamyDebugbar.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { onMount, afterUpdate } from "svelte"
+    import { onMount, afterUpdate, tick } from "svelte"
     import Shiki, { defaultHighlighterOptions } from "$lib/shiki.js"
     /**
      * Using Twind in library mode
@@ -18,6 +18,8 @@
     export let noIcon = false
     /** @type {any} */
     export let customTheme = undefined
+    /** @type {Boolean} */
+    export let offline = false
 
     let shiki = Shiki
     /** @type {import('shiki-es').IShikiTheme | undefined} */
@@ -138,6 +140,15 @@
     }
 
     onMount(async () => {
+        // wait for offline prop to populate from localStorage
+        // in most cases we don't need doing this as users would
+        // only need to set offline prop either true or false
+        await tick()
+        if (offline) {
+            const wasm = await fetch('shiki/onig.wasm')
+            shiki.setWasm(wasm)
+            shiki.setCDN('shiki/')
+        }
         await shiki.getHighlighter(highlighter)
         if (customTheme) {
             await loadCustomTheme(customTheme)

src/lib/components/LamyDebugbar.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         highlighter?: import("shiki-es").HighlighterOptions | undefined;
         noIcon?: boolean;
         customTheme?: any;
+        offline?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -23,6 +24,7 @@ export default class LamyDebugbar extends SvelteComponent<{
     highlighter?: import("shiki-es").HighlighterOptions | undefined;
     noIcon?: boolean;
     customTheme?: any;
+    offline?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {

src/lib/shiki.js

@@ -1,5 +1,4 @@
-import { getHighlighter, toShikiTheme, renderToHtml } from 'shiki-es'
-// import { readFile } from 'fs/promises'
+import { getHighlighter, toShikiTheme, renderToHtml, setCDN, setWasm } from 'shiki-es'
 
 /**
  * Host the onig.wasm file, loading from CDN is slow af
@@ -57,6 +56,36 @@ class Shiki {
         this.highlighter = await getHighlighter(Object.assign(defaultHighlighterOptions, highlighterOptions))
         return this.highlighter
     }
+
+    /**
+     * Set the route for loading the assets
+     * 
+     * URL should end with `/`
+     * 
+     * For example:
+     * ```js
+     * setCDN('https://unpkg.com/shiki/') // use unpkg
+     * setCDN('/assets/shiki/') // serve by yourself
+     * ```
+     * 
+     * @param {String} root 
+     * @returns {void}
+     */
+    setCDN(root) {
+        setCDN(root)
+    }
+
+    /**
+     * Explicitly set the source for loading the oniguruma web assembly module.
+     * 
+     * Accepts ArrayBuffer or Response (usage of string is deprecated)
+     * 
+     * @param {ArrayBuffer | Response} data 
+     * @returns {void}
+     */
+    setWasm(data) {
+        setWasm(data)
+    }
 }
 
 export default new Shiki()