Skip to content

Commit c69f141

Browse files
danhalsondanhalson
committed
WIP changes
1 parent 8b8dff2 commit c69f141

File tree

6 files changed

+230
-4379
lines changed

6 files changed

+230
-4379
lines changed

‎docker-compose.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ x-app: &x-app
33
context: .
44
volumes:
55
- .:/app
6+
- ../scratch-editor:/scratch-editor
67
- node_modules:/app/node_modules
78
- /var/run/docker.sock:/var/run/docker.sock
89
stdin_open: true

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.34.2",
44
"private": true,
55
"dependencies": {
6-
"@RaspberryPiFoundation/scratch-gui": "0.1.0-experience-cs.20251218100358",
6+
"@RaspberryPiFoundation/scratch-gui": "link:../scratch-editor/packages/scratch-gui",
77
"@apollo/client": "^3.7.8",
88
"@babel/core": "^7.17.10",
99
"@codemirror/commands": "^6.1.1",
@@ -170,10 +170,12 @@
170170
"path-browserify": "^1.0.1",
171171
"pnp-webpack-plugin": "1.6.4",
172172
"postcss-flexbugs-fixes": "4.2.1",
173+
"postcss-import": "12.0.1",
173174
"postcss-loader": "3.0.0",
174175
"postcss-normalize": "8.0.1",
175176
"postcss-preset-env": "6.7.0",
176177
"postcss-safe-parser": "5.0.2",
178+
"postcss-simple-vars": "5.0.2",
177179
"prettier": "^2.8.8",
178180
"react-dev-utils": "^11.0.3",
179181
"react-test-renderer": "^17.0.2",

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

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ const WrappedGui = compose(AppStateHOC, ScratchIntegrationHOC)(GUI);
2626

2727
const Project = (props) => {
2828
const webComponent = useSelector((state) => state.editor.webComponent);
29+
const reactAppApiEndpoint = useSelector(
30+
(state) => state.editor.reactAppApiEndpoint,
31+
);
2932
const [isReady, setIsReady] = useState(false);
3033

3134
useEffect(() => {
@@ -85,6 +88,26 @@ const Project = (props) => {
8588
return <div>Loading Scratch Editor...</div>;
8689
}
8790

91+
const scratchProjectHost = reactAppApiEndpoint
92+
? `${reactAppApiEndpoint}/api/projects`
93+
: null;
94+
const scratchProjectId = "blank-scratch-starter";
95+
const scratchBasePath = process.env.PUBLIC_URL || "/";
96+
const scratchGuiProps = {
97+
locale: "en",
98+
menuBarHidden: true,
99+
assetHost: "https://editor-scratch.raspberrypi.org/api/assets",
100+
basePath: scratchBasePath,
101+
// projectId: scratchProjectId,
102+
projectHost: scratchProjectHost,
103+
};
104+
105+
// projectId="blank-scratch-starter"
106+
// projectHost="http://localhost:3009/api/projects"
107+
// assetHost="https://editor-scratch.raspberrypi.org/api/assets"
108+
// assetHost="/api/assets"
109+
// basePath="https://editor-scratch.raspberrypi.org/scratch-gui/"
110+
88111
return (
89112
<div className="proj" data-testid="project">
90113
<div
@@ -125,12 +148,7 @@ const Project = (props) => {
125148
type="primary"
126149
/>
127150
<WrappedGui
128-
locale="en"
129-
menuBarHidden={true}
130-
projectId="blank-scratch-starter"
131-
projectHost="http://localhost:3009/api/projects"
132-
assetHost="https://editor-scratch.raspberrypi.org/api/assets"
133-
151+
{...scratchGuiProps}
134152
// assetHost="/api/assets"
135153
// basePath="/scratch-gui/"
136154
/>

‎src/web-component.js‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,6 @@ class WebComponent extends HTMLElement {
3030
sidebarPlugins = [];
3131

3232
connectedCallback() {
33-
if (!this.shadowRoot) {
34-
this.mountPoint = this.shadowRoot;
35-
}
36-
3733
console.log("Mounted web-component...");
3834

3935
this.mountReactApp();
@@ -43,7 +39,9 @@ class WebComponent extends HTMLElement {
4339
if (this.root) {
4440
console.log("Unmounted web-component...");
4541
this.root.unmount();
42+
this.root = null;
4643
}
44+
this.mountPoint = null;
4745
store.dispatch(resetStore());
4846
}
4947

@@ -171,11 +169,13 @@ class WebComponent extends HTMLElement {
171169
}
172170

173171
mountReactApp() {
172+
if (!this.isConnected) {
173+
return;
174+
}
174175
if (!this.mountPoint) {
175176
this.mountPoint = document.createElement("div");
176-
this.mountPoint.setAttribute("id", "root");
177-
this.mountPoint.setAttribute("part", "editor-root");
178-
this.attachShadow({ mode: "open" }).appendChild(this.mountPoint);
177+
this.mountPoint.setAttribute("data-web-component-root", "editor-root");
178+
this.appendChild(this.mountPoint);
179179
this.root = ReactDOMClient.createRoot(this.mountPoint);
180180
}
181181

@@ -191,11 +191,6 @@ class WebComponent extends HTMLElement {
191191
</Provider>
192192
</React.StrictMode>,
193193
);
194-
195-
// Copy scratch-gui styles after rendering
196-
setTimeout(() => {
197-
this.copyScratchGuiStyles();
198-
}, 100); // Small delay to ensure components are rendered
199194
}
200195

201196
copyScratchGuiStyles() {

‎webpack.config.js‎

Lines changed: 67 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,25 @@ const Dotenv = require("dotenv-webpack");
44
const HtmlWebpackPlugin = require("html-webpack-plugin");
55
const WorkerPlugin = require("worker-plugin");
66
const CopyWebpackPlugin = require("copy-webpack-plugin");
7+
const postcssImport = require("postcss-import");
8+
const postcssSimpleVars = require("postcss-simple-vars");
79

810
let publicUrl = process.env.PUBLIC_URL || "/";
911
if (!publicUrl.endsWith("/")) {
1012
publicUrl += "/";
1113
}
1214

15+
const scratchGuiInclude = [
16+
/node_modules\/scratch-gui/,
17+
/node_modules\/@RaspberryPiFoundation\/scratch-gui/,
18+
/scratch-editor\/packages\/scratch-gui/,
19+
];
20+
const scratchVmInclude = [
21+
/node_modules\/@scratch\/scratch-vm/,
22+
/node_modules\/scratch-vm/,
23+
/scratch-editor\/packages\/scratch-vm/,
24+
];
25+
1326
module.exports = {
1427
entry: {
1528
"web-component": path.resolve(__dirname, "./src/web-component.js"),
@@ -20,8 +33,7 @@ module.exports = {
2033
{
2134
test: /\.(ts|tsx)$/,
2235
include: [
23-
/node_modules\/scratch-gui/,
24-
/node_modules\/@RaspberryPiFoundation\/scratch-gui/,
36+
...scratchGuiInclude,
2537
/node_modules\/@scratch/, // Include @scratch packages
2638
/node_modules\/scratch-paint/, // Include scratch-paint
2739
],
@@ -85,6 +97,45 @@ module.exports = {
8597
},
8698
{
8799
test: /\.css$/,
100+
include: scratchGuiInclude,
101+
use: [
102+
{
103+
loader: "style-loader",
104+
options: {
105+
insert: function insertAtShadowRoot(element) {
106+
var root = window.__editorShadowRoot;
107+
if (root && root.appendChild) {
108+
root.appendChild(element);
109+
} else {
110+
document.head.appendChild(element);
111+
}
112+
},
113+
},
114+
},
115+
{
116+
loader: "css-loader",
117+
options: {
118+
importLoaders: 1,
119+
modules: {
120+
auto: (resourcePath) => !resourcePath.endsWith(".raw.css"),
121+
localIdentName: "[name]_[local]_[hash:base64:5]", // Match scratch-gui module naming
122+
exportLocalsConvention: "camelCase",
123+
},
124+
},
125+
},
126+
{
127+
loader: "postcss-loader",
128+
options: {
129+
postcssOptions: {
130+
plugins: [postcssImport(), postcssSimpleVars()],
131+
},
132+
},
133+
},
134+
],
135+
},
136+
{
137+
test: /\.css$/,
138+
exclude: scratchGuiInclude,
88139
use: [
89140
"to-string-loader",
90141
{
@@ -160,23 +211,21 @@ module.exports = {
160211
},
161212
{
162213
test: /\.mp3$/,
163-
include: /node_modules\/@RaspberryPiFoundation\/scratch-gui/,
164214
type: "asset/resource",
165215
generator: {
166216
filename: "static/media/[name].[hash][ext]",
167217
},
168218
},
169219
{
170220
test: /\.wav$/,
171-
include: /node_modules\/@RaspberryPiFoundation\/scratch-gui/,
172221
type: "asset/resource",
173222
generator: {
174223
filename: "static/media/[name].[hash][ext]",
175224
},
176225
},
177226
{
178227
test: /\.(png|jpg|jpeg|gif)$/,
179-
include: /node_modules\/@RaspberryPiFoundation\/scratch-gui/,
228+
include: scratchGuiInclude,
180229
type: "asset/resource",
181230
generator: {
182231
filename: "static/media/[name].[hash][ext]",
@@ -185,7 +234,6 @@ module.exports = {
185234
// Handle arrayBuffer imports specifically
186235
{
187236
test: /\.(mp3|wav)$/,
188-
include: /node_modules\/@RaspberryPiFoundation\/scratch-gui/,
189237
resourceQuery: /arrayBuffer/,
190238
type: "asset/resource",
191239
generator: {
@@ -194,7 +242,7 @@ module.exports = {
194242
},
195243
{
196244
test: /\.hex$/,
197-
include: /node_modules\/@RaspberryPiFoundation\/scratch-gui/,
245+
include: scratchGuiInclude,
198246
type: "asset/resource",
199247
generator: {
200248
filename: "static/firmware/[name].[hash][ext]",
@@ -204,6 +252,15 @@ module.exports = {
204252
},
205253
resolve: {
206254
extensions: [".*", ".js", ".jsx", ".css", ".ts", ".tsx"], // Add .ts and .tsx
255+
alias: {
256+
"@RaspberryPiFoundation/scratch-gui": path.resolve(
257+
__dirname,
258+
"../scratch-editor/packages/scratch-gui/src",
259+
),
260+
react: path.resolve(__dirname, "node_modules/react"),
261+
"react-dom": path.resolve(__dirname, "node_modules/react-dom"),
262+
"react-redux": path.resolve(__dirname, "node_modules/react-redux"),
263+
},
207264
fallback: {
208265
stream: require.resolve("stream-browserify"),
209266
assert: require.resolve("assert"),
@@ -224,6 +281,9 @@ module.exports = {
224281
port: 3011,
225282
liveReload: true,
226283
hot: false,
284+
client: {
285+
overlay: false,
286+
},
227287
static: {
228288
directory: path.join(__dirname, "public"),
229289
},

0 commit comments

Comments
 (0)