clava 0.2.4 → 0.3.0

package/tests/computed.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, test } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 import {
   CONFIGS,
   createCVFromConfig,
@@ -47,6 +47,84 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("lg red") });
     });
 
+    test("computed re-runs when it changes variants", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: {
+            size: { sm: "sm", lg: "lg" },
+            color: { red: "red", blue: "blue" },
+          },
+          computed: ({ variants, setVariants, addClass }) => {
+            if (variants.size === "lg") {
+              setVariants({ color: "red" });
+            }
+            if (variants.color === "red") {
+              addClass("computed-red");
+            }
+          },
+        }),
+      );
+      const props = component({ size: "lg" });
+      expect(getStyleClass(props)).toEqual({
+        class: cls("lg red computed-red"),
+      });
+    });
+
+    test("computed re-runs when setDefaultVariants changes variants", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: {
+            size: { sm: "sm", lg: "lg" },
+            color: { red: "red", blue: "blue" },
+          },
+          computed: ({ variants, setDefaultVariants, addClass }) => {
+            setDefaultVariants({ color: "red" });
+            if (variants.color === "red") {
+              setDefaultVariants({ size: "lg" });
+            }
+            if (variants.size === "lg") {
+              addClass("computed-lg");
+            }
+          },
+        }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({
+        class: cls("lg red computed-lg"),
+      });
+    });
+
+    test("computed converges with NaN setDefaultVariants", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      const component = getModeComponent(
+        mode,
+        cv({
+          computedVariants: {
+            value: (value: number) => (Number.isNaN(value) ? "nan" : null),
+          },
+          computed: ({ variants, setDefaultVariants, addClass }) => {
+            setDefaultVariants({ value: Number.NaN });
+            if (Number.isNaN(variants.value)) {
+              addClass("computed-nan");
+            }
+          },
+        }),
+      );
+
+      try {
+        const props = component();
+        expect(getStyleClass(props)).toEqual({
+          class: cls("nan computed-nan"),
+        });
+        expect(component.getVariants()).toEqual({ value: Number.NaN });
+        expect(warn).not.toHaveBeenCalled();
+      } finally {
+        warn.mockRestore();
+      }
+    });
+
     test("computed with setDefaultVariants", () => {
       const component = getModeComponent(
         mode,
@@ -348,6 +426,351 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("sm red") });
     });
 
+    test("computed re-runs when base component computed changes variants", () => {
+      const base = cv({
+        variants: { size: { sm: "sm", lg: "lg" }, active: "" },
+        defaultVariants: { size: "sm" },
+        computed: ({ variants, setVariants }) => {
+          if (variants.active) {
+            setVariants({ size: "lg" });
+          }
+        },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { color: { red: "red", blue: "blue" } },
+          computed: ({ variants, setVariants }) => {
+            if (variants.size === "lg") {
+              setVariants({ color: "red" });
+            }
+          },
+        }),
+      );
+      const props = component({ active: true });
+      expect(getStyleClass(props)).toEqual({ class: cls("lg red") });
+    });
+
+    test("base computed setDefaultVariants works after its own setVariants re-run", () => {
+      const base = cv({
+        variants: {
+          size: { sm: "sm", lg: "lg" },
+          active: "",
+          mode: { on: "on" },
+        },
+        defaultVariants: { size: "sm" },
+        computed: ({ variants, setVariants, setDefaultVariants }) => {
+          if (variants.active) {
+            setVariants({ mode: "on" });
+          }
+          if (variants.mode === "on") {
+            setDefaultVariants({ size: "lg" });
+          }
+        },
+      });
+      const component = getModeComponent(mode, cv({ extend: [base] }));
+      const props = component({ active: true });
+      expect(getStyleClass(props)).toEqual({ class: cls("lg on") });
+    });
+
+    test("computed setVariants uses the latest pending value", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: { size: { sm: "sm", lg: "lg" } },
+          defaultVariants: { size: "sm" },
+          computed: ({ setVariants }) => {
+            setVariants({ size: "lg" });
+            setVariants({ size: "sm" });
+          },
+        }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: cls("sm") });
+    });
+
+    test("computed setVariants does not mutate props with plain extends", () => {
+      const base = cv({
+        variants: { color: { red: "red", blue: "blue" } },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { active: "" },
+          computed: ({ variants, setVariants }) => {
+            if (variants.active) {
+              setVariants({ color: "red" });
+            }
+          },
+        }),
+      );
+      const mutableProps = { active: true };
+      component(mutableProps);
+      expect(mutableProps).toEqual({ active: true });
+
+      const frozenProps = Object.freeze({ active: true });
+      const getProps = () => component(frozenProps);
+      expect(getProps).not.toThrow();
+      expect(getStyleClass(getProps())).toEqual({ class: cls("red") });
+    });
+
+    test("child setVariants keeps overriding base setDefaultVariants across re-runs", () => {
+      const base = cv({
+        variants: { color: { red: "red", blue: "blue" } },
+        computed: ({ setDefaultVariants }) => {
+          setDefaultVariants({ color: "blue" });
+        },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { size: { sm: "sm", lg: "lg" } },
+          defaultVariants: { size: "sm" },
+          computed: ({ variants, setVariants }) => {
+            if (variants.size === "sm") {
+              setVariants({ color: "red" });
+            }
+          },
+        }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: cls("red sm") });
+    });
+
+    test("computed setVariants sticks across re-runs", () => {
+      const base = cv({
+        variants: { color: { red: "red", blue: "blue" } },
+        computed: ({ setDefaultVariants }) => {
+          setDefaultVariants({ color: "blue" });
+        },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { color: { red: "", blue: "" }, done: "" },
+          computed: ({ variants, setVariants }) => {
+            if (!variants.done) {
+              setVariants({ color: "red", done: true });
+            }
+          },
+        }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: cls("red") });
+    });
+
+    test("base computed setDefaultVariants can override child static defaults after a re-run", () => {
+      const base = cv({
+        variants: {
+          size: { sm: "sm", lg: "lg" },
+          active: "",
+          mode: { on: "on" },
+        },
+        computed: ({ variants, setVariants, setDefaultVariants }) => {
+          if (variants.active) {
+            setVariants({ mode: "on" });
+          }
+          if (variants.mode === "on") {
+            setDefaultVariants({ size: "lg" });
+          }
+        },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({ extend: [base], defaultVariants: { size: "sm" } }),
+      );
+      const props = component({ active: true });
+      expect(getStyleClass(props)).toEqual({ class: cls("lg on") });
+    });
+
+    test("setVariants from earlier extends overrides setDefaultVariants from later extends", () => {
+      const first = cv({
+        variants: { color: { red: "first-red", blue: "first-blue" } },
+        computed: ({ setVariants }) => {
+          setVariants({ color: "red" });
+        },
+      });
+      const second = cv({
+        variants: { color: { red: "second-red", blue: "second-blue" } },
+        computed: ({ setDefaultVariants }) => {
+          setDefaultVariants({ color: "blue" });
+        },
+      });
+      const component = getModeComponent(mode, cv({ extend: [first, second] }));
+      const props = component();
+      expect(getStyleClass(props)).toEqual({
+        class: cls("first-red second-red"),
+      });
+    });
+
+    test("setDefaultVariants from later extends overrides setDefaultVariants from earlier extends", () => {
+      const first = cv({
+        variants: { color: { red: "first-red", blue: "first-blue" } },
+        computed: ({ setDefaultVariants }) => {
+          setDefaultVariants({ color: "red" });
+        },
+      });
+      const second = cv({
+        variants: { color: { red: "second-red", blue: "second-blue" } },
+        computed: ({ setDefaultVariants }) => {
+          setDefaultVariants({ color: "blue" });
+        },
+      });
+      const component = getModeComponent(mode, cv({ extend: [first, second] }));
+      const props = component();
+      expect(getStyleClass(props)).toEqual({
+        class: cls("first-blue second-blue"),
+      });
+    });
+
+    test("setDefaultVariants does not override stable setVariants on later passes", () => {
+      const base = cv({
+        variants: { color: { red: "base-red", blue: "base-blue" } },
+        computed: ({ setVariants }) => {
+          setVariants({ color: "red" });
+        },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { color: { red: "child-red", blue: "child-blue" } },
+          computed: ({ variants, setDefaultVariants }) => {
+            if (variants.color === "red") {
+              setDefaultVariants({ color: "blue" });
+            }
+          },
+        }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({
+        class: cls("base-red child-red"),
+      });
+    });
+
+    test("setDefaultVariants does not override setVariants from a previous pass", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: {
+            color: { red: "red", blue: "blue" },
+            done: "",
+          },
+          computed: ({ variants, setVariants, setDefaultVariants }) => {
+            if (!variants.done) {
+              setVariants({ color: "red", done: true });
+            }
+            if (variants.done) {
+              setDefaultVariants({ color: "blue" });
+            }
+          },
+        }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: cls("red") });
+    });
+
+    test("computed warns when variants keep changing", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: { size: { sm: "sm", lg: "lg" } },
+          defaultVariants: { size: "sm" },
+          computed: ({ variants, setVariants }) => {
+            setVariants({ size: variants.size === "sm" ? "lg" : "sm" });
+          },
+        }),
+      );
+
+      try {
+        component();
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringContaining(
+            "Maximum computed update iterations exceeded",
+          ),
+        );
+      } finally {
+        warn.mockRestore();
+      }
+    });
+
+    test("computed warning is shared across extended components", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      const base = cv({
+        variants: { size: { sm: "sm", lg: "lg" } },
+        defaultVariants: { size: "sm" },
+        computed: ({ variants, setVariants }) => {
+          setVariants({ size: variants.size === "sm" ? "lg" : "sm" });
+        },
+      });
+      const component = getModeComponent(mode, cv({ extend: [base] }));
+
+      try {
+        component();
+        expect(warn).toHaveBeenCalledTimes(1);
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringContaining(
+            "Maximum computed update iterations exceeded",
+          ),
+        );
+      } finally {
+        warn.mockRestore();
+      }
+    });
+
+    test("getVariants warns when variants keep changing", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: { size: { sm: "sm", lg: "lg" } },
+          defaultVariants: { size: "sm" },
+          computed: ({ variants, setVariants }) => {
+            setVariants({ size: variants.size === "sm" ? "lg" : "sm" });
+          },
+        }),
+      );
+
+      try {
+        component.getVariants();
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringContaining(
+            "Maximum computed update iterations exceeded",
+          ),
+        );
+      } finally {
+        warn.mockRestore();
+      }
+    });
+
+    test("computed warning is omitted in production", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      vi.stubEnv("NODE_ENV", "production");
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: { size: { sm: "sm", lg: "lg" } },
+          defaultVariants: { size: "sm" },
+          computed: ({ variants, setVariants }) => {
+            setVariants({ size: variants.size === "sm" ? "lg" : "sm" });
+          },
+        }),
+      );
+
+      try {
+        component();
+        expect(warn).not.toHaveBeenCalled();
+      } finally {
+        vi.unstubAllEnvs();
+        warn.mockRestore();
+      }
+    });
+
     test("computed setDefaultVariants when explicitly passing undefined", () => {
       const component = getModeComponent(
         mode,

package/tests/solid.test.ts

@@ -1,4 +1,5 @@
 import type { ComponentProps, JSX } from "solid-js";
+import { splitProps as splitSolidProps } from "solid-js";
 import { expect, expectTypeOf, test } from "vitest";
 import { type VariantProps, cv, splitProps } from "../src/index.ts";
 import { type HTMLObjProps } from "../src/types.ts";
@@ -32,3 +33,32 @@ test("component props", () => {
     style: { "font-size": "16px" },
   });
 });
+
+test("solid splitProps accepts html propKeys", () => {
+  const component = cv({ variants: { size: { sm: "sm", md: "md" } } });
+  expect(component.html.propKeys).toEqual(["class", "style", "size"]);
+
+  interface Props
+    extends ComponentProps<"button">, VariantProps<typeof component> {}
+  const props: Props = { class: "custom", size: "md", id: "my-button" };
+
+  const [variantProps, rest] = splitSolidProps(props, component.html.propKeys);
+  expect(variantProps).toEqual({ class: "custom", size: "md" });
+  expect(rest).toEqual({ id: "my-button" });
+});
+
+test("solid splitProps accepts htmlObj propKeys", () => {
+  const component = cv({ variants: { size: { sm: "sm", md: "md" } } });
+  expect(component.htmlObj.propKeys).toEqual(["class", "style", "size"]);
+
+  interface Props
+    extends ComponentProps<"button">, VariantProps<typeof component> {}
+  const props: Props = { class: "custom", size: "md", id: "my-button" };
+
+  const [variantProps, rest] = splitSolidProps(
+    props,
+    component.htmlObj.propKeys,
+  );
+  expect(variantProps).toEqual({ class: "custom", size: "md" });
+  expect(rest).toEqual({ id: "my-button" });
+});

package/tests/split-props.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, expectTypeOf, test } from "vitest";
-import { splitProps } from "../src/index.ts";
+import { cv, splitProps } from "../src/index.ts";
 import {
   CONFIGS,
   type HTMLProperties,
@@ -588,3 +588,75 @@ for (const config of Object.values(CONFIGS)) {
     });
   });
 }
+
+test.each([
+  [
+    "missing getVariants",
+    {
+      propKeys: ["size"],
+      variantKeys: ["size"],
+    },
+  ],
+  [
+    "non-callable getVariants",
+    {
+      getVariants: true,
+      propKeys: ["size"],
+      variantKeys: ["size"],
+    },
+  ],
+  [
+    "non-array propKeys",
+    {
+      getVariants: () => ({}),
+      propKeys: null,
+      variantKeys: ["size"],
+    },
+  ],
+] as const)(
+  "splitProps ignores malformed component-like sources: %s",
+  (_, malformedSource) => {
+    const props = { id: "test", size: "lg" };
+
+    const [sourceProps, otherProps] = splitProps(
+      props,
+      // @ts-expect-error malformed source
+      malformedSource,
+    );
+    expect(sourceProps).toEqual({});
+    expect(otherProps).toEqual(props);
+  },
+);
+
+test("splitProps ignores sources with malformed variantKeys", () => {
+  const component = cv({ variants: { size: { sm: "sm", lg: "lg" } } });
+  const props = { id: "test", size: "lg", color: "red" };
+  const malformedSource = {
+    getVariants: () => ({}),
+    propKeys: ["color"],
+    variantKeys: null,
+  };
+
+  const result = splitProps(
+    props,
+    component,
+    // @ts-expect-error malformed source
+    malformedSource,
+  ) as unknown[];
+  expect(result).toEqual([{ size: "lg" }, {}, { id: "test", color: "red" }]);
+});
+
+test("splitProps type rejects non-string component source keys", () => {
+  const props = { size: "lg" };
+  const symbolKey = Symbol("size");
+
+  const [sourceProps, otherProps] = splitProps(props, {
+    getVariants: () => ({}),
+    // @ts-expect-error component source keys must be strings
+    propKeys: [symbolKey],
+    // @ts-expect-error component source keys must be strings
+    variantKeys: [1],
+  });
+  expect(sourceProps).toEqual({});
+  expect(otherProps).toEqual(props);
+});