@blibliki/engine 0.3.7 → 0.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blibliki/engine",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "type": "module",
   "source": "src/index.ts",
   "main": "dist/index.cjs",
@@ -18,10 +18,10 @@
   },
   "dependencies": {
     "es-toolkit": "^1.41.0",
+    "jzz": "^1.9.6",
     "node-web-audio-api": "^1.0.3",
-    "webmidi": "^3.1.14",
-    "@blibliki/transport": "^0.3.7",
-    "@blibliki/utils": "^0.3.7"
+    "@blibliki/utils": "^0.3.9",
+    "@blibliki/transport": "^0.3.9"
   },
   "scripts": {
     "build": "tsup",

package/src/Engine.ts

@@ -1,4 +1,5 @@
 import {
+  BPM,
   ContextTime,
   Ticks,
   TimeSignature,
@@ -12,7 +13,14 @@ import {
   pick,
   uuidv4,
 } from "@blibliki/utils";
-import { IRoute, Routes, MidiDeviceManager, IModule, MidiEvent } from "@/core";
+import {
+  IRoute,
+  Routes,
+  MidiDeviceManager,
+  IModule,
+  MidiEvent,
+  IModuleSerialize,
+} from "@/core";
 import {
   ICreateModule,
   ModuleParams,
@@ -20,7 +28,11 @@ import {
   ModuleTypeToModuleMapping,
   createModule,
 } from "@/modules";
-import { IPolyModule, PolyModule } from "./core/module/PolyModule";
+import {
+  IPolyModule,
+  IPolyModuleSerialize,
+  PolyModule,
+} from "./core/module/PolyModule";
 import { loadProcessors } from "./processors";
 
 export type IUpdateModule<T extends ModuleType> = {
@@ -33,6 +45,13 @@ export type IUpdateModule<T extends ModuleType> = {
 
 export type ICreateRoute = Optional<IRoute, "id">;
 
+export interface IEngineSerialize {
+  bpm: BPM;
+  timeSignature: TimeSignature;
+  modules: (IModuleSerialize<ModuleType> | IPolyModuleSerialize<ModuleType>)[];
+  routes: IRoute[];
+}
+
 export class Engine {
   private static _engines = new Map<string, Engine>();
   private static _currentId: string | undefined;
@@ -65,6 +84,24 @@ export class Engine {
     return this.getById(this._currentId);
   }
 
+  static async load(data: IEngineSerialize): Promise<Engine> {
+    const { bpm, timeSignature, modules, routes } = data;
+    const context = new Context();
+    const engine = new Engine(context);
+    await engine.initialize();
+
+    engine.timeSignature = timeSignature;
+    engine.bpm = bpm;
+    modules.forEach((m) => {
+      engine.addModule(m);
+    });
+    routes.forEach((r) => {
+      engine.addRoute(r);
+    });
+
+    return engine;
+  }
+
   constructor(context: Context) {
     this.id = uuidv4();
 
@@ -201,6 +238,15 @@ export class Engine {
     this.modules.clear();
   }
 
+  serialize(): IEngineSerialize {
+    return {
+      bpm: this.bpm,
+      timeSignature: this.timeSignature,
+      modules: Array.from(this.modules.values()).map((m) => m.serialize()),
+      routes: this.routes.serialize(),
+    };
+  }
+
   findModule(
     id: string,
   ): ModuleTypeToModuleMapping[keyof ModuleTypeToModuleMapping] {
@@ -219,6 +265,10 @@ export class Engine {
     return this.midiDeviceManager.find(id);
   }
 
+  findMidiDeviceByName(name: string) {
+    return this.midiDeviceManager.findByName(name);
+  }
+
   onPropsUpdate(
     callback: <T extends ModuleType>(
       params: IModule<T> | IPolyModule<T>,

package/src/core/Note/index.ts

@@ -1,5 +1,5 @@
 import { Seconds } from "@blibliki/transport";
-import { Message } from "webmidi";
+import Message from "../midi/Message";
 import frequencyTable from "./frequencyTable";
 
 const Notes = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];

package/src/core/Route.ts

@@ -37,9 +37,21 @@ export class Routes {
   }
 
   clear() {
-    for (const id in this.routes) {
+    this.routes.forEach((_, id) => {
       this.removeRoute(id);
-    }
+    });
+  }
+
+  replug() {
+    this.routes.forEach((_, id) => {
+      const { sourceIO, destinationIO } = this.getIOs(id);
+      sourceIO.rePlugAll();
+      destinationIO.rePlugAll();
+    });
+  }
+
+  serialize(): IRoute[] {
+    return Array.from(this.routes.values());
   }
 
   private plug(id: string) {

package/src/core/midi/Message.ts

@@ -0,0 +1,46 @@
+/**
+ * Simple wrapper around MIDI message data (Uint8Array)
+ * Replaces the webmidi Message class with native Web MIDI API data
+ */
+export default class Message {
+  public readonly data: Uint8Array;
+
+  constructor(data: Uint8Array) {
+    this.data = data;
+  }
+
+  /**
+   * Returns the data bytes (excluding the status byte)
+   */
+  get dataBytes(): number[] {
+    return Array.from(this.data.slice(1));
+  }
+
+  /**
+   * Returns the MIDI message type based on the status byte
+   */
+  get type(): string {
+    const statusByte = this.data[0];
+    const messageType = statusByte & 0xf0;
+
+    switch (messageType) {
+      case 0x90: // Note On
+        // Check if velocity is 0 (which is actually Note Off)
+        return this.data[2] === 0 ? "noteoff" : "noteon";
+      case 0x80: // Note Off
+        return "noteoff";
+      case 0xb0: // Control Change
+        return "controlchange";
+      case 0xe0: // Pitch Bend
+        return "pitchbend";
+      case 0xd0: // Channel Pressure (Aftertouch)
+        return "channelaftertouch";
+      case 0xa0: // Polyphonic Key Pressure
+        return "keyaftertouch";
+      case 0xc0: // Program Change
+        return "programchange";
+      default:
+        return "unknown";
+    }
+  }
+}

package/src/core/midi/MidiDevice.ts

@@ -1,6 +1,7 @@
 import { Context } from "@blibliki/utils";
-import { MessageEvent, Input } from "webmidi";
+import type { JZZMidiMessage, JZZPort } from "./jzz.types";
 import MidiEvent, { MidiEventType } from "./MidiEvent";
+import Message from "./Message";
 
 export enum MidiPortState {
   connected = "connected",
@@ -25,11 +26,12 @@ export default class MidiDevice implements IMidiDevice {
   eventListerCallbacks: EventListerCallback[] = [];
 
   private context: Readonly<Context>;
-  private input: Input;
+  private input: JZZPort;
+  private _state: MidiPortState = MidiPortState.connected;
 
-  constructor(input: Input, context: Context) {
-    this.id = input.id;
-    this.name = input.name || `Device ${input.id}`;
+  constructor(input: JZZPort, id: string, name: string, context: Context) {
+    this.id = id;
+    this.name = name || `Device ${id}`;
     this.input = input;
     this.context = context;
 
@@ -37,17 +39,19 @@ export default class MidiDevice implements IMidiDevice {
   }
 
   get state() {
-    return this.input.state as MidiPortState;
+    return this._state;
   }
 
   connect() {
-    this.input.addListener("midimessage", (e: MessageEvent) => {
-      this.processEvent(e);
+    // JZZ uses a callback function to receive MIDI messages
+    this.input.connect((msg: JZZMidiMessage) => {
+      this.processEvent(msg);
     });
   }
 
   disconnect() {
-    this.input.removeListener();
+    this.input.close();
+    this._state = MidiPortState.disconnected;
   }
 
   serialize() {
@@ -66,10 +70,16 @@ export default class MidiDevice implements IMidiDevice {
     );
   }
 
-  private processEvent(event: MessageEvent) {
+  private processEvent(msg: JZZMidiMessage) {
+    // Convert JZZ MIDI message to Uint8Array
+    const data = new Uint8Array(msg.slice());
+    const message = new Message(data);
+
+    // Use current time as timestamp since JZZ doesn't provide precise timestamps
+    const timestamp = performance.now();
     const midiEvent = new MidiEvent(
-      event.message,
-      this.context.browserToContextTime(event.timestamp),
+      message,
+      this.context.browserToContextTime(timestamp),
     );
 
     switch (midiEvent.type) {

package/src/core/midi/MidiDeviceManager.ts

@@ -1,5 +1,6 @@
 import { Context } from "@blibliki/utils";
-import { Input, Output, WebMidi } from "webmidi";
+import JZZ from "jzz";
+import type { JZZ as JZZType, JZZInputInfo, JZZPort } from "./jzz.types";
 import ComputerKeyboardDevice from "./ComputerKeyboardDevice";
 import MidiDevice from "./MidiDevice";
 
@@ -10,6 +11,7 @@ export default class MidiDeviceManager {
   private initialized = false;
   private listeners: ListenerCallback[] = [];
   private context: Readonly<Context>;
+  private jzz: JZZType | null = null;
 
   constructor(context: Context) {
     this.context = context;
@@ -27,6 +29,10 @@ export default class MidiDeviceManager {
     return this.devices.get(id);
   }
 
+  findByName(name: string): MidiDevice | ComputerKeyboardDevice | undefined {
+    return Array.from(this.devices.values()).find((d) => d.name === name);
+  }
+
   addListener(callback: ListenerCallback) {
     this.listeners.push(callback);
   }
@@ -35,15 +41,21 @@ export default class MidiDeviceManager {
     if (this.initialized) return;
 
     try {
-      await WebMidi.enable();
-
-      WebMidi.inputs.forEach((input) => {
-        if (!this.devices.has(input.id)) {
-          this.devices.set(input.id, new MidiDevice(input, this.context));
+      const jzz: JZZType = (await JZZ()) as unknown as JZZType;
+      this.jzz = jzz;
+      const info = jzz.info();
+
+      // Get all MIDI input devices
+      for (const inputInfo of info.inputs ?? []) {
+        const id: string = inputInfo.id ?? inputInfo.name;
+        if (!this.devices.has(id)) {
+          const port = (await jzz.openMidiIn(inputInfo.name)) as unknown as JZZPort;
+          const device = new MidiDevice(port, id, inputInfo.name, this.context);
+          this.devices.set(id, device);
         }
-      });
+      }
     } catch (err) {
-      console.error("Error enabling WebMidi:", err);
+      console.error("Error enabling JZZ MIDI:", err);
     }
   }
 
@@ -55,34 +67,54 @@ export default class MidiDeviceManager {
   }
 
   private listenChanges() {
-    WebMidi.addListener("connected", (event) => {
-      const port = event.port as Input | Output;
-      if (port instanceof Output) return;
-
-      if (this.devices.has(port.id)) return;
-
-      const device = new MidiDevice(port, this.context);
-      this.devices.set(device.id, device);
-
-      this.listeners.forEach((listener) => {
-        listener(device);
-      });
-    });
-
-    WebMidi.addListener("disconnected", (event) => {
-      const port = event.port as Input | Output;
-      if (port instanceof Output) return;
-
-      const device = this.devices.get(port.id);
-      if (!device) return;
-      if (device instanceof ComputerKeyboardDevice) return;
-
-      device.disconnect();
-      this.devices.delete(device.id);
-
-      this.listeners.forEach((listener) => {
-        listener(device);
-      });
+    if (!this.jzz) return;
+
+    // JZZ watch for MIDI device changes
+    this.jzz.onChange(() => {
+      if (!this.jzz) return;
+
+      const info = this.jzz.info();
+      const currentInputIds = new Set<string>(
+        (info.inputs ?? []).map((i: JZZInputInfo) => i.id ?? i.name),
+      );
+
+      // Check for new devices
+      for (const inputInfo of info.inputs ?? []) {
+        const id: string = inputInfo.id ?? inputInfo.name;
+        if (!this.devices.has(id)) {
+          // New device connected
+          void this.jzz
+            .openMidiIn(inputInfo.name)
+            .then((port: unknown) => {
+              const jzzPort = port as JZZPort;
+              const device = new MidiDevice(
+                jzzPort,
+                id,
+                inputInfo.name,
+                this.context,
+              );
+              this.devices.set(id, device);
+
+              this.listeners.forEach((listener) => {
+                listener(device);
+              });
+            });
+        }
+      }
+
+      // Check for removed devices
+      for (const [id, device] of this.devices) {
+        if (device instanceof ComputerKeyboardDevice) continue;
+        if (!currentInputIds.has(id)) {
+          // Device disconnected
+          device.disconnect();
+          this.devices.delete(id);
+
+          this.listeners.forEach((listener) => {
+            listener(device);
+          });
+        }
+      }
     });
   }
 }

package/src/core/midi/MidiEvent.ts

@@ -1,5 +1,5 @@
 import { ContextTime } from "@blibliki/transport";
-import { Message } from "webmidi";
+import Message from "./Message";
 import Note, { INote } from "../Note";
 
 export enum MidiEventType {

package/src/core/midi/jzz.types.ts

@@ -0,0 +1,51 @@
+/**
+ * Type definitions for JZZ MIDI library
+ */
+
+export interface JZZInputInfo {
+  id?: string;
+  name: string;
+  manufacturer?: string;
+  version?: string;
+  engine?: string;
+}
+
+export interface JZZOutputInfo {
+  id?: string;
+  name: string;
+  manufacturer?: string;
+  version?: string;
+  engine?: string;
+}
+
+export interface JZZInfo {
+  inputs?: JZZInputInfo[];
+  outputs?: JZZOutputInfo[];
+  version?: string;
+  engine?: string;
+}
+
+export interface JZZMidiMessage extends Array<number> {
+  slice(): number[];
+}
+
+export interface JZZPort {
+  connect(callback: (msg: JZZMidiMessage) => void): JZZPort;
+  close(): void;
+  disconnect(): void;
+}
+
+// JZZ uses a custom Promise-like type called Async
+export interface JZZAsync<T> {
+  then<TResult1 = T, TResult2 = never>(
+    onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | null,
+    onrejected?: ((reason: unknown) => TResult2 | PromiseLike<TResult2>) | null,
+  ): JZZAsync<TResult1 | TResult2>;
+}
+
+export interface JZZ {
+  info(): JZZInfo;
+  openMidiIn(name: string): JZZAsync<JZZPort>;
+  openMidiOut(name: string): JZZAsync<JZZPort>;
+  onChange(callback: () => void): void;
+}

package/src/core/module/Module.ts

@@ -35,41 +35,6 @@ export type IModuleConstructor<T extends ModuleType> = Optional<
   audioNodeConstructor?: (context: Context) => AudioNode;
 };
 
-/**
- * Helper type for type-safe property lifecycle hooks.
- *
- * Hooks are completely optional - only define the ones you need.
- * Use explicit type annotation for automatic type inference.
- *
- * @example
- * ```typescript
- * export type IGainProps = {
- *   gain: number;
- *   muted: boolean;
- * };
- *
- * export class MonoGain extends Module<ModuleType.Gain> {
- *   // ✅ Define only the hooks you need with type annotation
- *   // value type is automatically inferred as number!
- *   onSetGain: SetterHooks<IGainProps>["onSetGain"] = (value) => {
- *     this.audioNode.gain.value = value;
- *     return value; // optional: return modified value
- *   };
- *
- *   // ✅ onAfterSet is called after prop is set
- *   onAfterSetMuted: SetterHooks<IGainProps>["onAfterSetMuted"] = (value) => {
- *     if (value) this.audioNode.gain.value = 0;
- *   };
- *
- *   // ✅ You can omit hooks you don't need - they're optional!
- *   // No need to define onSetMuted if you don't need it
- *
- *   // ❌ This would cause a type error:
- *   // onSetGain: SetterHooks<IGainProps>["onSetGain"] = (value: string) => value;
- *   //                                                            ^^^^^^ Error!
- * }
- * ```
- */
 export type SetterHooks<P> = {
   [K in keyof P as `onSet${Capitalize<string & K>}`]: (value: P[K]) => P[K];
 } & {
@@ -88,7 +53,6 @@ export abstract class Module<T extends ModuleType> implements IModule<T> {
   inputs: InputCollection;
   outputs: OutputCollection;
   protected _props!: ModuleTypeToPropsMapping[T];
-  protected superInitialized = false;
   protected activeNotes: Note[];
   private pendingUIUpdates = false;
 
@@ -108,8 +72,6 @@ export abstract class Module<T extends ModuleType> implements IModule<T> {
     this.inputs = new InputCollection(this);
     this.outputs = new OutputCollection(this);
 
-    this.superInitialized = true;
-
     // Defer hook calls until after subclass is fully initialized
     queueMicrotask(() => {
       this.props = props;

package/src/core/module/PolyModule.ts

@@ -44,7 +44,6 @@ export abstract class PolyModule<T extends ModuleType>
   outputs: OutputCollection;
   protected monoModuleConstructor: IPolyModuleConstructor<T>["monoModuleConstructor"];
   protected _props!: ModuleTypeToPropsMapping[T];
-  protected superInitialized = false;
   private _voices!: number;
   private _name!: string;
   private pendingUIUpdates = false;
@@ -60,7 +59,6 @@ export abstract class PolyModule<T extends ModuleType>
     this.engineId = engineId;
     this.name = name;
     this.moduleType = moduleType;
-    this.voices = voices || 1;
     this._props = props;
 
     this.inputs = new InputCollection(
@@ -70,10 +68,9 @@ export abstract class PolyModule<T extends ModuleType>
       this as unknown as PolyModule<ModuleType>,
     );
 
-    this.superInitialized = true;
-
     // Defer hook calls until after subclass is fully initialized
     queueMicrotask(() => {
+      this.voices = voices || 1;
       this.props = props;
     });
   }
@@ -146,8 +143,6 @@ export abstract class PolyModule<T extends ModuleType>
   }
 
   rePlugAll(callback?: () => void) {
-    if (!this.superInitialized) return;
-
     this.inputs.rePlugAll(callback);
     this.outputs.rePlugAll(callback);
   }

package/src/index.ts

@@ -1,5 +1,5 @@
 export { Engine } from "./Engine";
-export type { ICreateRoute, IUpdateModule } from "./Engine";
+export type { ICreateRoute, IUpdateModule, IEngineSerialize } from "./Engine";
 
 export type {
   IRoute,

package/src/modules/MidiSelector.ts

@@ -1,4 +1,5 @@
-import { IModule, Module, MidiOutput, SetterHooks } from "@/core";
+import { IModule, Module, MidiOutput, SetterHooks, MidiDevice } from "@/core";
+import ComputerKeyboardInput from "@/core/midi/ComputerKeyboardDevice";
 import MidiEvent from "@/core/midi/MidiEvent";
 import { ModulePropSchema } from "@/core/schema";
 import { ICreateModule, ModuleType } from ".";
@@ -6,6 +7,7 @@ import { ICreateModule, ModuleType } from ".";
 export type IMidiSelector = IModule<ModuleType.MidiSelector>;
 export type IMidiSelectorProps = {
   selectedId: string | undefined | null;
+  selectedName: string | undefined | null;
 };
 
 export const midiSelectorPropSchema: ModulePropSchema<IMidiSelectorProps> = {
@@ -13,9 +15,16 @@ export const midiSelectorPropSchema: ModulePropSchema<IMidiSelectorProps> = {
     kind: "string",
     label: "Midi device ID",
   },
+  selectedName: {
+    kind: "string",
+    label: "Midi device name",
+  },
 };
 
-const DEFAULT_PROPS: IMidiSelectorProps = { selectedId: undefined };
+const DEFAULT_PROPS: IMidiSelectorProps = {
+  selectedId: undefined,
+  selectedName: undefined,
+};
 
 export default class MidiSelector
   extends Module<ModuleType.MidiSelector>
@@ -36,7 +45,15 @@ export default class MidiSelector
       props,
     });
 
-    this.addEventListener(this.props.selectedId);
+    const midiDevice =
+      (this.props.selectedId &&
+        this.engine.findMidiDevice(this.props.selectedId)) ??
+      (this.props.selectedName &&
+        this.engine.findMidiDeviceByName(this.props.selectedName));
+
+    if (midiDevice) {
+      this.addEventListener(midiDevice);
+    }
 
     this.registerOutputs();
   }
@@ -45,7 +62,13 @@ export default class MidiSelector
     value,
   ) => {
     this.removeEventListener();
-    this.addEventListener(value);
+    if (!value) return value;
+
+    const midiDevice = this.engine.findMidiDevice(value);
+    if (!midiDevice) return value;
+
+    this.props = { selectedName: midiDevice.name };
+    this.addEventListener(midiDevice);
 
     return value;
   };
@@ -60,11 +83,8 @@ export default class MidiSelector
     return this._forwardMidiEvent;
   }
 
-  private addEventListener(midiId: string | undefined | null) {
-    if (!midiId) return;
-
-    const midiDevice = this.engine.findMidiDevice(midiId);
-    midiDevice?.addEventListener(this.forwardMidiEvent);
+  private addEventListener(midiDevice: MidiDevice | ComputerKeyboardInput) {
+    midiDevice.addEventListener(this.forwardMidiEvent);
   }
 
   private removeEventListener() {