@import url("/assets/md.css")fix: split bundles, reproducible builds (hopefully)

@import url("/assets/md.css")

2 files changed, 35 insertions, 15 deletions

diff --git a/src/routes/Monaco.svelte b/src/routes/Monaco.svelte
index 409ab39..cfe9767 100644
--- a/src/routes/Monaco.svelte
+++ b/src/routes/Monaco.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import type monaco from 'monaco-editor';
   import { onDestroy, onMount } from 'svelte';
-  import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-  import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
-  import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
-  import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
-  import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+  // import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+  // import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+  // import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+  // import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+  // import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
   // @ts-ignore
   import wrqTypes from '@types/webextension-polyfill/namespaces/webRequest.d.ts?raw';
   // @ts-ignore
@@ -37,20 +37,29 @@ declare global {
   onMount(async () => {
     // @ts-ignore
     globalThis.MonacoEnvironment = {
-      getWorker: function (_moduleId: any, label: string) {
+      getWorker: async (_moduleId: any, label: string) => {
         if (label === 'json') {
-          return new jsonWorker();
-        }
-        if (label === 'css' || label === 'scss' || label === 'less') {
-          return new cssWorker();
-        }
-        if (label === 'html' || label === 'handlebars' || label === 'razor') {
-          return new htmlWorker();
+          return new (
+            await import(
+              'monaco-editor/esm/vs/language/json/json.worker?worker'
+            )
+          ).default();
         }
+        // if (label === 'css' || label === 'scss' || label === 'less') {
+        //   return new cssWorker();
+        // }
+        // if (label === 'html' || label === 'handlebars' || label === 'razor') {
+        //   return new htmlWorker();
+        // }
         if (label === 'typescript' || label === 'javascript') {
-          return new tsWorker();
+          return await (
+            await import('./ts-worker')
+          ).default;
         }
-        return new editorWorker();
+        // return new editorWorker();
+        return new (
+          await import('monaco-editor/esm/vs/editor/editor.worker?worker')
+        ).default();
       },
     };
 
diff --git a/src/routes/ts-worker.ts b/src/routes/ts-worker.ts
new file mode 100644
index 0000000..460885c
--- /dev/null
+++ b/src/routes/ts-worker.ts
@@ -0,0 +1,11 @@
+export default (async () => {
+  const contents = new TextDecoder().decode(
+    (await (await import('brotli-wasm')).default).decompress(
+      await fetch('./generated/ts-worker.js.br')
+        .then((v) => v.arrayBuffer())
+        .then((v) => new Uint8Array(v))
+    )
+  );
+  const worker = new Worker(`data:text/javascript;base64,${btoa(contents)}`);
+  return worker;
+})();