Merge branch 'main' into 419/sidebar

Author: loiswells97

CHANGELOG.md

@@ -6,9 +6,31 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+### Added
+ 
+- Fake translation for stress testing (#1206)
+
 ### Fixed
 - Styling issue on sidebar on mobile (#1194)
 
+## [0.30.0] - 2025-04-15
+
+### Added
+
+- `editor-projectLoadFailed` custom event that fires when a project completely fails to load (#1201)
+- Added runnerBeingLoaded state to prevent race condition overwrites (#1205)
+
+### Fixed
+
+- Bugs in append mode for writing to files in python (#1200)
+- `turtle` bug that did not display output on first code run (#1203)
+
+## [0.29.1] - 2025-02-21
+
+### Fixed
+
+- Fixed sidebar not correctly reopening (#1196)
+
 ## [0.29.0] - 2025-02-06
 
 ### Added
@@ -1065,7 +1087,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Events in Web Component indicating whether Mission Zero criteria have been met (#113)
 
-[unreleased]: https://github.com/RaspberryPiFoundation/editor-ui/compare/v0.29.0...HEAD
+[unreleased]: https://github.com/RaspberryPiFoundation/editor-ui/compare/v0.29.1...HEAD
+[0.30.0]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.30.0
+[0.29.1]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.29.1
 [0.29.0]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.29.0
 [0.28.14]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.28.14
 [0.28.13]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.28.13

cypress/e2e/spec-wc-skulpt.cy.js

@@ -38,7 +38,7 @@ describe("Running the code with skulpt", () => {
       .shadow()
       .find(".skulptrunner")
       .contains(".react-tabs__tab", "Visual output")
-      .should("not.exist");
+      .should("not.be.visible");
     cy.get("editor-wc")
       .shadow()
       .find(".skulptrunner")

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raspberrypifoundation/editor-ui",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.7.8",

src/PyodideWorker.js

@@ -116,7 +116,7 @@ const PyodideWorker = () => {
                       self.content += content
                       if len(self.content) > MAX_FILE_SIZE:
                           raise OSError(f"File '{self.filename}' exceeds maximum file size of {MAX_FILE_SIZE} bytes")
-                      with _original_open(self.filename, "w") as f:
+                      with _original_open(self.filename, mode) as f:
                           f.write(self.content)
                       basthon.kernel.write_file({ "filename": self.filename, "content": self.content, "mode": mode })
 

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

@@ -223,7 +223,7 @@ const PyodideRunner = ({ active, outputPanels = ["text", "visual"] }) => {
       updatedContent = content;
     } else if (mode === "a") {
       updatedContent =
-        (componentToUpdate ? componentToUpdate.content + "\n" : "") + content;
+        (componentToUpdate ? componentToUpdate.content : "") + content;
     }
 
     if (componentToUpdate) {

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

@@ -307,7 +307,7 @@ describe("When file write event is received", () => {
     worker.postMessageFromWorker({
       method: "handleFileWrite",
       filename: "existing_file.txt",
-      content: "new content",
+      content: "\nnew content",
       mode: "a",
     });
     expect(dispatchSpy).toHaveBeenCalledWith({
@@ -364,7 +364,7 @@ describe("When file write event is received", () => {
     worker.postMessageFromWorker({
       method: "handleFileWrite",
       filename: "existing_file.txt",
-      content: "new content",
+      content: "\nnew content",
       mode: "a",
     });
     expect(dispatchSpy).toHaveBeenCalledWith({

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

@@ -6,6 +6,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 
 import { loadingRunner } from "../../../../redux/EditorSlice";
+import { getPythonImports } from "../../../../utils/getPythonImports";
 
 const SKULPT_ONLY_MODULES = [
   "p5",
@@ -45,33 +46,11 @@ const PythonRunner = ({ outputPanels = ["text", "visual"] }) => {
       setSkulptFallback(true);
       return;
     }
-    const getImports = (code) => {
-      const codeWithoutMultilineStrings = code.replace(
-        /'''[\s\S]*?'''|"""[\s\S]*?"""/gm,
-        "",
-      );
-      const importRegex =
-        /(?<=^\s*)(from\s+([a-zA-Z0-9_.]+)(\s+import\s+([a-zA-Z0-9_.]+))?)|(?<=^\s*)(import\s+([a-zA-Z0-9_.]+))/gm;
-      const matches = codeWithoutMultilineStrings.match(importRegex);
-      const imports = matches
-        ? matches.map(
-            (match) =>
-              match
-                .split(/from|import/)
-                .filter(Boolean)
-                .map((s) => s.trim())[0],
-          )
-        : [];
-      if (code.includes(`# ${t("input.comment.py5")}`)) {
-        imports.push("py5_imported");
-      }
-      return imports;
-    };
 
     for (const component of project.components || []) {
       if (component.extension === "py" && !codeRunTriggered) {
         try {
-          const imports = getImports(component.content);
+          const imports = getPythonImports(component.content, t);
           const hasSkulptOnlyModules = imports.some((name) =>
             SKULPT_ONLY_MODULES.includes(name),
           );

src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx

@@ -24,6 +24,7 @@ import OutputViewToggle from "../OutputViewToggle";
 import { SettingsContext } from "../../../../../utils/settings";
 import RunnerControls from "../../../../RunButton/RunnerControls";
 import { MOBILE_MEDIA_QUERY } from "../../../../../utils/mediaQueryBreakpoints";
+import { getPythonImports } from "../../../../../utils/getPythonImports";
 
 const externalLibraries = {
   "./pygal/__init__.js": {
@@ -55,6 +56,15 @@ const externalLibraries = {
   },
 };
 
+const VISUAL_LIBRARIES = [
+  "pygal",
+  "py5",
+  "py5_imported",
+  "p5",
+  "sense_hat",
+  "turtle",
+];
+
 const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   const loadedRunner = useSelector((state) => state.editor.loadedRunner);
   const projectCode = useSelector((state) => state.editor.project.components);
@@ -83,10 +93,31 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   const settings = useContext(SettingsContext);
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
 
+  const project = useSelector((state) => state.editor.project);
+
+  const testForVisualImports = (project) => {
+    for (const component of project.components || []) {
+      if (component.extension === "py") {
+        try {
+          const imports = getPythonImports(component.content, t);
+          const hasVisualImports = imports.some((name) =>
+            VISUAL_LIBRARIES.includes(name),
+          );
+          if (hasVisualImports) {
+            return true;
+          }
+        } catch (error) {
+          console.error("Error occurred while getting imports:", error);
+        }
+      }
+    }
+    return false;
+  };
+
   const [codeHasVisualOutput, setCodeHasVisualOutput] = useState(
-    senseHatAlwaysEnabled,
+    !!senseHatAlwaysEnabled || testForVisualImports(project),
   );
-  const [showVisualOutput, setShowVisualOutput] = useState(true);
+  const [showVisualOutput, setShowVisualOutput] = useState(codeHasVisualOutput);
 
   const getInput = () => {
     const pageInput = document.getElementById("input");
@@ -96,6 +127,14 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
     return pageInput || webComponentInput;
   };
 
+  useEffect(() => {
+    if (!codeRunTriggered) {
+      setCodeHasVisualOutput(
+        !!senseHatAlwaysEnabled || testForVisualImports(project),
+      );
+    }
+  }, [project, codeRunTriggered, senseHatAlwaysEnabled, t]);
+
   useEffect(() => {
     if (active && loadedRunner !== "skulpt") {
       dispatch(setLoadedRunner("skulpt"));
@@ -136,15 +175,6 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
     }
   }, [drawTriggered, codeRunTriggered]);
 
-  const visualLibraries = [
-    "./pygal/__init__.js",
-    "./py5/__init__.js",
-    "./py5_imported/__init__.js",
-    "./p5/__init__.js",
-    "./_internal_sense_hat/__init__.js",
-    "src/builtin/turtle/__init__.js",
-  ];
-
   const outf = (text) => {
     if (text !== "") {
       const node = output.current;
@@ -169,10 +199,6 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
 
     // TODO: Handle pre-importing py5_imported when refactored py5 shim imported
 
-    if (visualLibraries.includes(library)) {
-      setCodeHasVisualOutput(true);
-    }
-
     let localProjectFiles = projectCode
       .filter((component) => component.name !== "main")
       .map((component) => `./${component.name}.py`);
@@ -436,6 +462,18 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
     });
   };
 
+  const [tabbedViewSelectedIndex, setTabbedViewSelectedIndex] = useState(
+    showVisualOutput ? 0 : 1,
+  );
+
+  useEffect(() => {
+    if (showVisualOutput) {
+      setTabbedViewSelectedIndex(0);
+    } else {
+      setTabbedViewSelectedIndex(1);
+    }
+  }, [showVisualOutput]);
+
   return (
     <div
       className={classNames("pythonrunner-container", "skulptrunner", {
@@ -444,8 +482,11 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
     >
       {isSplitView || singleOutputPanel ? (
         <>
-          {showVisualOutput && showVisualOutputPanel && (
-            <div className={outputPanelClasses("visual")}>
+          {showVisualOutputPanel && (
+            <div
+              className={outputPanelClasses("visual")}
+              style={{ blockSize: showVisualOutput ? "auto" : 0 }}
+            >
               <Tabs forceRenderTabPanel={true}>
                 <div
                   className={classNames("react-tabs__tab-container", {
@@ -503,16 +544,16 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
         <Tabs
           forceRenderTabPanel={true}
           defaultIndex={showVisualOutput ? 0 : 1}
+          selectedIndex={tabbedViewSelectedIndex}
+          onSelect={setTabbedViewSelectedIndex}
         >
           <div className="react-tabs__tab-container">
             <TabList>
-              {showVisualOutput ? (
-                <Tab key={0}>
-                  <span className="react-tabs__tab-text">
-                    {t("output.visualOutput")}
-                  </span>
-                </Tab>
-              ) : null}
+              <Tab key={0} style={{ blockSize: showVisualOutput ? "auto" : 0 }}>
+                <span className="react-tabs__tab-text">
+                  {t("output.visualOutput")}
+                </span>
+              </Tab>
               <Tab key={1}>
                 <span className="react-tabs__tab-text">
                   {t("output.textOutput")}
@@ -523,11 +564,9 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
             {!isEmbedded && isMobile && <RunnerControls skinny />}
           </div>
           {!isOutputOnly && <ErrorMessage />}
-          {showVisualOutput ? (
-            <TabPanel key={0}>
-              <VisualOutputPane />
-            </TabPanel>
-          ) : null}
+          <TabPanel key={0}>
+            <VisualOutputPane />
+          </TabPanel>
           <TabPanel key={1}>
             <pre
               className={`pythonrunner-console pythonrunner-console--${settings.fontSize}`}

src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.test.js

@@ -428,7 +428,7 @@ describe("When in split view, py5_imported imported and code run", () => {
             {
               name: "main",
               extension: "py",
-              content: "import py5_imported",
+              content: "# input.comment.py5",
             },
           ],
           image_list: [],
@@ -563,7 +563,7 @@ describe("When in split view, sense_hat imported and code run", () => {
             {
               name: "main",
               extension: "py",
-              content: "import _internal_sense_hat",
+              content: "import sense_hat",
             },
           ],
           image_list: [],
@@ -675,7 +675,7 @@ describe("When in tabbed view, py5 imported and code run", () => {
     ));
   });
 
-  test("Output view toggle not shown", () => {
+  test("Output view toggle is shown", () => {
     expect(
       screen.queryByText("outputViewToggle.buttonSplitLabel"),
     ).toBeInTheDocument();
@@ -704,7 +704,7 @@ describe("When in tabbed view, py5_imported imported and code run", () => {
             {
               name: "main",
               extension: "py",
-              content: "import py5_imported",
+              content: "# input.comment.py5",
             },
           ],
           image_list: [],
@@ -724,7 +724,7 @@ describe("When in tabbed view, py5_imported imported and code run", () => {
     ));
   });
 
-  test("Output view toggle not shown", () => {
+  test("Output view toggle is shown", () => {
     expect(
       screen.queryByText("outputViewToggle.buttonSplitLabel"),
     ).toBeInTheDocument();
@@ -769,7 +769,7 @@ describe("When in tabbed view, pygal imported and code run", () => {
     ));
   });
 
-  test("Output view toggle not shown", () => {
+  test("Output view toggle is shown", () => {
     expect(
       screen.queryByText("outputViewToggle.buttonSplitLabel"),
     ).toBeInTheDocument();
@@ -814,7 +814,8 @@ describe("When in tabbed view, turtle imported and code run", () => {
     ));
   });
 
-  test("Output view toggle not shown", () => {
+  test("Output view toggle is shown", () => {
+    screen.debug();
     expect(
       screen.queryByText("outputViewToggle.buttonSplitLabel"),
     ).toBeInTheDocument();
@@ -839,7 +840,7 @@ describe("When in tabbed view, sense_hat imported and code run", () => {
             {
               name: "main",
               extension: "py",
-              content: "import _internal_sense_hat",
+              content: "import sense_hat",
             },
           ],
           image_list: [],
@@ -859,7 +860,7 @@ describe("When in tabbed view, sense_hat imported and code run", () => {
     ));
   });
 
-  test("Output view toggle not shown", () => {
+  test("Output view toggle is shown", () => {
     expect(
       screen.queryByText("outputViewToggle.buttonSplitLabel"),
     ).toBeInTheDocument();