@praxisjs/devtools 0.2.3 → 0.2.5

package/src/__tests__/registry.test.ts

@@ -0,0 +1,331 @@
+import { beforeEach, describe, it, expect, vi } from "vitest";
+
+import { Registry } from "../core/registry";
+
+// Reset singleton before each test to keep tests isolated
+beforeEach(() => {
+  (Registry as unknown as { _instance: Registry | null })._instance = null;
+});
+
+describe("Registry singleton", () => {
+  it("returns the same instance on subsequent accesses", () => {
+    const a = Registry.instance;
+    const b = Registry.instance;
+    expect(a).toBe(b);
+  });
+
+  it("creates a fresh instance after reset", () => {
+    const first = Registry.instance;
+    (Registry as unknown as { _instance: Registry | null })._instance = null;
+    const second = Registry.instance;
+    expect(first).not.toBe(second);
+  });
+});
+
+describe("Registry.registerSignal", () => {
+  it("stores the signal and emits 'signal:registered'", () => {
+    const registry = Registry.instance;
+    const handler = vi.fn();
+    registry.bus.on("signal:registered", handler);
+
+    const instance = {};
+    registry.registerSignal(instance, "count", 0, "Counter");
+
+    const signals = registry.getSignals();
+    expect(signals).toHaveLength(1);
+    expect(signals[0].label).toBe("count");
+    expect(signals[0].value).toBe(0);
+    expect(signals[0].componentName).toBe("Counter");
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it("builds the signal id as componentId:key", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerSignal(instance, "name", "Alice", "MyComp");
+    const signal = registry.getSignals()[0];
+    expect(signal.id).toMatch(/:.+/);
+    expect(signal.id.endsWith(":name")).toBe(true);
+  });
+
+  it("initialises history with the initial value", () => {
+    const registry = Registry.instance;
+    registry.registerSignal({}, "x", 42, "Comp");
+    const signal = registry.getSignals()[0];
+    expect(signal.history).toHaveLength(1);
+    expect(signal.history[0].value).toBe(42);
+  });
+});
+
+describe("Registry.updateSignal", () => {
+  it("updates the value and appends to history", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerSignal(instance, "count", 0, "Counter");
+    registry.updateSignal(instance, "count", 1, 0);
+
+    const signal = registry.getSignals()[0];
+    expect(signal.value).toBe(1);
+    expect(signal.history).toHaveLength(2);
+    expect(signal.history[1].value).toBe(1);
+  });
+
+  it("emits 'signal:changed' with old and new value", () => {
+    const registry = Registry.instance;
+    const handler = vi.fn();
+    registry.bus.on("signal:changed", handler);
+
+    const instance = {};
+    registry.registerSignal(instance, "val", "old", "Comp");
+    registry.updateSignal(instance, "val", "new", "old");
+
+    expect(handler).toHaveBeenCalledOnce();
+    const payload = handler.mock.calls[0][0] as { entry: { value: unknown }; oldValue: unknown };
+    expect(payload.entry.value).toBe("new");
+    expect(payload.oldValue).toBe("old");
+  });
+
+  it("caps history at 20 entries", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerSignal(instance, "n", 0, "Comp");
+    for (let i = 1; i <= 25; i++) {
+      registry.updateSignal(instance, "n", i, i - 1);
+    }
+    const signal = registry.getSignals()[0];
+    expect(signal.history.length).toBe(20);
+  });
+
+  it("does nothing when the signal does not exist", () => {
+    const registry = Registry.instance;
+    const handler = vi.fn();
+    registry.bus.on("signal:changed", handler);
+    registry.updateSignal({}, "missing", 1, 0);
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it("pushes a 'signal:change' timeline entry", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerSignal(instance, "x", 0, "Comp");
+    registry.updateSignal(instance, "x", 5, 0);
+    const timeline = registry.getTimeline();
+    const entry = timeline.find((t) => t.type === "signal:change");
+    expect(entry).toBeDefined();
+    expect(entry?.data.new).toBe(5);
+    expect(entry?.data.old).toBe(0);
+  });
+});
+
+describe("Registry.registerComponent", () => {
+  it("stores the component and emits 'component:registered'", () => {
+    const registry = Registry.instance;
+    const handler = vi.fn();
+    registry.bus.on("component:registered", handler);
+
+    const instance = {};
+    registry.registerComponent(instance, "MyComp");
+
+    const components = registry.getComponents();
+    expect(components).toHaveLength(1);
+    expect(components[0].name).toBe("MyComp");
+    expect(components[0].renderCount).toBe(0);
+    expect(components[0].status).toBe("mounted");
+    expect(handler).toHaveBeenCalledOnce();
+  });
+});
+
+describe("Registry.recordRender", () => {
+  it("increments renderCount and emits 'component:render'", () => {
+    const registry = Registry.instance;
+    const handler = vi.fn();
+    registry.bus.on("component:render", handler);
+
+    const instance = {};
+    registry.registerComponent(instance, "App");
+    registry.recordRender(instance, 5.2);
+
+    const comp = registry.getComponents()[0];
+    expect(comp.renderCount).toBe(1);
+    expect(comp.lastRenderDuration).toBe(5.2);
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it("accumulates renderCount across multiple renders", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerComponent(instance, "App");
+    registry.recordRender(instance, 1);
+    registry.recordRender(instance, 2);
+    registry.recordRender(instance, 3);
+    expect(registry.getComponents()[0].renderCount).toBe(3);
+  });
+
+  it("does nothing when the component does not exist", () => {
+    const registry = Registry.instance;
+    const handler = vi.fn();
+    registry.bus.on("component:render", handler);
+    registry.recordRender({}, 1);
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it("pushes a 'component:render' timeline entry", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerComponent(instance, "App");
+    registry.recordRender(instance, 3.5);
+    const entry = registry.getTimeline().find((t) => t.type === "component:render");
+    expect(entry).toBeDefined();
+    expect(entry?.data.duration).toBe(3.5);
+  });
+});
+
+describe("Registry.recordLifecycle", () => {
+  it("records a lifecycle event and emits 'lifecycle'", () => {
+    const registry = Registry.instance;
+    const handler = vi.fn();
+    registry.bus.on("lifecycle", handler);
+
+    const instance = {};
+    registry.registerComponent(instance, "Comp");
+    registry.recordLifecycle(instance, "onMount");
+
+    expect(handler).toHaveBeenCalledOnce();
+    const payload = handler.mock.calls[0][0] as { hook: string; name: string };
+    expect(payload.hook).toBe("onMount");
+    expect(payload.name).toBe("Comp");
+  });
+
+  it("removes component and its signals on 'onUnmount'", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerComponent(instance, "Comp");
+    registry.registerSignal(instance, "val", 1, "Comp");
+
+    expect(registry.getComponents()).toHaveLength(1);
+    expect(registry.getSignals()).toHaveLength(1);
+
+    registry.recordLifecycle(instance, "onUnmount");
+
+    expect(registry.getComponents()).toHaveLength(0);
+    expect(registry.getSignals()).toHaveLength(0);
+  });
+
+  it("emits 'component:unmount' on onUnmount", () => {
+    const registry = Registry.instance;
+    const handler = vi.fn();
+    registry.bus.on("component:unmount", handler);
+
+    const instance = {};
+    registry.registerComponent(instance, "Comp");
+    registry.recordLifecycle(instance, "onUnmount");
+
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it("maps onBeforeMount hook to 'component:mount' timeline type", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerComponent(instance, "Comp");
+    registry.recordLifecycle(instance, "onBeforeMount");
+    const entry = registry.getTimeline().find((t) => t.type === "component:mount");
+    expect(entry).toBeDefined();
+  });
+
+  it("maps onUnmount hook to 'component:unmount' timeline type", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerComponent(instance, "Comp");
+    registry.recordLifecycle(instance, "onUnmount");
+    const entry = registry.getTimeline().find((t) => t.type === "component:unmount");
+    expect(entry).toBeDefined();
+  });
+
+  it("maps other hooks to 'lifecycle' timeline type", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerComponent(instance, "Comp");
+    registry.recordLifecycle(instance, "onUpdate");
+    const entry = registry.getTimeline().find((t) => t.type === "lifecycle");
+    expect(entry).toBeDefined();
+  });
+
+  it("does nothing when the component does not exist", () => {
+    const registry = Registry.instance;
+    const handler = vi.fn();
+    registry.bus.on("lifecycle", handler);
+    registry.recordLifecycle({}, "onMount");
+    expect(handler).not.toHaveBeenCalled();
+  });
+});
+
+describe("Registry.recordMethodCall", () => {
+  it("pushes a 'method:call' timeline entry", () => {
+    const registry = Registry.instance;
+    const timelineHandler = vi.fn();
+    registry.bus.on("timeline:push", timelineHandler);
+
+    const instance = {};
+    registry.recordMethodCall(instance, "doSomething", [1, 2], "result", 3.14, "MyComp");
+
+    const entry = registry.getTimeline().find((t) => t.type === "method:call");
+    expect(entry).toBeDefined();
+    expect(entry?.label).toBe("MyComp.doSomething()");
+    expect(entry?.data.args).toEqual([1, 2]);
+    expect(entry?.data.result).toBe("result");
+    expect(entry?.data.duration).toBe(3.14);
+    expect(timelineHandler).toHaveBeenCalledOnce();
+  });
+});
+
+describe("Registry.getSignalsByComponent", () => {
+  it("returns only signals belonging to the given component", () => {
+    const registry = Registry.instance;
+    const inst1 = {};
+    const inst2 = {};
+    registry.registerComponent(inst1, "Comp1");
+    registry.registerComponent(inst2, "Comp2");
+    registry.registerSignal(inst1, "a", 1, "Comp1");
+    registry.registerSignal(inst2, "b", 2, "Comp2");
+
+    const comp1Id = registry.getComponents().find((c) => c.name === "Comp1")!.id;
+    const signals = registry.getSignalsByComponent(comp1Id);
+    expect(signals).toHaveLength(1);
+    expect(signals[0].label).toBe("a");
+  });
+});
+
+describe("Registry.recordLifecycle — onUnmount cross-component isolation", () => {
+  it("only removes signals belonging to the unmounted component", () => {
+    const registry = Registry.instance;
+    const inst1 = {};
+    const inst2 = {};
+    registry.registerComponent(inst1, "Comp1");
+    registry.registerComponent(inst2, "Comp2");
+    registry.registerSignal(inst1, "a", 1, "Comp1");
+    registry.registerSignal(inst2, "b", 2, "Comp2");
+
+    registry.recordLifecycle(inst1, "onUnmount");
+
+    // inst1's signal is gone, inst2's signal remains
+    const remaining = registry.getSignals();
+    expect(remaining).toHaveLength(1);
+    expect(remaining[0].label).toBe("b");
+  });
+});
+
+describe("Registry timeline cap", () => {
+  it("caps timeline at 200 entries", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerComponent(instance, "Comp");
+
+    // Each updateSignal pushes one timeline entry (plus the registerSignal = 0 entries)
+    registry.registerSignal(instance, "val", 0, "Comp");
+    for (let i = 1; i <= 210; i++) {
+      registry.updateSignal(instance, "val", i, i - 1);
+    }
+
+    expect(registry.getTimeline().length).toBe(200);
+  });
+});

package/src/__tests__/trace.test.ts

@@ -0,0 +1,149 @@
+import { beforeEach, describe, it, expect, vi } from "vitest";
+
+import { Registry } from "../core/registry";
+import { Trace } from "../decorators/trace";
+
+// Reset the Registry singleton before each test
+beforeEach(() => {
+  (Registry as unknown as { _instance: Registry | null })._instance = null;
+});
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyConstructor = new (...args: any[]) => any;
+
+function applyTrace<T extends AnyConstructor>(cls: T): T {
+  return Trace()(cls, {} as ClassDecoratorContext);
+}
+
+// ── Trace decorator ───────────────────────────────────────────────────────────
+
+describe("Trace — render()", () => {
+  it("records a render event after calling render()", () => {
+    class MyComp {
+      render() { return "html"; }
+    }
+    const Traced = applyTrace(MyComp);
+    const instance = new Traced() as { render: () => string };
+
+    const registry = Registry.instance;
+    registry.registerComponent(instance, "MyComp");
+
+    instance.render();
+
+    const renders = registry.getTimeline().filter((e) => e.type === "component:render");
+    expect(renders).toHaveLength(1);
+    expect(renders[0].label).toBe("<MyComp>");
+  });
+
+  it("returns the original render result", () => {
+    class Box {
+      render() { return "<div>box</div>"; }
+    }
+    const Traced = applyTrace(Box);
+    const instance = new Traced() as { render: () => string };
+
+    Registry.instance.registerComponent(instance, "Box");
+    expect(instance.render()).toBe("<div>box</div>");
+  });
+
+  it("wraps render even when it takes arguments", () => {
+    class Comp {
+      render(ctx: string) { return ctx; }
+    }
+    const Traced = applyTrace(Comp);
+    const instance = new Traced() as { render: (ctx: string) => string };
+
+    Registry.instance.registerComponent(instance, "Comp");
+    const result = instance.render("ctx-arg");
+    expect(result).toBe("ctx-arg");
+  });
+
+  it("does not wrap render when the class has no render method", () => {
+    class NoRender {}
+    const Traced = applyTrace(NoRender);
+    const instance = new Traced() as Record<string, unknown>;
+    expect(instance.render).toBeUndefined();
+  });
+});
+
+describe("Trace — onBeforeMount()", () => {
+  it("registers the component in the registry on onBeforeMount", () => {
+    class Widget {
+      onBeforeMount() {}
+    }
+    const Traced = applyTrace(Widget);
+    const instance = new Traced() as { onBeforeMount: () => void };
+
+    const registry = Registry.instance;
+    instance.onBeforeMount();
+
+    const components = registry.getComponents();
+    expect(components).toHaveLength(1);
+    expect(components[0].name).toBe("Widget");
+  });
+
+  it("calls the original onBeforeMount when it exists", () => {
+    const originalSpy = vi.fn();
+    class Panel {
+      onBeforeMount() { originalSpy(); }
+    }
+    const Traced = applyTrace(Panel);
+    const instance = new Traced() as { onBeforeMount: () => void };
+
+    instance.onBeforeMount();
+    expect(originalSpy).toHaveBeenCalled();
+  });
+
+  it("records a component:mount timeline event on onBeforeMount", () => {
+    class App {
+      onBeforeMount() {}
+    }
+    const Traced = applyTrace(App);
+    const instance = new Traced() as { onBeforeMount: () => void };
+
+    instance.onBeforeMount();
+
+    const mounts = Registry.instance.getTimeline().filter((e) => e.type === "component:mount");
+    expect(mounts).toHaveLength(1);
+  });
+});
+
+describe("Trace — lifecycle hooks", () => {
+  const hooks = ["onMount", "onUnmount", "onBeforeUpdate", "onUpdate", "onAfterUpdate"] as const;
+
+  for (const hook of hooks) {
+    it(`wraps ${hook} and records the lifecycle event`, () => {
+      class Comp {
+        onBeforeMount() {}
+      }
+      const Traced = applyTrace(Comp);
+      const instance = new Traced() as unknown as Record<string, () => void>;
+
+      // Register the component first via onBeforeMount
+      instance.onBeforeMount();
+
+      instance[hook]?.();
+
+      const events = Registry.instance.getTimeline().filter(
+        (e) => e.data.hook === hook,
+      );
+      expect(events.length).toBeGreaterThanOrEqual(1);
+    });
+
+    it(`${hook}: calls original implementation if it exists`, () => {
+      const spy = vi.fn();
+      class Comp {
+        onBeforeMount() {}
+      }
+      (Comp.prototype as unknown as Record<string, unknown>)[hook] = spy;
+      const Traced = applyTrace(Comp);
+      const instance = new Traced() as unknown as Record<string, () => void>;
+
+      instance.onBeforeMount();
+      instance[hook]?.();
+      expect(spy).toHaveBeenCalled();
+    });
+  }
+});

package/src/plugins/timeline/components/timeline-row.tsx

@@ -1,8 +1,7 @@
 import { time } from "@utils/format-time";
 
 import { StatefulComponent } from "@praxisjs/core";
-import { Component, State } from "@praxisjs/decorators";
-
+import { Component, Prop, State } from "@praxisjs/decorators";
 
 import { Badge } from "./badge";
 
@@ -11,9 +10,12 @@ import type { TimelineEntry } from "@core/types";
 @Component()
 export class TimelineRow extends StatefulComponent {
   @State() open = false;
+  @Prop() entry: TimelineEntry | undefined;
 
   render() {
-    const { entry } = this.props as { entry: TimelineEntry };
+    const entry = this.entry;
+    if (!entry) return null;
+
     const hasData = Object.keys(entry.data).length > 0;
 
     return (