Upgrade connection library

This has the UICR fix and the last of the breaking changes.

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.9.0-apps.alpha.17",
+    "@microbit/microbit-connection": "^0.9.0-apps.alpha.18",
     "@microbit/microbit-fs": "^0.10.0",
     "@sanity/block-content-to-react": "^3.0.0",
     "@sanity/image-url": "^1.0.1",

package.json

@@ -204,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);
     };

src/device/device-hooks.tsx

@@ -7,16 +7,21 @@ import {
   BoardVersion,
   ConnectionAvailabilityStatus,
   ConnectionStatus,
-  DeviceConnectionEventMap,
+  ConnectionStatusChange,
   FlashDataSource,
   FlashOptions,
   ProgressStage,
   DeviceError,
   DeviceErrorCode,
-  TypedEventTarget,
 } from "@microbit/microbit-connection";
-import { SerialConnectionEventMap } from "@microbit/microbit-connection/usb";
 import { MicrobitUSBConnection } from "@microbit/microbit-connection/usb";
+import { SimpleEventTarget } from "./simple-event-target";
+
+interface MockEventMap {
+  status: ConnectionStatusChange;
+  flash: void;
+  serialdata: { data: string };
+}
 
 /**
  * A mock device used during end-to-end testing.
@@ -26,9 +31,10 @@ import { MicrobitUSBConnection } from "@microbit/microbit-connection/usb";
  * the connected state without a real device.
  */
 export class MockDeviceConnection
-  extends TypedEventTarget<DeviceConnectionEventMap & SerialConnectionEventMap>
+  extends SimpleEventTarget<MockEventMap>
   implements MicrobitUSBConnection
 {
+  readonly type = "usb" as const;
   status: ConnectionStatus = ConnectionStatus.NoAuthorizedDevice;
 
   private connectResults: DeviceErrorCode[] = [];

src/device/mock.ts

@@ -0,0 +1,48 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+type Listener<T> = (data: T) => void;
+
+/**
+ * Lightweight typed event target with Set-based deduplication.
+ */
+export class SimpleEventTarget<M> {
+  private listeners = new Map<string, Set<Listener<any>>>();
+
+  addEventListener<K extends keyof M & string>(
+    type: K,
+    listener: Listener<M[K]>
+  ): void {
+    let set = this.listeners.get(type);
+    if (!set) {
+      set = new Set();
+      this.listeners.set(type, set);
+    }
+    set.add(listener);
+  }
+
+  removeEventListener<K extends keyof M & string>(
+    type: K,
+    listener: Listener<M[K]>
+  ): void {
+    const set = this.listeners.get(type);
+    if (set?.delete(listener) && set.size === 0) {
+      this.listeners.delete(type);
+    }
+  }
+
+  protected dispatchEvent<K extends keyof M & string>(
+    type: K,
+    ...[data]: M[K] extends void ? [] : [data: M[K]]
+  ): void {
+    const set = this.listeners.get(type);
+    if (set) {
+      for (const listener of set) {
+        listener(data as M[K]);
+      }
+    }
+  }
+}

src/device/simple-event-target.ts

@@ -6,24 +6,23 @@
 import {
   BoardVersion,
   ConnectionStatus,
-  DeviceConnectionEventMap,
-  TypedEventTarget,
+  ConnectionStatusChange,
 } from "@microbit/microbit-connection";
-import { SerialConnectionEventMap } from "@microbit/microbit-connection/usb";
 import { MicrobitUSBConnection } from "@microbit/microbit-connection/usb";
+import { SimpleEventTarget } from "./simple-event-target";
 import { Logging } from "../logging/logging";
 
 // Simulator-only events.
 
-export interface LogDataEvent {
+export interface LogData {
   log: DataLog;
 }
 
-export interface RadioDataEvent {
+export interface RadioData {
   text: string;
 }
 
-export interface StateChangeEvent {
+export interface StateChange {
   state: SimulatorState;
 }
 
@@ -136,12 +135,19 @@ const initialDataLog = (): DataLog => ({
   data: [],
 });
 
-interface SimulatorEventMap extends DeviceConnectionEventMap {
-  log_data: LogDataEvent;
-  radio_data: RadioDataEvent;
-  radio_reset: void;
-  state_change: StateChangeEvent;
-  request_flash: void;
+interface SimulatorEventMap {
+  status: ConnectionStatusChange;
+  beforerequestdevice: void;
+  afterrequestdevice: void;
+  flash: void;
+  serialdata: { data: string };
+  serialreset: void;
+  // Simulator-specific
+  logdata: LogData;
+  radiodata: RadioData;
+  radioreset: void;
+  statechange: StateChange;
+  requestflash: void;
 }
 
 /**
@@ -150,9 +156,10 @@ interface SimulatorEventMap extends DeviceConnectionEventMap {
  * This communicates with the iframe that is used to embed the simulator.
  */
 export class SimulatorDeviceConnection
-  extends TypedEventTarget<SimulatorEventMap & SerialConnectionEventMap>
+  extends SimpleEventTarget<SimulatorEventMap>
   implements MicrobitUSBConnection
 {
+  readonly type = "usb" as const;
   status: ConnectionStatus = ConnectionStatus.NoAuthorizedDevice;
   state: SimulatorState | undefined;
 
@@ -168,26 +175,26 @@ export class SimulatorDeviceConnection
       case "ready": {
         const newState = event.data.state;
         this.state = newState;
-        this.dispatchEvent("state_change", { state: newState });
+        this.dispatchEvent("statechange", { state: newState });
         if (this.status !== ConnectionStatus.Connected) {
           this.setStatus(ConnectionStatus.Connected);
         }
         break;
       }
-      case "request_flash": {
-        this.dispatchEvent("request_flash");
+      case "requestflash": {
+        this.dispatchEvent("requestflash");
         this.logging.event({
           type: "sim-user-start",
         });
         break;
       }
-      case "state_change": {
+      case "statechange": {
         const updated = {
           ...this.state,
           ...event.data.change,
         };
         this.state = updated;
-        this.dispatchEvent("state_change", { state: updated });
+        this.dispatchEvent("statechange", { state: updated });
         break;
       }
       case "radio_output": {
@@ -200,7 +207,7 @@ export class SimulatorDeviceConnection
           // eslint-disable-next-line no-control-regex
           .replace(/^\x01\x00\x01/, "");
         if (message instanceof Uint8Array) {
-          this.dispatchEvent("radio_data", { text });
+          this.dispatchEvent("radiodata", { text });
         }
         break;
       }
@@ -218,12 +225,12 @@ export class SimulatorDeviceConnection
           result.data.push({ data: entry.data });
         }
         this.log = result;
-        this.dispatchEvent("log_data", { log: this.log });
+        this.dispatchEvent("logdata", { log: this.log });
         break;
       }
       case "log_delete": {
         this.log = initialDataLog();
-        this.dispatchEvent("log_data", { log: this.log });
+        this.dispatchEvent("logdata", { log: this.log });
         break;
       }
       case "serial_output": {
@@ -300,7 +307,7 @@ export class SimulatorDeviceConnection
   private notifyResetComms() {
     // Might be nice to rework so this was all about connection state changes.
     this.dispatchEvent("serialreset");
-    this.dispatchEvent("radio_reset");
+    this.dispatchEvent("radioreset");
   }
 
   async disconnect(): Promise<void> {
@@ -340,7 +347,7 @@ export class SimulatorDeviceConnection
         value,
       },
     };
-    this.dispatchEvent("state_change", { state: this.state });
+    this.dispatchEvent("statechange", { state: this.state });
     this.postMessage("set_value", {
       id,
       value,

src/device/simulator.ts

@@ -73,7 +73,7 @@ test.describe("connect", () => {
   test("shows the update firmware dialog and connects on try again", async ({
     app,
   }) => {
-    await app.mockDeviceConnectFailure("update-req");
+    await app.mockDeviceConnectFailure("firmware-update-required");
     await app.connect();
     await app.expectDialog("Firmware update required");
     await app.connectViaTryAgain();

src/e2e/connect.test.ts

@@ -853,15 +853,15 @@ export class ProjectActions {
           // The UI will already reflect the disconnection.
           return;
         }
-        case "update-req":
+        case "firmware-update-required":
           await this.handleFirmwareUpdate(e.code, userAction, finalFocusRef);
           return;
-        case "clear-connect":
-          return this.handleClearConnectError(finalFocusRef);
-        case "timeout-error":
+        case "device-in-use":
+          return this.handleDeviceInUseError(finalFocusRef);
+        case "timeout":
           return this.handleTimeoutError(finalFocusRef);
-        case "reconnect-microbit":
-          return this.handleReconnectMicrobitError(finalFocusRef);
+        case "connection-error":
+          return this.handleConnectionError(finalFocusRef);
         default: {
           return this.actionFeedback.unexpectedError(e);
         }
@@ -886,7 +886,7 @@ export class ProjectActions {
     this.save(finalFocusRef, true);
   }
 
-  private async handleClearConnectError(finalFocusRef: FinalFocusRef) {
+  private async handleDeviceInUseError(finalFocusRef: FinalFocusRef) {
     return this.dialogs.show<void>((callback) => (
       <WebUSBErrorDialog
         callback={callback}
@@ -906,7 +906,7 @@ export class ProjectActions {
       />
     ));
   }
-  private async handleReconnectMicrobitError(finalFocusRef: FinalFocusRef) {
+  private async handleConnectionError(finalFocusRef: FinalFocusRef) {
     return this.dialogs.show<void>((callback) => (
       <WebUSBErrorDialog
         callback={callback}

src/project/project-actions.tsx

@@ -68,9 +68,9 @@ const SimulatorActionBar = ({
     setIsMuted(!isMuted);
   }, [device, isMuted, setIsMuted]);
   useEffect(() => {
-    device.addEventListener("request_flash", handlePlay);
+    device.addEventListener("requestflash", handlePlay);
     return () => {
-      device.removeEventListener("request_flash", handlePlay);
+      device.removeEventListener("requestflash", handlePlay);
     };
   }, [device, handlePlay]);
   const size = "md";

src/simulator/SimulatorActionBar.tsx

@@ -23,7 +23,7 @@ import {
   RangeSensor as RangeSensorType,
   SensorStateKey,
   SimulatorState,
-  StateChangeEvent,
+  StateChange,
 } from "../device/simulator";
 import { useRouterState } from "../router-hooks";
 import ButtonsModule from "./ButtonsModule";
@@ -110,12 +110,12 @@ const SimulatorModules = ({ running, ...props }: SimulatorModulesProps) => {
   );
   const intl = useIntl();
   useEffect(() => {
-    const listener = (event: StateChangeEvent) => {
+    const listener = (event: StateChange) => {
       setState(event.state);
     };
-    device.addEventListener("state_change", listener);
+    device.addEventListener("statechange", listener);
     return () => {
-      device.removeEventListener("state_change", listener);
+      device.removeEventListener("statechange", listener);
     };
   }, [device, setState]);
   const handleSensorChange = useCallback(