Add base64 encoding support to wat2wasm demo (#1903)

A new button is added for base64 encoding of the wasm binary.
This allows getting the binary without downloading it.

Co-authored-by: Zoltan Herczeg <hzmester@freemail.hu>

2 files changed, 33 insertions, 4 deletions

diff --git a/docs/demo/wat2wasm/demo.js b/docs/demo/wat2wasm/demo.js
index 8c0729f4..1300022b 100644
--- a/docs/demo/wat2wasm/demo.js
+++ b/docs/demo/wat2wasm/demo.js
@@ -38,12 +38,17 @@ var FEATURES = [
 ];
 
 var kCompileMinMS = 100;
+var outputShowBase64 = false;
+var outputLog;
+var outputBase64;
 
 var outputEl = document.getElementById('output');
 var jsLogEl = document.getElementById('js_log');
 var selectEl = document.getElementById('select');
 var downloadEl = document.getElementById('download');
 var downloadLink = document.getElementById('downloadLink');
+var buildLogEl = document.getElementById('buildLog');
+var base64El = document.getElementById('base64');
 var binaryBuffer = null;
 var binaryBlobUrl = null;
 
@@ -101,15 +106,19 @@ function debounce(f, wait) {
 }
 
 function compile() {
-  outputEl.textContent = '';
+  outputLog = '';
+  outputBase64 = 'Error occured, base64 output is not available';
+
   var binaryOutput;
   try {
     var module = wabt.parseWat('test.wast', watEditor.getValue(), features);
     module.resolveNames();
     module.validate(features);
     var binaryOutput = module.toBinary({log: true, write_debug_names:true});
-    outputEl.textContent = binaryOutput.log;
+    outputLog = binaryOutput.log;
     binaryBuffer = binaryOutput.buffer;
+    outputBase64 = btoa(binaryBuffer);
+
     var blob = new Blob([binaryOutput.buffer]);
     if (binaryBlobUrl) {
       URL.revokeObjectURL(binaryBlobUrl);
@@ -118,10 +127,11 @@ function compile() {
     downloadLink.setAttribute('href', binaryBlobUrl);
     downloadEl.classList.remove('disabled');
   } catch (e) {
-    outputEl.textContent += e.toString();
+    outputLog += e.toString();
     downloadEl.classList.add('disabled');
   } finally {
     if (module) module.destroy();
+    outputEl.textContent = outputShowBase64 ? outputBase64 : outputLog;
   }
 }
 
@@ -163,10 +173,26 @@ function onDownloadClicked(e) {
   downloadLink.dispatchEvent(event);
 }
 
+function onBuildLogClicked(e) {
+  outputShowBase64 = false;
+  outputEl.textContent = outputLog;
+  buildLogEl.style.textDecoration = 'underline';
+  base64El.style.textDecoration = 'none';
+}
+
+function onBase64Clicked(e) {
+  outputShowBase64 = true;
+  outputEl.textContent = outputBase64;
+  buildLogEl.style.textDecoration = 'none';
+  base64El.style.textDecoration = 'underline';
+}
+
 watEditor.on('change', onWatChange);
 jsEditor.on('change', onJsChange);
 selectEl.addEventListener('change', onSelectChanged);
 downloadEl.addEventListener('click', onDownloadClicked);
+buildLogEl.addEventListener('click', onBuildLogClicked );
+base64El.addEventListener('click', onBase64Clicked );
 
 for (var i = 0; i < examples.length; ++i) {
   var example = examples[i];
diff --git a/docs/demo/wat2wasm/index.html b/docs/demo/wat2wasm/index.html
index 2b87db8c..f2e92561 100644
--- a/docs/demo/wat2wasm/index.html
+++ b/docs/demo/wat2wasm/index.html
@@ -68,7 +68,10 @@
         </div>
         <div id="top-right" class="split split-horizontal">
           <pre id="output" class="output"></pre>
-          <div class="toolbar">BUILD LOG</div>
+          <div class="toolbar">
+            <button class="btn disabled" type="button" id="buildLog" style="text-decoration: underline">BUILD LOG</button>
+            <button class="btn disabled" type="button" id="base64">BASE64</button>
+          </div>
         </div>
       </div>
       <div id="bottom-row" class="split-vertical">