Update to create-react-app 4

- had to update eslint deps
- ran into palantir/blueprint#4112
- had to move beta.svg out of static/
- had to fix prettier formatting changes
- ran into jestjs/jest#7780

Author: dlech

package.json

@@ -29,7 +29,7 @@
         "react-dom": "^16.13.1",
         "react-dropzone": "^11.0.1",
         "react-redux": "^7.2.1",
-        "react-scripts": "3.4.1",
+        "react-scripts": "4.0.0",
         "react-splitter-layout": "^4.0.0",
         "redux": "^4.0.5",
         "redux-logger": "^3.0.6",
@@ -59,19 +59,18 @@
             "not op_mini all"
         ],
         "development": [
-            "last 1 chrome version",
+            "chrome 79",
             "last 1 firefox version",
             "last 1 safari version"
         ]
     },
     "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "^2.34.0",
-        "@typescript-eslint/parser": "^2.34.0",
-        "eslint": "^6.8.0",
-        "eslint-config-prettier": "^6.10.1",
-        "eslint-plugin-import": "^2.20.2",
-        "eslint-plugin-prettier": "^3.1.2",
-        "eslint-plugin-react": "^7.20.5",
+        "@typescript-eslint/eslint-plugin": "^4.8.1",
+        "@typescript-eslint/parser": "^4.8.1",
+        "eslint-config-prettier": "^6.15.0",
+        "eslint-plugin-import": "^2.22.1",
+        "eslint-plugin-prettier": "^3.1.4",
+        "eslint-plugin-react": "^7.21.5",
         "jest-mock-extended": "^1.0.9",
         "mkdirp": "^1.0.4",
         "ncp": "^2.0.0",

src/actions/ble.ts

@@ -61,25 +61,15 @@ type Reason<T extends BleDeviceFailToConnectReasonType> = {
     reason: T;
 };
 
-export type BleDeviceFailToConnectNoWebBluetoothReason = Reason<
-    BleDeviceFailToConnectReasonType.NoWebBluetooth
->;
+export type BleDeviceFailToConnectNoWebBluetoothReason = Reason<BleDeviceFailToConnectReasonType.NoWebBluetooth>;
 
-export type BleDeviceFailToConnectCanceledReason = Reason<
-    BleDeviceFailToConnectReasonType.Canceled
->;
+export type BleDeviceFailToConnectCanceledReason = Reason<BleDeviceFailToConnectReasonType.Canceled>;
 
-export type BleDeviceFailToConnectNoGattReason = Reason<
-    BleDeviceFailToConnectReasonType.NoGatt
->;
+export type BleDeviceFailToConnectNoGattReason = Reason<BleDeviceFailToConnectReasonType.NoGatt>;
 
-export type BleDeviceFailToConnectNoServiceReason = Reason<
-    BleDeviceFailToConnectReasonType.NoService
->;
+export type BleDeviceFailToConnectNoServiceReason = Reason<BleDeviceFailToConnectReasonType.NoService>;
 
-export type BleDeviceFailToConnectUnknownReason = Reason<
-    BleDeviceFailToConnectReasonType.Unknown
-> & {
+export type BleDeviceFailToConnectUnknownReason = Reason<BleDeviceFailToConnectReasonType.Unknown> & {
     err: Error;
 };
 
@@ -90,9 +80,7 @@ export type BleDeviceDidFailToConnectReason =
     | BleDeviceFailToConnectNoServiceReason
     | BleDeviceFailToConnectUnknownReason;
 
-export type BleDeviceDidFailToConnectAction = Action<
-    BleDeviceActionType.DidFailToConnect
-> &
+export type BleDeviceDidFailToConnectAction = Action<BleDeviceActionType.DidFailToConnect> &
     BleDeviceDidFailToConnectReason;
 
 /**

src/actions/hub.ts

@@ -22,9 +22,7 @@ export enum HubMessageActionType {
     Checksum = 'hub.message.action.runtime.checksum',
 }
 
-export type HubRuntimeStatusMessageAction = Action<
-    HubMessageActionType.RuntimeStatus
-> & {
+export type HubRuntimeStatusMessageAction = Action<HubMessageActionType.RuntimeStatus> & {
     readonly newStatus: HubRuntimeStatusType;
 };
 

src/actions/lwp3-bootloader.ts

@@ -48,17 +48,13 @@ export enum BootloaderConnectionActionType {
     DidDisconnect = 'bootloader.action.connection.did.disconnect',
 }
 
-export type BootloaderConnectionConnectAction = Action<
-    BootloaderConnectionActionType.Connect
->;
+export type BootloaderConnectionConnectAction = Action<BootloaderConnectionActionType.Connect>;
 
 export function connect(): BootloaderConnectionConnectAction {
     return { type: BootloaderConnectionActionType.Connect };
 }
 
-export type BootloaderConnectionDidConnectAction = Action<
-    BootloaderConnectionActionType.DidConnect
-> & {
+export type BootloaderConnectionDidConnectAction = Action<BootloaderConnectionActionType.DidConnect> & {
     canWriteWithoutResponse: boolean;
 };
 
@@ -82,9 +78,7 @@ export enum BootloaderConnectionFailureReason {
     GattServiceNotFound = 'gatt-service-not-found',
 }
 
-export type BootloaderConnectionDidFailToConnectAction = Action<
-    BootloaderConnectionActionType.DidFailToConnect
-> & {
+export type BootloaderConnectionDidFailToConnectAction = Action<BootloaderConnectionActionType.DidFailToConnect> & {
     reason: BootloaderConnectionFailureReason;
     err?: Error;
 };
@@ -96,19 +90,15 @@ export function didFailToConnect(
     return { type: BootloaderConnectionActionType.DidFailToConnect, reason, err };
 }
 
-export type BootloaderConnectionDidErrorAction = Action<
-    BootloaderConnectionActionType.DidError
-> & {
+export type BootloaderConnectionDidErrorAction = Action<BootloaderConnectionActionType.DidError> & {
     err: Error;
 };
 
 export function didError(err: Error): BootloaderConnectionDidErrorAction {
     return { type: BootloaderConnectionActionType.DidError, err };
 }
 
-export type BootloaderConnectionSendAction = Action<
-    BootloaderConnectionActionType.Send
-> & {
+export type BootloaderConnectionSendAction = Action<BootloaderConnectionActionType.Send> & {
     readonly data: ArrayBuffer;
     readonly withResponse: boolean;
 };
@@ -120,29 +110,23 @@ export function send(
     return { type: BootloaderConnectionActionType.Send, data, withResponse };
 }
 
-export type BootloaderConnectionDidSendAction = Action<
-    BootloaderConnectionActionType.DidSend
-> & {
+export type BootloaderConnectionDidSendAction = Action<BootloaderConnectionActionType.DidSend> & {
     err?: Error;
 };
 
 export function didSend(err?: Error): BootloaderConnectionDidSendAction {
     return { type: BootloaderConnectionActionType.DidSend, err };
 }
 
-export type BootloaderConnectionDidReceiveAction = Action<
-    BootloaderConnectionActionType.DidReceive
-> & {
+export type BootloaderConnectionDidReceiveAction = Action<BootloaderConnectionActionType.DidReceive> & {
     data: DataView;
 };
 
 export function didReceive(data: DataView): BootloaderConnectionDidReceiveAction {
     return { type: BootloaderConnectionActionType.DidReceive, data };
 }
 
-export type BootloaderConnectionDidDisconnectAction = Action<
-    BootloaderConnectionActionType.DidDisconnect
->;
+export type BootloaderConnectionDidDisconnectAction = Action<BootloaderConnectionActionType.DidDisconnect>;
 
 export function didDisconnect(): BootloaderConnectionDidDisconnectAction {
     return { type: BootloaderConnectionActionType.DidDisconnect };
@@ -188,9 +172,7 @@ type BaseBootloaderRequestAction<T extends BootloaderRequestActionType> = Action
 /**
  * Action that requests to erase the flash memory.
  */
-export type BootloaderEraseRequestAction = BaseBootloaderRequestAction<
-    BootloaderRequestActionType.Erase
->;
+export type BootloaderEraseRequestAction = BaseBootloaderRequestAction<BootloaderRequestActionType.Erase>;
 
 /**
  * Creates a request to erase the flash memory.
@@ -202,9 +184,7 @@ export function eraseRequest(): BootloaderEraseRequestAction {
 /**
  * Action that requests to program the flash memory.
  */
-export type BootloaderProgramRequestAction = BaseBootloaderRequestAction<
-    BootloaderRequestActionType.Program
-> & {
+export type BootloaderProgramRequestAction = BaseBootloaderRequestAction<BootloaderRequestActionType.Program> & {
     address: number;
     payload: ArrayBuffer;
 };
@@ -229,9 +209,7 @@ export function programRequest(
 /**
  * Action that requests to reboot the hub.
  */
-export type BootloaderRebootRequestAction = BaseBootloaderRequestAction<
-    BootloaderRequestActionType.Reboot
->;
+export type BootloaderRebootRequestAction = BaseBootloaderRequestAction<BootloaderRequestActionType.Reboot>;
 
 /**
  * Creates a request to reboot the hub.
@@ -243,9 +221,7 @@ export function rebootRequest(): BootloaderRebootRequestAction {
 /**
  * Action that requests to initialize the firmware flashing process.
  */
-export type BootloaderInitRequestAction = BaseBootloaderRequestAction<
-    BootloaderRequestActionType.Init
-> & {
+export type BootloaderInitRequestAction = BaseBootloaderRequestAction<BootloaderRequestActionType.Init> & {
     firmwareSize: number;
 };
 
@@ -264,9 +240,7 @@ export function initRequest(firmwareSize: number): BootloaderInitRequestAction {
 /**
  * Action that requests information about the hub.
  */
-export type BootloaderInfoRequestAction = BaseBootloaderRequestAction<
-    BootloaderRequestActionType.Info
->;
+export type BootloaderInfoRequestAction = BaseBootloaderRequestAction<BootloaderRequestActionType.Info>;
 
 /**
  * Creates a request to get information about the hub.
@@ -279,9 +253,7 @@ export function infoRequest(): BootloaderInfoRequestAction {
  * Action to get the checksum of the bytes that have been written to flash
  * so far.
  */
-export type BootloaderChecksumRequestAction = BaseBootloaderRequestAction<
-    BootloaderRequestActionType.Checksum
->;
+export type BootloaderChecksumRequestAction = BaseBootloaderRequestAction<BootloaderRequestActionType.Checksum>;
 
 /**
  * Creates a request to get the checksum of the bytes that have been written
@@ -294,9 +266,7 @@ export function checksumRequest(): BootloaderChecksumRequestAction {
 /**
  * Action that requests the bootloader flash memory protection state.
  */
-export type BootloaderStateRequestAction = BaseBootloaderRequestAction<
-    BootloaderRequestActionType.State
->;
+export type BootloaderStateRequestAction = BaseBootloaderRequestAction<BootloaderRequestActionType.State>;
 
 /**
  * Creates a request to get the bootloader flash memory protection state.
@@ -308,9 +278,7 @@ export function stateRequest(): BootloaderStateRequestAction {
 /**
  * Action that requests to disconnect the hub.
  */
-export type BootloaderDisconnectRequestAction = BaseBootloaderRequestAction<
-    BootloaderRequestActionType.Disconnect
->;
+export type BootloaderDisconnectRequestAction = BaseBootloaderRequestAction<BootloaderRequestActionType.Disconnect>;
 
 /**
  * Creates a request to disconnect the hub.
@@ -378,19 +346,15 @@ export enum BootloaderResponseActionType {
     Error = 'bootloader.action.response.error',
 }
 
-export type BootloaderEraseResponseAction = Action<
-    BootloaderResponseActionType.Erase
-> & {
+export type BootloaderEraseResponseAction = Action<BootloaderResponseActionType.Erase> & {
     result: Result;
 };
 
 export function eraseResponse(result: Result): BootloaderEraseResponseAction {
     return { type: BootloaderResponseActionType.Erase, result };
 }
 
-export type BootloaderProgramResponseAction = Action<
-    BootloaderResponseActionType.Program
-> & {
+export type BootloaderProgramResponseAction = Action<BootloaderResponseActionType.Program> & {
     checksum: number;
     count: number;
 };
@@ -432,29 +396,23 @@ export function infoResponse(
     };
 }
 
-export type BootloaderChecksumResponseAction = Action<
-    BootloaderResponseActionType.Checksum
-> & {
+export type BootloaderChecksumResponseAction = Action<BootloaderResponseActionType.Checksum> & {
     checksum: number;
 };
 
 export function checksumResponse(checksum: number): BootloaderChecksumResponseAction {
     return { type: BootloaderResponseActionType.Checksum, checksum };
 }
 
-export type BootloaderStateResponseAction = Action<
-    BootloaderResponseActionType.State
-> & {
+export type BootloaderStateResponseAction = Action<BootloaderResponseActionType.State> & {
     level: ProtectionLevel;
 };
 
 export function stateResponse(level: ProtectionLevel): BootloaderStateResponseAction {
     return { type: BootloaderResponseActionType.State, level };
 }
 
-export type BootloaderErrorResponseAction = Action<
-    BootloaderResponseActionType.Error
-> & {
+export type BootloaderErrorResponseAction = Action<BootloaderResponseActionType.Error> & {
     command: Command;
 };
 

public/static/beta.svg src/beta.svgpublic/static/beta.svg renamed to src/beta.svg

@@ -11,14 +11,13 @@ declare module 'ace-builds' {
     export function require(name: string[], callback: (module: any) => void): any;
 }
 
-ace.define('ace/snippets/python', ['require', 'exports', 'module'], function (
-    _require,
-    exports,
-    _module,
-) {
-    // IMPORTANT!!!!!
-    // Snippets must be indented with tab character, not spaces!
-    exports.snippetText = `snippet technichub
+ace.define(
+    'ace/snippets/python',
+    ['require', 'exports', 'module'],
+    function (_require, exports, _module) {
+        // IMPORTANT!!!!!
+        // Snippets must be indented with tab character, not spaces!
+        exports.snippetText = `snippet technichub
 	from pybricks.hubs import TechnicHub
 	from pybricks.pupdevices import Motor
 	from pybricks.parameters import Port, Stop
@@ -144,8 +143,9 @@ snippet "
 	\${1:doc}
 	"""
 `;
-    exports.scope = 'python';
-});
+        exports.scope = 'python';
+    },
+);
 
 (function (): void {
     ace.require(['ace/snippets/python'], function (m: any) {

src/components/editor-snippets.ts

@@ -100,7 +100,7 @@ body {
 
 .watermark::after {
     content: "";
-    background: url("/static/beta.svg");
+    background: url("./beta.svg");
     opacity: 1;
     top: 0;
     left: 0;

src/index.scss

@@ -1,7 +1,7 @@
 /// <reference types="react-scripts" />
 
 declare module '*.json' {
-    const src: object;
+    const src: unknown;
     export default src;
 }
 

src/react-app-env.d.ts

@@ -100,9 +100,9 @@ function* receiveUartData(action: BleUartNotifyAction): Generator {
 }
 
 function* receiveTerminalData(): Generator {
-    const channel = (yield actionChannel(TerminalActionType.ReceivedData)) as Channel<
-        TerminalDataReceiveDataAction
-    >;
+    const channel = (yield actionChannel(
+        TerminalActionType.ReceivedData,
+    )) as Channel<TerminalDataReceiveDataAction>;
     while (true) {
         // wait for input from terminal
         const action = (yield take(channel)) as TerminalDataReceiveDataAction;

src/sagas/terminal.ts

@@ -14,5 +14,9 @@ module.exports = class CustomTestEnvironment extends Environment {
         if (this.global.TextDecoder === undefined) {
             this.global.TextDecoder = TextDecoder;
         }
+
+        // work around https://github.com/facebook/jest/issues/7780
+        this.global.Uint8Array = Uint8Array;
+        this.global.ArrayBuffer = ArrayBuffer;
     }
 };