Upgrade connection library to preview version

This contains the pre-1.0 breaking API changes and USB serial re-work.

This should improve serial issues after first physical connection + flash and
extra serial from previous programs leaking into subsequent ones.

This is a preview version for testing on a review branch, we won't merge this
directly.

Author: microbit-matt-hillsdon

package-lock.json

@@ -16,7 +16,7 @@
     "@codemirror/view": "^6.26.3",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@microbit/microbit-connection": "^0.0.0-alpha.36",
+    "@microbit/microbit-connection": "^0.9.0-apps.alpha.17",
     "@microbit/microbit-fs": "^0.10.0",
     "@sanity/block-content-to-react": "^3.0.0",
     "@sanity/image-url": "^1.0.1",

package.json

@@ -10,7 +10,7 @@ import "./App.css";
 import { DialogProvider } from "./common/use-dialogs";
 import VisualViewPortCSSVariables from "./common/VisualViewportCSSVariables";
 import { deployment, useDeployment } from "./deployment";
-import { createWebUSBConnection } from "@microbit/microbit-connection";
+import { createUSBConnection } from "@microbit/microbit-connection/usb";
 import { DeviceContextProvider } from "./device/device-hooks";
 import { MockDeviceConnection } from "./device/mock";
 import DocumentationProvider from "./documentation/documentation-hooks";
@@ -40,7 +40,7 @@ const isMockDeviceMode = () =>
 const logging = deployment.logging;
 const device = isMockDeviceMode()
   ? new MockDeviceConnection()
-  : createWebUSBConnection({ logging });
+  : createUSBConnection({ logging });
 
 const host = createHost(logging);
 const fs = new FileSystem(logging, host, fetchMicroPython);

src/App.tsx

@@ -5,7 +5,7 @@
  */
 import { ReactNode, createContext } from "react";
 import { CookieConsent, DeploymentConfigFactory } from "..";
-import { NullLogging } from "./logging";
+import { ConsoleLogging } from "./logging";
 import theme from "./theme";
 
 const stubConsentValue: CookieConsent = {
@@ -20,7 +20,7 @@ const defaultDeploymentFactory: DeploymentConfigFactory = () => ({
   chakraTheme: theme,
   // This isn't ideal as it's the branded version. You can just remove the field to remove the welcome dialog.
   welcomeVideoYouTubeId: "mREwMW69qKc",
-  logging: new NullLogging(),
+  logging: new ConsoleLogging(),
   compliance: {
     ConsentProvider: ({ children }: { children: ReactNode }) => (
       <stubConsentContext.Provider value={stubConsentValue}>

src/deployment/default/index.tsx

@@ -5,8 +5,14 @@
  */
 import { Event, Logging } from "../../logging/logging";
 
-export class NullLogging implements Logging {
-  event(_event: Event): void {}
-  error(_e: any): void {}
-  log(_e: any): void {}
+export class ConsoleLogging implements Logging {
+  event(event: Event): void {
+    console.log(event);
+  }
+  error(e: any): void {
+    console.error(e);
+  }
+  log(e: any): void {
+    console.log(e);
+  }
 }

src/deployment/default/logging.ts

@@ -15,13 +15,15 @@ import { useFileSystem } from "../fs/fs-hooks";
 import { useLogging } from "../logging/logging-hooks";
 import {
   ConnectionStatus,
-  MicrobitWebUSBConnection,
-  SerialDataEvent,
-  ConnectionStatusEvent,
+  ConnectionStatusChange,
 } from "@microbit/microbit-connection";
+import {
+  MicrobitUSBConnection,
+  SerialData,
+} from "@microbit/microbit-connection/usb";
 import { SimulatorDeviceConnection } from "./simulator";
 
-const DeviceContext = React.createContext<undefined | MicrobitWebUSBConnection>(
+const DeviceContext = React.createContext<undefined | MicrobitUSBConnection>(
   undefined
 );
 
@@ -56,7 +58,7 @@ export const useConnectionStatus = () => {
   const device = useDevice();
   const [status, setStatus] = useState<ConnectionStatus>(device.status);
   useEffect(() => {
-    const statusListener = (event: ConnectionStatusEvent) => {
+    const statusListener = (event: ConnectionStatusChange) => {
       setStatus(event.status);
     };
     device.addEventListener("status", statusListener);
@@ -185,7 +187,7 @@ export const useDeviceTraceback = () => {
 
   useEffect(() => {
     const buffer = new TracebackScrollback();
-    const dataListener = (event: SerialDataEvent) => {
+    const dataListener = (event: SerialData) => {
       const latest = buffer.push(event.data);
       setRuntimeError((current) => {
         if (!current && latest) {
@@ -234,7 +236,7 @@ export const DeviceContextProvider = ({
   value: device,
   children,
 }: {
-  value: MicrobitWebUSBConnection;
+  value: MicrobitUSBConnection;
   children: ReactNode;
 }) => {
   const syncStatusState = useState<SyncStatus>(SyncStatus.OUT_OF_SYNC);

src/device/device-hooks.tsx

@@ -8,15 +8,14 @@ import {
   ConnectionStatus,
   DeviceConnectionEventMap,
   FlashDataSource,
-  FlashEvent,
-  SerialDataEvent,
-  ConnectionStatusEvent,
+  FlashOptions,
+  ProgressStage,
   DeviceError,
   DeviceErrorCode,
   TypedEventTarget,
-  MicrobitWebUSBConnection,
-  SerialConnectionEventMap,
 } from "@microbit/microbit-connection";
+import { SerialConnectionEventMap } from "@microbit/microbit-connection/usb";
+import { MicrobitUSBConnection } from "@microbit/microbit-connection/usb";
 
 /**
  * A mock device used during end-to-end testing.
@@ -27,11 +26,9 @@ import {
  */
 export class MockDeviceConnection
   extends TypedEventTarget<DeviceConnectionEventMap & SerialConnectionEventMap>
-  implements MicrobitWebUSBConnection
+  implements MicrobitUSBConnection
 {
-  status: ConnectionStatus = (navigator as any).usb
-    ? ConnectionStatus.NO_AUTHORIZED_DEVICE
-    : ConnectionStatus.NOT_SUPPORTED;
+  status: ConnectionStatus = ConnectionStatus.NoAuthorizedDevice;
 
   private connectResults: DeviceErrorCode[] = [];
 
@@ -42,34 +39,38 @@ export class MockDeviceConnection
   }
 
   mockSerialWrite(data: string) {
-    this.dispatchTypedEvent("serialdata", new SerialDataEvent(data));
+    this.dispatchEvent("serialdata", { data });
   }
 
   mockConnect(code: DeviceErrorCode) {
     this.connectResults.push(code);
   }
 
   async initialize(): Promise<void> {}
+  async checkAvailability() {
+    return "available" as const;
+  }
 
   dispose() {}
-  getDeviceId(): number | undefined {
-    return undefined;
+  getDeviceId(): number {
+    return 0;
   }
   setRequestDeviceExclusionFilters(): void {}
-  getDevice() {}
+  getDevice() {
+    return undefined;
+  }
   async softwareReset(): Promise<void> {}
 
-  async connect(): Promise<ConnectionStatus> {
+  async connect(): Promise<void> {
     const next = this.connectResults.shift();
     if (next) {
       throw new DeviceError({ code: next, message: "Mocked failure" });
     }
 
-    this.setStatus(ConnectionStatus.CONNECTED);
-    return this.status;
+    this.setStatus(ConnectionStatus.Connected);
   }
 
-  getBoardVersion(): BoardVersion | undefined {
+  getBoardVersion(): BoardVersion {
     return "V2";
   }
 
@@ -81,42 +82,32 @@ export class MockDeviceConnection
    */
   async flash(
     _dataSource: FlashDataSource,
-    options: {
-      /**
-       * True to use a partial flash where possible, false to force a full flash.
-       */
-      partial: boolean;
-      /**
-       * A progress callback. Called with undefined when the process is complete or has failed.
-       */
-      progress: (percentage: number | undefined) => void;
-    }
+    options: FlashOptions
   ): Promise<void> {
     await new Promise((resolve) => setTimeout(resolve, 100));
-    options.progress(0.5);
+    options.progress?.(ProgressStage.PartialFlashing, 0.5);
     await new Promise((resolve) => setTimeout(resolve, 100));
-    options.progress(undefined);
-    this.dispatchTypedEvent("flash", new FlashEvent());
+    this.dispatchEvent("flash");
   }
 
   async disconnect(): Promise<void> {
-    this.setStatus(ConnectionStatus.DISCONNECTED);
+    this.setStatus(ConnectionStatus.Disconnected);
   }
 
   async serialWrite(data: string): Promise<void> {
     console.log("[Serial] ", data);
   }
 
   private setStatus(newStatus: ConnectionStatus) {
+    const previousStatus = this.status;
     this.status = newStatus;
-    this.dispatchTypedEvent("status", new ConnectionStatusEvent(this.status));
+    this.dispatchEvent("status", {
+      status: newStatus,
+      previousStatus,
+    });
   }
 
   clearDevice(): void {
-    this.setStatus(ConnectionStatus.NO_AUTHORIZED_DEVICE);
-  }
-
-  mockWebUsbNotSupported(): void {
-    this.setStatus(ConnectionStatus.NOT_SUPPORTED);
+    this.setStatus(ConnectionStatus.NoAuthorizedDevice);
   }
 }