clava 0.5.0 → 0.6.0

package/tests/refine.test.ts

@@ -81,7 +81,7 @@ for (const config of Object.values(CONFIGS)) {
           },
           defaultVariants: {
             color: () => "red" as const,
-            size: ({ defaultValue, variants }) =>
+            size: (defaultValue, variants) =>
               variants.color === "red" ? "lg" : defaultValue,
           },
           refine: ({ variants, addClass }) => {
@@ -98,7 +98,7 @@ for (const config of Object.values(CONFIGS)) {
     });
 
     test("refine converges with NaN computed defaultVariants", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       const component = getModeComponent(
         mode,
         cv({
@@ -116,20 +116,16 @@ for (const config of Object.values(CONFIGS)) {
         }),
       );
 
-      try {
-        const props = component();
-        expect(getStyleClass(props)).toEqual({
-          class: cls("nan refine-nan"),
-        });
-        expect(component.getVariants()).toEqual({ value: Number.NaN });
-        expect(warn).not.toHaveBeenCalled();
-      } finally {
-        warn.mockRestore();
-      }
+      const props = component();
+      expect(getStyleClass(props)).toEqual({
+        class: cls("nan refine-nan"),
+      });
+      expect(component.getVariants()).toEqual({ value: Number.NaN });
+      expect(warn).not.toHaveBeenCalled();
     });
 
     test("computed defaultVariants can clear inherited defaults", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       const base = cv({
         variants: {
           invert: { true: "invert" },
@@ -139,28 +135,24 @@ for (const config of Object.values(CONFIGS)) {
             value === undefined ? undefined : `push-${value}`,
         },
         defaultVariants: {
-          offset: ({ variants }) => !variants.invert,
-          push: ({ variants }) => (variants.invert ? 20 : undefined),
+          offset: (_, variants) => !variants.invert,
+          push: (_, variants) => (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,
-        });
-        expect(warn).not.toHaveBeenCalled();
-      } finally {
-        warn.mockRestore();
-      }
+      const props = component();
+      expect(getStyleClass(props)).toEqual({
+        class: cls("offset"),
+      });
+      expect(component.getVariants()).toEqual({
+        offset: true,
+      });
+      expect(warn).not.toHaveBeenCalled();
     });
 
     test("computed defaultVariants use inherited defaults as defaultValue", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       const calls = {
         layer: 0,
         frame: 0,
@@ -177,11 +169,11 @@ for (const config of Object.values(CONFIGS)) {
         },
         defaultVariants: {
           layer: true,
-          offset: ({ defaultValue, variants }) => {
+          offset: (defaultValue, variants) => {
             calls.layer += 1;
             return variants.invert ? false : defaultValue;
           },
-          push: ({ variants }) => (variants.invert ? 20 : undefined),
+          push: (_, variants) => (variants.invert ? 20 : undefined),
         },
       });
       const frame = cv({
@@ -211,24 +203,20 @@ for (const config of Object.values(CONFIGS)) {
       });
       const component = getModeComponent(mode, cv({ extend: [control] }));
 
-      try {
-        const props = component();
-        expect(getStyleClass(props)).toEqual({
-          class: cls("layer offset frame control"),
-        });
-        expect(component.getVariants()).toEqual({
-          layer: true,
-          offset: true,
-          frame: true,
-          control: true,
-        });
-        expect(calls.layer).toBeGreaterThan(0);
-        expect(calls.frame).toBeGreaterThan(0);
-        expect(calls.control).toBeGreaterThan(0);
-        expect(warn).not.toHaveBeenCalled();
-      } finally {
-        warn.mockRestore();
-      }
+      const props = component();
+      expect(getStyleClass(props)).toEqual({
+        class: cls("layer offset frame control"),
+      });
+      expect(component.getVariants()).toEqual({
+        layer: true,
+        offset: true,
+        frame: true,
+        control: true,
+      });
+      expect(calls.layer).toBeGreaterThan(0);
+      expect(calls.frame).toBeGreaterThan(0);
+      expect(calls.control).toBeGreaterThan(0);
+      expect(warn).not.toHaveBeenCalled();
     });
 
     test("computed defaultVariants", () => {
@@ -240,7 +228,7 @@ for (const config of Object.values(CONFIGS)) {
             color: { red: "red", blue: "blue" },
           },
           defaultVariants: {
-            color: ({ variants, defaultValue }) =>
+            color: (defaultValue, variants) =>
               variants.size === "lg" ? "red" : defaultValue,
           },
         }),
@@ -309,7 +297,7 @@ for (const config of Object.values(CONFIGS)) {
       const base = cv({
         variants: { size: { sm: "sm", lg: "lg" }, large: "" },
         defaultVariants: {
-          size: ({ defaultValue, variants }) =>
+          size: (defaultValue, variants) =>
             variants.large ? "lg" : defaultValue,
         },
       });
@@ -329,7 +317,7 @@ for (const config of Object.values(CONFIGS)) {
       const parent = cv({
         variants: { size: { sm: "sm", lg: "lg" } },
         defaultVariants: {
-          size: ({ defaultValue, variants }) =>
+          size: (defaultValue, variants) =>
             variants.size ? defaultValue : "lg",
         },
       });
@@ -373,7 +361,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           defaultVariants: {
-            size: ({ defaultValue }) => defaultValue,
+            size: (defaultValue) => defaultValue,
           },
         }),
       );
@@ -415,7 +403,7 @@ for (const config of Object.values(CONFIGS)) {
       const base = cv({
         variants: { size: { sm: "sm", lg: "lg" } },
         defaultVariants: {
-          size: ({ defaultValue, variants }) =>
+          size: (defaultValue, variants) =>
             "color" in (variants as Record<string, unknown>)
               ? "lg"
               : defaultValue,
@@ -450,7 +438,7 @@ for (const config of Object.values(CONFIGS)) {
           extend: [base],
           variants: { color: { red: "red", blue: "blue" } },
           defaultVariants: {
-            size: ({ defaultValue, variants }) =>
+            size: (defaultValue, variants) =>
               variants.small ? "sm" : defaultValue,
             color: "red",
           },
@@ -494,7 +482,7 @@ for (const config of Object.values(CONFIGS)) {
           mode: { on: "on" },
         },
         defaultVariants: {
-          size: ({ defaultValue, variants }) =>
+          size: (defaultValue, variants) =>
             variants.mode === "on" ? "lg" : defaultValue,
         },
         refine: ({ variants, setVariants }) => {
@@ -605,7 +593,7 @@ for (const config of Object.values(CONFIGS)) {
           mode: { on: "on" },
         },
         defaultVariants: {
-          size: ({ defaultValue, variants }) =>
+          size: (defaultValue, variants) =>
             variants.mode === "on" ? "lg" : defaultValue,
         },
         refine: ({ variants, setVariants }) => {
@@ -630,8 +618,7 @@ for (const config of Object.values(CONFIGS)) {
         },
         defaultVariants: {
           b: true,
-          a: ({ defaultValue, variants }) =>
-            variants.b ? "one" : defaultValue,
+          a: (defaultValue, variants) => (variants.b ? "one" : defaultValue),
         },
         refine: ({ variants, setVariants }) => {
           if (variants.b) {
@@ -701,7 +688,7 @@ for (const config of Object.values(CONFIGS)) {
           extend: [base],
           variants: { color: { red: "child-red", blue: "child-blue" } },
           defaultVariants: {
-            color: ({ defaultValue, variants }) =>
+            color: (defaultValue, variants) =>
               variants.color === "red" ? "blue" : defaultValue,
           },
         }),
@@ -721,7 +708,7 @@ for (const config of Object.values(CONFIGS)) {
             done: "",
           },
           defaultVariants: {
-            color: ({ defaultValue, variants }) =>
+            color: (defaultValue, variants) =>
               variants.done ? "blue" : defaultValue,
           },
           refine: ({ variants, setVariants }) => {
@@ -736,7 +723,7 @@ for (const config of Object.values(CONFIGS)) {
     });
 
     test("refine warns when variants keep changing", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       const component = getModeComponent(
         mode,
         cv({
@@ -748,18 +735,14 @@ for (const config of Object.values(CONFIGS)) {
         }),
       );
 
-      try {
-        component();
-        expect(warn).toHaveBeenCalledWith(
-          expect.stringContaining("Maximum refine iterations exceeded"),
-        );
-      } finally {
-        warn.mockRestore();
-      }
+      component();
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringContaining("Maximum refine iterations exceeded"),
+      );
     });
 
     test("refine warning is shared across extended components", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       const base = cv({
         variants: { size: { sm: "sm", lg: "lg" } },
         defaultVariants: { size: "sm" },
@@ -769,32 +752,28 @@ for (const config of Object.values(CONFIGS)) {
       });
       const component = getModeComponent(mode, cv({ extend: [base] }));
 
-      try {
-        component();
-        expect(warn).toHaveBeenCalledTimes(1);
-        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();
-      }
+      component();
+      expect(warn).toHaveBeenCalledTimes(1);
+      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:"),
+      );
     });
 
     test("getVariants warns when variants keep changing", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       const component = getModeComponent(
         mode,
         cv({
@@ -806,31 +785,27 @@ for (const config of Object.values(CONFIGS)) {
         }),
       );
 
-      try {
-        component.getVariants();
-        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();
-      }
+      component.getVariants();
+      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:"),
+      );
     });
 
     test("refine warning is omitted in production", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       vi.stubEnv("NODE_ENV", "production");
       const component = getModeComponent(
         mode,
@@ -848,12 +823,11 @@ for (const config of Object.values(CONFIGS)) {
         expect(warn).not.toHaveBeenCalled();
       } finally {
         vi.unstubAllEnvs();
-        warn.mockRestore();
       }
     });
 
     test("refine warning names the variant key that did not stabilize", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       const component = getModeComponent(
         mode,
         cv({
@@ -868,25 +842,21 @@ for (const config of Object.values(CONFIGS)) {
         }),
       );
 
-      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();
-      }
+      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/,
+        ),
+      );
     });
 
     test("refine warning reports keys that oscillate at different cadences", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      using 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.
@@ -912,30 +882,26 @@ for (const config of Object.values(CONFIGS)) {
         }),
       );
 
-      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();
-      }
+      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/,
+        ),
+      );
     });
 
     test("refine warning includes the component creation stack", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       const component = getModeComponent(
         mode,
         cv({
@@ -947,20 +913,16 @@ for (const config of Object.values(CONFIGS)) {
         }),
       );
 
-      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();
-      }
+      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"),
+      );
     });
 
     test("refine warning fallback stack skips internal creation frames", () => {
@@ -972,7 +934,7 @@ for (const config of Object.values(CONFIGS)) {
       };
       const captureStackTrace = ErrorWithCaptureStackTrace.captureStackTrace;
       Reflect.deleteProperty(ErrorWithCaptureStackTrace, "captureStackTrace");
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       const component = getModeComponent(
         mode,
         cv({
@@ -999,17 +961,11 @@ for (const config of Object.values(CONFIGS)) {
         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);
-        });
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       vi.stubEnv("NODE_ENV", "production");
       const component = getModeComponent(
         mode,
@@ -1025,11 +981,11 @@ for (const config of Object.values(CONFIGS)) {
       try {
         vi.unstubAllEnvs();
         component();
-        expect(captured).toContain("Maximum refine iterations exceeded");
-        expect(captured).not.toContain("Component created at:");
+        const message = String(warn.mock.calls.at(-1)?.[0]);
+        expect(message).toContain("Maximum refine iterations exceeded");
+        expect(message).not.toContain("Component created at:");
       } finally {
         vi.unstubAllEnvs();
-        warn.mockRestore();
       }
     });
 

package/tests/variants-inference.test.ts

@@ -20,6 +20,25 @@ describe("variants type inference", () => {
     });
   });
 
+  test("method variant infers optional parameter type as prop type", () => {
+    const grid = cv({
+      variants: {
+        columns(value?: number) {
+          return `columns-${value}`;
+        },
+      },
+    });
+    expectTypeOf(grid.getVariants()).branded.toEqualTypeOf<{
+      columns?: number;
+    }>();
+    grid({ columns: 3 });
+    grid({ columns: undefined });
+    grid({
+      // @ts-expect-error string is not assignable to number
+      columns: "3",
+    });
+  });
+
   test("function variant infers union parameter type", () => {
     const button = cv({
       variants: {
@@ -182,7 +201,7 @@ describe("variants type inference", () => {
         color: { red: "r", blue: "b" },
       },
       defaultVariants: {
-        size: ({ defaultValue, variants }) => {
+        size: (defaultValue, variants) => {
           expectTypeOf(defaultValue).toEqualTypeOf<number | undefined>();
           expectTypeOf(variants.color).toEqualTypeOf<
             "red" | "blue" | undefined
@@ -200,6 +219,37 @@ describe("variants type inference", () => {
     });
   });
 
+  test("computed defaultVariants method infers defaultValue and variants", () => {
+    cv({
+      variants: {
+        compact: { true: "compact", false: "" },
+        size(value?: number) {
+          return `s-${value}`;
+        },
+      },
+      defaultVariants: {
+        size(defaultValue, variants) {
+          expectTypeOf(defaultValue).toEqualTypeOf<number | undefined>();
+          expectTypeOf(variants.compact).toEqualTypeOf<boolean | undefined>();
+          return variants.compact ? 2 : defaultValue;
+        },
+      },
+    });
+    cv({
+      variants: {
+        size(value?: number) {
+          return `s-${value}`;
+        },
+      },
+      defaultVariants: {
+        // @ts-expect-error string is not assignable to number
+        size() {
+          return "10";
+        },
+      },
+    });
+  });
+
   test("function-valued defaultVariants must return the function", () => {
     cv({
       variants: {
@@ -268,6 +318,24 @@ describe("variants type inference", () => {
     });
   });
 
+  test("refine method infers context from method variants", () => {
+    cv({
+      variants: {
+        size(value?: number) {
+          return `s-${value}`;
+        },
+      },
+      refine({ variants, setVariants }) {
+        expectTypeOf(variants.size).toEqualTypeOf<number | undefined>();
+        setVariants({ size: 10 });
+        setVariants({
+          // @ts-expect-error string not assignable to number
+          size: "10",
+        });
+      },
+    });
+  });
+
   test("function variant return type accepts ClassValue and StyleClassValue", () => {
     cv({
       variants: {