clava 0.2.4 → 0.4.0

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);
+});

package/tests/variants-inference.test.ts

@@ -0,0 +1,252 @@
+import { describe, expectTypeOf, test } from "vitest";
+import { cv } from "../src/index.ts";
+
+describe("variants type inference", () => {
+  test("function variant infers parameter type as prop type", () => {
+    const button = cv({
+      variants: {
+        size: (value: number) => `size-${value}`,
+      },
+    });
+    expectTypeOf(button.getVariants()).branded.toEqualTypeOf<{
+      size?: number;
+    }>();
+    button({ size: 3 });
+    button({
+      // @ts-expect-error string is not assignable to number
+      size: "lg",
+    });
+  });
+
+  test("function variant infers union parameter type", () => {
+    const button = cv({
+      variants: {
+        tone: (value: "info" | "warn") => `tone-${value}`,
+      },
+    });
+    expectTypeOf(button.getVariants()).branded.toEqualTypeOf<{
+      tone?: "info" | "warn";
+    }>();
+    button({ tone: "info" });
+    button({ tone: "warn" });
+    button({
+      // @ts-expect-error "danger" is not in the union
+      tone: "danger",
+    });
+  });
+
+  test("function variant infers boolean parameter type", () => {
+    const button = cv({
+      variants: {
+        active: (value: boolean) => (value ? "active" : "idle"),
+      },
+    });
+    expectTypeOf(button.getVariants()).branded.toEqualTypeOf<{
+      active?: boolean;
+    }>();
+    button({ active: true });
+    button({ active: false });
+    button({
+      // @ts-expect-error string is not assignable to boolean
+      active: "yes",
+    });
+  });
+
+  test("function variant accepts nullable parameter", () => {
+    const c = cv({
+      variants: {
+        color: (value: string | null) => (value ? `c-${value}` : "c-default"),
+      },
+    });
+    expectTypeOf(c.getVariants()).branded.toEqualTypeOf<{
+      color?: string | null;
+    }>();
+    c({ color: "red" });
+    c({ color: null });
+  });
+
+  test("mixed function and object variants infer independently", () => {
+    const c = cv({
+      variants: {
+        size: (value: number) => `s-${value}`,
+        color: { red: "r", blue: "b" },
+      },
+    });
+    expectTypeOf(c.getVariants()).branded.toEqualTypeOf<{
+      size?: number;
+      color?: "red" | "blue";
+    }>();
+    c({ size: 3, color: "red" });
+    c({
+      // @ts-expect-error number expected
+      size: "3",
+    });
+    c({
+      // @ts-expect-error "yellow" not in object keys
+      color: "yellow",
+    });
+  });
+
+  test("function variant in child overrides object variant in parent", () => {
+    const base = cv({ variants: { size: { sm: "sm", lg: "lg" } } });
+    const child = cv({
+      extend: [base],
+      variants: { size: (value: number) => `s-${value}` },
+    });
+    expectTypeOf(child.getVariants()).branded.toEqualTypeOf<{
+      size?: number;
+    }>();
+    child({ size: 3 });
+    child({
+      // @ts-expect-error string is not assignable to number after override
+      size: "sm",
+    });
+  });
+
+  test("object variant in child overrides function variant in parent", () => {
+    const base = cv({ variants: { size: (value: number) => `s-${value}` } });
+    const child = cv({
+      extend: [base],
+      variants: { size: { sm: "child-sm", lg: "child-lg" } },
+    });
+    expectTypeOf(child.getVariants()).branded.toEqualTypeOf<{
+      size?: "sm" | "lg";
+    }>();
+    child({ size: "sm" });
+    child({
+      // @ts-expect-error number is not assignable to "sm" | "lg" after override
+      size: 3,
+    });
+  });
+
+  test("object variant in child merges with object variant in parent", () => {
+    const base = cv({ variants: { size: { sm: "base-sm", md: "base-md" } } });
+    const child = cv({
+      extend: [base],
+      variants: { size: { lg: "child-lg" } },
+    });
+    expectTypeOf(child.getVariants()).branded.toEqualTypeOf<{
+      size?: "sm" | "md" | "lg";
+    }>();
+    child({ size: "sm" });
+    child({ size: "md" });
+    child({ size: "lg" });
+    child({
+      // @ts-expect-error not in merged keys
+      size: "xl",
+    });
+  });
+
+  test("function variant in parent inherits in child without override", () => {
+    const base = cv({
+      variants: { size: (value: number) => `s-${value}` },
+    });
+    const child = cv({
+      extend: [base],
+      variants: { color: { red: "r" } },
+    });
+    expectTypeOf(child.getVariants()).branded.toEqualTypeOf<{
+      size?: number;
+      color?: "red";
+    }>();
+    child({ size: 5, color: "red" });
+    child({
+      // @ts-expect-error inherited size is still number
+      size: "5",
+    });
+  });
+
+  test("defaultVariants infers types from merged variants", () => {
+    cv({
+      variants: {
+        size: (value: number) => `s-${value}`,
+        color: { red: "r", blue: "b" },
+      },
+      defaultVariants: { size: 3, color: "red" },
+    });
+    cv({
+      variants: { size: (value: number) => `s-${value}` },
+      defaultVariants: {
+        // @ts-expect-error string is not assignable to number
+        size: "3",
+      },
+    });
+  });
+
+  test("refine callback sees function variant param type", () => {
+    cv({
+      variants: { size: (value: number) => `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: {
+        a: (_: number) => "class-a",
+        b: (_: number) => null,
+        c: (_: number) => undefined,
+        d: (_: number) => ["x", "y"],
+        e: (_: number) => ({ class: "c", style: { color: "red" } }),
+        f: (_: number) => ({ style: { color: "red" } }),
+      },
+    });
+  });
+
+  test("variantKeys includes function variant keys", () => {
+    const c = cv({
+      variants: {
+        size: { sm: "sm" },
+        columns: (value: number) => `cols-${value}`,
+      },
+    });
+    expectTypeOf(c.variantKeys).toEqualTypeOf<("size" | "columns")[]>();
+  });
+
+  test("intermediate object variant hides grandparent function variant from descendants", () => {
+    const base = cv({
+      variants: { size: (value: number) => `s-${value}` },
+    });
+    const middle = cv({
+      extend: [base],
+      variants: { size: { sm: "middle-sm", md: "middle-md" } },
+    });
+    // Descendant has no own `size` — it should inherit `middle`'s object,
+    // not the grandparent function. The intersection used to leak through.
+    const descendant = cv({ extend: [middle] });
+    expectTypeOf(descendant.getVariants()).branded.toEqualTypeOf<{
+      size?: "sm" | "md";
+    }>();
+    descendant({ size: "sm" });
+    descendant({
+      // @ts-expect-error grandparent function is no longer in the chain
+      size: 3,
+    });
+  });
+
+  test("null disables inherited function variant", () => {
+    const base = cv({
+      variants: {
+        size: (value: number) => `s-${value}`,
+      },
+    });
+    const child = cv({
+      extend: [base],
+      variants: { size: null },
+    });
+    expectTypeOf(child.getVariants()).branded.toEqualTypeOf<{
+      size?: never;
+    }>();
+    child({
+      // @ts-expect-error size was disabled
+      size: 1,
+    });
+  });
+});