camox 0.76.1 → 0.77.0

package/dist/core/lib/artifactTheme.js

@@ -39,18 +39,55 @@ function readArtifactTheme(frame) {
 function isThemeAttribute(name) {
 	return name === "class" || name === "style" || !!name?.startsWith("data-");
 }
+const isStylesheet = (node) => node?.nodeName === "STYLE" || node?.nodeName === "LINK" && /\bstylesheet\b/i.test(node.getAttribute("rel") ?? "");
+/** Whether a change in the page's head may change its stylesheets. */
+function isStylesheetChange(record) {
+	if (record.type === "childList") {
+		if (isStylesheet(record.target)) return true;
+		return [...record.addedNodes, ...record.removedNodes].some(isStylesheet);
+	}
+	const target = record.type === "characterData" ? record.target.parentNode : record.target;
+	return isStylesheet(target);
+}
 /**
-* Calls `onChange` when the `class`, `style` or `data-*` attributes of the frame or one of its
-* ancestors change, as these may change the tokens at its position. Returns a disconnect.
+* Calls `onChange` when the tokens at the frame's position may have changed: when the `class`,
+* `style` or `data-*` attributes of the frame or one of its ancestors change, or when the page's
+* stylesheets do, as the studio swaps them when it shows Live or a draft, or a draft's code
+* changes them. A new stylesheet's tokens only resolve once it loaded, so its load counts too.
+* Returns a disconnect.
 */
 function observeArtifactTheme(frame, onChange) {
-	const page = frame.ownerDocument.defaultView;
+	const doc = frame.ownerDocument;
+	const page = doc.defaultView;
 	if (!page) return () => {};
-	const observer = new page.MutationObserver((records) => {
+	const ancestors = new page.MutationObserver((records) => {
 		if (records.some((record) => isThemeAttribute(record.attributeName))) onChange();
 	});
-	for (let element = frame; element; element = element.parentElement) observer.observe(element, { attributes: true });
-	return () => observer.disconnect();
+	for (let element = frame; element; element = element.parentElement) ancestors.observe(element, { attributes: true });
+	const stylesheets = new page.MutationObserver((records) => {
+		if (records.some(isStylesheetChange)) onChange();
+	});
+	stylesheets.observe(doc.head, {
+		childList: true,
+		subtree: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"href",
+			"rel",
+			"media",
+			"disabled"
+		]
+	});
+	const onLoad = (event) => {
+		if (isStylesheet(event.target)) onChange();
+	};
+	doc.addEventListener("load", onLoad, true);
+	return () => {
+		ancestors.disconnect();
+		stylesheets.disconnect();
+		doc.removeEventListener("load", onLoad, true);
+	};
 }
 
 //#endregion