@praxisjs/devtools 0.1.0 → 0.2.0

package/src/plugins/components/components/component-detail.tsx

@@ -1,70 +1,75 @@
 import { SidePanel } from "@shared/side-panel";
 import { formatValue } from "@utils/format-value";
 
+import { StatelessComponent } from "@praxisjs/core";
+import { Component } from "@praxisjs/decorators";
+
+
 import { DetailRow } from "./detail-row";
 import { DetailSection } from "./detail-section";
 import { StatusDot } from "./status-dot";
 
 import type { ComponentEntry, SignalEntry } from "@core/types";
 
-export function ComponentDetail({
-  entry,
-  signals,
-}: {
+@Component()
+export class ComponentDetail extends StatelessComponent<{
   entry: ComponentEntry;
   signals: SignalEntry[];
-}) {
-  return (
-    <SidePanel>
-      <div class="px-3 py-2 border-b border-border flex items-center gap-2 bg-bg shrink-0">
-        <StatusDot status={entry.status} />
-        <span class="text-accent font-mono text-[11px] font-semibold truncate pl-1">
-          &lt;{entry.name}&gt;
-        </span>
-      </div>
-
-      <div class="flex-1 overflow-y-auto">
-        <DetailSection label="Stats">
-          <DetailRow k="renders" v={String(entry.renderCount)} />
-          <DetailRow
-            k="last render"
-            v={`${entry.lastRenderDuration.toFixed(3)}ms`}
-          />
-          <DetailRow k="status" v={entry.status} />
-        </DetailSection>
+}> {
+  render() {
+    const { entry, signals } = this.props;
+    return (
+      <SidePanel>
+        <div class="px-3 py-2 border-b border-border flex items-center gap-2 bg-bg shrink-0">
+          <StatusDot status={entry.status} />
+          <span class="text-accent font-mono text-[11px] font-semibold truncate pl-1">
+            &lt;{entry.name}&gt;
+          </span>
+        </div>
 
-        {signals.length > 0 && (
-          <DetailSection label="State">
-            {signals.map((s) => (
-              <DetailRow
-                key={s.id}
-                k={s.label}
-                v={formatValue(s.value)}
-                signal
-              />
-            ))}
+        <div class="flex-1 overflow-y-auto">
+          <DetailSection label="Stats">
+            <DetailRow k="renders" v={String(entry.renderCount)} />
+            <DetailRow
+              k="last render"
+              v={`${entry.lastRenderDuration.toFixed(3)}ms`}
+            />
+            <DetailRow k="status" v={entry.status} />
           </DetailSection>
-        )}
 
-        {entry.lifecycle.length > 0 && (
-          <DetailSection label="Lifecycle">
-            {[...entry.lifecycle]
-              .reverse()
-              .slice(0, 20)
-              .map((ev, i) => (
-                <div
-                  key={String(i)}
-                  class="px-3 py-2 flex justify-between items-center border-b border-border"
-                >
-                  <span class="text-[11px] text-text font-mono">{ev.hook}</span>
-                  <span class="text-[10px] text-subtle tabular-nums">
-                    {new Date(ev.timestamp).toLocaleTimeString()}
-                  </span>
-                </div>
+          {signals.length > 0 && (
+            <DetailSection label="State">
+              {signals.map((s) => (
+                <DetailRow
+                  key={s.id}
+                  k={s.label}
+                  v={formatValue(s.value)}
+                  signal
+                />
               ))}
-          </DetailSection>
-        )}
-      </div>
-    </SidePanel>
-  );
+            </DetailSection>
+          )}
+
+          {entry.lifecycle.length > 0 && (
+            <DetailSection label="Lifecycle">
+              {[...entry.lifecycle]
+                .reverse()
+                .slice(0, 20)
+                .map((ev, i) => (
+                  <div
+                    key={String(i)}
+                    class="px-3 py-2 flex justify-between items-center border-b border-border"
+                  >
+                    <span class="text-[11px] text-text font-mono">{ev.hook}</span>
+                    <span class="text-[10px] text-subtle tabular-nums">
+                      {new Date(ev.timestamp).toLocaleTimeString()}
+                    </span>
+                  </div>
+                ))}
+            </DetailSection>
+          )}
+        </div>
+      </SidePanel>
+    );
+  }
 }

package/src/plugins/components/components/component-row.tsx

@@ -1,42 +1,45 @@
+import { StatelessComponent } from "@praxisjs/core";
+import { Component } from "@praxisjs/decorators";
+
 import { StatusDot } from "./status-dot";
 
 import type { ComponentEntry } from "@core/types";
 
-export function ComponentRow({
-  entry,
-  selected,
-  onClick,
-}: {
+@Component()
+export class ComponentRow extends StatelessComponent<{
   entry: ComponentEntry;
   selected: () => boolean;
   onClick: () => void;
-}) {
-  return (
-    <div
-      onClick={onClick}
-      class={() =>
-        `relative flex items-center gap-2 px-3 py-2 cursor-pointer border-b border-border transition-colors duration-100 ${
-          selected() ? "bg-selected" : "hover:bg-section"
-        }`
-      }
-    >
-      {() =>
-        selected() && (
-          <span class="absolute left-0 top-0 bottom-0 w-[2px] bg-accent rounded-r" />
-        )
-      }
-      <StatusDot status={entry.status} />
-      <span class="text-accent font-mono text-[11px] flex-1 truncate pl-1">
-        &lt;{entry.name}&gt;
-      </span>
-      <span class="text-muted text-[11px] tabular-nums">
-        ×{entry.renderCount}
-      </span>
-      <span
-        class={`text-[10px] tabular-nums w-12 text-right ${entry.lastRenderDuration > 16 ? "text-warn" : "text-subtle"}`}
+}> {
+  render() {
+    const { entry, selected, onClick } = this.props;
+    return (
+      <div
+        onClick={onClick}
+        class={() =>
+          `relative flex items-center gap-2 px-3 py-2 cursor-pointer border-b border-border transition-colors duration-100 ${
+            selected() ? "bg-selected" : "hover:bg-section"
+          }`
+        }
       >
-        {entry.lastRenderDuration.toFixed(1)}ms
-      </span>
-    </div>
-  );
+        {() =>
+          selected() && (
+            <span class="absolute left-0 top-0 bottom-0 w-[2px] bg-accent rounded-r" />
+          )
+        }
+        <StatusDot status={entry.status} />
+        <span class="text-accent font-mono text-[11px] flex-1 truncate pl-1">
+          &lt;{entry.name}&gt;
+        </span>
+        <span class="text-muted text-[11px] tabular-nums">
+          ×{entry.renderCount}
+        </span>
+        <span
+          class={`text-[10px] tabular-nums w-12 text-right ${entry.lastRenderDuration > 16 ? "text-warn" : "text-subtle"}`}
+        >
+          {entry.lastRenderDuration.toFixed(1)}ms
+        </span>
+      </div>
+    );
+  }
 }

package/src/plugins/components/components/detail-row.tsx

@@ -1,22 +1,25 @@
-export function DetailRow({
-  k,
-  v,
-  signal: isSignal,
-}: {
+import { StatelessComponent } from "@praxisjs/core";
+import { Component } from "@praxisjs/decorators";
+
+@Component()
+export class DetailRow extends StatelessComponent<{
   k: string;
   v: string;
   signal?: boolean;
-}) {
-  return (
-    <div class="flex justify-between items-center px-3 py-2 border-b border-border gap-3">
-      <span
-        class={`text-[11px] font-mono shrink-0 ${isSignal ? "text-accent" : "text-muted"}`}
-      >
-        {k}
-      </span>
-      <span class="text-[11px] text-text font-mono truncate text-right">
-        {v}
-      </span>
-    </div>
-  );
+}> {
+  render() {
+    const { k, v, signal: isSignal } = this.props;
+    return (
+      <div class="flex justify-between items-center px-3 py-2 border-b border-border gap-3">
+        <span
+          class={`text-[11px] font-mono shrink-0 ${isSignal ? "text-accent" : "text-muted"}`}
+        >
+          {k}
+        </span>
+        <span class="text-[11px] text-text font-mono truncate text-right">
+          {v}
+        </span>
+      </div>
+    );
+  }
 }

package/src/plugins/components/components/detail-section.tsx

@@ -1,18 +1,20 @@
+import { StatelessComponent } from "@praxisjs/core";
+import { Component } from "@praxisjs/decorators";
 import type { Children } from "@praxisjs/shared";
 
-export function DetailSection({
-  label,
-  children,
-}: {
+@Component()
+export class DetailSection extends StatelessComponent<{
   label: string;
   children: Children;
-}) {
-  return (
-    <div class="border-b border-border">
-      <div class="px-3 py-[4px] text-[9px] text-subtle font-bold tracking-[0.12em] uppercase bg-section border-b border-border">
-        {label}
+}> {
+  render() {
+    return (
+      <div class="border-b border-border">
+        <div class="px-3 py-[4px] text-[9px] text-subtle font-bold tracking-[0.12em] uppercase bg-section border-b border-border">
+          {this.props.label}
+        </div>
+        {this.props.children}
       </div>
-      {children}
-    </div>
-  );
+    );
+  }
 }

package/src/plugins/components/components/status-dot.tsx

@@ -1,14 +1,23 @@
+import { StatelessComponent } from "@praxisjs/core";
+import { Component } from "@praxisjs/decorators";
+
 import type { ComponentEntry } from "@core/types";
 
-export function StatusDot({ status }: { status: ComponentEntry["status"] }) {
-  return (
-    <span
-      class={`inline-block w-[6px] h-[6px] rounded-full shrink-0 ${status === "mounted" ? "bg-success" : "bg-subtle"}`}
-      style={
-        status === "mounted"
-          ? { boxShadow: "0 0 6px rgba(14,165,122,0.7)" }
-          : undefined
-      }
-    />
-  );
+@Component()
+export class StatusDot extends StatelessComponent<{
+  status: ComponentEntry["status"];
+}> {
+  render() {
+    const { status } = this.props;
+    return (
+      <span
+        class={`inline-block w-[6px] h-[6px] rounded-full shrink-0 ${status === "mounted" ? "bg-success" : "bg-subtle"}`}
+        style={
+          status === "mounted"
+            ? { boxShadow: "0 0 6px rgba(14,165,122,0.7)" }
+            : undefined
+        }
+      />
+    );
+  }
 }

package/src/plugins/components/components-tab.tsx

@@ -1,85 +1,90 @@
 import { EmptyState } from "@shared/empty-state";
 
-import { signal, effect, peek, onMount, onUnmount } from "@praxisjs/core";
+import { StatefulComponent } from "@praxisjs/core";
+import { Component, State } from "@praxisjs/decorators";
+
 
 import { ComponentDetail } from "./components/component-detail";
 import { ComponentRow } from "./components/component-row";
 
 import type { Registry } from "@core/registry";
-import type { ComponentEntry, SignalEntry } from "@core/types";
+import type { ComponentEntry } from "@core/types";
+
+@Component()
+export class ComponentsTab extends StatefulComponent {
+  @State() components: ComponentEntry[] = [];
+  @State() selectedId: string | null = null;
 
-export function ComponentsTab({ registry }: { registry: Registry }) {
-  const components = signal<ComponentEntry[]>(registry.getComponents());
-  const selectedId = signal<string | null>(null);
-  const sigs = signal<SignalEntry[]>([]);
+  private _handlers: Array<() => void> = [];
 
-  const stopSigEffect = effect(() => {
-    const id = selectedId();
-    sigs.set(id ? registry.getSignalsByComponent(id) : []);
-  });
+  private get registry() {
+    return this.props.registry as Registry;
+  }
+
+  onMount() {
+    this.components = this.registry.getComponents();
 
-  let handlers: Array<() => void> = [];
-  onMount(() => {
     const refresh = () => {
-      components.set(registry.getComponents());
-      const id = peek(selectedId);
-      if (id) sigs.set(registry.getSignalsByComponent(id));
+      this.components = this.registry.getComponents();
     };
-    handlers = [
+
+    this._handlers = [
       "component:registered",
       "component:render",
       "component:unmount",
       "lifecycle",
       "signal:registered",
       "signal:changed",
-    ].map((ev) => registry.bus.on(ev, refresh));
-  });
+    ].map((ev) => this.registry.bus.on(ev, refresh));
+  }
 
-  onUnmount(() => {
-    stopSigEffect();
-    handlers.forEach((off) => {
-      off();
-    });
-  });
+  onUnmount() {
+    this._handlers.forEach((off) => { off(); });
+  }
 
-  return (
-    <div class="flex h-full overflow-hidden">
-      <div class="flex-1 flex flex-col overflow-hidden min-w-0">
-        <div class="flex items-center px-3 h-7 text-[9px] text-subtle font-bold tracking-[0.12em] uppercase border-b border-border bg-section gap-2 shrink-0">
-          <span class="flex-1">Component</span>
-          <span>Renders</span>
-          <span class="w-12 text-right">Last</span>
-        </div>
+  render() {
+    const { registry } = this;
+    return (
+      <div class="flex h-full overflow-hidden">
+        <div class="flex-1 flex flex-col overflow-hidden min-w-0">
+          <div class="flex items-center px-3 h-7 text-[9px] text-subtle font-bold tracking-[0.12em] uppercase border-b border-border bg-section gap-2 shrink-0">
+            <span class="flex-1">Component</span>
+            <span>Renders</span>
+            <span class="w-12 text-right">Last</span>
+          </div>
 
-        <div class="flex-1 overflow-y-auto">
-          {() =>
-            components().length === 0 ? (
-              <EmptyState message="No components tracked. Add @Trace() to component classes." />
-            ) : (
-              components().map((c) => (
-                <ComponentRow
-                  key={c.id}
-                  entry={c}
-                  selected={() => selectedId() === c.id}
-                  onClick={() => {
-                    selectedId.update((id) => (id === c.id ? null : c.id));
-                  }}
-                />
-              ))
-            )
-          }
+          <div class="flex-1 overflow-y-auto">
+            {() =>
+              this.components.length === 0 ? (
+                <EmptyState message="No components tracked. Add @Trace() to component classes." />
+              ) : (
+                this.components.map((c) => (
+                  <ComponentRow
+                    key={c.id}
+                    entry={c}
+                    selected={() => this.selectedId === c.id}
+                    onClick={() => {
+                      this.selectedId =
+                        this.selectedId === c.id ? null : c.id;
+                    }}
+                  />
+                ))
+              )
+            }
+          </div>
         </div>
-      </div>
 
-      {() => {
-        const id = selectedId();
-        const entry = id
-          ? (components().find((c) => c.id === id) ?? null)
-          : null;
-        return entry ? (
-          <ComponentDetail entry={entry} signals={sigs()} />
-        ) : null;
-      }}
-    </div>
-  );
+        {() => {
+          const id = this.selectedId;
+          const entry = id
+            ? (this.components.find((c) => c.id === id) ?? null)
+            : null;
+          const sigs = id ? registry.getSignalsByComponent(id) : [];
+          return entry ? (
+            <ComponentDetail entry={entry} signals={sigs} />
+          ) : null;
+        }}
+      </div>
+    );
+  }
 }

package/src/plugins/signals/components/signal-detail.tsx

@@ -1,35 +1,43 @@
+
 import { PanelSection } from "@shared/panel-section";
 import { SidePanel } from "@shared/side-panel";
 import { time } from "@utils/format-time";
 import { formatValue } from "@utils/format-value";
 
+import { StatelessComponent } from "@praxisjs/core";
+import { Component } from "@praxisjs/decorators";
+
 import type { SignalEntry } from "@core/types";
 
-export function SignalDetail({ entry }: { entry: SignalEntry }) {
-  return (
-    <SidePanel width="260px">
-      <PanelSection label="History">
-        <div class="overflow-y-auto">
-          {[...entry.history].reverse().map((h, i) => (
-            <div
-              key={String(i)}
-              class="px-3 py-2 border-b border-border flex justify-between items-center gap-3"
-            >
-              <span class="font-mono text-[11px] text-text truncate">
-                {formatValue(h.value)}
-              </span>
-              <span class="text-[10px] text-subtle shrink-0 tabular-nums">
-                {time(h.timestamp, "ago")}
-              </span>
-            </div>
-          ))}
-          {entry.history.length === 0 && (
-            <p class="px-3 py-6 text-[11px] text-subtle text-center">
-              No history yet.
-            </p>
-          )}
-        </div>
-      </PanelSection>
-    </SidePanel>
-  );
+@Component()
+export class SignalDetail extends StatelessComponent<{ entry: SignalEntry }> {
+  render() {
+    const { entry } = this.props;
+    return (
+      <SidePanel width="260px">
+        <PanelSection label="History">
+          <div class="overflow-y-auto">
+            {[...entry.history].reverse().map((h, i) => (
+              <div
+                key={String(i)}
+                class="px-3 py-2 border-b border-border flex justify-between items-center gap-3"
+              >
+                <span class="font-mono text-[11px] text-text truncate">
+                  {formatValue(h.value)}
+                </span>
+                <span class="text-[10px] text-subtle shrink-0 tabular-nums">
+                  {time(h.timestamp, "ago")}
+                </span>
+              </div>
+            ))}
+            {entry.history.length === 0 && (
+              <p class="px-3 py-6 text-[11px] text-subtle text-center">
+                No history yet.
+              </p>
+            )}
+          </div>
+        </PanelSection>
+      </SidePanel>
+    );
+  }
 }

package/src/plugins/signals/components/signal-row.tsx

@@ -1,37 +1,41 @@
 import { time } from "@utils/format-time";
 import { formatValue } from "@utils/format-value";
 
+import { StatelessComponent } from "@praxisjs/core";
+import { Component } from "@praxisjs/decorators";
+
+
 import type { SignalEntry } from "@core/types";
 
-export function SignalRow({
-  entry,
-  selected,
-  onClick,
-}: {
+@Component()
+export class SignalRow extends StatelessComponent<{
   entry: SignalEntry;
   selected: boolean;
   onClick: () => void;
-}) {
-  return (
-    <div
-      onClick={onClick}
-      class={`relative grid grid-cols-[1.2fr_0.8fr_1fr_auto] items-center px-3 py-2 cursor-pointer border-b border-border transition-colors duration-100 ${
-        selected ? "bg-selected" : "hover:bg-section"
-      }`}
-    >
-      {selected && (
-        <span class="absolute left-0 top-0 bottom-0 w-[2px] bg-accent rounded-r" />
-      )}
-      <span class="text-accent font-mono text-[11px] truncate pl-1">
-        {entry.label}
-      </span>
-      <span class="text-muted text-[11px] truncate">{entry.componentName}</span>
-      <span class="text-text font-mono text-[11px] truncate">
-        {formatValue(entry.value)}
-      </span>
-      <span class="text-subtle text-[10px] text-right tabular-nums">
-        {time(entry.changedAt, "ago")}
-      </span>
-    </div>
-  );
+}> {
+  render() {
+    const { entry, selected, onClick } = this.props;
+    return (
+      <div
+        onClick={onClick}
+        class={`relative grid grid-cols-[1.2fr_0.8fr_1fr_auto] items-center px-3 py-2 cursor-pointer border-b border-border transition-colors duration-100 ${
+          selected ? "bg-selected" : "hover:bg-section"
+        }`}
+      >
+        {selected && (
+          <span class="absolute left-0 top-0 bottom-0 w-[2px] bg-accent rounded-r" />
+        )}
+        <span class="text-accent font-mono text-[11px] truncate pl-1">
+          {entry.label}
+        </span>
+        <span class="text-muted text-[11px] truncate">{entry.componentName}</span>
+        <span class="text-text font-mono text-[11px] truncate">
+          {formatValue(entry.value)}
+        </span>
+        <span class="text-subtle text-[10px] text-right tabular-nums">
+          {time(entry.changedAt, "ago")}
+        </span>
+      </div>
+    );
+  }
 }