@praxisjs/devtools 0.2.34 → 0.3.0

package/dist/ui/panel.js

@@ -0,0 +1,106 @@
+import e from "../assets/logo.svg.js";
+import { EllipsisVerticalIcon as t } from "../icons/ellipsis-vertical.js";
+import { PanelBottomIcon as n } from "../icons/panel-bottom.js";
+import { PanelLeftIcon as r } from "../icons/panel-left.js";
+import { PanelRightIcon as i } from "../icons/panel-right.js";
+import { PanelTopIcon as a } from "../icons/panel-top.js";
+import { XIcon as o } from "../icons/x.js";
+import { IconButton as s } from "./shared/icon-button.js";
+import { For as c, _$className as l, _$event as u, _$html as d, _$insert as f, _$insertOnly as p, _$onEvent as m, _$prop as h, _$reactive as g, _$reactiveOnly as _, _$scope as v } from "@praxisjs/runtime";
+import { jsx as y } from "@praxisjs/jsx/jsx-runtime";
+import { StatefulComponent as b } from "@praxisjs/core";
+import { Component as x, Emit as S, Prop as C, State as w } from "@praxisjs/decorators";
+//#region src/ui/panel.tsx
+var T = /* @__PURE__ */ u("onMouseDown"), E = /* @__PURE__ */ u("onClick"), D = /* @__PURE__ */ d("<div><div></div><div><div class=\"flex flex-col flex-1 w-full h-full overflow-hidden\"><div class=\"flex h-10 items-stretch border-b border-border bg-header shrink-0 px-2 gap-[2px]\"><div class=\"flex items-center gap-[6px] pr-3 mr-[2px] border-r border-border shrink-0\"><img class=\"h-[13px] w-[13px]\"><span class=\"text-[10px] font-bold text-accent tracking-widest uppercase\">praxisjs</span></div><div class=\"flex items-stretch flex-1\"></div><div class=\"flex items-center gap-[2px] shrink-0\"><div class=relative><!----></div><div class=\"w-px h-3 bg-border mx-1\"></div></div></div><div class=\"flex-1 overflow-hidden flex flex-col\">"), O = /* @__PURE__ */ d("<button><!---->"), k = /* @__PURE__ */ d("<span class=\"absolute bottom-0 left-0 right-0 h-[2px] bg-accent\">"), A = /* @__PURE__ */ d("<div class=\"absolute right-0 top-full mt-1 flex gap-[2px] bg-bg border border-border rounded-md shadow-lg p-1 z-10\">"), j = 180, M = 300, N = 240, P = 380, F = {
+	bottom: n,
+	top: a,
+	left: r,
+	right: i
+}, I = @x() class extends b {
+	@w() activeTab = "";
+	@w() dock = "bottom";
+	@w() dockMenuOpen = !1;
+	@w() bottomSize = M;
+	@w() vertSize = P;
+	@C() plugins = [];
+	@C() registry;
+	@S("onClose") handleClose() {}
+	onMount() {
+		this.plugins.length > 0 && (this.activeTab = this.plugins[0].id);
+	}
+	handleMouseDown(e) {
+		e.preventDefault();
+		let t = e.clientX, n = e.clientY, r = this.dock, i = r === "bottom" || r === "top" ? this.bottomSize : this.vertSize, a = (e) => {
+			let r = this.dock;
+			r === "bottom" ? this.bottomSize = Math.max(j, Math.min(window.innerHeight * .85, i + (n - e.clientY))) : r === "top" ? this.bottomSize = Math.max(j, Math.min(window.innerHeight * .85, i + (e.clientY - n))) : r === "left" ? this.vertSize = Math.max(N, Math.min(window.innerWidth * .6, i + (e.clientX - t))) : this.vertSize = Math.max(N, Math.min(window.innerWidth * .6, i + (t - e.clientX)));
+		}, o = () => {
+			document.removeEventListener("mousemove", a), document.removeEventListener("mouseup", o);
+		};
+		document.addEventListener("mousemove", a), document.addEventListener("mouseup", o);
+	}
+	render() {
+		{
+			let n = v(), r = D(), i = r.firstChild, a = i.nextSibling, u = a.firstChild.firstChild, d = u.nextSibling, b = u.firstChild, x = b.nextSibling, S = x.nextSibling, C = b.firstChild, w = S.firstChild, j = w.firstChild;
+			return l(i, () => {
+				let e = this.dock;
+				return e === "bottom" || e === "top" ? "h-1 cursor-[ns-resize] bg-transparent hover:bg-accent transition-colors duration-200" : "w-1 cursor-[ew-resize] bg-transparent hover:bg-accent transition-colors duration-200";
+			}, n), m(i, T, (e) => {
+				this.handleMouseDown(e);
+			}, n), h(C, "src", e, n), p(x, /* @__PURE__ */ y(c, {
+				each: () => this.plugins,
+				by: (e) => e.id,
+				children: (e) => () => {
+					let t = e();
+					{
+						let e = v(), n = O(), r = n.firstChild;
+						return f(n, t.label, r, e), g(r, () => this.activeTab === t.id ? k() : null, e), l(n, () => this.activeTab === t.id ? "relative flex items-center px-3 text-[11px] font-semibold text-accent cursor-pointer" : "flex items-center px-3 text-[11px] text-muted cursor-pointer hover:text-text transition-colors duration-150", e), m(n, E, () => {
+							this.activeTab = t.id;
+						}, e), n;
+					}
+				}
+			}), n), f(w, /* @__PURE__ */ y(s, {
+				title: "Dock position",
+				icon: t,
+				active: () => this.dockMenuOpen,
+				onClick: () => {
+					this.dockMenuOpen = !this.dockMenuOpen;
+				}
+			}), j, n), g(j, () => this.dockMenuOpen ? ((e) => {
+				let t = A();
+				return p(t, [
+					"bottom",
+					"top",
+					"left",
+					"right"
+				].map((e) => /* @__PURE__ */ y(s, {
+					title: `Dock ${e}`,
+					active: () => this.dock === e,
+					icon: F[e],
+					onClick: () => {
+						this.dock = e, this.dockMenuOpen = !1;
+					}
+				}, e)), e), t;
+			})(v()) : null, n), f(S, /* @__PURE__ */ y(s, {
+				title: "Close",
+				icon: o,
+				onClick: () => {
+					this.handleClose();
+				}
+			}), null, n), _(d, () => {
+				let e = this.plugins.find((e) => e.id === this.activeTab)?.component;
+				return e ? /* @__PURE__ */ y(e, { registry: this.registry }) : null;
+			}, n), l(a, () => {
+				let e = this.dock;
+				return e === "top" ? "w-full h-full bg-bg border-b border-border" : e === "left" ? "w-full h-full bg-bg border-r border-border" : e === "right" ? "w-full h-full bg-bg border-l border-border" : "w-full h-full bg-bg border-t border-border";
+			}, n), h(a, "style", () => {
+				let e = this.dock;
+				return e === "bottom" || e === "top" ? { height: `${this.bottomSize.toString()}px` } : { width: `${this.vertSize.toString()}px` };
+			}, n), l(r, () => {
+				let e = this.dock;
+				return e === "top" ? "flex flex-col-reverse fixed top-0 left-0 w-full z-[2147483647]" : e === "left" ? "flex flex-row-reverse fixed left-0 top-0 h-screen z-[2147483647]" : e === "right" ? "flex fixed right-0 top-0 h-screen z-[2147483647]" : "flex flex-col fixed bottom-0 left-0 w-full z-[2147483647]";
+			}, n), r;
+		}
+	}
+};
+//#endregion
+export { I as Panel };

package/dist/ui/shared/empty-state.js

@@ -0,0 +1,14 @@
+import { _$html as e, _$insertOnly as t, _$scope as n } from "@praxisjs/runtime";
+import { StatelessComponent as r } from "@praxisjs/core";
+import { Component as i } from "@praxisjs/decorators";
+//#region src/ui/shared/empty-state.tsx
+var a = /* @__PURE__ */ e("<div class=\"flex flex-col items-center justify-center gap-2 py-12\"><span class=\"text-subtle text-[20px] leading-none select-none font-mono\">—</span><p class=\"text-subtle text-[11px] text-center leading-relaxed max-w-[200px]\">"), o = @i() class extends r {
+	render() {
+		{
+			let e = n(), r = a(), i = r.firstChild.nextSibling;
+			return t(i, this.props.message, e), r;
+		}
+	}
+};
+//#endregion
+export { o as EmptyState };

package/dist/ui/shared/icon-button.js

@@ -0,0 +1,17 @@
+import { jsx as e } from "@praxisjs/jsx/jsx-runtime";
+import { StatelessComponent as t } from "@praxisjs/core";
+import { Component as n } from "@praxisjs/decorators";
+//#region src/ui/shared/icon-button.tsx
+var r = @n() class extends t {
+	render() {
+		let { title: t, active: n, icon: r, onClick: i } = this.props;
+		return /* @__PURE__ */ e("button", {
+			title: t,
+			onClick: i,
+			class: () => `w-[22px] h-[22px] flex items-center justify-center rounded-md text-[11px] cursor-pointer transition-colors duration-150 ${(typeof n == "function" ? n() : n) ? "text-accent bg-soft color-white" : "text-subtle hover:color-muted hover:bg-section"}`,
+			children: /* @__PURE__ */ e(r, {})
+		});
+	}
+};
+//#endregion
+export { r as IconButton };

package/dist/ui/shared/panel-section.js

@@ -0,0 +1,14 @@
+import { _$html as e, _$insert as t, _$insertOnly as n, _$scope as r } from "@praxisjs/runtime";
+import { StatelessComponent as i } from "@praxisjs/core";
+import { Component as a } from "@praxisjs/decorators";
+//#region src/ui/shared/panel-section.tsx
+var o = /* @__PURE__ */ e("<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\">"), s = @a() class extends i {
+	render() {
+		{
+			let e = r(), i = o(), a = i.firstChild;
+			return n(a, this.props.label, e), t(i, this.props.children, null, e), i;
+		}
+	}
+};
+//#endregion
+export { s as PanelSection };

package/dist/ui/shared/search-input.js

@@ -0,0 +1,17 @@
+import { _$event as e, _$html as t, _$onEvent as n, _$prop as r, _$scope as i } from "@praxisjs/runtime";
+import { StatelessComponent as a } from "@praxisjs/core";
+import { Component as o } from "@praxisjs/decorators";
+//#region src/ui/shared/search-input.tsx
+var s = /* @__PURE__ */ e("onInput"), c = /* @__PURE__ */ t("<input type=text class=\"w-full bg-input border border-border rounded-lg text-text text-[11px] px-3 py-[5px] outline-none box-border transition-shadow duration-150\">"), l = @o() class extends a {
+	render() {
+		let { placeholder: e, onInput: t } = this.props;
+		{
+			let a = i(), o = c();
+			return r(o, "placeholder", e, a), n(o, s, (e) => {
+				t(e.target.value);
+			}, a), o;
+		}
+	}
+};
+//#endregion
+export { l as SearchInput };

package/dist/ui/shared/side-panel.js

@@ -0,0 +1,15 @@
+import { _$html as e, _$insertOnly as t, _$prop as n, _$scope as r } from "@praxisjs/runtime";
+import { StatelessComponent as i } from "@praxisjs/core";
+import { Component as a } from "@praxisjs/decorators";
+//#region src/ui/shared/side-panel.tsx
+var o = /* @__PURE__ */ e("<div class=\"shrink-0 border-l border-border flex flex-col overflow-hidden\">"), s = @a() class extends i {
+	render() {
+		let { children: e, width: i = "280px" } = this.props;
+		{
+			let a = r(), s = o();
+			return t(s, e, a), n(s, "style", { width: i }, a), s;
+		}
+	}
+};
+//#endregion
+export { s as SidePanel };

package/dist/utils/format-time.js

@@ -0,0 +1,7 @@
+//#region src/utils/format-time.ts
+function e(e, t) {
+	let n = t ? ` ${t}` : "", r = Date.now() - e;
+	return r < 1e3 ? `${r.toString()}ms${n}` : r < 6e4 ? `${(r / 1e3).toFixed(1)}s${n}` : `${Math.floor(r / 6e4).toString()}m${n}`;
+}
+//#endregion
+export { e as time };

package/dist/utils/format-value.js

@@ -0,0 +1,14 @@
+//#region src/utils/format-value.ts
+function e(e) {
+	if (e === null) return "null";
+	if (e === void 0) return "undefined";
+	if (typeof e == "string") return `"${e}"`;
+	if (typeof e == "object") try {
+		return JSON.stringify(e);
+	} catch {
+		return "[object]";
+	}
+	return String(e);
+}
+//#endregion
+export { e as formatValue };

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@praxisjs/devtools",
-  "version": "0.2.34",
+  "version": "0.3.0",
   "type": "module",
+  "sideEffects": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -10,13 +11,20 @@
       "types": "./dist/index.d.ts"
     }
   },
+  "files": [
+    "dist",
+    "assets",
+    "src",
+    "!src/**/__tests__",
+    "CHANGELOG.md"
+  ],
   "dependencies": {
     "@unocss/reset": "^66.6.7",
-    "@praxisjs/core": "2.2.0",
-    "@praxisjs/decorators": "1.7.0",
-    "@praxisjs/jsx": "0.7.7",
-    "@praxisjs/runtime": "0.7.1",
-    "@praxisjs/shared": "0.3.1"
+    "@praxisjs/core": "2.3.0",
+    "@praxisjs/decorators": "2.0.0",
+    "@praxisjs/jsx": "0.8.0",
+    "@praxisjs/runtime": "0.8.0",
+    "@praxisjs/shared": "0.3.2"
   },
   "devDependencies": {
     "@types/node": "^25.9.1",

package/src/core/profiler.ts

@@ -0,0 +1,162 @@
+import {
+  setReactiveObserver,
+  type ComputedNode,
+  type EffectNode,
+  type ReactiveNode,
+  type ReactiveObserver,
+} from "@praxisjs/core/internal";
+
+import { EventBus } from "./event-bus";
+
+export interface OwnerStats {
+  /** Constructor name of the component the effects belong to, or "(no component)". */
+  name: string;
+  effectRuns: number;
+  effectMs: number;
+  /** Slowest single effect run, in ms. */
+  maxMs: number;
+}
+
+export interface ProfileSnapshot {
+  recording: boolean;
+  /** Milliseconds covered by the recording so far. */
+  duration: number;
+  writes: number;
+  effectRuns: number;
+  effectMs: number;
+  computeRuns: number;
+  computeMs: number;
+  /** Per component, busiest first. */
+  owners: OwnerStats[];
+}
+
+const UNOWNED = "(no component)";
+
+/**
+ * Records what the reactive graph does while recording: signal writes, computed recomputations
+ * and effect runs, with their cost, grouped by the component that created each effect. It installs
+ * itself as the graph's observer only while recording, so it costs nothing otherwise.
+ */
+export class Profiler implements ReactiveObserver {
+  readonly bus = new EventBus();
+
+  private recording = false;
+  private startedAt = 0;
+  private stoppedAt = 0;
+  private writes = 0;
+  private effectRuns = 0;
+  private effectMs = 0;
+  private computeRuns = 0;
+  private computeMs = 0;
+  private readonly byOwner = new Map<object | undefined, OwnerStats>();
+  private previous: ReactiveObserver | null = null;
+  private notifyScheduled = false;
+  private mutedDepth = 0;
+
+  get isRecording(): boolean {
+    return this.recording;
+  }
+
+  /** Runs `fn` without recording what it causes: the devtools panel updating itself. */
+  muted<T>(fn: () => T): T {
+    this.mutedDepth++;
+    try {
+      return fn();
+    } finally {
+      this.mutedDepth--;
+    }
+  }
+
+  start(): void {
+    if (this.recording) return;
+    this.reset();
+    this.recording = true;
+    this.startedAt = performance.now();
+    this.previous = setReactiveObserver(this);
+    this.changed();
+  }
+
+  stop(): void {
+    if (!this.recording) return;
+    this.recording = false;
+    this.stoppedAt = performance.now();
+    setReactiveObserver(this.previous);
+    this.previous = null;
+    this.changed();
+  }
+
+  reset(): void {
+    this.writes = 0;
+    this.effectRuns = 0;
+    this.effectMs = 0;
+    this.computeRuns = 0;
+    this.computeMs = 0;
+    this.byOwner.clear();
+    this.startedAt = this.stoppedAt = performance.now();
+    this.changed();
+  }
+
+  write(_node: ReactiveNode): void {
+    if (this.mutedDepth > 0) return;
+    this.writes++;
+    this.changed();
+  }
+
+  compute(_node: ComputedNode, ms: number): void {
+    if (this.mutedDepth > 0) return;
+    this.computeRuns++;
+    this.computeMs += ms;
+    this.changed();
+  }
+
+  effect(_node: EffectNode, ms: number, owner: object | undefined): void {
+    if (this.mutedDepth > 0) return;
+    this.effectRuns++;
+    this.effectMs += ms;
+    let stats = this.byOwner.get(owner);
+    if (stats === undefined) {
+      stats = { name: owner === undefined ? UNOWNED : owner.constructor.name, effectRuns: 0, effectMs: 0, maxMs: 0 };
+      this.byOwner.set(owner, stats);
+    }
+    stats.effectRuns++;
+    stats.effectMs += ms;
+    if (ms > stats.maxMs) stats.maxMs = ms;
+    this.changed();
+  }
+
+  /** Totals plus per-component stats merged by component name, busiest first. */
+  snapshot(): ProfileSnapshot {
+    const merged = new Map<string, OwnerStats>();
+    for (const stats of this.byOwner.values()) {
+      const entry = merged.get(stats.name);
+      if (entry === undefined) {
+        merged.set(stats.name, { ...stats });
+      } else {
+        entry.effectRuns += stats.effectRuns;
+        entry.effectMs += stats.effectMs;
+        entry.maxMs = Math.max(entry.maxMs, stats.maxMs);
+      }
+    }
+    return {
+      recording: this.recording,
+      duration: (this.recording ? performance.now() : this.stoppedAt) - this.startedAt,
+      writes: this.writes,
+      effectRuns: this.effectRuns,
+      effectMs: this.effectMs,
+      computeRuns: this.computeRuns,
+      computeMs: this.computeMs,
+      owners: [...merged.values()].sort((a, b) => b.effectMs - a.effectMs || b.effectRuns - a.effectRuns),
+    };
+  }
+
+  // Coalesced to one notification per task, so a burst of thousands of effect runs does not
+  // make the panel re-render thousands of times.
+  private changed(): void {
+    if (this.notifyScheduled) return;
+    this.notifyScheduled = true;
+    setTimeout(() => {
+      this.notifyScheduled = false;
+      this.bus.emit("profile:changed", null);
+    }, 0);
+  }
+}

package/src/core/registry.ts

@@ -1,4 +1,5 @@
 import { EventBus } from "./event-bus";
+import { Profiler } from "./profiler";
 
 import type {
   ComponentEntry,
@@ -25,9 +26,12 @@ export class Registry {
   }
 
   readonly bus = new EventBus();
+  readonly profiler = new Profiler();
 
   private readonly instanceIds = new WeakMap<object, string>();
   private readonly signals = new Map<string, SignalEntry>();
+  // Signal ids per component, so unmounting one component drops its signals without scanning all.
+  private readonly signalsByComponent = new Map<string, Set<string>>();
   private readonly components = new Map<string, ComponentEntry>();
   private readonly timeline: TimelineEntry[] = [];
 
@@ -58,6 +62,12 @@ export class Registry {
     };
 
     this.signals.set(id, entry);
+    let ids = this.signalsByComponent.get(componentId);
+    if (ids === undefined) {
+      ids = new Set();
+      this.signalsByComponent.set(componentId, ids);
+    }
+    ids.add(id);
     this.bus.emit("signal:registered", entry);
   }
 
@@ -73,20 +83,13 @@ export class Registry {
     const entry = this.signals.get(id);
     if (!entry) return;
 
-    const history = [
-      ...entry.history,
-      { value: newValue, timestamp: Date.now() },
-    ].slice(-MAX_HISTORY);
-
-    const updated: SignalEntry = {
-      ...entry,
-      value: newValue,
-      history,
-      changedAt: Date.now(),
-    };
+    const now = Date.now();
+    entry.history.push({ value: newValue, timestamp: now });
+    if (entry.history.length > MAX_HISTORY) entry.history.shift();
+    entry.value = newValue;
+    entry.changedAt = now;
 
-    this.signals.set(id, updated);
-    this.bus.emit("signal:changed", { entry: updated, oldValue });
+    this.bus.emit("signal:changed", { entry, oldValue });
     this.pushTimeline({
       type: "signal:change",
       label: `${entry.componentName}.${key}`,
@@ -158,9 +161,8 @@ export class Registry {
       entry.status = "unmounted";
       this.bus.emit("component:unmount", { ...entry });
       this.components.delete(id);
-      for (const [sid, s] of this.signals) {
-        if (s.componentId === id) this.signals.delete(sid);
-      }
+      for (const sid of this.signalsByComponent.get(id) ?? []) this.signals.delete(sid);
+      this.signalsByComponent.delete(id);
     }
   }
 
@@ -198,7 +200,10 @@ export class Registry {
   }
 
   getSignalsByComponent(componentId: string): SignalEntry[] {
-    return this.getSignals().filter((s) => s.componentId === componentId);
+    const out: SignalEntry[] = [];
+    // The index and the signal map are updated together, so every id here has an entry.
+    for (const id of this.signalsByComponent.get(componentId) ?? []) out.push(this.signals.get(id) as SignalEntry);
+    return out;
   }
 
   private pushTimeline(data: Omit<TimelineEntry, "id" | "timestamp">): void {
@@ -209,10 +214,7 @@ export class Registry {
     };
 
     this.timeline.push(entry);
-
-    if (this.timeline.length > MAX_TIMELINE) {
-      this.timeline.shift();
-    }
+    if (this.timeline.length > MAX_TIMELINE) this.timeline.shift();
 
     this.bus.emit("timeline:push", entry);
   }