fixup! [NFY] Setup Typst syntax highlighting via WASM module (#21)

kxxt · web-flow · commit 6f8993f1eaa7 · 2025-12-03T17:52:34.000+03:00
diff --git a/build.js b/build.js
@@ -1,4 +1,5 @@
 import { build } from "esbuild";
+import { wasmLoader } from 'esbuild-plugin-wasm'
 
 await build({
   entryPoints: ["src/codemirror-bundle.js"],
@@ -11,5 +12,9 @@ await build({
   outbase: "src",
   assetNames: "[name]",
   entryNames: "codemirror",
+  plugins: [wasmLoader()],
   publicPath: "/",
+  supported: {
+    'top-level-await': true,
+  },
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "autoprefixer": "^10.4.7",
     "bulma": "^0.9.3",
     "esbuild": "^0.27.0",
+    "esbuild-plugin-wasm": "^1.1.0",
     "pagedjs": "^0.4.3",
     "pagedjs-cli": "^0.4.3",
     "postcss-cli": "^10.1.0",
diff --git a/src/codemirror-bundle.js b/src/codemirror-bundle.js
@@ -11,6 +11,7 @@ import { markdown } from "@codemirror/lang-markdown";
 import { xml } from "@codemirror/lang-xml";
 import { yaml } from "@codemirror/lang-yaml";
 import { latex } from "codemirror-lang-latex";
+import { typst } from "codemirror-lang-typst";
 
 const languageMap = {
 	// Official CodeMirror languages
@@ -22,14 +23,15 @@ const languageMap = {
 	yaml,
 	// Unofficial 3rd party languages
 	latex,
+	typst,
 	// Aliases to near-matches
 	pagedjs: html,
 	sile: latex,
 	weasyprint: html,
 	xelatex: latex,
 };
 
-window.initCodeMirror = async function (element, content, language) {
+export async function initCodeMirror(element, content, language) {
 	let polyTheme = EditorView.baseTheme({
 		"&light": {
 			backgroundColor: "#fff",
@@ -39,27 +41,12 @@ window.initCodeMirror = async function (element, content, language) {
 		},
 	});
 
-	let languageExtension = [];
-	const spec = languageMap[language];
-	if (spec) {
-		const ext = spec();
-		languageExtension = ext instanceof Promise ? await ext : ext;
-	} else if (language === "typst") {
-		console.log("Loading Typst language support");
-		try {
-			const { typst } = await import("codemirror-lang-typst");
-			languageExtension = typst();
-		} catch (e) {
-			console.warn("Failed to load Typst language support:", e);
-		}
-	}
-
 	const extensions = [
 		EditorState.readOnly.of(true),
 		polyTheme,
 		lineNumbers(),
 		syntaxHighlighting(defaultHighlightStyle),
-		languageExtension,
+		languageMap[language] ? languageMap[language]() : [],
 	];
 
 	let div = document.createElement("div");
diff --git a/templates/default.html b/templates/default.html
@@ -9,7 +9,21 @@
     <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path=config.feed_filenames[0]) }}">
     {% endblock %}
     <link rel="stylesheet" href="{{ get_url(path="main.css") }}">
-    <script type="module" src="{{ get_url(path="codemirror.js") }}"></script>
+    <script type="module">
+        import { initCodeMirror } from '{{ get_url(path="codemirror.js") }}'
+        function setupCodeMirror() {
+          document.querySelectorAll('pre.sample').forEach(async function(container) {
+              const content = container.textContent;
+              const language = container.dataset.language;
+              await initCodeMirror(container, content, language);
+          });
+        }
+        if (document.readyState === "loading") {
+          document.addEventListener('DOMContentLoaded', setupCodeMirror);
+        } else {
+          setupCodeMirror();
+        }
+    </script>
   </head>
   <body>
     <!--
@@ -27,14 +41,5 @@ <h1 class="title is-1 navbar-brand"><a href="{{ config.base_url }}">{{ config.ti
         {%- endblock %}
       </div>
     </section>
-    <script type="module">
-        document.addEventListener('DOMContentLoaded', function() {
-            document.querySelectorAll('pre.sample').forEach(async function(container) {
-                const content = container.textContent;
-                const language = container.dataset.language;
-                await window.initCodeMirror(container, content, language);
-            });
-        });
-    </script>
   </body>
 </html>
