@praxisjs/devtools 0.2.5 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisjs/devtools",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -12,11 +12,11 @@
   },
   "dependencies": {
     "@unocss/reset": "^66.6.2",
-    "@praxisjs/core": "0.4.2",
-    "@praxisjs/decorators": "0.4.3",
-    "@praxisjs/jsx": "0.3.3",
-    "@praxisjs/shared": "0.2.0",
-    "@praxisjs/runtime": "0.2.4"
+    "@praxisjs/core": "1.1.0",
+    "@praxisjs/decorators": "0.6.0",
+    "@praxisjs/jsx": "0.3.5",
+    "@praxisjs/runtime": "0.2.6",
+    "@praxisjs/shared": "0.2.0"
   },
   "devDependencies": {
     "@types/node": "^25.3.0",

package/src/__tests__/debug.test.ts

@@ -11,19 +11,31 @@ beforeEach(() => {
 
 // ── Method decorator ──────────────────────────────────────────────────────────
 
+function mockMethodCtx(name: string) {
+  const initializers: Array<(this: object) => void> = [];
+  return {
+    kind: "method" as const,
+    name,
+    addInitializer(fn: (this: object) => void) { initializers.push(fn); },
+    runInitializers(instance: object) { initializers.forEach((fn) => { fn.call(instance); }); },
+  } as unknown as ClassMethodDecoratorContext & { runInitializers(instance: object): void };
+}
+
 describe("Debug — method decorator", () => {
   it("records a method:call timeline entry", () => {
-    const ctx = { kind: "method" as const, name: "doWork" } as ClassMethodDecoratorContext;
+    const ctx = mockMethodCtx("doWork");
     const original = vi.fn((_x: unknown) => "result");
 
-    const wrapped = Debug()(original as never, ctx) as (...args: unknown[]) => unknown;
+    Debug()(original as never, ctx);
 
-    class Comp { constructor() {} }
+    class Comp { doWork(_x: unknown) { return "result"; } }
     const instance = new Comp();
+    ctx.runInitializers(instance);
+
     const registry = Registry.instance;
     registry.registerComponent(instance, "Comp");
 
-    wrapped.call(instance, 42);
+    instance.doWork(42);
 
     const entry = registry.getTimeline().find((t) => t.type === "method:call");
     expect(entry).toBeDefined();
@@ -33,31 +45,33 @@ describe("Debug — method decorator", () => {
   });
 
   it("records throw result when method throws", () => {
-    const ctx = { kind: "method" as const, name: "boom" } as ClassMethodDecoratorContext;
+    const ctx = mockMethodCtx("boom");
     const original = () => { throw new Error("fail"); };
 
-    const wrapped = Debug()(original as never, ctx) as () => void;
+    Debug()(original as never, ctx);
 
-    class Comp {}
+    class Comp { boom() { throw new Error("fail"); } }
     const instance = new Comp();
+    ctx.runInitializers(instance);
     Registry.instance.registerComponent(instance, "Comp");
 
-    expect(() => wrapped.call(instance)).toThrow("fail");
+    expect(() => (instance as unknown as Record<string, () => void>).boom()).toThrow("fail");
 
     const entry = Registry.instance.getTimeline().find((t) => t.type === "method:call");
     expect(entry?.data.result).toContain("throw");
   });
 
   it("uses custom label from options", () => {
-    const ctx = { kind: "method" as const, name: "internal" } as ClassMethodDecoratorContext;
+    const ctx = mockMethodCtx("internal");
     const original = vi.fn(() => undefined);
 
-    const wrapped = Debug({ label: "myLabel" })(original as never, ctx) as () => void;
+    Debug({ label: "myLabel" })(original as never, ctx);
 
-    class Comp {}
+    class Comp { internal() { return undefined; } }
     const instance = new Comp();
+    ctx.runInitializers(instance);
     Registry.instance.registerComponent(instance, "Comp");
-    wrapped.call(instance);
+    (instance as unknown as Record<string, () => void>).internal();
 
     const entry = Registry.instance.getTimeline().find((t) => t.type === "method:call");
     expect(entry?.label).toContain("myLabel");
@@ -227,6 +241,62 @@ describe("Debug — field decorator with computed value", () => {
   });
 });
 
+// ── Async method decorator ────────────────────────────────────────────────────
+
+describe("Debug — async method decorator", () => {
+  it("timing is recorded for the synchronous wrapper (documents limitation: async duration is not measured)", () => {
+    // @Debug wraps methods synchronously. For async methods, the recorded duration
+    // covers only until the Promise is returned, not until it resolves.
+    const ctx = mockMethodCtx("fetchData");
+    const original = vi.fn(async () => {
+      await new Promise((r) => setTimeout(r, 10));
+      return "done";
+    });
+
+    Debug()(original as never, ctx);
+
+    class Comp { async fetchData() { return "done"; } }
+    const instance = new Comp();
+    ctx.runInitializers(instance);
+    Registry.instance.registerComponent(instance, "Comp");
+
+    // Call and await
+    const promise = (instance as unknown as Record<string, () => unknown>).fetchData() as Promise<unknown>;
+    expect(promise).toBeInstanceOf(Promise);
+
+    // Timeline entry is recorded synchronously (before the promise resolves)
+    const entry = Registry.instance.getTimeline().find((t) => t.type === "method:call");
+    expect(entry).toBeDefined();
+    expect(entry?.label).toContain("fetchData");
+    // Duration is near-zero since it only measured until Promise was returned
+    expect(typeof entry?.data.duration).toBe("number");
+
+    return promise;
+  });
+});
+
+// ── Empty constructor name ─────────────────────────────────────────────────────
+
+describe("Debug — class with empty constructor name", () => {
+  it("falls back gracefully when constructor.name is empty string", () => {
+    const ctx = mockMethodCtx("doWork");
+    const original = vi.fn(() => 42);
+
+    Debug()(original as never, ctx);
+
+    // Simulate a class whose constructor.name is empty (e.g. minified code)
+    const instance = Object.create({ constructor: { name: "" } }) as object;
+    ctx.runInitializers(instance);
+
+    expect(() => {
+      (instance as Record<string, () => void>).doWork();
+    }).not.toThrow();
+
+    const entry = Registry.instance.getTimeline().find((t) => t.type === "method:call");
+    expect(entry).toBeDefined();
+  });
+});
+
 // ── Getter decorator ──────────────────────────────────────────────────────────
 
 describe("Debug — getter decorator", () => {

package/src/__tests__/event-bus.test.ts

@@ -73,4 +73,51 @@ describe("EventBus", () => {
     bus2.emit("event", "data");
     expect(handler).not.toHaveBeenCalled();
   });
+
+  it("handler that throws does not prevent subsequent handlers from being called", () => {
+    const bus = new EventBus();
+    const h1 = vi.fn().mockImplementation(() => { throw new Error("h1 failed"); });
+    const h2 = vi.fn();
+    const h3 = vi.fn();
+    bus.on("event", h1);
+    bus.on("event", h2);
+    bus.on("event", h3);
+    expect(() => bus.emit("event", "payload")).toThrow();
+    expect(h2).toHaveBeenCalledWith("payload");
+    expect(h3).toHaveBeenCalledWith("payload");
+  });
+
+  it("handlers are called in registration order", () => {
+    const bus = new EventBus();
+    const order: number[] = [];
+    bus.on("event", () => { order.push(1); });
+    bus.on("event", () => { order.push(2); });
+    bus.on("event", () => { order.push(3); });
+    bus.emit("event", null);
+    expect(order).toEqual([1, 2, 3]);
+  });
+
+  it("error from a throwing handler is re-thrown after all handlers run", () => {
+    const bus = new EventBus();
+    const err = new Error("boom");
+    bus.on("event", () => { throw err; });
+    const h2 = vi.fn();
+    bus.on("event", h2);
+    expect(() => bus.emit("event", "x")).toThrow(err);
+    expect(h2).toHaveBeenCalledOnce();
+  });
+
+  it("throws AggregateError when multiple handlers throw", () => {
+    const bus = new EventBus();
+    bus.on("event", () => { throw new Error("first"); });
+    bus.on("event", () => { throw new Error("second"); });
+    let caught: unknown;
+    try {
+      bus.emit("event", null);
+    } catch (e) {
+      caught = e;
+    }
+    expect(caught).toBeInstanceOf(AggregateError);
+    expect((caught as AggregateError).errors).toHaveLength(2);
+  });
 });

package/src/__tests__/registry.test.ts

@@ -329,3 +329,58 @@ describe("Registry timeline cap", () => {
     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

@@ -110,6 +110,57 @@ describe("Trace — onBeforeMount()", () => {
   });
 });
 
+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;
 

package/src/core/event-bus.ts

@@ -12,8 +12,22 @@ export class EventBus {
   }
 
   emit(event: string, payload: unknown): void {
-    this.handlers.get(event)?.forEach((h) => {
-      h(payload);
-    });
+    const handlers = this.handlers.get(event);
+    if (!handlers) return;
+
+    const errors: unknown[] = [];
+    for (const h of handlers) {
+      try {
+        h(payload);
+      } catch (err) {
+        errors.push(err);
+      }
+    }
+
+    if (errors.length === 1) {
+      throw errors[0];
+    } else if (errors.length > 1) {
+      throw new AggregateError(errors, "Multiple event handler errors");
+    }
   }
 }

package/src/decorators/debug.ts

@@ -1,4 +1,10 @@
 import { computed } from "@praxisjs/core/internal";
+import {
+  createMethodDecorator,
+  createGetterObserverDecorator,
+  createFieldDecorator,
+  type FieldBinding,
+} from "@praxisjs/decorators";
 
 import { Registry } from "../core/registry";
 
@@ -15,8 +21,7 @@ interface TrackedComputed {
 function isComputed(value: unknown): value is TrackedComputed {
   return (
     typeof value === "function" &&
-    typeof (value as unknown as Record<string, unknown>).subscribe ===
-      "function" &&
+    typeof (value as unknown as Record<string, unknown>).subscribe === "function" &&
     !("set" in (value as object))
   );
 }
@@ -27,29 +32,14 @@ interface ComputedSlot {
 }
 
 interface DebugDecorator {
-  (
-    value: (...args: unknown[]) => unknown,
-    context: ClassMethodDecoratorContext,
-  ): (...args: unknown[]) => unknown;
+  (value: (...args: unknown[]) => unknown, context: ClassMethodDecoratorContext): void;
   (value: unknown, context: ClassGetterDecoratorContext): void;
   (value: undefined, context: ClassFieldDecoratorContext): void;
 }
 
 /**
  * Tracks state, computed values, and methods in the devtools panel.
- *
- * On @State() properties (stacked):
- *   @Debug()
- *   @State() count = 0;
- *
- * On @Computed() getters (stacked):
- *   @Debug({ label: "doubled" })
- *   @Computed()
- *   get doubled() { return this.count * 2; }
- *
- * On methods:
- *   @Debug()
- *   increment() { ... }
+ * Supports @State() fields, @Computed() getters, and methods.
  */
 export function Debug(options: DebugOptions = {}): DebugDecorator {
   const impl = function (
@@ -61,120 +51,83 @@ export function Debug(options: DebugOptions = {}): DebugDecorator {
   ) {
     const label = options.label ?? (context.name as string);
 
-    // ── Method decorator ─────────────────────────────────────────────────
     if (context.kind === "method") {
       const original = value as (...args: unknown[]) => unknown;
-
-      return function (this: object, ...args: unknown[]) {
-        const componentName = (this.constructor as { name: string }).name;
-        const start = performance.now();
-        let result: unknown;
-        let threw = false;
-
-        try {
-          result = original.apply(this, args);
-        } catch (err) {
-          threw = true;
-          result = err;
-          throw err;
-        } finally {
-          const duration = performance.now() - start;
-          Registry.instance.recordMethodCall(
-            this,
-            label,
-            args,
-            threw ? `throw ${String(result)}` : result,
-            duration,
-            componentName,
-          );
-        }
-
-        return result;
-      };
+      createMethodDecorator({
+        wrap(_original, _instance, _name) {
+          return function (this: object, ...args: unknown[]) {
+            const componentName = (this.constructor as { name: string }).name;
+            const start = performance.now();
+            let result: unknown;
+            let threw = false;
+            try {
+              result = original.apply(this, args);
+            } catch (err) {
+              threw = true;
+              result = err;
+              throw err;
+            } finally {
+              const duration = performance.now() - start;
+              Registry.instance.recordMethodCall(
+                this, label, args,
+                threw ? `throw ${String(result)}` : result,
+                duration, componentName,
+              );
+            }
+            return result;
+          };
+        },
+      })(original, context);
+      return;
     }
 
-    // ── Getter decorator (@Computed() getters) ────────────────────────────
     if (context.kind === "getter") {
       const originalGetter = value as (this: object) => unknown;
-
-      context.addInitializer(function (this: unknown) {
-        const instance = this as object & Record<string, unknown>;
-        const componentName = (instance.constructor as { name: string }).name;
-
-        // Defer until the current synchronous class initialization (including
-        // field initializers like `count = 0`) has fully completed. Without
-        // this, accessing `this.doubled` here could read state signals before
-        // their field initializers have run, producing NaN or undefined.
-        queueMicrotask(() => {
-          const c = computed(() => originalGetter.call(instance));
-          let skipFirst = true;
-          let prevValue = c();
-
-          Registry.instance.registerSignal(instance, label, prevValue, componentName);
-
-          c.subscribe((newValue) => {
-            if (skipFirst) {
-              skipFirst = false;
-              return;
-            }
-            Registry.instance.updateSignal(instance, label, newValue, prevValue);
-            prevValue = newValue;
+      createGetterObserverDecorator({
+        observe(getter, instance, _name) {
+          const componentName = (instance.constructor as { name: string }).name;
+          // Defer so field initializers (e.g. @State()) have run before we read them.
+          queueMicrotask(() => {
+            const c = computed(() => getter.call(instance));
+            let skipFirst = true;
+            let prevValue = c();
+            Registry.instance.registerSignal(instance, label, prevValue, componentName);
+            c.subscribe((newValue) => {
+              if (skipFirst) { skipFirst = false; return; }
+              Registry.instance.updateSignal(instance, label, newValue, prevValue);
+              prevValue = newValue;
+            });
           });
-        });
-      });
-
+        },
+      })(originalGetter, context);
       return;
     }
 
-    // ── Field decorator ───────────────────────────────────────────────────
-    context.addInitializer(function (
-      this: unknown,
-    ) {
-        const instance = this as object & Record<string, unknown>;
-        const name = context.name as string;
-        const componentName = (
-          instance.constructor as { name: string }
-        ).name;
-
-        // ── Wrapping @State() getter/setter ─────────────────────────────
-        // @State() initializer runs before @Debug() initializer (inner-first),
-        // so the getter/setter is already installed on the instance here.
-        const existingDesc = Object.getOwnPropertyDescriptor(instance, name);
+    createFieldDecorator({
+      bind(instance, name, _initialValue): FieldBinding {
+        const componentName = (instance.constructor as { name: string }).name;
 
+        // @State() runs inner-first, so its getter/setter is already on the instance.
+        const existingDesc = Object.getOwnPropertyDescriptor(instance, name);
         if (existingDesc?.get && existingDesc.set) {
           // eslint-disable-next-line @typescript-eslint/unbound-method
           const originalGet = existingDesc.get;
           // eslint-disable-next-line @typescript-eslint/unbound-method
           const originalSet = existingDesc.set;
-
-          Registry.instance.registerSignal(
-            instance,
-            label,
-            originalGet.call(instance),
-            componentName,
-          );
-
-          Object.defineProperty(instance, name, {
-            get(this: object) {
-              return originalGet.call(this) as unknown;
-            },
-            set(this: object, newValue: unknown) {
-              const oldValue: unknown = originalGet.call(this);
-              originalSet.call(this, newValue);
-              Registry.instance.updateSignal(this, label, newValue, oldValue);
+          Registry.instance.registerSignal(instance, label, originalGet.call(instance), componentName);
+          return {
+            descriptor: {
+              get(this: object) { return originalGet.call(this) as unknown; },
+              set(this: object, newValue: unknown) {
+                const oldValue: unknown = originalGet.call(this);
+                originalSet.call(this, newValue);
+                Registry.instance.updateSignal(this, label, newValue, oldValue);
+              },
             },
-            enumerable: true,
-            configurable: true,
-          });
-
-          return;
+          };
         }
 
-        // ── Computed class field ─────────────────────────────────────────
-        // The field initializer has already run, so read the assigned value.
-        const initialValue = instance[name];
-        Reflect.deleteProperty(instance, name);
-
+        const initialValue = _initialValue;
         if (!isComputed(initialValue)) {
           if (initialValue !== undefined) {
             console.warn(
@@ -182,54 +135,45 @@ export function Debug(options: DebugOptions = {}): DebugDecorator {
                 `expected a computed() value but got ${typeof initialValue}. Skipping.`,
             );
           }
-          instance[name] = initialValue;
-          return;
+          return {};
         }
 
-        // subscribe() calls the callback immediately (synchronously), so we
-        // use a flag to skip the first call and register via registerSignal instead.
         let slot: ComputedSlot;
 
-        function subscribe(computed: TrackedComputed): () => void {
+        // subscribe() fires the callback immediately — skip that first call
+        // and register the initial value via registerSignal instead.
+        function subscribe(comp: TrackedComputed): () => void {
           let skipFirst = true;
-          let prevValue = computed();
-
-          const unsub = computed.subscribe((newValue) => {
-            if (skipFirst) {
-              skipFirst = false;
-              return;
-            }
+          let prevValue = comp();
+          const unsub = comp.subscribe((newValue) => {
+            if (skipFirst) { skipFirst = false; return; }
             Registry.instance.updateSignal(instance, label, newValue, prevValue);
             prevValue = newValue;
           });
-
           Registry.instance.registerSignal(instance, label, prevValue, componentName);
           return unsub;
         }
 
         slot = { computed: initialValue, unsub: subscribe(initialValue) };
 
-        Object.defineProperty(instance, name, {
-          get() {
-            return slot.computed;
-          },
-          set(newValue: unknown) {
-            slot.unsub();
-
-            if (!isComputed(newValue)) {
-              console.warn(
-                `[PraxisJS DevTools] @Debug() on "${componentName}.${name}": ` +
-                  `expected a computed() value but got ${typeof newValue}. Skipping.`,
-              );
-              return;
-            }
-
-            slot = { computed: newValue, unsub: subscribe(newValue) };
+        return {
+          descriptor: {
+            get() { return slot.computed; },
+            set(newValue: unknown) {
+              slot.unsub();
+              if (!isComputed(newValue)) {
+                console.warn(
+                  `[PraxisJS DevTools] @Debug() on "${componentName}.${name}": ` +
+                    `expected a computed() value but got ${typeof newValue}. Skipping.`,
+                );
+                return;
+              }
+              slot = { computed: newValue, unsub: subscribe(newValue) };
+            },
           },
-          enumerable: true,
-          configurable: true,
-        });
-    });
+        };
+      },
+    })(undefined, context);
   };
 
   return impl as DebugDecorator;