Skip to content

Commit a0153b1

Browse files
chrisrooschrisroos
committed
WIP: Add scratch
NOTE that the Scratch GUI is rendering but with many errors and without the assets that are currently missing. Add ./scratch folder that attempts to generate the JS we need to embed the Scratch editor in the iframe that renders scratch-component.html. ./scratch/src/index.jsx is a modified copy of both: - https://github.com/scratchfoundation/scratch-gui/blob/141427d43db9e4471f8b628daa9f7c0c2c6d795f/src/playground/index.jsx - https://github.com/scratchfoundation/scratch-gui/blob/141427d43db9e4471f8b628daa9f7c0c2c6d795f/src/playground/render-gui.jsx Use `yarn start` to use webpacker dev server to make the editor available at localhost:3011. Use `yarn build` to generate the scratch/dist/main.js file that's then copied by Webpack and required in scratch-component.html.
1 parent dcc327a commit a0153b1

File tree

13 files changed

+10234
-2
lines changed

13 files changed

+10234
-2
lines changed

‎scratch.js‎

Lines changed: 2 additions & 0 deletions
Large diffs are not rendered by default.

‎scratch/.babelrc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"presets": [
3+
"react-app",
4+
]
5+
}

‎scratch/README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# 🚀 Welcome to your new awesome project!
2+
3+
This project has been created using **webpack-cli**, you can now run
4+
5+
```
6+
npm run build
7+
```
8+
9+
or
10+
11+
```
12+
yarn build
13+
```
14+
15+
to bundle your application

‎scratch/dist/main.js‎

Lines changed: 2 additions & 0 deletions
Large diffs are not rendered by default.

‎scratch/dist/main.js.LICENSE.txt‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* @license React
3+
* react-dom.production.min.js
4+
*
5+
* Copyright (c) Facebook, Inc. and its affiliates.
6+
*
7+
* This source code is licensed under the MIT license found in the
8+
* LICENSE file in the root directory of this source tree.
9+
*/
10+
11+
/**
12+
* @license React
13+
* react.production.min.js
14+
*
15+
* Copyright (c) Facebook, Inc. and its affiliates.
16+
*
17+
* This source code is licensed under the MIT license found in the
18+
* LICENSE file in the root directory of this source tree.
19+
*/
20+
21+
/**
22+
* @license React
23+
* scheduler.production.min.js
24+
*
25+
* Copyright (c) Facebook, Inc. and its affiliates.
26+
*
27+
* This source code is licensed under the MIT license found in the
28+
* LICENSE file in the root directory of this source tree.
29+
*/

‎scratch/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Webpack App</title>
6+
</head>
7+
<body>
8+
<h1>Hello world!</h1>
9+
<h2>Tip: Check your console</h2>
10+
</body>
11+
12+
</html>

‎scratch/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "my-webpack-project",
3+
"packageManager": "yarn@3.4.1",
4+
"scripts": {
5+
"start": "webpack serve --mode=development --node-env=development",
6+
"build": "webpack --mode=production --node-env=production",
7+
"build:dev": "webpack --mode=development",
8+
"build:prod": "webpack --mode=production --node-env=production",
9+
"watch": "webpack --watch"
10+
},
11+
"dependencies": {
12+
"scratch-gui": "^5.1.27"
13+
},
14+
"devDependencies": {
15+
"@webpack-cli/generators": "^3.0.7",
16+
"webpack": "^5.97.1",
17+
"webpack-cli": "^6.0.1"
18+
},
19+
"version": "1.0.0",
20+
"description": "My webpack project"
21+
}

‎scratch/public/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<html>
2+
<head>
3+
<script defer="defer" src="main.js"></script>
4+
</head>
5+
<body></body>
6+
</html>

‎scratch/src/index.jsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
console.log("*** Hello World!")
2+
3+
import React from 'react';
4+
import ReactDOM from 'react-dom';
5+
import {compose} from 'redux';
6+
7+
import { AppStateHOC } from 'scratch-gui';
8+
import GUI from 'scratch-gui';
9+
// import { HashParserHOC } from 'scratch-gui';
10+
// import log from '../lib/log.js';
11+
12+
const onClickLogo = () => {
13+
window.location = 'https://scratch.mit.edu';
14+
};
15+
16+
// const handleTelemetryModalCancel = () => {
17+
// log('User canceled telemetry modal');
18+
// };
19+
20+
// const handleTelemetryModalOptIn = () => {
21+
// log('User opted into telemetry');
22+
// };
23+
24+
// const handleTelemetryModalOptOut = () => {
25+
// log('User opted out of telemetry');
26+
// };
27+
28+
const appTarget = document.createElement('div');
29+
document.body.appendChild(appTarget);
30+
31+
/*
32+
* Render the GUI playground. This is a separate function because importing anything
33+
* that instantiates the VM causes unsupported browsers to crash
34+
* {object} appTarget - the DOM element to render to
35+
*/
36+
// export default appTarget => {
37+
GUI.setAppElement(appTarget);
38+
39+
// note that redux's 'compose' function is just being used as a general utility to make
40+
// the hierarchy of HOC constructor calls clearer here; it has nothing to do with redux's
41+
// ability to compose reducers.
42+
const WrappedGui = compose(
43+
AppStateHOC,
44+
// HashParserHOC
45+
)(GUI);
46+
47+
// TODO a hack for testing the backpack, allow backpack host to be set by url param
48+
const backpackHostMatches = window.location.href.match(/[?&]backpack_host=([^&]*)&?/);
49+
const backpackHost = backpackHostMatches ? backpackHostMatches[1] : null;
50+
51+
const scratchDesktopMatches = window.location.href.match(/[?&]isScratchDesktop=([^&]+)/);
52+
let simulateScratchDesktop;
53+
if (scratchDesktopMatches) {
54+
try {
55+
// parse 'true' into `true`, 'false' into `false`, etc.
56+
simulateScratchDesktop = JSON.parse(scratchDesktopMatches[1]);
57+
} catch {
58+
// it's not JSON so just use the string
59+
// note that a typo like "falsy" will be treated as true
60+
simulateScratchDesktop = scratchDesktopMatches[1];
61+
}
62+
}
63+
64+
if (process.env.NODE_ENV === 'production' && typeof window === 'object') {
65+
// Warn before navigating away
66+
window.onbeforeunload = () => true;
67+
}
68+
69+
ReactDOM.render(
70+
// important: this is checking whether `simulateScratchDesktop` is truthy, not just defined!
71+
simulateScratchDesktop ?
72+
<WrappedGui
73+
canEditTitle
74+
isScratchDesktop
75+
showTelemetryModal
76+
canSave={false}
77+
onTelemetryModalCancel={handleTelemetryModalCancel}
78+
onTelemetryModalOptIn={handleTelemetryModalOptIn}
79+
onTelemetryModalOptOut={handleTelemetryModalOptOut}
80+
/> :
81+
<WrappedGui
82+
canEditTitle
83+
backpackVisible
84+
showComingSoon
85+
backpackHost={backpackHost}
86+
canSave={false}
87+
onClickLogo={onClickLogo}
88+
/>,
89+
appTarget);
90+
// };

‎scratch/webpack.config.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
// Generated using webpack-cli https://github.com/webpack/webpack-cli
2+
3+
const path = require("path");
4+
5+
const isProduction = process.env.NODE_ENV == "production";
6+
7+
const config = {
8+
entry: "./src/index.jsx",
9+
output: {
10+
path: path.resolve(__dirname, "dist"),
11+
},
12+
plugins: [
13+
// Add your plugins here
14+
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
15+
],
16+
module: {
17+
rules: [
18+
{
19+
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
20+
type: "asset",
21+
},
22+
{
23+
test: /\.(js|jsx)$/,
24+
exclude: /node_modules/,
25+
use: ["babel-loader"],
26+
},
27+
28+
// Add your rules for custom modules here
29+
// Learn more about loaders from https://webpack.js.org/loaders/
30+
],
31+
},
32+
devServer: {
33+
host: "0.0.0.0",
34+
allowedHosts: "all",
35+
port: 3011,
36+
liveReload: true,
37+
hot: false,
38+
static: {
39+
directory: path.join(__dirname, "public"),
40+
},
41+
},
42+
};
43+
44+
module.exports = () => {
45+
if (isProduction) {
46+
config.mode = "production";
47+
} else {
48+
config.mode = "development";
49+
}
50+
return config;
51+
};

0 commit comments

Comments
 (0)