clava 0.4.1 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # clava
 
+## 0.4.2
+
+- Improved [`refine`](https://clava.style/docs/reference/refine) iteration warnings to show the latest changing variant values with a shorter component creation stack.
+- Fixed [`setDefaultVariants`](https://clava.style/docs/reference/refine#setdefaultvariants) calls with stable values to avoid extra [`refine`](https://clava.style/docs/reference/refine) passes.
+
 ## 0.4.1
 
 ### Improved refine iteration warning with debugging context

package/dist/index.js

@@ -1,4 +1,92 @@
 import clsx from "clsx";
+//#region src/refine-warning.ts
+function captureCreationFrame(skipFn) {
+	if (process.env.NODE_ENV === "production") return void 0;
+	if (typeof Error.captureStackTrace === "function") {
+		const holder = {};
+		Error.captureStackTrace(holder, skipFn);
+		return holder;
+	}
+	return /* @__PURE__ */ new Error();
+}
+function formatCreationStack(frame) {
+	let stack = frame.stack;
+	if (!stack) return void 0;
+	const newlineIdx = stack.indexOf("\n");
+	if (newlineIdx > 0) {
+		const firstLine = stack.slice(0, newlineIdx);
+		if (firstLine === "Error" || firstLine.startsWith("Error:")) stack = stack.slice(newlineIdx + 1);
+	}
+	const frames = stack.split("\n");
+	for (let i = 0; i < frames.length; i++) {
+		const line = frames[i]?.trim();
+		if (!line) continue;
+		if (isInternalCreationFrame(line)) continue;
+		if (line.includes("/node_modules/")) continue;
+		if (line.includes("\\node_modules\\")) continue;
+		if (line.includes("node:internal")) continue;
+		return `    ${line}`;
+	}
+}
+function isInternalCreationFrame(line) {
+	if (line.includes("captureCreationFrame")) return true;
+	if (line.startsWith("at cv ")) return true;
+	if (line.startsWith("at cv(")) return true;
+	if (line.startsWith("cv@")) return true;
+	return false;
+}
+function formatVariantValue(value) {
+	if (typeof value === "string") return JSON.stringify(value);
+	if (typeof value === "number") {
+		if (Number.isNaN(value)) return "NaN";
+		return String(value);
+	}
+	if (typeof value === "bigint") return `${value}n`;
+	if (value === void 0) return "undefined";
+	if (value === null) return "null";
+	if (typeof value === "boolean") return String(value);
+	if (typeof value === "symbol") return String(value);
+	if (typeof value === "function") return "[function]";
+	return "[object]";
+}
+function setVariantChange(into, key, from, to) {
+	into.set(key, {
+		from,
+		to
+	});
+}
+function accumulateUnstableVariantChanges(into, prev, next) {
+	for (const key in next) {
+		if (!Object.hasOwn(next, key)) continue;
+		if (!Object.is(prev[key], next[key])) setVariantChange(into, key, prev[key], next[key]);
+	}
+	for (const key in prev) {
+		if (!Object.hasOwn(prev, key)) continue;
+		if (Object.hasOwn(next, key)) continue;
+		setVariantChange(into, key, prev[key], void 0);
+	}
+}
+function formatVariantChanges(changes) {
+	return Array.from(changes).map(([key, { from, to }]) => {
+		return `${key}: ${formatVariantValue(from)} -> ${formatVariantValue(to)}`;
+	}).join(", ");
+}
+function warnRefineLimit({ runState, creationFrame, unstableChanges }) {
+	if (process.env.NODE_ENV === "production") return;
+	if (runState.warned) return;
+	runState.warned = true;
+	let message = "Clava: Maximum refine iterations exceeded. This can happen when a refine callback calls setVariants or setDefaultVariants, but one of the variants changes on every run.";
+	if (unstableChanges && unstableChanges.size > 0) {
+		message += `\nVariant(s) that did not stabilize: ${Array.from(unstableChanges.keys()).join(", ")}.`;
+		message += `\nLatest variant changes before warning: ${formatVariantChanges(unstableChanges)}.`;
+	}
+	if (creationFrame) {
+		const creationStack = formatCreationStack(creationFrame);
+		if (creationStack) message += `\nComponent created at:\n${creationStack}`;
+	}
+	console.warn(message);
+}
+//#endregion
 //#region src/utils.ts
 const hasOwn = Object.prototype.hasOwnProperty;
 function isAsciiLetter(code) {
@@ -224,7 +312,6 @@ function isHTMLObjStyle(style) {
 const META_KEY = "__meta";
 const EMPTY_DEFAULTS = Object.freeze({});
 const MAX_REFINE_RUNS = 50;
-const REFINE_UNSTABLE_TRACKING_WINDOW = 10;
 function areVariantsEqual(a, b) {
 	for (const key in a) {
 		if (!Object.hasOwn(a, key)) continue;
@@ -236,48 +323,6 @@ function areVariantsEqual(a, b) {
 	}
 	return true;
 }
-function captureCreationFrame(skipFn) {
-	if (process.env.NODE_ENV === "production") return void 0;
-	if (typeof Error.captureStackTrace === "function") {
-		const holder = {};
-		Error.captureStackTrace(holder, skipFn);
-		return holder;
-	}
-	return /* @__PURE__ */ new Error();
-}
-function formatCreationStack(frame) {
-	let stack = frame.stack;
-	if (!stack) return void 0;
-	const newlineIdx = stack.indexOf("\n");
-	if (newlineIdx > 0) {
-		const firstLine = stack.slice(0, newlineIdx);
-		if (firstLine === "Error" || firstLine.startsWith("Error:")) stack = stack.slice(newlineIdx + 1);
-	}
-	return stack;
-}
-function accumulateUnstableVariantKeys(into, prev, next) {
-	for (const key in next) {
-		if (!Object.hasOwn(next, key)) continue;
-		if (!Object.is(prev[key], next[key])) into.add(key);
-	}
-	for (const key in prev) {
-		if (!Object.hasOwn(prev, key)) continue;
-		if (Object.hasOwn(next, key)) continue;
-		into.add(key);
-	}
-}
-function warnRefineLimit(runState, creationFrame, unstableKeys) {
-	if (process.env.NODE_ENV === "production") return;
-	if (runState.warned) return;
-	runState.warned = true;
-	let message = "Clava: Maximum refine iterations exceeded. This can happen when a refine callback calls setVariants or setDefaultVariants, but one of the variants changes on every run.";
-	if (unstableKeys && unstableKeys.size > 0) message += `\nVariant(s) that did not stabilize: ${Array.from(unstableKeys).join(", ")}.`;
-	if (creationFrame) {
-		const creationStack = formatCreationStack(creationFrame);
-		if (creationStack) message += `\nComponent created at:\n${creationStack}`;
-	}
-	console.warn(message);
-}
 function getExtUserVariantProps(userVariantProps, protectedVariants, changedVariants) {
 	const extUserVariantProps = {};
 	Object.assign(extUserVariantProps, userVariantProps);
@@ -775,7 +820,7 @@ function create({ transformClass = (className) => className } = {}) {
 								if (!Object.hasOwn(newVariants, key)) continue;
 								const value = newVariants[key];
 								setChangedVariant(key, value, true);
-								if (getCurrentVariantValue(key) === value) continue;
+								if (Object.is(getCurrentVariantValue(key), value)) continue;
 								ensureUpdated()[key] = value;
 							}
 							return;
@@ -789,7 +834,7 @@ function create({ transformClass = (className) => className } = {}) {
 								if (valueKey != null && disabledVariantValues[key]?.has(valueKey)) continue;
 							}
 							setChangedVariant(key, value, true);
-							if (getCurrentVariantValue(key) === value) continue;
+							if (Object.is(getCurrentVariantValue(key), value)) continue;
 							ensureUpdated()[key] = value;
 						}
 					},
@@ -804,9 +849,9 @@ function create({ transformClass = (className) => className } = {}) {
 								const valueKey = getVariantValueKey(value);
 								if (valueKey != null && disabledVariantValues[key]?.has(valueKey)) continue;
 							}
+							if (Object.is(getCurrentVariantValue(key), value)) continue;
 							setChangedVariant(key, value);
 							if (pendingProtectedVariants) pendingProtectedVariants[key] = value;
-							if (getCurrentVariantValue(key) === value) continue;
 							ensureUpdated()[key] = value;
 						}
 					},
@@ -942,7 +987,7 @@ function create({ transformClass = (className) => className } = {}) {
 			protectedVariants ??= {};
 			protectedVariantKeys ??= /* @__PURE__ */ new Set();
 			let workingResolved = resolved;
-			let unstableKeys = null;
+			let unstableChanges = null;
 			let lastClasses = [];
 			let lastStyle = {};
 			let isFirstRun = true;
@@ -970,12 +1015,16 @@ function create({ transformClass = (className) => className } = {}) {
 					}
 					return nextResolved;
 				}
-				if (process.env.NODE_ENV !== "production" && runState.remaining < REFINE_UNSTABLE_TRACKING_WINDOW) {
-					if (!unstableKeys) unstableKeys = /* @__PURE__ */ new Set();
-					accumulateUnstableVariantKeys(unstableKeys, workingResolved, nextResolved);
+				if (process.env.NODE_ENV !== "production" && runState.remaining < 10) {
+					if (!unstableChanges) unstableChanges = /* @__PURE__ */ new Map();
+					accumulateUnstableVariantChanges(unstableChanges, workingResolved, nextResolved);
 				}
 				if (useDirectOutput && runState.remaining === 0) {
-					warnRefineLimit(runState, creationFrame, unstableKeys);
+					warnRefineLimit({
+						runState,
+						creationFrame,
+						unstableChanges
+					});
 					return nextResolved;
 				}
 				if (useDirectOutput) {
@@ -988,7 +1037,11 @@ function create({ transformClass = (className) => className } = {}) {
 				workingResolved = nextResolved;
 				isFirstRun = false;
 			}
-			warnRefineLimit(runState, creationFrame, unstableKeys);
+			warnRefineLimit({
+				runState,
+				creationFrame,
+				unstableChanges
+			});
 			for (let i = 0; i < lastClasses.length; i++) classesOut.push(lastClasses[i]);
 			Object.assign(styleOut, lastStyle);
 			return workingResolved;
@@ -1017,7 +1070,7 @@ function create({ transformClass = (className) => className } = {}) {
 			protectedVariants ??= {};
 			protectedVariantKeys ??= /* @__PURE__ */ new Set();
 			let workingResolved = resolved;
-			let unstableKeys = null;
+			let unstableChanges = null;
 			let reachedLimit = true;
 			while (runState.remaining > 0) {
 				runState.remaining -= 1;
@@ -1031,13 +1084,17 @@ function create({ transformClass = (className) => className } = {}) {
 					reachedLimit = false;
 					break;
 				}
-				if (process.env.NODE_ENV !== "production" && runState.remaining < REFINE_UNSTABLE_TRACKING_WINDOW) {
-					if (!unstableKeys) unstableKeys = /* @__PURE__ */ new Set();
-					accumulateUnstableVariantKeys(unstableKeys, workingResolved, nextResolved);
+				if (process.env.NODE_ENV !== "production" && runState.remaining < 10) {
+					if (!unstableChanges) unstableChanges = /* @__PURE__ */ new Map();
+					accumulateUnstableVariantChanges(unstableChanges, workingResolved, nextResolved);
 				}
 				workingResolved = nextResolved;
 			}
-			if (reachedLimit) warnRefineLimit(runState, creationFrame, unstableKeys);
+			if (reachedLimit) warnRefineLimit({
+				runState,
+				creationFrame,
+				unstableChanges
+			});
 			return workingResolved;
 		} : null;
 		const computeResult = (props = EMPTY_DEFAULTS) => {