From 91959bd1c7c23942de39716944cdd41100ea6fab Mon Sep 17 00:00:00 2001
From: MaxGraey <maxgraey@gmail.com>
Date: Sun, 21 Nov 2021 14:45:47 +0200
Subject: [PATCH 1/3] auto recompile when option changed

---
 src/.vuepress/public/editor.html | 62 +++++++++++++++++++-------------
 1 file changed, 37 insertions(+), 25 deletions(-)

diff --git a/src/.vuepress/public/editor.html b/src/.vuepress/public/editor.html
index 5388f232a..66a0b75df 100644
--- a/src/.vuepress/public/editor.html
+++ b/src/.vuepress/public/editor.html
@@ -550,6 +550,13 @@ <h5>Documentation</h5>
         }
       }, { passive: false })
 
+      document.querySelectorAll('input[id][type="checkbox"],input[id][type="radio"]').forEach(input => {
+        input.addEventListener('change', e => {
+          const activePane = document.querySelector('.tab.active')
+          recompile(activePane.id)
+        })
+      })
+
       // Make tabs switchable
       document.querySelectorAll('.tab').forEach(element => {
         element.addEventListener('click', () => {
@@ -558,31 +565,35 @@ <h5>Documentation</h5>
           document.querySelectorAll('.pane').forEach(element => element.classList.remove('active'))
           const pane = document.getElementById(element.id.substring(0, element.id.length - 3))
           pane.classList.add('active')
-          if (element.id == 'binaryTab') {
-            binaryEditor.setValue('(module\n 🚀\n)\n')
-            setTimeout(() => {
-              compile()
-            }, 10)
-          } else if (element.id == 'playTab') {
-            function serialize() {
-              return 'data:text/html;base64,' + btoa([
-                '<script src="https://cdn.jsdelivr.net/npm/@assemblyscript/loader/umd/index.js"><', '/script>',
-                '<script>var module_wasm=new Uint8Array([', module_wasm.join(','), ']);<', '/script>\n\n',
-                htmlEditor.getValue().trimRight()
-              ].join(''))
-            }
-            if (didCompile) {
-              playFrame.src = serialize()
-            } else {
-              playFrame.src = 'data:text/html;base64,Q29tcGlsaW5nLi4u' // Compiling...
-              compile(() => {
-                playFrame.src = serialize()
-              })
-            }
-          }
+          recompile(element.id)
         })
       })
 
+      function recompile(id) {
+        if (id == 'binaryTab') {
+          binaryEditor.setValue('(module\n 🚀\n)\n')
+          setTimeout(() => {
+            compile()
+          }, 10)
+        } else if (id == 'playTab') {
+          function serialize() {
+            return 'data:text/html;base64,' + btoa([
+              '<script src="https://cdn.jsdelivr.net/npm/@assemblyscript/loader/umd/index.js"><', '/script>',
+              '<script>var module_wasm=new Uint8Array([', module_wasm.join(','), ']);<', '/script>\n\n',
+              htmlEditor.getValue().trimRight()
+            ].join(''))
+          }
+          if (didCompile) {
+            playFrame.src = serialize()
+          } else {
+            playFrame.src = 'data:text/html;base64,Q29tcGlsaW5nLi4u' // Compiling...
+            compile(() => {
+              playFrame.src = serialize()
+            })
+          }
+        }
+      }
+
       // Make options clickable
       let optionsVisible = false
       function toggleOptions(evt) {
@@ -599,10 +610,11 @@ <h5>Documentation</h5>
       document.querySelector('#tabs').addEventListener('click', () => {
         if (optionsVisible) toggleOptions(null)
       })
-      Array.prototype.slice.call(document.querySelectorAll('.pane'))
-        .map(pane => pane.addEventListener('click', () => {
+      document.querySelectorAll('.pane').forEach(pane => {
+        pane.addEventListener('click', () => {
           if (optionsVisible) toggleOptions(null)
-        }))
+        })
+      })
 
       // Make contents shareable
       let clipboardTimer = null

From 9c85b1ae916558171c6cb33418aa7f56e9c18496 Mon Sep 17 00:00:00 2001
From: MaxGraey <maxgraey@gmail.com>
Date: Sun, 21 Nov 2021 18:02:07 +0200
Subject: [PATCH 2/3] add debaunce

---
 src/.vuepress/public/editor.html | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/.vuepress/public/editor.html b/src/.vuepress/public/editor.html
index 66a0b75df..f32474ffe 100644
--- a/src/.vuepress/public/editor.html
+++ b/src/.vuepress/public/editor.html
@@ -421,6 +421,7 @@ <h5>Documentation</h5>
     var module_wat = '(module)\n'
     var module_wasm = new Uint8Array([0, 97, 115, 109, 1, 0, 0, 0])
     var didCompile = false
+    var compilingTimeout = null
 
     require([
       'vs/editor/editor.main',
@@ -550,11 +551,21 @@ <h5>Documentation</h5>
         }
       }, { passive: false })
 
+      function debounce(fn, delay = 1500) {
+        let timeout
+        return function (...args) {
+          clearTimeout(timeout)
+          timeout = setTimeout(() => {
+            fn.call(this, ...args)
+          }, delay)
+        }
+      }
+
       document.querySelectorAll('input[id][type="checkbox"],input[id][type="radio"]').forEach(input => {
-        input.addEventListener('change', e => {
+        input.addEventListener('change', debounce(e => {
           const activePane = document.querySelector('.tab.active')
           recompile(activePane.id)
-        })
+        }))
       })
 
       // Make tabs switchable
@@ -572,7 +583,7 @@ <h5>Documentation</h5>
       function recompile(id) {
         if (id == 'binaryTab') {
           binaryEditor.setValue('(module\n 🚀\n)\n')
-          setTimeout(() => {
+          compilingTimeout = setTimeout(() => {
             compile()
           }, 10)
         } else if (id == 'playTab') {
@@ -805,6 +816,7 @@ <h5>Documentation</h5>
 
       // Compiles the source to WebAssembly
       function compile(cb) {
+        clearTimeout(compilingTimeout)
         const stdout = asc.createMemoryStream()
         const sources = {
           'module.ts': sourceEditor.getValue()
@@ -815,7 +827,7 @@ <h5>Documentation</h5>
           '--textFile', 'module.wat',
           '--binaryFile', 'module.wasm'
         ].concat(getCompilerOptions())
-        setTimeout(() => {
+        compilingTimeout = setTimeout(() => {
           asc.main(options, {
             stdout,
             stderr: stdout,
@@ -836,9 +848,10 @@ <h5>Documentation</h5>
               binaryEditor.setValue(output + module_wat)
             }
             didCompile = true
+            compilingTimeout = null
             if (cb) cb(err)
           })
-        }, 100)
+        }, 50)
       }
 
       // Finally, hide the loading animation

From b483a695da478ee6e684d790b5aca222869255dd Mon Sep 17 00:00:00 2001
From: MaxGraey <maxgraey@gmail.com>
Date: Sun, 21 Nov 2021 18:07:12 +0200
Subject: [PATCH 3/3] better

---
 src/.vuepress/public/editor.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/.vuepress/public/editor.html b/src/.vuepress/public/editor.html
index f32474ffe..6f0de15a6 100644
--- a/src/.vuepress/public/editor.html
+++ b/src/.vuepress/public/editor.html
@@ -554,6 +554,7 @@ <h5>Documentation</h5>
       function debounce(fn, delay = 1500) {
         let timeout
         return function (...args) {
+          clearTimeout(compilingTimeout)
           clearTimeout(timeout)
           timeout = setTimeout(() => {
             fn.call(this, ...args)
@@ -583,9 +584,9 @@ <h5>Documentation</h5>
       function recompile(id) {
         if (id == 'binaryTab') {
           binaryEditor.setValue('(module\n 🚀\n)\n')
-          compilingTimeout = setTimeout(() => {
+          setTimeout(() => {
             compile()
-          }, 10)
+          }, 1)
         } else if (id == 'playTab') {
           function serialize() {
             return 'data:text/html;base64,' + btoa([
@@ -816,7 +817,6 @@ <h5>Documentation</h5>
 
       // Compiles the source to WebAssembly
       function compile(cb) {
-        clearTimeout(compilingTimeout)
         const stdout = asc.createMemoryStream()
         const sources = {
           'module.ts': sourceEditor.getValue()