@ogygia/devtools 0.0.0 → 0.11.0

package/dist/devtools/leftovers.js

@@ -0,0 +1,319 @@
+import { devtools_switched_on, testing_lean } from "@ogygia/core/insights";
+// src/devtools/leftovers.ts
+/**
+* WHAT AN ISLAND LEFT RUNNING AFTER IT LEFT THE PAGE. The router keeps the document across
+* navigations, so an interval an island started, or a listener it put on `window` or `document`, and
+* never took back outlives the island: it keeps running (often on state that is gone), holds the
+* island's closure in memory, and every navigation back to its page adds another one.
+*
+* Dev tool only (installed from the runtime's boot behind the DEVTOOLS gate, before any island
+* wakes): `setInterval` / `clearInterval` and `addEventListener` / `removeEventListener` on `window`
+* and `document` are watched. Every other target passes straight through (one identity check). Each
+* watched registration keeps the first files of its stack; the island whose code made it is decided
+* only when the report asks (`owned_leftovers`, pure). A registration counts as left behind when an
+* instance of its island existed when it was made and none of the instances alive now did: the one
+* that made it is gone, and it is still set.
+*
+* Only the island's own code, one or two calls away, owns a registration: Svelte's own listeners
+* (its event delegation on `document`, set while a component's module evaluates) sit deeper in the
+* stack, and are Svelte's to keep.
+*/
+const intervals = /* @__PURE__ */ new Map();
+const listeners = /* @__PURE__ */ new Map();
+const islands = /* @__PURE__ */ new Map();
+let own_file = "";
+let installed = false;
+/** The file URL of each stack line (Chrome `at f (url:1:2)` / `at url:1:2`, Firefox and Safari
+*  `f@url:1:2`), without its position or query. No regex: this runs on every watched registration. */
+function stack_files(stack) {
+	const out = [];
+	let from = 0;
+	while (from < stack.length) {
+		let end = stack.indexOf("\n", from);
+		if (end === -1) end = stack.length;
+		let line = stack.slice(from, end).trim();
+		from = end + 1;
+		if (line.endsWith(")")) {
+			const open = line.lastIndexOf("(");
+			if (open !== -1) line = line.slice(open + 1, -1);
+		} else {
+			const at = line.lastIndexOf("@");
+			if (at !== -1) line = line.slice(at + 1);
+			else if (line.startsWith("at ")) line = line.slice(3);
+		}
+		for (let k = 0; k < 2; k++) {
+			const c = line.lastIndexOf(":");
+			if (c === -1) break;
+			const tail = line.slice(c + 1);
+			if (!tail.length || tail.charCodeAt(0) < 48 || tail.charCodeAt(0) > 57) break;
+			line = line.slice(0, c);
+		}
+		const q = line.indexOf("?");
+		if (q !== -1) line = line.slice(0, q);
+		if (line.includes("://")) out.push(line);
+	}
+	return out;
+}
+/** The first `n` files above the watcher (the caller, and its caller). */
+function callers(n = 2) {
+	const files = stack_files((/* @__PURE__ */ new Error()).stack ?? "");
+	const out = [];
+	for (const f of files) {
+		if (f === own_file) continue;
+		out.push(f);
+		if (out.length === n) break;
+	}
+	return out;
+}
+const DEVTOOLS_LAZY = typeof __OGYGIA_DEVTOOLS_LAZY__ !== "undefined" ? __OGYGIA_DEVTOOLS_LAZY__ : false;
+/** Watch intervals and the global listeners. Once per page; a no-op off the browser. */
+function watch_leftovers() {
+	if (installed || typeof window === "undefined" || typeof EventTarget === "undefined") return;
+	if (DEVTOOLS_LAZY && !devtools_switched_on()) return;
+	if (testing_lean()) return;
+	installed = true;
+	own_file = stack_files((/* @__PURE__ */ new Error()).stack ?? "")[0] ?? "";
+	const set_interval = window.setInterval;
+	const clear_interval = window.clearInterval;
+	window.setInterval = function(fn, ms, ...args) {
+		if (typeof fn !== "function") return set_interval.call(window, fn, ms, ...args);
+		const reg = {
+			kind: "interval",
+			frames: callers(),
+			t: performance.now(),
+			fires: 0
+		};
+		const id = set_interval.call(window, function(...a) {
+			reg.fires++;
+			reg.last = performance.now();
+			return fn.apply(this, a);
+		}, ms, ...args);
+		intervals.set(id, reg);
+		return id;
+	};
+	window.clearInterval = function(id) {
+		intervals.delete(id);
+		return clear_interval.call(window, id);
+	};
+	const proto = EventTarget.prototype;
+	const add = proto.addEventListener;
+	const remove = proto.removeEventListener;
+	proto.addEventListener = function(type, fn, opts) {
+		const on = this ?? window;
+		if ((on === window || on === document) && fn) {
+			const o = typeof opts === "object" && opts ? opts : null;
+			if (!o?.once && !o?.signal?.aborted) note_listener(on, type, fn, o ? !!o.capture : !!opts, o?.signal);
+		}
+		if (fn && SCROLL_TYPES.has(type)) note_scroll_listener(on, type, fn, opts);
+		if (fn && type === "unload" && on === window) note_unload_listener(fn);
+		return add.call(on, type, fn, opts);
+	};
+	proto.removeEventListener = function(type, fn, opts) {
+		const on = this ?? window;
+		if ((on === window || on === document) && fn) forget_listener(on, type, fn, typeof opts === "object" && opts ? !!opts.capture : !!opts);
+		if (fn && SCROLL_TYPES.has(type)) forget_scroll_listener(on, type, fn);
+		if (fn && type === "unload" && on === window) {
+			const i = unload_regs.findIndex((r) => r.fn === fn);
+			if (i !== -1) unload_regs.splice(i, 1);
+		}
+		return remove.call(on, type, fn, opts);
+	};
+}
+const SCROLL_TYPES = /* @__PURE__ */ new Set([
+	"wheel",
+	"mousewheel",
+	"touchstart",
+	"touchmove"
+]);
+const scroll_regs = [];
+function note_scroll_listener(on, type, fn, opts) {
+	const passive = typeof opts === "object" && opts ? opts.passive : void 0;
+	const root = on === window || on === document || on === document.documentElement || on === document.body;
+	if (passive === true || root && passive !== false || scroll_regs.length >= 40) return;
+	if (scroll_regs.some((r) => r.target === on && r.type === type && r.fn === fn)) return;
+	let desc = on === window ? "window" : on === document ? "document" : "";
+	if (!desc && on instanceof Element) {
+		let cls = "";
+		for (const c of on.classList) if (!c.startsWith("svelte-")) {
+			cls = c;
+			break;
+		}
+		desc = `${on.tagName.toLowerCase()}${on.id ? `#${on.id}` : cls ? `.${cls}` : ""}`;
+	}
+	const frames = callers(6);
+	if (!frames.length) return;
+	scroll_regs.push({
+		type,
+		on: desc || "an element",
+		forced: passive === false,
+		frames,
+		target: on,
+		fn
+	});
+}
+function forget_scroll_listener(on, type, fn) {
+	const i = scroll_regs.findIndex((r) => r.target === on && r.type === type && r.fn === fn);
+	if (i !== -1) scroll_regs.splice(i, 1);
+}
+const unload_regs = [];
+function note_unload_listener(fn) {
+	if (unload_regs.length >= 20 || unload_regs.some((r) => r.fn === fn)) return;
+	const frames = callers(6);
+	if (frames.length) unload_regs.push({
+		fn,
+		frames
+	});
+}
+/** The window `unload` listeners still attached, as scroll registrations (the same owner rule). */
+function unload_listeners() {
+	return unload_regs.map((r) => ({
+		type: "unload",
+		on: "window",
+		forced: false,
+		frames: r.frames
+	}));
+}
+/** The scroll-holding listeners still attached (an element's, while it is in the page). */
+function scroll_listeners() {
+	return scroll_regs.filter((r) => !(r.target instanceof Element) || r.target.isConnected).map(({ target: _t, fn: _f, ...r }) => r);
+}
+/** Each one's owner, the island whose file is the nearest of its callers (as owned_leftovers
+*  decides), else the first caller's file. PURE. */
+function owned_scroll_listeners(regs, isls, name_of) {
+	const stem = (url) => {
+		const file = url.slice(url.lastIndexOf("/") + 1);
+		const dot = file.indexOf(".");
+		return dot === -1 ? file : file.slice(0, dot);
+	};
+	const named = isls.map((i) => ({
+		...i,
+		name: name_of(i.entry)
+	}));
+	return regs.map((r) => {
+		let owner = "";
+		for (const f of r.frames) {
+			const hit = named.find((i) => i.urls.includes(f)) ?? (f.endsWith(".svelte") ? named.find((i) => i.name === stem(f)) : void 0);
+			if (hit) {
+				owner = hit.name;
+				break;
+			}
+		}
+		if (!owner) {
+			const f = r.frames[0] ?? "";
+			owner = f ? f.slice(f.lastIndexOf("/") + 1) : "a script";
+		}
+		return {
+			owner,
+			type: r.type,
+			on: r.on,
+			forced: r.forced
+		};
+	});
+}
+function note_listener(on, type, fn, capture, signal) {
+	const list = listeners.get(fn) ?? [];
+	if (list.some((r) => r.on === on && r.type === type && r.capture === capture)) return;
+	const frames = callers();
+	list.push({
+		kind: "listener",
+		on,
+		target: on === window ? "window" : "document",
+		type,
+		capture,
+		frames,
+		t: performance.now(),
+		fires: 0
+	});
+	listeners.set(fn, list);
+	signal?.addEventListener("abort", () => forget_listener(on, type, fn, capture), { once: true });
+}
+function forget_listener(on, type, fn, capture) {
+	const list = listeners.get(fn);
+	if (!list) return;
+	const i = list.findIndex((r) => r.on === on && r.type === type && r.capture === capture);
+	if (i !== -1) list.splice(i, 1);
+	if (!list.length) listeners.delete(fn);
+}
+/** An island instance starts (its hydrate begins): `entry` and its file locations. */
+function leftover_island_seen(el, entry, urls) {
+	let isl = islands.get(entry);
+	if (!isl) islands.set(entry, isl = {
+		urls,
+		first: performance.now(),
+		els: /* @__PURE__ */ new Map()
+	});
+	for (const u of urls) if (!isl.urls.includes(u)) isl.urls.push(u);
+	if (!isl.els.has(el)) isl.els.set(el, performance.now());
+}
+/** An island instance left the page (its region disconnected and its app was disposed). */
+function leftover_island_gone(el, entry) {
+	const isl = islands.get(entry);
+	if (!isl || !isl.els.delete(el)) return;
+	isl.gone = performance.now();
+}
+/** Everything watched, as it stands now (for `owned_leftovers`). */
+function leftover_state() {
+	const regs = [...intervals.values()];
+	for (const list of listeners.values()) for (const { on: _, ...r } of list) regs.push(r);
+	const out = [];
+	for (const [entry, isl] of islands) {
+		const live = [];
+		for (const [el, t] of isl.els) if (el.isConnected) live.push(t);
+		out.push({
+			entry,
+			urls: isl.urls,
+			live,
+			first: isl.first,
+			...isl.gone !== void 0 ? { gone: isl.gone } : {}
+		});
+	}
+	return {
+		regs,
+		islands: out
+	};
+}
+/**
+* Per island, what it left behind (PURE). A registration's owner is the island whose file is one of
+* its first two callers: by location (a build's file, the entry), else by name (dev serves the
+* component's own `.svelte` file, named as the island is). Left behind: an instance of that island
+* was alive before it was made, and every instance alive now started after it.
+*/
+function owned_leftovers(regs, isls, name_of, now) {
+	const named = isls.map((i) => ({
+		...i,
+		name: name_of(i.entry)
+	}));
+	const stem = (url) => {
+		const file = url.slice(url.lastIndexOf("/") + 1);
+		const dot = file.indexOf(".");
+		return dot === -1 ? file : file.slice(0, dot);
+	};
+	const by_name = /* @__PURE__ */ new Map();
+	for (const r of regs) {
+		let owners = [];
+		for (const f of r.frames) {
+			owners = named.filter((i) => i.urls.includes(f));
+			if (!owners.length && f.endsWith(".svelte")) owners = named.filter((i) => i.name === stem(f));
+			if (owners.length) break;
+		}
+		if (!owners.length) continue;
+		if (!owners.some((i) => i.first <= r.t) || owners.some((i) => i.live.some((t) => t <= r.t))) continue;
+		if (!owners.some((i) => i.gone !== void 0 && i.gone >= r.t)) continue;
+		const name = owners[0].name;
+		const l = by_name.get(name) ?? {
+			name,
+			entry: owners[0].entry,
+			intervals: 0,
+			listeners: [],
+			fires: 0
+		};
+		if (r.kind === "interval") {
+			l.intervals++;
+			l.fires += r.fires;
+			if (r.last !== void 0) l.last_ago = Math.min(l.last_ago ?? Infinity, Math.round(now - r.last));
+		} else l.listeners.push(`${r.target} '${r.type}'`);
+		by_name.set(name, l);
+	}
+	return [...by_name.values()];
+}
+export { leftover_island_gone, leftover_island_seen, leftover_state, owned_leftovers, owned_scroll_listeners, scroll_listeners, stack_files, unload_listeners, watch_leftovers };

package/dist/devtools/names.d.ts

@@ -0,0 +1 @@
+export declare function ensure_region_names(): Promise<void>;

package/dist/devtools/names.js

@@ -0,0 +1,34 @@
+import { names } from "virtual:ogygia/devtools-meta";
+// src/devtools/names.ts
+/**
+* The islands' component names for the dock and the testing API: a build carries them in
+* `virtual:ogygia/devtools-meta`; the dev server serves them live (`/__ogygia_devtools_meta`, the
+* registry as it is now). Both land on `window.__ogygia_region_names`, which regions.ts reads.
+* Once per page; best effort (a hash stands in for a name it cannot find).
+*/
+let loading = null;
+function ensure_region_names() {
+	if (loading) return loading;
+	loading = (async () => {
+		if (typeof window === "undefined") return;
+		if (names && Object.keys(names).length) {
+			window.__ogygia_region_names = {
+				...names,
+				...window.__ogygia_region_names
+			};
+			return;
+		}
+		try {
+			const r = await fetch("/__ogygia_devtools_meta");
+			if (!r.ok) return;
+			const meta = await r.json();
+			if (meta?.names) window.__ogygia_region_names = {
+				...meta.names,
+				...window.__ogygia_region_names
+			};
+			if (meta?.bytes) window.__ogygia_region_bytes = meta.bytes;
+		} catch {}
+	})();
+	return loading;
+}
+export { ensure_region_names };

package/dist/devtools/page.d.ts

@@ -0,0 +1,96 @@
+import { StylesFinding, StylesReport } from "./styles.js";
+import { CacheProbe } from "./cache-headers.js";
+import { SinceLoad } from "./since-load.js";
+import { CpuSummary, Failure, HeldOpen, HoleBatch, HoleFailure, HoleWait, PageInput, PageReport, PartedVital, RegionFact, VitalPart } from "@ogygia/core/insights";
+import { BeaconPage } from "@ogygia/core/internal/instruments";
+export interface PageView {
+  page: BeaconPage;
+  report: PageReport;
+  regions: RegionFact[];
+  /** the page-load CPU trace, analyzed (null: the browser could not sample, or a navigation since) */
+  cpu: CpuSummary | null;
+  /** the last in-app navigation: the report covers only what happened since it */
+  nav: {
+    to: string;
+    t: number;
+  } | null;
+  /** what this browser cannot measure (a finding needing it cannot appear here) */
+  unmeasured: string[];
+  /** against the previous load of this same page (this tab, this session): what changed */
+  since: SinceLoad | null;
+  /** the split vitals' parts (the document's own load only): what the next load's "since" compares */
+  parts?: Partial<Record<PartedVital, VitalPart[]>>;
+  /** after an in-app navigation: islands the router KEPT from the page before (the same island with
+   *  the same props on both pages — still awake, no code, no hydrate). Without them, a page whose
+   *  islands were all reused read as "nothing woke" */
+  kept?: {
+    fp: string;
+    name: string;
+  }[];
+  /** each hole's first answer since the page (or the navigation): its wait, split where the
+   *  browser and the server timed it — the Page tab's hole waterfall */
+  holes?: HoleWait[];
+  /** holes whose answer never came (the waterfall's red rows) */
+  holes_failed?: HoleFailure[];
+}
+export declare function region_facts(): RegionFact[];
+/** This page's hydration failures, each island once: after an in-app navigation, the ones since it,
+ *  and an earlier one only while its region is still on the page and still not awake (a kept
+ *  island). Every visit to a page with a broken island failed it again: without this, the tab listed
+ *  one failure per visit, by fingerprint, on pages that do not have the island at all. */
+export declare function failures(since?: number): Failure[];
+/** How long each hole's fallback showed before its first answer (since the last navigation), and
+ *  whether it sits on the first screen. */
+export declare function hole_waits(since?: number, fcp?: number): HoleWait[];
+/** Batch requests that carried fewer holes than they were sent for (since `since`). */
+export declare function hole_batches(since?: number): HoleBatch[];
+/** Holes whose answer never came: the last failure of each (no retry after it), unless an answer
+ *  arrived since. In a build the runtime says nothing and the page just keeps the fallback. */
+export declare function hole_failures(since?: number): HoleFailure[];
+/** The CPU summary of a kept trace, against this page's island windows. */
+export declare function cpu_of(page: BeaconPage, trace: unknown): CpuSummary | null;
+/** The last in-app navigation (the router's body swap): where to, and when it started. */
+/** This document's streamed promises, each by its `page.data` key (the seed) and when its resolve
+ *  arrived (the inline bootstrap's stamp): what held the document open. Null: nothing streamed. */
+export declare function held_open(): HeldOpen | null;
+/** The router's last navigation that SWAPPED the page (its start time, its address). One that started
+ *  and never finished — it fell back to a full load the browser did not make (a test holding document
+ *  loads back), or a later one overtook it — changed nothing: this is still the page it was. */
+export declare function last_nav(): {
+  to: string;
+  t: number;
+} | null;
+/**
+ * After an in-app navigation the beacon's visit keeps the whole document's story on one clock: the
+ * first page's islands, shifts and long tasks, then this page's. The tab is about THIS page, so its
+ * events are cut to those since the navigation and shifted to start there; the paints and the
+ * vitals stay the document's (a soft navigation paints nothing new the browser reports).
+ */
+export declare function since_nav(page: BeaconPage, t: number): PageInput;
+/**
+ * What THIS browser cannot measure (Safari has no layout-shift, long-task or interaction timing;
+ * only Chromium has the JS sampler and long animation frames). A finding that needs one of them
+ * cannot appear here — its absence is not a clean bill, and the tab says so.
+ */
+export declare function unmeasured(cpu_off?: string | null): string[];
+/** the load's CPU with the source's lines, in every list the tabs and findings quote */
+export declare function summary_lines(s: CpuSummary | null): CpuSummary | null;
+export declare function read_page(): PageView | null;
+declare global {
+  interface Window {
+    __ogygia_page?: () => PageView | null;
+    /** the Record tab's last session report (tests read what the tab shows) */
+    __ogygia_session?: import("@ogygia/core/insights").SessionReport;
+    /** the Page tab's styles check, run fresh (tests read what the tab shows) */
+    __ogygia_styles?: () => Promise<{
+      report: StylesReport;
+      findings: StylesFinding[];
+    }>;
+    /** the Page tab's cache check (how the host caches the content-named files), run fresh */
+    __ogygia_cache?: () => Promise<{
+      probes: CacheProbe[];
+      findings: StylesFinding[];
+    }>;
+  }
+}
+export declare function install_page_hook(): void;