WIP: Spike adding Scratch project type

RaspberryPiFoundation · Jan 8, 2025 · 847c7aa · 847c7aa
1 parent 268c6f6
commit 847c7aa
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 16 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -43,5 +43,6 @@
         "arrowParens": "always"
       }
     ]
-  }
+  },
+  "ignorePatterns": ["src/gui.js"]
 }
diff --git a/src/components/Editor/Project/Project.jsx b/src/components/Editor/Project/Project.jsx
@@ -25,6 +25,7 @@ const Project = (props) => {
   } = props;
   const saving = useSelector((state) => state.editor.saving);
   const autosave = useSelector((state) => state.editor.lastSaveAutosave);
+  const project = useSelector((state) => state.editor.project);
 
   useEffect(() => {
     if (saving === "success" && autosave === false) {
@@ -52,6 +53,9 @@ const Project = (props) => {
     setLoading(false);
   }, []);
 
+  const publicUrl = process.env.PUBLIC_URL;
+  const iframeSrc = `${publicUrl}/scratch-component.html`;
+
   return (
     <div className="proj" data-testid="project">
       <div
@@ -64,18 +68,28 @@ const Project = (props) => {
           {withProjectbar && <ProjectBar nameEditable={nameEditable} />}
           {!loading && (
             <div className="proj-editor-wrapper">
-              <ResizableWithHandle
-                data-testid="proj-editor-container"
-                className="proj-editor-container"
-                defaultWidth={defaultWidth}
-                defaultHeight={defaultHeight}
-                handleDirection={handleDirection}
-                minWidth="25%"
-                maxWidth={maxWidth}
-              >
-                <EditorInput />
-              </ResizableWithHandle>
-              <Output />
+              {project.project_type === "scratch" ? (
+                <iframe
+                  src={iframeSrc}
+                  style={{ width: "100%", border: "0px" }}
+                  title="scratch"
+                ></iframe>
+              ) : (
+                <>
+                  <ResizableWithHandle
+                    data-testid="proj-editor-container"
+                    className="proj-editor-container"
+                    defaultWidth={defaultWidth}
+                    defaultHeight={defaultHeight}
+                    handleDirection={handleDirection}
+                    minWidth="25%"
+                    maxWidth={maxWidth}
+                  >
+                    <EditorInput />
+                  </ResizableWithHandle>
+                  <Output />
+                </>
+              )}
             </div>
           )}
         </div>

diff --git a/src/gui.js b/src/gui.js
diff --git a/src/hooks/useProject.js b/src/hooks/useProject.js
@@ -2,7 +2,7 @@
 import { useRef, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { syncProject, setProject } from "../redux/EditorSlice";
-import { defaultPythonProject } from "../utils/defaultProjects";
+import { defaultScratchProject } from "../utils/defaultProjects";
 import { useTranslation } from "react-i18next";
 
 export const useProject = ({
@@ -87,7 +87,7 @@ export const useProject = ({
         return;
       }
 
-      const data = defaultPythonProject;
+      const data = defaultScratchProject;
       dispatch(setProject(data));
     }
   }, [

diff --git a/src/scratch-component.html b/src/scratch-component.html
@@ -0,0 +1,7 @@
+<html>
+  <head>
+    <script defer="defer" src="/gui.js"></script>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/src/utils/defaultProjects.js b/src/utils/defaultProjects.js
@@ -21,7 +21,14 @@ export const defaultHtmlProject = {
   ],
 };
 
+export const defaultScratchProject = {
+  project_type: "scratch",
+  name: i18n.t("project.untitled"),
+  components: [{ extension: "sb3", name: "main", content: "" }],
+};
+
 export const DEFAULT_PROJECTS = {
   python: defaultPythonProject,
   html: defaultHtmlProject,
+  scratch: defaultScratchProject,
 };
diff --git a/webpack.config.js b/webpack.config.js
@@ -107,6 +107,7 @@ module.exports = {
       // 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": "cross-origin",
     },
     setupMiddlewares: (middlewares, devServer) => {
       devServer.app.use((req, res, next) => {
@@ -136,8 +137,13 @@ module.exports = {
       template: "src/web-component.html",
       filename: "web-component.html",
     }),
+    new HtmlWebpackPlugin({
+      inject: "body",
+      template: "src/scratch-component.html",
+      filename: "scratch-component.html",
+    }),
     new CopyWebpackPlugin({
-      patterns: [{ from: "public", to: "" }],
+      patterns: [{ from: "public", to: "" }, { from: "src/gui.js", to: "" }],
     }),
   ],
   stats: "minimal",
-Original file line number
+Diff line change
@@ Expand Up / @@ -43,5 +43,6 @@ @@
             "arrowParens": "always"
           }
         ]
-      }
+      },
+      "ignorePatterns": ["src/gui.js"]
     }