From 2295b160df02f4a0f98aab0bafadf0110fbfceb2 Mon Sep 17 00:00:00 2001
From: Antonio Cuni <anto.cuni@gmail.com>
Date: Fri, 24 Mar 2023 18:24:20 +0100
Subject: [PATCH] use a dynamic import for loading pyodide. This greatly
 simplifies the logic around interpreter loading and handling of UserError

---
 pyscriptjs/src/main.ts | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/pyscriptjs/src/main.ts b/pyscriptjs/src/main.ts
index 68ff926da62..aab01f1876c 100644
--- a/pyscriptjs/src/main.ts
+++ b/pyscriptjs/src/main.ts
@@ -207,20 +207,19 @@ export class PyScriptApp {
 
         this.logStatus(`Downloading ${interpreter_cfg.name}...`);
 
-        // download pyodide by using a <script> tag. Once it's ready, the
-        // "load" event will be fired and the execution logic will continue.
-        // Note that the load event is fired asynchronously and thus any
-        // exception which is throw inside the event handler is *NOT* caught
-        // by the try/catch inside main(): that's why we need to .catch() it
-        // explicitly and call _handleUserErrorMaybe also there.
-        const script = document.createElement('script'); // create a script DOM node
-        script.src = await this.interpreter._remote.src;
-        script.addEventListener('load', () => {
-            this.afterInterpreterLoad(this.interpreter).catch(async error => {
-                await this._handleUserErrorMaybe(error);
-            });
-        });
-        document.head.appendChild(script);
+        /* Dynamically download and import pyodide: the import() puts a
+           loadPyodide() function into globalThis, which is later called by
+           RemoteInterpreter.
+
+           This is suboptimal: ideally, we would like to import() a module
+           which exports loadPyodide(), but this plays badly with workers
+           because at the moment of writing (2023-03-24) Firefox does not
+           support ES modules in workers:
+           https://caniuse.com/mdn-api_worker_worker_ecmascript_modules
+        */
+        const interpreterURL = await this.interpreter._remote.src;
+        await import(interpreterURL);
+        await this.afterInterpreterLoad(this.interpreter);
     }
 
     // lifecycle (5)