@praxisjs/devtools 0.2.34 → 0.3.0

package/dist/icons/panel-top.js

@@ -0,0 +1,28 @@
+import { _$element as e, _$template as t } from "@praxisjs/runtime";
+import { StatelessComponent as n } from "@praxisjs/core";
+import { Component as r } from "@praxisjs/decorators";
+//#region src/icons/panel-top.tsx
+var i = /* @__PURE__ */ t(() => e("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"
+}, [e("rect", {
+	width: "18",
+	height: "18",
+	x: "3",
+	y: "3",
+	rx: "2"
+}, null), e("path", { d: "M3 9h18" }, null)])), a = @r() class extends n {
+	render() {
+		return i();
+	}
+};
+//#endregion
+export { a as PanelTopIcon };

package/dist/icons/x.js

@@ -0,0 +1,22 @@
+import { _$element as e, _$template as t } from "@praxisjs/runtime";
+import { StatelessComponent as n } from "@praxisjs/core";
+import { Component as r } from "@praxisjs/decorators";
+//#region src/icons/x.tsx
+var i = /* @__PURE__ */ t(() => e("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"
+}, [e("path", { d: "M18 6 6 18" }, null), e("path", { d: "m6 6 12 12" }, null)])), a = @r() class extends n {
+	render() {
+		return i();
+	}
+};
+//#endregion
+export { a as XIcon };

package/dist/index.d.ts

@@ -1,4 +1,8 @@
 import { ComponentElement } from '@praxisjs/shared';
+import { ComputedNode } from '@praxisjs/core/internal';
+import { EffectNode } from '@praxisjs/core/internal';
+import { ReactiveNode } from '@praxisjs/core/internal';
+import { ReactiveObserver } from '@praxisjs/core/internal';
 import { RootComponent } from '@praxisjs/core/internal';
 
 export declare interface ComponentEntry {
@@ -14,8 +18,14 @@ export declare interface ComponentEntry {
 export declare const ComponentsPlugin: DevtoolsPlugin;
 
 /**
- * Tracks state, computed values, and methods in the devtools panel.
- * Supports @State() fields, @Computed() getters, and methods.
+ * Tracks state, props, computed values and methods in the devtools panel.
+ *
+ * - Fields with an accessor (`@State`, `@Prop`, `@Persisted`, …) are observed reactively, so a
+ *   change is reported whatever caused it, including a parent passing a new prop.
+ * - Fields holding a `computed()` report each new value.
+ * - `@Computed()` getters report each new value.
+ * - Methods report every call with its arguments, result and duration; for a method that returns a
+ *   promise, when the promise settles.
  */
 export declare function Debug(options?: DebugOptions): DebugDecorator;
 
@@ -26,7 +36,18 @@ declare interface DebugDecorator {
 }
 
 export declare interface DebugOptions {
+    /** Name shown in the panel. Defaults to the member name. */
     label?: string;
+    /**
+     * Also logs every change (fields, getters) or call (methods) to the console. `"trace"` logs with
+     * a stack trace, which shows what caused it.
+     */
+    log?: boolean | "trace";
+    /**
+     * Pauses in the debugger on a change or call. A function decides per change: it receives the new
+     * and the previous value (for methods, the arguments and `undefined`).
+     */
+    break?: boolean | ((next: unknown, prev: unknown) => boolean);
 }
 
 export declare const DevTools: {
@@ -68,12 +89,71 @@ export declare interface LifecycleEvent {
     timestamp: number;
 }
 
+export declare 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 declare const PerformancePlugin: DevtoolsPlugin;
+
+/**
+ * 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 declare class Profiler implements ReactiveObserver {
+    readonly bus: EventBus;
+    private recording;
+    private startedAt;
+    private stoppedAt;
+    private writes;
+    private effectRuns;
+    private effectMs;
+    private computeRuns;
+    private computeMs;
+    private readonly byOwner;
+    private previous;
+    private notifyScheduled;
+    private mutedDepth;
+    get isRecording(): boolean;
+    /** Runs `fn` without recording what it causes: the devtools panel updating itself. */
+    muted<T>(fn: () => T): T;
+    start(): void;
+    stop(): void;
+    reset(): void;
+    write(_node: ReactiveNode): void;
+    compute(_node: ComputedNode, ms: number): void;
+    effect(_node: EffectNode, ms: number, owner: object | undefined): void;
+    /** Totals plus per-component stats merged by component name, busiest first. */
+    snapshot(): ProfileSnapshot;
+    private changed;
+}
+
+export declare 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[];
+}
+
 export declare class Registry {
     private static _instance;
     static get instance(): Registry;
     readonly bus: EventBus;
+    readonly profiler: Profiler;
     private readonly instanceIds;
     private readonly signals;
+    private readonly signalsByComponent;
     private readonly components;
     private readonly timeline;
     private getInstanceId;
@@ -114,6 +194,19 @@ export declare type TimelineEventType = 'signal:change' | 'component:render' | '
 
 export declare const TimelinePlugin: DevtoolsPlugin;
 
-export declare function Trace(): <T extends new (...args: any[]) => RootComponent<Record<string, any>>>(constructor: T, _context: ClassDecoratorContext) => T;
+export declare function Trace(options?: TraceOptions): <T extends new (...args: any[]) => RootComponent<Record<string, any>>>(constructor: T, context: ClassDecoratorContext) => T;
+
+/**
+ * Instruments a component class to report renders and lifecycle events
+ * to the devtools panel.
+ *
+ * @Trace({ slow: 4 })   // also warn when a render takes more than 4 ms
+ * @Component()
+ * class MyComponent extends StatefulComponent { ... }
+ */
+export declare interface TraceOptions {
+    /** Warns in the console when a render of this component takes longer than this many ms. */
+    slow?: number;
+}
 
 export { }