build!: use scratch-webpack-configuration

BREAKING CHANGE: changes layout of output files and browser compatibility

Author: cwillisf

.babelrc

@@ -7,7 +7,7 @@
             "messagesDir": "./translations/messages/"
         }]],
     "presets": [
-        ["@babel/preset-env", {"targets": {"browsers": ["last 3 versions", "Safari >= 8", "iOS >= 8"]}}],
+        "@babel/preset-env",
         "@babel/preset-react"
     ]
 }

.browserslistrc

@@ -1,3 +1,7 @@
-last 3 versions
-Safari >= 8
-iOS >= 8
+# See https://scratch.mit.edu/faq
+Chrome >= 63
+Edge >= 15
+Firefox >= 57
+Safari >= 11
+Android >= 63
+iOS >= 11

.eslintignore

@@ -1,5 +1,4 @@
 node_modules/*
-build/*
 dist/*
 test/*
 src/examples/*

package-lock.json

@@ -11,9 +11,9 @@
   },
   "main": "./dist/scratch-gui.js",
   "scripts": {
-    "build": "npm run clean && webpack",
-    "clean": "rimraf ./build && mkdirp build && rimraf ./dist && mkdirp dist",
-    "deploy": "touch build/.nojekyll && gh-pages -t -d build -m \"[skip ci] Build for $(git log --pretty=format:%H -n1)\"",
+    "build": "npm run clean && mkdirp dist && webpack",
+    "clean": "rimraf ./dist",
+    "deploy": "touch build/.nojekyll && gh-pages -t -d dist -m \"[skip ci] Build for $(git log --pretty=format:%H -n1)\"",
     "prepublish": "node scripts/prepublish.mjs",
     "prune": "./prune-gh-pages.sh",
     "i18n:push": "tx-push-src scratch-editor interface translations/en.json",
@@ -136,9 +136,9 @@
     "redux-mock-store": "1.5.4",
     "rimraf": "2.7.1",
     "scratch-semantic-release-config": "1.0.14",
+    "scratch-webpack-configuration": "1.1.0",
     "selenium-webdriver": "3.6.0",
     "semantic-release": "19.0.5",
-    "terser-webpack-plugin": "4.2.3",
     "url-loader": "4.1.1",
     "web-audio-test-api": "0.5.2",
     "webpack": "5.90.3",
@@ -158,6 +158,9 @@
       "\\.(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"
+    },
+    "transform": {
+      "^.+\\.[cm]?jsx?$": "babel-jest"
     }
   }
 }

package.json

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-unresolved
-import soundThumbnail from '!base64-loader!./sound-thumbnail.jpg';
+import soundThumbnail from '!base64-loader!./sound-thumbnail.jpg?';
 
 const soundPayload = sound => {
     const assetDataUrl = sound.asset.encodeDataURI();

src/lib/backpack/sound-payload.js

@@ -1,11 +1,11 @@
 import projectData from './project-data';
 
 /* eslint-disable import/no-unresolved */
-import popWav from '!arraybuffer-loader!./83a9787d4cb6f3b7632b4ddfebf74367.wav';
-import meowWav from '!arraybuffer-loader!./83c36d806dc92327b9e7049a565c6bff.wav';
-import backdrop from '!raw-loader!./cd21514d0531fdffb22204e0ec5ed84a.svg';
-import costume1 from '!raw-loader!./bcf454acf82e4504149f7ffe07081dbc.svg';
-import costume2 from '!raw-loader!./0fb9be3e8397c983338cb71dc84d0b25.svg';
+import popWav from '!arraybuffer-loader!./83a9787d4cb6f3b7632b4ddfebf74367.wav?';
+import meowWav from '!arraybuffer-loader!./83c36d806dc92327b9e7049a565c6bff.wav?';
+import backdrop from '!raw-loader!./cd21514d0531fdffb22204e0ec5ed84a.svg?';
+import costume1 from '!raw-loader!./bcf454acf82e4504149f7ffe07081dbc.svg?';
+import costume2 from '!raw-loader!./0fb9be3e8397c983338cb71dc84d0b25.svg?';
 /* eslint-enable import/no-unresolved */
 
 const defaultProject = translator => {

src/lib/default-project/index.js

@@ -1,7 +1,6 @@
 // TODO: access `BlockType` and `ArgumentType` without reaching into VM
 // Should we move these into a new extension support module or something?
-import ArgumentType from 'scratch-vm/src/extension-support/argument-type';
-import BlockType from 'scratch-vm/src/extension-support/block-type';
+import {ArgumentType, BlockType} from 'scratch-vm';
 
 /**
  * Define a block using extension info which has the ability to dynamically determine (and update) its layout.