@praxisjs/devtools 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisjs/devtools",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -12,10 +12,10 @@
   },
   "dependencies": {
     "@unocss/reset": "^66.6.2",
-    "@praxisjs/core": "0.3.0",
-    "@praxisjs/decorators": "0.3.0",
-    "@praxisjs/jsx": "0.2.0",
-    "@praxisjs/runtime": "0.2.0",
+    "@praxisjs/core": "0.4.0",
+    "@praxisjs/decorators": "0.4.0",
+    "@praxisjs/jsx": "0.2.1",
+    "@praxisjs/runtime": "0.2.1",
     "@praxisjs/shared": "0.2.0"
   },
   "devDependencies": {

package/src/decorators/debug.ts

@@ -1,3 +1,5 @@
+import { computed } from "@praxisjs/core/internal";
+
 import { Registry } from "../core/registry";
 
 export interface DebugOptions {
@@ -24,6 +26,15 @@ interface ComputedSlot {
   unsub: () => void;
 }
 
+interface DebugDecorator {
+  (
+    value: (...args: unknown[]) => unknown,
+    context: ClassMethodDecoratorContext,
+  ): (...args: unknown[]) => unknown;
+  (value: unknown, context: ClassGetterDecoratorContext): void;
+  (value: undefined, context: ClassFieldDecoratorContext): void;
+}
+
 /**
  * Tracks state, computed values, and methods in the devtools panel.
  *
@@ -31,18 +42,22 @@ interface ComputedSlot {
  *   @Debug()
  *   @State() count = 0;
  *
- * On computed class fields:
- *   @Debug()
- *   doubled = computed(() => this.count * 2);
+ * On @Computed() getters (stacked):
+ *   @Debug({ label: "doubled" })
+ *   @Computed()
+ *   get doubled() { return this.count * 2; }
  *
  * On methods:
  *   @Debug()
  *   increment() { ... }
  */
-export function Debug(options: DebugOptions = {}) {
-  return function (
+export function Debug(options: DebugOptions = {}): DebugDecorator {
+  const impl = function (
     value: unknown,
-    context: ClassMethodDecoratorContext | ClassFieldDecoratorContext,
+    context:
+      | ClassMethodDecoratorContext
+      | ClassGetterDecoratorContext
+      | ClassFieldDecoratorContext,
   ) {
     const label = options.label ?? (context.name as string);
 
@@ -78,6 +93,39 @@ export function Debug(options: DebugOptions = {}) {
       };
     }
 
+    // ── 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;
+          });
+        });
+      });
+
+      return;
+    }
+
     // ── Field decorator ───────────────────────────────────────────────────
     context.addInitializer(function (
       this: unknown,
@@ -183,4 +231,6 @@ export function Debug(options: DebugOptions = {}) {
         });
     });
   };
+
+  return impl as DebugDecorator;
 }