@scratch/scratch-gui 11.0.0-beta.1

package/package.json

@@ -0,0 +1,199 @@
+{
+  "name": "@scratch/scratch-gui",
+  "version": "11.0.0-beta.1",
+  "description": "Graphical User Interface for creating and running Scratch 3.0 projects",
+  "author": "Massachusetts Institute of Technology",
+  "license": "AGPL-3.0-only",
+  "homepage": "https://github.com/scratchfoundation/scratch-gui#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scratchfoundation/scratch-editor.git"
+  },
+  "main": "./dist/scratch-gui.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/scratch-gui.js"
+    },
+    "./standalone": {
+      "types": "./dist/types/index-standalone.d.ts",
+      "default": "./dist/scratch-gui-standalone.js"
+    }
+  },
+  "scripts": {
+    "build": "npm run clean && BUILD_TYPE=dev webpack && BUILD_TYPE=dist webpack && BUILD_TYPE=dist-standalone webpack",
+    "clean": "rimraf ./build ./dist",
+    "deploy": "touch build/.nojekyll && gh-pages -t -d build -m \"[skip ci] Build for $(git log --pretty=format:%H -n1)\"",
+    "prepare": "node scripts/prepare.mjs",
+    "prune": "./prune-gh-pages.sh",
+    "i18n:push": "tx-push-src scratch-editor interface translations/en.json",
+    "i18n:src": "rimraf ./translations/messages/src && babel src > tmp.js && rimraf tmp.js && build-i18n-src ./translations/messages/src ./translations/",
+    "start": "webpack serve",
+    "test": "npm run test:lint && npm run test:unit && npm run build && npm run test:integration",
+    "test:integration": "cross-env JEST_JUNIT_OUTPUT_NAME=integration-tests-results.xml jest --maxWorkers=2 test[\\\\/]integration",
+    "test:lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "test:unit": "cross-env JEST_JUNIT_OUTPUT_NAME=unit-tests-results.xml jest test[\\\\/]unit",
+    "test:smoke": "jest --runInBand test[\\\\/]smoke",
+    "watch": "webpack --watch"
+  },
+  "dependencies": {
+    "@microbit/microbit-universal-hex": "^0.2.2",
+    "@scratch/scratch-render": "11.0.0-beta.1",
+    "@scratch/scratch-svg-renderer": "11.0.0-beta.1",
+    "@scratch/scratch-vm": "11.0.0-beta.1",
+    "arraybuffer-loader": "^1.0.6",
+    "autoprefixer": "^9.0.1",
+    "balance-text": "^3.3.1",
+    "base64-loader": "^1.0.0",
+    "bowser": "^1.9.4",
+    "cat-blocks": "npm:scratch-blocks@0.1.0-prerelease.20220318143026",
+    "classnames": "^2.2.6",
+    "computed-style-to-inline-style": "^3.0.0",
+    "cookie": "^0.6.0",
+    "copy-webpack-plugin": "^6.4.1",
+    "core-js": "^2.5.7",
+    "css-loader": "5.2.7",
+    "dapjs": "^2.3.0",
+    "es6-object-assign": "^1.1.0",
+    "get-float-time-domain-data": "^0.1.0",
+    "get-user-media-promise": "^1.1.4",
+    "immutable": "^3.8.2",
+    "intl": "^1.2.5",
+    "js-base64": "^2.4.9",
+    "keymirror": "^0.1.1",
+    "lodash.bindall": "^4.4.0",
+    "lodash.debounce": "^4.0.8",
+    "lodash.defaultsdeep": "^4.6.1",
+    "lodash.omit": "^4.5.0",
+    "lodash.throttle": "^4.0.1",
+    "minilog": "^3.1.0",
+    "omggif": "^1.0.9",
+    "papaparse": "^5.3.0",
+    "postcss-import": "^12.0.0",
+    "postcss-loader": "4.3.0",
+    "postcss-simple-vars": "^5.0.1",
+    "prop-types": "^15.5.10",
+    "query-string": "^5.1.1",
+    "raw-loader": "^4.0.0",
+    "react-contextmenu": "^2.9.4",
+    "react-draggable": "^3.0.5",
+    "react-ga": "^2.5.3",
+    "react-intl": "^2.9.0",
+    "react-modal": "^3.9.1",
+    "react-popover": "^0.5.10",
+    "react-responsive": "^5.0.0",
+    "react-style-proptype": "^3.2.2",
+    "react-tabs": "^2.3.0",
+    "react-tooltip": "^4.5.1",
+    "react-virtualized": "^9.20.1",
+    "redux-throttle": "^0.1.1",
+    "scratch-audio": "^1.0.0",
+    "scratch-blocks": "^1.1.6",
+    "scratch-l10n": "^3.18.3",
+    "scratch-paint": "^2.2.151",
+    "scratch-render-fonts": "^1.0.2",
+    "scratch-storage": "^4.0.24",
+    "startaudiocontext": "^1.2.1",
+    "style-loader": "4.0.0",
+    "text-encoding": "^0.7.0",
+    "to-style": "^1.3.3",
+    "wav-encoder": "^1.3.0",
+    "xhr": "^2.5.0"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-redux": "^5.0.7",
+    "redux": "^3.7.2"
+  },
+  "devDependencies": {
+    "@babel/cli": "7.24.8",
+    "@babel/core": "7.25.2",
+    "@babel/eslint-parser": "7.25.1",
+    "@babel/plugin-proposal-object-rest-spread": "7.20.7",
+    "@babel/plugin-syntax-dynamic-import": "7.8.3",
+    "@babel/plugin-transform-async-to-generator": "7.24.7",
+    "@babel/preset-env": "7.25.4",
+    "@babel/preset-react": "7.24.7",
+    "@types/prop-types": "^15.7.13",
+    "@types/react-modal": "^3.9.1",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-loader": "9.1.3",
+    "cheerio": "1.0.0-rc.3",
+    "cross-env": "^7.0.3",
+    "enzyme": "3.11.0",
+    "enzyme-adapter-react-16": "1.15.8",
+    "eslint": "8.57.0",
+    "eslint-config-scratch": "9.0.8",
+    "eslint-import-resolver-webpack": "0.11.1",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jest": "22.21.0",
+    "eslint-plugin-react": "7.35.0",
+    "file-loader": "6.2.0",
+    "gh-pages": "3.2.3",
+    "html-webpack-plugin": "5.6.0",
+    "jest": "21.2.1",
+    "jest-junit": "7.0.0",
+    "raf": "3.4.1",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-test-renderer": "16.14.0",
+    "redux-mock-store": "1.5.4",
+    "rimraf": "2.7.1",
+    "scratch-semantic-release-config": "1.0.14",
+    "scratch-webpack-configuration": "1.6.0",
+    "selenium-webdriver": "3.6.0",
+    "semantic-release": "19.0.5",
+    "stream-browserify": "3.0.0",
+    "ts-jest": "^21.2.4",
+    "ts-loader": "9.5.1",
+    "url-loader": "4.1.1",
+    "web-audio-test-api": "0.5.2",
+    "webpack": "5.94.0",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "5.0.4",
+    "yauzl": "2.10.0"
+  },
+  "jest": {
+    "globals": {
+      "ts-jest": {
+        "isolatedModules": true,
+        "tsconfig": "<rootDir>/tsconfig.test.json"
+      }
+    },
+    "setupFiles": [
+      "raf/polyfill",
+      "<rootDir>/test/helpers/enzyme-setup.js"
+    ],
+    "reporters": [
+      "default",
+      [
+        "jest-junit",
+        {
+          "outputDirectory": "test-results"
+        }
+      ]
+    ],
+    "testPathIgnorePatterns": [
+      "src/test.js"
+    ],
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)\\??$": "<rootDir>/test/__mocks__/fileMock.js",
+      "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
+      "editor-msgs(\\.js)?$": "<rootDir>/test/__mocks__/editor-msgs-mock.js"
+    },
+    "moduleFileExtensions": [
+      "ts",
+      "js",
+      "tsx",
+      "jsx"
+    ],
+    "transform": {
+      "^.+\\.tsx?$": "ts-jest",
+      "^.+\\.jsx?$": "babel-jest"
+    }
+  }
+}

package/prune-gh-pages.sh

@@ -0,0 +1,64 @@
+#!/bin/bash
+# gh-pages cleanup script: Switches to gh-pages branch, and removes all
+# directories that aren't listed as remote branches
+
+function deslash () {
+    # Recursively build a string of a directory's parents. E.g.,
+    # deslashed "feature/test/branch" returns feature/test feature
+    deslashed=$(dirname $1)
+    if [[ $deslashed =~ .*/.* ]]
+    then
+        echo $deslashed $(deslash $deslashed)
+    else
+        echo $deslashed
+    fi
+}
+
+repository=origin
+
+if [[ $1 != "" ]]
+then
+    repository=$1
+fi
+
+# Cache current branch
+current=$(git rev-parse --abbrev-ref HEAD)
+
+# Checkout most recent gh-pages
+git fetch --force $repository gh-pages:gh-pages
+git checkout gh-pages
+git clean -fdx
+
+# Make an array of directories to not delete, from the list of remote branches
+branches=$(git ls-remote --refs --quiet $repository | awk '{print $2}' | sed -e 's/refs\/heads\///')
+
+# Add parent directories of branches to the exclusion list (e.g. greenkeeper/)
+for branch in $branches; do
+    if [[ $branch =~ .*/.* ]]; then
+        branches+=" $(deslash $branch)"
+    fi
+done
+
+# Dedupe all the greenkeepers (or other duplicate parent directories)
+branches=$(echo "${branches[@]}" | tr ' ' '\n' | sort -u | tr '\n' ' ')
+
+# Remove all directories that don't have corresponding branches
+# It would be nice if we could exclude everything in .gitignore, but we're
+# not on the branch with the .gitignore anymore... so we can't.
+find . -type d \
+    \( \
+        -path ./.git -o \
+        -path ./node_modules \
+        $(printf " -o -path ./%s" $branches) \
+    \) -prune \
+    -o -mindepth 1 -type d \
+    -exec rm -rfv {} \;
+
+# Push
+git add -u
+git commit -m "Remove stale directories"
+git push $repository gh-pages
+
+# Return to where we were
+git checkout -f $current
+exit

package/release.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+    extends: 'scratch-semantic-release-config',
+    branches: [
+        {
+            name: 'develop'
+            // default channel
+        },
+        {
+            name: 'hotfix/REPLACE', // replace with actual hotfix branch name
+            channel: 'hotfix',
+            prerelease: 'hotfix'
+        },
+        {
+            name: 'beta',
+            channel: 'beta',
+            prerelease: true
+        }
+    ]
+};

package/scripts/.eslintrc.js

@@ -0,0 +1,8 @@
+const path = require('path');
+module.exports = {
+    extends: [path.resolve(__dirname, '..', '.eslintrc.js')],
+    rules: {
+        // NPM scripts are allowed to use console.log & friends
+        'no-console': 'off'
+    }
+};

package/scripts/prepare.mjs

@@ -0,0 +1,125 @@
+// From the NPM docs:
+// "If you need to perform operations on your package before it is used, in a way that is not dependent on the
+// operating system or architecture of the target system, use a prepare script."
+// Once this step is complete, a developer should be able to work without an Internet connection.
+// See also: https://docs.npmjs.com/cli/using-npm/scripts
+
+import fs from 'fs';
+import path from 'path';
+
+import yauzl from 'yauzl';
+import {fileURLToPath} from 'url';
+
+/** @typedef {import('yauzl').Entry} ZipEntry */
+/** @typedef {import('yauzl').ZipFile} ZipFile */
+
+// these aren't set in ESM mode
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// base/root path for the project
+const basePath = path.join(__dirname, '..');
+
+/**
+ * Extract the first matching file from a zip buffer.
+ * The path within the zip file is ignored: the destination path is `${destinationDirectory}/${basename(entry.name)}`.
+ * Prints warnings if more than one matching file is found.
+ * @param {function(ZipEntry): boolean} filter Returns true if the entry should be extracted.
+ * @param {string} relativeDestDir The directory to extract to, relative to `basePath`.
+ * @param {Buffer} zipBuffer A buffer containing the zip file.
+ * @returns {Promise<string>} A Promise for the base name of the written file (without directory).
+ */
+const extractFirstMatchingFile = (filter, relativeDestDir, zipBuffer) => new Promise((resolve, reject) => {
+    try {
+        let extractedFileName;
+        yauzl.fromBuffer(zipBuffer, {lazyEntries: true}, (zipError, zipfile) => {
+            if (zipError) {
+                throw zipError;
+            }
+            zipfile.readEntry();
+            zipfile.on('end', () => {
+                resolve(extractedFileName);
+            });
+            zipfile.on('entry', entry => {
+                if (!filter(entry)) {
+                    // ignore non-matching file
+                    return zipfile.readEntry();
+                }
+                if (extractedFileName) {
+                    console.warn(`Multiple matching files found. Ignoring: ${entry.fileName}`);
+                    return zipfile.readEntry();
+                }
+                extractedFileName = entry.fileName;
+                console.info(`Found matching file: ${entry.fileName}`);
+                zipfile.openReadStream(entry, (fileError, readStream) => {
+                    if (fileError) {
+                        throw fileError;
+                    }
+                    const baseName = path.basename(entry.fileName);
+                    const relativeDestFile = path.join(relativeDestDir, baseName);
+                    console.info(`Extracting ${relativeDestFile}`);
+                    const absoluteDestDir = path.join(basePath, relativeDestDir);
+                    fs.mkdirSync(absoluteDestDir, {recursive: true});
+                    const absoluteDestFile = path.join(basePath, relativeDestFile);
+                    const outStream = fs.createWriteStream(absoluteDestFile);
+                    readStream.on('end', () => {
+                        outStream.close();
+                        zipfile.readEntry();
+                    });
+                    readStream.pipe(outStream);
+                });
+            });
+        });
+    } catch (error) {
+        reject(error);
+    }
+});
+
+const downloadMicrobitHex = async () => {
+    const url = 'https://downloads.scratch.mit.edu/microbit/scratch-microbit.hex.zip';
+    console.info(`Downloading ${url}`);
+    const response = await fetch(url);
+    const zipBuffer = Buffer.from(await response.arrayBuffer());
+    const relativeHexDir = path.join('static', 'microbit');
+    const hexFileName = await extractFirstMatchingFile(
+        entry => /\.hex$/.test(entry.fileName),
+        path.join('static', 'microbit'),
+        zipBuffer
+    );
+    const relativeHexFile = path.join(relativeHexDir, hexFileName);
+    const relativeGeneratedDir = path.join('src', 'generated');
+    const relativeGeneratedFile = path.join(relativeGeneratedDir, 'microbit-hex-url.cjs');
+    const absoluteGeneratedDir = path.join(basePath, relativeGeneratedDir);
+    fs.mkdirSync(absoluteGeneratedDir, {recursive: true});
+    const absoluteGeneratedFile = path.join(basePath, relativeGeneratedFile);
+    const requirePath = `./${path
+        .relative(relativeGeneratedDir, relativeHexFile)
+        .split(path.win32.sep)
+        .join(path.posix.sep)}`;
+    fs.writeFileSync(
+        absoluteGeneratedFile,
+        [
+            '// This file is generated by scripts/prepare.mjs',
+            '// Do not edit this file directly',
+            '// This file relies on a loader to turn this `require` into a URL',
+            `module.exports = require('${requirePath}');`,
+            '' // final newline
+        ].join('\n')
+    );
+    console.info(`Wrote ${relativeGeneratedFile}`);
+};
+
+const prepare = async () => {
+    await downloadMicrobitHex();
+};
+
+prepare().then(
+    () => {
+        console.info('Prepare script complete');
+        process.exit(0);
+    },
+    e => {
+        console.error(e);
+        process.exit(1);
+    }
+);