mitmedialab · pmalacho-mit · May 17, 2024 · May 20, 2024 · May 20, 2024 · May 20, 2024
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@microbit/microbit-universal-hex": "^0.2.2",
+    "@tsconfig/svelte": "^5.0.4",
     "arraybuffer-loader": "^1.0.6",
     "autoprefixer": "^9.0.1",
     "balance-text": "^3.3.1",
@@ -58,11 +59,13 @@
     "intl": "^1.2.5",
     "js-base64": "^2.4.9",
     "keymirror": "^0.1.1",
+    "load-script": "^2.0.0",
     "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",
+    "microbit-web-bluetooth": "^0.6.0",
     "minilog": "^3.1.0",
     "omggif": "^1.0.9",
     "papaparse": "^5.3.0",
@@ -72,9 +75,9 @@
     "prop-types": "^15.5.10",
     "query-string": "^5.1.1",
     "raw-loader": "^4.0.0",
-    "react": "^16.0.0",
+    "react": "^16.14.0",
     "react-contextmenu": "^2.9.4",
-    "react-dom": "^16.0.0",
+    "react-dom": "^16.14.0",
     "react-draggable": "^3.0.5",
     "react-ga": "^2.5.3",
     "react-intl": "^2.9.0",
@@ -88,6 +91,7 @@
     "react-virtualized": "^9.20.1",
     "redux": "^3.7.2",
     "redux-throttle": "^0.1.1",
+    "regenerator-runtime": "^0.14.1",
     "scratch-audio": "^1.0.0",
     "scratch-blocks": "^1.1.6",
     "scratch-l10n": "^3.18.3",
@@ -99,136 +103,61 @@
     "scratch-vm": "workspace:*",
     "startaudiocontext": "^1.2.1",
     "style-loader": "^0.23.0",
+    "svelte": "^4.2.7",
+    "svelte-check": "^3.7.1",
+    "svelte-loader": "^3.2.0",
+    "svelte-preprocess": "^5.1.0",
     "text-encoding": "^0.7.0",
     "to-style": "^1.3.3",
     "wav-encoder": "^1.3.0",
-    "xhr": "^2.5.0",
-    "babel-polyfill": "^6.26.0",
-    "canvas": "^2.10.1",
-    "face-api.js": "^0.22.2",
-    "load-script": "^2.0.0",
-    "microbit-web-bluetooth": "^0.6.0",
-    "svelte-check": "^2.9.2",
-    "svelte-loader": "^3.1.3",
-    "svelte-preprocess": "^4.10.7"
+    "xhr": "^2.5.0"
   },
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0"
   },
   "devDependencies": {
     "@babel/cli": "7.24.5",
     "@babel/core": "7.24.5",
     "@babel/eslint-parser": "7.24.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-async-to-generator": "^7.24.1",
-    "@babel/plugin-transform-spread": "^7.18.9",
+    "@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.1",
     "@babel/preset-env": "7.24.5",
     "@babel/preset-react": "7.24.1",
     "@commitlint/cli": "17.8.1",
     "@commitlint/config-conventional": "17.8.1",
-    "arraybuffer-loader": "^1.0.6",
-    "autoprefixer": "^9.0.1",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
     "babel-loader": "9.1.3",
-    "base64-loader": "1.0.0",
-    "bowser": "1.9.4",
-    "chromedriver": "^87.0.1",
-    "classnames": "2.2.6",
-    "computed-style-to-inline-style": "3.0.0",
-    "copy-webpack-plugin": "^4.5.1",
-    "core-js": "2.5.7",
-    "css-loader": "^1.0.0",
+    "cross-fetch": "^4.0.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.8",
-    "es6-object-assign": "1.1.0",
     "eslint": "8.57.0",
     "eslint-config-scratch": "9.0.8",
-    "eslint-import-resolver-webpack": "^0.11.1",
+    "eslint-import-resolver-webpack": "0.11.1",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jest": "22.21.0",
     "eslint-plugin-react": "7.34.1",
     "file-loader": "6.2.0",
-    "get-float-time-domain-data": "0.1.0",
-    "get-user-media-promise": "1.1.4",
     "gh-pages": "3.2.3",
     "html-webpack-plugin": "5.6.0",
     "husky": "8.0.3",
-    "immutable": "3.8.2",
-    "intl": "1.2.5",
     "jest": "21.2.1",
-    "jest-junit": "^7.0.0",
-    "js-base64": "2.4.9",
-    "keymirror": "0.1.1",
-    "lodash.bindall": "4.4.0",
-    "lodash.debounce": "4.0.8",
-    "lodash.defaultsdeep": "4.6.0",
-    "lodash.isequal": "4.5.0",
-    "lodash.omit": "4.5.0",
-    "lodash.pick": "4.4.0",
-    "lodash.throttle": "4.0.1",
-    "minilog": "3.1.0",
-    "mkdirp": "^0.5.1",
-    "omggif": "1.0.9",
-    "papaparse": "5.1.1",
-    "postcss-import": "^12.0.0",
-    "postcss-loader": "^3.0.0",
-    "postcss-simple-vars": "^5.0.1",
-    "prop-types": "^15.5.10",
-    "query-string": "^5.1.1",
+    "jest-junit": "7.0.0",
     "raf": "3.4.1",
-    "raw-loader": "^0.5.1",
-    "react": "16.2.0",
-    "react-contextmenu": "2.9.4",
-    "react-dom": "16.2.0",
-    "react-draggable": "3.0.5",
-    "react-ga": "2.5.3",
-    "react-google-picker": "^0.1.0",
-    "react-intl": "2.9.0",
-    "react-modal": "3.9.1",
-    "react-popover": "0.5.10",
-    "react-redux": "5.0.7",
-    "react-responsive": "5.0.0",
-    "react-style-proptype": "3.2.2",
-    "react-tabs": "2.3.0",
     "react-test-renderer": "16.14.0",
-    "react-tooltip": "3.8.0",
-    "react-virtualized": "9.20.1",
-    "redux": "3.7.2",
     "redux-mock-store": "1.5.4",
-    "redux-throttle": "0.1.1",
     "rimraf": "2.7.1",
-    "scratch-audio": "0.1.0-prerelease.20190925183642",
-    "scratch-blocks": "0.1.0-prerelease.1578322100",
-    "scratch-l10n": "3.7.20200108141814",
-    "scratch-paint": "1.1.16",
-    "scratch-render": "0.1.0-prerelease.20200109074051",
-    "scratch-render-fonts": "1.0.0-prerelease.20210401210003",
     "scratch-semantic-release-config": "1.0.14",
-    "scratch-storage": "1.3.2",
-    "scratch-svg-renderer": "latest",
-    "scratch-vm": "0.2.0-prerelease.20191227164934",
+    "scratch-webpack-configuration": "1.3.0",
     "selenium-webdriver": "3.6.0",
     "semantic-release": "19.0.5",
-    "startaudiocontext": "1.2.1",
     "stream-browserify": "3.0.0",
-    "style-loader": "^0.23.0",
-    "svelte": "3.52.0",
-    "svg-to-image": "1.1.3",
-    "text-encoding": "0.7.0",
-    "to-style": "1.3.3",
-    "typescript": "latest",
-    "uglifyjs-webpack-plugin": "^1.2.5",
     "url-loader": "4.1.1",
-    "wav-encoder": "1.3.0",
     "web-audio-test-api": "0.5.2",
     "webpack": "5.91.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.0.4",
-    "xhr": "2.5.0",
     "yauzl": "2.10.0"
   },
   "jest": {
@@ -244,10 +173,5 @@
       "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
       "editor-msgs(\\.js)?$": "<rootDir>/test/__mocks__/editor-msgs-mock.js"
     }
-  },
-  "overrides": {
-    "svelte-preprocess": {
-      "typescript": "latest"
-    }
   }
-}
+}
diff --git a/src/components/google-drive-picker/google-drive-picker.jsx b/src/components/google-drive-picker/google-drive-picker.jsx
@@ -27,7 +27,7 @@ class GoogleChooser extends React.Component {
   }
 
   componentDidMount() {
-    if(this.isGoogleReady()) {
+    if (this.isGoogleReady()) {
       // google api is already exists
       // init immediately
       this.onApiLoad();
@@ -42,7 +42,7 @@ class GoogleChooser extends React.Component {
 
   onClientLoad() {
     window.gapi.client.init({
-        apiKey: this.props.developerKey,
+      apiKey: this.props.developerKey,
     });
   }
 
@@ -68,26 +68,26 @@ class GoogleChooser extends React.Component {
 
   doAuth(callback) {
     const client = google.accounts.oauth2.initTokenClient({
-        client_id: this.props.clientId,
-        scope: this.props.scope,
-        callback: callback,
+      client_id: this.props.clientId,
+      scope: this.props.scope,
+      callback: callback,
     });
 
     client.requestAccessToken();
   }
 
   onChoose() {
     if (!this.isGoogleReady() || !this.isGoogleAuthReady() || !this.isGooglePickerReady() || this.props.disabled) {
-        console.error("Some api is missing:");
-        if (!this.isGoogleReady()) {
-          console.log("\tGoogle API");
-        }
-        if (!this.isGoogleAuthReady()) {
-          console.log("\tGoogle Auth");
-        }
-        if (!this.isGoogleReady()) {
-          console.log("\tGoogle Picker");
-        }
+      console.error("Some api is missing:");
+      if (!this.isGoogleReady()) {
+        console.log("\tGoogle API");
+      }
+      if (!this.isGoogleAuthReady()) {
+        console.log("\tGoogle Auth");
+      }
+      if (!this.isGoogleReady()) {
+        console.log("\tGoogle Picker");
+      }
       return null;
     }
 
@@ -111,7 +111,7 @@ class GoogleChooser extends React.Component {
 
     this.props.onAuthenticate(oauthToken);
 
-    if(this.props.createPicker){
+    if (this.props.createPicker) {
       return this.props.createPicker(google, oauthToken)
     }
 
@@ -130,11 +130,11 @@ class GoogleChooser extends React.Component {
     }
 
     const picker = new window.google.picker.PickerBuilder()
-                             .addView(view)
-                             .setOAuthToken(oauthToken)
-                             .setDeveloperKey(this.props.developerKey)
-                             .setCallback(this.props.onChange)
-                             .setAppId(this.props.appId);
+      .addView(view)
+      .setOAuthToken(oauthToken)
+      .setDeveloperKey(this.props.developerKey)
+      .setCallback(this.props.onChange)
+      .setAppId(this.props.appId);
 
     if (this.props.origin) {
       picker.setOrigin(this.props.origin);
@@ -149,7 +149,7 @@ class GoogleChooser extends React.Component {
     }
 
     picker.build()
-          .setVisible(true);
+      .setVisible(true);
   }
 
   render() {
@@ -166,33 +166,33 @@ class GoogleChooser extends React.Component {
 }
 
 GoogleChooser.propTypes = {
-    appId: PropTypes.string.isRequired,
-    children: PropTypes.node,
-    clientId: PropTypes.string.isRequired,
-    developerKey: PropTypes.string,
-    scope: PropTypes.array,
-    viewId: PropTypes.string,
-    authImmediate: PropTypes.bool,
-    origin: PropTypes.string,
-    onChange: PropTypes.func,
-    onAuthenticate: PropTypes.func,
-    onAuthFailed: PropTypes.func,
-    createPicker: PropTypes.func,
-    multiselect: PropTypes.bool,
-    navHidden: PropTypes.bool,
-    disabled: PropTypes.bool
+  appId: PropTypes.string.isRequired,
+  children: PropTypes.node,
+  clientId: PropTypes.string.isRequired,
+  developerKey: PropTypes.string,
+  scope: PropTypes.string,
+  viewId: PropTypes.string,
+  authImmediate: PropTypes.bool,
+  origin: PropTypes.string,
+  onChange: PropTypes.func,
+  onAuthenticate: PropTypes.func,
+  onAuthFailed: PropTypes.func,
+  createPicker: PropTypes.func,
+  multiselect: PropTypes.bool,
+  navHidden: PropTypes.bool,
+  disabled: PropTypes.bool
 };
 
 GoogleChooser.defaultProps = {
-    onChange: () => {},
-    onAuthenticate: () => {},
-    onAuthFailed: () => {},
-    scope:'https://www.googleapis.com/auth/drive.file',
-    viewId: 'DOCS',
-    authImmediate: false,
-    multiselect: false,
-    navHidden: false,
-    disabled: false
+  onChange: () => { },
+  onAuthenticate: () => { },
+  onAuthFailed: () => { },
+  scope: 'https://www.googleapis.com/auth/drive.file',
+  viewId: 'DOCS',
+  authImmediate: false,
+  multiselect: false,
+  navHidden: false,
+  disabled: false
 };
 
 export default GoogleChooser;
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
@@ -812,23 +812,6 @@ class MenuBar extends React.Component {
                         )}
                     </div>
                     <Divider className={classNames(styles.divider)} />
-                    {true ? (
-                        <div>
-                            <div
-                                aria-label={this.props.intl.formatMessage(ariaMessages.tutorials)}
-                                className={classNames(styles.menuBarItem, styles.hoverable)}
-                                onClick={this.props.onOpenTipLibrary}
-                            >
-                                <img
-                                    className={styles.helpIcon}
-                                    src={helpIcon}
-                                />
-                                <FormattedMessage {...ariaMessages.tutorials} />
-                            </div>
-                        </div>) :
-                        null
-                    }
-                    <Divider className={classNames(styles.divider)} />
                     {this.props.canEditTitle ? (
                         <div className={classNames(styles.menuBarItem, styles.growable)}>
                             <MenuBarItemTooltip

diff --git a/src/components/programmatic-modal/programmatic-modal.css b/src/components/programmatic-modal/programmatic-modal.css
@@ -18,8 +18,6 @@
   --text-primary-transparent: $text-primary-transparent;
   --motion-primary: $motion-primary;
   --motion-tertiary: $motion-tertiary;
-  --motion-transparent: $motion-transparent;
-  --motion-light-transparent: $motion-light-transparent;
   --red-primary: $red-primary;
   --red-tertiary: $red-tertiary;
   --sound-primary: $sound-primary;
@@ -35,5 +33,5 @@
   --extensions-tertiary: $extensions-tertiary;
   --extensions-transparent: $extensions-transparent;
   --extensions-light: $extensions-light;
-  --drop-highlight: $motion-transparent
+  --drop-highlight: $drop-highlight
 }