clava 0.2.1 → 0.2.3

package/src/utils.ts

@@ -11,6 +11,11 @@ export type Mode = (typeof MODES)[number];
 // eslint-disable-next-line @typescript-eslint/unbound-method
 const hasOwn = Object.prototype.hasOwnProperty;
 
+function isAsciiLetter(code: number) {
+  if (code >= 65 && code <= 90) return true;
+  return code >= 97 && code <= 122;
+}
+
 /**
  * Returns the appropriate class property name based on the mode.
  * @example
@@ -33,8 +38,34 @@ export function hyphenToCamel(str: string) {
     return str;
   }
   // Fast path: no hyphen -> return as-is
-  if (str.indexOf("-") === -1) return str;
-  return str.replace(/-([a-z])/gi, (_, letter) => letter.toUpperCase());
+  let hyphenIndex = str.indexOf("-");
+  if (hyphenIndex === -1) return str;
+
+  let result = "";
+  let lastIndex = 0;
+  while (hyphenIndex !== -1) {
+    result += str.slice(lastIndex, hyphenIndex);
+
+    const nextIndex = hyphenIndex + 1;
+    if (nextIndex >= str.length) {
+      result += "-";
+      lastIndex = nextIndex;
+      break;
+    }
+
+    const code = str.charCodeAt(nextIndex);
+    if (isAsciiLetter(code)) {
+      result += str[nextIndex].toUpperCase();
+      lastIndex = nextIndex + 1;
+    } else {
+      result += "-";
+      lastIndex = nextIndex;
+    }
+
+    hyphenIndex = str.indexOf("-", lastIndex);
+  }
+
+  return result + str.slice(lastIndex);
 }
 
 /**
@@ -48,7 +79,20 @@ export function camelToHyphen(str: string) {
   if (str.length >= 2 && str.charCodeAt(0) === 45 && str.charCodeAt(1) === 45) {
     return str;
   }
-  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+
+  let result = "";
+  let lastIndex = 0;
+  for (let i = 0; i < str.length; i++) {
+    const code = str.charCodeAt(i);
+    if (code < 65 || code > 90) continue;
+    result += str.slice(lastIndex, i);
+    result += "-";
+    result += str[i].toLowerCase();
+    lastIndex = i + 1;
+  }
+
+  if (lastIndex === 0) return str;
+  return result + str.slice(lastIndex);
 }
 
 /**

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/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 };