@praxisjs/devtools 0.2.5 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisjs/devtools",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "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.0.0",
+    "@praxisjs/decorators": "0.5.0",
+    "@praxisjs/jsx": "0.3.4",
+    "@praxisjs/runtime": "0.2.5",
+    "@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");

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;

package/src/decorators/trace.ts

@@ -1,8 +1,17 @@
+import type { RootComponent } from "@praxisjs/core/internal";
+import {
+  createClassDecorator,
+  ClassBehavior,
+  type ClassEnhancement,
+} from "@praxisjs/decorators";
+
 import { Registry } from "../core/registry";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyConstructor = new (...args: any[]) => any;
 
+const EXTRA_HOOKS = ["onBeforeUpdate", "onUpdate", "onAfterUpdate"] as const;
+
 /**
  * Instruments a component class to report renders and lifecycle events
  * to the devtools panel.
@@ -11,58 +20,52 @@ type AnyConstructor = new (...args: any[]) => any;
  * @Component()
  * class MyComponent extends StatefulComponent { ... }
  */
-export function Trace() {
-  return function <T extends AnyConstructor>(constructor: T, _context: ClassDecoratorContext): T {
-    const name = constructor.name;
+class TraceBehavior extends ClassBehavior {
+  create(instance: RootComponent): ClassEnhancement {
     const registry = Registry.instance;
-    const proto = constructor.prototype as Record<string, unknown>;
-
-    // ── render() ──────────────────────────────────────────────────────────
-    const originalRender = proto.render as
-      | ((...args: unknown[]) => unknown)
-      | undefined;
 
-    if (originalRender) {
-      proto.render = function (this: object, ...args: unknown[]) {
+    return {
+      onMount() {
+        registry.recordLifecycle(instance, "onMount");
+      },
+      onUnmount() {
+        registry.recordLifecycle(instance, "onUnmount");
+      },
+      render(originalRender) {
         const start = performance.now();
-        const result = originalRender.call(this, ...args);
+        const result = originalRender();
         const duration = performance.now() - start;
-        registry.recordRender(this, duration);
+        registry.recordRender(instance, duration);
         return result;
-      };
-    }
+      },
+    };
+  }
 
-    // ── onBeforeMount – register the component instance ───────────────────
-    const originalOnBeforeMount = proto.onBeforeMount as
-      | ((...args: unknown[]) => unknown)
-      | undefined;
+  initialize(Enhanced: AnyConstructor, original: AnyConstructor): void {
+    const name = original.name;
+    const registry = Registry.instance;
+    const proto = Enhanced.prototype as Record<string, unknown>;
 
+    // onBeforeMount — also registers the component instance
+    const originalOnBeforeMount = proto.onBeforeMount as ((...args: unknown[]) => unknown) | undefined;
     proto.onBeforeMount = function (this: object, ...args: unknown[]) {
       registry.registerComponent(this, name);
       registry.recordLifecycle(this, "onBeforeMount");
       return originalOnBeforeMount?.call(this, ...args);
     };
 
-    // ── remaining lifecycle hooks ─────────────────────────────────────────
-    const hooks = [
-      "onMount",
-      "onUnmount",
-      "onBeforeUpdate",
-      "onUpdate",
-      "onAfterUpdate",
-    ] as const;
-
-    for (const hook of hooks) {
-      const original = proto[hook] as
-        | ((...args: unknown[]) => unknown)
-        | undefined;
-
+    for (const hook of EXTRA_HOOKS) {
+      const orig = proto[hook] as ((...args: unknown[]) => unknown) | undefined;
       proto[hook] = function (this: object, ...args: unknown[]) {
         registry.recordLifecycle(this, hook);
-        return original?.call(this, ...args);
+        return orig?.call(this, ...args);
       };
     }
+  }
+}
+
+const traceBehavior = new TraceBehavior();
 
-    return constructor;
-  };
+export function Trace() {
+  return createClassDecorator(traceBehavior);
 }