@vsreact/core 0.0.1

package/build.ts

@@ -0,0 +1,24 @@
+// Bundles a VSReacT app entry into a single QuickJS-ready IIFE.
+//   bun run build.ts [entry] [outfile]
+export {};
+
+const entry = process.argv[2] ?? "demo/main.tsx";
+const outfile = process.argv[3] ?? "demo/build/main.js";
+
+const result = await Bun.build({
+  entrypoints: [entry],
+  target: "browser",
+  format: "iife",
+  minify: false,
+  define: {
+    "process.env.NODE_ENV": '"production"',
+  },
+});
+
+if (!result.success) {
+  for (const log of result.logs) console.error(log);
+  process.exit(1);
+}
+
+await Bun.write(outfile, await result.outputs[0].text());
+console.log(`built ${entry} -> ${outfile}`);

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@vsreact/core",
+  "version": "0.0.1",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/N9RecordsTechnologiesIL/VSReacT.git",
+    "directory": "vsreact/js"
+  },
+  "main": "src/index.ts",
+  "files": [
+    "src",
+    "build.ts"
+  ],
+  "scripts": {
+    "test": "bun test",
+    "typecheck": "tsc --noEmit",
+    "build": "bun run build.ts"
+  },
+  "dependencies": {
+    "react": "18.3.1",
+    "react-reconciler": "0.29.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-reconciler": "0.28.8",
+    "bun-types": "^1.3.14",
+    "typescript": "^5.5.0"
+  }
+}

package/src/animation.test.tsx

@@ -0,0 +1,22 @@
+import { describe, expect, test } from "bun:test";
+import { Easing, lerp } from "./animation";
+
+describe("animation", () => {
+  test("easing curves start at 0 and end at 1", () => {
+    for (const fn of [Easing.linear, Easing.outCubic, Easing.inOutCubic, Easing.outExpo, Easing.outBack, Easing.outQuint]) {
+      expect(fn(0)).toBeCloseTo(0, 5);
+      expect(fn(1)).toBeCloseTo(1, 5);
+    }
+  });
+
+  test("outBack overshoots past 1 mid-curve", () => {
+    const peak = Math.max(...Array.from({ length: 99 }, (_, i) => Easing.outBack((i + 1) / 100)));
+    expect(peak).toBeGreaterThan(1);
+  });
+
+  test("lerp interpolates", () => {
+    expect(lerp(0, 10, 0.5)).toBe(5);
+    expect(lerp(-20, 20, 0.75)).toBe(10);
+    expect(lerp(4, 4, 0.3)).toBe(4);
+  });
+});

package/src/animation.ts

@@ -0,0 +1,70 @@
+// Frame-driven animation for VSReacT. Tweens run on the host timer (16ms
+// ticks through the C++ Scheduler) and re-render by setting React state, so
+// every animated style flows through the normal setProps → repaint path.
+
+import { useEffect, useRef, useState } from "react";
+
+export type EasingFn = (t: number) => number;
+
+export const Easing = {
+  linear: ((t) => t) as EasingFn,
+  outCubic: ((t) => 1 - Math.pow(1 - t, 3)) as EasingFn,
+  inOutCubic: ((t) =>
+    t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2) as EasingFn,
+  outExpo: ((t) => (t >= 1 ? 1 : 1 - Math.pow(2, -10 * t))) as EasingFn,
+  outBack: ((t) => {
+    const c1 = 1.70158;
+    const c3 = c1 + 1;
+    return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+  }) as EasingFn,
+  outQuint: ((t) => 1 - Math.pow(1 - t, 5)) as EasingFn,
+};
+
+export interface TweenOptions {
+  /** Milliseconds the tween runs for (after the delay). */
+  duration: number;
+  delay?: number;
+  easing?: EasingFn;
+  onComplete?: () => void;
+}
+
+const FRAME_MS = 16;
+
+/** Eased progress 0→1 that starts when the component mounts. */
+export function useTween({ duration, delay = 0, easing = Easing.outCubic, onComplete }: TweenOptions): number {
+  const [progress, setProgress] = useState(0);
+  const doneRef = useRef(false);
+  const completeRef = useRef(onComplete);
+  completeRef.current = onComplete;
+
+  useEffect(() => {
+    let elapsed = -delay;
+
+    const id = setInterval(() => {
+      elapsed += FRAME_MS;
+
+      if (elapsed <= 0) return;
+
+      const t = Math.min(1, elapsed / duration);
+      setProgress(easing(t));
+
+      if (t >= 1) {
+        clearInterval(id);
+
+        if (!doneRef.current) {
+          doneRef.current = true;
+          completeRef.current?.();
+        }
+      }
+    }, FRAME_MS);
+
+    return () => clearInterval(id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return progress;
+}
+
+export function lerp(from: number, to: number, t: number): number {
+  return from + (to - from) * t;
+}

package/src/bridge.ts

@@ -0,0 +1,66 @@
+// JS side of the mutation/event bridge. Ops queue up during a React commit
+// and flush to C++ as one JSON batch; C++ pushes events back through the
+// __vsreact_dispatch global registered here.
+
+import { fireTimer } from "./runtime";
+
+export type Op = unknown[];
+
+let queue: Op[] = [];
+
+export function queueOp(op: Op): void {
+  queue.push(op);
+}
+
+export function flushOps(): void {
+  if (queue.length === 0) return;
+  const json = JSON.stringify(queue);
+  queue = [];
+  (globalThis as Record<string, any>).__vsreact_flush?.(json);
+}
+
+export type EventHandler = (payload: unknown) => void;
+
+const eventHandlers = new Map<number, Map<string, EventHandler>>();
+
+export function setHandlers(nodeId: number, handlers: Map<string, EventHandler>): void {
+  if (handlers.size === 0) eventHandlers.delete(nodeId);
+  else eventHandlers.set(nodeId, handlers);
+}
+
+export function removeHandlers(nodeId: number): void {
+  eventHandlers.delete(nodeId);
+}
+
+const nativeListeners = new Map<string, Set<EventHandler>>();
+
+export function addNativeListener(name: string, cb: EventHandler): () => void {
+  let set = nativeListeners.get(name);
+  if (!set) nativeListeners.set(name, (set = new Set()));
+  set.add(cb);
+  return () => {
+    set.delete(cb);
+    if (set.size === 0) nativeListeners.delete(name);
+  };
+}
+
+interface DispatchMessage {
+  kind: "event" | "native" | "timer";
+  nodeId?: number;
+  type?: string;
+  name?: string;
+  id?: number;
+  payload?: unknown;
+}
+
+(globalThis as Record<string, any>).__vsreact_dispatch = (json: string) => {
+  const msg = JSON.parse(json) as DispatchMessage;
+
+  if (msg.kind === "timer" && msg.id !== undefined) {
+    fireTimer(msg.id);
+  } else if (msg.kind === "event" && msg.nodeId !== undefined && msg.type) {
+    eventHandlers.get(msg.nodeId)?.get(msg.type)?.(msg.payload);
+  } else if (msg.kind === "native" && msg.name) {
+    nativeListeners.get(msg.name)?.forEach((cb) => cb(msg.payload));
+  }
+};

package/src/controls.tsx

@@ -0,0 +1,194 @@
+// Knob and Slider — the classic VST controls, drawn by the VSReacT painter
+// (arc styles) and driven by drag gestures.
+
+import { useRef } from "react";
+import { View, Text } from "./primitives";
+import { useParameter } from "./parameters";
+
+/** Vertical-drag-to-value mapping shared by Knob (and tested in isolation). */
+export function dragToValue(startValue: number, dy: number, sensitivity = 0.005): number {
+  return Math.min(1, Math.max(0, startValue - dy * sensitivity));
+}
+
+const ARC_START = -135;
+const ARC_END = 135;
+
+export interface KnobProps {
+  value: number; // normalized 0..1
+  text?: string;
+  label?: string;
+  size?: number;
+  disabled?: boolean;
+  trackColor?: string;
+  valueColor?: string;
+  onChange: (value: number) => void;
+  onBegin?: () => void;
+  onEnd?: () => void;
+}
+
+export function Knob({
+  value,
+  text,
+  label,
+  size = 64,
+  disabled,
+  trackColor = "#2A2F27",
+  valueColor = "#C6F135",
+  onChange,
+  onBegin,
+  onEnd,
+}: KnobProps) {
+  const startValue = useRef(0);
+
+  return (
+    <View className="items-center gap-2">
+      <View
+        className={`items-center justify-center ${disabled ? "opacity-40" : "cursor-pointer"}`}
+        style={{
+          width: size,
+          height: size,
+          arcTrackColor: trackColor,
+          arcColor: valueColor,
+          arcStart: ARC_START,
+          arcEnd: ARC_END,
+          arcValueEnd: ARC_START + (ARC_END - ARC_START) * Math.min(1, Math.max(0, value)),
+          arcThickness: Math.max(3, size * 0.08),
+        }}
+        onDragStart={
+          disabled
+            ? undefined
+            : () => {
+                startValue.current = value;
+                onBegin?.();
+              }
+        }
+        onDrag={disabled ? undefined : (e) => onChange(dragToValue(startValue.current, e.dy))}
+        onDragEnd={disabled ? undefined : () => onEnd?.()}
+      >
+        {text !== undefined ? (
+          <Text
+            className="text-text font-bold text-center"
+            style={{ fontSize: Math.max(10, size * 0.16) }}
+          >
+            {text}
+          </Text>
+        ) : null}
+      </View>
+      {label !== undefined ? (
+        <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+export interface ParamKnobProps {
+  paramId: string;
+  label?: string;
+  size?: number;
+  trackColor?: string;
+  valueColor?: string;
+}
+
+/** A Knob bound to an APVTS parameter (via ParameterBridge). */
+export function ParamKnob({ paramId, label, size, trackColor, valueColor }: ParamKnobProps) {
+  const param = useParameter(paramId);
+
+  return (
+    <Knob
+      value={param.value}
+      text={param.text}
+      label={label ?? param.name.toUpperCase()}
+      size={size}
+      trackColor={trackColor}
+      valueColor={valueColor}
+      onChange={param.set}
+      onBegin={param.begin}
+      onEnd={param.end}
+    />
+  );
+}
+
+export interface SliderProps {
+  value: number; // normalized 0..1
+  width?: number;
+  label?: string;
+  disabled?: boolean;
+  trackColor?: string;
+  valueColor?: string;
+  onChange: (value: number) => void;
+  onBegin?: () => void;
+  onEnd?: () => void;
+}
+
+export function Slider({
+  value,
+  width = 160,
+  label,
+  disabled,
+  trackColor = "#2A2F27",
+  valueColor = "#C6F135",
+  onChange,
+  onBegin,
+  onEnd,
+}: SliderProps) {
+  const startValue = useRef(0);
+  const clamped = Math.min(1, Math.max(0, value));
+
+  return (
+    <View className="gap-2">
+      <View
+        className={`h-[18] justify-center relative ${disabled ? "opacity-40" : "cursor-pointer"}`}
+        style={{ width }}
+        onDragStart={
+          disabled
+            ? undefined
+            : () => {
+                startValue.current = clamped;
+                onBegin?.();
+              }
+        }
+        onDrag={
+          disabled
+            ? undefined
+            : (e) => onChange(Math.min(1, Math.max(0, startValue.current + e.dx / width)))
+        }
+        onDragEnd={disabled ? undefined : () => onEnd?.()}
+      >
+        <View className="h-[4] rounded-full" style={{ backgroundColor: trackColor }} />
+        <View
+          className="absolute h-[4] rounded-full top-[7]"
+          style={{ width: clamped * width, backgroundColor: valueColor }}
+        />
+        <View
+          className="absolute w-[12] h-[12] rounded-full top-[3]"
+          style={{ left: clamped * (width - 12), backgroundColor: valueColor }}
+        />
+      </View>
+      {label !== undefined ? (
+        <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+export interface ParamSliderProps {
+  paramId: string;
+  label?: string;
+  width?: number;
+}
+
+/** A Slider bound to an APVTS parameter (via ParameterBridge). */
+export function ParamSlider({ paramId, label, width }: ParamSliderProps) {
+  const param = useParameter(paramId);
+
+  return (
+    <Slider
+      value={param.value}
+      label={label ?? param.name.toUpperCase()}
+      width={width}
+      onChange={param.set}
+      onBegin={param.begin}
+      onEnd={param.end}
+    />
+  );
+}

package/src/hostConfig.test.tsx

@@ -0,0 +1,120 @@
+import { beforeEach, describe, expect, test } from "bun:test";
+import { useState } from "react";
+
+const batches: unknown[][][] = [];
+(globalThis as Record<string, any>).__vsreact_flush = (json: string) => {
+  batches.push(JSON.parse(json));
+};
+
+import { render, unmount, View, Text, TextInput } 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));
+
+beforeEach(() => {
+  unmount();
+  batches.length = 0;
+});
+
+describe("reconciler host config", () => {
+  test("initial mount emits create/setProps/append ops ending at the root", () => {
+    render(
+      <View className="p-4">
+        <Text>hi</Text>
+      </View>,
+    );
+
+    const ops = allOps();
+    const creates = opsNamed("create");
+
+    // view + text + rawtext
+    expect(creates.length).toBe(3);
+    const viewId = (creates.find((op: any) => op[2] === "view") as any)[1];
+    const textId = (creates.find((op: any) => op[2] === "text") as any)[1];
+    const rawId = (creates.find((op: any) => op[2] === "rawtext") as any)[1];
+
+    const viewProps: any = opsNamed("setProps").find((op: any) => op[1] === viewId);
+    expect(viewProps[2].style.padding).toBe(16);
+
+    expect(opsNamed("setText")).toContainEqual(["setText", rawId, "hi"]);
+    expect(opsNamed("appendChild")).toContainEqual(["appendChild", textId, rawId]);
+    expect(opsNamed("appendChild")).toContainEqual(["appendChild", viewId, textId]);
+    expect(opsNamed("appendChild")).toContainEqual(["appendChild", 0, viewId]);
+
+    // root attach comes after the subtree is assembled
+    const opNames = ops.map((op: any) => op.join(":"));
+    expect(opNames.indexOf(`appendChild:0:${viewId}`)).toBeGreaterThan(
+      opNames.indexOf(`appendChild:${viewId}:${textId}`),
+    );
+  });
+
+  test("click handlers register as listeners and receive dispatches", () => {
+    let clicks = 0;
+
+    render(<View onClick={() => clicks++} className="w-4" />);
+
+    const create: any = opsNamed("create")[0];
+    const props: any = opsNamed("setProps").find((op: any) => op[1] === create[1]);
+    expect(props[2].listeners).toEqual(["click"]);
+
+    dispatch({ kind: "event", nodeId: create[1], type: "click" });
+    expect(clicks).toBe(1);
+  });
+
+  test("state updates emit new setProps and setText", () => {
+    function Counter() {
+      const [count, setCount] = useState(0);
+      return (
+        <View onClick={() => setCount((c) => c + 1)}>
+          <Text>{`count:${count}`}</Text>
+        </View>
+      );
+    }
+
+    render(<Counter />);
+
+    const viewId = (opsNamed("create").find((op: any) => op[2] === "view") as any)[1];
+    batches.length = 0;
+
+    dispatch({ kind: "event", nodeId: viewId, type: "click" });
+
+    expect(opsNamed("setText").some((op: any) => op[2] === "count:1")).toBe(true);
+  });
+
+  test("TextInput onChange receives the plain string value", () => {
+    const seen: string[] = [];
+
+    render(<TextInput onChange={(v) => seen.push(v)} />);
+
+    const inputId = (opsNamed("create").find((op: any) => op[2] === "textinput") as any)[1];
+    dispatch({ kind: "event", nodeId: inputId, type: "change", payload: { value: "abc" } });
+
+    expect(seen).toEqual(["abc"]);
+  });
+
+  test("conditional removal emits removeChild", () => {
+    function Toggle({ on }: { on: boolean }) {
+      return <View>{on ? <View className="w-2" /> : null}</View>;
+    }
+
+    render(<Toggle on={true} />);
+    // React creates instances bottom-up: the inner view is created first.
+    const childId = (opsNamed("create")[0] as any)[1];
+    batches.length = 0;
+
+    render(<Toggle on={false} />);
+    expect(opsNamed("removeChild").some((op: any) => op[2] === childId)).toBe(true);
+  });
+
+  test("unmount clears the container", () => {
+    render(<View />);
+    batches.length = 0;
+    unmount();
+    const ops = allOps();
+    expect(ops.some((op: any) => op[0] === "removeChild" || op[0] === "clearContainer")).toBe(
+      true,
+    );
+  });
+});

package/src/hostConfig.ts

@@ -0,0 +1,161 @@
+// react-reconciler host config (mutation mode). React commits become batched
+// mutation ops; event props become handler-registry entries + listener lists.
+
+import { DefaultEventPriority } from "react-reconciler/constants";
+import { queueOp, flushOps, setHandlers, removeHandlers, type EventHandler } from "./bridge";
+import { tw, type Style } from "./tw";
+
+export interface Instance {
+  id: number;
+  type: string;
+}
+
+export type TextInstance = Instance;
+
+let nextId = 1;
+
+const hostTypes: Record<string, string> = {
+  "vs-view": "view",
+  "vs-text": "text",
+  "vs-image": "image",
+  "vs-textinput": "textinput",
+  "vs-native": "native",
+};
+
+const eventPropNames: Record<string, string> = {
+  onClick: "click",
+  onMouseEnter: "mouseenter",
+  onMouseLeave: "mouseleave",
+  onMouseDown: "mousedown",
+  onMouseUp: "mouseup",
+  onDragStart: "dragstart",
+  onDrag: "drag",
+  onDragEnd: "dragend",
+  onChange: "change",
+  onSubmit: "submit",
+  onFocus: "focus",
+  onBlur: "blur",
+};
+
+function normalizeProps(props: Record<string, unknown>): {
+  payload: Record<string, unknown>;
+  handlers: Map<string, EventHandler>;
+} {
+  const payload: Record<string, unknown> = {};
+  const handlers = new Map<string, EventHandler>();
+  const listeners: string[] = [];
+
+  const resolved = typeof props.className === "string" ? tw(props.className) : { style: {} };
+  payload.style = { ...resolved.style, ...((props.style as Style) ?? {}) };
+  if (resolved.hoverStyle) payload.hoverStyle = resolved.hoverStyle;
+  if (resolved.activeStyle) payload.activeStyle = resolved.activeStyle;
+  if (resolved.focusStyle) payload.focusStyle = resolved.focusStyle;
+
+  for (const [key, value] of Object.entries(props)) {
+    if (value === undefined || key === "children" || key === "className" || key === "style")
+      continue;
+
+    const eventType = eventPropNames[key];
+
+    if (eventType && typeof value === "function") {
+      handlers.set(eventType, value as EventHandler);
+      listeners.push(eventType);
+      continue;
+    }
+
+    if (typeof value !== "function" && typeof value !== "object") payload[key] = value;
+  }
+
+  if (listeners.length > 0) payload.listeners = listeners;
+
+  return { payload, handlers };
+}
+
+function applyProps(instance: Instance, props: Record<string, unknown>): void {
+  const { payload, handlers } = normalizeProps(props);
+  setHandlers(instance.id, handlers);
+  queueOp(["setProps", instance.id, payload]);
+}
+
+export const hostConfig = {
+  supportsMutation: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  isPrimaryRenderer: true,
+  supportsMicrotasks: true,
+  scheduleMicrotask: (fn: () => void) => queueMicrotask(fn),
+  scheduleTimeout: (fn: (...args: unknown[]) => void, delay?: number) => setTimeout(fn, delay),
+  cancelTimeout: (id: ReturnType<typeof setTimeout>) => clearTimeout(id),
+  noTimeout: -1 as const,
+
+  getRootHostContext: () => ({}),
+  getChildHostContext: (parent: object) => parent,
+  getPublicInstance: (instance: Instance) => instance,
+  prepareForCommit: () => null,
+  resetAfterCommit: () => flushOps(),
+  shouldSetTextContent: () => false,
+
+  createInstance(type: string, props: Record<string, unknown>): Instance {
+    const hostType = hostTypes[type];
+    if (!hostType) throw new Error(`Unknown VSReacT element <${type}>`);
+
+    const instance: Instance = { id: nextId++, type: hostType };
+    queueOp(["create", instance.id, hostType]);
+    applyProps(instance, props);
+    return instance;
+  },
+
+  createTextInstance(text: string): TextInstance {
+    const instance: TextInstance = { id: nextId++, type: "rawtext" };
+    queueOp(["create", instance.id, "rawtext"]);
+    queueOp(["setText", instance.id, text]);
+    return instance;
+  },
+
+  appendInitialChild: (parent: Instance, child: Instance) =>
+    queueOp(["appendChild", parent.id, child.id]),
+  appendChild: (parent: Instance, child: Instance) =>
+    queueOp(["appendChild", parent.id, child.id]),
+  appendChildToContainer: (_container: unknown, child: Instance) =>
+    queueOp(["appendChild", 0, child.id]),
+  insertBefore: (parent: Instance, child: Instance, before: Instance) =>
+    queueOp(["insertBefore", parent.id, child.id, before.id]),
+  insertInContainerBefore: (_container: unknown, child: Instance, before: Instance) =>
+    queueOp(["insertBefore", 0, child.id, before.id]),
+  removeChild: (parent: Instance, child: Instance) =>
+    queueOp(["removeChild", parent.id, child.id]),
+  removeChildFromContainer: (_container: unknown, child: Instance) =>
+    queueOp(["removeChild", 0, child.id]),
+
+  finalizeInitialChildren: () => false,
+
+  prepareUpdate: () => true,
+
+  commitUpdate(
+    instance: Instance,
+    _updatePayload: unknown,
+    _type: string,
+    _prevProps: Record<string, unknown>,
+    nextProps: Record<string, unknown>,
+  ): void {
+    applyProps(instance, nextProps);
+  },
+
+  commitTextUpdate(instance: TextInstance, _oldText: string, newText: string): void {
+    queueOp(["setText", instance.id, newText]);
+  },
+
+  clearContainer: () => queueOp(["clearContainer"]),
+
+  detachDeletedInstance(instance: Instance): void {
+    removeHandlers(instance.id);
+  },
+
+  getCurrentEventPriority: () => DefaultEventPriority,
+  getInstanceFromNode: () => null,
+  getInstanceFromScope: () => null,
+  beforeActiveInstanceBlur: () => {},
+  afterActiveInstanceBlur: () => {},
+  prepareScopeUpdate: () => {},
+  preparePortalMount: () => {},
+};