clava 0.1.19 → 0.2.1

package/src/types.ts

@@ -32,13 +32,22 @@ export interface HTMLObjProps {
   style: HTMLCSSProperties;
 }
 
+export interface StyleClassProps {
+  class: string;
+  style: StyleValue;
+}
+
 export interface StyleProps {
   jsx: JSXProps;
   html: HTMLProps;
   htmlObj: HTMLObjProps;
 }
 
-export type ComponentResult = JSXProps | HTMLProps | HTMLObjProps;
+export type ComponentResult =
+  | JSXProps
+  | HTMLProps
+  | HTMLObjProps
+  | StyleClassProps;
 
 type AllComponentResultKeys =
   | keyof JSXProps
@@ -160,16 +169,16 @@ 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 R)[];
+  keys: (keyof V | keyof NullableComponentResult)[];
   variantKeys: (keyof V)[];
-  propKeys: (keyof V | keyof R)[];
+  propKeys: (keyof V | keyof NullableComponentResult)[];
 }
 
 export interface CVComponent<
   V extends Variants = {},
   CV extends ComputedVariants = {},
   E extends AnyComponent[] = [],
-  R extends ComponentResult = ComponentResult,
+  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>;

package/src/utils.ts

@@ -8,6 +8,9 @@ import type {
 export const MODES = ["jsx", "html", "htmlObj"] as const;
 export type Mode = (typeof MODES)[number];
 
+// eslint-disable-next-line @typescript-eslint/unbound-method
+const hasOwn = Object.prototype.hasOwnProperty;
+
 /**
  * Returns the appropriate class property name based on the mode.
  * @example
@@ -26,9 +29,11 @@ export function getClassPropertyName(mode: Mode) {
  */
 export function hyphenToCamel(str: string) {
   // CSS custom properties (variables) should not be converted
-  if (str.startsWith("--")) {
+  if (str.length >= 2 && str.charCodeAt(0) === 45 && str.charCodeAt(1) === 45) {
     return str;
   }
+  // Fast path: no hyphen -> return as-is
+  if (str.indexOf("-") === -1) return str;
   return str.replace(/-([a-z])/gi, (_, letter) => letter.toUpperCase());
 }
 
@@ -40,7 +45,7 @@ export function hyphenToCamel(str: string) {
  */
 export function camelToHyphen(str: string) {
   // CSS custom properties (variables) should not be converted
-  if (str.startsWith("--")) {
+  if (str.length >= 2 && str.charCodeAt(0) === 45 && str.charCodeAt(1) === 45) {
     return str;
   }
   return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
@@ -67,20 +72,60 @@ export function htmlStyleToStyleValue(styleString: string) {
   if (!styleString) return {};
 
   const result: StyleValue = {};
-  const declarations = styleString.split(";");
-
-  for (const declaration of declarations) {
-    const trimmed = declaration.trim();
-    if (!trimmed) continue;
-
-    const colonIndex = trimmed.indexOf(":");
-    if (colonIndex === -1) continue;
-
-    const property = trimmed.slice(0, colonIndex).trim();
-    const value = trimmed.slice(colonIndex + 1).trim();
-    if (!property) continue;
-    if (!value) continue;
-
+  const len = styleString.length;
+  let i = 0;
+  while (i < len) {
+    // Skip leading whitespace and stray semicolons
+    while (i < len) {
+      const c = styleString.charCodeAt(i);
+      if (c !== 32 && c !== 9 && c !== 10 && c !== 13 && c !== 59) break;
+      i++;
+    }
+    if (i >= len) break;
+    // Read property name until ':' or ';'
+    const propStart = i;
+    while (i < len) {
+      const c = styleString.charCodeAt(i);
+      if (c === 58 || c === 59) break;
+      i++;
+    }
+    if (i >= len || styleString.charCodeAt(i) === 59) {
+      // No colon found - skip this declaration
+      if (i < len) i++; // skip ';'
+      continue;
+    }
+    let propEnd = i;
+    // Trim trailing whitespace from property name
+    while (propEnd > propStart) {
+      const c = styleString.charCodeAt(propEnd - 1);
+      if (c !== 32 && c !== 9 && c !== 10 && c !== 13) break;
+      propEnd--;
+    }
+    if (propEnd === propStart) {
+      // Empty property - skip
+      while (i < len && styleString.charCodeAt(i) !== 59) i++;
+      if (i < len) i++;
+      continue;
+    }
+    const property = styleString.slice(propStart, propEnd);
+    i++; // skip ':'
+    // Skip whitespace before value
+    while (i < len) {
+      const c = styleString.charCodeAt(i);
+      if (c !== 32 && c !== 9 && c !== 10 && c !== 13) break;
+      i++;
+    }
+    const valStart = i;
+    while (i < len && styleString.charCodeAt(i) !== 59) i++;
+    let valEnd = i;
+    while (valEnd > valStart) {
+      const c = styleString.charCodeAt(valEnd - 1);
+      if (c !== 32 && c !== 9 && c !== 10 && c !== 13) break;
+      valEnd--;
+    }
+    if (i < len) i++; // skip ';'
+    if (valEnd === valStart) continue;
+    const value = styleString.slice(valStart, valEnd);
     // CSS property names and values are dynamic - cast required for index access
     (result as Record<string, string>)[hyphenToCamel(property)] = value;
   }
@@ -96,11 +141,14 @@ export function htmlStyleToStyleValue(styleString: string) {
  */
 export function htmlObjStyleToStyleValue(style: HTMLCSSProperties) {
   const result: StyleValue = {};
-  for (const [key, value] of Object.entries(style)) {
+  for (const key in style) {
+    if (!hasOwn.call(style, key)) continue;
+    const value = (style as Record<string, unknown>)[key];
     if (value == null) continue;
     // CSS property names and values are dynamic - cast required for index access
-    (result as Record<string, string>)[hyphenToCamel(key)] =
-      parseLengthValue(value);
+    (result as Record<string, string>)[hyphenToCamel(key)] = parseLengthValue(
+      value as string | number,
+    );
   }
   return result;
 }
@@ -113,10 +161,14 @@ export function htmlObjStyleToStyleValue(style: HTMLCSSProperties) {
  */
 export function jsxStyleToStyleValue(style: JSXCSSProperties) {
   const result: StyleValue = {};
-  for (const [key, value] of Object.entries(style)) {
+  for (const key in style) {
+    if (!hasOwn.call(style, key)) continue;
+    const value = (style as Record<string, unknown>)[key];
     if (value == null) continue;
     // CSS property names and values are dynamic - cast required for index access
-    (result as Record<string, string>)[key] = parseLengthValue(value);
+    (result as Record<string, string>)[key] = parseLengthValue(
+      value as string | number,
+    );
   }
   return result;
 }
@@ -128,13 +180,18 @@ export function jsxStyleToStyleValue(style: JSXCSSProperties) {
  * // "background-color: red; font-size: 16px;"
  */
 export function styleValueToHTMLStyle(style: StyleValue): string {
-  const parts: string[] = [];
-  for (const [key, value] of Object.entries(style)) {
+  let result = "";
+  for (const key in style) {
+    if (!hasOwn.call(style, key)) continue;
+    const value = (style as Record<string, unknown>)[key];
     if (value == null) continue;
-    parts.push(`${camelToHyphen(key)}: ${value}`);
+    if (result) result += "; ";
+    result += camelToHyphen(key);
+    result += ": ";
+    result += value as string | number;
   }
-  if (!parts.length) return "";
-  return `${parts.join("; ")};`;
+  if (!result) return "";
+  return `${result};`;
 }
 
 /**
@@ -145,10 +202,11 @@ export function styleValueToHTMLStyle(style: StyleValue): string {
  */
 export function styleValueToHTMLObjStyle(style: StyleValue) {
   const result: CSS.PropertiesHyphen = {};
-  for (const [key, value] of Object.entries(style)) {
+  for (const key in style) {
+    if (!hasOwn.call(style, key)) continue;
+    const value = (style as Record<string, unknown>)[key];
     if (value == null) continue;
-    const property = camelToHyphen(key) as keyof HTMLCSSProperties;
-    result[property] = value;
+    (result as Record<string, unknown>)[camelToHyphen(key)] = value;
   }
   return result;
 }
@@ -172,7 +230,17 @@ export function styleValueToJSXStyle(style: StyleValue) {
 export function isHTMLObjStyle(
   style: CSS.Properties<any> | CSS.PropertiesHyphen<any>,
 ): style is CSS.PropertiesHyphen {
-  return Object.keys(style).some(
-    (key) => key.includes("-") && !key.startsWith("--"),
-  );
+  for (const key in style) {
+    if (!hasOwn.call(style, key)) continue;
+    // Quick exclusion of CSS custom properties (--foo)
+    if (
+      key.length >= 2 &&
+      key.charCodeAt(0) === 45 &&
+      key.charCodeAt(1) === 45
+    ) {
+      continue;
+    }
+    if (key.indexOf("-") !== -1) return true;
+  }
+  return false;
 }

package/tests/_utils.ts

@@ -0,0 +1,176 @@
+import { expect } from "vitest";
+import { type VariantProps, create, cv as cvBase } from "../src/index.ts";
+import type {
+  AnyComponent,
+  CVComponent,
+  ComponentResult,
+  ComputedVariants,
+  HTMLObjProps,
+  HTMLProps,
+  JSXProps,
+  StyleClassProps,
+  StyleProperty,
+  Variants,
+} from "../src/types.ts";
+import {
+  htmlObjStyleToStyleValue,
+  htmlStyleToStyleValue,
+  isHTMLObjStyle,
+  jsxStyleToStyleValue,
+} from "../src/utils.ts";
+
+const MODES = ["jsx", "html", "htmlObj"] as const;
+type Mode = (typeof MODES)[number] | null;
+
+export type HTMLProperties<T extends AnyComponent> = VariantProps<T> & {
+  id?: string;
+  class?: string;
+  className?: string;
+  style?: StyleProperty;
+};
+
+type ConfigParams = NonNullable<Parameters<typeof create>[0]>;
+
+interface Config {
+  mode: Mode;
+  transformClass?: ConfigParams["transformClass"];
+}
+
+const transformClass = {
+  uppercase: (className: string) => className.toUpperCase(),
+} satisfies Record<string, Config["transformClass"]>;
+
+export const CONFIGS = {
+  default: { mode: null },
+  jsx: { mode: "jsx" },
+  html: { mode: "html" },
+  htmlObj: { mode: "htmlObj" },
+  uppercase: {
+    mode: null,
+    transformClass: transformClass.uppercase,
+  },
+} satisfies Record<string, Config>;
+
+export function getConfigMode<T extends Config>(config: T): T["mode"] {
+  if (!("mode" in config)) return null;
+  return config.mode;
+}
+
+export function getConfigTransformClass(config: Config) {
+  if (!("transformClass" in config) || !config.transformClass) {
+    return (className: string) => className;
+  }
+  return config.transformClass;
+}
+
+export function getConfigDescription(config: Config) {
+  for (const [name, currentConfig] of Object.entries(CONFIGS)) {
+    if (currentConfig !== config) continue;
+    return name;
+  }
+  return "custom";
+}
+
+export function createCVFromConfig(
+  config: Config,
+): ReturnType<typeof create>["cv"] {
+  const transformClass = getConfigTransformClass(config);
+  const hasTransform = "transformClass" in config && config.transformClass;
+  if (!hasTransform) {
+    return cvBase;
+  }
+  const { cv } = create({ transformClass });
+  return cv;
+}
+
+export function getModeComponent<
+  M extends Mode,
+  V extends Variants = {},
+  CV extends ComputedVariants = {},
+  const E extends AnyComponent[] = [],
+>(mode: M, component: CVComponent<V, CV, E>) {
+  if (!mode) return component;
+  return component[mode];
+}
+
+function getClass(props: ComponentResult) {
+  if ("class" in props) return props.class;
+  return props.className;
+}
+
+export function getClassPropertyName(config: Config) {
+  const mode = config.mode;
+  if (mode === "jsx" || mode === null) return "className";
+  return "class";
+}
+
+export function getExpectedPropsKeys(config: Config, ...variantKeys: string[]) {
+  if (config.mode === null) {
+    return ["class", "className", "style", ...variantKeys];
+  }
+  return [getClassPropertyName(config), "style", ...variantKeys];
+}
+
+export function assertDefaultProps(
+  props: ComponentResult,
+): asserts props is StyleClassProps {
+  if (!("class" in props)) {
+    expect.fail("Expected default props to have class");
+  }
+  if (!("style" in props) || typeof props.style !== "object") {
+    expect.fail("Expected default props to have style");
+  }
+}
+
+export function assertJSXProps(
+  props: ComponentResult,
+): asserts props is JSXProps {
+  if (!("className" in props)) {
+    expect.fail("Expected jsx props to have className");
+  }
+  if (!("style" in props) || typeof props.style !== "object") {
+    expect.fail("Expected jsx props to have style");
+  }
+}
+
+export function assertHTMLProps(
+  props: ComponentResult,
+): asserts props is HTMLProps {
+  if (!("class" in props)) {
+    expect.fail("Expected html props to have class");
+  }
+  if (!("style" in props) || typeof props.style !== "string") {
+    expect.fail("Expected html props to have style");
+  }
+}
+
+export function assertHTMLObjProps(
+  props: ComponentResult,
+): asserts props is HTMLObjProps {
+  if (!("class" in props)) {
+    expect.fail("Expected htmlObj props to have class");
+  }
+  if (!("style" in props) || typeof props.style !== "object") {
+    expect.fail("Expected htmlObj props to have style");
+  }
+}
+
+export function getStyle(props: Pick<ComponentResult, "style">) {
+  if (typeof props.style === "string") {
+    return htmlStyleToStyleValue(props.style);
+  }
+  if (typeof props.style === "object") {
+    if (isHTMLObjStyle(props.style)) {
+      return htmlObjStyleToStyleValue(props.style);
+    }
+    return jsxStyleToStyleValue(props.style);
+  }
+  return {};
+}
+
+export function getStyleClass(props: ComponentResult): Record<string, unknown> {
+  return {
+    ...getStyle(props),
+    class: getClass(props),
+  };
+}