@vsreact/core 0.0.11 → 0.0.12

package/src/perform.test.tsx

@@ -0,0 +1,188 @@
+import { beforeEach, describe, expect, test } from "bun:test";
+
+const batches: unknown[][][] = [];
+
+(globalThis as Record<string, any>).__vsreact_flush = (json: string) => {
+  batches.push(JSON.parse(json));
+};
+(globalThis as Record<string, any>).__vsreact_nativeCall = () => "null";
+
+import {
+  render,
+  unmount,
+  PianoKeyboard,
+  StepSequencer,
+  ProgressBar,
+  mapRange,
+  formatDb,
+  formatHz,
+  formatMs,
+  formatPercent,
+  formatSemitones,
+  midiNoteName,
+} from "./index";
+
+const allOps = () => batches.flat();
+const opsNamed = (name: string) => allOps().filter((op: any) => op[0] === name);
+const dispatch = (msg: unknown) =>
+  (globalThis as Record<string, any>).__vsreact_dispatch(JSON.stringify(msg));
+
+/** Node ids whose registered listeners include `type`, in creation order. */
+const nodesWithListener = (type: string): number[] => {
+  const seen = new Set<number>();
+  for (const op of opsNamed("setProps") as any[]) {
+    if (op[2]?.listeners?.includes(type)) seen.add(op[1]);
+  }
+  return [...seen];
+};
+
+beforeEach(() => {
+  unmount();
+  batches.length = 0;
+});
+
+describe("format", () => {
+  test("formatDb signs and floors", () => {
+    expect(formatDb(6)).toBe("+6.0 dB");
+    expect(formatDb(0)).toBe("0.0 dB");
+    expect(formatDb(-12.53)).toBe("-12.5 dB");
+    expect(formatDb(Number.NEGATIVE_INFINITY)).toBe("-inf dB");
+  });
+
+  test("formatHz switches to kHz at 1000", () => {
+    expect(formatHz(440)).toBe("440 Hz");
+    expect(formatHz(1200)).toBe("1.2 kHz");
+    expect(formatHz(18500, 2)).toBe("18.5 kHz");
+  });
+
+  test("formatMs switches to seconds at 1000", () => {
+    expect(formatMs(350)).toBe("350 ms");
+    expect(formatMs(1250)).toBe("1.25 s");
+  });
+
+  test("formatPercent and formatSemitones", () => {
+    expect(formatPercent(0.42)).toBe("42%");
+    expect(formatSemitones(7)).toBe("+7 st");
+    expect(formatSemitones(-12)).toBe("-12 st");
+    expect(formatSemitones(0)).toBe("0 st");
+  });
+
+  test("midiNoteName uses scientific pitch", () => {
+    expect(midiNoteName(60)).toBe("C4");
+    expect(midiNoteName(69)).toBe("A4");
+    expect(midiNoteName(48)).toBe("C3");
+    expect(midiNoteName(61)).toBe("C#4");
+  });
+
+  test("mapRange maps and optionally clamps", () => {
+    expect(mapRange(0.5, 0, 1, 0, 100)).toBe(50);
+    expect(mapRange(2, 0, 1, 0, 100)).toBe(200);
+    expect(mapRange(2, 0, 1, 0, 100, true)).toBe(100);
+  });
+});
+
+describe("PianoKeyboard", () => {
+  test("one octave renders 8 whites + 5 blacks, all pressable", () => {
+    render(<PianoKeyboard startNote={48} octaves={1} onNoteOn={() => {}} />);
+    expect(nodesWithListener("mousedown")).toHaveLength(13);
+  });
+
+  test("press fires note-on, release fires note-off", () => {
+    const on: number[] = [];
+    const off: number[] = [];
+    render(
+      <PianoKeyboard startNote={48} octaves={1} onNoteOn={(n) => on.push(n)} onNoteOff={(n) => off.push(n)} />,
+    );
+
+    // Whites render first: the first pressable node is the low C (48).
+    const keys = nodesWithListener("mousedown");
+    dispatch({ kind: "event", nodeId: keys[0], type: "mousedown" });
+    expect(on).toEqual([48]);
+    dispatch({ kind: "event", nodeId: keys[0], type: "mouseup" });
+    expect(off).toEqual([48]);
+  });
+
+  test("glissando: dragging one key-width retargets to the next white", () => {
+    const on: number[] = [];
+    const off: number[] = [];
+    render(
+      <PianoKeyboard
+        startNote={48}
+        octaves={1}
+        whiteKeyWidth={24}
+        onNoteOn={(n) => on.push(n)}
+        onNoteOff={(n) => off.push(n)}
+      />,
+    );
+
+    const keys = nodesWithListener("mousedown");
+    dispatch({ kind: "event", nodeId: keys[0], type: "mousedown" });
+    dispatch({ kind: "event", nodeId: keys[0], type: "drag", payload: { dx: 24, dy: 0 } });
+    expect(on).toEqual([48, 50]);
+    expect(off).toEqual([48]);
+
+    dispatch({ kind: "event", nodeId: keys[0], type: "dragend", payload: { dx: 24, dy: 0 } });
+    expect(off).toEqual([48, 50]);
+  });
+
+  test("blacks sit above whites: dragging into the black zone hits C#", () => {
+    const on: number[] = [];
+    render(<PianoKeyboard startNote={48} octaves={1} whiteKeyWidth={24} onNoteOn={(n) => on.push(n)} />);
+
+    const keys = nodesWithListener("mousedown");
+    // From the low C's center (x=12, y in the white zone) up-right into
+    // the C# head: C# spans x 16.56..31.44, y 0..57.6.
+    dispatch({ kind: "event", nodeId: keys[0], type: "mousedown" });
+    dispatch({ kind: "event", nodeId: keys[0], type: "drag", payload: { dx: 8, dy: -60 } });
+    expect(on).toEqual([48, 49]);
+  });
+
+  test("disabled keyboard registers no handlers", () => {
+    render(<PianoKeyboard disabled onNoteOn={() => {}} />);
+    expect(nodesWithListener("mousedown")).toHaveLength(0);
+  });
+});
+
+describe("StepSequencer", () => {
+  test("clicking a cell reports row, step, and the flipped state", () => {
+    const seen: Array<[number, number, boolean]> = [];
+    const pattern = [
+      [true, false, false, false],
+      [false, false, true, false],
+    ];
+    render(<StepSequencer pattern={pattern} onToggle={(r, s, next) => seen.push([r, s, next])} />);
+
+    const cells = nodesWithListener("click");
+    expect(cells).toHaveLength(8);
+
+    dispatch({ kind: "event", nodeId: cells[2], type: "click" }); // row 0, step 2 — off → on
+    dispatch({ kind: "event", nodeId: cells[6], type: "click" }); // row 1, step 2 — on → off
+    expect(seen).toEqual([
+      [0, 2, true],
+      [1, 2, false],
+    ]);
+  });
+
+  test("disabled grid registers no click handlers", () => {
+    render(<StepSequencer pattern={[[false, false]]} disabled onToggle={() => {}} />);
+    expect(nodesWithListener("click")).toHaveLength(0);
+  });
+});
+
+describe("ProgressBar indeterminate", () => {
+  test("renders a sweeping segment that moves over time", async () => {
+    render(<ProgressBar value={0} indeterminate width={200} />);
+
+    const lefts = () =>
+      (opsNamed("setProps") as any[])
+        .map((op) => op[2]?.style?.left)
+        .filter((left) => typeof left === "number");
+
+    const before = lefts().length;
+    expect(before).toBeGreaterThan(0);
+
+    await new Promise((r) => setTimeout(r, 60));
+    const all = lefts();
+    expect(new Set(all).size).toBeGreaterThan(1); // the segment moved
+  });
+});

package/src/primitives.tsx

@@ -1,95 +1,95 @@
-import { createElement, type ReactNode } from "react";
-import type { Style } from "./tw";
-
-export interface DragEventPayload {
-  /** Delta from the drag start, in root coordinates. */
-  dx: number;
-  dy: number;
-  /** Current pointer position in root coordinates. */
-  x: number;
-  y: number;
-}
-
-/** A node's laid-out rect in root coordinates (scroll-adjusted). */
-export interface LayoutRect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-/** Mouse-wheel payload. dy is JUCE's notch fraction (~0.1 per notch,
-    positive = wheel up). */
-export interface WheelEventPayload {
-  dy: number;
-}
-
-export interface CommonProps {
-  className?: string;
-  style?: Style;
-  children?: ReactNode;
-  /** Resets the scroll offset of an overflow-y-scroll container. */
-  scrollTop?: number;
-  onClick?: () => void;
-  onDoubleClick?: () => void;
-  /** Wheel over this node (controls win the wheel over scroll containers). */
-  onWheel?: (e: WheelEventPayload) => void;
-  onMouseEnter?: () => void;
-  onMouseLeave?: () => void;
-  onMouseDown?: () => void;
-  onMouseUp?: () => void;
-  onDragStart?: (e: DragEventPayload) => void;
-  onDrag?: (e: DragEventPayload) => void;
-  onDragEnd?: (e: DragEventPayload) => void;
-  /** Fires after layout whenever this node's root-space rect changes —
-      the foundation for popovers, menus, and tooltips. */
-  onLayout?: (rect: LayoutRect) => void;
-}
-
-export function View(props: CommonProps) {
-  return createElement("vs-view", props);
-}
-
-export interface TextProps extends Omit<CommonProps, "children"> {
-  children?: ReactNode; // strings/numbers (and fragments of them)
-}
-
-export function Text(props: TextProps) {
-  return createElement("vs-text", props);
-}
-
-export interface ImageProps extends CommonProps {
-  src: string;
-}
-
-export function Image(props: ImageProps) {
-  return createElement("vs-image", props);
-}
-
-export interface TextInputProps extends Omit<CommonProps, "children" | "onChange" | "onSubmit"> {
-  value?: string;
-  defaultValue?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  onChange?: (value: string) => void;
-  onSubmit?: (value: string) => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
-}
-
-export function TextInput({ onChange, onSubmit, ...rest }: TextInputProps) {
-  return createElement("vs-textinput", {
-    ...rest,
-    onChange: onChange ? (payload: any) => onChange(String(payload?.value ?? "")) : undefined,
-    onSubmit: onSubmit ? (payload: any) => onSubmit(String(payload?.value ?? "")) : undefined,
-  });
-}
-
-export interface NativeViewProps extends CommonProps {
-  /** Id of a component factory registered in the C++ NativeRegistry. */
-  nativeId: string;
-}
-
-export function NativeView(props: NativeViewProps) {
-  return createElement("vs-native", props);
-}
+import { createElement, type ReactNode } from "react";
+import type { Style } from "./tw";
+
+export interface DragEventPayload {
+  /** Delta from the drag start, in root coordinates. */
+  dx: number;
+  dy: number;
+  /** Current pointer position in root coordinates. */
+  x: number;
+  y: number;
+}
+
+/** A node's laid-out rect in root coordinates (scroll-adjusted). */
+export interface LayoutRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** Mouse-wheel payload. dy is JUCE's notch fraction (~0.1 per notch,
+    positive = wheel up). */
+export interface WheelEventPayload {
+  dy: number;
+}
+
+export interface CommonProps {
+  className?: string;
+  style?: Style;
+  children?: ReactNode;
+  /** Resets the scroll offset of an overflow-y-scroll container. */
+  scrollTop?: number;
+  onClick?: () => void;
+  onDoubleClick?: () => void;
+  /** Wheel over this node (controls win the wheel over scroll containers). */
+  onWheel?: (e: WheelEventPayload) => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  onMouseDown?: () => void;
+  onMouseUp?: () => void;
+  onDragStart?: (e: DragEventPayload) => void;
+  onDrag?: (e: DragEventPayload) => void;
+  onDragEnd?: (e: DragEventPayload) => void;
+  /** Fires after layout whenever this node's root-space rect changes —
+      the foundation for popovers, menus, and tooltips. */
+  onLayout?: (rect: LayoutRect) => void;
+}
+
+export function View(props: CommonProps) {
+  return createElement("vs-view", props);
+}
+
+export interface TextProps extends Omit<CommonProps, "children"> {
+  children?: ReactNode; // strings/numbers (and fragments of them)
+}
+
+export function Text(props: TextProps) {
+  return createElement("vs-text", props);
+}
+
+export interface ImageProps extends CommonProps {
+  src: string;
+}
+
+export function Image(props: ImageProps) {
+  return createElement("vs-image", props);
+}
+
+export interface TextInputProps extends Omit<CommonProps, "children" | "onChange" | "onSubmit"> {
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  onChange?: (value: string) => void;
+  onSubmit?: (value: string) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+export function TextInput({ onChange, onSubmit, ...rest }: TextInputProps) {
+  return createElement("vs-textinput", {
+    ...rest,
+    onChange: onChange ? (payload: any) => onChange(String(payload?.value ?? "")) : undefined,
+    onSubmit: onSubmit ? (payload: any) => onSubmit(String(payload?.value ?? "")) : undefined,
+  });
+}
+
+export interface NativeViewProps extends CommonProps {
+  /** Id of a component factory registered in the C++ NativeRegistry. */
+  nativeId: string;
+}
+
+export function NativeView(props: NativeViewProps) {
+  return createElement("vs-native", props);
+}

package/src/render.tsx

@@ -1,47 +1,47 @@
-import Reconciler from "react-reconciler";
-import { LegacyRoot } from "react-reconciler/constants";
-import type { ReactNode } from "react";
-import { hostConfig } from "./hostConfig";
-import { flushOps } from "./bridge";
-import { OverlayLayer } from "./overlay";
-
-const reconciler = Reconciler(hostConfig as any);
-
-let container: ReturnType<typeof reconciler.createContainer> | null = null;
-
-/** Mounts (or re-renders) the app into the plugin window. The overlay
-    layer (menus, tooltips) mounts after the app so it paints on top. */
-export function render(element: ReactNode): void {
-  if (!container) {
-    container = reconciler.createContainer(
-      {},
-      LegacyRoot,
-      null,
-      false,
-      null,
-      "vsreact",
-      (error: unknown) => console.error("[vsreact] recoverable error:", error),
-      null,
-    );
-  }
-
-  reconciler.updateContainer(
-    <>
-      {element}
-      <OverlayLayer />
-    </>,
-    container,
-    null,
-    null,
-  );
-  flushOps();
-}
-
-/** Unmounts the current app (used by hot reload teardown). */
-export function unmount(): void {
-  if (container) {
-    reconciler.updateContainer(null, container, null, null);
-    flushOps();
-    container = null;
-  }
-}
+import Reconciler from "react-reconciler";
+import { LegacyRoot } from "react-reconciler/constants";
+import type { ReactNode } from "react";
+import { hostConfig } from "./hostConfig";
+import { flushOps } from "./bridge";
+import { OverlayLayer } from "./overlay";
+
+const reconciler = Reconciler(hostConfig as any);
+
+let container: ReturnType<typeof reconciler.createContainer> | null = null;
+
+/** Mounts (or re-renders) the app into the plugin window. The overlay
+    layer (menus, tooltips) mounts after the app so it paints on top. */
+export function render(element: ReactNode): void {
+  if (!container) {
+    container = reconciler.createContainer(
+      {},
+      LegacyRoot,
+      null,
+      false,
+      null,
+      "vsreact",
+      (error: unknown) => console.error("[vsreact] recoverable error:", error),
+      null,
+    );
+  }
+
+  reconciler.updateContainer(
+    <>
+      {element}
+      <OverlayLayer />
+    </>,
+    container,
+    null,
+    null,
+  );
+  flushOps();
+}
+
+/** Unmounts the current app (used by hot reload teardown). */
+export function unmount(): void {
+  if (container) {
+    reconciler.updateContainer(null, container, null, null);
+    flushOps();
+    container = null;
+  }
+}

package/src/runtime.ts

@@ -1,92 +1,92 @@
-// Environment shims for QuickJS. This module MUST be imported before react —
-// it provides the timer/console/microtask facilities react and the scheduler
-// expect. The __vsreact_* natives are registered by the C++ host; when absent
-// (e.g. under `bun test`) the shims fall back to the platform implementations.
-
-export type NativeFns = {
-  __vsreact_flush(json: string): void;
-  __vsreact_nativeCall(name: string, argsJson: string): string;
-  __vsreact_log(level: string, msg: string): void;
-  __vsreact_setTimer(id: number, ms: number): void;
-  __vsreact_clearTimer(id: number): void;
-};
-
-const g = globalThis as typeof globalThis & Partial<NativeFns> & Record<string, unknown>;
-
-export const isHosted = typeof g.__vsreact_setTimer === "function";
-
-interface TimerEntry {
-  cb: (...args: unknown[]) => void;
-  args: unknown[];
-  intervalMs?: number;
-}
-
-let nextTimerId = 1;
-const timers = new Map<number, TimerEntry>();
-
-/** Called by bridge.ts when C++ dispatches {kind:"timer",id}. */
-export function fireTimer(id: number): void {
-  const entry = timers.get(id);
-  if (!entry) return;
-
-  if (entry.intervalMs !== undefined) g.__vsreact_setTimer!(id, entry.intervalMs);
-  else timers.delete(id);
-
-  entry.cb(...entry.args);
-}
-
-function stringify(value: unknown): string {
-  if (typeof value === "string") return value;
-  if (value instanceof Error) return `${value.message}\n${value.stack ?? ""}`;
-  try {
-    return JSON.stringify(value) ?? String(value);
-  } catch {
-    return String(value);
-  }
-}
-
-if (isHosted) {
-  g.setTimeout = ((cb: TimerEntry["cb"], ms = 0, ...args: unknown[]) => {
-    const id = nextTimerId++;
-    timers.set(id, { cb, args });
-    g.__vsreact_setTimer!(id, Math.max(0, ms | 0));
-    return id;
-  }) as typeof setTimeout;
-
-  g.setInterval = ((cb: TimerEntry["cb"], ms = 0, ...args: unknown[]) => {
-    const id = nextTimerId++;
-    const intervalMs = Math.max(1, ms | 0);
-    timers.set(id, { cb, args, intervalMs });
-    g.__vsreact_setTimer!(id, intervalMs);
-    return id;
-  }) as typeof setInterval;
-
-  g.clearTimeout = g.clearInterval = ((id?: number) => {
-    if (id !== undefined && timers.delete(id)) g.__vsreact_clearTimer!(id);
-  }) as typeof clearTimeout;
-
-  const makeLog =
-    (level: string) =>
-    (...args: unknown[]) =>
-      g.__vsreact_log!(level, args.map(stringify).join(" "));
-
-  g.console = {
-    log: makeLog("log"),
-    info: makeLog("info"),
-    debug: makeLog("debug"),
-    warn: makeLog("warn"),
-    error: makeLog("error"),
-  } as Console;
-
-  g.queueMicrotask ??= (cb: VoidFunction) => {
-    Promise.resolve().then(cb);
-  };
-
-  g.performance ??= { now: () => Date.now() } as Performance;
-  // Typed loosely on purpose: the dist build has no Node/Bun types, and the
-  // shim only exists for libraries that probe NODE_ENV.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  g.process ??= { env: { NODE_ENV: "production" } } as any;
-  g.self ??= g as unknown as Window & typeof globalThis;
-  g.global ??= g;
-}
+// Environment shims for QuickJS. This module MUST be imported before react —
+// it provides the timer/console/microtask facilities react and the scheduler
+// expect. The __vsreact_* natives are registered by the C++ host; when absent
+// (e.g. under `bun test`) the shims fall back to the platform implementations.
+
+export type NativeFns = {
+  __vsreact_flush(json: string): void;
+  __vsreact_nativeCall(name: string, argsJson: string): string;
+  __vsreact_log(level: string, msg: string): void;
+  __vsreact_setTimer(id: number, ms: number): void;
+  __vsreact_clearTimer(id: number): void;
+};
+
+const g = globalThis as typeof globalThis & Partial<NativeFns> & Record<string, unknown>;
+
+export const isHosted = typeof g.__vsreact_setTimer === "function";
+
+interface TimerEntry {
+  cb: (...args: unknown[]) => void;
+  args: unknown[];
+  intervalMs?: number;
+}
+
+let nextTimerId = 1;
+const timers = new Map<number, TimerEntry>();
+
+/** Called by bridge.ts when C++ dispatches {kind:"timer",id}. */
+export function fireTimer(id: number): void {
+  const entry = timers.get(id);
+  if (!entry) return;
+
+  if (entry.intervalMs !== undefined) g.__vsreact_setTimer!(id, entry.intervalMs);
+  else timers.delete(id);
+
+  entry.cb(...entry.args);
+}
+
+function stringify(value: unknown): string {
+  if (typeof value === "string") return value;
+  if (value instanceof Error) return `${value.message}\n${value.stack ?? ""}`;
+  try {
+    return JSON.stringify(value) ?? String(value);
+  } catch {
+    return String(value);
+  }
+}
+
+if (isHosted) {
+  g.setTimeout = ((cb: TimerEntry["cb"], ms = 0, ...args: unknown[]) => {
+    const id = nextTimerId++;
+    timers.set(id, { cb, args });
+    g.__vsreact_setTimer!(id, Math.max(0, ms | 0));
+    return id;
+  }) as typeof setTimeout;
+
+  g.setInterval = ((cb: TimerEntry["cb"], ms = 0, ...args: unknown[]) => {
+    const id = nextTimerId++;
+    const intervalMs = Math.max(1, ms | 0);
+    timers.set(id, { cb, args, intervalMs });
+    g.__vsreact_setTimer!(id, intervalMs);
+    return id;
+  }) as typeof setInterval;
+
+  g.clearTimeout = g.clearInterval = ((id?: number) => {
+    if (id !== undefined && timers.delete(id)) g.__vsreact_clearTimer!(id);
+  }) as typeof clearTimeout;
+
+  const makeLog =
+    (level: string) =>
+    (...args: unknown[]) =>
+      g.__vsreact_log!(level, args.map(stringify).join(" "));
+
+  g.console = {
+    log: makeLog("log"),
+    info: makeLog("info"),
+    debug: makeLog("debug"),
+    warn: makeLog("warn"),
+    error: makeLog("error"),
+  } as Console;
+
+  g.queueMicrotask ??= (cb: VoidFunction) => {
+    Promise.resolve().then(cb);
+  };
+
+  g.performance ??= { now: () => Date.now() } as Performance;
+  // Typed loosely on purpose: the dist build has no Node/Bun types, and the
+  // shim only exists for libraries that probe NODE_ENV.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  g.process ??= { env: { NODE_ENV: "production" } } as any;
+  g.self ??= g as unknown as Window & typeof globalThis;
+  g.global ??= g;
+}