@master/css-runtime 2.0.0-rc.74 → 2.0.0-rc.76

package/dist/index.development.js

@@ -643,6 +643,12 @@ const browserNativeDeclarationMatcher = ({ property, value }) => {
 //#endregion
 //#region src/core.ts
 const MASTER_CSS_RUNTIME_STYLE_SELECTOR = `style#${MASTER_CSS_RUNTIME_STYLE_ID}`;
+const RETAINED_CLASS_RULE_MIN_AGE_MS = 1e3;
+const RETAINED_CLASS_RULE_IDLE_TIMEOUT_MS = 5e3;
+const RETAINED_CLASS_RULE_CLEANUP_BATCH_SIZE = 64;
+const RETAINED_CLASS_RULE_SOFT_TARGET = 128;
+const RETAINED_CLASS_RULE_HARD_LIMIT = 512;
+const RETAINED_CLASS_RULE_HARD_RAW_BYTES = 256 * 1024;
 function isDocumentRoot(root) {
 	const rootConstructorName = root?.constructor.name;
 	return rootConstructorName === "HTMLDocument" || rootConstructorName === "Document";
@@ -650,10 +656,12 @@ function isDocumentRoot(root) {
 function findElementById(root, id) {
 	return isDocumentRoot(root) ? root.getElementById(id) : "querySelector" in root ? root.querySelector(`#${id}`) : void 0;
 }
+function validateHydrationManifest(hydrationManifest) {
+	return hydrationManifest?.version === 1 && Array.isArray(hydrationManifest?.rules) ? hydrationManifest : void 0;
+}
 function parseHydrationManifest(source) {
 	try {
-		const hydrationManifest = JSON.parse(source);
-		return hydrationManifest?.version === 1 && Array.isArray(hydrationManifest.rules) ? hydrationManifest : void 0;
+		return validateHydrationManifest(JSON.parse(source));
 	} catch (error) {
 		console.debug("Cannot parse Master CSS hydration manifest.", error);
 	}
@@ -668,6 +676,13 @@ function readExternalHydrationManifestSource(root) {
 	const HTMLStyleElementConstructor = globalThis.HTMLStyleElement;
 	return HTMLStyleElementConstructor && styleElement instanceof HTMLStyleElementConstructor ? styleElement.getAttribute(MASTER_CSS_HYDRATION_MANIFEST_ATTR) : void 0;
 }
+function resolveExternalHydrationManifestURL(root, source) {
+	const ownerDocument = isDocumentRoot(root) ? root : root.ownerDocument;
+	return new URL(source, ownerDocument.baseURI).href;
+}
+async function importHydrationManifest(url) {
+	return validateHydrationManifest((await globalThis.Function("specifier", "return import(specifier, { with: { type: 'json' } })")(url)).default);
+}
 var CSSRuntime = class CSSRuntime extends MasterCSS {
 	root;
 	hydrationManifest;
@@ -680,10 +695,16 @@ var CSSRuntime = class CSSRuntime extends MasterCSS {
 	componentsLayer = new RuntimeUtilityLayer("components", this);
 	utilitiesLayer = new RuntimeUtilityLayer("utilities", this);
 	classCounts = /* @__PURE__ */ new Map();
+	retainedClassNames = /* @__PURE__ */ new Set();
 	classTracker = new RuntimeClassTracker();
+	pendingAddedClassNames = /* @__PURE__ */ new Set();
 	pendingRemovedClassNames = /* @__PURE__ */ new Set();
+	retainedClassRules = /* @__PURE__ */ new Map();
+	pendingAdditionFrame;
 	pendingRemovalFrame;
 	pendingRemovalFlushFrame;
+	retainedCleanupIdleHandle;
+	retainedCleanupTimeoutHandle;
 	hydrationFailureReason;
 	observer;
 	progressive = false;
@@ -740,9 +761,7 @@ var CSSRuntime = class CSSRuntime extends MasterCSS {
 		const source = readExternalHydrationManifestSource(this.root);
 		if (!source) return this;
 		try {
-			const response = await fetch(source, { credentials: "same-origin" });
-			if (!response.ok) return this;
-			this.setHydrationManifest(parseHydrationManifest(await response.text()));
+			this.setHydrationManifest(await importHydrationManifest(resolveExternalHydrationManifestURL(this.root, source)));
 		} catch (error) {
 			console.debug("Cannot load Master CSS hydration manifest.", error);
 		}
@@ -765,7 +784,7 @@ var CSSRuntime = class CSSRuntime extends MasterCSS {
 		this.progressive = false;
 		this.createRuntimeStyle();
 		this.insertStaticResources();
-		connectedNames.forEach((cls) => this.add(cls));
+		connectedNames.forEach((cls) => this.ensureClassRules(cls));
 	}
 	detectRuntimeStyle() {
 		if (this.root.styleSheets) for (const sheet of this.root.styleSheets) {
@@ -785,7 +804,7 @@ var CSSRuntime = class CSSRuntime extends MasterCSS {
 		if (hydrateResult) {
 			const hydratedClassNames = new Set(hydrateResult.allUtilities.map(({ fixedClass, name }) => fixedClass || name));
 			for (const cls of connectedNames) if (!hydratedClassNames.has(cls)) {
-				this.add(cls);
+				this.ensureClassRules(cls);
 				console.debug(`Missing prerendered rule for class \`${cls}\``);
 			}
 		} else this.useRuntimeStyle(connectedNames, this.hydrationFailureReason || `Cannot read ${MASTER_CSS_RUNTIME_STYLE_SELECTOR} CSS rules.`);
@@ -793,7 +812,7 @@ var CSSRuntime = class CSSRuntime extends MasterCSS {
 	renderRuntimeStyle(connectedNames) {
 		this.createRuntimeStyle();
 		this.insertStaticResources();
-		connectedNames.forEach((cls) => this.add(cls));
+		connectedNames.forEach((cls) => this.ensureClassRules(cls));
 	}
 	getAnimationFrameWindow() {
 		return (isDocumentRoot(this.root) ? this.root : this.root.ownerDocument)?.defaultView || globalThis;
@@ -809,15 +828,56 @@ var CSSRuntime = class CSSRuntime extends MasterCSS {
 			this.pendingRemovalFlushFrame = void 0;
 		}
 	}
+	cancelPendingAdditionFrame() {
+		if (this.pendingAdditionFrame === void 0) return;
+		this.getAnimationFrameWindow().cancelAnimationFrame(this.pendingAdditionFrame);
+		this.pendingAdditionFrame = void 0;
+	}
+	clearPendingAddedClassNames() {
+		this.pendingAddedClassNames.clear();
+		this.cancelPendingAdditionFrame();
+	}
 	clearPendingRemovedClassNames() {
 		this.pendingRemovedClassNames.clear();
 		this.cancelPendingRemovalFrames();
 	}
+	getCleanupWindow() {
+		return this.getAnimationFrameWindow();
+	}
+	cancelRetainedClassRuleCleanup() {
+		const view = this.getCleanupWindow();
+		if (this.retainedCleanupIdleHandle !== void 0) {
+			view.cancelIdleCallback?.(this.retainedCleanupIdleHandle);
+			this.retainedCleanupIdleHandle = void 0;
+		}
+		if (this.retainedCleanupTimeoutHandle !== void 0) {
+			view.clearTimeout(this.retainedCleanupTimeoutHandle);
+			this.retainedCleanupTimeoutHandle = void 0;
+		}
+	}
+	clearRetainedClassRules() {
+		this.retainedClassNames.clear();
+		this.retainedClassRules.clear();
+		this.cancelRetainedClassRuleCleanup();
+	}
 	cancelPendingRemovedClassNames(classNames) {
 		if (!this.pendingRemovedClassNames.size) return;
 		for (const className of classNames) this.pendingRemovedClassNames.delete(className);
 		if (!this.pendingRemovedClassNames.size) this.cancelPendingRemovalFrames();
 	}
+	cancelPendingAddedClassNames(classNames) {
+		if (!this.pendingAddedClassNames.size) return;
+		for (const className of classNames) this.pendingAddedClassNames.delete(className);
+		if (!this.pendingAddedClassNames.size) this.cancelPendingAdditionFrame();
+	}
+	cancelRetainedClassNames(classNames) {
+		if (!this.retainedClassNames.size) return;
+		for (const className of classNames) {
+			this.retainedClassNames.delete(className);
+			this.retainedClassRules.delete(className);
+		}
+		if (!this.retainedClassNames.size) this.cancelRetainedClassRuleCleanup();
+	}
 	schedulePendingRemovalFlush() {
 		if (!this.pendingRemovedClassNames.size) return;
 		if (this.pendingRemovalFrame !== void 0 || this.pendingRemovalFlushFrame !== void 0) return;
@@ -834,39 +894,167 @@ var CSSRuntime = class CSSRuntime extends MasterCSS {
 		for (const className of classNames) if (!this.classCounts.has(className)) this.pendingRemovedClassNames.add(className);
 		this.schedulePendingRemovalFlush();
 	}
+	schedulePendingAdditionFlush() {
+		if (!this.pendingAddedClassNames.size) return;
+		if (this.pendingAdditionFrame !== void 0) return;
+		const view = this.getAnimationFrameWindow();
+		this.pendingAdditionFrame = view.requestAnimationFrame(() => {
+			this.pendingAdditionFrame = void 0;
+			this.flushPendingAddedClassNames();
+		});
+	}
+	queueAddedClassNames(classNames) {
+		for (const className of classNames) if (this.classCounts.has(className)) this.pendingAddedClassNames.add(className);
+		this.schedulePendingAdditionFlush();
+	}
+	estimateRetainedClassRule(className) {
+		const rules = this.classUtilities.get(className);
+		if (!rules?.length) return;
+		let rawBytes = 0;
+		let ruleCount = 0;
+		for (const rule of rules) {
+			const nodes = rule.nodes;
+			if (nodes?.length) for (const node of nodes) {
+				rawBytes += node.text.length;
+				ruleCount++;
+			}
+			else {
+				rawBytes += rule.text.length;
+				ruleCount++;
+			}
+		}
+		return {
+			retainedAt: Date.now(),
+			rawBytes,
+			ruleCount
+		};
+	}
+	getRetainedClassRuleRawBytes() {
+		let rawBytes = 0;
+		for (const retainedRule of this.retainedClassRules.values()) rawBytes += retainedRule.rawBytes;
+		return rawBytes;
+	}
+	exceedsRetainedClassRuleHardLimits() {
+		return this.retainedClassNames.size > RETAINED_CLASS_RULE_HARD_LIMIT || this.getRetainedClassRuleRawBytes() > RETAINED_CLASS_RULE_HARD_RAW_BYTES;
+	}
+	scheduleRetainedClassRuleCleanup() {
+		if (!this.retainedClassNames.size) return;
+		if (this.retainedCleanupIdleHandle !== void 0 || this.retainedCleanupTimeoutHandle !== void 0) return;
+		const view = this.getCleanupWindow();
+		const hardLimitExceeded = this.exceedsRetainedClassRuleHardLimits();
+		const cleanup = () => {
+			this.retainedCleanupIdleHandle = void 0;
+			this.retainedCleanupTimeoutHandle = void 0;
+			this.cleanupRetainedClassRules();
+		};
+		const timeout = hardLimitExceeded ? 0 : RETAINED_CLASS_RULE_IDLE_TIMEOUT_MS;
+		if (view.requestIdleCallback) this.retainedCleanupIdleHandle = view.requestIdleCallback(cleanup, { timeout });
+		else this.retainedCleanupTimeoutHandle = view.setTimeout(cleanup, timeout);
+	}
+	retainRemovedClassRules(classNames) {
+		for (const className of classNames) {
+			if (this.classCounts.has(className)) continue;
+			const retainedRule = this.retainedClassRules.get(className) || this.estimateRetainedClassRule(className);
+			if (!retainedRule) continue;
+			this.retainedClassNames.add(className);
+			this.retainedClassRules.set(className, retainedRule);
+		}
+		this.scheduleRetainedClassRuleCleanup();
+	}
+	getRetainedClassRuleCleanupCandidates(force = false) {
+		const now = Date.now();
+		const hardLimitExceeded = this.exceedsRetainedClassRuleHardLimits();
+		const entries = [];
+		for (const className of this.retainedClassNames) {
+			if (this.classCounts.has(className)) {
+				this.retainedClassNames.delete(className);
+				this.retainedClassRules.delete(className);
+				continue;
+			}
+			const retainedRule = this.retainedClassRules.get(className);
+			if (!retainedRule) {
+				this.retainedClassNames.delete(className);
+				continue;
+			}
+			const oldEnough = now - retainedRule.retainedAt >= RETAINED_CLASS_RULE_MIN_AGE_MS;
+			if (force || hardLimitExceeded || oldEnough && this.retainedClassNames.size > RETAINED_CLASS_RULE_SOFT_TARGET) entries.push([className, retainedRule]);
+		}
+		entries.sort(([, a], [, b]) => a.retainedAt - b.retainedAt);
+		const cleanupCount = hardLimitExceeded ? Math.max(RETAINED_CLASS_RULE_CLEANUP_BATCH_SIZE, this.retainedClassNames.size - RETAINED_CLASS_RULE_SOFT_TARGET) : RETAINED_CLASS_RULE_CLEANUP_BATCH_SIZE;
+		return entries.slice(0, force ? entries.length : cleanupCount).map(([className]) => className);
+	}
+	removeRetainedClassRules(classNames) {
+		const removedClassNames = [];
+		for (const className of classNames) {
+			if (!this.retainedClassNames.has(className)) continue;
+			this.retainedClassNames.delete(className);
+			this.retainedClassRules.delete(className);
+			if (!this.classCounts.has(className)) removedClassNames.push(className);
+		}
+		if (removedClassNames.length) super.deleteClassRules(...removedClassNames);
+		return removedClassNames.length;
+	}
+	cleanupRetainedClassRules(force = false) {
+		const removedCount = this.removeRetainedClassRules(this.getRetainedClassRuleCleanupCandidates(force));
+		if (this.retainedClassNames.size && (force || this.retainedClassNames.size > RETAINED_CLASS_RULE_SOFT_TARGET || this.exceedsRetainedClassRuleHardLimits())) this.scheduleRetainedClassRuleCleanup();
+		return removedCount;
+	}
+	flushRetainedClassRules() {
+		this.cancelRetainedClassRuleCleanup();
+		const removedCount = this.cleanupRetainedClassRules(true);
+		if (this.retainedClassNames.size) this.scheduleRetainedClassRuleCleanup();
+		return removedCount;
+	}
 	flushPendingRemovedClassNames() {
 		if (!this.pendingRemovedClassNames.size) return;
 		const classNames = [];
 		for (const className of this.pendingRemovedClassNames) if (!this.classCounts.has(className)) classNames.push(className);
 		this.pendingRemovedClassNames.clear();
-		if (classNames.length) super.remove(...classNames);
+		if (classNames.length) this.retainRemovedClassRules(classNames);
+	}
+	flushPendingAddedClassNames() {
+		if (!this.pendingAddedClassNames.size) return;
+		const classNames = [];
+		for (const className of this.pendingAddedClassNames) if (this.classCounts.has(className)) classNames.push(className);
+		this.pendingAddedClassNames.clear();
+		if (classNames.length) this.ensureClassRules(...classNames);
 	}
 	handleMutationRecords(records) {
 		const deltaCounts = this.classTracker.collectMutations(records);
-		const addedClassNames = [];
+		const warmClassNames = [];
+		const queuedClassNames = [];
 		const removedClassNames = [];
 		for (const [cls, change] of deltaCounts) {
 			const current = this.classCounts.get(cls) || 0;
 			const next = current + change;
 			if (next > 0) {
 				this.classCounts.set(cls, next);
-				if (current === 0) addedClassNames.push(cls);
+				if (current === 0) if (this.classUtilities.has(cls) || this.retainedClassNames.has(cls)) warmClassNames.push(cls);
+				else queuedClassNames.push(cls);
 			} else {
 				this.classCounts.delete(cls);
 				removedClassNames.push(cls);
 			}
 		}
-		if (addedClassNames.length) this.add(...addedClassNames);
-		if (removedClassNames.length) this.queueRemovedClassNames(removedClassNames);
+		if (warmClassNames.length) this.ensureClassRules(...warmClassNames);
+		if (queuedClassNames.length) this.queueAddedClassNames(queuedClassNames);
+		if (removedClassNames.length) {
+			this.cancelPendingAddedClassNames(removedClassNames);
+			this.queueRemovedClassNames(removedClassNames);
+		}
 		debugRuntimeMutation(records, deltaCounts, this);
 	}
-	add(...classNames) {
+	ensureClassRules(...classNames) {
+		this.cancelPendingAddedClassNames(classNames);
 		this.cancelPendingRemovedClassNames(classNames);
-		return super.add(...classNames);
+		this.cancelRetainedClassNames(classNames);
+		return super.ensureClassRules(...classNames);
 	}
-	remove(...classNames) {
+	deleteClassRules(...classNames) {
+		this.cancelPendingAddedClassNames(classNames);
 		this.cancelPendingRemovedClassNames(classNames);
-		super.remove(...classNames);
+		this.cancelRetainedClassNames(classNames);
+		super.deleteClassRules(...classNames);
 	}
 	startMutationObserver() {
 		this.observer = new MutationObserver((records) => this.handleMutationRecords(records));
@@ -1119,7 +1307,9 @@ var CSSRuntime = class CSSRuntime extends MasterCSS {
 		return result;
 	}
 	disconnect() {
+		this.clearPendingAddedClassNames();
 		this.clearPendingRemovedClassNames();
+		this.clearRetainedClassRules();
 		if (!this.observing) return;
 		if (this.observer) {
 			this.observer.disconnect();
@@ -1138,7 +1328,9 @@ var CSSRuntime = class CSSRuntime extends MasterCSS {
 		return this;
 	}
 	refresh(manifest = this.manifest) {
+		this.clearPendingAddedClassNames();
 		this.clearPendingRemovedClassNames();
+		this.clearRetainedClassRules();
 		if (!this.observing || !this.style.sheet) return this;
 		const cssRules = this.style.sheet.cssRules;
 		for (let i = cssRules.length - 1; i >= 0; i--) this.style.sheet.deleteRule(i);
@@ -1148,7 +1340,7 @@ var CSSRuntime = class CSSRuntime extends MasterCSS {
 		* 所以 refresh 過後 rules 可能會變多也可能會變少
 		*/
 		this.classCounts.forEach((_, className) => {
-			this.add(className);
+			this.ensureClassRules(className);
 		});
 		debugRuntimeRefreshed(this, manifest);
 		return this;