Skip to content

Commit cdb854a

Browse files
floehopperfloehopper
committed
WIP: Spike adding Scratch project type
1 parent 268c6f6 commit cdb854a

File tree

8 files changed

+57
-19
lines changed

8 files changed

+57
-19
lines changed

‎.eslintrc.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -43,5 +43,6 @@
4343
"arrowParens": "always"
4444
}
4545
]
46-
}
46+
},
47+
"ignorePatterns": ["src/gui.js"]
4748
}

‎src/components/Editor/Project/Project.jsx

+26-12
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const Project = (props) => {
2525
} = props;
2626
const saving = useSelector((state) => state.editor.saving);
2727
const autosave = useSelector((state) => state.editor.lastSaveAutosave);
28+
const project = useSelector((state) => state.editor.project);
2829

2930
useEffect(() => {
3031
if (saving === "success" && autosave === false) {
@@ -52,6 +53,9 @@ const Project = (props) => {
5253
setLoading(false);
5354
}, []);
5455

56+
const publicUrl = process.env.PUBLIC_URL;
57+
const iframeSrc = `${publicUrl}/scratch-component.html`;
58+
5559
return (
5660
<div className="proj" data-testid="project">
5761
<div
@@ -64,18 +68,28 @@ const Project = (props) => {
6468
{withProjectbar && <ProjectBar nameEditable={nameEditable} />}
6569
{!loading && (
6670
<div className="proj-editor-wrapper">
67-
<ResizableWithHandle
68-
data-testid="proj-editor-container"
69-
className="proj-editor-container"
70-
defaultWidth={defaultWidth}
71-
defaultHeight={defaultHeight}
72-
handleDirection={handleDirection}
73-
minWidth="25%"
74-
maxWidth={maxWidth}
75-
>
76-
<EditorInput />
77-
</ResizableWithHandle>
78-
<Output />
71+
{project.project_type === "scratch" ? (
72+
<iframe
73+
src={iframeSrc}
74+
style={{ width: "100%", border: "0px" }}
75+
title="scratch"
76+
></iframe>
77+
) : (
78+
<>
79+
<ResizableWithHandle
80+
data-testid="proj-editor-container"
81+
className="proj-editor-container"
82+
defaultWidth={defaultWidth}
83+
defaultHeight={defaultHeight}
84+
handleDirection={handleDirection}
85+
minWidth="25%"
86+
maxWidth={maxWidth}
87+
>
88+
<EditorInput />
89+
</ResizableWithHandle>
90+
<Output />
91+
</>
92+
)}
7993
</div>
8094
)}
8195
</div>

‎src/gui.js

+3
Large diffs are not rendered by default.

‎src/hooks/useProject.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { useRef, useEffect, useState } from "react";
33
import { useDispatch, useSelector } from "react-redux";
44
import { syncProject, setProject } from "../redux/EditorSlice";
5-
import { defaultPythonProject } from "../utils/defaultProjects";
5+
import { defaultScratchProject } from "../utils/defaultProjects";
66
import { useTranslation } from "react-i18next";
77

88
export const useProject = ({
@@ -87,7 +87,7 @@ export const useProject = ({
8787
return;
8888
}
8989

90-
const data = defaultPythonProject;
90+
const data = defaultScratchProject;
9191
dispatch(setProject(data));
9292
}
9393
}, [

‎src/hooks/useProject.test.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import configureStore from "redux-mock-store";
44

55
import { useProject } from "./useProject";
66
import { syncProject, setProject } from "../redux/EditorSlice";
7-
import { defaultPythonProject } from "../utils/defaultProjects";
7+
import { defaultScratchProject } from "../utils/defaultProjects";
88

99
jest.mock("react-redux", () => ({
1010
...jest.requireActual("react-redux"),
@@ -53,9 +53,9 @@ describe("When not embedded", () => {
5353
wrapper = ({ children }) => <Provider store={store}>{children}</Provider>;
5454
});
5555

56-
test("If no identifier uses default python project", () => {
56+
test("If no identifier uses default Scratch project", () => {
5757
renderHook(() => useProject({}), { wrapper });
58-
expect(setProject).toHaveBeenCalledWith(defaultPythonProject);
58+
expect(setProject).toHaveBeenCalledWith(defaultScratchProject);
5959
});
6060

6161
test("If cached project matches identifer uses cached project", () => {

‎src/scratch-component.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<html>
2+
<head>
3+
<script defer="defer" src="/gui.js"></script>
4+
</head>
5+
<body>
6+
</body>
7+
</html>

‎src/utils/defaultProjects.js

+7
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,14 @@ export const defaultHtmlProject = {
2121
],
2222
};
2323

24+
export const defaultScratchProject = {
25+
project_type: "scratch",
26+
name: i18n.t("project.untitled"),
27+
components: [{ extension: "sb3", name: "main", content: "" }],
28+
};
29+
2430
export const DEFAULT_PROJECTS = {
2531
python: defaultPythonProject,
2632
html: defaultHtmlProject,
33+
scratch: defaultScratchProject,
2734
};

‎webpack.config.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ module.exports = {
107107
// Pyodide - required for input and code interruption - needed on the host app
108108
"Cross-Origin-Opener-Policy": "same-origin",
109109
"Cross-Origin-Embedder-Policy": "require-corp",
110+
"Cross-Origin-Resource-Policy": "cross-origin",
110111
},
111112
setupMiddlewares: (middlewares, devServer) => {
112113
devServer.app.use((req, res, next) => {
@@ -136,8 +137,13 @@ module.exports = {
136137
template: "src/web-component.html",
137138
filename: "web-component.html",
138139
}),
140+
new HtmlWebpackPlugin({
141+
inject: "body",
142+
template: "src/scratch-component.html",
143+
filename: "scratch-component.html",
144+
}),
139145
new CopyWebpackPlugin({
140-
patterns: [{ from: "public", to: "" }],
146+
patterns: [{ from: "public", to: "" }, { from: "src/gui.js", to: "" }],
141147
}),
142148
],
143149
stats: "minimal",

0 commit comments

Comments
 (0)