feat: fix local dev so it falls back to server

alecthomas · alecthomas · commit f8a34eca468f · 2026-01-17T15:47:14.000+11:00
Previously it would always require the WASM module, requiring a full WASM compile cycle.
diff --git a/cmd/chromad/static/chroma.js b/cmd/chromad/static/chroma.js
@@ -1,8 +1,5 @@
 // chroma.js - TinyGo WASM runtime initialization for Chroma syntax highlighter
 
-// Import wasm_exec.js so that it initialises the Go WASM runtime.
-import "./wasm_exec.js";
-
 class ChromaWASM {
   constructor() {
     this.go = null;
@@ -13,7 +10,7 @@ class ChromaWASM {
 
   async init() {
     try {
-      // Create a new Go instance
+      // Create a new Go instance (wasm_exec.js already imported in initChroma)
       const go = new Go();
       WebAssembly.instantiateStreaming(fetch("./static/chroma.wasm"), go.importObject).then((result) => {
           go.run(result.instance);
@@ -70,5 +67,18 @@ export function isWasmSupported() {
   return false;
 }
 
-// Create global instance, null if WASM is not supported.
-export const chroma = isWasmSupported() ? new ChromaWASM() : null;
+async function initChroma() {
+  if (!isWasmSupported()) {
+    return null;
+  }
+
+  try {
+    await import("./wasm_exec.js");
+    return new ChromaWASM();
+  } catch (error) {
+    return null;
+  }
+}
+
+// Create global instance, null if WASM is not supported or file doesn't exist.
+export const chroma = await initChroma();
diff --git a/cmd/chromad/static/index.js b/cmd/chromad/static/index.js
@@ -1,7 +1,7 @@
 import * as Base64 from "./base64.js";
 import { chroma } from "./chroma.js";
 
-document.addEventListener("DOMContentLoaded", () => {
+function init() {
   const darkMode =
     window.matchMedia?.("(prefers-color-scheme: dark)").matches;
   const style = document.createElement("style");
@@ -25,8 +25,7 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 
   async function renderServer(formData) {
-    return (
-      await fetch("api/render", {
+    const response = await fetch("/api/render", {
         method: "POST",
         mode: "cors",
         cache: "no-cache",
@@ -38,8 +37,8 @@ document.addEventListener("DOMContentLoaded", () => {
         redirect: "follow",
         referrer: "no-referrer",
         body: JSON.stringify(formData),
-      })
-    ).json();
+      });
+    return await response.json();
   }
 
   async function renderWasm(formData) {
@@ -196,6 +195,8 @@ document.addEventListener("DOMContentLoaded", () => {
   } else if (darkMode) {
     styleSelect.value = "monokai";
     update(new Event("change"));
+  } else {
+    update(new Event("change"));
   }
 
   const eventHandler = (event) => update(event);
@@ -210,5 +211,11 @@ document.addEventListener("DOMContentLoaded", () => {
   copyButton.addEventListener("click", share);
 
   textArea.addEventListener("keydown", handleTab);
-  textArea.addEventListener("change", debouncedEventHandler);
-});
+  textArea.addEventListener("input", debouncedEventHandler);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}
