clava 0.4.0 → 0.4.2

package/src/types.ts

@@ -76,11 +76,11 @@ type ComponentPropKey<R extends ComponentResult> =
 
 // Key source types - what can be passed as additional parameters to splitProps
 export type KeySourceArray = readonly string[];
-export type KeySourceComponent = {
+export interface KeySourceComponent {
   propKeys: readonly string[];
   variantKeys: readonly string[];
   getVariants: () => Record<string, unknown>;
-};
+}
 export type KeySource = KeySourceArray | KeySourceComponent;
 
 // Check if source is a component (has getVariants)

package/src/utils.ts

@@ -39,7 +39,9 @@ export function hyphenToCamel(str: string) {
   }
   // Fast path: no hyphen -> return as-is
   let hyphenIndex = str.indexOf("-");
-  if (hyphenIndex === -1) return str;
+  if (hyphenIndex === -1) {
+    return str;
+  }
 
   let result = "";
   let lastIndex = 0;
@@ -91,7 +93,9 @@ export function camelToHyphen(str: string) {
     lastIndex = i + 1;
   }
 
-  if (lastIndex === 0) return str;
+  if (lastIndex === 0) {
+    return str;
+  }
   return result + str.slice(lastIndex);
 }
 
@@ -102,7 +106,9 @@ export function camelToHyphen(str: string) {
  * parseLengthValue("2em"); // "2em"
  */
 export function parseLengthValue(value: string | number) {
-  if (typeof value === "string") return value;
+  if (typeof value === "string") {
+    return value;
+  }
   return `${value}px`;
 }
 
@@ -135,7 +141,10 @@ export function htmlStyleToStyleValue(styleString: string) {
     }
     if (i >= len || styleString.charCodeAt(i) === 59) {
       // No colon found - skip this declaration
-      if (i < len) i++; // skip ';'
+      if (i < len) {
+        // Skip ';'.
+        i++;
+      }
       continue;
     }
     let propEnd = i;
@@ -147,12 +156,17 @@ export function htmlStyleToStyleValue(styleString: string) {
     }
     if (propEnd === propStart) {
       // Empty property - skip
-      while (i < len && styleString.charCodeAt(i) !== 59) i++;
-      if (i < len) i++;
+      while (i < len && styleString.charCodeAt(i) !== 59) {
+        i++;
+      }
+      if (i < len) {
+        i++;
+      }
       continue;
     }
     const property = styleString.slice(propStart, propEnd);
-    i++; // skip ':'
+    // Skip ':'.
+    i++;
     // Skip whitespace before value
     while (i < len) {
       const c = styleString.charCodeAt(i);
@@ -160,14 +174,19 @@ export function htmlStyleToStyleValue(styleString: string) {
       i++;
     }
     const valStart = i;
-    while (i < len && styleString.charCodeAt(i) !== 59) i++;
+    while (i < len && styleString.charCodeAt(i) !== 59) {
+      i++;
+    }
     let valEnd = i;
     while (valEnd > valStart) {
       const c = styleString.charCodeAt(valEnd - 1);
       if (c !== 32 && c !== 9 && c !== 10 && c !== 13) break;
       valEnd--;
     }
-    if (i < len) i++; // skip ';'
+    if (i < len) {
+      // Skip ';'.
+      i++;
+    }
     if (valEnd === valStart) continue;
     const value = styleString.slice(valStart, valEnd);
     // CSS property names and values are dynamic - cast required for index access
@@ -229,7 +248,9 @@ export function styleValueToHTMLStyle(style: StyleValue): string {
     if (!hasOwn.call(style, key)) continue;
     const value = (style as Record<string, unknown>)[key];
     if (value == null) continue;
-    if (result) result += "; ";
+    if (result) {
+      result += "; ";
+    }
     result += camelToHyphen(key);
     result += ": ";
     result += value as string | number;

package/tests/_utils.ts

@@ -87,12 +87,16 @@ export function getModeComponent<
   V extends Variants = {},
   const E extends AnyComponent[] = [],
 >(mode: M, component: CVComponent<V, E>) {
-  if (!mode) return component;
+  if (!mode) {
+    return component;
+  }
   return component[mode];
 }
 
 function getClass(props: ComponentResult) {
-  if ("class" in props) return props.class;
+  if ("class" in props) {
+    return props.class;
+  }
   return props.className;
 }
 

package/tests/build.test.ts

@@ -1,18 +1,93 @@
 import { execFile } from "node:child_process";
-import { readFile } from "node:fs/promises";
+import { mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
 import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
+import { fileURLToPath, pathToFileURL } from "node:url";
 import { promisify } from "node:util";
+import { withPackageBuildLock } from "test-utils/build-lock";
+import { build } from "vite";
 import { expect, test } from "vitest";
 
 const root = join(dirname(fileURLToPath(import.meta.url)), "..");
 const exec = promisify(execFile);
+let buildPromise: Promise<unknown> | undefined;
+
+function buildPackage() {
+  buildPromise ??= exec("pnpm", ["--dir", root, "build"]);
+  return buildPromise;
+}
 
 test("build preserves the production warning guard for consumers", async () => {
-  await exec("pnpm", ["--dir", root, "build"]);
+  await withPackageBuildLock(async () => {
+    await buildPackage();
+
+    const code = await readFile(join(root, "dist/index.js"), "utf8");
+    expect(code).toMatch(
+      /warnRefineLimit[\s\S]*?process\.env\.NODE_ENV === "production"[\s\S]*?console\.warn\(/,
+    );
+  });
+}, 60_000);
+
+test("vite removes warning logic from the production bundle", async () => {
+  await withPackageBuildLock(async () => {
+    await buildPackage();
+
+    const tempDir = await mkdtemp(join(tmpdir(), "clava-vite-"));
+    try {
+      const entry = join(tempDir, "entry.js");
+      const bundle = join(tempDir, "dist/bundle.js");
+      const clavaUrl = pathToFileURL(join(root, "dist/index.js")).href;
+
+      await writeFile(
+        entry,
+        `
+        import { cv } from ${JSON.stringify(clavaUrl)};
+
+        export const button = cv({
+          variants: {
+            tone: {
+              primary: "primary",
+            },
+          },
+          refine({ setVariants }) {
+            setVariants({ tone: "primary" });
+          },
+        });
+
+        button();
+      `,
+      );
+
+      await build({
+        configFile: false,
+        logLevel: "silent",
+        root: tempDir,
+        mode: "production",
+        define: {
+          "process.env.NODE_ENV": JSON.stringify("production"),
+        },
+        build: {
+          emptyOutDir: true,
+          lib: {
+            entry,
+            fileName: () => "bundle.js",
+            formats: ["es"],
+          },
+          minify: true,
+          outDir: "dist",
+        },
+      });
 
-  const code = await readFile(join(root, "dist/index.js"), "utf8");
-  expect(code).toMatch(
-    /process\.env\.NODE_ENV !== "production"[\s\S]*?console\.warn\(/,
-  );
+      const code = await readFile(bundle, "utf8");
+      expect(code).not.toContain("console.warn");
+      expect(code).not.toContain("Clava: Maximum refine iterations exceeded");
+      expect(code).not.toContain("Variant(s) that did not stabilize");
+      expect(code).not.toContain("Latest variant changes before warning");
+      expect(code).not.toContain("Component created at");
+      expect(code).not.toContain("captureStackTrace");
+      expect(code).not.toMatch(/\.warned\b|["']warned["']/);
+    } finally {
+      await rm(tempDir, { force: true, recursive: true });
+    }
+  });
 }, 60_000);

package/tests/extend.test.ts

@@ -333,8 +333,13 @@ describe("non-idempotent transformClass", () => {
   });
 });
 
-const toUpperCase = (className: string) => className.toUpperCase();
-const toLowerCase = (className: string) => className.toLowerCase();
+function toUpperCase(className: string) {
+  return className.toUpperCase();
+}
+
+function toLowerCase(className: string) {
+  return className.toLowerCase();
+}
 
 describe("extend across `create()` factories", () => {
   // The extend's own `transformClass` must apply to its own classes even when

package/tests/refine-warning.test.ts

@@ -0,0 +1,28 @@
+import { expect, test } from "vitest";
+import { formatCreationStack } from "../src/refine-warning.ts";
+
+test("formatCreationStack returns the first app frame", () => {
+  const stack = [
+    "Error",
+    "    at captureCreationFrame (/repo/packages/clava/src/refine-warning.ts:31:10)",
+    "    at cv (/repo/packages/clava/src/index.ts:734:9)",
+    "    at eval (/repo/app/src/button.ts:12:21)",
+    "    at ModuleJob.run (node:internal/modules/esm/module_job:343:25)",
+  ].join("\n");
+
+  expect(formatCreationStack({ stack })).toBe(
+    "    at eval (/repo/app/src/button.ts:12:21)",
+  );
+});
+
+test("formatCreationStack omits dependency and runtime frames", () => {
+  const stack = [
+    "Error",
+    "    at captureCreationFrame (/repo/packages/clava/src/refine-warning.ts:31:10)",
+    "    at cv(/repo/packages/clava/src/index.ts:734:9)",
+    "    at eval (/repo/node_modules/package/index.js:1:1)",
+    "    at ModuleJob.run (node:internal/modules/esm/module_job:343:25)",
+  ].join("\n");
+
+  expect(formatCreationStack({ stack })).toBeUndefined();
+});

package/tests/refine.test.ts

@@ -125,6 +125,125 @@ for (const config of Object.values(CONFIGS)) {
       }
     });
 
+    test("refine converges with undefined setDefaultVariants", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      const base = cv({
+        variants: {
+          invert: { true: "invert" },
+          offset: (value: boolean | undefined) =>
+            value ? "offset" : undefined,
+          push: (value: number | undefined) =>
+            value === undefined ? undefined : `push-${value}`,
+        },
+        refine: ({ variants, setDefaultVariants }) => {
+          setDefaultVariants({
+            offset: !variants.invert,
+            push: variants.invert ? 20 : undefined,
+          });
+        },
+      });
+      const component = getModeComponent(mode, cv({ extend: [base] }));
+
+      try {
+        const props = component();
+        expect(getStyleClass(props)).toEqual({
+          class: cls("offset"),
+        });
+        expect(component.getVariants()).toEqual({
+          offset: true,
+          push: undefined,
+        });
+        expect(warn).not.toHaveBeenCalled();
+      } finally {
+        warn.mockRestore();
+      }
+    });
+
+    test("refine converges with undefined setDefaultVariants in nested extends", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      const calls = {
+        layer: 0,
+        frame: 0,
+        control: 0,
+      };
+      const layer = cv({
+        variants: {
+          layer: { true: "layer" },
+          invert: { true: "invert" },
+          offset: (value: boolean | undefined) =>
+            value ? "offset" : undefined,
+          push: (value: number | undefined) =>
+            value === undefined ? undefined : `push-${value}`,
+        },
+        defaultVariants: {
+          layer: true,
+        },
+        refine: ({ variants, setDefaultVariants }) => {
+          calls.layer += 1;
+          setDefaultVariants({
+            offset: !variants.invert,
+            push: variants.invert ? 20 : undefined,
+          });
+        },
+      });
+      const frame = cv({
+        extend: [layer],
+        variants: {
+          frame: { true: "frame" },
+        },
+        defaultVariants: {
+          frame: true,
+        },
+        refine: () => {
+          calls.frame += 1;
+        },
+      });
+      const control = cv({
+        extend: [frame],
+        variants: {
+          control: { true: "control" },
+        },
+        defaultVariants: {
+          control: true,
+          offset: true,
+        },
+        refine: () => {
+          calls.control += 1;
+        },
+      });
+      const component = getModeComponent(mode, cv({ extend: [control] }));
+
+      try {
+        const props = component();
+        expect(getStyleClass(props)).toEqual({
+          class: cls("layer offset frame control"),
+        });
+        expect(calls).toEqual({
+          layer: 2,
+          frame: 2,
+          control: 2,
+        });
+        calls.layer = 0;
+        calls.frame = 0;
+        calls.control = 0;
+        expect(component.getVariants()).toEqual({
+          layer: true,
+          offset: true,
+          push: undefined,
+          frame: true,
+          control: true,
+        });
+        expect(calls).toEqual({
+          layer: 2,
+          frame: 2,
+          control: 2,
+        });
+        expect(warn).not.toHaveBeenCalled();
+      } finally {
+        warn.mockRestore();
+      }
+    });
+
     test("refine with setDefaultVariants", () => {
       const component = getModeComponent(
         mode,
@@ -714,6 +833,19 @@ for (const config of Object.values(CONFIGS)) {
         expect(warn).toHaveBeenCalledWith(
           expect.stringContaining("Maximum refine iterations exceeded"),
         );
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringMatching(
+            /Variant\(s\) that did not stabilize: [^\n]*\bsize\b/,
+          ),
+        );
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringMatching(
+            /Latest variant changes before warning: [^\n]*\bsize: "(sm|lg)" -> "(sm|lg)"/,
+          ),
+        );
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringContaining("Component created at:"),
+        );
       } finally {
         warn.mockRestore();
       }
@@ -737,6 +869,19 @@ for (const config of Object.values(CONFIGS)) {
         expect(warn).toHaveBeenCalledWith(
           expect.stringContaining("Maximum refine iterations exceeded"),
         );
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringMatching(
+            /Variant\(s\) that did not stabilize: [^\n]*\bsize\b/,
+          ),
+        );
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringMatching(
+            /Latest variant changes before warning: [^\n]*\bsize: "(sm|lg)" -> "(sm|lg)"/,
+          ),
+        );
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringContaining("Component created at:"),
+        );
       } finally {
         warn.mockRestore();
       }
@@ -765,6 +910,187 @@ for (const config of Object.values(CONFIGS)) {
       }
     });
 
+    test("refine warning names the variant key that did not stabilize", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: {
+            size: { sm: "sm", lg: "lg" },
+            color: { red: "red", blue: "blue" },
+          },
+          defaultVariants: { size: "sm", color: "red" },
+          refine: ({ variants, setVariants }) => {
+            setVariants({ size: variants.size === "sm" ? "lg" : "sm" });
+          },
+        }),
+      );
+
+      try {
+        component();
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringMatching(
+            /Variant\(s\) that did not stabilize: [^\n]*\bsize\b/,
+          ),
+        );
+        expect(warn).toHaveBeenCalledWith(
+          expect.not.stringMatching(
+            /Variant\(s\) that did not stabilize: [^\n]*\bcolor\b/,
+          ),
+        );
+      } finally {
+        warn.mockRestore();
+      }
+    });
+
+    test("refine warning reports keys that oscillate at different cadences", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      // `size` flips every iteration, `color` flips every other iteration, so
+      // the final pair may agree on one of them — the warning must still name
+      // both keys because each contributed to a transition.
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: {
+            size: { sm: "sm", lg: "lg" },
+            color: { red: "red", blue: "blue" },
+          },
+          defaultVariants: { size: "sm", color: "red" },
+          refine: ({ variants, setVariants }) => {
+            setVariants({
+              size: variants.size === "sm" ? "lg" : "sm",
+              color:
+                variants.size === "sm"
+                  ? variants.color === "red"
+                    ? "blue"
+                    : "red"
+                  : variants.color,
+            });
+          },
+        }),
+      );
+
+      try {
+        component();
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringMatching(
+            /Variant\(s\) that did not stabilize: [^\n]*\bsize\b/,
+          ),
+        );
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringMatching(
+            /Variant\(s\) that did not stabilize: [^\n]*\bcolor\b/,
+          ),
+        );
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringMatching(
+            /Latest variant changes before warning: [^\n]*\bsize\b[^\n]*\bcolor\b/,
+          ),
+        );
+      } finally {
+        warn.mockRestore();
+      }
+    });
+
+    test("refine warning includes the component creation stack", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: { size: { sm: "sm", lg: "lg" } },
+          defaultVariants: { size: "sm" },
+          refine: ({ variants, setVariants }) => {
+            setVariants({ size: variants.size === "sm" ? "lg" : "sm" });
+          },
+        }),
+      );
+
+      try {
+        component();
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringContaining("Component created at:"),
+        );
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringContaining("refine.test.ts"),
+        );
+        expect(warn).toHaveBeenCalledWith(
+          expect.not.stringContaining("node_modules"),
+        );
+      } finally {
+        warn.mockRestore();
+      }
+    });
+
+    test("refine warning fallback stack skips internal creation frames", () => {
+      const ErrorWithCaptureStackTrace = Error as ErrorConstructor & {
+        captureStackTrace?: (
+          targetObject: object,
+          constructorOpt?: Function,
+        ) => void;
+      };
+      const captureStackTrace = ErrorWithCaptureStackTrace.captureStackTrace;
+      Reflect.deleteProperty(ErrorWithCaptureStackTrace, "captureStackTrace");
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: { size: { sm: "sm", lg: "lg" } },
+          defaultVariants: { size: "sm" },
+          refine: ({ variants, setVariants }) => {
+            setVariants({ size: variants.size === "sm" ? "lg" : "sm" });
+          },
+        }),
+      );
+
+      try {
+        component();
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringContaining("Component created at:"),
+        );
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringContaining("refine.test.ts"),
+        );
+        expect(warn).toHaveBeenCalledWith(
+          expect.not.stringContaining("captureCreationFrame"),
+        );
+      } finally {
+        if (captureStackTrace) {
+          ErrorWithCaptureStackTrace.captureStackTrace = captureStackTrace;
+        }
+        warn.mockRestore();
+      }
+    });
+
+    test("refine warning omits the creation stack when cv ran in production", () => {
+      let captured = "";
+      const warn = vi
+        .spyOn(console, "warn")
+        .mockImplementation((message: unknown) => {
+          captured = String(message);
+        });
+      vi.stubEnv("NODE_ENV", "production");
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: { size: { sm: "sm", lg: "lg" } },
+          defaultVariants: { size: "sm" },
+          refine: ({ variants, setVariants }) => {
+            setVariants({ size: variants.size === "sm" ? "lg" : "sm" });
+          },
+        }),
+      );
+
+      try {
+        vi.unstubAllEnvs();
+        component();
+        expect(captured).toContain("Maximum refine iterations exceeded");
+        expect(captured).not.toContain("Component created at:");
+      } finally {
+        vi.unstubAllEnvs();
+        warn.mockRestore();
+      }
+    });
+
     test("refine setDefaultVariants when explicitly passing undefined", () => {
       const component = getModeComponent(
         mode,