clava 0.3.0 → 0.4.0

package/src/types.ts

@@ -179,46 +179,46 @@ export interface ModalComponent<V, R extends ComponentResult> {
 
 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>
-    : {};
-
-type ExtractComputedVariants<T> =
-  T extends CVComponent<any, infer CV, infer E, any>
-    ? CV & Omit<MergeExtendedComputedVariants<E>, keyof CV>
+  T extends CVComponent<infer V, infer E, any>
+    ? MergeVariantMaps<V, MergeExtendedVariants<E>>
     : {};
 
-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 & {
@@ -228,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;
@@ -272,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;
@@ -280,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;
 
@@ -297,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/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 re-runs when computed changes variants", () => {
+    test("getVariants re-runs when refine changes variants", () => {
       const component = getModeComponent(
         mode,
         cv({
@@ -86,7 +86,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" });
             }
@@ -108,7 +108,7 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          computed: ({ variants, setDefaultVariants }) => {
+          refine: ({ variants, setDefaultVariants }) => {
             setDefaultVariants({ color: "red" });
             if (variants.color === "red") {
               setDefaultVariants({ size: "lg" });
@@ -120,7 +120,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 returns variants set by refine setDefaultVariants", () => {
       const component = getModeComponent(
         mode,
         cv({
@@ -128,7 +128,7 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          computed: ({ variants, setDefaultVariants }) => {
+          refine: ({ variants, setDefaultVariants }) => {
             if (variants.size === "lg") {
               setDefaultVariants({ color: "blue" });
             }
@@ -147,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" });
           },
         }),
@@ -164,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" });
           },
         }),
@@ -176,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" });
         },
       });
@@ -195,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" });
         },
       });
@@ -212,11 +212,11 @@ for (const config of Object.values(CONFIGS)) {
       expect(variants).toEqual({ size: "lg", color: "red" });
     });
 
-    test("getVariants re-runs when base component computed changes variants", () => {
+    test("getVariants re-runs when base component refine changes variants", () => {
       const base = cv({
         variants: { size: { sm: "sm", lg: "lg" }, active: "" },
         defaultVariants: { size: "sm" },
-        computed: ({ variants, setVariants }) => {
+        refine: ({ variants, setVariants }) => {
           if (variants.active) {
             setVariants({ size: "lg" });
           }
@@ -227,7 +227,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { color: { red: "red", blue: "blue" } },
-          computed: ({ variants, setVariants }) => {
+          refine: ({ variants, setVariants }) => {
             if (variants.size === "lg") {
               setVariants({ color: "red" });
             }
@@ -246,7 +246,7 @@ for (const config of Object.values(CONFIGS)) {
           mode: { on: "on" },
         },
         defaultVariants: { size: "sm" },
-        computed: ({ variants, setVariants, setDefaultVariants }) => {
+        refine: ({ variants, setVariants, setDefaultVariants }) => {
           if (variants.active) {
             setVariants({ mode: "on" });
           }
@@ -266,7 +266,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           variants: { size: { sm: "sm", lg: "lg" } },
           defaultVariants: { size: "sm" },
-          computed: ({ setVariants }) => {
+          refine: ({ setVariants }) => {
             setVariants({ size: "lg" });
             setVariants({ size: "sm" });
           },
@@ -279,7 +279,7 @@ for (const config of Object.values(CONFIGS)) {
     test("getVariants child setVariants keeps overriding base setDefaultVariants across re-runs", () => {
       const base = cv({
         variants: { color: { red: "red", blue: "blue" } },
-        computed: ({ setDefaultVariants }) => {
+        refine: ({ setDefaultVariants }) => {
           setDefaultVariants({ color: "blue" });
         },
       });
@@ -289,7 +289,7 @@ for (const config of Object.values(CONFIGS)) {
           extend: [base],
           variants: { size: { sm: "sm", lg: "lg" } },
           defaultVariants: { size: "sm" },
-          computed: ({ variants, setVariants }) => {
+          refine: ({ variants, setVariants }) => {
             if (variants.size === "sm") {
               setVariants({ color: "red" });
             }
@@ -303,7 +303,7 @@ for (const config of Object.values(CONFIGS)) {
     test("getVariants setVariants sticks across re-runs", () => {
       const base = cv({
         variants: { color: { red: "red", blue: "blue" } },
-        computed: ({ setDefaultVariants }) => {
+        refine: ({ setDefaultVariants }) => {
           setDefaultVariants({ color: "blue" });
         },
       });
@@ -312,7 +312,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { color: { red: "red", blue: "blue" }, done: "" },
-          computed: ({ variants, setVariants }) => {
+          refine: ({ variants, setVariants }) => {
             if (!variants.done) {
               setVariants({ color: "red", done: true });
             }
@@ -330,7 +330,7 @@ for (const config of Object.values(CONFIGS)) {
           active: "",
           mode: { on: "on" },
         },
-        computed: ({ variants, setVariants, setDefaultVariants }) => {
+        refine: ({ variants, setVariants, setDefaultVariants }) => {
           if (variants.active) {
             setVariants({ mode: "on" });
           }
@@ -350,13 +350,13 @@ for (const config of Object.values(CONFIGS)) {
     test("getVariants setVariants from earlier extends overrides setDefaultVariants from later extends", () => {
       const first = cv({
         variants: { color: { red: "first-red", blue: "first-blue" } },
-        computed: ({ setVariants }) => {
+        refine: ({ setVariants }) => {
           setVariants({ color: "red" });
         },
       });
       const second = cv({
         variants: { color: { red: "second-red", blue: "second-blue" } },
-        computed: ({ setDefaultVariants }) => {
+        refine: ({ setDefaultVariants }) => {
           setDefaultVariants({ color: "blue" });
         },
       });
@@ -368,13 +368,13 @@ for (const config of Object.values(CONFIGS)) {
     test("getVariants setDefaultVariants from later extends overrides setDefaultVariants from earlier extends", () => {
       const first = cv({
         variants: { color: { red: "first-red", blue: "first-blue" } },
-        computed: ({ setDefaultVariants }) => {
+        refine: ({ setDefaultVariants }) => {
           setDefaultVariants({ color: "red" });
         },
       });
       const second = cv({
         variants: { color: { red: "second-red", blue: "second-blue" } },
-        computed: ({ setDefaultVariants }) => {
+        refine: ({ setDefaultVariants }) => {
           setDefaultVariants({ color: "blue" });
         },
       });
@@ -386,7 +386,7 @@ for (const config of Object.values(CONFIGS)) {
     test("getVariants setDefaultVariants does not override stable setVariants on later passes", () => {
       const base = cv({
         variants: { color: { red: "base-red", blue: "base-blue" } },
-        computed: ({ setVariants }) => {
+        refine: ({ setVariants }) => {
           setVariants({ color: "red" });
         },
       });
@@ -395,7 +395,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { color: { red: "child-red", blue: "child-blue" } },
-          computed: ({ variants, setDefaultVariants }) => {
+          refine: ({ variants, setDefaultVariants }) => {
             if (variants.color === "red") {
               setDefaultVariants({ color: "blue" });
             }
@@ -414,7 +414,7 @@ for (const config of Object.values(CONFIGS)) {
             color: { red: "red", blue: "blue" },
             done: "",
           },
-          computed: ({ variants, setVariants, setDefaultVariants }) => {
+          refine: ({ variants, setVariants, setDefaultVariants }) => {
             if (!variants.done) {
               setVariants({ color: "red", done: true });
             }

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: