clava 0.2.4 → 0.4.0

package/src/types.ts

@@ -70,11 +70,15 @@ export type ComponentProps<V = {}> = VariantValues<V> & NullableComponentResult;
 
 export type GetVariants<V> = (variants?: VariantValues<V>) => VariantValues<V>;
 
+type ComponentPropKey<R extends ComponentResult> =
+  | keyof R
+  | (R extends StyleClassProps ? "className" : never);
+
 // Key source types - what can be passed as additional parameters to splitProps
 export type KeySourceArray = readonly string[];
 export type KeySourceComponent = {
-  keys: readonly (string | number | symbol)[];
-  variantKeys: readonly (string | number | symbol)[];
+  propKeys: readonly string[];
+  variantKeys: readonly string[];
   getVariants: () => Record<string, unknown>;
 };
 export type KeySource = KeySourceArray | KeySourceComponent;
@@ -85,7 +89,7 @@ type IsComponent<S> = S extends { getVariants: () => unknown } ? true : false;
 // Extract keys from a source (includes class/style for components)
 type SourceKeys<S> = S extends readonly (infer K)[]
   ? K
-  : S extends { keys: readonly (infer K)[] }
+  : S extends { propKeys: readonly (infer K)[] }
     ? K
     : never;
 
@@ -169,53 +173,52 @@ export interface ModalComponent<V, R extends ComponentResult> {
   class: (props?: ComponentProps<V>) => string;
   style: (props?: ComponentProps<V>) => R["style"];
   getVariants: GetVariants<V>;
-  keys: (keyof V | keyof NullableComponentResult)[];
   variantKeys: (keyof V)[];
-  propKeys: (keyof V | keyof NullableComponentResult)[];
+  propKeys: (keyof V | ComponentPropKey<R>)[];
 }
 
 export interface CVComponent<
   V extends Variants = {},
-  CV extends ComputedVariants = {},
   E extends AnyComponent[] = [],
   R extends ComponentResult = StyleClassProps,
-> extends ModalComponent<MergeVariants<V, CV, E>, R> {
-  jsx: ModalComponent<MergeVariants<V, CV, E>, JSXProps>;
-  html: ModalComponent<MergeVariants<V, CV, E>, HTMLProps>;
-  htmlObj: ModalComponent<MergeVariants<V, CV, E>, HTMLObjProps>;
+> extends ModalComponent<MergeVariants<V, E>, R> {
+  jsx: ModalComponent<MergeVariants<V, E>, JSXProps>;
+  html: ModalComponent<MergeVariants<V, E>, HTMLProps>;
+  htmlObj: ModalComponent<MergeVariants<V, E>, HTMLObjProps>;
 }
 
 export type AnyComponent =
-  | CVComponent<any, any, any, any>
+  | CVComponent<any, any, any>
   | ModalComponent<any, any>;
 
 type MergeExtendedVariants<T> = T extends readonly [infer First, ...infer Rest]
   ? ExtractVariants<First> & MergeExtendedVariants<Rest>
   : {};
 
-type MergeExtendedComputedVariants<T> = T extends readonly [
-  infer First,
-  ...infer Rest,
-]
-  ? ExtractComputedVariants<First> & MergeExtendedComputedVariants<Rest>
-  : {};
-
+// Returns a component's effective variants — merged with its own extends —
+// so that a later intermediate component's static variant correctly hides a
+// grandparent's function variant from further descendants. Using a raw
+// intersection here would re-expose the grandparent function through the
+// type chain even after the middle layer replaced it.
 type ExtractVariants<T> =
-  T extends CVComponent<infer V, any, infer E, any>
-    ? V & MergeExtendedVariants<E>
+  T extends CVComponent<infer V, infer E, any>
+    ? MergeVariantMaps<V, MergeExtendedVariants<E>>
     : {};
 
-type ExtractComputedVariants<T> =
-  T extends CVComponent<any, infer CV, infer E, any>
-    ? CV & Omit<MergeExtendedComputedVariants<E>, keyof CV>
-    : {};
-
-type MergeVariantDefinition<Child, Parent> =
-  Child extends Record<string, any>
-    ? Parent extends Record<string, any>
-      ? Omit<Parent, keyof Child> & Child
-      : Child
-    : Child;
+// A function value in `variants` (a function variant) replaces any inherited
+// variant for the same key. An object value merges value-by-value with an
+// inherited object, but replaces an inherited function.
+type MergeVariantDefinition<Child, Parent> = Child extends (
+  ...args: any[]
+) => any
+  ? Child
+  : Parent extends (...args: any[]) => any
+    ? Child
+    : Child extends Record<string, any>
+      ? Parent extends Record<string, any>
+        ? Omit<Parent, keyof Child> & Child
+        : Child
+      : Child;
 
 type MergeVariantMaps<Child, Parent> = Omit<Parent, keyof Child> &
   Child & {
@@ -225,17 +228,11 @@ type MergeVariantMaps<Child, Parent> = Omit<Parent, keyof Child> &
     >;
   };
 
-type MergeExtendedAllVariants<E extends AnyComponent[]> =
-  MergeExtendedVariants<E> & MergeExtendedComputedVariants<E>;
-
-type MergeBaseVariants<V, E extends AnyComponent[]> = MergeVariantMaps<
+export type MergeVariants<V, E extends AnyComponent[]> = MergeVariantMaps<
   NoInfer<V>,
-  MergeExtendedAllVariants<E>
+  MergeExtendedVariants<E>
 >;
 
-export type MergeVariants<V, CV, E extends AnyComponent[]> = NoInfer<CV> &
-  Omit<MergeBaseVariants<V, E>, keyof CV>;
-
 type StringToBoolean<T> = T extends "true" | "false" ? boolean : T;
 
 type VariantValue = ClassValue | StyleClassValue;
@@ -269,7 +266,7 @@ export interface StyleClassValue {
   class?: ClassValue;
 }
 
-export interface ComputedContext<V> {
+export interface RefineContext<V> {
   variants: VariantValues<V>;
   setVariants: (variants: VariantValues<V>) => void;
   setDefaultVariants: (variants: VariantValues<V>) => void;
@@ -277,16 +274,14 @@ export interface ComputedContext<V> {
   addStyle: (style: StyleValue) => void;
 }
 
-export type Computed<V> = (context: ComputedContext<V>) => VariantValue;
+export type Refine<V> = (context: RefineContext<V>) => VariantValue;
 
-export type ComputedVariant = (value: any) => VariantValue;
-export type ComputedVariants = Record<string, ComputedVariant>;
-export type Variant = ClassValue | Record<string, VariantValue>;
+export type Variant =
+  | ClassValue
+  | Record<string, VariantValue>
+  | ((value: any) => VariantValue);
 export type Variants = Record<string, Variant>;
 
-type ExtendedVariants<E extends AnyComponent[]> = MergeExtendedVariants<E> &
-  MergeExtendedComputedVariants<E>;
-
 type NullablePartial<T> =
   T extends Record<string, any> ? { [K in keyof T]?: T[K] | null } : T | null;
 
@@ -294,7 +289,7 @@ export type ExtendableVariants<
   V extends Variants,
   E extends AnyComponent[],
 > = V & {
-  [K in keyof ExtendedVariants<E>]?:
-    | NullablePartial<ExtendedVariants<E>[K]>
+  [K in keyof MergeExtendedVariants<E>]?:
+    | NullablePartial<MergeExtendedVariants<E>[K]>
     | Variant;
 };

package/tests/_utils.ts

@@ -4,7 +4,6 @@ import type {
   AnyComponent,
   CVComponent,
   ComponentResult,
-  ComputedVariants,
   HTMLObjProps,
   HTMLProps,
   JSXProps,
@@ -86,9 +85,8 @@ export function createCVFromConfig(
 export function getModeComponent<
   M extends Mode,
   V extends Variants = {},
-  CV extends ComputedVariants = {},
   const E extends AnyComponent[] = [],
->(mode: M, component: CVComponent<V, CV, E>) {
+>(mode: M, component: CVComponent<V, E>) {
   if (!mode) return component;
   return component[mode];
 }

package/tests/build.test.ts

@@ -0,0 +1,18 @@
+import { execFile } from "node:child_process";
+import { readFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { promisify } from "node:util";
+import { expect, test } from "vitest";
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+const exec = promisify(execFile);
+
+test("build preserves the production warning guard for consumers", async () => {
+  await exec("pnpm", ["--dir", root, "build"]);
+
+  const code = await readFile(join(root, "dist/index.js"), "utf8");
+  expect(code).toMatch(
+    /process\.env\.NODE_ENV !== "production"[\s\S]*?console\.warn\(/,
+  );
+}, 60_000);

package/tests/component-api.test.ts

@@ -59,7 +59,7 @@ for (const config of Object.values(CONFIGS)) {
       expect(variants).toEqual({ size: "sm" });
     });
 
-    test("getVariants returns variants set by computed setVariants", () => {
+    test("getVariants returns variants set by refine setVariants", () => {
       const component = getModeComponent(
         mode,
         cv({
@@ -67,7 +67,7 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          computed: ({ variants, setVariants }) => {
+          refine: ({ variants, setVariants }) => {
             if (variants.size === "lg") {
               setVariants({ color: "red" });
             }
@@ -78,7 +78,7 @@ for (const config of Object.values(CONFIGS)) {
       expect(variants).toEqual({ size: "lg", color: "red" });
     });
 
-    test("getVariants returns variants set by computed setDefaultVariants", () => {
+    test("getVariants re-runs when refine changes variants", () => {
       const component = getModeComponent(
         mode,
         cv({
@@ -86,7 +86,49 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          computed: ({ variants, setDefaultVariants }) => {
+          refine: ({ variants, setVariants }) => {
+            if (variants.size === "lg") {
+              setVariants({ color: "red" });
+            }
+            if (variants.color === "red") {
+              setVariants({ size: "sm" });
+            }
+          },
+        }),
+      );
+      const variants = component.getVariants({ size: "lg" });
+      expect(variants).toEqual({ size: "sm", color: "red" });
+    });
+
+    test("getVariants re-runs when setDefaultVariants changes variants", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: {
+            size: { sm: "sm", lg: "lg" },
+            color: { red: "red", blue: "blue" },
+          },
+          refine: ({ variants, setDefaultVariants }) => {
+            setDefaultVariants({ color: "red" });
+            if (variants.color === "red") {
+              setDefaultVariants({ size: "lg" });
+            }
+          },
+        }),
+      );
+      const variants = component.getVariants();
+      expect(variants).toEqual({ size: "lg", color: "red" });
+    });
+
+    test("getVariants returns variants set by refine setDefaultVariants", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: {
+            size: { sm: "sm", lg: "lg" },
+            color: { red: "red", blue: "blue" },
+          },
+          refine: ({ variants, setDefaultVariants }) => {
             if (variants.size === "lg") {
               setDefaultVariants({ color: "blue" });
             }
@@ -105,7 +147,7 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          computed: ({ setDefaultVariants }) => {
+          refine: ({ setDefaultVariants }) => {
             setDefaultVariants({ color: "blue" });
           },
         }),
@@ -122,7 +164,7 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          computed: ({ setVariants }) => {
+          refine: ({ setVariants }) => {
             setVariants({ color: "blue" });
           },
         }),
@@ -134,7 +176,7 @@ for (const config of Object.values(CONFIGS)) {
     test("getVariants picks up setDefaultVariants from extended component", () => {
       const base = cv({
         variants: { size: { sm: "sm", lg: "lg" } },
-        computed: ({ setDefaultVariants }) => {
+        refine: ({ setDefaultVariants }) => {
           setDefaultVariants({ size: "lg" });
         },
       });
@@ -153,7 +195,7 @@ for (const config of Object.values(CONFIGS)) {
     test("getVariants picks up setDefaultVariants from grandparent component", () => {
       const grandparent = cv({
         variants: { size: { sm: "sm", lg: "lg" } },
-        computed: ({ setDefaultVariants }) => {
+        refine: ({ setDefaultVariants }) => {
           setDefaultVariants({ size: "lg" });
         },
       });
@@ -170,17 +212,220 @@ for (const config of Object.values(CONFIGS)) {
       expect(variants).toEqual({ size: "lg", color: "red" });
     });
 
-    test("keys returns props keys", () => {
+    test("getVariants re-runs when base component refine changes variants", () => {
+      const base = cv({
+        variants: { size: { sm: "sm", lg: "lg" }, active: "" },
+        defaultVariants: { size: "sm" },
+        refine: ({ variants, setVariants }) => {
+          if (variants.active) {
+            setVariants({ size: "lg" });
+          }
+        },
+      });
       const component = getModeComponent(
         mode,
-        cv({ variants: { size: { sm: "sm" }, color: { red: "red" } } }),
+        cv({
+          extend: [base],
+          variants: { color: { red: "red", blue: "blue" } },
+          refine: ({ variants, setVariants }) => {
+            if (variants.size === "lg") {
+              setVariants({ color: "red" });
+            }
+          },
+        }),
       );
-      expectTypeOf(component.keys).toExtend<
-        ("class" | "className" | "style" | "size" | "color")[]
-      >();
-      expect(component.keys).toEqual(
-        getExpectedPropsKeys(config, "size", "color"),
+      const variants = component.getVariants({ active: true });
+      expect(variants).toEqual({ size: "lg", active: true, color: "red" });
+    });
+
+    test("getVariants preserves base setDefaultVariants after its own setVariants re-run", () => {
+      const base = cv({
+        variants: {
+          size: { sm: "sm", lg: "lg" },
+          active: "",
+          mode: { on: "on" },
+        },
+        defaultVariants: { size: "sm" },
+        refine: ({ variants, setVariants, setDefaultVariants }) => {
+          if (variants.active) {
+            setVariants({ mode: "on" });
+          }
+          if (variants.mode === "on") {
+            setDefaultVariants({ size: "lg" });
+          }
+        },
+      });
+      const component = getModeComponent(mode, cv({ extend: [base] }));
+      const variants = component.getVariants({ active: true });
+      expect(variants).toEqual({ size: "lg", active: true, mode: "on" });
+    });
+
+    test("getVariants setVariants uses the latest pending value", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: { size: { sm: "sm", lg: "lg" } },
+          defaultVariants: { size: "sm" },
+          refine: ({ setVariants }) => {
+            setVariants({ size: "lg" });
+            setVariants({ size: "sm" });
+          },
+        }),
+      );
+      const variants = component.getVariants();
+      expect(variants).toEqual({ size: "sm" });
+    });
+
+    test("getVariants child setVariants keeps overriding base setDefaultVariants across re-runs", () => {
+      const base = cv({
+        variants: { color: { red: "red", blue: "blue" } },
+        refine: ({ setDefaultVariants }) => {
+          setDefaultVariants({ color: "blue" });
+        },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { size: { sm: "sm", lg: "lg" } },
+          defaultVariants: { size: "sm" },
+          refine: ({ variants, setVariants }) => {
+            if (variants.size === "sm") {
+              setVariants({ color: "red" });
+            }
+          },
+        }),
+      );
+      const variants = component.getVariants();
+      expect(variants).toEqual({ color: "red", size: "sm" });
+    });
+
+    test("getVariants setVariants sticks across re-runs", () => {
+      const base = cv({
+        variants: { color: { red: "red", blue: "blue" } },
+        refine: ({ setDefaultVariants }) => {
+          setDefaultVariants({ color: "blue" });
+        },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { color: { red: "red", blue: "blue" }, done: "" },
+          refine: ({ variants, setVariants }) => {
+            if (!variants.done) {
+              setVariants({ color: "red", done: true });
+            }
+          },
+        }),
+      );
+      const variants = component.getVariants();
+      expect(variants).toEqual({ color: "red", done: true });
+    });
+
+    test("getVariants base setDefaultVariants can override child static defaults after a re-run", () => {
+      const base = cv({
+        variants: {
+          size: { sm: "sm", lg: "lg" },
+          active: "",
+          mode: { on: "on" },
+        },
+        refine: ({ 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 variants = component.getVariants({ active: true });
+      expect(variants).toEqual({ size: "lg", active: true, mode: "on" });
+    });
+
+    test("getVariants setVariants from earlier extends overrides setDefaultVariants from later extends", () => {
+      const first = cv({
+        variants: { color: { red: "first-red", blue: "first-blue" } },
+        refine: ({ setVariants }) => {
+          setVariants({ color: "red" });
+        },
+      });
+      const second = cv({
+        variants: { color: { red: "second-red", blue: "second-blue" } },
+        refine: ({ setDefaultVariants }) => {
+          setDefaultVariants({ color: "blue" });
+        },
+      });
+      const component = getModeComponent(mode, cv({ extend: [first, second] }));
+      const variants = component.getVariants();
+      expect(variants).toEqual({ color: "red" });
+    });
+
+    test("getVariants setDefaultVariants from later extends overrides setDefaultVariants from earlier extends", () => {
+      const first = cv({
+        variants: { color: { red: "first-red", blue: "first-blue" } },
+        refine: ({ setDefaultVariants }) => {
+          setDefaultVariants({ color: "red" });
+        },
+      });
+      const second = cv({
+        variants: { color: { red: "second-red", blue: "second-blue" } },
+        refine: ({ setDefaultVariants }) => {
+          setDefaultVariants({ color: "blue" });
+        },
+      });
+      const component = getModeComponent(mode, cv({ extend: [first, second] }));
+      const variants = component.getVariants();
+      expect(variants).toEqual({ color: "blue" });
+    });
+
+    test("getVariants setDefaultVariants does not override stable setVariants on later passes", () => {
+      const base = cv({
+        variants: { color: { red: "base-red", blue: "base-blue" } },
+        refine: ({ setVariants }) => {
+          setVariants({ color: "red" });
+        },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { color: { red: "child-red", blue: "child-blue" } },
+          refine: ({ variants, setDefaultVariants }) => {
+            if (variants.color === "red") {
+              setDefaultVariants({ color: "blue" });
+            }
+          },
+        }),
       );
+      const variants = component.getVariants();
+      expect(variants).toEqual({ color: "red" });
+    });
+
+    test("getVariants setDefaultVariants does not override setVariants from a previous pass", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: {
+            color: { red: "red", blue: "blue" },
+            done: "",
+          },
+          refine: ({ variants, setVariants, setDefaultVariants }) => {
+            if (!variants.done) {
+              setVariants({ color: "red", done: true });
+            }
+            if (variants.done) {
+              setDefaultVariants({ color: "blue" });
+            }
+          },
+        }),
+      );
+      const variants = component.getVariants();
+      expect(variants).toEqual({ color: "red", done: true });
     });
 
     test("variantKeys property", () => {
@@ -217,6 +462,30 @@ for (const config of Object.values(CONFIGS)) {
   });
 }
 
+test("propKeys are mode-specific", () => {
+  const component = cvBase({
+    variants: { size: { sm: "sm", md: "md" } },
+  });
+
+  expectTypeOf(component.propKeys).toEqualTypeOf<
+    ("class" | "className" | "style" | "size")[]
+  >();
+  expectTypeOf(component.jsx.propKeys).toEqualTypeOf<
+    ("className" | "style" | "size")[]
+  >();
+  expectTypeOf(component.html.propKeys).toEqualTypeOf<
+    ("class" | "style" | "size")[]
+  >();
+  expectTypeOf(component.htmlObj.propKeys).toEqualTypeOf<
+    ("class" | "style" | "size")[]
+  >();
+
+  expect(component.propKeys).toEqual(["class", "className", "style", "size"]);
+  expect(component.jsx.propKeys).toEqual(["className", "style", "size"]);
+  expect(component.html.propKeys).toEqual(["class", "style", "size"]);
+  expect(component.htmlObj.propKeys).toEqual(["class", "style", "size"]);
+});
+
 describe("Variant utility type", () => {
   test("matches variant keys from another component", () => {
     const base = cvBase({

package/tests/extend.test.ts

@@ -144,7 +144,7 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("extend disabled variant value with computed setDefaultVariants", () => {
+    test("extend disabled variant value with refine setDefaultVariants", () => {
       const base = cv({
         variants: {
           size: {
@@ -158,7 +158,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { size: { sm: null } },
-          computed: ({ setDefaultVariants }) => {
+          refine: ({ setDefaultVariants }) => {
             setDefaultVariants({ size: "lg" });
           },
         }),
@@ -173,7 +173,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { size: { sm: null } },
-          computed: ({ setDefaultVariants }) => {
+          refine: ({ setDefaultVariants }) => {
             setDefaultVariants({
               // @ts-expect-error disabled variant value cannot be set
               size:
@@ -186,7 +186,7 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(invalidComponent())).toEqual({ class: "" });
     });
 
-    test("extend disabled variant value with computed setVariants", () => {
+    test("extend disabled variant value with refine setVariants", () => {
       const base = cv({
         variants: {
           size: {
@@ -200,7 +200,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { size: { sm: null } },
-          computed: ({ setVariants }) => {
+          refine: ({ setVariants }) => {
             setVariants({ size: "lg" });
           },
         }),
@@ -215,7 +215,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { size: { sm: null } },
-          computed: ({ setVariants }) => {
+          refine: ({ setVariants }) => {
             setVariants({
               // @ts-expect-error disabled variant value cannot be set
               size: