clava 0.2.2 → 0.2.4

package/src/types.ts

@@ -248,11 +248,13 @@ type ExtractVariantValue<T> = T extends null
   ? never
   : T extends (value: infer V) => any
     ? V
-    : T extends Record<string, any>
-      ? StringToBoolean<NonNullKeys<T>>
-      : T extends ClassValue
-        ? boolean
-        : never;
+    : T extends readonly unknown[]
+      ? boolean
+      : T extends Record<string, any>
+        ? StringToBoolean<NonNullKeys<T>>
+        : T extends ClassValue
+          ? boolean
+          : never;
 
 export type VariantValues<V> = {
   [K in keyof V]?: ExtractVariantValue<V[K]>;

package/tests/{component-api-test.ts → component-api.test.ts}

@@ -131,6 +131,45 @@ for (const config of Object.values(CONFIGS)) {
       expect(variants).toEqual({ color: "blue" });
     });
 
+    test("getVariants picks up setDefaultVariants from extended component", () => {
+      const base = cv({
+        variants: { size: { sm: "sm", lg: "lg" } },
+        computed: ({ setDefaultVariants }) => {
+          setDefaultVariants({ size: "lg" });
+        },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { color: { red: "red", blue: "blue" } },
+          defaultVariants: { color: "red" },
+        }),
+      );
+      const variants = component.getVariants();
+      expect(variants).toEqual({ size: "lg", color: "red" });
+    });
+
+    test("getVariants picks up setDefaultVariants from grandparent component", () => {
+      const grandparent = cv({
+        variants: { size: { sm: "sm", lg: "lg" } },
+        computed: ({ setDefaultVariants }) => {
+          setDefaultVariants({ size: "lg" });
+        },
+      });
+      const parent = cv({ extend: [grandparent] });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [parent],
+          variants: { color: { red: "red", blue: "blue" } },
+          defaultVariants: { color: "red" },
+        }),
+      );
+      const variants = component.getVariants();
+      expect(variants).toEqual({ size: "lg", color: "red" });
+    });
+
     test("keys returns props keys", () => {
       const component = getModeComponent(
         mode,

package/tests/{computed-test.ts → computed.test.ts}

@@ -267,6 +267,63 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("sm red") });
     });
 
+    test("computed in extended component does not see foreign variant keys", () => {
+      const base = cv({
+        variants: { size: { sm: "sm", lg: "lg" } },
+        defaultVariants: { size: "sm" },
+        computed: ({ variants, addClass }) => {
+          // `color` is added by the parent component below — it must not
+          // leak into base's `ctx.variants`, whose shape is declared as
+          // `{ size }` only.
+          if ("color" in (variants as Record<string, unknown>)) {
+            addClass("base-saw-foreign");
+          } else {
+            addClass("base-no-foreign");
+          }
+        },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { color: { red: "red", blue: "blue" } },
+        }),
+      );
+      const props = component({ color: "red" });
+      expect(getStyleClass(props)).toEqual({
+        class: cls("sm base-no-foreign red"),
+      });
+    });
+
+    test("setDefaultVariants in extended component does not branch on foreign variant keys", () => {
+      // Same shape as the test above, but the base's `computed` reaches
+      // `setDefaultVariants` — covers the resolveDefaults pass (driving
+      // both class output and `getVariants`) rather than the render-time
+      // compute path.
+      const base = cv({
+        variants: { size: { sm: "sm", lg: "lg" } },
+        defaultVariants: { size: "sm" },
+        computed: ({ variants, setDefaultVariants }) => {
+          if ("color" in (variants as Record<string, unknown>)) {
+            setDefaultVariants({ size: "lg" });
+          }
+        },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { color: { red: "red", blue: "blue" } },
+        }),
+      );
+      const props = component({ color: "red" });
+      expect(getStyleClass(props)).toEqual({ class: cls("sm red") });
+      expect(component.getVariants({ color: "red" })).toEqual({
+        size: "sm",
+        color: "red",
+      });
+    });
+
     test("child setDefaultVariants receives computed variants from parent", () => {
       const base = cv({
         variants: { size: { sm: "sm", lg: "lg" }, small: "" },

package/tests/{extend-test.ts → extend.test.ts}

@@ -1,4 +1,5 @@
 import { describe, expect, test } from "vitest";
+import { create } from "../src/index.ts";
 import {
   CONFIGS,
   createCVFromConfig,
@@ -299,3 +300,83 @@ for (const config of Object.values(CONFIGS)) {
     });
   });
 }
+
+describe("non-idempotent transformClass", () => {
+  // A non-idempotent transform: prefixing each word with `tw-`. Applying it
+  // twice yields `tw-tw-foo`, so the engine must invoke it exactly once per
+  // class word — even when extend chains pipe extended base classes back into
+  // a parent's `clsx` and through the same transform at render time.
+  const { cv } = create({
+    transformClass: (className) =>
+      className
+        .split(" ")
+        .filter(Boolean)
+        .map((word) => `tw-${word}`)
+        .join(" "),
+  });
+
+  test("base class is transformed exactly once across single extend", () => {
+    const base = cv({ class: "base" });
+    const component = cv({ extend: [base], class: "extended" });
+    expect(component().class).toBe("tw-base tw-extended");
+  });
+
+  test("base class is transformed exactly once across multi-level extend", () => {
+    const base = cv({ class: "base" });
+    const middle = cv({ extend: [base], class: "middle" });
+    const top = cv({
+      extend: [middle],
+      class: "top",
+      variants: { size: { sm: "sm" } },
+    });
+    expect(top({ size: "sm" }).class).toBe("tw-base tw-middle tw-top tw-sm");
+  });
+});
+
+const toUpperCase = (className: string) => className.toUpperCase();
+const toLowerCase = (className: string) => className.toLowerCase();
+
+describe("extend across `create()` factories", () => {
+  // The extend's own `transformClass` must apply to its own classes even when
+  // the extending component comes from a different `create()` call. The
+  // optimized compute path bypasses the public-component round-trip, so it
+  // detects mixed-factory extends by reference identity and runs the extend's
+  // transform on its contribution before joining.
+  const { cv: cvUpper } = create({ transformClass: toUpperCase });
+  const { cv: cvDefault } = create();
+
+  test("extend's transformClass applies to its base class", () => {
+    const base = cvUpper({ class: "base" });
+    const component = cvDefault({ extend: [base], class: "extended" });
+    expect(component().class).toBe("BASE extended");
+  });
+
+  test("extend's transformClass applies to its variant classes", () => {
+    const base = cvUpper({
+      class: "base",
+      variants: { size: { sm: "sm", lg: "lg" } },
+    });
+    const component = cvDefault({ extend: [base], class: "extended" });
+    expect(component({ size: "sm" }).class).toBe("BASE extended SM");
+  });
+
+  test("extend's transformClass cascades through grandparent chain", () => {
+    const grandparent = cvUpper({ class: "grandparent" });
+    const parent = cvUpper({ extend: [grandparent], class: "parent" });
+    const component = cvDefault({ extend: [parent], class: "child" });
+    expect(component().class).toBe("GRANDPARENT PARENT child");
+  });
+
+  test("parent's transformClass applies on top of extend's transformed output", () => {
+    const { cv: cvLower } = create({ transformClass: toLowerCase });
+    const base = cvUpper({
+      class: "base",
+      variants: { size: { sm: "sm" } },
+    });
+    const component = cvLower({ extend: [base], class: "child" });
+    // The extend uppercases its own contribution, then the parent's
+    // transformClass runs on the joined string and lowercases everything —
+    // mirrors main's `parentTransform(clsx(extTransform(extOutput), …))`.
+    expect(component({ size: "sm" }).class).toBe("base child sm");
+  });
+});

package/tests/prototype-pollution.test.ts

@@ -0,0 +1,47 @@
+import { afterEach, expect, test } from "vitest";
+import { cv } from "../src/index.ts";
+
+const proto = Object.prototype as Record<string, unknown>;
+
+afterEach(() => {
+  for (const key of Object.keys(proto)) {
+    delete proto[key];
+  }
+});
+
+test("getVariants ignores keys inherited from Object.prototype", () => {
+  proto.size = "lg";
+  const component = cv({
+    variants: { size: { sm: "sm", lg: "lg" } },
+    defaultVariants: { size: "sm" },
+  });
+  expect(component.getVariants({})).toEqual({ size: "sm" });
+});
+
+test("render ignores keys inherited from Object.prototype", () => {
+  proto.size = "lg";
+  const component = cv({
+    variants: { size: { sm: "sm", lg: "lg" } },
+    defaultVariants: { size: "sm" },
+  });
+  expect(component({}).class).toBe("sm");
+});
+
+test("extend's resolveDefaults ignores polluted prototype on parent's computed", () => {
+  // Base's computed branches on its own variants.size — if the polluted
+  // "size" key leaks into resolveDefaultsFn's resolvedVariants, the computed
+  // callback would see size = "lg" instead of the staticDefault "sm" and
+  // emit the lg-specific class.
+  proto.size = "lg";
+  const base = cv({
+    variants: { size: { sm: "sm", lg: "lg" } },
+    defaultVariants: { size: "sm" },
+    computed: ({ variants, addClass }) => {
+      if (variants.size === "lg") {
+        addClass("base-lg-detected");
+      }
+    },
+  });
+  const child = cv({ extend: [base], class: "child" });
+  expect(child({}).class).not.toContain("base-lg-detected");
+});

package/tests/{variants-test.ts → variants.test.ts}

@@ -1,4 +1,4 @@
-import { describe, expect, test } from "vitest";
+import { describe, expect, expectTypeOf, test } from "vitest";
 import {
   CONFIGS,
   createCVFromConfig,
@@ -211,6 +211,34 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: "" });
     });
 
+    test("array variant shorthand", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: {
+            interactive: ["interactive", "focusable"],
+          },
+          defaultVariants: { interactive: true },
+        }),
+      );
+      expectTypeOf(component.getVariants()).branded.toEqualTypeOf<{
+        interactive?: boolean;
+      }>();
+      expect(getStyleClass(component())).toEqual({
+        class: cls("interactive focusable"),
+      });
+      expect(getStyleClass(component({ interactive: false }))).toEqual({
+        class: "",
+      });
+      const props = component({
+        // @ts-expect-error array shorthand variants are boolean
+        interactive:
+          // no error
+          "interactive",
+      });
+      expect(getStyleClass(props)).toEqual({ class: "" });
+    });
+
     test("variant style does not accept numbers", () => {
       const component = getModeComponent(
         mode,

package/perfs/component.bench.ts

@@ -1,233 +0,0 @@
-import { bench, describe } from "vitest";
-import { cv, splitProps } from "../src/index.ts";
-
-const options = {
-  time: 2000,
-  warmupTime: 500,
-};
-
-let sink: unknown;
-
-function consume(value: unknown) {
-  sink = value;
-}
-
-const buttonConfig = {
-  class: "button inline-flex items-center justify-center",
-  style: {
-    borderRadius: "6px",
-    fontWeight: "600",
-  },
-  variants: {
-    size: {
-      sm: {
-        class: "button-sm",
-        style: { fontSize: "12px", paddingBlock: "4px", paddingInline: "8px" },
-      },
-      md: {
-        class: "button-md",
-        style: {
-          fontSize: "14px",
-          paddingBlock: "6px",
-          paddingInline: "12px",
-        },
-      },
-      lg: {
-        class: "button-lg",
-        style: {
-          fontSize: "16px",
-          paddingBlock: "8px",
-          paddingInline: "16px",
-        },
-      },
-    },
-    intent: {
-      primary: {
-        class: "button-primary",
-        style: { color: "white", backgroundColor: "blue" },
-      },
-      danger: {
-        class: "button-danger",
-        style: { color: "white", backgroundColor: "red" },
-      },
-      neutral: {
-        class: "button-neutral",
-        style: { color: "black", backgroundColor: "gray" },
-      },
-    },
-    disabled: {
-      true: {
-        class: "button-disabled",
-        style: { opacity: "0.5", pointerEvents: "none" },
-      },
-      false: "button-enabled",
-    },
-  },
-  defaultVariants: {
-    size: "md",
-    intent: "primary",
-  },
-} as const;
-
-const fieldConfig = {
-  class: "field",
-  variants: {
-    tone: {
-      plain: "field-plain",
-      invalid: {
-        class: "field-invalid",
-        style: { borderColor: "red", color: "red" },
-      },
-    },
-    compact: "field-compact",
-  },
-  defaultVariants: {
-    tone: "plain",
-  },
-} as const;
-
-const button = cv(buttonConfig);
-const field = cv(fieldConfig);
-const toolbarButton = cv({
-  extend: [button],
-  class: "toolbar-button",
-  variants: {
-    active: {
-      true: "toolbar-button-active",
-      false: "toolbar-button-idle",
-    },
-  },
-  computedVariants: {
-    intent: (value: unknown) => {
-      if (value === "danger") {
-        return {
-          class: "toolbar-button-danger",
-          style: { boxShadow: "0 0 0 1px red" },
-        };
-      }
-      return null;
-    },
-  },
-  defaultVariants: {
-    active: false,
-  },
-  computed: ({ variants, addClass, addStyle, setDefaultVariants }) => {
-    if (variants.active) {
-      addClass("toolbar-button-pressed");
-      addStyle({ transform: "translateY(1px)" });
-    }
-    if (variants.size === "lg") {
-      setDefaultVariants({ intent: "neutral" });
-    }
-  },
-});
-
-const splitPropsInput = {
-  id: "save",
-  type: "button",
-  size: "lg",
-  intent: "danger",
-  disabled: true,
-  tone: "invalid",
-  compact: true,
-  active: true,
-  className: "custom",
-  style: "margin-top: 4px; --accent-color: red;",
-  "data-testid": "save",
-};
-
-describe("cv", () => {
-  bench(
-    "create component with variants",
-    () => {
-      consume(cv(buttonConfig));
-    },
-    options,
-  );
-
-  bench(
-    "resolve component props",
-    () => {
-      consume(
-        button({
-          size: "lg",
-          intent: "danger",
-          disabled: true,
-          className: "custom",
-          style: { marginTop: 4 },
-        }),
-      );
-    },
-    options,
-  );
-
-  bench(
-    "resolve html props from string style",
-    () => {
-      consume(
-        button.html({
-          size: "sm",
-          intent: "neutral",
-          style: "margin-top: 4px; --accent-color: blue;",
-        }),
-      );
-    },
-    options,
-  );
-
-  bench(
-    "resolve extended computed props",
-    () => {
-      consume(
-        toolbarButton({
-          size: "lg",
-          intent: "danger",
-          active: true,
-          class: "custom",
-          style: { marginInlineStart: 4 },
-        }),
-      );
-    },
-    options,
-  );
-
-  bench(
-    "get variant values",
-    () => {
-      consume(
-        toolbarButton.getVariants({
-          size: "lg",
-          active: true,
-        }),
-      );
-    },
-    options,
-  );
-});
-
-describe("splitProps", () => {
-  bench(
-    "split props across components",
-    () => {
-      consume(splitProps(splitPropsInput, toolbarButton, field));
-    },
-    options,
-  );
-
-  bench(
-    "split props across arrays and components",
-    () => {
-      consume(
-        splitProps(
-          splitPropsInput,
-          ["id", "type", "data-testid"],
-          toolbarButton,
-          field,
-        ),
-      );
-    },
-    options,
-  );
-});
-
-export { sink };