@praxisjs/devtools 0.2.34 → 0.3.0

package/src/__tests__/registry.test.ts

@@ -1,386 +0,0 @@
-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);
-  });
-});
-
-describe("Registry — rapid signal updates", () => {
-  it("records all rapid updates within the same millisecond separately", () => {
-    const registry = Registry.instance;
-    const instance = {};
-    registry.registerSignal(instance, "count", 0, "Counter");
-
-    // Perform multiple rapid updates (may share the same Date.now() value)
-    registry.updateSignal(instance, "count", 1, 0);
-    registry.updateSignal(instance, "count", 2, 1);
-    registry.updateSignal(instance, "count", 3, 2);
-
-    const signal = registry.getSignals()[0];
-    // initial + 3 updates = 4 history entries
-    expect(signal.history).toHaveLength(4);
-    expect(signal.history.map((h) => h.value)).toEqual([0, 1, 2, 3]);
-  });
-});
-
-describe("Registry — re-registering same signal", () => {
-  it("overwrites the previous entry when the same instance+key is re-registered", () => {
-    const registry = Registry.instance;
-    const instance = {};
-    registry.registerSignal(instance, "x", 10, "Comp");
-    registry.registerSignal(instance, "x", 99, "Comp");
-
-    const signals = registry.getSignals();
-    expect(signals).toHaveLength(1);
-    expect(signals[0].value).toBe(99);
-    expect(signals[0].history).toHaveLength(1);
-    expect(signals[0].history[0].value).toBe(99);
-  });
-});
-
-describe("Registry timeline cap — oldest entry removed", () => {
-  it("removes the oldest entry when the 201st entry is pushed", () => {
-    const registry = Registry.instance;
-    const instance = {};
-    registry.registerComponent(instance, "Comp");
-    registry.registerSignal(instance, "n", 0, "Comp");
-
-    // Push exactly 200 entries
-    for (let i = 1; i <= 200; i++) {
-      registry.updateSignal(instance, "n", i, i - 1);
-    }
-    const firstId = registry.getTimeline()[0].id;
-
-    // Push one more — the oldest should be evicted
-    registry.updateSignal(instance, "n", 201, 200);
-
-    const timeline = registry.getTimeline();
-    expect(timeline).toHaveLength(200);
-    expect(timeline[0].id).not.toBe(firstId);
-  });
-});

package/src/__tests__/trace.test.ts

@@ -1,200 +0,0 @@
-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 — class with no render() method", () => {
-  it("does not crash and no duration is recorded when render is absent", () => {
-    class NoRender {
-      onBeforeMount() {}
-    }
-    const Traced = applyTrace(NoRender);
-    const instance = new Traced() as unknown as Record<string, () => void>;
-
-    const registry = Registry.instance;
-    instance.onBeforeMount();
-
-    // render does not exist — calling it should not be attempted
-    expect(instance.render).toBeUndefined();
-
-    // No component:render timeline entries should exist
-    const renderEntries = registry.getTimeline().filter((e) => e.type === "component:render");
-    expect(renderEntries).toHaveLength(0);
-  });
-});
-
-describe("Trace — lifecycle hook call order", () => {
-  it("calls onBeforeMount → render → (async) onMount in correct order", async () => {
-    const order: string[] = [];
-
-    class App {
-      onBeforeMount() { order.push("onBeforeMount"); }
-      render() { order.push("render"); return "html"; }
-      onMount() { order.push("onMount"); }
-    }
-    const Traced = applyTrace(App);
-    const instance = new Traced() as {
-      onBeforeMount: () => void;
-      render: () => string;
-      onMount: () => void;
-    };
-
-    const registry = Registry.instance;
-
-    // Simulate the component lifecycle
-    instance.onBeforeMount();
-    instance.render();
-
-    // onMount is called async (via the framework's create() hook), simulate it
-    registry.registerComponent(instance, "App");
-    instance.onMount();
-
-    // The original methods (including Trace wrappers) run in call order
-    expect(order).toEqual(["onBeforeMount", "render", "onMount"]);
-  });
-});
-
-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/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "extends": "../../../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "./dist",
-    "rootDir": "./",
-    "jsxImportSource": "@praxisjs/jsx",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "paths": {
-      "@/*": ["./src/*"],
-      "@shared/*": ["./src/ui/shared/*"],
-      "@assets/*": ["./assets/*"],
-      "@core/*": ["./src/core/*"],
-      "@plugins/*": ["./src/plugins/*"],
-      "@decorators/*": ["./src/decorators/*"],
-      "@utils/*": ["./src/utils/*"],
-      "@icons": ["./src/icons/index.ts"]
-    }
-  },
-  "include": ["src", "uno.config.ts", "vite.config.ts"]
-}

package/uno.config.ts

@@ -1,57 +0,0 @@
-import presetWind3 from "@unocss/preset-wind3";
-import { defineConfig } from "unocss";
-
-export default defineConfig({
-  presets: [presetWind3()],
-
-  theme: {
-    colors: {
-      bg: "#0f0d17",
-      header: "#161326",
-      section: "#1b1830",
-      border: "rgba(155,144,230,0.25)",
-
-      text: "#f4f2ff",
-      muted: "#c7c3e6",
-      subtle: "#6f6a8f",
-
-      selected: "#221e3d",
-      input: "#1b1830",
-
-      accent: "#9b90e6",
-      accent2: "#7c6dd6",
-      accent3: "#6d5bbd",
-      soft: "rgba(155,144,230,0.18)",
-
-      success: "#0ea57a",
-      warn: "#d97706",
-      error: "#dc2626",
-      important: "#9b90e6",
-    },
-  },
-
-  preflights: [
-    {
-      getCSS: () => `
-        :host { all: initial; display: block; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
-        * { box-sizing: border-box; }
-
-        input::placeholder { color: #6f6a8f; }
-        input:focus {
-          outline: none;
-          box-shadow: 0 0 0 2px rgba(155,144,230,0.3);
-        }
-
-        ::-webkit-scrollbar { width: 4px; height: 4px; }
-        ::-webkit-scrollbar-track { background: transparent; }
-        ::-webkit-scrollbar-thumb {
-          background: rgba(155,144,230,0.2);
-          border-radius: 2px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-          background: rgba(155,144,230,0.4);
-        }
-      `,
-    },
-  ],
-});