WIP: Add Scratch GUI in iframe

Author: chrisroos

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,8 @@ const Project = (props) => {
     setLoading(false);
   }, []);
 
+  const iframeSrc = "https://scratch-editor.pages.dev/";
+
   return (
     <div className="proj" data-testid="project">
       <div
@@ -64,18 +67,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>

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));
     }
   }, [

src/hooks/useProject.test.js

@@ -4,7 +4,7 @@ import configureStore from "redux-mock-store";
 
 import { useProject } from "./useProject";
 import { syncProject, setProject } from "../redux/EditorSlice";
-import { defaultPythonProject } from "../utils/defaultProjects";
+import { defaultScratchProject } from "../utils/defaultProjects";
 
 jest.mock("react-redux", () => ({
   ...jest.requireActual("react-redux"),
@@ -53,9 +53,9 @@ describe("When not embedded", () => {
     wrapper = ({ children }) => <Provider store={store}>{children}</Provider>;
   });
 
-  test("If no identifier uses default python project", () => {
+  test("If no identifier uses default Scratch project", () => {
     renderHook(() => useProject({}), { wrapper });
-    expect(setProject).toHaveBeenCalledWith(defaultPythonProject);
+    expect(setProject).toHaveBeenCalledWith(defaultScratchProject);
   });
 
   test("If cached project matches identifer uses cached project", () => {

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,
 };

webpack.config.js

@@ -106,7 +106,7 @@ module.exports = {
         "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-Embedder-Policy": "cross-origin"
     },
     setupMiddlewares: (middlewares, devServer) => {
       devServer.app.use((req, res, next) => {