From a28999dfb80a58363f2a6b147fe9b7a32d57bdc9 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Tue, 15 Oct 2024 09:34:49 +0100
Subject: [PATCH 1/8] feat(pocs): initial trials and getting the wc working on
 3011 and 3012 (standalone) - currently failing

---
 .env.example                                  |   2 +-
 .vscode/launch.json                           |   2 +-
 public/PyodideServiceWorker.js                |  40 ++
 src/PyodideWorker.js                          |   9 +-
 .../PyodideRunner/PyodideRunner.jsx           | 118 +++++-
 .../PyodideRunner/PyodideWorker.js            | 358 ++++++++++++++++++
 src/utils/externalLinkHelper.js               |   2 +-
 webpack.component.config.js                   |  12 +
 8 files changed, 537 insertions(+), 6 deletions(-)
 create mode 100644 public/PyodideServiceWorker.js
 create mode 100644 src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.js

diff --git a/.env.example b/.env.example
index b09fd4e7c..570bcff22 100644
--- a/.env.example
+++ b/.env.example
@@ -6,5 +6,5 @@ REACT_APP_PLAUSIBLE_DATA_DOMAIN=''
 REACT_APP_PLAUSIBLE_SOURCE=''
 REACT_APP_SENTRY_DSN=''
 REACT_APP_SENTRY_ENV='local'
-PUBLIC_URL='http://localhost:3010'
+PUBLIC_URL='http://localhost:3011'
 ASSETS_URL='http://localhost:3010'
diff --git a/.vscode/launch.json b/.vscode/launch.json
index 22dbf71bd..249490c42 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -5,7 +5,7 @@
       "type": "chrome",
       "request": "launch",
       "name": "Launch Chrome against localhost",
-      "url": "http://localhost:3010",
+      "url": "http://localhost:3011",
       "webRoot": "${workspaceFolder}"
     }
   ]
diff --git a/public/PyodideServiceWorker.js b/public/PyodideServiceWorker.js
new file mode 100644
index 000000000..4b8658f49
--- /dev/null
+++ b/public/PyodideServiceWorker.js
@@ -0,0 +1,40 @@
+self.addEventListener("install", () => {
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener("fetch", (event) => {
+  if (
+    event.request.cache === "only-if-cached" &&
+    event.request.mode !== "same-origin"
+  ) {
+    return;
+  }
+
+  console.log(event.request);
+
+  const interceptedRequests = ["pyodide"];
+
+  if (interceptedRequests.some((str) => event.request.url.includes(str))) {
+    event.respondWith(
+      fetch(event.request)
+        .then((response) => {
+          console.log(`Intercepted: ${event.request.url}`);
+
+          const body = response.body;
+          const status = response.status;
+          const headers = new Headers(response.headers);
+          const statusText = response.statusText;
+
+          headers.set("Cross-Origin-Embedder-Policy", "require-corp");
+          headers.set("Cross-Origin-Opener-Policy", "same-origin");
+
+          return new Response(body, { status, statusText, headers });
+        })
+        .catch(console.error),
+    );
+  }
+});
diff --git a/src/PyodideWorker.js b/src/PyodideWorker.js
index 37d8e6cc1..cfce3ed94 100644
--- a/src/PyodideWorker.js
+++ b/src/PyodideWorker.js
@@ -8,6 +8,7 @@ const PyodideWorker = () => {
   importScripts("https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js");
 
   const supportsAllFeatures = typeof SharedArrayBuffer !== "undefined";
+  console.log(`crossOriginIsolated: ${globalThis.crossOriginIsolated}`);
 
   // eslint-disable-next-line no-restricted-globals
   if (!supportsAllFeatures && name !== "incremental-features") {
@@ -361,9 +362,15 @@ const PyodideWorker = () => {
 };
 
 globalThis.PyodideWorker = PyodideWorker;
+// globalThis = {
+//   postMessage,
+//   onmessage,
+// };
 
 if (typeof module !== "undefined") {
   module.exports = {
-    PyodideWorker,
+    PyodideWorker: PyodideWorker,
+    // postMessage,
+    // onmessage,
   };
 }
diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
index be616094a..f48e6e381 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
@@ -20,6 +20,82 @@ import OutputViewToggle from "../OutputViewToggle";
 import { SettingsContext } from "../../../../../utils/settings";
 import RunnerControls from "../../../../RunButton/RunnerControls";
 
+// import { PyodideWorker } from "worker-plugin/loader!../../../../../PyodideWorker";
+
+/**
+ * A Worker that can be run on a different origin by respecting CORS
+ * By default, a Worker constructor that uses an url as its parameters ignores CORS
+ * and fails on a different origin.
+ * This way we can run web worker on scripts served by a CDN
+ */
+export class CorsWorker {
+  /**
+   * @param {string | URL} url - worker script URL
+   * @param {WorkerOptions} [options] - worker options
+   */
+  constructor(url, options) {
+    this.url = url;
+    this.options = options;
+    const absoluteUrl = new URL(url, window.location.href).toString();
+    const workerSource = `\
+  /* global PyodideWorker */
+  const urlString = ${JSON.stringify(absoluteUrl)}
+  const originURL = new URL(urlString)
+  const originalImportScripts = self.importScripts
+  self.importScripts = (url) => {
+    try {
+      originalImportScripts.call(self, new URL(url, originURL).toString())
+    } catch (e) {
+      console.error('Failed to import script:', url, e);
+      throw e;
+    }
+  }
+  importScripts(urlString);
+  const pyodide = PyodideWorker();
+`;
+    const blob = new Blob([workerSource], { type: "application/javascript" });
+    const objectURL = URL.createObjectURL(blob);
+    this.worker = new Worker(objectURL, options);
+    URL.revokeObjectURL(objectURL);
+  }
+
+  getWorker() {
+    return this.worker;
+  }
+
+  async createWorker() {
+    const f = await fetch(this.url);
+    const t = await f.text();
+    const b = new Blob([t], {
+      type: "application/javascript",
+    });
+    const url = URL.createObjectURL(b);
+    const worker = new Worker(url, this.options);
+    return worker;
+  }
+
+  /*
+      The notes here are outside workerSource to not increase the ObjectURL size with
+    long explanations as comments
+
+    Note 1
+    ======
+      Sometimes Webpack will try to import url with "blob:" prefixed and with relative
+    path as absolute path.
+
+      Not only this will cause a security error due to different url, such as a "blob:" 
+    protocol (meaning a CORS error), the path will be wrong. Any of those 2 problems 
+    fails the importScripts. Since we can import JS with blobs, lets just remove "blob:"
+    prefix and fix the URL its content is a valid URL
+
+    Note 2
+    ======
+       URL#pathname always starts with "/", we want to remove the / to be a relative path
+     to the Worker file URL
+
+   */
+}
+
 const PyodideRunner = ({ active }) => {
   const getWorkerURL = (url) => {
     const content = `
@@ -33,9 +109,27 @@ const PyodideRunner = ({ active }) => {
     return URL.createObjectURL(blob);
   };
 
-  const workerUrl = getWorkerURL(`${process.env.PUBLIC_URL}/PyodideWorker.js`);
+  // Blob approach - works in web component but not in the editor
+  // Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:3011/PyodideWorker.js' failed to load.
+  // const workerUrl = getWorkerURL(`${process.env.PUBLIC_URL}/PyodideWorker.js`);
+  // const pyodideWorker = useMemo(() => new Worker(workerUrl), []);
+
+  // CORS worker - works in web component but not in the editor
+  // Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:3012/en/projects/PyodideWorker.js' failed to load.
+  // const workerUrl = new CorsWorker("./PyodideWorker.js", {
+  const workerUrl = new CorsWorker(
+    `${process.env.PUBLIC_URL}/PyodideWorker.js`,
+    // {
+    //   type: "classic",
+    // },
+  );
+  const pyodideWorker = useMemo(() => workerUrl.getWorker(), []);
 
-  const pyodideWorker = useMemo(() => new Worker(workerUrl), []);
+  // DOESN'T WORK
+  // const pyodideWorker = await workerUrl.createWorker();
+  // const pyodideWorker = useMemo(() => workerUrl.createWorker(), []);
+  // const pyodideWorker = useMemo(() => new Worker(PyodideWorker), []);
+  // const pyodideWorker = useMemo(() => new Worker(`./PyodideWorker.js`, []));
 
   if (!pyodideWorker) {
     console.error("PyodideWorker is not initialized");
@@ -65,6 +159,26 @@ const PyodideRunner = ({ active }) => {
   const [visuals, setVisuals] = useState([]);
   const [showRunner, setShowRunner] = useState(active);
 
+  // useEffect(() => {
+  //   console.log("trying registering service worker");
+  //   if ("serviceWorker" in navigator) {
+  //     console.log("registering service worker");
+  //     navigator.serviceWorker
+  //       .register("./PyodideServiceWorker.js")
+  //       // .register(`${process.env.PUBLIC_URL}/PyodideServiceWorker.js`)
+  //       // .register(`${window.location.origin}/PyodideServiceWorker.js`)
+  //       // .register(serviceWorker)
+  //       // .register(getBlobURL(serviceWorker, "application/javascript"))
+  //       // .register(serviceWorkerUrl)
+  //       .then((registration) => {
+  //         if (!registration.active || !navigator.serviceWorker.controller) {
+  //           console.log("registered");
+  //           window.location.reload();
+  //         }
+  //       });
+  //   }
+  // }, []);
+
   useEffect(() => {
     if (pyodideWorker) {
       pyodideWorker.onmessage = ({ data }) => {
diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.js b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.js
new file mode 100644
index 000000000..b52d4f373
--- /dev/null
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.js
@@ -0,0 +1,358 @@
+/* global globalThis, importScripts, loadPyodide, SharedArrayBuffer, Atomics, pygal, _internal_sense_hat */
+
+// Nest the PyodideWorker function inside a globalThis object so we control when its initialised.
+// Import scripts dynamically based on the environment
+importScripts(`${process.env.PUBLIC_URL}/_internal_sense_hat.js`);
+importScripts(`${process.env.PUBLIC_URL}/pygal.js`);
+importScripts("https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js");
+
+const supportsAllFeatures = typeof SharedArrayBuffer !== "undefined";
+
+// eslint-disable-next-line no-restricted-globals
+if (!supportsAllFeatures && name !== "incremental-features") {
+  console.warn(
+    [
+      "The code editor will not be able to capture standard input or stop execution because these HTTP headers are not set:",
+      "  - Cross-Origin-Opener-Policy: same-origin",
+      "  - Cross-Origin-Embedder-Policy: require-corp",
+      "",
+      "If your app can cope with or without these features, please initialize the web worker with { name: 'incremental-features' } to silence this warning.",
+      "You can then check for the presence of { stdinBuffer, interruptBuffer } in the handleLoaded message to check whether these features are supported.",
+      "",
+      "If you definitely need these features, either configure your server to respond with the HTTP headers above, or register a service worker.",
+      "Once the HTTP headers are set, the browser will block cross-domain resources so you will need to add 'crossorigin' to <script> and other tags.",
+      "You may wish to scope the HTTP headers to only those pages that host the code editor to make the browser restriction easier to deal with.",
+      "",
+      "Please refer to these code snippets for registering a service worker:",
+      "  - https://github.com/RaspberryPiFoundation/python-execution-prototypes/blob/fd2c50e032cba3bb0e92e19a88eb62e5b120fe7a/pyodide/index.html#L92-L98",
+      "  - https://github.com/RaspberryPiFoundation/python-execution-prototypes/blob/fd2c50e032cba3bb0e92e19a88eb62e5b120fe7a/pyodide/serviceworker.js",
+    ].join("\n"),
+  );
+}
+let pyodide, pyodidePromise, stdinBuffer, interruptBuffer, stopped;
+
+const onmessage = async ({ data }) => {
+  pyodide = await pyodidePromise;
+  let encoder = new TextEncoder();
+
+  switch (data.method) {
+    case "writeFile":
+      pyodide.FS.writeFile(data.filename, encoder.encode(data.content));
+      break;
+    case "runPython":
+      runPython(data.python);
+      break;
+    case "stopPython":
+      stopped = true;
+      break;
+    default:
+      throw new Error(`Unsupported method: ${data.method}`);
+  }
+};
+
+// eslint-disable-next-line no-restricted-globals
+addEventListener("message", async (event) => {
+  onmessage(event);
+});
+
+const runPython = async (python) => {
+  stopped = false;
+  await pyodide.runPythonAsync(`
+    old_input = input
+
+    def patched_input(prompt=False):
+        if (prompt):
+            print(prompt)
+        return old_input()
+
+    __builtins__.input = patched_input
+    `);
+
+  try {
+    await withSupportForPackages(python, async () => {
+      await pyodide.runPython(python);
+    });
+  } catch (error) {
+    if (!(error instanceof pyodide.ffi.PythonError)) {
+      throw error;
+    }
+    postMessage({ method: "handleError", ...parsePythonError(error) });
+  }
+
+  await reloadPyodideToClearState();
+};
+
+const checkIfStopped = () => {
+  if (stopped) {
+    throw new pyodide.ffi.PythonError("KeyboardInterrupt");
+  }
+};
+
+const withSupportForPackages = async (python, runPythonFn = async () => {}) => {
+  const imports = await pyodide._api.pyodide_code.find_imports(python).toJs();
+  await Promise.all(imports.map((name) => loadDependency(name)));
+
+  checkIfStopped();
+  await pyodide.loadPackagesFromImports(python);
+
+  checkIfStopped();
+  await runPythonFn();
+
+  for (let name of imports) {
+    checkIfStopped();
+    await vendoredPackages[name]?.after();
+  }
+};
+
+const loadDependency = async (name) => {
+  checkIfStopped();
+
+  // If the import is for another user file then open it and load its dependencies.
+  if (pyodide.FS.readdir("/home/pyodide").includes(`${name}.py`)) {
+    const fileContent = pyodide.FS.readFile(`/home/pyodide/${name}.py`, {
+      encoding: "utf8",
+    });
+    await withSupportForPackages(fileContent);
+    return;
+  }
+
+  // If the import is for a vendored package then run its .before() hook.
+  const vendoredPackage = vendoredPackages[name];
+  await vendoredPackage?.before();
+  if (vendoredPackage) {
+    return;
+  }
+
+  // If the import is for a module built into Python then do nothing.
+  let pythonModule;
+  try {
+    pythonModule = pyodide.pyimport(name);
+  } catch (_) {}
+  if (pythonModule) {
+    return;
+  }
+
+  // If the import is for a package built into Pyodide then load it.
+  // Built-ins: https://pyodide.org/en/stable/usage/packages-in-pyodide.html
+  await pyodide.loadPackage(name)?.catch(() => {});
+  let pyodidePackage;
+  try {
+    pyodidePackage = pyodide.pyimport(name);
+  } catch (_) {}
+  if (pyodidePackage) {
+    return;
+  }
+
+  // Ensure micropip is loaded which can fetch packages from PyPi.
+  // See: https://pyodide.org/en/stable/usage/loading-packages.html
+  if (!pyodide.micropip) {
+    await pyodide.loadPackage("micropip");
+    pyodide.micropip = pyodide.pyimport("micropip");
+  }
+
+  // If the import is for a PyPi package then load it.
+  // Otherwise, don't error now so that we get an error later from Python.
+  await pyodide.micropip.install(name).catch(() => {});
+};
+
+const vendoredPackages = {
+  turtle: {
+    before: async () => {
+      pyodide.registerJsModule("basthon", fakeBasthonPackage);
+      await pyodide.loadPackage(
+        `${process.env.ASSETS_URL}/packages/turtle-0.0.1-py3-none-any.whl`,
+      );
+    },
+    after: () =>
+      pyodide.runPython(`
+        import turtle
+        import basthon
+
+        svg_dict = turtle.Screen().show_scene()
+        basthon.kernel.display_event({ "display_type": "turtle", "content": svg_dict })
+        turtle.restart()
+      `),
+  },
+  p5: {
+    before: async () => {
+      pyodide.registerJsModule("basthon", fakeBasthonPackage);
+      await pyodide.loadPackage([
+        "setuptools",
+        `${process.env.ASSETS_URL}/packages/p5-0.0.1-py3-none-any.whl`,
+      ]);
+    },
+    after: () => {},
+  },
+  pygal: {
+    before: () => {
+      pyodide.registerJsModule("pygal", { ...pygal });
+      pygal.config.renderChart = (content) => {
+        postMessage({ method: "handleVisual", origin: "pygal", content });
+      };
+    },
+    after: () => {},
+  },
+  sense_hat: {
+    before: async () => {
+      pyodide.registerJsModule("_internal_sense_hat", {
+        ..._internal_sense_hat,
+      });
+      await pyodide.loadPackage([
+        "pillow",
+        `${process.env.ASSETS_URL}/packages/sense_hat-0.0.1-py3-none-any.whl`,
+      ]);
+
+      _internal_sense_hat.config.pyodide = pyodide;
+      _internal_sense_hat.config.emit = (type) =>
+        postMessage({ method: "handleSenseHatEvent", type });
+    },
+    after: () => {
+      const {
+        pyodide,
+        emit,
+        sensestick,
+        start_motion_callback,
+        stop_motion_callback,
+        ...config
+      } = _internal_sense_hat.config;
+      postMessage({
+        method: "handleVisual",
+        origin: "sense_hat",
+        content: config,
+      });
+    },
+  },
+  matplotlib: {
+    before: async () => {
+      pyodide.registerJsModule("basthon", fakeBasthonPackage);
+      // Patch the document object to prevent matplotlib from trying to render. Since we are running in a web worker,
+      // the document object is not available. We will instead capture the image and send it back to the main thread.
+      pyodide.runPython(`
+        import js
+
+        class DummyDocument:
+            def __init__(self, *args, **kwargs) -> None:
+                return
+            def __getattr__(self, __name: str):
+                return DummyDocument
+        js.document = DummyDocument()
+        `);
+      await pyodide.loadPackage("matplotlib")?.catch(() => {});
+      let pyodidePackage;
+      try {
+        pyodidePackage = pyodide.pyimport("matplotlib");
+      } catch (_) {}
+      if (pyodidePackage) {
+        return;
+      }
+    },
+    after: () => {
+      pyodide.runPython(`
+        import matplotlib.pyplot as plt
+        import io
+        import basthon
+
+        bytes_io = io.BytesIO()
+        plt.savefig(bytes_io, format='jpg')
+        bytes_io.seek(0)
+        basthon.kernel.display_event({ "display_type": "matplotlib", "content": bytes_io.read() })
+        `);
+    },
+  },
+};
+
+const fakeBasthonPackage = {
+  kernel: {
+    display_event: (event) => {
+      const origin = event.toJs().get("display_type");
+      const content = event.toJs().get("content");
+
+      postMessage({ method: "handleVisual", origin, content });
+    },
+    locals: () => pyodide.runPython("globals()"),
+  },
+};
+
+const reloadPyodideToClearState = async () => {
+  postMessage({ method: "handleLoading" });
+
+  pyodidePromise = loadPyodide({
+    stdout: (content) =>
+      postMessage({ method: "handleOutput", stream: "stdout", content }),
+    stderr: (content) =>
+      postMessage({ method: "handleOutput", stream: "stderr", content }),
+  });
+
+  pyodide = await pyodidePromise;
+
+  if (supportsAllFeatures) {
+    stdinBuffer =
+      stdinBuffer || new Int32Array(new SharedArrayBuffer(1024 * 1024)); // 1 MiB
+    stdinBuffer[0] = 1; // Store the length of content in the buffer at index 0.
+    pyodide.setStdin({ isatty: true, read: readFromStdin });
+
+    interruptBuffer =
+      interruptBuffer || new Uint8Array(new SharedArrayBuffer(1));
+    pyodide.setInterruptBuffer(interruptBuffer);
+  }
+
+  postMessage({ method: "handleLoaded", stdinBuffer, interruptBuffer });
+};
+
+const readFromStdin = (bufferToWrite) => {
+  const previousLength = stdinBuffer[0];
+  postMessage({ method: "handleInput" });
+
+  while (true) {
+    pyodide.checkInterrupt();
+    const result = Atomics.wait(stdinBuffer, 0, previousLength, 100);
+    if (result === "not-equal") {
+      break;
+    }
+  }
+
+  const currentLength = stdinBuffer[0];
+  if (currentLength === -1) {
+    return 0;
+  } // Signals that stdin was closed.
+
+  const addedBytes = stdinBuffer.slice(previousLength, currentLength);
+  bufferToWrite.set(addedBytes);
+
+  return addedBytes.length;
+};
+
+const parsePythonError = (error) => {
+  const type = error.type;
+  const [trace, info] = error.message.split(`${type}:`).map((s) => s?.trim());
+
+  const lines = trace.split("\n");
+
+  const snippetLine = lines[lines.length - 2]; //    print("hi")invalid
+  const caretLine = lines[lines.length - 1]; //                 ^^^^^^^
+
+  const showsMistake = caretLine.includes("^");
+  const mistake = showsMistake
+    ? [snippetLine.slice(4), caretLine.slice(4)].join("\n")
+    : "";
+
+  const matches = [...trace.matchAll(/File "(.*)", line (\d+)/g)];
+  const match = matches[matches.length - 1];
+
+  const path = match ? match[1] : "";
+  const base = path.split("/").reverse()[0];
+  const file = base === "<exec>" ? "main.py" : base;
+
+  const line = match ? parseInt(match[2], 10) : "";
+
+  return { file, line, mistake, type, info };
+};
+
+reloadPyodideToClearState();
+
+if (typeof module !== "undefined") {
+  module.exports = {
+    postMessage,
+    onmessage,
+  };
+}
diff --git a/src/utils/externalLinkHelper.js b/src/utils/externalLinkHelper.js
index 42f5b6f04..9730b9574 100644
--- a/src/utils/externalLinkHelper.js
+++ b/src/utils/externalLinkHelper.js
@@ -4,7 +4,7 @@ import { useDispatch } from "react-redux";
 import { setError, triggerCodeRun } from "../redux/EditorSlice";
 
 const domain = "https://rpf.io/";
-const host = process.env.PUBLIC_URL || "http://localhost:3010";
+const host = process.env.PUBLIC_URL || "http://localhost:3011";
 const rpfDomain = new RegExp(`^${domain}`);
 const hostDomain = new RegExp(`^${host}`);
 const allowedInternalLinks = [new RegExp(`^#[a-zA-Z0-9]+`)];
diff --git a/webpack.component.config.js b/webpack.component.config.js
index 87ae333cd..079d5763d 100644
--- a/webpack.component.config.js
+++ b/webpack.component.config.js
@@ -71,6 +71,7 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, "./build"),
     filename: "[name].js",
+    // publicPath: "http://localhost:3011/",
   },
   devServer: {
     host: "0.0.0.0",
@@ -86,7 +87,18 @@ module.exports = {
       "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
       "Access-Control-Allow-Headers":
         "X-Requested-With, content-type, Authorization",
+      "Cross-Origin-Opener-Policy": "same-origin",
+      "Cross-Origin-Embedder-Policy": "require-corp",
+      // "Cross-Origin-Resource-Policy": "same-site",
     },
+    // onBeforeSetupMiddleware: function (devServer) {
+    //   devServer.app.use((req, res, next) => {
+    //     res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
+    //     res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
+    //     res.setHeader("Cross-Origin-Resource-Policy", "same-site");
+    //     next();
+    //   });
+    // },
   },
   plugins: [
     new WorkerPlugin(),

From de5068d44fc66ea01461b2c4ef0c197fc4ecc3b4 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Tue, 15 Oct 2024 17:17:54 +0100
Subject: [PATCH 2/8] working PyodideWorker

---
 src/PyodideWorker.js                          |   6 -
 .../PyodideRunner/PyodideRunner.jsx           | 242 ++++++++++++------
 .../SkulptRunner/SkulptRunner.jsx             |   1 +
 webpack.component.config.js                   |  38 ++-
 4 files changed, 199 insertions(+), 88 deletions(-)

diff --git a/src/PyodideWorker.js b/src/PyodideWorker.js
index 08f578338..98bea70f7 100644
--- a/src/PyodideWorker.js
+++ b/src/PyodideWorker.js
@@ -362,15 +362,9 @@ const PyodideWorker = () => {
 };
 
 globalThis.PyodideWorker = PyodideWorker;
-// globalThis = {
-//   postMessage,
-//   onmessage,
-// };
 
 if (typeof module !== "undefined") {
   module.exports = {
     PyodideWorker: PyodideWorker,
-    // postMessage,
-    // onmessage,
   };
 }
diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
index f48e6e381..d5db329b2 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
@@ -1,6 +1,3 @@
-/* eslint import/no-webpack-loader-syntax: off */
-/* eslint-disable react-hooks/exhaustive-deps */
-
 import "../../../../../assets/stylesheets/PythonRunner.scss";
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
@@ -20,8 +17,6 @@ import OutputViewToggle from "../OutputViewToggle";
 import { SettingsContext } from "../../../../../utils/settings";
 import RunnerControls from "../../../../RunButton/RunnerControls";
 
-// import { PyodideWorker } from "worker-plugin/loader!../../../../../PyodideWorker";
-
 /**
  * A Worker that can be run on a different origin by respecting CORS
  * By default, a Worker constructor that uses an url as its parameters ignores CORS
@@ -36,27 +31,29 @@ export class CorsWorker {
   constructor(url, options) {
     this.url = url;
     this.options = options;
-    const absoluteUrl = new URL(url, window.location.href).toString();
-    const workerSource = `\
-  /* global PyodideWorker */
-  const urlString = ${JSON.stringify(absoluteUrl)}
-  const originURL = new URL(urlString)
-  const originalImportScripts = self.importScripts
-  self.importScripts = (url) => {
-    try {
-      originalImportScripts.call(self, new URL(url, originURL).toString())
-    } catch (e) {
-      console.error('Failed to import script:', url, e);
-      throw e;
-    }
-  }
-  importScripts(urlString);
-  const pyodide = PyodideWorker();
-`;
-    const blob = new Blob([workerSource], { type: "application/javascript" });
-    const objectURL = URL.createObjectURL(blob);
-    this.worker = new Worker(objectURL, options);
-    URL.revokeObjectURL(objectURL);
+    // const absoluteUrl = new URL(url, window.location.href).toString();
+    // const workerSource = `\
+    //   const urlString = ${JSON.stringify(absoluteUrl)}
+    //   const originURL = new URL(urlString)
+    //   const isValidUrl = (urlString) => {
+    //     try { return Boolean(new URL(urlString, originURL)) } catch(e){ return false }
+    //   }
+    //   const originalImportScripts = self.importScripts
+    //   self.importScripts = (url) => {
+    //     /* see note 1 below */
+    //     if(url.startsWith("blob:") && isValidUrl(url.replace("blob:", ""))){
+    //       const urlWithoutBlob = url.replace("blob:", "")
+    //       const { pathname } = new URL(urlWithoutBlob, originURL)
+    //       url = pathname && pathname.substring(1) /* see note 2 below */
+    //     }
+    //     originalImportScripts.call(self, new URL(url, originURL).toString())
+    //   }
+    //   importScripts(urlString);
+    // `;
+    // const blob = new Blob([workerSource], { type: "application/javascript" });
+    // const objectURL = URL.createObjectURL(blob);
+    // this.worker = new Worker(objectURL, options);
+    // URL.revokeObjectURL(objectURL);
   }
 
   getWorker() {
@@ -64,14 +61,43 @@ export class CorsWorker {
   }
 
   async createWorker() {
-    const f = await fetch(this.url);
-    const t = await f.text();
-    const b = new Blob([t], {
-      type: "application/javascript",
-    });
-    const url = URL.createObjectURL(b);
-    const worker = new Worker(url, this.options);
-    return worker;
+    if (!this.url) {
+      console.error("Worker URL is undefined");
+      return;
+    }
+
+    if (!this.options) {
+      console.warn("Worker options are undefined, using default options");
+      this.options = {};
+    }
+
+    try {
+      const response = await fetch(this.url);
+      if (!response.ok) {
+        throw new Error(
+          `Failed to fetch worker script: ${response.statusText}`,
+        );
+      }
+
+      const scriptText = await response.text();
+      const extendedScript = `
+        /* global PyodideWorker */
+        console.log("Worker loading");
+        ${scriptText}
+        const pyodide = PyodideWorker();
+      `;
+
+      const blob = new Blob([extendedScript], {
+        type: "application/javascript",
+      });
+      const objectURL = URL.createObjectURL(blob);
+      const worker = new Worker(objectURL, this.options);
+
+      console.log("Worker created successfully");
+      return worker;
+    } catch (error) {
+      console.error("Error creating worker:", error);
+    }
   }
 
   /*
@@ -96,7 +122,56 @@ export class CorsWorker {
    */
 }
 
-const PyodideRunner = ({ active }) => {
+export class CorsWorker2 {
+  constructor(url) {
+    // Get the public path (if available) - this might be specific to your environment
+    const publicPath =
+      typeof __webpack_public_path__ !== "undefined"
+        ? __webpack_public_path__
+        : "";
+
+    // Create a blob with the worker code, including the public path and imported script
+    const workerCode = `
+      /* global PyodideWorker */
+      const publicPath = ${JSON.stringify(publicPath)};
+      globalThis = new Proxy(globalThis, {
+        get: (target, prop) => prop === 'location' ? publicPath : target[prop]
+      });
+      try {
+        importScripts(${JSON.stringify(url.toString())});
+        const pyodide = PyodideWorker();
+      } catch (e) {
+        console.error('Failed to load script:', e);
+      }
+    `;
+    const blob = new Blob([workerCode], { type: "application/javascript" });
+
+    // Create an object URL for the blob
+    const objectURL = URL.createObjectURL(blob);
+
+    // Create the worker using the object URL
+    this._worker = new Worker(objectURL);
+
+    // Revoke the object URL to release resources
+    URL.revokeObjectURL(objectURL);
+  }
+
+  getWorker() {
+    return this._worker;
+  }
+}
+
+const PyodideRunner = (props) => {
+  // const pyodideWorker = new Worker(
+  //   new URL("./PyodideWorker.js", import.meta.url),
+  // );
+
+  // if (!props) {
+  //   return null;
+  // }
+
+  const { active } = props;
+
   const getWorkerURL = (url) => {
     const content = `
       /* global PyodideWorker */
@@ -109,6 +184,15 @@ const PyodideRunner = ({ active }) => {
     return URL.createObjectURL(blob);
   };
 
+  // const pyodideWorker = useMemo(
+  //   () =>
+  //     new CorsWorker(new URL("./PyodideWorker.js", import.meta.url), {
+  //       type: "classic",
+  //       name: "PyodideWorker",
+  //     }).getWorker(),
+  //   [],
+  // );
+
   // Blob approach - works in web component but not in the editor
   // Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:3011/PyodideWorker.js' failed to load.
   // const workerUrl = getWorkerURL(`${process.env.PUBLIC_URL}/PyodideWorker.js`);
@@ -117,13 +201,47 @@ const PyodideRunner = ({ active }) => {
   // CORS worker - works in web component but not in the editor
   // Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:3012/en/projects/PyodideWorker.js' failed to load.
   // const workerUrl = new CorsWorker("./PyodideWorker.js", {
-  const workerUrl = new CorsWorker(
-    `${process.env.PUBLIC_URL}/PyodideWorker.js`,
-    // {
-    //   type: "classic",
-    // },
-  );
-  const pyodideWorker = useMemo(() => workerUrl.getWorker(), []);
+  // const workerUrl = new CorsWorker(
+  //   `${process.env.PUBLIC_URL}/PyodideWorker.js`,
+  //   {
+  //     type: "classic",
+  //   },
+  // );
+  // const workerUrl = new CorsWorker(
+  //   `${process.env.PUBLIC_URL}/PyodideWorker.js`,
+  // );
+  // const pyodideWorker = useMemo(() => workerUrl.getWorker(), []);
+
+  // CORS worker - async fetch approach - works in both but targeted headers needed for pygal and sense_hat imports
+  // const [pyodideWorker, setPyodideWorker] = useState(null);
+
+  // useMemo(() => {
+  //   const workerUrl = new CorsWorker(
+  //     new URL("/PyodideWorker.js", process.env.PUBLIC_URL),
+  //     { type: "classic" },
+  //   );
+  //   workerUrl
+  //     .createWorker()
+  //     .then((worker) => {
+  //       setPyodideWorker(worker);
+  //     })
+  //     .catch((error) => {
+  //       console.error("Failed to create worker:", error);
+  //     });
+  // }, []);
+
+  // Blob approach + targeted headers - no errors but headers required in host app to interrupt code
+  const workerUrl = getWorkerURL(`${process.env.PUBLIC_URL}/PyodideWorker.js`);
+  const pyodideWorker = useMemo(() => new Worker(workerUrl), []);
+
+  // Altered CORS worker 2 - works in web component but not in the editor
+  // const pyodideWorker = new CorsWorker2(
+  //   new URL("http://localhost:3011/PyodideWorker.js"),
+  // ).getWorker();
+
+  // pyodideWorker.onerror = (event) => {
+  //   console.error("Worker error:", event);
+  // };
 
   // DOESN'T WORK
   // const pyodideWorker = await workerUrl.createWorker();
@@ -131,10 +249,6 @@ const PyodideRunner = ({ active }) => {
   // const pyodideWorker = useMemo(() => new Worker(PyodideWorker), []);
   // const pyodideWorker = useMemo(() => new Worker(`./PyodideWorker.js`, []));
 
-  if (!pyodideWorker) {
-    console.error("PyodideWorker is not initialized");
-  }
-
   const interruptBuffer = useRef();
   const stdinBuffer = useRef();
   const stdinClosed = useRef();
@@ -159,26 +273,6 @@ const PyodideRunner = ({ active }) => {
   const [visuals, setVisuals] = useState([]);
   const [showRunner, setShowRunner] = useState(active);
 
-  // useEffect(() => {
-  //   console.log("trying registering service worker");
-  //   if ("serviceWorker" in navigator) {
-  //     console.log("registering service worker");
-  //     navigator.serviceWorker
-  //       .register("./PyodideServiceWorker.js")
-  //       // .register(`${process.env.PUBLIC_URL}/PyodideServiceWorker.js`)
-  //       // .register(`${window.location.origin}/PyodideServiceWorker.js`)
-  //       // .register(serviceWorker)
-  //       // .register(getBlobURL(serviceWorker, "application/javascript"))
-  //       // .register(serviceWorkerUrl)
-  //       .then((registration) => {
-  //         if (!registration.active || !navigator.serviceWorker.controller) {
-  //           console.log("registered");
-  //           window.location.reload();
-  //         }
-  //       });
-  //   }
-  // }, []);
-
   useEffect(() => {
     if (pyodideWorker) {
       pyodideWorker.onmessage = ({ data }) => {
@@ -248,8 +342,6 @@ const PyodideRunner = ({ active }) => {
   };
 
   const handleInput = async () => {
-    // TODO: Sk.sense_hat.mz_criteria.noInputEvents = false;
-
     if (stdinClosed.current) {
       stdinBuffer.current[0] = -1;
       return;
@@ -271,7 +363,7 @@ const PyodideRunner = ({ active }) => {
     stdinBuffer.current[0] = currentLength;
 
     if (ctrlD) {
-      stdinClosed.current = true; // Don't accept any more stdin this run.
+      stdinClosed.current = true;
     }
   };
 
@@ -332,20 +424,19 @@ const PyodideRunner = ({ active }) => {
       writeFile([name, extension].join("."), content);
     }
 
-    // program is the content of the component with name main and extension py
     const program = projectCode.find(
       (component) => component.name === "main" && component.extension === "py",
     ).content;
 
     if (interruptBuffer.current) {
-      interruptBuffer.current[0] = 0; // Clear previous signals.
+      interruptBuffer.current[0] = 0;
     }
     pyodideWorker.postMessage({ method: "runPython", python: program });
   };
 
   const handleStop = () => {
     if (interruptBuffer.current) {
-      interruptBuffer.current[0] = 2; // Send a SIGINT signal.
+      interruptBuffer.current[0] = 2;
     }
     pyodideWorker.postMessage({ method: "stopPython" });
     disableInput();
@@ -426,6 +517,13 @@ const PyodideRunner = ({ active }) => {
     }
   };
 
+  if (!pyodideWorker) {
+    console.error("PyodideWorker is not initialized");
+    return;
+  } else {
+    console.log("IT WORKED!!");
+  }
+
   return (
     <div
       className={`pythonrunner-container pyodiderunner${
diff --git a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
index 4d846b676..3f65e232e 100644
--- a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
@@ -206,6 +206,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
                     scriptElement.type = "text/javascript";
                     scriptElement.src = path;
                     scriptElement.async = true;
+                    scriptElement.crossOrigin = "";
                     scriptElement.onload = function () {
                       resolve(true);
                     };
diff --git a/webpack.component.config.js b/webpack.component.config.js
index 7fba201b8..0db7c6977 100644
--- a/webpack.component.config.js
+++ b/webpack.component.config.js
@@ -3,6 +3,11 @@ const Dotenv = require("dotenv-webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const WorkerPlugin = require("worker-plugin");
 
+let publicUrl = process.env.PUBLIC_URL || "/";
+if (!publicUrl.endsWith("/")) {
+  publicUrl += "/";
+}
+
 module.exports = {
   entry: {
     "web-component": path.resolve(__dirname, "./src/web-component.js"),
@@ -73,7 +78,12 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, "./build"),
     filename: "[name].js",
-    // publicPath: "http://localhost:3011/",
+    publicPath: publicUrl,
+    workerPublicPath: publicUrl,
+    // wasmLoading: "fetch",
+    // webassemblyModuleFilename: "[id].[hash].wasm",
+    // workerChunkLoading: "import-scripts",
+    // workerWasmLoading: "fetch",
   },
   devServer: {
     host: "0.0.0.0",
@@ -89,18 +99,26 @@ module.exports = {
       "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
       "Access-Control-Allow-Headers":
         "X-Requested-With, content-type, Authorization",
+      // Pyodide - required for input and code interruption - needed on the host app
       "Cross-Origin-Opener-Policy": "same-origin",
       "Cross-Origin-Embedder-Policy": "require-corp",
-      // "Cross-Origin-Resource-Policy": "same-site",
     },
-    // onBeforeSetupMiddleware: function (devServer) {
-    //   devServer.app.use((req, res, next) => {
-    //     res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
-    //     res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
-    //     res.setHeader("Cross-Origin-Resource-Policy", "same-site");
-    //     next();
-    //   });
-    // },
+    setupMiddlewares: (middlewares, devServer) => {
+      devServer.app.use((req, res, next) => {
+        // PyodideWorker scripts - cross origin required on scripts needed for importScripts
+        if (
+          [
+            "/_internal_sense_hat.js",
+            "/pygal.js",
+            "/PyodideWorker.js",
+          ].includes(req.url)
+        ) {
+          res.setHeader("Cross-Origin-Resource-Policy", "cross-origin");
+        }
+        next();
+      });
+      return middlewares;
+    },
   },
   plugins: [
     new WorkerPlugin(),

From 60c9c3fd09fda8f9b177292fdc097e3d31c97e55 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Wed, 16 Oct 2024 09:05:35 +0100
Subject: [PATCH 3/8] refactor(pyodide-libraries): restructure `public`
 directory to ensure a distinction with pyodide files

---
 public/PyodideServiceWorker.js                |  40 ------------------
 .../packages/p5-0.0.1-py3-none-any.whl        | Bin
 .../packages/sense_hat-0.0.1-py3-none-any.whl | Bin
 .../packages/turtle-0.0.1-py3-none-any.whl    | Bin
 .../shims}/_internal_sense_hat.js             |   0
 public/{ => pyodide/shims}/pygal.js           |   0
 src/PyodideWorker.js                          |  10 ++---
 7 files changed, 5 insertions(+), 45 deletions(-)
 delete mode 100644 public/PyodideServiceWorker.js
 rename public/{ => pyodide}/packages/p5-0.0.1-py3-none-any.whl (100%)
 rename public/{ => pyodide}/packages/sense_hat-0.0.1-py3-none-any.whl (100%)
 rename public/{ => pyodide}/packages/turtle-0.0.1-py3-none-any.whl (100%)
 rename public/{ => pyodide/shims}/_internal_sense_hat.js (100%)
 rename public/{ => pyodide/shims}/pygal.js (100%)

diff --git a/public/PyodideServiceWorker.js b/public/PyodideServiceWorker.js
deleted file mode 100644
index 4b8658f49..000000000
--- a/public/PyodideServiceWorker.js
+++ /dev/null
@@ -1,40 +0,0 @@
-self.addEventListener("install", () => {
-  self.skipWaiting();
-});
-
-self.addEventListener("activate", (event) => {
-  event.waitUntil(self.clients.claim());
-});
-
-self.addEventListener("fetch", (event) => {
-  if (
-    event.request.cache === "only-if-cached" &&
-    event.request.mode !== "same-origin"
-  ) {
-    return;
-  }
-
-  console.log(event.request);
-
-  const interceptedRequests = ["pyodide"];
-
-  if (interceptedRequests.some((str) => event.request.url.includes(str))) {
-    event.respondWith(
-      fetch(event.request)
-        .then((response) => {
-          console.log(`Intercepted: ${event.request.url}`);
-
-          const body = response.body;
-          const status = response.status;
-          const headers = new Headers(response.headers);
-          const statusText = response.statusText;
-
-          headers.set("Cross-Origin-Embedder-Policy", "require-corp");
-          headers.set("Cross-Origin-Opener-Policy", "same-origin");
-
-          return new Response(body, { status, statusText, headers });
-        })
-        .catch(console.error),
-    );
-  }
-});
diff --git a/public/packages/p5-0.0.1-py3-none-any.whl b/public/pyodide/packages/p5-0.0.1-py3-none-any.whl
similarity index 100%
rename from public/packages/p5-0.0.1-py3-none-any.whl
rename to public/pyodide/packages/p5-0.0.1-py3-none-any.whl
diff --git a/public/packages/sense_hat-0.0.1-py3-none-any.whl b/public/pyodide/packages/sense_hat-0.0.1-py3-none-any.whl
similarity index 100%
rename from public/packages/sense_hat-0.0.1-py3-none-any.whl
rename to public/pyodide/packages/sense_hat-0.0.1-py3-none-any.whl
diff --git a/public/packages/turtle-0.0.1-py3-none-any.whl b/public/pyodide/packages/turtle-0.0.1-py3-none-any.whl
similarity index 100%
rename from public/packages/turtle-0.0.1-py3-none-any.whl
rename to public/pyodide/packages/turtle-0.0.1-py3-none-any.whl
diff --git a/public/_internal_sense_hat.js b/public/pyodide/shims/_internal_sense_hat.js
similarity index 100%
rename from public/_internal_sense_hat.js
rename to public/pyodide/shims/_internal_sense_hat.js
diff --git a/public/pygal.js b/public/pyodide/shims/pygal.js
similarity index 100%
rename from public/pygal.js
rename to public/pyodide/shims/pygal.js
diff --git a/src/PyodideWorker.js b/src/PyodideWorker.js
index 98bea70f7..42e3b421b 100644
--- a/src/PyodideWorker.js
+++ b/src/PyodideWorker.js
@@ -3,8 +3,8 @@
 // Nest the PyodideWorker function inside a globalThis object so we control when its initialised.
 const PyodideWorker = () => {
   // Import scripts dynamically based on the environment
-  importScripts(`${process.env.PUBLIC_URL}/_internal_sense_hat.js`);
-  importScripts(`${process.env.PUBLIC_URL}/pygal.js`);
+  importScripts(`${process.env.PUBLIC_URL}/pyodide/_internal_sense_hat.js`);
+  importScripts(`${process.env.PUBLIC_URL}/pyodide/pygal.js`);
   importScripts("https://cdn.jsdelivr.net/pyodide/v0.26.2/full/pyodide.js");
 
   const supportsAllFeatures = typeof SharedArrayBuffer !== "undefined";
@@ -165,7 +165,7 @@ const PyodideWorker = () => {
       before: async () => {
         pyodide.registerJsModule("basthon", fakeBasthonPackage);
         await pyodide.loadPackage(
-          `${process.env.ASSETS_URL}/packages/turtle-0.0.1-py3-none-any.whl`,
+          `${process.env.ASSETS_URL}/pyodide/packages/turtle-0.0.1-py3-none-any.whl`,
         );
       },
       after: () =>
@@ -183,7 +183,7 @@ const PyodideWorker = () => {
         pyodide.registerJsModule("basthon", fakeBasthonPackage);
         await pyodide.loadPackage([
           "setuptools",
-          `${process.env.ASSETS_URL}/packages/p5-0.0.1-py3-none-any.whl`,
+          `${process.env.ASSETS_URL}/pyodide/packages/p5-0.0.1-py3-none-any.whl`,
         ]);
       },
       after: () => {},
@@ -204,7 +204,7 @@ const PyodideWorker = () => {
         });
         await pyodide.loadPackage([
           "pillow",
-          `${process.env.ASSETS_URL}/packages/sense_hat-0.0.1-py3-none-any.whl`,
+          `${process.env.ASSETS_URL}/pyodide/packages/sense_hat-0.0.1-py3-none-any.whl`,
         ]);
 
         _internal_sense_hat.config.pyodide = pyodide;

From a674de44405bf341d3b45674952c98ee7c5ee8c4 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Wed, 16 Oct 2024 09:06:41 +0100
Subject: [PATCH 4/8] fix(PyodideWorker): made an error with the refactor

---
 src/PyodideWorker.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/PyodideWorker.js b/src/PyodideWorker.js
index 42e3b421b..197506bfc 100644
--- a/src/PyodideWorker.js
+++ b/src/PyodideWorker.js
@@ -3,8 +3,10 @@
 // Nest the PyodideWorker function inside a globalThis object so we control when its initialised.
 const PyodideWorker = () => {
   // Import scripts dynamically based on the environment
-  importScripts(`${process.env.PUBLIC_URL}/pyodide/_internal_sense_hat.js`);
-  importScripts(`${process.env.PUBLIC_URL}/pyodide/pygal.js`);
+  importScripts(
+    `${process.env.PUBLIC_URL}/pyodide/shims/_internal_sense_hat.js`,
+  );
+  importScripts(`${process.env.PUBLIC_URL}/pyodide/shims/pygal.js`);
   importScripts("https://cdn.jsdelivr.net/pyodide/v0.26.2/full/pyodide.js");
 
   const supportsAllFeatures = typeof SharedArrayBuffer !== "undefined";

From 732c77ecc83c9fc3e1cfe24aab7f19456ee1086e Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Wed, 16 Oct 2024 09:24:34 +0100
Subject: [PATCH 5/8] general tidy up

---
 CHANGELOG.md                                  |   1 +
 src/PyodideWorker.js                          |   3 +-
 .../PyodideRunner/PyodideRunner.jsx           | 238 +-----------
 .../PyodideRunner/PyodideWorker.js            | 358 ------------------
 webpack.component.config.js                   |   4 -
 5 files changed, 15 insertions(+), 589 deletions(-)
 delete mode 100644 src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 02ac382ac..560d5e8f7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- PyodideWorker setup for the editor (#1104)
 - Enabling `pyodide` support in the web component (#1090)
 - `Pyodide` `matplotlib` support (#1087)
 
diff --git a/src/PyodideWorker.js b/src/PyodideWorker.js
index 197506bfc..6d8e1ebe4 100644
--- a/src/PyodideWorker.js
+++ b/src/PyodideWorker.js
@@ -10,7 +10,6 @@ const PyodideWorker = () => {
   importScripts("https://cdn.jsdelivr.net/pyodide/v0.26.2/full/pyodide.js");
 
   const supportsAllFeatures = typeof SharedArrayBuffer !== "undefined";
-  console.log(`crossOriginIsolated: ${globalThis.crossOriginIsolated}`);
 
   // eslint-disable-next-line no-restricted-globals
   if (!supportsAllFeatures && name !== "incremental-features") {
@@ -367,6 +366,6 @@ globalThis.PyodideWorker = PyodideWorker;
 
 if (typeof module !== "undefined") {
   module.exports = {
-    PyodideWorker: PyodideWorker,
+    PyodideWorker,
   };
 }
diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
index d5db329b2..9b67adc00 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import "../../../../../assets/stylesheets/PythonRunner.scss";
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
@@ -17,237 +18,24 @@ import OutputViewToggle from "../OutputViewToggle";
 import { SettingsContext } from "../../../../../utils/settings";
 import RunnerControls from "../../../../RunButton/RunnerControls";
 
-/**
- * A Worker that can be run on a different origin by respecting CORS
- * By default, a Worker constructor that uses an url as its parameters ignores CORS
- * and fails on a different origin.
- * This way we can run web worker on scripts served by a CDN
- */
-export class CorsWorker {
-  /**
-   * @param {string | URL} url - worker script URL
-   * @param {WorkerOptions} [options] - worker options
-   */
-  constructor(url, options) {
-    this.url = url;
-    this.options = options;
-    // const absoluteUrl = new URL(url, window.location.href).toString();
-    // const workerSource = `\
-    //   const urlString = ${JSON.stringify(absoluteUrl)}
-    //   const originURL = new URL(urlString)
-    //   const isValidUrl = (urlString) => {
-    //     try { return Boolean(new URL(urlString, originURL)) } catch(e){ return false }
-    //   }
-    //   const originalImportScripts = self.importScripts
-    //   self.importScripts = (url) => {
-    //     /* see note 1 below */
-    //     if(url.startsWith("blob:") && isValidUrl(url.replace("blob:", ""))){
-    //       const urlWithoutBlob = url.replace("blob:", "")
-    //       const { pathname } = new URL(urlWithoutBlob, originURL)
-    //       url = pathname && pathname.substring(1) /* see note 2 below */
-    //     }
-    //     originalImportScripts.call(self, new URL(url, originURL).toString())
-    //   }
-    //   importScripts(urlString);
-    // `;
-    // const blob = new Blob([workerSource], { type: "application/javascript" });
-    // const objectURL = URL.createObjectURL(blob);
-    // this.worker = new Worker(objectURL, options);
-    // URL.revokeObjectURL(objectURL);
-  }
-
-  getWorker() {
-    return this.worker;
-  }
-
-  async createWorker() {
-    if (!this.url) {
-      console.error("Worker URL is undefined");
-      return;
-    }
-
-    if (!this.options) {
-      console.warn("Worker options are undefined, using default options");
-      this.options = {};
-    }
-
-    try {
-      const response = await fetch(this.url);
-      if (!response.ok) {
-        throw new Error(
-          `Failed to fetch worker script: ${response.statusText}`,
-        );
-      }
-
-      const scriptText = await response.text();
-      const extendedScript = `
-        /* global PyodideWorker */
-        console.log("Worker loading");
-        ${scriptText}
-        const pyodide = PyodideWorker();
-      `;
-
-      const blob = new Blob([extendedScript], {
-        type: "application/javascript",
-      });
-      const objectURL = URL.createObjectURL(blob);
-      const worker = new Worker(objectURL, this.options);
-
-      console.log("Worker created successfully");
-      return worker;
-    } catch (error) {
-      console.error("Error creating worker:", error);
-    }
-  }
-
-  /*
-      The notes here are outside workerSource to not increase the ObjectURL size with
-    long explanations as comments
-
-    Note 1
-    ======
-      Sometimes Webpack will try to import url with "blob:" prefixed and with relative
-    path as absolute path.
-
-      Not only this will cause a security error due to different url, such as a "blob:" 
-    protocol (meaning a CORS error), the path will be wrong. Any of those 2 problems 
-    fails the importScripts. Since we can import JS with blobs, lets just remove "blob:"
-    prefix and fix the URL its content is a valid URL
-
-    Note 2
-    ======
-       URL#pathname always starts with "/", we want to remove the / to be a relative path
-     to the Worker file URL
-
-   */
-}
-
-export class CorsWorker2 {
-  constructor(url) {
-    // Get the public path (if available) - this might be specific to your environment
-    const publicPath =
-      typeof __webpack_public_path__ !== "undefined"
-        ? __webpack_public_path__
-        : "";
-
-    // Create a blob with the worker code, including the public path and imported script
-    const workerCode = `
-      /* global PyodideWorker */
-      const publicPath = ${JSON.stringify(publicPath)};
-      globalThis = new Proxy(globalThis, {
-        get: (target, prop) => prop === 'location' ? publicPath : target[prop]
-      });
-      try {
-        importScripts(${JSON.stringify(url.toString())});
-        const pyodide = PyodideWorker();
-      } catch (e) {
-        console.error('Failed to load script:', e);
-      }
-    `;
-    const blob = new Blob([workerCode], { type: "application/javascript" });
-
-    // Create an object URL for the blob
-    const objectURL = URL.createObjectURL(blob);
-
-    // Create the worker using the object URL
-    this._worker = new Worker(objectURL);
-
-    // Revoke the object URL to release resources
-    URL.revokeObjectURL(objectURL);
-  }
-
-  getWorker() {
-    return this._worker;
-  }
-}
+const getWorkerURL = (url) => {
+  const content = `
+    /* global PyodideWorker */
+    console.log("Worker loading");
+    importScripts("${url}");
+    const pyodide = PyodideWorker();
+    console.log("Worker loaded");
+  `;
+  const blob = new Blob([content], { type: "application/javascript" });
+  return URL.createObjectURL(blob);
+};
 
 const PyodideRunner = (props) => {
-  // const pyodideWorker = new Worker(
-  //   new URL("./PyodideWorker.js", import.meta.url),
-  // );
-
-  // if (!props) {
-  //   return null;
-  // }
-
   const { active } = props;
 
-  const getWorkerURL = (url) => {
-    const content = `
-      /* global PyodideWorker */
-      console.log("Worker loading");
-      importScripts("${url}");
-      const pyodide = PyodideWorker();
-      console.log("Worker loaded");
-    `;
-    const blob = new Blob([content], { type: "application/javascript" });
-    return URL.createObjectURL(blob);
-  };
-
-  // const pyodideWorker = useMemo(
-  //   () =>
-  //     new CorsWorker(new URL("./PyodideWorker.js", import.meta.url), {
-  //       type: "classic",
-  //       name: "PyodideWorker",
-  //     }).getWorker(),
-  //   [],
-  // );
-
-  // Blob approach - works in web component but not in the editor
-  // Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:3011/PyodideWorker.js' failed to load.
-  // const workerUrl = getWorkerURL(`${process.env.PUBLIC_URL}/PyodideWorker.js`);
-  // const pyodideWorker = useMemo(() => new Worker(workerUrl), []);
-
-  // CORS worker - works in web component but not in the editor
-  // Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:3012/en/projects/PyodideWorker.js' failed to load.
-  // const workerUrl = new CorsWorker("./PyodideWorker.js", {
-  // const workerUrl = new CorsWorker(
-  //   `${process.env.PUBLIC_URL}/PyodideWorker.js`,
-  //   {
-  //     type: "classic",
-  //   },
-  // );
-  // const workerUrl = new CorsWorker(
-  //   `${process.env.PUBLIC_URL}/PyodideWorker.js`,
-  // );
-  // const pyodideWorker = useMemo(() => workerUrl.getWorker(), []);
-
-  // CORS worker - async fetch approach - works in both but targeted headers needed for pygal and sense_hat imports
-  // const [pyodideWorker, setPyodideWorker] = useState(null);
-
-  // useMemo(() => {
-  //   const workerUrl = new CorsWorker(
-  //     new URL("/PyodideWorker.js", process.env.PUBLIC_URL),
-  //     { type: "classic" },
-  //   );
-  //   workerUrl
-  //     .createWorker()
-  //     .then((worker) => {
-  //       setPyodideWorker(worker);
-  //     })
-  //     .catch((error) => {
-  //       console.error("Failed to create worker:", error);
-  //     });
-  // }, []);
-
   // Blob approach + targeted headers - no errors but headers required in host app to interrupt code
   const workerUrl = getWorkerURL(`${process.env.PUBLIC_URL}/PyodideWorker.js`);
-  const pyodideWorker = useMemo(() => new Worker(workerUrl), []);
-
-  // Altered CORS worker 2 - works in web component but not in the editor
-  // const pyodideWorker = new CorsWorker2(
-  //   new URL("http://localhost:3011/PyodideWorker.js"),
-  // ).getWorker();
-
-  // pyodideWorker.onerror = (event) => {
-  //   console.error("Worker error:", event);
-  // };
-
-  // DOESN'T WORK
-  // const pyodideWorker = await workerUrl.createWorker();
-  // const pyodideWorker = useMemo(() => workerUrl.createWorker(), []);
-  // const pyodideWorker = useMemo(() => new Worker(PyodideWorker), []);
-  // const pyodideWorker = useMemo(() => new Worker(`./PyodideWorker.js`, []));
+  const pyodideWorker = useMemo(() => new Worker(workerUrl), [workerUrl]);
 
   const interruptBuffer = useRef();
   const stdinBuffer = useRef();
diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.js b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.js
deleted file mode 100644
index b52d4f373..000000000
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.js
+++ /dev/null
@@ -1,358 +0,0 @@
-/* global globalThis, importScripts, loadPyodide, SharedArrayBuffer, Atomics, pygal, _internal_sense_hat */
-
-// Nest the PyodideWorker function inside a globalThis object so we control when its initialised.
-// Import scripts dynamically based on the environment
-importScripts(`${process.env.PUBLIC_URL}/_internal_sense_hat.js`);
-importScripts(`${process.env.PUBLIC_URL}/pygal.js`);
-importScripts("https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js");
-
-const supportsAllFeatures = typeof SharedArrayBuffer !== "undefined";
-
-// eslint-disable-next-line no-restricted-globals
-if (!supportsAllFeatures && name !== "incremental-features") {
-  console.warn(
-    [
-      "The code editor will not be able to capture standard input or stop execution because these HTTP headers are not set:",
-      "  - Cross-Origin-Opener-Policy: same-origin",
-      "  - Cross-Origin-Embedder-Policy: require-corp",
-      "",
-      "If your app can cope with or without these features, please initialize the web worker with { name: 'incremental-features' } to silence this warning.",
-      "You can then check for the presence of { stdinBuffer, interruptBuffer } in the handleLoaded message to check whether these features are supported.",
-      "",
-      "If you definitely need these features, either configure your server to respond with the HTTP headers above, or register a service worker.",
-      "Once the HTTP headers are set, the browser will block cross-domain resources so you will need to add 'crossorigin' to <script> and other tags.",
-      "You may wish to scope the HTTP headers to only those pages that host the code editor to make the browser restriction easier to deal with.",
-      "",
-      "Please refer to these code snippets for registering a service worker:",
-      "  - https://github.com/RaspberryPiFoundation/python-execution-prototypes/blob/fd2c50e032cba3bb0e92e19a88eb62e5b120fe7a/pyodide/index.html#L92-L98",
-      "  - https://github.com/RaspberryPiFoundation/python-execution-prototypes/blob/fd2c50e032cba3bb0e92e19a88eb62e5b120fe7a/pyodide/serviceworker.js",
-    ].join("\n"),
-  );
-}
-let pyodide, pyodidePromise, stdinBuffer, interruptBuffer, stopped;
-
-const onmessage = async ({ data }) => {
-  pyodide = await pyodidePromise;
-  let encoder = new TextEncoder();
-
-  switch (data.method) {
-    case "writeFile":
-      pyodide.FS.writeFile(data.filename, encoder.encode(data.content));
-      break;
-    case "runPython":
-      runPython(data.python);
-      break;
-    case "stopPython":
-      stopped = true;
-      break;
-    default:
-      throw new Error(`Unsupported method: ${data.method}`);
-  }
-};
-
-// eslint-disable-next-line no-restricted-globals
-addEventListener("message", async (event) => {
-  onmessage(event);
-});
-
-const runPython = async (python) => {
-  stopped = false;
-  await pyodide.runPythonAsync(`
-    old_input = input
-
-    def patched_input(prompt=False):
-        if (prompt):
-            print(prompt)
-        return old_input()
-
-    __builtins__.input = patched_input
-    `);
-
-  try {
-    await withSupportForPackages(python, async () => {
-      await pyodide.runPython(python);
-    });
-  } catch (error) {
-    if (!(error instanceof pyodide.ffi.PythonError)) {
-      throw error;
-    }
-    postMessage({ method: "handleError", ...parsePythonError(error) });
-  }
-
-  await reloadPyodideToClearState();
-};
-
-const checkIfStopped = () => {
-  if (stopped) {
-    throw new pyodide.ffi.PythonError("KeyboardInterrupt");
-  }
-};
-
-const withSupportForPackages = async (python, runPythonFn = async () => {}) => {
-  const imports = await pyodide._api.pyodide_code.find_imports(python).toJs();
-  await Promise.all(imports.map((name) => loadDependency(name)));
-
-  checkIfStopped();
-  await pyodide.loadPackagesFromImports(python);
-
-  checkIfStopped();
-  await runPythonFn();
-
-  for (let name of imports) {
-    checkIfStopped();
-    await vendoredPackages[name]?.after();
-  }
-};
-
-const loadDependency = async (name) => {
-  checkIfStopped();
-
-  // If the import is for another user file then open it and load its dependencies.
-  if (pyodide.FS.readdir("/home/pyodide").includes(`${name}.py`)) {
-    const fileContent = pyodide.FS.readFile(`/home/pyodide/${name}.py`, {
-      encoding: "utf8",
-    });
-    await withSupportForPackages(fileContent);
-    return;
-  }
-
-  // If the import is for a vendored package then run its .before() hook.
-  const vendoredPackage = vendoredPackages[name];
-  await vendoredPackage?.before();
-  if (vendoredPackage) {
-    return;
-  }
-
-  // If the import is for a module built into Python then do nothing.
-  let pythonModule;
-  try {
-    pythonModule = pyodide.pyimport(name);
-  } catch (_) {}
-  if (pythonModule) {
-    return;
-  }
-
-  // If the import is for a package built into Pyodide then load it.
-  // Built-ins: https://pyodide.org/en/stable/usage/packages-in-pyodide.html
-  await pyodide.loadPackage(name)?.catch(() => {});
-  let pyodidePackage;
-  try {
-    pyodidePackage = pyodide.pyimport(name);
-  } catch (_) {}
-  if (pyodidePackage) {
-    return;
-  }
-
-  // Ensure micropip is loaded which can fetch packages from PyPi.
-  // See: https://pyodide.org/en/stable/usage/loading-packages.html
-  if (!pyodide.micropip) {
-    await pyodide.loadPackage("micropip");
-    pyodide.micropip = pyodide.pyimport("micropip");
-  }
-
-  // If the import is for a PyPi package then load it.
-  // Otherwise, don't error now so that we get an error later from Python.
-  await pyodide.micropip.install(name).catch(() => {});
-};
-
-const vendoredPackages = {
-  turtle: {
-    before: async () => {
-      pyodide.registerJsModule("basthon", fakeBasthonPackage);
-      await pyodide.loadPackage(
-        `${process.env.ASSETS_URL}/packages/turtle-0.0.1-py3-none-any.whl`,
-      );
-    },
-    after: () =>
-      pyodide.runPython(`
-        import turtle
-        import basthon
-
-        svg_dict = turtle.Screen().show_scene()
-        basthon.kernel.display_event({ "display_type": "turtle", "content": svg_dict })
-        turtle.restart()
-      `),
-  },
-  p5: {
-    before: async () => {
-      pyodide.registerJsModule("basthon", fakeBasthonPackage);
-      await pyodide.loadPackage([
-        "setuptools",
-        `${process.env.ASSETS_URL}/packages/p5-0.0.1-py3-none-any.whl`,
-      ]);
-    },
-    after: () => {},
-  },
-  pygal: {
-    before: () => {
-      pyodide.registerJsModule("pygal", { ...pygal });
-      pygal.config.renderChart = (content) => {
-        postMessage({ method: "handleVisual", origin: "pygal", content });
-      };
-    },
-    after: () => {},
-  },
-  sense_hat: {
-    before: async () => {
-      pyodide.registerJsModule("_internal_sense_hat", {
-        ..._internal_sense_hat,
-      });
-      await pyodide.loadPackage([
-        "pillow",
-        `${process.env.ASSETS_URL}/packages/sense_hat-0.0.1-py3-none-any.whl`,
-      ]);
-
-      _internal_sense_hat.config.pyodide = pyodide;
-      _internal_sense_hat.config.emit = (type) =>
-        postMessage({ method: "handleSenseHatEvent", type });
-    },
-    after: () => {
-      const {
-        pyodide,
-        emit,
-        sensestick,
-        start_motion_callback,
-        stop_motion_callback,
-        ...config
-      } = _internal_sense_hat.config;
-      postMessage({
-        method: "handleVisual",
-        origin: "sense_hat",
-        content: config,
-      });
-    },
-  },
-  matplotlib: {
-    before: async () => {
-      pyodide.registerJsModule("basthon", fakeBasthonPackage);
-      // Patch the document object to prevent matplotlib from trying to render. Since we are running in a web worker,
-      // the document object is not available. We will instead capture the image and send it back to the main thread.
-      pyodide.runPython(`
-        import js
-
-        class DummyDocument:
-            def __init__(self, *args, **kwargs) -> None:
-                return
-            def __getattr__(self, __name: str):
-                return DummyDocument
-        js.document = DummyDocument()
-        `);
-      await pyodide.loadPackage("matplotlib")?.catch(() => {});
-      let pyodidePackage;
-      try {
-        pyodidePackage = pyodide.pyimport("matplotlib");
-      } catch (_) {}
-      if (pyodidePackage) {
-        return;
-      }
-    },
-    after: () => {
-      pyodide.runPython(`
-        import matplotlib.pyplot as plt
-        import io
-        import basthon
-
-        bytes_io = io.BytesIO()
-        plt.savefig(bytes_io, format='jpg')
-        bytes_io.seek(0)
-        basthon.kernel.display_event({ "display_type": "matplotlib", "content": bytes_io.read() })
-        `);
-    },
-  },
-};
-
-const fakeBasthonPackage = {
-  kernel: {
-    display_event: (event) => {
-      const origin = event.toJs().get("display_type");
-      const content = event.toJs().get("content");
-
-      postMessage({ method: "handleVisual", origin, content });
-    },
-    locals: () => pyodide.runPython("globals()"),
-  },
-};
-
-const reloadPyodideToClearState = async () => {
-  postMessage({ method: "handleLoading" });
-
-  pyodidePromise = loadPyodide({
-    stdout: (content) =>
-      postMessage({ method: "handleOutput", stream: "stdout", content }),
-    stderr: (content) =>
-      postMessage({ method: "handleOutput", stream: "stderr", content }),
-  });
-
-  pyodide = await pyodidePromise;
-
-  if (supportsAllFeatures) {
-    stdinBuffer =
-      stdinBuffer || new Int32Array(new SharedArrayBuffer(1024 * 1024)); // 1 MiB
-    stdinBuffer[0] = 1; // Store the length of content in the buffer at index 0.
-    pyodide.setStdin({ isatty: true, read: readFromStdin });
-
-    interruptBuffer =
-      interruptBuffer || new Uint8Array(new SharedArrayBuffer(1));
-    pyodide.setInterruptBuffer(interruptBuffer);
-  }
-
-  postMessage({ method: "handleLoaded", stdinBuffer, interruptBuffer });
-};
-
-const readFromStdin = (bufferToWrite) => {
-  const previousLength = stdinBuffer[0];
-  postMessage({ method: "handleInput" });
-
-  while (true) {
-    pyodide.checkInterrupt();
-    const result = Atomics.wait(stdinBuffer, 0, previousLength, 100);
-    if (result === "not-equal") {
-      break;
-    }
-  }
-
-  const currentLength = stdinBuffer[0];
-  if (currentLength === -1) {
-    return 0;
-  } // Signals that stdin was closed.
-
-  const addedBytes = stdinBuffer.slice(previousLength, currentLength);
-  bufferToWrite.set(addedBytes);
-
-  return addedBytes.length;
-};
-
-const parsePythonError = (error) => {
-  const type = error.type;
-  const [trace, info] = error.message.split(`${type}:`).map((s) => s?.trim());
-
-  const lines = trace.split("\n");
-
-  const snippetLine = lines[lines.length - 2]; //    print("hi")invalid
-  const caretLine = lines[lines.length - 1]; //                 ^^^^^^^
-
-  const showsMistake = caretLine.includes("^");
-  const mistake = showsMistake
-    ? [snippetLine.slice(4), caretLine.slice(4)].join("\n")
-    : "";
-
-  const matches = [...trace.matchAll(/File "(.*)", line (\d+)/g)];
-  const match = matches[matches.length - 1];
-
-  const path = match ? match[1] : "";
-  const base = path.split("/").reverse()[0];
-  const file = base === "<exec>" ? "main.py" : base;
-
-  const line = match ? parseInt(match[2], 10) : "";
-
-  return { file, line, mistake, type, info };
-};
-
-reloadPyodideToClearState();
-
-if (typeof module !== "undefined") {
-  module.exports = {
-    postMessage,
-    onmessage,
-  };
-}
diff --git a/webpack.component.config.js b/webpack.component.config.js
index 0db7c6977..b4cd162fc 100644
--- a/webpack.component.config.js
+++ b/webpack.component.config.js
@@ -80,10 +80,6 @@ module.exports = {
     filename: "[name].js",
     publicPath: publicUrl,
     workerPublicPath: publicUrl,
-    // wasmLoading: "fetch",
-    // webassemblyModuleFilename: "[id].[hash].wasm",
-    // workerChunkLoading: "import-scripts",
-    // workerWasmLoading: "fetch",
   },
   devServer: {
     host: "0.0.0.0",

From 5f2998a353d8a1f95a2a1190770cdcfc7dd2e5f7 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Wed, 16 Oct 2024 09:45:01 +0100
Subject: [PATCH 6/8] fix(PyodideWorker): minor fixes needed after tidy up and
 refactor

---
 .../Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx      | 2 +-
 webpack.component.config.js                                   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
index 9b67adc00..680efd6e2 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
@@ -35,7 +35,7 @@ const PyodideRunner = (props) => {
 
   // Blob approach + targeted headers - no errors but headers required in host app to interrupt code
   const workerUrl = getWorkerURL(`${process.env.PUBLIC_URL}/PyodideWorker.js`);
-  const pyodideWorker = useMemo(() => new Worker(workerUrl), [workerUrl]);
+  const pyodideWorker = useMemo(() => new Worker(workerUrl), []);
 
   const interruptBuffer = useRef();
   const stdinBuffer = useRef();
diff --git a/webpack.component.config.js b/webpack.component.config.js
index b4cd162fc..2398de42d 100644
--- a/webpack.component.config.js
+++ b/webpack.component.config.js
@@ -104,8 +104,8 @@ module.exports = {
         // PyodideWorker scripts - cross origin required on scripts needed for importScripts
         if (
           [
-            "/_internal_sense_hat.js",
-            "/pygal.js",
+            "/pyodide/shims/_internal_sense_hat.js",
+            "/pyodide/shims/pygal.js",
             "/PyodideWorker.js",
           ].includes(req.url)
         ) {

From 28a493adcc38c746235b5bb1e956fbdc05ba3fe9 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Wed, 16 Oct 2024 09:51:35 +0100
Subject: [PATCH 7/8] PyodideRunner - remove console log

---
 .../Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
index 680efd6e2..41bf7808e 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
@@ -308,8 +308,6 @@ const PyodideRunner = (props) => {
   if (!pyodideWorker) {
     console.error("PyodideWorker is not initialized");
     return;
-  } else {
-    console.log("IT WORKED!!");
   }
 
   return (

From 9dba0f51402ba925b33ad726542488ce795aae97 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Thu, 17 Oct 2024 14:37:27 +0100
Subject: [PATCH 8/8] review comments

---
 src/PyodideWorker.js                                     | 4 ++--
 .../Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx | 9 ++++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/PyodideWorker.js b/src/PyodideWorker.js
index 6d8e1ebe4..61091e3e9 100644
--- a/src/PyodideWorker.js
+++ b/src/PyodideWorker.js
@@ -4,9 +4,9 @@
 const PyodideWorker = () => {
   // Import scripts dynamically based on the environment
   importScripts(
-    `${process.env.PUBLIC_URL}/pyodide/shims/_internal_sense_hat.js`,
+    `${process.env.ASSETS_URL}/pyodide/shims/_internal_sense_hat.js`,
   );
-  importScripts(`${process.env.PUBLIC_URL}/pyodide/shims/pygal.js`);
+  importScripts(`${process.env.ASSETS_URL}/pyodide/shims/pygal.js`);
   importScripts("https://cdn.jsdelivr.net/pyodide/v0.26.2/full/pyodide.js");
 
   const supportsAllFeatures = typeof SharedArrayBuffer !== "undefined";
diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
index 41bf7808e..8bb232feb 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
@@ -130,6 +130,8 @@ const PyodideRunner = (props) => {
   };
 
   const handleInput = async () => {
+    // TODO: Sk.sense_hat.mz_criteria.noInputEvents = false;
+
     if (stdinClosed.current) {
       stdinBuffer.current[0] = -1;
       return;
@@ -151,7 +153,7 @@ const PyodideRunner = (props) => {
     stdinBuffer.current[0] = currentLength;
 
     if (ctrlD) {
-      stdinClosed.current = true;
+      stdinClosed.current = true; // Don't accept any more stdin this run.
     }
   };
 
@@ -212,19 +214,20 @@ const PyodideRunner = (props) => {
       writeFile([name, extension].join("."), content);
     }
 
+    // program is the content of the component with name main and extension py
     const program = projectCode.find(
       (component) => component.name === "main" && component.extension === "py",
     ).content;
 
     if (interruptBuffer.current) {
-      interruptBuffer.current[0] = 0;
+      interruptBuffer.current[0] = 0; // Clear previous signals.
     }
     pyodideWorker.postMessage({ method: "runPython", python: program });
   };
 
   const handleStop = () => {
     if (interruptBuffer.current) {
-      interruptBuffer.current[0] = 2;
+      interruptBuffer.current[0] = 2; // Send a SIGINT signal.
     }
     pyodideWorker.postMessage({ method: "stopPython" });
     disableInput();