@praxisjs/devtools 0.2.5 → 0.2.7

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);
 }