From ec78a4d709e6454d9d9aa6ba68e485c01375c971 Mon Sep 17 00:00:00 2001 From: Pseudo Pilot Date: Sat, 27 Apr 2024 18:10:37 +0100 Subject: [PATCH 1/6] fix(playground/runner): fix external script loading in playground --- client/public/runner.html | 33 ++++++++++++++++++++++++++++++--- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/client/public/runner.html b/client/public/runner.html index a6b75d798221..64b8c391136f 100644 --- a/client/public/runner.html +++ b/client/public/runner.html @@ -54,6 +54,28 @@ window.console = consoleProxy; window.addEventListener("error", (e) => console.log(e.error)); + async function loadExternalScripts(html) { + const dummy = document.createElement("div"); + dummy.innerHTML = html; + const scripts = dummy.querySelectorAll("script[src]"); + + const loaded = [...scripts].reduce((acc, scrpt) => { + acc.push( + new Promise((resolve) => { + const script = document.createElement("script"); + script.src = scrpt.src; + script.addEventListener("load", () => resolve()); + + document.head.appendChild(script); + }) + ); + + return acc; + }, []); + + await Promise.all(loaded); + } + function setHTML(parent, html) { const dummy = parent.cloneNode(false); dummy.innerHTML = html; @@ -69,6 +91,9 @@ if (child.nodeType !== Node.ELEMENT_NODE) { continue; } + if (child.nodeName === "SCRIPT" && child.src) { + continue; + } const namespaceURI = child.namespaceURI; @@ -104,7 +129,7 @@ } let initialized = false; - function init(state) { + async function init(state) { if (initialized) { return; } @@ -114,6 +139,8 @@ style.textContent = state.css; document.head.appendChild(style); + await loadExternalScripts(state.html); + document.body.innerHTML = ""; setHTML(document.body, state.html); @@ -129,10 +156,10 @@ initialized = true; } - window.addEventListener("message", (event) => { + window.addEventListener("message", async (event) => { const e = event.data; if (e.typ === "init") { - init(e.state); + await init(e.state); } if (e.typ === "reload") { window.location.reload(); From 9c959aee84c10d8b46a5340d4543b05ffb1adc98 Mon Sep 17 00:00:00 2001 From: PseudoPilot <40791399+pseudopilot@users.noreply.github.com> Date: Fri, 3 May 2024 10:38:26 +0100 Subject: [PATCH 2/6] refactor mapping Co-authored-by: Claas Augner <495429+caugner@users.noreply.github.com> --- client/public/runner.html | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/client/public/runner.html b/client/public/runner.html index 64b8c391136f..8b8f6514c3f9 100644 --- a/client/public/runner.html +++ b/client/public/runner.html @@ -59,19 +59,13 @@ dummy.innerHTML = html; const scripts = dummy.querySelectorAll("script[src]"); - const loaded = [...scripts].reduce((acc, scrpt) => { - acc.push( - new Promise((resolve) => { - const script = document.createElement("script"); - script.src = scrpt.src; - script.addEventListener("load", () => resolve()); - - document.head.appendChild(script); - }) - ); - - return acc; - }, []); + const loaded = [...scripts].map((scrpt) => new Promise((resolve) => { + const script = document.createElement("script"); + script.src = scrpt.src; + script.addEventListener("load", () => resolve()); + + document.head.appendChild(script); + })); await Promise.all(loaded); } From 859dc15bcd87c8d97ec95679510dd59f936b3330 Mon Sep 17 00:00:00 2001 From: PseudoPilot <40791399+pseudopilot@users.noreply.github.com> Date: Fri, 3 May 2024 10:38:56 +0100 Subject: [PATCH 3/6] add comment to make clear Co-authored-by: Claas Augner <495429+caugner@users.noreply.github.com> --- client/public/runner.html | 1 + 1 file changed, 1 insertion(+) diff --git a/client/public/runner.html b/client/public/runner.html index 8b8f6514c3f9..afac3f6aa77c 100644 --- a/client/public/runner.html +++ b/client/public/runner.html @@ -86,6 +86,7 @@ continue; } if (child.nodeName === "SCRIPT" && child.src) { + // Script tags with `src` are handled in `loadExternalScripts()`. continue; } From 08154545a884114e9e2bbde3003abf1844343234 Mon Sep 17 00:00:00 2001 From: Pseudo Pilot Date: Fri, 3 May 2024 10:43:46 +0100 Subject: [PATCH 4/6] fix code formatting --- client/public/runner.html | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/client/public/runner.html b/client/public/runner.html index afac3f6aa77c..4bace6bdab54 100644 --- a/client/public/runner.html +++ b/client/public/runner.html @@ -59,13 +59,16 @@ dummy.innerHTML = html; const scripts = dummy.querySelectorAll("script[src]"); - const loaded = [...scripts].map((scrpt) => new Promise((resolve) => { - const script = document.createElement("script"); - script.src = scrpt.src; - script.addEventListener("load", () => resolve()); - - document.head.appendChild(script); - })); + const loaded = [...scripts].map( + (scrpt) => + new Promise((resolve) => { + const script = document.createElement("script"); + script.src = scrpt.src; + script.addEventListener("load", () => resolve()); + + document.head.appendChild(script); + }) + ); await Promise.all(loaded); } From 4099a6ba577e7e8ea9fee720103b7efd17445d71 Mon Sep 17 00:00:00 2001 From: Pseudo Pilot Date: Fri, 3 May 2024 13:52:31 +0100 Subject: [PATCH 5/6] update upproach for handling scripts --- client/public/runner.html | 32 +++++++------------------------- 1 file changed, 7 insertions(+), 25 deletions(-) diff --git a/client/public/runner.html b/client/public/runner.html index 4bace6bdab54..d04a0a1397fc 100644 --- a/client/public/runner.html +++ b/client/public/runner.html @@ -54,25 +54,6 @@ window.console = consoleProxy; window.addEventListener("error", (e) => console.log(e.error)); - async function loadExternalScripts(html) { - const dummy = document.createElement("div"); - dummy.innerHTML = html; - const scripts = dummy.querySelectorAll("script[src]"); - - const loaded = [...scripts].map( - (scrpt) => - new Promise((resolve) => { - const script = document.createElement("script"); - script.src = scrpt.src; - script.addEventListener("load", () => resolve()); - - document.head.appendChild(script); - }) - ); - - await Promise.all(loaded); - } - function setHTML(parent, html) { const dummy = parent.cloneNode(false); dummy.innerHTML = html; @@ -88,10 +69,6 @@ if (child.nodeType !== Node.ELEMENT_NODE) { continue; } - if (child.nodeName === "SCRIPT" && child.src) { - // Script tags with `src` are handled in `loadExternalScripts()`. - continue; - } const namespaceURI = child.namespaceURI; @@ -137,11 +114,16 @@ style.textContent = state.css; document.head.appendChild(style); - await loadExternalScripts(state.html); - document.body.innerHTML = ""; setHTML(document.body, state.html); + for (const script of document.querySelectorAll("script[src]")) { + await new Promise((resolve) => { + script.addEventListener("load", () => resolve()); + script.addEventListener("error", () => resolve()); + }); + } + const script = document.createElement("script"); script.textContent = state.js; document.body.appendChild(script); From 51fa359cb748affef8a84a26b07c498b1c133359 Mon Sep 17 00:00:00 2001 From: PseudoPilot <40791399+pseudopilot@users.noreply.github.com> Date: Fri, 3 May 2024 20:17:51 +0100 Subject: [PATCH 6/6] code refactoring Co-authored-by: Claas Augner <495429+caugner@users.noreply.github.com> --- client/public/runner.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/public/runner.html b/client/public/runner.html index d04a0a1397fc..6b534bdc60f1 100644 --- a/client/public/runner.html +++ b/client/public/runner.html @@ -119,8 +119,8 @@ for (const script of document.querySelectorAll("script[src]")) { await new Promise((resolve) => { - script.addEventListener("load", () => resolve()); - script.addEventListener("error", () => resolve()); + script.addEventListener("load", resolve); + script.addEventListener("error", resolve); }); }