@praxisjs/devtools 0.1.1 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisjs/devtools",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -12,17 +12,18 @@
   },
   "dependencies": {
     "@unocss/reset": "^66.6.2",
-    "@praxisjs/core": "0.2.0",
-    "@praxisjs/jsx": "0.1.0",
-    "@praxisjs/runtime": "0.1.1",
-    "@praxisjs/shared": "0.1.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": {
     "@types/node": "^25.3.0",
     "@unocss/cli": "^66.6.2",
-    "@unocss/preset-wind3": "^66.6.2",
+    "@unocss/preset-wind3": "^66.6.6",
     "typescript": "^5.9.3",
-    "unocss": "^66.6.2",
+    "unocss": "^66.6.6",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   },

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,28 +42,31 @@ 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 (
-    target: object,
-    key: string,
-    descriptor?: PropertyDescriptor,
-  ): void {
-    const componentName = (target.constructor as { name: string }).name;
-    const label = options.label ?? key;
+export function Debug(options: DebugOptions = {}): DebugDecorator {
+  const impl = function (
+    value: unknown,
+    context:
+      | ClassMethodDecoratorContext
+      | ClassGetterDecoratorContext
+      | ClassFieldDecoratorContext,
+  ) {
+    const label = options.label ?? (context.name as string);
 
     // ── Method decorator ─────────────────────────────────────────────────
-    if (descriptor && typeof descriptor.value === "function") {
-      const original = descriptor.value as (...args: unknown[]) => unknown;
+    if (context.kind === "method") {
+      const original = value as (...args: unknown[]) => unknown;
 
-      descriptor.value = function (this: object, ...args: 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;
@@ -77,85 +91,146 @@ export function Debug(options: DebugOptions = {}) {
 
         return result;
       };
-
-      return;
     }
 
-    const existingDesc = Object.getOwnPropertyDescriptor(target, key);
-
-    // ── Property decorator (wrapping @State()) ───────────────────────────
-    if (existingDesc?.get && existingDesc.set) {
-      const originalGet = existingDesc.get.bind(existingDesc);
-      const originalSet = existingDesc.set.bind(existingDesc);
-      const initialized = new WeakSet();
-
-      Object.defineProperty(target, key, {
-        get(this: object) {
-          return originalGet.call(this) as unknown;
-        },
-        set(this: object, newValue: unknown) {
-          if (!initialized.has(this)) {
-            initialized.add(this);
-            originalSet.call(this, newValue);
-            Registry.instance.registerSignal(
-              this,
-              label,
-              newValue,
-              componentName,
-            );
-          } else {
-            const oldValue: unknown = originalGet.call(this);
-            originalSet.call(this, newValue);
-            Registry.instance.updateSignal(this, label, newValue, oldValue);
-          }
-        },
-        enumerable: true,
-        configurable: true,
+    // ── 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;
     }
 
-    // ── Computed class field ──────────────────────────────────────────────
-    // No existing descriptor means it's a plain class field (e.g. `doubled = computed(...)`).
-    // Intercept the assignment so we can subscribe to the computed's value changes.
-    const slots = new WeakMap<object, ComputedSlot>();
-
-    Object.defineProperty(target, key, {
-      get(this: object) {
-        return slots.get(this)?.computed;
-      },
-      set(this: object, value: unknown) {
-        // Clean up previous subscription on re-assignment
-        slots.get(this)?.unsub();
-
-        if (!isComputed(value)) {
-          console.warn(
-            `[PraxisJS DevTools] @Debug() on "${componentName}.${key}": ` +
-              `expected a computed() value but got ${typeof value}. Skipping.`,
+    // ── 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);
+
+        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);
+            },
+            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);
+
+        if (!isComputed(initialValue)) {
+          if (initialValue !== undefined) {
+            console.warn(
+              `[PraxisJS DevTools] @Debug() on "${componentName}.${name}": ` +
+                `expected a computed() value but got ${typeof initialValue}. Skipping.`,
+            );
+          }
+          instance[name] = initialValue;
           return;
         }
 
         // subscribe() calls the callback immediately (synchronously), so we
         // use a flag to skip the first call and register via registerSignal instead.
-        let skipFirst = true;
-        let prevValue = value();
+        let slot: ComputedSlot;
+
+        function subscribe(computed: TrackedComputed): () => void {
+          let skipFirst = true;
+          let prevValue = computed();
+
+          const unsub = computed.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;
+        }
 
-        const unsub = value.subscribe((newValue) => {
-          if (skipFirst) {
-            skipFirst = false;
-            return;
-          }
-          Registry.instance.updateSignal(this, label, newValue, prevValue);
-          prevValue = newValue;
+        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) };
+          },
+          enumerable: true,
+          configurable: true,
         });
-
-        slots.set(this, { computed: value, unsub });
-        Registry.instance.registerSignal(this, label, prevValue, componentName);
-      },
-      enumerable: true,
-      configurable: true,
     });
   };
+
+  return impl as DebugDecorator;
 }

package/src/decorators/trace.ts

@@ -1,4 +1,4 @@
-import { Registry } from '../core/registry';
+import { Registry } from "../core/registry";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyConstructor = new (...args: any[]) => any;
@@ -9,16 +9,18 @@ type AnyConstructor = new (...args: any[]) => any;
  *
  * @Trace()
  * @Component()
- * class MyComponent extends BaseComponent { ... }
+ * class MyComponent extends StatefulComponent { ... }
  */
 export function Trace() {
-  return function <T extends AnyConstructor>(constructor: T): T {
+  return function <T extends AnyConstructor>(constructor: T, _context: ClassDecoratorContext): T {
     const name = constructor.name;
     const registry = Registry.instance;
     const proto = constructor.prototype as Record<string, unknown>;
 
     // ── render() ──────────────────────────────────────────────────────────
-    const originalRender = proto.render as ((...args: unknown[]) => unknown) | undefined;
+    const originalRender = proto.render as
+      | ((...args: unknown[]) => unknown)
+      | undefined;
 
     if (originalRender) {
       proto.render = function (this: object, ...args: unknown[]) {
@@ -37,21 +39,23 @@ export function Trace() {
 
     proto.onBeforeMount = function (this: object, ...args: unknown[]) {
       registry.registerComponent(this, name);
-      registry.recordLifecycle(this, 'onBeforeMount');
+      registry.recordLifecycle(this, "onBeforeMount");
       return originalOnBeforeMount?.call(this, ...args);
     };
 
     // ── remaining lifecycle hooks ─────────────────────────────────────────
     const hooks = [
-      'onMount',
-      'onUnmount',
-      'onBeforeUpdate',
-      'onUpdate',
-      'onAfterUpdate',
+      "onMount",
+      "onUnmount",
+      "onBeforeUpdate",
+      "onUpdate",
+      "onAfterUpdate",
     ] as const;
 
     for (const hook of hooks) {
-      const original = proto[hook] as ((...args: unknown[]) => unknown) | undefined;
+      const original = proto[hook] as
+        | ((...args: unknown[]) => unknown)
+        | undefined;
 
       proto[hook] = function (this: object, ...args: unknown[]) {
         registry.recordLifecycle(this, hook);

package/src/icons/ellipsis-vertical.tsx

@@ -1,20 +1,26 @@
-export function EllipsisVerticalIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="lucide lucide-ellipsis-vertical-icon lucide-ellipsis-vertical"
-    >
-      <circle cx="12" cy="12" r="1" />
-      <circle cx="12" cy="5" r="1" />
-      <circle cx="12" cy="19" r="1" />
-    </svg>
-  );
+import { StatelessComponent } from "@praxisjs/core";
+import { Component } from "@praxisjs/decorators";
+
+@Component()
+export class EllipsisVerticalIcon extends StatelessComponent {
+  render() {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="lucide lucide-ellipsis-vertical-icon lucide-ellipsis-vertical"
+      >
+        <circle cx="12" cy="12" r="1" />
+        <circle cx="12" cy="5" r="1" />
+        <circle cx="12" cy="19" r="1" />
+      </svg>
+    );
+  }
 }

package/src/icons/panel-bottom.tsx

@@ -1,19 +1,25 @@
-export function PanelBottomIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="lucide lucide-panel-bottom-icon lucide-panel-bottom"
-    >
-      <rect width="18" height="18" x="3" y="3" rx="2" />
-      <path d="M3 15h18" />
-    </svg>
-  );
+import { StatelessComponent } from "@praxisjs/core";
+import { Component } from "@praxisjs/decorators";
+
+@Component()
+export class PanelBottomIcon extends StatelessComponent {
+  render() {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="lucide lucide-panel-bottom-icon lucide-panel-bottom"
+      >
+        <rect width="18" height="18" x="3" y="3" rx="2" />
+        <path d="M3 15h18" />
+      </svg>
+    );
+  }
 }

package/src/icons/panel-left.tsx

@@ -1,19 +1,25 @@
-export function PanelLeftIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="lucide lucide-panel-left-icon lucide-panel-left"
-    >
-      <rect width="18" height="18" x="3" y="3" rx="2" />
-      <path d="M9 3v18" />
-    </svg>
-  );
+import { StatelessComponent } from "@praxisjs/core";
+import { Component } from "@praxisjs/decorators";
+
+@Component()
+export class PanelLeftIcon extends StatelessComponent {
+  render() {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="lucide lucide-panel-left-icon lucide-panel-left"
+      >
+        <rect width="18" height="18" x="3" y="3" rx="2" />
+        <path d="M9 3v18" />
+      </svg>
+    );
+  }
 }

package/src/icons/panel-right.tsx

@@ -1,19 +1,25 @@
-export function PanelRightIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="lucide lucide-panel-right-icon lucide-panel-right"
-    >
-      <rect width="18" height="18" x="3" y="3" rx="2" />
-      <path d="M15 3v18" />
-    </svg>
-  );
+import { StatelessComponent } from "@praxisjs/core";
+import { Component } from "@praxisjs/decorators";
+
+@Component()
+export class PanelRightIcon extends StatelessComponent {
+  render() {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="lucide lucide-panel-right-icon lucide-panel-right"
+      >
+        <rect width="18" height="18" x="3" y="3" rx="2" />
+        <path d="M15 3v18" />
+      </svg>
+    );
+  }
 }

package/src/icons/panel-top.tsx

@@ -1,19 +1,25 @@
-export function PanelTopIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="lucide lucide-panel-top-icon lucide-panel-top"
-    >
-      <rect width="18" height="18" x="3" y="3" rx="2" />
-      <path d="M3 9h18" />
-    </svg>
-  );
+import { StatelessComponent } from "@praxisjs/core";
+import { Component } from "@praxisjs/decorators";
+
+@Component()
+export class PanelTopIcon extends StatelessComponent {
+  render() {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="lucide lucide-panel-top-icon lucide-panel-top"
+      >
+        <rect width="18" height="18" x="3" y="3" rx="2" />
+        <path d="M3 9h18" />
+      </svg>
+    );
+  }
 }

package/src/icons/x.tsx

@@ -1,19 +1,25 @@
-export function XIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="lucide lucide-x-icon lucide-x"
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
+import { StatelessComponent } from "@praxisjs/core";
+import { Component } from "@praxisjs/decorators";
+
+@Component()
+export class XIcon extends StatelessComponent {
+  render() {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="lucide lucide-x-icon lucide-x"
+      >
+        <path d="M18 6 6 18" />
+        <path d="m6 6 12 12" />
+      </svg>
+    );
+  }
 }