@ogygia/core 0.0.0 → 0.11.0

package/dist/insights/page-assets.js

@@ -0,0 +1,608 @@
+import { find_unscoped } from "../unscoped-css.js";
+// src/insights/page-assets.ts
+/**
+* THE PAGE'S WEIGHT — every file the rendered document makes the browser fetch at start, found in
+* the HTML and weighed through the app. Not only the islands: the page's own `<script>`s, every
+* `modulepreload` (a Kit-hydrated page lists its whole start graph there), the modules an inline
+* script imports (Kit's start/app entries), each module's STATIC imports followed to the end,
+* stylesheets (and which of them block the first paint), fonts and images preloaded or in the
+* markup. A page that ships 6 MB of JS shows 6 MB here, whatever made it.
+*
+* Two halves: `scan_assets` (pure: HTML in, references out — string scanning, no regex) and
+* `weigh_assets` (fetches each once through the app, decoded + gzip-estimated sizes, follows static
+* imports, bounded in time and count). The score (score.ts) reads the totals.
+*/
+/** Attributes of one start tag (`<tag a="1" b c='2'>`), names lower-cased; valueless → ''. */
+function tag_attrs(tag) {
+	const out = /* @__PURE__ */ new Map();
+	let i = 1;
+	while (i < tag.length && !is_space(tag.charCodeAt(i)) && tag[i] !== ">" && tag[i] !== "/") i++;
+	while (i < tag.length) {
+		while (i < tag.length && (is_space(tag.charCodeAt(i)) || tag[i] === "/")) i++;
+		if (i >= tag.length || tag[i] === ">") break;
+		const ns = i;
+		while (i < tag.length && !is_space(tag.charCodeAt(i)) && tag[i] !== "=" && tag[i] !== ">" && tag[i] !== "/") i++;
+		const name = tag.slice(ns, i).toLowerCase();
+		while (i < tag.length && is_space(tag.charCodeAt(i))) i++;
+		let value = "";
+		if (tag[i] === "=") {
+			i++;
+			while (i < tag.length && is_space(tag.charCodeAt(i))) i++;
+			const q = tag[i];
+			if (q === "\"" || q === "'") {
+				const end = tag.indexOf(q, i + 1);
+				value = tag.slice(i + 1, end === -1 ? tag.length : end);
+				i = end === -1 ? tag.length : end + 1;
+			} else {
+				const vs = i;
+				while (i < tag.length && !is_space(tag.charCodeAt(i)) && tag[i] !== ">") i++;
+				value = tag.slice(vs, i);
+			}
+		}
+		if (name && !out.has(name)) out.set(name, decode_entities(value));
+	}
+	return out;
+}
+function is_space(c) {
+	return c === 32 || c === 9 || c === 10 || c === 13 || c === 12;
+}
+function decode_entities(s) {
+	if (s.indexOf("&") === -1) return s;
+	return s.split("&amp;").join("&").split("&quot;").join("\"").split("&#39;").join("'");
+}
+const FONT_EXT = /* @__PURE__ */ new Set([
+	"woff",
+	"woff2",
+	"ttf",
+	"otf"
+]);
+const IMG_EXT = /* @__PURE__ */ new Set([
+	"png",
+	"jpg",
+	"jpeg",
+	"gif",
+	"webp",
+	"avif",
+	"svg",
+	"ico"
+]);
+function ext_of(url) {
+	let end = url.length;
+	const q = url.indexOf("?");
+	if (q !== -1) end = q;
+	const h = url.indexOf("#");
+	if (h !== -1 && h < end) end = h;
+	const path = url.slice(0, end);
+	const dot = path.lastIndexOf(".");
+	return dot > path.lastIndexOf("/") ? path.slice(dot + 1).toLowerCase() : "";
+}
+function kind_of(url, as) {
+	if (as === "script" || as === "module") return "script";
+	if (as === "style") return "style";
+	if (as === "font") return "font";
+	if (as === "image") return "image";
+	const e = ext_of(url);
+	if (e === "js" || e === "mjs") return "script";
+	if (e === "css") return "style";
+	if (FONT_EXT.has(e)) return "font";
+	if (IMG_EXT.has(e)) return "image";
+	return "other";
+}
+/** `import("x")` / `import('x')` specifiers in a script's text (Kit's inline start). */
+function dynamic_imports(text) {
+	const out = [];
+	let at = text.indexOf("import(");
+	while (at !== -1) {
+		let i = at + 7;
+		while (i < text.length && is_space(text.charCodeAt(i))) i++;
+		const q = text[i];
+		if (q === "\"" || q === "'" || q === "`") {
+			const end = text.indexOf(q, i + 1);
+			if (end !== -1) {
+				const spec = text.slice(i + 1, end);
+				if (spec && spec.indexOf("${") === -1) out.push(spec);
+			}
+		}
+		at = text.indexOf("import(", at + 7);
+	}
+	return out;
+}
+/**
+* The STATIC imports of a bundled module (`import{a}from"./x.js"`, `import"./y.js"`,
+* `export*from"./z.js"`): specifiers after `from` / a bare `import` that look like module paths
+* (relative or absolute, ending in .js/.mjs). Bundler output writes them plainly; a string that
+* merely contains such text inflates nothing that does not exist — every hit is fetched, and a
+* miss is dropped.
+*/
+function static_imports(code) {
+	const out = /* @__PURE__ */ new Set();
+	const grab = (from) => {
+		let i = from;
+		while (i < code.length && is_space(code.charCodeAt(i))) i++;
+		const q = code[i];
+		if (q !== "\"" && q !== "'") return;
+		const end = code.indexOf(q, i + 1);
+		if (end === -1 || end - i > 400) return;
+		const spec = code.slice(i + 1, end);
+		const e = ext_of(spec);
+		if ((spec.startsWith("./") || spec.startsWith("../") || spec.startsWith("/")) && (e === "js" || e === "mjs")) out.add(spec);
+	};
+	for (const word of ["from", "import"]) {
+		let at = code.indexOf(word);
+		while (at !== -1) {
+			const before = at > 0 ? code.charCodeAt(at - 1) : 32;
+			const ok = !(is_ident(before) || before === 46);
+			const next = code[at + word.length];
+			if (ok && next !== "(" && next !== void 0 && !is_ident(code.charCodeAt(at + word.length))) grab(at + word.length);
+			at = code.indexOf(word, at + word.length);
+		}
+	}
+	return [...out];
+}
+function is_ident(c) {
+	return c >= 48 && c <= 57 || c >= 65 && c <= 90 || c >= 97 && c <= 122 || c === 95 || c === 36;
+}
+/**
+* A Kit-hydrated page's route nodes: its inline start script passes `node_ids: [0, 5]` to
+* `kit.start`, and `app.js` imports each node on demand (`import("../nodes/5.<hash>.js")`) — the
+* page's OWN code, the heaviest part, reachable only through that dynamic import. Empty when the
+* page is not Kit-hydrated.
+*/
+function kit_node_ids(script) {
+	const at = script.indexOf("node_ids:");
+	if (at === -1) return [];
+	const open = script.indexOf("[", at);
+	const close = script.indexOf("]", open);
+	if (open === -1 || close === -1 || open - at > 20) return [];
+	const out = [];
+	for (const part of script.slice(open + 1, close).split(",")) {
+		const n = Number(part.trim());
+		if (Number.isInteger(n) && n >= 0) out.push(n);
+	}
+	return out;
+}
+/** Every file the document asks for at start, in document order, deduped by URL (the first,
+*  strongest ask wins: a blocking stylesheet stays blocking). Inline script/style bytes counted. */
+function scan_assets(html) {
+	const refs = [];
+	const seen = /* @__PURE__ */ new Set();
+	const add = (url, kind, via, blocking) => {
+		if (!url) return;
+		const u = url.trim();
+		if (!u || u.startsWith("data:") || u.startsWith("blob:") || u.startsWith("#") || u.startsWith("javascript:")) return;
+		if (seen.has(u)) return;
+		seen.add(u);
+		refs.push({
+			url: u,
+			kind,
+			blocking,
+			via
+		});
+	};
+	const inline = {
+		script: 0,
+		style: 0
+	};
+	let kit_nodes = [];
+	const head_end = html.indexOf("</head>");
+	let i = html.indexOf("<");
+	while (i !== -1) {
+		const c = html.charCodeAt(i + 1);
+		if (html.startsWith("<!--", i)) {
+			const end = html.indexOf("-->", i + 4);
+			i = end === -1 ? -1 : html.indexOf("<", end + 3);
+			continue;
+		}
+		if (!(c >= 97 && c <= 122 || c >= 65 && c <= 90)) {
+			i = html.indexOf("<", i + 1);
+			continue;
+		}
+		const close = html.indexOf(">", i);
+		if (close === -1) break;
+		const tag = html.slice(i, close + 1);
+		const name = tag_name(tag);
+		const in_head = head_end !== -1 && i < head_end;
+		if (name === "script") {
+			const a = tag_attrs(tag);
+			const end = html.indexOf("<\/script", close);
+			const body = end === -1 ? "" : html.slice(close + 1, end);
+			const type = (a.get("type") ?? "").toLowerCase();
+			const is_js = type === "" || type === "module" || type === "text/javascript" || type === "application/javascript";
+			if (a.has("src")) {
+				if (is_js) {
+					const n = refs.length;
+					add(a.get("src"), "script", "script", type !== "module" && !a.has("async") && !a.has("defer") && in_head);
+					if (refs.length > n && a.has("data-ogygia-runtime")) refs[n].runtime = true;
+				}
+			} else if (is_js) {
+				inline.script += body.length;
+				for (const spec of dynamic_imports(body)) add(spec, "script", "inline-import", false);
+				if (!kit_nodes.length) kit_nodes = kit_node_ids(body);
+				if (type === "module") for (const spec of static_imports(body)) add(spec, "script", "inline-import", false);
+			}
+			i = end === -1 ? -1 : html.indexOf("<", end + 8);
+			continue;
+		}
+		if (name === "style") {
+			const end = html.indexOf("</style", close);
+			if (end !== -1) inline.style += end - close - 1;
+			i = end === -1 ? -1 : html.indexOf("<", end + 7);
+			continue;
+		}
+		if (name === "link") {
+			const a = tag_attrs(tag);
+			const rel = words((a.get("rel") ?? "").toLowerCase());
+			const href = a.get("href");
+			if (rel.includes("stylesheet")) {
+				const media = (a.get("media") ?? "").toLowerCase();
+				if (!a.has("disabled")) add(href, "style", "stylesheet", media === "" || media === "all" || media === "screen");
+			} else if (rel.includes("modulepreload")) add(href, "script", "modulepreload", false);
+			else if (rel.includes("preload")) add(href, kind_of(href ?? "", (a.get("as") ?? "").toLowerCase()), "preload", false);
+			else if (rel.includes("icon")) add(href, "image", "img", false);
+		} else if (name === "img") {
+			const a = tag_attrs(tag);
+			if ((a.get("loading") ?? "").toLowerCase() !== "lazy") add(a.get("src"), "image", "img", false);
+		}
+		i = html.indexOf("<", close + 1);
+	}
+	return {
+		refs,
+		inline,
+		kit_nodes
+	};
+}
+function words(s) {
+	const out = [];
+	let w = "";
+	for (let i = 0; i < s.length; i++) if (is_space(s.charCodeAt(i))) {
+		if (w) out.push(w);
+		w = "";
+	} else w += s[i];
+	if (w) out.push(w);
+	return out;
+}
+function tag_name(tag) {
+	let e = 1;
+	while (e < tag.length && !is_space(tag.charCodeAt(e)) && tag[e] !== ">" && tag[e] !== "/") e++;
+	return tag.slice(1, e).toLowerCase();
+}
+/** Resolve a reference against the page (and a module's import against its module). */
+function resolve_ref(ref, base) {
+	try {
+		const u = new URL(ref, base);
+		if (u.protocol !== "http:" && u.protocol !== "https:") return null;
+		return u.href;
+	} catch {
+		return null;
+	}
+}
+async function weigh_assets(opts) {
+	const { refs, inline, kit_nodes } = scan_assets(opts.html);
+	const node_marks = kit_nodes.map((n) => `/nodes/${n}.`);
+	const deadline = Date.now() + (opts.budget_ms ?? 6e3);
+	const max_files = opts.max_files ?? 400;
+	const origin = new URL(opts.page_url).origin;
+	const queue = [];
+	const queued = /* @__PURE__ */ new Set();
+	const push = (r) => {
+		const abs = resolve_ref(r.url, opts.page_url);
+		if (!abs || queued.has(abs)) return;
+		queued.add(abs);
+		queue.push({
+			...r,
+			url: abs
+		});
+	};
+	for (const r of refs) push(r);
+	const extra = opts.extra ?? [];
+	for (const r of extra) if (!r.lazy) push(r);
+	for (const r of extra) if (r.lazy) push(r);
+	const assets = [];
+	const missed = [];
+	const missed_why = [];
+	const miss = (url, why) => {
+		missed.push(url);
+		missed_why.push({
+			url,
+			why
+		});
+	};
+	let at = 0;
+	const worker = async () => {
+		while (at < queue.length && Date.now() < deadline && assets.length + missed.length < max_files) {
+			const r = queue[at++];
+			let w = opts.cache.get(r.url);
+			if (w === void 0) {
+				const got = await weigh_one(r, opts, deadline, origin);
+				if ("miss" in got) {
+					if (got.miss.startsWith("status ")) opts.cache.set(r.url, null);
+					miss(r.url, got.miss);
+					continue;
+				}
+				w = got;
+				opts.cache.set(r.url, w);
+			}
+			if (!w) {
+				miss(r.url, "an error status before (cached)");
+				continue;
+			}
+			const contains = r.kind === "script" || r.kind === "style" ? opts.contents_of?.(r.url) : null;
+			assets.push({
+				...r,
+				bytes: w.bytes,
+				wire: w.wire,
+				...contains?.length ? { contains } : {},
+				...w.vary ? { vary: w.vary } : {}
+			});
+			if (r.kind === "script" && w.imports) for (const spec of w.imports) push({
+				url: spec,
+				kind: "script",
+				blocking: false,
+				via: "static-import",
+				...r.lazy ? { lazy: true } : {},
+				...r.phase ? { phase: true } : {}
+			});
+			if (r.runtime && w.dynamic) for (const spec of w.dynamic) push({
+				url: spec,
+				kind: "script",
+				blocking: false,
+				via: "runtime-phase",
+				lazy: true,
+				phase: true
+			});
+			if (node_marks.length && w.dynamic) {
+				for (const spec of w.dynamic) if (node_marks.some((m) => spec.includes(m))) push({
+					url: spec,
+					kind: "script",
+					blocking: false,
+					via: "route-node"
+				});
+			}
+		}
+	};
+	while (at < queue.length && Date.now() < deadline && assets.length + missed.length < max_files) await Promise.all(Array.from({ length: Math.min(6, queue.length - at) }, worker));
+	for (let k = at; k < queue.length; k++) miss(queue[k].url, assets.length + missed.length >= max_files ? "file cap" : "budget");
+	const html_bytes = byte_length(opts.html);
+	const html_wire = opts.gzip ? opts.gzip(new TextEncoder().encode(opts.html)) : html_bytes;
+	const t = {
+		js: 0,
+		js_wire: 0,
+		css: 0,
+		css_wire: 0,
+		font: 0,
+		image: 0,
+		wire: html_wire,
+		lazy_js: 0,
+		blocking: 0,
+		blocking_count: 0,
+		js_files: 0
+	};
+	for (const a of assets) {
+		if (a.lazy) {
+			if (a.kind === "script") t.lazy_js += a.bytes;
+			continue;
+		}
+		t.wire += a.wire;
+		if (a.kind === "script") {
+			t.js += a.bytes;
+			t.js_wire += a.wire;
+			t.js_files++;
+		} else if (a.kind === "style") {
+			t.css += a.bytes;
+			t.css_wire += a.wire;
+		} else if (a.kind === "font") t.font += a.wire;
+		else if (a.kind === "image") t.image += a.wire;
+		if (a.blocking) {
+			t.blocking += a.bytes;
+			t.blocking_count++;
+		}
+	}
+	const unscoped = find_unscoped(inline_style_text(opts.html)).map((u) => ({
+		...u,
+		in: "the document"
+	}));
+	for (const a of assets) if (a.kind === "style") {
+		for (const u of opts.cache.get(a.url)?.unscoped ?? []) if (!unscoped.some((x) => x.file === u.file)) unscoped.push({
+			...u,
+			in: a.url
+		});
+	}
+	return {
+		assets: assets.sort((x, y) => y.bytes - x.bytes),
+		missed,
+		...missed_why.length ? { missed_why } : {},
+		...unscoped.length ? { unscoped } : {},
+		html: {
+			bytes: html_bytes,
+			wire: html_wire
+		},
+		inline,
+		totals: t
+	};
+}
+/** The text of every inline `<style>` in the document (only there is a marker the build's: a page
+*  that quotes one in its content is not a fallback). */
+function inline_style_text(html) {
+	let out = "";
+	let at = html.indexOf("<style");
+	while (at !== -1) {
+		const open = html.indexOf(">", at);
+		const close = open === -1 ? -1 : html.indexOf("</style", open);
+		if (close === -1) break;
+		out += html.slice(open + 1, close) + "\n";
+		at = html.indexOf("<style", close);
+	}
+	return out;
+}
+const MIN_CHANGE = 5120;
+function assets_diff(a, b) {
+	const key = (x) => x.contains?.length ? "c:" + [...x.contains].sort().join("|") : "u:" + x.url;
+	const scripts = (p) => {
+		const m = /* @__PURE__ */ new Map();
+		for (const x of p.assets) if (x.kind === "script") m.set(key(x), x);
+		return m;
+	};
+	const A = scripts(a);
+	const B = scripts(b);
+	const name = (x) => {
+		const q = x.url.indexOf("?");
+		const path = q === -1 ? x.url : x.url.slice(0, q);
+		return path.slice(path.lastIndexOf("/") + 1);
+	};
+	const change = (x, av, bv) => ({
+		name: name(x),
+		...x.contains?.length ? { contains: x.contains.slice(0, 4) } : {},
+		a: av,
+		b: bv,
+		...x.lazy ? { lazy: true } : {}
+	});
+	const added = [];
+	const removed = [];
+	const grew = [];
+	const shrank = [];
+	const to_start = [];
+	const to_later = [];
+	for (const [k, x] of B) {
+		const was = A.get(k);
+		if (!was) {
+			if (x.bytes >= MIN_CHANGE) added.push(change(x, 0, x.bytes));
+			continue;
+		}
+		if (x.bytes - was.bytes >= MIN_CHANGE) grew.push(change(x, was.bytes, x.bytes));
+		else if (was.bytes - x.bytes >= MIN_CHANGE) shrank.push(change(x, was.bytes, x.bytes));
+		if (!!was.lazy !== !!x.lazy && x.bytes >= MIN_CHANGE) (x.lazy ? to_later : to_start).push(change(x, was.bytes, x.bytes));
+	}
+	for (const [k, x] of A) if (!B.has(k) && x.bytes >= MIN_CHANGE) removed.push(change(x, x.bytes, 0));
+	const by = (s) => s.sort((p, q) => Math.abs(q.b - q.a) - Math.abs(p.b - p.a)).slice(0, 5);
+	const big = (s) => s.sort((p, q) => q.b - p.b).slice(0, 5);
+	return {
+		js: {
+			a: a.totals.js,
+			b: b.totals.js
+		},
+		lazy_js: {
+			a: a.totals.lazy_js,
+			b: b.totals.lazy_js
+		},
+		added: by(added),
+		removed: by(removed),
+		grew: by(grew),
+		shrank: by(shrank),
+		to_start: big(to_start),
+		to_later: big(to_later)
+	};
+}
+/**
+* SCRIPTS LOADED AT RUNTIME — what the browser fetched that neither the HTML nor any module's
+* imports name: a script that loads more scripts (a CDN component library fetching its parts, a tag
+* manager, a runtime's on-demand chunk). The server cannot see them coming; the profiler user's own
+* visit saw them. `until`: the end of "at start" on the visit's clock (a lazy island woken by a
+* scroll later does not count). Null when there are none.
+*/
+function runtime_scripts(assets, resources, origin, until) {
+	const named = new Set(assets.map((a) => a.url));
+	const by = /* @__PURE__ */ new Map();
+	let files = 0;
+	let bytes = 0;
+	let wire = 0;
+	let entries = 0;
+	const seen = /* @__PURE__ */ new Set();
+	for (const r of resources) {
+		if (r.type !== "script" || r.start > until || named.has(r.url) || seen.has(r.url) || r.url.includes("/__profiler/")) continue;
+		seen.add(r.url);
+		const size = r.size ?? 0;
+		files++;
+		bytes += size;
+		wire += r.transfer || Math.round(size / 3);
+		const who = serves(r.url, origin);
+		const g = by.get(who) ?? {
+			who,
+			files: 0,
+			bytes: 0
+		};
+		g.files++;
+		g.bytes += size;
+		by.set(who, g);
+		if (who === "this app" && r.url.slice(r.url.lastIndexOf("/") + 1).startsWith("og-region.")) entries++;
+	}
+	return files ? {
+		files,
+		bytes,
+		wire,
+		by: [...by.values()].sort((a, b) => b.bytes - a.bytes),
+		...entries ? { island_entries: entries } : {}
+	} : null;
+}
+/** `this app`, a CDN package (`@scope/name` after `/npm/`), or the host. */
+function serves(url, origin) {
+	let u;
+	try {
+		u = new URL(url);
+	} catch {
+		return "unknown";
+	}
+	if (u.origin === origin) return "this app";
+	const at = u.pathname.indexOf("/npm/");
+	if (at !== -1) {
+		const parts = u.pathname.slice(at + 5).split("/");
+		const pkg = parts[0].startsWith("@") ? `${parts[0]}/${parts[1] ?? ""}` : parts[0];
+		const bare = pkg.lastIndexOf("@") > 0 ? pkg.slice(0, pkg.lastIndexOf("@")) : pkg;
+		return `${u.host} ${bare}`;
+	}
+	return u.host;
+}
+function byte_length(s) {
+	let n = 0;
+	for (let i = 0; i < s.length; i++) {
+		const c = s.charCodeAt(i);
+		if (c < 128) n += 1;
+		else if (c < 2048) n += 2;
+		else if (c >= 55296 && c <= 56319) {
+			n += 4;
+			i++;
+		} else n += 3;
+	}
+	return n;
+}
+async function weigh_one(r, opts, deadline, origin) {
+	const left = deadline - Date.now();
+	if (left < 100) return { miss: "budget" };
+	try {
+		const res = await Promise.race([opts.fetch_url(r.url.startsWith(origin) ? r.url.slice(origin.length) || "/" : r.url), new Promise((ok) => setTimeout(() => ok(null), left))]);
+		if (!res) return { miss: "timeout" };
+		if (!res.ok) return { miss: `status ${res.status}` };
+		const enc = res.headers.get("content-encoding");
+		const len = Number(res.headers.get("content-length"));
+		const buf = new Uint8Array(await res.arrayBuffer());
+		const wire = enc && Number.isFinite(len) && len > 0 ? len : opts.gzip && buf.byteLength > 256 ? opts.gzip(buf) : buf.byteLength;
+		const w = {
+			bytes: buf.byteLength,
+			wire
+		};
+		if (r.kind === "script") {
+			const code = new TextDecoder().decode(buf);
+			const imports = [];
+			for (const spec of static_imports(code)) {
+				const abs = resolve_ref(spec, r.url);
+				if (abs) imports.push(abs);
+			}
+			if (imports.length) w.imports = imports;
+			const dynamic = [];
+			for (const spec of dynamic_imports(code)) {
+				const abs = resolve_ref(spec, r.url);
+				if (abs) dynamic.push(abs);
+			}
+			if (dynamic.length) w.dynamic = dynamic;
+		} else if (r.kind === "style") {
+			const u = find_unscoped(new TextDecoder().decode(buf));
+			if (u.length) w.unscoped = u;
+		} else if (r.kind === "font") {
+			const vary = res.headers.get("vary");
+			if (vary) w.vary = vary.slice(0, 120);
+		}
+		return w;
+	} catch (e) {
+		return { miss: "error: " + (e instanceof Error ? e.message : String(e)).slice(0, 120) };
+	}
+}
+export { assets_diff, dynamic_imports, kit_node_ids, resolve_ref, runtime_scripts, scan_assets, static_imports, tag_attrs, weigh_assets };