js: auto-compile loaded source

3 files changed, 26 insertions, 33 deletions

diff --git a/site/game.mjs b/site/game.mjs
index 0fb5974..26c2370 100644
--- a/site/game.mjs
+++ b/site/game.mjs
@@ -64,13 +64,9 @@ export default class extends HTMLElement {
         robo.worker.onmessage = msg => this.#messageHandler(i, msg);
         robo.worker.onerror = msg => this.#errorHander(i, msg);
 
-        // the only reliable way i have of talking to the element
-        // that's attached is to append the template, then fetch that
-        // out of the dom. neither cloneNode(true|false) nor
-        // document.importNode(true|false) worked to fire the event
-        // listener if attached before adding it to the dom.
-        this.#inspectorsSection.appendChild(this.#inspectorTemplate.content.cloneNode(true));
-        const inspector = this.#inspectorsSection.children[this.#inspectorsSection.children.length-1];
+        const cloned = document.importNode(this.#inspectorTemplate.content, true);
+        const inspector = cloned.children.item(0);
+        this.#inspectorsSection.appendChild(inspector);
         inspector.addEventListener(Inspector.compileRequest, e => {
             console.debug('compiling for worker', e.detail.text, robo.worker);
             robo.worker.postMessage({ kind: 'compile', text: e.detail.text });
diff --git a/site/inspector.mjs b/site/inspector.mjs
index b500478..497af32 100644
--- a/site/inspector.mjs
+++ b/site/inspector.mjs
@@ -63,15 +63,7 @@ export default class extends HTMLElement {
             SRC_SELECTOR,
         ].map(this.querySelector.bind(this));
 
-        this.#compileButton.onclick = e => {
-            console.debug('compile clicked', e);
-
-            // always add a newline until i decide what to do with the parser.
-            const text = this.#src.textContent + '\n';
-            const compileEvent = new CustomEvent(this.constructor.compileRequest, { detail: { text } });
-            this.dispatchEvent(compileEvent);
-        }
-
+        this.#compileButton.onclick = this.#compile.bind(this);
         this.#srcSelect.onchange = _ => this.#loadForth(this.#srcSelect.value);
         this.#loadForth(this.#srcSelect.value);
     }
@@ -107,12 +99,21 @@ export default class extends HTMLElement {
             })
             .then(text => {
                 this.#src.textContent = text;
+                this.#compile();
             })
             .catch(e => {
                 console.error(`couldn't fetch ‘${path}’`, e);
             });
     }
 
+    #compile(e) {
+        console.debug('compile clicked', e);
+        // always add a newline until i decide what to do with the parser.
+        const text = this.#src.textContent + '\n';
+        const compileEvent = new CustomEvent(this.constructor.compileRequest, { detail: { text } });
+        this.dispatchEvent(compileEvent);
+    }
+
     #renderWordlist(vm) {
         while (this.#wordlist.lastChild) {
             console.debug('removing child', this.#wordlist.lastChild)
diff --git a/site/robo.mjs b/site/robo.mjs
index ba879fa..5302920 100644
--- a/site/robo.mjs
+++ b/site/robo.mjs
@@ -17,8 +17,19 @@ function tick() {
     postMessage({ kind: 'tick', trans: vm.trans() });
 }
 
+let mod;
+async function initWasm() {
+    if (mod === undefined) {
+        console.debug('worker running init');
+        mod = await init();
+        console.debug('worker init done');
+        vm = make_vm();
+        console.debug('worker vm made');
+    }
+}
+
 async function messageHandler(e) {
-    console.debug('worker messageHandler')
+    await initWasm();
     const { kind } = e.data;
     switch (kind) {
     case 'compile':
@@ -36,19 +47,4 @@ async function messageHandler(e) {
     }
 }
 
-let mod;
-async function loaded() {
-    console.debug('loading robo worker');
-    if (mod === undefined) {
-        console.debug('worker running init');
-        mod = await init();
-        console.debug('worker init done');
-        vm = make_vm();
-        console.debug('worker vm made');
-    }
-
-    addEventListener('message', messageHandler);
-    console.debug('bjc loaded robo');
-}
-
-loaded();
+self.addEventListener('message', messageHandler);