playthrough 0.2.0 → 0.3.0

package/src/read-Bg9XVTtn.js

@@ -0,0 +1,278 @@
+// src/read.ts
+function readPage(page) {
+	return page.evaluate(read);
+}
+async function unhovered(page, look) {
+	await page.evaluate(hovering, false);
+	try {
+		return await look();
+	} finally {
+		await page.evaluate(hovering, true);
+	}
+}
+function hovering(on) {
+	const kept = window;
+	if (on) {
+		for (const [rule, selector] of kept.__playthroughHover ?? []) rule.selectorText = selector;
+		kept.__playthroughHover = [];
+		return;
+	}
+	const set = kept.__playthroughHover = [];
+	const visit = (rules) => {
+		for (const rule of rules) {
+			if (rule instanceof CSSStyleRule && rule.selectorText.includes(":hover")) {
+				set.push([rule, rule.selectorText]);
+				rule.selectorText = rule.selectorText.replaceAll(":hover", ":not(*)");
+			}
+			if ("cssRules" in rule) visit(rule.cssRules);
+		}
+	};
+	for (const sheet of [...document.styleSheets, ...document.adoptedStyleSheets]) try {
+		visit(sheet.cssRules);
+	} catch {}
+	getComputedStyle(document.body).color;
+	for (const animation of document.getAnimations()) if (animation instanceof CSSTransition) animation.finish();
+}
+function read() {
+	const ROLES = /^(button|link|dialog|alertdialog|group|radiogroup|table|grid|treegrid|heading|status|alert|textbox|searchbox|combobox|checkbox|radio|switch|slider|listbox|option|tab|menu|menuitem|img)$/;
+	const HOLDERS = /^(dialog|alertdialog|status|alert|group|radiogroup|table|grid|treegrid|listbox|menu|box)$/;
+	const NAMED_BY_WORDS = /^(button|link|heading|option|tab|menuitem|radio|checkbox|switch)$/;
+	const MARKED = /^(B|STRONG|I|EM|U|S|MARK|SMALL|CODE|KBD|SPAN|ABBR|TIME|SUB|SUP|Q|DATA|VAR|DEL|INS|BDI|CITE|DFN)$/;
+	const INPUTS = {
+		checkbox: "checkbox",
+		radio: "radio",
+		range: "slider",
+		button: "button",
+		submit: "button",
+		reset: "button",
+		search: "searchbox"
+	};
+	const TAGS = {
+		BUTTON: "button",
+		SUMMARY: "button",
+		DIALOG: "dialog",
+		TABLE: "table",
+		SELECT: "combobox",
+		TEXTAREA: "textbox",
+		OUTPUT: "status",
+		FIELDSET: "group",
+		IMG: "img",
+		H1: "heading",
+		H2: "heading",
+		H3: "heading",
+		H4: "heading",
+		H5: "heading",
+		H6: "heading"
+	};
+	const TABLES = "table, [role=table], [role=grid], [role=treegrid]";
+	const mirror = window.rrwebRecord?.record?.mirror;
+	const plain = (words) => words.replace(/\s+/g, " ").trim();
+	const cut = (words, most) => words.length > most ? words.slice(0, most - 1).trimEnd() + "…" : words;
+	const style = (element) => getComputedStyle(element);
+	function roleOf(element) {
+		const given = element.getAttribute("role")?.trim().split(/\s+/)[0];
+		if (given) return given;
+		if (element.tagName === "A") return element.hasAttribute("href") ? "link" : void 0;
+		if (element.tagName === "INPUT") {
+			const type = (element.getAttribute("type") ?? "text").toLowerCase();
+			return type === "hidden" ? void 0 : INPUTS[type] ?? "textbox";
+		}
+		return TAGS[element.tagName];
+	}
+	const apart = (element, side) => {
+		const looks = style(element);
+		return !looks.display.startsWith("inline") || parseFloat(looks[`margin${side}`]) + parseFloat(looks[`padding${side}`]) > 0 ? " " : "";
+	};
+	function spoken(element) {
+		let words = "";
+		for (const node of element.childNodes) if (node.nodeType === Node.TEXT_NODE) words += node.textContent;
+		else if (node instanceof HTMLBRElement) words += " ";
+		else if (node instanceof Element) words += apart(node, "Left") + spoken(node) + apart(node, "Right");
+		return words;
+	}
+	function ownWords(element) {
+		let words = "";
+		for (const node of element.childNodes) if (node.nodeType === Node.TEXT_NODE) words += node.textContent;
+		else if (node instanceof Element && MARKED.test(node.tagName) && !called(node) && !panel(node)) {
+			const looks = style(node);
+			if (looks.display === "none" || looks.visibility === "hidden") continue;
+			words += apart(node, "Left") + ownWords(node) + apart(node, "Right");
+		}
+		return plain(words);
+	}
+	const labelOf = (element) => {
+		const by = element.getAttribute("aria-labelledby");
+		return plain(by ? by.split(/\s+/).map((id) => document.getElementById(id)?.textContent ?? "").join(" ") : element.getAttribute("aria-label") ?? "");
+	};
+	function nameOf(element, role) {
+		let name = labelOf(element);
+		if (!name && NAMED_BY_WORDS.test(role)) name = plain(spoken(element));
+		if (!name && "labels" in element) name = plain([...element.labels ?? []].map((label) => label.textContent).join(" "));
+		if (!name) name = element.getAttribute("alt") ?? element.getAttribute("title") ?? element.getAttribute("placeholder") ?? "";
+		return cut(plain(name), 120);
+	}
+	function called(element) {
+		const role = roleOf(element);
+		if (!role || !ROLES.test(role)) return void 0;
+		const name = nameOf(element, role);
+		return /group$/.test(role) && !name ? void 0 : {
+			role,
+			name
+		};
+	}
+	const labelledPart = (element) => (/^(SECTION|ASIDE|NAV|FORM|ARTICLE)$/.test(element.tagName) || /^(region|form|navigation|complementary|search|article)$/.test(element.getAttribute("role") ?? "")) && !!labelOf(element);
+	function panel(element) {
+		const box = element.getBoundingClientRect();
+		if (box.width < 12 || box.height < 12 || box.width * box.height > .9 * innerWidth * innerHeight) return false;
+		if (/^(HTML|BODY|MAIN|TR|TBODY|THEAD|TD|TH)$/.test(element.tagName)) return false;
+		if (labelledPart(element)) return true;
+		const looks = style(element);
+		const background = looks.backgroundColor;
+		const around = element.parentElement && style(element.parentElement).backgroundColor;
+		if (!/^(transparent|rgba\(0, 0, 0, 0\))$/.test(background) && background !== around) return true;
+		if (looks.boxShadow !== "none") return true;
+		return [
+			"Top",
+			"Right",
+			"Bottom",
+			"Left"
+		].filter((side) => parseFloat(looks[`border${side}Width`]) > 0 && looks[`border${side}Style`] !== "none").length >= 3;
+	}
+	const firstWords = (element) => {
+		const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+		for (let node; node = walker.nextNode();) if (plain(node.textContent ?? "")) return plain(node.textContent ?? "");
+		return "";
+	};
+	const allWords = (element) => {
+		const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+		const words = [];
+		for (let node; node = walker.nextNode();) words.push(node.textContent ?? "");
+		return plain(words.join(" "));
+	};
+	function headingsOf(table) {
+		const cells = [...table.querySelectorAll("th, [role=columnheader]")].filter((cell) => cell.closest(TABLES) === table);
+		const row = cells[0]?.parentElement;
+		const headings = cells.filter((cell) => cell.parentElement === row).map((cell) => {
+			const box = cell.getBoundingClientRect();
+			return {
+				name: cut(plain(spoken(cell)), 120),
+				from: box.left,
+				to: box.right,
+				bottom: box.bottom
+			};
+		}).filter((heading) => heading.name && heading.to > heading.from);
+		return headings.length ? headings : void 0;
+	}
+	const ITEMS = "li, tr, [role=listitem], [role=row]";
+	const alikeBeside = (element) => typeof element.className === "string" && !!element.className && [...element.parentElement?.children ?? []].some((other) => other !== element && other.tagName === element.tagName && other.className === element.className);
+	const lists = /* @__PURE__ */ new Map();
+	const items = [];
+	const itemOf = (inItem) => {
+		if (!inItem) return void 0;
+		if (inItem.index === void 0) {
+			const { element } = inItem;
+			const box = element.getBoundingClientRect();
+			const list = lists.get(element.parentElement) ?? lists.set(element.parentElement, lists.size).get(element.parentElement);
+			const node = mirror?.getId(element);
+			items.push({
+				role: element.matches("tr, [role=row]") ? "row" : "listitem",
+				words: "",
+				box: {
+					x: Math.round(box.left),
+					y: Math.round(box.top),
+					width: Math.round(box.width),
+					height: Math.round(box.height)
+				},
+				page: {
+					x: Math.round(box.left + scrollX),
+					y: Math.round(box.top + scrollY)
+				},
+				list,
+				...inItem.holder !== void 0 && { holder: inItem.holder },
+				...node !== void 0 && node >= 0 && { node }
+			});
+			inItem.index = items.length - 1;
+		}
+		return inItem.index;
+	};
+	const things = [];
+	function walk(element, holder, parent, headings, inItem) {
+		for (const child of element.children) {
+			const looks = style(child);
+			if (looks.display === "none" || looks.visibility === "hidden" || Number(looks.opacity) === 0) continue;
+			const box = child.getBoundingClientRect();
+			const item = child.matches(ITEMS) || alikeBeside(child) ? {
+				element: child,
+				...holder !== void 0 && { holder },
+				...inItem && { outer: inItem }
+			} : inItem;
+			const under = child.matches(TABLES) ? headingsOf(child) : headings;
+			const own = plain([...child.childNodes].filter((node) => node.nodeType === Node.TEXT_NODE).map((node) => node.textContent).join(" "));
+			let known = called(child);
+			if (!known && !own && panel(child)) {
+				const name = labelOf(child) || firstWords(child);
+				if (name) known = {
+					role: "box",
+					name: cut(name, 120)
+				};
+			}
+			let inside = holder;
+			let readParent = parent;
+			if ((known || own) && box.width >= 1 && box.height >= 1) {
+				const middle = box.left + box.width / 2;
+				const column = headings?.find((heading) => middle >= heading.from && middle < heading.to && box.top >= heading.bottom - 2)?.name;
+				const node = mirror?.getId(child);
+				const words = cut(own ? ownWords(child) : "", 300);
+				const wordsInside = known && /^(box|menu)$/.test(known.role) ? cut(allWords(child), 300) : void 0;
+				const ofItem = itemOf(item);
+				for (let around = item; around && words; around = around.outer) {
+					const kept = items[itemOf(around)];
+					kept.words = cut(kept.words ? `${kept.words} ${words}` : words, 300);
+				}
+				things.push({
+					role: known?.role ?? "text",
+					name: known?.name ?? cut(words, 120),
+					words,
+					...wordsInside && wordsInside !== words && { wordsInside },
+					box: {
+						x: Math.round(box.left),
+						y: Math.round(box.top),
+						width: Math.round(box.width),
+						height: Math.round(box.height)
+					},
+					page: {
+						x: Math.round(box.left + scrollX),
+						y: Math.round(box.top + scrollY)
+					},
+					look: {
+						color: looks.color,
+						background: looks.backgroundColor,
+						size: looks.fontSize,
+						weight: looks.fontWeight,
+						border: parseFloat(looks.borderTopWidth) && looks.borderTopStyle !== "none" ? `${looks.borderTopWidth} ${looks.borderTopStyle} ${looks.borderTopColor}` : "none"
+					},
+					...holder !== void 0 && { holder },
+					...parent !== void 0 && { parent },
+					...column && { column },
+					...known?.role === "box" && labelOf(child) && { labelled: true },
+					...child.closest("[aria-live]:not([aria-live=\"off\"]), [role=\"status\"], [role=\"alert\"], [role=\"log\"]") && { live: true },
+					...node !== void 0 && node >= 0 && { node },
+					...ofItem !== void 0 && { item: ofItem }
+				});
+				if (known && HOLDERS.test(known.role)) inside = things.length - 1;
+				readParent = things.length - 1;
+			}
+			walk(child, inside, readParent, under, item);
+		}
+	}
+	walk(document.body, void 0, void 0, void 0, void 0);
+	return {
+		screen: {
+			width: innerWidth,
+			height: innerHeight
+		},
+		things,
+		items
+	};
+}
+export { readPage as n, unhovered as r, read as t };