Find any preact roots on a webpage

preact-checker.js

// Run `"javascript:$(terser .\preact-checker.js)" > .\preact-checker.min.js` to make it a bookmarklet
(function () {
	var expando =
		typeof Symbol != "undefined" && Symbol.for && Symbol.for("preactattr");

	function isMatch(node) {
		if ("__k" in node && "props" in node.__k && "type" in node.__k) {
			return true;
		}
		return (
			"_component" in node ||
			"__preactattr_" in node ||
			(expando && node[expando] != null)
		);
	}

	function getMetadata(node) {
		var version = "unknown";
		if ("__k" in node) {
			version = "10";
		}
		if ("__preactattr_" in node) {
			version = "8";
		}
		if (expando && node[expando] != null) {
			version = "7";
		}

		var region =
			((node.querySelectorAll("*").length / document.all.length) * 100) | 0;

		var depth = 0;
		var p = node;
		while ((p = p.parentNode)) depth++;

		return { version, depth, region };
	}

	var walker = document.createTreeWalker(
		document.body,
		NodeFilter.SHOW_ELEMENT,
		{
			acceptNode(node) {
				return isMatch(node)
					? NodeFilter.FILTER_ACCEPT
					: NodeFilter.FILTER_SKIP;
			},
		}
	);

	/** @type {Array<{ node: Node }>} */
	var roots = [];
	var result = "[\n";
	var node;
	while ((node = walker.nextNode())) {
		if (!roots.some((root) => root.node.contains(node))) {
			var metadata = getMetadata(node);
			result += '  ' + JSON.stringify(metadata) + ",\n";

			var root = { ...metadata, node };
			roots.push(root);

			console.log(root);
		}
	}

	result += "]";
	alert(result);
})();

preact-checker.min.js

javascript:(function(){var expando=typeof Symbol!="undefined"&&Symbol.for&&Symbol.for("preactattr");function isMatch(node){if("__k"in node&&"props"in node.__k&&"type"in node.__k){return true}return"_component"in node||"__preactattr_"in node||expando&&node[expando]!=null}function getMetadata(node){var version="unknown";if("__k"in node){version="10"}if("__preactattr_"in node){version="8"}if(expando&&node[expando]!=null){version="7"}var region=node.querySelectorAll("*").length/document.all.length*100|0;var depth=0;var p=node;while(p=p.parentNode)depth++;return{version:version,depth:depth,region:region}}var walker=document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,{acceptNode(node){return isMatch(node)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}});var roots=[];var node;while(node=walker.nextNode()){if(!roots.some(root=>root.contains(node))){roots.push(node);console.log({...getMetadata(node),node:node})}}})();