clava 0.4.0 → 0.4.1

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,92 @@
 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("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.test.ts

@@ -714,6 +714,14 @@ 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.stringContaining("Component created at:"),
+        );
       } finally {
         warn.mockRestore();
       }
@@ -737,6 +745,14 @@ 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.stringContaining("Component created at:"),
+        );
       } finally {
         warn.mockRestore();
       }
@@ -765,6 +781,139 @@ 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/,
+          ),
+        );
+      } 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"),
+        );
+      } finally {
+        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,