From b67fde0c1818e47cf215c5e687c332d539600f64 Mon Sep 17 00:00:00 2001
From: Spotandjake <spotandjake@hotmail.com>
Date: Fri, 21 Mar 2025 19:00:49 -0400
Subject: [PATCH] feat(demo): Run js in worker in wat2wasm demo

---
 docs/demo/wat2wasm/demo.js    | 51 +++++++++++++++++++++++------------
 docs/demo/wat2wasm/index.html |  1 +
 docs/demo/wat2wasm/worker.js  | 29 ++++++++++++++++++++
 3 files changed, 64 insertions(+), 17 deletions(-)
 create mode 100644 docs/demo/wat2wasm/worker.js

diff --git a/docs/demo/wat2wasm/demo.js b/docs/demo/wat2wasm/demo.js
index a5b7eb091c..1ad9e55e06 100644
--- a/docs/demo/wat2wasm/demo.js
+++ b/docs/demo/wat2wasm/demo.js
@@ -33,6 +33,7 @@ var outputEl = document.getElementById('output');
 var jsLogEl = document.getElementById('js_log');
 var selectEl = document.getElementById('select');
 var downloadEl = document.getElementById('download');
+var runEl = document.getElementById('run');
 var downloadLink = document.getElementById('downloadLink');
 var buildLogEl = document.getElementById('buildLog');
 var base64El = document.getElementById('base64');
@@ -49,16 +50,6 @@ for (const [f, v] of Object.entries(wabt.FEATURES)) {
   });
 }
 
-var wasmInstance = null;
-
-var wrappedConsole = Object.create(console);
-
-wrappedConsole.log = (...args) => {
-  let line = args.map(String).join('') + '\n';
-  jsLogEl.textContent += line;
-  console.log(...args);
-}
-
 var watEditor = CodeMirror((elt) => {
   document.getElementById('top-left').appendChild(elt);
 }, {
@@ -124,17 +115,33 @@ function compile() {
   }
 }
 
+let activeWorker = null;
 function run() {
+  if (activeWorker != null) stop();
+  runEl.textContent = 'Stop';
   jsLogEl.textContent = '';
   if (binaryBuffer === null) return;
-  try {
-    let wasm = new WebAssembly.Module(binaryBuffer);
-    let js = jsEditor.getValue();
-    let fn = new Function('wasmModule', 'console', js + '//# sourceURL=demo.js');
-    fn(wasm, wrappedConsole);
-  } catch (e) {
-    jsLogEl.textContent += String(e);
+  const js = jsEditor.getValue();
+  activeWorker = new Worker('./worker.js');
+  activeWorker.addEventListener('message', function(event) {
+    switch (event.data.type) {
+      case 'log':
+        jsLogEl.textContent += event.data.data;
+        break;
+      case 'done':
+        stop();
+        break;
+    }
+  });
+  activeWorker.postMessage({ binaryBuffer: binaryBuffer.buffer, js }, []);
+}
+
+function stop() {
+  if (activeWorker != null) {
+    activeWorker.terminate();
+    activeWorker = null;
   }
+  runEl.textContent = 'Run';
 }
 
 var onWatChange = debounce(compile, kCompileMinMS);
@@ -152,6 +159,14 @@ function onSelectChanged(e) {
   setExample(this.selectedIndex);
 }
 
+function onRunClicked(e) {
+  if (activeWorker != null) {
+    stop();
+  } else {
+    onJsChange();
+  }
+}
+
 function onDownloadClicked(e) {
   // See https://developer.mozilla.com/en-US/docs/Web/API/MouseEvent
   var event = new MouseEvent('click', {
@@ -179,6 +194,7 @@ function onBase64Clicked(e) {
 watEditor.on('change', onWatChange);
 jsEditor.on('change', onJsChange);
 selectEl.addEventListener('change', onSelectChanged);
+runEl.addEventListener('click', onRunClicked);
 downloadEl.addEventListener('click', onDownloadClicked);
 buildLogEl.addEventListener('click', onBuildLogClicked );
 base64El.addEventListener('click', onBase64Clicked );
@@ -191,5 +207,6 @@ for (var i = 0; i < examples.length; ++i) {
 }
 selectEl.selectedIndex = 1;
 setExample(selectEl.selectedIndex);
+runEl.classList.remove('disabled');
 
 });
diff --git a/docs/demo/wat2wasm/index.html b/docs/demo/wat2wasm/index.html
index 69919e79d6..819d537fb9 100644
--- a/docs/demo/wat2wasm/index.html
+++ b/docs/demo/wat2wasm/index.html
@@ -69,6 +69,7 @@ <h1>wat2wasm demo</h1>
             <div class="right">
               <label>example:</label>
               <select id="select" class="form-select"></select>
+              <button class="btn disabled" type="button" id="run">Run</button>
               <button class="btn disabled" type="button" id="download">Download</button>
               <a id="downloadLink" download="test.wasm" class="hidden"></a>
             </div>
diff --git a/docs/demo/wat2wasm/worker.js b/docs/demo/wat2wasm/worker.js
new file mode 100644
index 0000000000..e3acf8e45f
--- /dev/null
+++ b/docs/demo/wat2wasm/worker.js
@@ -0,0 +1,29 @@
+let wrappedConsole = Object.create(console);
+
+wrappedConsole.log = (...args) => {
+  const line = args.map(String).join('') + '\n';
+  postMessage({
+    type: "log",
+    data: line
+  });
+  console.log(...args);
+}
+
+self.onmessage = async function (event) {
+  console.log("Running WebAssembly");
+  const { binaryBuffer, js } = event.data;
+  let wasm;
+  try {
+    wasm = new WebAssembly.Module(binaryBuffer);
+  } catch (e) {
+    postMessage({
+      type: "log",
+      data: String(e)
+    });
+  }
+  const fn = new Function('wasmModule', 'console', js + '//# sourceURL=demo.js');
+  fn(wasm, wrappedConsole);
+  postMessage({
+    type: "done"
+  });
+}
\ No newline at end of file