feat(demo): Run js in worker in wat2wasm demo

Author: spotandjake

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,20 @@ function compile() {
   }
 }
 
+let activeWorker = null;
 function run() {
+  runEl.classList.add('disabled');
   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();
+  if (activeWorker != null) activeWorker.terminate();
+  activeWorker = new Worker('./worker.js');
+  activeWorker.addEventListener('message', function(event) {
+    if (event.data.type !== 'log') return;
+    jsLogEl.textContent += event.data.data;
+  });
+  activeWorker.postMessage({ binaryBuffer: binaryBuffer.buffer, js }, []);
+  runEl.classList.remove('disabled');
 }
 
 var onWatChange = debounce(compile, kCompileMinMS);
@@ -152,6 +146,10 @@ function onSelectChanged(e) {
   setExample(this.selectedIndex);
 }
 
+function onRunClicked(e) {
+  onJsChange();
+}
+
 function onDownloadClicked(e) {
   // See https://developer.mozilla.com/en-US/docs/Web/API/MouseEvent
   var event = new MouseEvent('click', {
@@ -179,6 +177,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 +190,6 @@ for (var i = 0; i < examples.length; ++i) {
 }
 selectEl.selectedIndex = 1;
 setExample(selectEl.selectedIndex);
+runEl.classList.remove('disabled');
 
 });

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>

docs/demo/wat2wasm/worker.js

@@ -0,0 +1,26 @@
+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 = 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);
+}