@ogygia/devtools 0.0.0 → 0.11.0

package/dist/profiler/dom-diff.js

@@ -0,0 +1,121 @@
+// src/profiler/dom-diff.ts
+const TOKEN_RE = /<!--[\s\S]*?-->|<[^>]+>|[^<]+/g;
+function tokenize_html(s) {
+	const out = [];
+	let m;
+	TOKEN_RE.lastIndex = 0;
+	while (m = TOKEN_RE.exec(s)) {
+		const t = m[0];
+		if (t[0] !== "<" && t.length > 40) out.push(...t.split(/(\s+)/).filter(Boolean));
+		else out.push(t);
+	}
+	return out;
+}
+const MAX_CELLS = 2e6;
+function html_diff(a, b) {
+	if (a === b) return {
+		ops: [{
+			kind: "same",
+			text: a
+		}],
+		added: 0,
+		removed: 0,
+		truncated: false,
+		same_ratio: 1
+	};
+	const A = tokenize_html(a);
+	const B = tokenize_html(b);
+	let p = 0;
+	while (p < A.length && p < B.length && A[p] === B[p]) p++;
+	let s = 0;
+	while (s < A.length - p && s < B.length - p && A[A.length - 1 - s] === B[B.length - 1 - s]) s++;
+	const midA = A.slice(p, A.length - s);
+	const midB = B.slice(p, B.length - s);
+	const ops = [];
+	if (p) ops.push({
+		kind: "same",
+		text: A.slice(0, p).join("")
+	});
+	let truncated = false;
+	let same_mid = 0;
+	if (midA.length * midB.length > MAX_CELLS) {
+		truncated = true;
+		if (midA.length) ops.push({
+			kind: "del",
+			text: midA.join("")
+		});
+		if (midB.length) ops.push({
+			kind: "add",
+			text: midB.join("")
+		});
+	} else if (midA.length || midB.length) {
+		const n = midA.length;
+		const m = midB.length;
+		const L = new Uint32Array((n + 1) * (m + 1));
+		for (let i = n - 1; i >= 0; i--) for (let j = m - 1; j >= 0; j--) L[i * (m + 1) + j] = midA[i] === midB[j] ? L[(i + 1) * (m + 1) + j + 1] + 1 : Math.max(L[(i + 1) * (m + 1) + j], L[i * (m + 1) + j + 1]);
+		let i = 0;
+		let j = 0;
+		const push = (kind, text) => {
+			const last = ops[ops.length - 1];
+			if (last && last.kind === kind) last.text += text;
+			else ops.push({
+				kind,
+				text
+			});
+		};
+		while (i < n && j < m) if (midA[i] === midB[j]) {
+			push("same", midA[i]);
+			same_mid++;
+			i++;
+			j++;
+		} else if (L[(i + 1) * (m + 1) + j] >= L[i * (m + 1) + j + 1]) push("del", midA[i++]);
+		else push("add", midB[j++]);
+		while (i < n) push("del", midA[i++]);
+		while (j < m) push("add", midB[j++]);
+	}
+	if (s) {
+		const tail = A.slice(A.length - s).join("");
+		const last = ops[ops.length - 1];
+		if (last && last.kind === "same") last.text += tail;
+		else ops.push({
+			kind: "same",
+			text: tail
+		});
+	}
+	const added = ops.filter((o) => o.kind === "add").reduce((x, o) => x + o.text.length, 0);
+	const removed = ops.filter((o) => o.kind === "del").reduce((x, o) => x + o.text.length, 0);
+	const longer = Math.max(A.length, B.length) || 1;
+	return {
+		ops,
+		added,
+		removed,
+		truncated,
+		same_ratio: Math.round((p + s + same_mid) / longer * 1e3) / 1e3
+	};
+}
+/** Layout-shift rectangles normalized to the viewport, biggest shift first; boxes outside the
+*  viewport are clipped, a missing rect is skipped. */
+function shift_boxes(shifts, viewport) {
+	const [vw, vh] = viewport ?? [1, 1];
+	if (!(vw > 0 && vh > 0)) return [];
+	const clamp = (n) => Math.max(0, Math.min(1, n));
+	const out = [];
+	for (const s of shifts) {
+		const to = s.to ?? s.from;
+		if (!to) continue;
+		const from = s.from ?? to;
+		out.push({
+			x: clamp(to[0] / vw),
+			y: clamp(to[1] / vh),
+			w: clamp(to[2] / vw),
+			h: clamp(to[3] / vh),
+			fx: clamp(from[0] / vw),
+			fy: clamp(from[1] / vh),
+			value: s.value,
+			t: s.t,
+			...s.fp ? { fp: s.fp } : {}
+		});
+	}
+	return out.sort((a, b) => b.value - a.value);
+}
+export { html_diff, shift_boxes, tokenize_html };

package/dist/profiler/drill.d.ts

@@ -0,0 +1,89 @@
+import { Timeline } from "./timeline.js";
+import { LedgerLine } from "./ledger.js";
+import { Pattern } from "./patterns.js";
+export interface DrillNode {
+  label: string;
+  ms: number;
+  /** what the time was: CPU, waiting on calls, a gap nothing recorded, or a mix (a phase) */
+  kind: "render" | "phase" | "lane" | "cpu" | "wait" | "gap" | "line" | "more";
+  /** a place to open: `file:line` */
+  at?: string;
+  /** calls behind a wait row */
+  calls?: number;
+  /** a CPU owner row: its lowest and highest ms over the profiled renders (its noise) */
+  runs?: [number, number];
+  /** a CPU owner row: its ms in the COLD first render (module load, compile, first-call caches),
+   *  when that stands out against its warm renders */
+  cold?: number;
+  /** an HTTP wait row, on the calls' OWN clocks (summed over its calls, not the shared wall):
+   *  until the headers came, what the other side's Server-Timing claims of that (`theirs_ms`, over
+   *  `told` of the calls), the rest (`network_ms`: the network, TLS, their framework, a queue — or
+   *  all of it when they told nothing), and reading the body */
+  split?: {
+    calls: number;
+    theirs_ms?: number;
+    told?: number;
+    network_ms: number;
+    body_ms: number;
+    top?: {
+      name: string;
+      ms: number;
+    }[];
+  };
+  /** the page-data keys this row's lines feed (lineage), and whether anything reads each */
+  fills?: {
+    key: string;
+    read: boolean;
+  }[];
+  /** a wait row: the ms nothing else was in flight (the render waited on this endpoint alone);
+   *  0 = always beside other calls, so a faster answer alone saves nothing */
+  alone?: number;
+  /** WHY: the slow patterns (their kinds) found on this row's line, or its lines' — the where and
+   *  the why in one tree */
+  why?: string[];
+  /** a line row: its code, trimmed — how a compare tells a line an edit above renumbered (the same
+   *  code at another number) from one that changed */
+  code?: string;
+  children?: DrillNode[];
+}
+/** `lib/x.ts:42` or `lib/x.ts:42:7` → the file and the line; undefined when `at` names no line */
+export declare function at_line(at: string): {
+  file: string;
+  line: number;
+} | undefined;
+/** `GET host/api/product/P12` → `GET host/api/product/:id`: one row per endpoint, not per id */
+export declare function call_group(label: string): string;
+/**
+ * WHAT A ROW WAS FOR: the page-data keys its lines feed. A wait or a computation whose line (its
+ * own, or one of the lines under it) is among a key's source lines in its load (lineage +
+ * `key_sources`) fills that key. When every key it fills is read by nothing, the row's whole time
+ * bought nothing.
+ */
+export declare function tag_fills(root: DrillNode, keys: readonly {
+  key: string;
+  from: string | null;
+  lines?: number[];
+  names?: string[];
+  verdict: string;
+}[]): void;
+/** THE WORK FOR NOTHING: the rows of one render whose every key is unread (the topmost such row on
+ *  each path, so nothing counts twice), biggest first */
+export declare function unread_rows(root: DrillNode | undefined): {
+  label: string;
+  ms: number;
+  kind: DrillNode["kind"];
+  keys: string[];
+  at?: string;
+}[];
+/** a garbage maker, as the GC attribution names it: the line it is charged to and its pause time */
+export type GcMakerLite = {
+  name: string;
+  url: string;
+  line: number;
+  at?: {
+    path: string;
+    line: number;
+  };
+  gc_ms: number;
+};
+export declare function build_drill(tl: Timeline, ledger?: readonly LedgerLine[], patterns?: readonly Pick<Pattern, "kind" | "sites">[], gc_makers?: readonly GcMakerLite[], renders_of?: ReadonlyMap<string, number>, owner_runs?: Readonly<Record<string, number[]>>, cold_owners?: ReadonlyMap<string, number>, wait_runs?: Readonly<Record<string, number[]>>): DrillNode | undefined;