Upgrade connection library to v1.0.0-beta.0 for serial fixes (#1238)

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

We'll run this on Python beta for a bit to build confidence as the BLE code has
had far more real use than the USB changes.

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

Relevant fixes:
- Workaround for the bad response issue - microbit-foundation/microbit-connection#72
- Use DAPLink vendor command for serial number - microbit-foundation/microbit-connection#103
- Inline CMSIS-DAP code, fix and test serial issues - microbit-foundation/microbit-connection#110
- Fix UICR not updated during WebUSB partial flashing - microbit-foundation/microbit-connection#113

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": "^1.0.0-beta.0",
     "@microbit/microbit-fs": "^0.10.0",
     "@sanity/block-content-to-react": "^3.0.0",
     "@sanity/image-url": "^1.0.1",
@@ -55,7 +55,7 @@
     "xterm-addon-fit": "^0.5.0"
   },
   "devDependencies": {
-"@chakra-ui/cli": "2.4.1",
+    "@chakra-ui/cli": "2.4.1",
     "@formatjs/cli": "^6.2.7",
     "@playwright/test": "^1.58.2",
     "@testing-library/jest-dom": "^5.14.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

@@ -19,7 +19,7 @@ const doNothing = () => {};
 export interface ProgressDialogParameters {
   header: ReactNode;
   body?: ReactNode;
-  progress: number | undefined;
+  progress?: number;
 }
 
 interface ProgressDialogProps extends ProgressDialogParameters {
@@ -29,10 +29,15 @@ interface ProgressDialogProps extends ProgressDialogParameters {
 /**
  * A progress dialog used for the flashing process.
  */
-const ProgressDialog = ({ header, body, progress }: ProgressDialogProps) => {
+const ProgressDialog = ({
+  isOpen,
+  header,
+  body,
+  progress,
+}: ProgressDialogProps) => {
   return (
     <Modal
-      isOpen={progress !== undefined}
+      isOpen={isOpen}
       onClose={doNothing}
       isCentered
       size={body ? "xl" : "md"}
@@ -53,7 +58,7 @@ const ProgressDialog = ({ header, body, progress }: ProgressDialogProps) => {
             alignItems="flex-start"
           >
             {body}
-            <Progress value={progress! * 100} width="100%" />
+            <Progress value={(progress ?? 0) * 100} width="100%" />
           </VStack>
         </ModalBody>
       </ModalContent>

src/common/ProgressDialog.tsx

@@ -65,11 +65,11 @@ export class Dialogs {
   }
 
   progress(options: ProgressDialogParameters): void {
-    if (options.progress === undefined) {
-      this.progressDialogSetState(undefined);
-    } else {
-      this.progressDialogSetState(options);
-    }
+    this.progressDialogSetState(options);
+  }
+
+  closeProgress(): void {
+    this.progressDialogSetState(undefined);
   }
 }
 

src/common/use-dialogs.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) {
@@ -202,9 +204,7 @@ export const useDeviceTraceback = () => {
     };
     device.addEventListener("serialdata", dataListener);
     device.addEventListener("serialreset", clearListener);
-    device.addEventListener("serialerror", clearListener);
     return () => {
-      device.removeEventListener("serialerror", clearListener);
       device.removeEventListener("serialreset", clearListener);
       device.removeEventListener("serialdata", dataListener);
     };
@@ -234,7 +234,7 @@ export const DeviceContextProvider = ({
   value: device,
   children,
 }: {
-  value: MicrobitWebUSBConnection;
+  value: MicrobitUSBConnection;
   children: ReactNode;
 }) => {
   const syncStatusState = useState<SyncStatus>(SyncStatus.OUT_OF_SYNC);