clava 0.2.3 → 0.3.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,9 +173,8 @@ 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<
@@ -248,11 +251,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/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

@@ -78,6 +78,48 @@ for (const config of Object.values(CONFIGS)) {
       expect(variants).toEqual({ size: "lg", color: "red" });
     });
 
+    test("getVariants re-runs when computed changes variants", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: {
+            size: { sm: "sm", lg: "lg" },
+            color: { red: "red", blue: "blue" },
+          },
+          computed: ({ 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" },
+          },
+          computed: ({ 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 computed setDefaultVariants", () => {
       const component = getModeComponent(
         mode,
@@ -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 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({ variants: { size: { sm: "sm" }, color: { red: "red" } } }),
+        cv({
+          extend: [base],
+          variants: { color: { red: "red", blue: "blue" } },
+          computed: ({ 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" },
+        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 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" },
+          computed: ({ 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" } },
+        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 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" } },
+        computed: ({ setDefaultVariants }) => {
+          setDefaultVariants({ color: "blue" });
+        },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { color: { red: "red", blue: "blue" }, done: "" },
+          computed: ({ 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" },
+        },
+        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 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" } },
+        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 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" } },
+        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 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" } },
+        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 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: "",
+          },
+          computed: ({ 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({