feat: wasm zero

src/lib/ccos/ccos-events.ts

@@ -15,7 +15,7 @@ export interface CCOSKeyReleaseEvent {
 
 export interface CCOSSerialEvent {
   type: "serial";
-  data: number;
+  data: Uint8Array;
 }
 
 export type CCOSInEvent =

src/lib/ccos/ccos.ts

@@ -1,6 +1,7 @@
 import { getMeta } from "$lib/meta/meta-storage";
-import { connectable, from, multicast, Subject } from "rxjs";
+import type { SerialPortLike } from "$lib/serial/device";
 import type {
+  CCOSInEvent,
   CCOSInitEvent,
   CCOSKeyPressEvent,
   CCOSKeyReleaseEvent,
@@ -8,7 +9,7 @@ import type {
 } from "./ccos-events";
 import { KEYCODE_TO_SCANCODE, SCANCODE_TO_KEYCODE } from "./ccos-interop";
 
-const device = ".zero_wasm";
+const device = "zero_wasm";
 
 class CCOSKeyboardEvent extends KeyboardEvent {
   constructor(...params: ConstructorParameters<typeof KeyboardEvent>) {
@@ -22,14 +23,17 @@ const MASK_ALT = 0b0100_0100;
 const MASK_ALT_GRAPH = 0b0000_0100;
 const MASK_GUI = 0b1000_1000;
 
-export class CCOS {
+export class CCOS implements SerialPortLike {
   private readonly currKeys = new Set<number>();
 
   private readonly layout = new Map<string, string>();
 
   private readonly worker = new Worker("/ccos-worker.js", { type: "module" });
 
-  private ready = false;
+  private resolveReady!: () => void;
+  private ready = new Promise<void>((resolve) => {
+    this.resolveReady = resolve;
+  });
 
   private lastEvent?: KeyboardEvent;
 
@@ -109,33 +113,29 @@ export class CCOS {
     this.currKeys.delete(0);
   }
 
-  private outStream = new Subject<number>();
+  private controller?: ReadableStreamDefaultController<Uint8Array>;
 
-  private readonly buffer: number[] = [];
-  private readonly outStream = new WritableStream<number>({
-    start(controller) {},
-  });
-
-  readonly readable = connectable()
-  readonly writable = new WritableStream<string>();
+  readable!: ReadableStream<Uint8Array>;
+  writable!: WritableStream<Uint8Array>;
 
   constructor(url: string) {
     this.worker.addEventListener(
       "message",
       (event: MessageEvent<CCOSOutEvent>) => {
+        if (event.data instanceof Uint8Array) {
+          this.controller?.enqueue(event.data);
+          return;
+        }
+        console.log("CCOS worker message", event.data);
         switch (event.data.type) {
           case "ready": {
-            this.ready = true;
+            this.resolveReady();
             break;
           }
           case "report": {
             this.onReport(event.data.modifiers, event.data.keys);
             break;
           }
-          case "serial": {
-            this.outStream.next(event.data.data);
-            break;
-          }
         }
       },
     );
@@ -152,7 +152,29 @@ export class CCOS {
     } satisfies CCOSInitEvent);
   }
 
-  async destroy() {
+  getInfo(): SerialPortInfo {
+    return {};
+  }
+
+  async open(_options: SerialOptions) {
+    this.readable = new ReadableStream<Uint8Array>({
+      start: (controller) => {
+        this.controller = controller;
+      },
+    });
+    this.writable = new WritableStream<Uint8Array>({
+      write: (chunk) => {
+        this.worker.postMessage(chunk, [chunk.buffer]);
+      },
+    });
+    return this.ready;
+  }
+  async close() {
+    await this.ready;
+  }
+  async forget() {
+    await this.ready;
+    this.close();
     this.worker.terminate();
   }
 
@@ -198,7 +220,7 @@ export class CCOS {
 }
 
 export async function fetchCCOS(
-  version = ".test",
+  version = ".2.2.0-beta.12+266bdda",
   fetch: typeof window.fetch = window.fetch,
 ): Promise<CCOS | undefined> {
   const meta = await getMeta(device, version, fetch);

src/lib/components/layout/Layout.svelte

@@ -24,6 +24,10 @@
       import("$lib/assets/layouts/generic/103-key.yml").then(
         (it) => it.default as VisualLayout,
       ),
+    ZERO: () =>
+      import("$lib/assets/layouts/generic/103-key.yml").then(
+        (it) => it.default as VisualLayout,
+      ),
     M4G: () =>
       import("$lib/assets/layouts/m4g.yml").then(
         (it) => it.default as VisualLayout,

src/lib/meta/meta-storage.ts

@@ -17,7 +17,7 @@ export async function getMeta(
   try {
     if (!browser) return fetchMeta(device, version, fetch);
 
-    const dbRequest = indexedDB.open("version-meta", 4);
+    const dbRequest = indexedDB.open("version-meta", 5);
     const db = await new Promise<IDBDatabase>((resolve, reject) => {
       dbRequest.onsuccess = () => resolve(dbRequest.result);
       dbRequest.onerror = () => reject(dbRequest.error);
@@ -144,6 +144,10 @@ async function fetchMeta(
         )?.name ??
         undefined,
       esptool: meta?.update?.esptool ?? undefined,
+      js: meta?.update?.js ?? undefined,
+      wasm: meta?.update?.wasm ?? undefined,
+      dll: meta?.update?.dll ?? undefined,
+      so: meta?.update?.so ?? undefined,
     },
     spiFlash: meta?.spi_flash ?? undefined,
   };

src/lib/meta/types/meta.ts

@@ -52,6 +52,10 @@ export interface RawVersionMeta {
     ota: string | null;
     uf2: string | null;
     esptool: EspToolData | null;
+    js: string | null;
+    wasm: string | null;
+    dll: string | null;
+    so: string | null;
   };
   files: string[];
   spi_flash: SPIFlashInfo | null;
@@ -78,6 +82,10 @@ export interface VersionMeta {
     ota?: string;
     uf2?: string;
     esptool?: EspToolData;
+    js?: string;
+    wasm?: string;
+    dll?: string;
+    so?: string;
   };
   spiFlash?: SPIFlashInfo;
 }

src/lib/serial/connection.ts

@@ -1,5 +1,5 @@
 import { get, writable } from "svelte/store";
-import { CharaDevice } from "$lib/serial/device";
+import { CharaDevice, type SerialPortLike } from "$lib/serial/device";
 import type { Chord } from "$lib/serial/chord";
 import type { Writable } from "svelte/store";
 import type { CharaLayout } from "$lib/serialization/layout";
@@ -10,6 +10,10 @@ import type { VersionMeta } from "$lib/meta/types/meta";
 
 export const serialPort = writable<CharaDevice | undefined>();
 
+navigator.serial?.addEventListener("disconnect", async (event) => {
+  serialPort.set(undefined);
+});
+
 export interface SerialLogEntry {
   type: "input" | "output" | "system";
   value: string;
@@ -59,9 +63,13 @@ export interface ProgressInfo {
 }
 export const syncProgress = writable<ProgressInfo | undefined>(undefined);
 
-export async function initSerial(manual = false, withSync = true) {
-  const device = get(serialPort) ?? new CharaDevice();
-  await device.init(manual);
+export async function initSerial(port: SerialPortLike, withSync: boolean) {
+  const prev = get(serialPort);
+  try {
+    prev?.close();
+  } catch {}
+  const device = new CharaDevice(port);
+  await device.init();
   serialPort.set(device);
   if (withSync) {
     await sync();

src/lib/serial/device.ts

@@ -11,7 +11,7 @@ import { browser } from "$app/environment";
 import { showConnectionFailedDialog } from "$lib/dialogs/connection-failed-dialog";
 import semverGte from "semver/functions/gte";
 
-const PORT_FILTERS: Map<string, SerialPortFilter> = new Map([
+export const PORT_FILTERS: Map<string, SerialPortFilter> = new Map([
   ["ONE M0", { usbProductId: 32783, usbVendorId: 9114 }],
   ["TWO S3 (pre-production)", { usbProductId: 0x8252, usbVendorId: 0x303a }],
   ["TWO S3", { usbProductId: 0x8253, usbVendorId: 0x303a }],
@@ -23,6 +23,42 @@ const PORT_FILTERS: Map<string, SerialPortFilter> = new Map([
   ["T4G S2", { usbProductId: 0x82f2, usbVendorId: 0x303a }],
 ]);
 
+const DEVICE_ALIASES = new Map<string, Set<string>>([
+  ["CC1", new Set(["ONE M0", "one_m0"])],
+  ["CC2", new Set(["TWO S3", "two_s3", "TWO S3 (pre-production)"])],
+  ["Lite (S2)", new Set(["LITE S2", "lite_s2"])],
+  ["Lite (M0)", new Set(["LITE M0", "lite_m0"])],
+  ["CCX", new Set(["X", "ccx"])],
+  ["M4G", new Set(["M4G S3", "m4g_s3", "M4G S3 (pre-production)"])],
+  ["M4G (right)", new Set(["M4GR S3", "m4gr_s3"])],
+  ["T4G", new Set(["T4G S2", "t4g_s2"])],
+]);
+
+export function getName(alias: string): string {
+  for (const [name, aliases] of DEVICE_ALIASES.entries()) {
+    if (aliases.has(alias)) {
+      return name;
+    }
+  }
+  return alias;
+}
+
+export function getPortName(port: SerialPort): string {
+  const { usbProductId, usbVendorId } = port.getInfo();
+  console.log(port.getInfo());
+  for (const [name, filter] of PORT_FILTERS.entries()) {
+    if (
+      filter.usbProductId === usbProductId &&
+      filter.usbVendorId === usbVendorId
+    ) {
+      return getName(name);
+    }
+  }
+  return `Unknown Device (0x${usbVendorId?.toString(
+    16,
+  )}/0x${usbProductId?.toString(16)})`;
+}
+
 const KEY_COUNTS = {
   ONE: 90,
   TWO: 90,
@@ -31,6 +67,7 @@ const KEY_COUNTS = {
   M4G: 90,
   M4GR: 90,
   T4G: 7,
+  ZERO: 256,
 } as const;
 
 if (
@@ -88,8 +125,12 @@ async function timeout<T>(promise: Promise<T>, ms: number): Promise<T> {
   ]).finally(() => clearTimeout(timer));
 }
 
+export type SerialPortLike = Pick<
+  SerialPort,
+  "readable" | "writable" | "open" | "close" | "getInfo" | "forget"
+>;
+
 export class CharaDevice {
-  private port!: SerialPort;
   private reader!: ReadableStreamDefaultReader<string>;
 
   private readonly abortController1 = new AbortController();
@@ -114,18 +155,13 @@ export class CharaDevice {
     return this.port.getInfo();
   }
 
-  constructor(private readonly baudRate = 115200) {}
+  constructor(
+    private readonly port: SerialPortLike,
+    private readonly baudRate = 115200,
+  ) {}
 
-  async init(manual = false) {
+  async init() {
     try {
-      const ports = await getViablePorts();
-      this.port =
-        !manual && ports.length === 1
-          ? ports[0]!
-          : await navigator.serial.requestPort({
-              filters: [...PORT_FILTERS.values()],
-            });
-
       await this.port.open({ baudRate: this.baudRate });
       const info = this.port.getInfo();
       serialLog.update((it) => {
@@ -242,6 +278,10 @@ export class CharaDevice {
     await this.port.forget();
   }
 
+  async close() {
+    await this.port.close();
+  }
+
   /**
    * Read/write to serial port
    */