Spike: Investigate using pyodide dynamically

CHANGELOG.md

@@ -10,6 +10,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Support to enable embedding iframes in HTML projects from in-house domains (#985)
 - Unit tests for `pyodide` runner (#976)
+- Dynamic switching between `pyodide` and `skulpt` based on user imports (#937)
+
+### Changed
+
+- Runner defaults to `pyodide` (#937)
 
 ## [0.22.2] - 2024-03-18
 

cypress/e2e/missionZero-wc.cy.js

@@ -34,10 +34,7 @@ it("loads the sense hat library", () => {
 });
 
 it("sets initial criteria correctly", () => {
-  cy.get("editor-wc")
-    .shadow()
-    .find("div[class=cm-content]")
-    .invoke("text", "from sense_hat import SenseHat");
+  cy.get("editor-wc").shadow().find("div[class=cm-content]").invoke("text", "");
   cy.get("editor-wc").shadow().find(".btn--run").click();
   cy.get("#results").should(
     "contain",
@@ -100,7 +97,10 @@ it("resets criteria correctly", () => {
     );
   cy.get("editor-wc").shadow().find(".btn--run").contains("Run").click();
   cy.get("#results").should("contain", '"readPressure":true');
-  cy.get("editor-wc").shadow().find("div[class=cm-content]").invoke("text", "");
+  cy.get("editor-wc")
+    .shadow()
+    .find("div[class=cm-content]")
+    .invoke("text", "from sense_hat import SenseHat");
   cy.get("editor-wc").shadow().find(".btn--run").contains("Run").click();
   cy.get("#results").should(
     "contain",
@@ -139,7 +139,13 @@ it("picks up calls to input()", () => {
     .find("div[class=cm-content]")
     .invoke("text", "input()");
   cy.get("editor-wc").shadow().find(".btn--run").click();
-  cy.get("editor-wc").shadow().contains("Text output").click();
+  cy.get("editor-wc")
+    .shadow()
+    .find(
+      "div[class='pythonrunner-container skulptrunner skulptrunner--active']",
+    )
+    .contains("Text output")
+    .click();
   cy.get("editor-wc")
     .shadow()
     .find("span[contenteditable=true]")
@@ -174,7 +180,7 @@ it("does not return null duration if no change in focus", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.send_message("a")',
+      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.show_message("a")',
     );
   cy.get("editor-wc").shadow().find(".btn--run").click();
   cy.get("#results").should("not.contain", '"duration":null');
@@ -186,7 +192,7 @@ it("does not return null duration if focus changed before code run", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.send_message("a")',
+      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.show_message("a")',
     );
   cy.window().blur();
   cy.window().focus();
@@ -200,7 +206,7 @@ it("returns duration of null if focus is lost", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.send_message("a")',
+      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.show_message("a")',
     );
   cy.get("editor-wc").shadow().find(".btn--run").click();
   cy.window().blur();
@@ -214,7 +220,7 @@ it("does not return duration of null if code rerun after focus lost", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.send_message("a")',
+      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.show_message("a")',
     );
   cy.get("editor-wc").shadow().find(".btn--run").click();
   cy.window().blur();

cypress/e2e/spec-wc.cy.js

@@ -76,7 +76,10 @@ it("does not render astro pi component if sense hat unimported", () => {
     .find("div[class=cm-content]")
     .invoke("text", "import sense_hat");
   cy.get("editor-wc").shadow().find(".btn--run").click();
-  cy.get("editor-wc").shadow().find("div[class=cm-content]").invoke("text", "");
+  cy.get("editor-wc")
+    .shadow()
+    .find("div[class=cm-content]")
+    .invoke("text", "import p5");
   cy.get("editor-wc").shadow().find(".btn--run").click();
   cy.get("editor-wc").shadow().contains("Visual output").click();
   cy.get("editor-wc").shadow().find("#root").should("not.contain", "yaw");

src/assets/stylesheets/ErrorMessage.scss

@@ -5,6 +5,7 @@
   color: #7e0305;
   background-color: #fde2e1;
   padding: $space-0-75 $space-1-25;
+  overflow-y: auto;
 
   &__content {
     padding: 0;

src/components/Editor/Output/Output.jsx

@@ -9,16 +9,12 @@ const Output = () => {
   const isEmbedded = useSelector((state) => state.editor.isEmbedded);
   const searchParams = new URLSearchParams(window.location.search);
   const isBrowserPreview = searchParams.get("browserPreview") === "true";
-  const usePyodide = searchParams.get("pyodide") === "true";
 
   return (
     <>
       <ExternalFiles />
       <div className="proj-runner-container">
-        <RunnerFactory
-          projectType={project.project_type}
-          usePyodide={usePyodide}
-        />
+        <RunnerFactory projectType={project.project_type} />
         {isEmbedded && !isBrowserPreview ? <RunBar embedded /> : null}
       </div>
     </>

src/components/Editor/Runners/PyodideRunner/PyodideRunner.jsx → src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx

@@ -1,26 +1,26 @@
 /* eslint import/no-webpack-loader-syntax: off */
 /* eslint-disable react-hooks/exhaustive-deps */
 
-import "../../../../assets/stylesheets/PythonRunner.scss";
+import "../../../../../assets/stylesheets/PythonRunner.scss";
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 import {
   setError,
   codeRunHandled,
   loadingRunner,
-} from "../../../../redux/EditorSlice";
+} from "../../../../../redux/EditorSlice";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import { useMediaQuery } from "react-responsive";
-import { MOBILE_MEDIA_QUERY } from "../../../../utils/mediaQueryBreakpoints";
-import ErrorMessage from "../../ErrorMessage/ErrorMessage";
-import { createError } from "../../../../utils/apiCallHandler";
+import { MOBILE_MEDIA_QUERY } from "../../../../../utils/mediaQueryBreakpoints";
+import ErrorMessage from "../../../ErrorMessage/ErrorMessage";
+import { createError } from "../../../../../utils/apiCallHandler";
 import VisualOutputPane from "./VisualOutputPane";
-import OutputViewToggle from "../PythonRunner/OutputViewToggle";
-import { SettingsContext } from "../../../../utils/settings";
-import RunnerControls from "../../../RunButton/RunnerControls";
+import OutputViewToggle from "../OutputViewToggle";
+import { SettingsContext } from "../../../../../utils/settings";
+import RunnerControls from "../../../../RunButton/RunnerControls";
 
-const PyodideRunner = () => {
+const PyodideRunner = ({ active }) => {
   const pyodideWorker = useMemo(
     () => new Worker("./PyodideWorker.js", { type: "module" }),
     [],
@@ -47,6 +47,7 @@ const PyodideRunner = () => {
   const showVisualTab = queryParams.get("show_visual_tab") === "true";
   const [hasVisual, setHasVisual] = useState(showVisualTab || senseHatAlways);
   const [visuals, setVisuals] = useState([]);
+  const [showRunner, setShowRunner] = useState(active);
 
   useEffect(() => {
     pyodideWorker.onmessage = ({ data }) => {
@@ -79,13 +80,20 @@ const PyodideRunner = () => {
   }, []);
 
   useEffect(() => {
-    if (codeRunTriggered) {
+    if (codeRunTriggered && active) {
+      console.log("running with pyodide");
       handleRun();
     }
   }, [codeRunTriggered]);
 
   useEffect(() => {
-    if (codeRunStopped) {
+    if (codeRunTriggered) {
+      setShowRunner(active);
+    }
+  }, [codeRunTriggered]);
+
+  useEffect(() => {
+    if (codeRunStopped && active) {
       handleStop();
     }
   }, [codeRunStopped]);
@@ -116,7 +124,7 @@ const PyodideRunner = () => {
     const { content, ctrlD } = await getInputContent(element);
 
     const encoder = new TextEncoder();
-    const bytes = encoder.encode(content + "\r\n");
+    const bytes = encoder.encode(content + "\n");
 
     const previousLength = stdinBuffer.current[0];
     stdinBuffer.current.set(bytes, previousLength);
@@ -278,7 +286,12 @@ const PyodideRunner = () => {
   };
 
   return (
-    <div className={`pythonrunner-container`}>
+    <div
+      className={`pythonrunner-container pyodiderunner${
+        active ? " pyodiderunner--active" : ""
+      }`}
+      style={{ display: showRunner ? "flex" : "none" }}
+    >
       {isSplitView ? (
         <>
           {hasVisual && (

src/components/Editor/Runners/PyodideRunner/PyodideRunner.test.js → src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js

@@ -4,7 +4,7 @@ import configureStore from "redux-mock-store";
 import PyodideRunner from "./PyodideRunner";
 import { Provider } from "react-redux";
 import PyodideWorker, { postMessage } from "./PyodideWorker.mock.js";
-import { setError } from "../../../../redux/EditorSlice.js";
+import { setError } from "../../../../../redux/EditorSlice.js";
 
 jest.mock("fs");
 
@@ -25,19 +25,25 @@ const initialState = {
   auth: {},
 };
 
-describe("When first loaded", () => {
+describe("When active and first loaded", () => {
   beforeEach(() => {
     const store = mockStore(initialState);
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
   });
 
   test("it renders successfully", () => {
     expect(screen.queryByText("output.textOutput")).toBeInTheDocument();
   });
+
+  test("it has style display: flex", () => {
+    expect(document.querySelector(".pyodiderunner")).toHaveStyle(
+      "display: flex",
+    );
+  });
 });
 
 describe("When a code run has been triggered", () => {
@@ -55,7 +61,7 @@ describe("When a code run has been triggered", () => {
     });
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
   });
@@ -94,7 +100,7 @@ describe("When the code has been stopped", () => {
     });
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
   });
@@ -112,7 +118,7 @@ describe("When loading pyodide", () => {
     store = mockStore(initialState);
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
 
@@ -131,7 +137,7 @@ describe("When pyodide has loaded", () => {
     store = mockStore(initialState);
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
 
@@ -151,7 +157,7 @@ describe("When input is required", () => {
     store = mockStore(initialState);
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
 
@@ -192,7 +198,7 @@ describe("When output is received", () => {
     store = mockStore(initialState);
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
 
@@ -215,7 +221,7 @@ describe("When visual output is received", () => {
     store = mockStore(initialState);
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
 
@@ -247,7 +253,7 @@ describe("When an error is received", () => {
     store = mockStore(initialState);
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
 
@@ -279,7 +285,7 @@ describe("When the code run is interrupted", () => {
     store = mockStore(initialState);
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
 
@@ -302,3 +308,38 @@ describe("When the code run is interrupted", () => {
     );
   });
 });
+
+describe("When not active and first loaded", () => {
+  beforeEach(() => {
+    const store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+        <PyodideRunner active={false} />,
+      </Provider>,
+    );
+  });
+
+  test("it renders with display: none", () => {
+    expect(document.querySelector(".pyodiderunner")).toHaveStyle(
+      "display: none",
+    );
+  });
+});
+
+describe("When not active and code run triggered", () => {
+  beforeEach(() => {
+    const store = mockStore({
+      ...initialState,
+      editor: { ...initialState.editor, codeRunTriggered: true },
+    });
+    render(
+      <Provider store={store}>
+        <PyodideRunner active={false} />,
+      </Provider>,
+    );
+  });
+
+  test("it does not send a message to the worker to run the python code", () => {
+    expect(postMessage).not.toHaveBeenCalled();
+  });
+});

src/components/Editor/Runners/PyodideRunner/PyodideWorker.js → src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.js

@@ -183,8 +183,9 @@ const vendoredPackages = {
   pygal: {
     before: () => {
       pyodide.registerJsModule("pygal", { ...pygal });
-      pygal.config.renderChart = (content) =>
+      pygal.config.renderChart = (content) => {
         postMessage({ method: "handleVisual", origin: "pygal", content });
+      };
     },
     after: () => {},
   },