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.
RaspberryPiFoundation · Jan 9, 2025 · a0153b1 · a0153b1
1 parent dcc327a
commit a0153b1
Show file tree

Hide file tree

Showing 13 changed files with 10,234 additions and 2 deletions.
diff --git a/scratch.js b/scratch.js
diff --git a/scratch/.babelrc b/scratch/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "react-app",
+  ]
+}
diff --git a/scratch/README.md b/scratch/README.md
@@ -0,0 +1,15 @@
+# 🚀 Welcome to your new awesome project!
+
+This project has been created using **webpack-cli**, you can now run
+
+```
+npm run build
+```
+
+or
+
+```
+yarn build
+```
+
+to bundle your application
diff --git a/scratch/dist/main.js b/scratch/dist/main.js
diff --git a/scratch/dist/main.js.LICENSE.txt b/scratch/dist/main.js.LICENSE.txt
@@ -0,0 +1,29 @@
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
diff --git a/scratch/index.html b/scratch/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Webpack App</title>
+    </head>
+    <body>
+        <h1>Hello world!</h1>
+        <h2>Tip: Check your console</h2>
+    </body>
+
+</html>
diff --git a/scratch/package.json b/scratch/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "my-webpack-project",
+  "packageManager": "[email protected]",
+  "scripts": {
+    "start": "webpack serve --mode=development --node-env=development",
+    "build": "webpack --mode=production --node-env=production",
+    "build:dev": "webpack --mode=development",
+    "build:prod": "webpack --mode=production --node-env=production",
+    "watch": "webpack --watch"
+  },
+  "dependencies": {
+    "scratch-gui": "^5.1.27"
+  },
+  "devDependencies": {
+    "@webpack-cli/generators": "^3.0.7",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1"
+  },
+  "version": "1.0.0",
+  "description": "My webpack project"
+}
diff --git a/scratch/public/index.html b/scratch/public/index.html
@@ -0,0 +1,6 @@
+<html>
+    <head>
+        <script defer="defer" src="main.js"></script>
+    </head>
+    <body></body>
+</html>
diff --git a/scratch/src/index.jsx b/scratch/src/index.jsx
@@ -0,0 +1,90 @@
+console.log("*** Hello World!")
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {compose} from 'redux';
+
+import { AppStateHOC } from 'scratch-gui';
+import GUI from 'scratch-gui';
+// import { HashParserHOC } from 'scratch-gui';
+// import log from '../lib/log.js';
+
+const onClickLogo = () => {
+    window.location = 'https://scratch.mit.edu';
+};
+
+// const handleTelemetryModalCancel = () => {
+//     log('User canceled telemetry modal');
+// };
+
+// const handleTelemetryModalOptIn = () => {
+//     log('User opted into telemetry');
+// };
+
+// const handleTelemetryModalOptOut = () => {
+//     log('User opted out of telemetry');
+// };
+
+const appTarget = document.createElement('div');
+document.body.appendChild(appTarget);
+
+/*
+ * Render the GUI playground. This is a separate function because importing anything
+ * that instantiates the VM causes unsupported browsers to crash
+ * {object} appTarget - the DOM element to render to
+ */
+// export default appTarget => {
+    GUI.setAppElement(appTarget);
+
+    // note that redux's 'compose' function is just being used as a general utility to make
+    // the hierarchy of HOC constructor calls clearer here; it has nothing to do with redux's
+    // ability to compose reducers.
+    const WrappedGui = compose(
+        AppStateHOC,
+        // HashParserHOC
+    )(GUI);
+
+    // TODO a hack for testing the backpack, allow backpack host to be set by url param
+    const backpackHostMatches = window.location.href.match(/[?&]backpack_host=([^&]*)&?/);
+    const backpackHost = backpackHostMatches ? backpackHostMatches[1] : null;
+
+    const scratchDesktopMatches = window.location.href.match(/[?&]isScratchDesktop=([^&]+)/);
+    let simulateScratchDesktop;
+    if (scratchDesktopMatches) {
+        try {
+            // parse 'true' into `true`, 'false' into `false`, etc.
+            simulateScratchDesktop = JSON.parse(scratchDesktopMatches[1]);
+        } catch {
+            // it's not JSON so just use the string
+            // note that a typo like "falsy" will be treated as true
+            simulateScratchDesktop = scratchDesktopMatches[1];
+        }
+    }
+
+    if (process.env.NODE_ENV === 'production' && typeof window === 'object') {
+        // Warn before navigating away
+        window.onbeforeunload = () => true;
+    }
+
+    ReactDOM.render(
+        // important: this is checking whether `simulateScratchDesktop` is truthy, not just defined!
+        simulateScratchDesktop ?
+            <WrappedGui
+                canEditTitle
+                isScratchDesktop
+                showTelemetryModal
+                canSave={false}
+                onTelemetryModalCancel={handleTelemetryModalCancel}
+                onTelemetryModalOptIn={handleTelemetryModalOptIn}
+                onTelemetryModalOptOut={handleTelemetryModalOptOut}
+            /> :
+            <WrappedGui
+                canEditTitle
+                backpackVisible
+                showComingSoon
+                backpackHost={backpackHost}
+                canSave={false}
+                onClickLogo={onClickLogo}
+            />,
+        appTarget);
+// };
diff --git a/scratch/webpack.config.js b/scratch/webpack.config.js
@@ -0,0 +1,51 @@
+// Generated using webpack-cli https://github.com/webpack/webpack-cli
+
+const path = require("path");
+
+const isProduction = process.env.NODE_ENV == "production";
+
+const config = {
+  entry: "./src/index.jsx",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+  },
+  plugins: [
+    // Add your plugins here
+    // Learn more about plugins from https://webpack.js.org/configuration/plugins/
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
+        type: "asset",
+      },
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ["babel-loader"],
+      },
+
+      // Add your rules for custom modules here
+      // Learn more about loaders from https://webpack.js.org/loaders/
+    ],
+  },
+  devServer: {
+    host: "0.0.0.0",
+    allowedHosts: "all",
+    port: 3011,
+    liveReload: true,
+    hot: false,
+    static: {
+      directory: path.join(__dirname, "public"),
+    },
+  },
+};
+
+module.exports = () => {
+  if (isProduction) {
+    config.mode = "production";
+  } else {
+    config.mode = "development";
+  }
+  return config;
+};