lapikit 0.7.0 → 0.7.1

package/dist/utils/components.js

@@ -1,58 +1,117 @@
+import { DEV } from 'esm-env';
+import { makeComponentProps } from '../html-mapped';
+const endsWithSeparator = /[^a-zA-Z0-9]$/;
+const startsWithSeparator = /^[^a-zA-Z0-9]/;
+const whitespace = /\s/;
+const whitespaces = /\s+/;
+const propertyCache = new Map();
+function hasKeys(value) {
+    if (!value || typeof value !== 'object')
+        return false;
+    for (const key in value) {
+        if (Object.hasOwn(value, key))
+            return true;
+    }
+    return false;
+}
+/**
+ * Adds the classes of a value (one or several, separated by spaces) to the set.
+ * The set keeps the first position of each class and drops the duplicates.
+ */
+function addClasses(classes, value) {
+    if (!whitespace.test(value)) {
+        if (value)
+            classes.add(value);
+        return;
+    }
+    for (const name of value.split(whitespaces)) {
+        if (name)
+            classes.add(name);
+    }
+}
+/**
+ * Adds a class value with the rules of clsx (class on an element): a string, an array (nested too),
+ * or an object whose keys are added when their value is truthy. Joining an array would give "a,b"
+ */
+function addClassValue(classes, value) {
+    if (typeof value === 'string')
+        addClasses(classes, value);
+    else if (Array.isArray(value)) {
+        for (const item of value)
+            addClassValue(classes, item);
+    }
+    else if (value && typeof value === 'object') {
+        for (const key in value) {
+            if (value[key])
+                addClasses(classes, key);
+        }
+    }
+}
+/**
+ * The classes of the s-class_xxx directives (class:xxx on a kit tag):
+ * - true gives the name (class:active -> active);
+ * - a number or a text gives the name and the value, joined by a dash (class:gap={4} -> gap-4),
+ *   without a dash when the name ends or the value starts with a separator (- _ : / .):
+ *   s-class_gap-={4}, s-class_variant="-primary" and s-class_state=":active" keep working;
+ * - false, null, undefined and '' give nothing.
+ */
+export function directiveClasses(classProps) {
+    const classes = [];
+    if (!classProps)
+        return classes;
+    for (const key in classProps) {
+        const value = classProps[key];
+        // 8 = 's-class_'.length
+        const base = key.slice(8);
+        if (value === true)
+            classes.push(base);
+        else if ((typeof value === 'string' && value) || typeof value === 'number') {
+            const text = String(value);
+            const dash = endsWithSeparator.test(base) || startsWithSeparator.test(text) ? '' : '-';
+            classes.push(`${base}${dash}${text}`);
+        }
+    }
+    return classes;
+}
 /**
  * useClassName - Utility to compute class names for a component.
  * @param baseClass - The base class name for the component.
- * @param className - Additional class names as a string.
+ * @param className - Additional class names: a string or an array of strings.
  * @param sClass - The s-class property which can be a string, array, or object.
  * @param classProps - An object containing s-class_xxx directives.
- * @returns A computed class string.
+ * @returns A computed class string: no extra spaces, no duplicates, in the order of the inputs.
  */
 export function useClassName({ baseClass = '', className, sClass, classProps } = {}) {
-    const classes = [];
-    if (baseClass) {
-        classes.push(baseClass);
+    if (!sClass && !className && !hasKeys(classProps))
+        return baseClass;
+    const classes = new Set();
+    if (baseClass)
+        addClasses(classes, baseClass);
+    if (typeof sClass === 'string') {
+        addClasses(classes, sClass);
     }
-    if (typeof sClass === 'string' && sClass) {
-        classes.push(sClass);
-    }
-    if (Array.isArray(sClass)) {
+    else if (Array.isArray(sClass)) {
         for (const value of sClass) {
-            if (typeof value === 'string' && value) {
-                classes.push(value);
-            }
+            if (typeof value === 'string')
+                addClasses(classes, value);
         }
     }
-    if (sClass && typeof sClass === 'object' && !Array.isArray(sClass)) {
-        const entries = Object.entries(sClass);
-        if (entries.length > 0) {
-            for (const [key, value] of entries) {
-                if (value === true) {
-                    classes.push(key);
-                }
-                else if (typeof value === 'string' && value) {
-                    classes.push(value);
-                }
-            }
+    else if (sClass && typeof sClass === 'object') {
+        for (const key in sClass) {
+            const value = sClass[key];
+            if (value === true)
+                addClasses(classes, key);
+            else if (typeof value === 'string')
+                addClasses(classes, value);
         }
     }
     if (classProps) {
-        const entries = Object.entries(classProps);
-        if (entries.length > 0) {
-            for (const [key, value] of entries) {
-                // Use slice instead of replace for better performance (8 = 's-class_'.length)
-                const base = key.slice(8);
-                if (value === true) {
-                    classes.push(base);
-                }
-                else if (typeof value === 'string' && value) {
-                    classes.push(`${base}${value}`);
-                }
-            }
-        }
-    }
-    if (className) {
-        classes.push(className);
+        for (const name of directiveClasses(classProps))
+            addClasses(classes, name);
     }
-    return classes.filter(Boolean).join(' ');
+    if (className)
+        addClassValue(classes, className);
+    return [...classes].join(' ');
 }
 /**
  * useIsInteractive - Utility to determine whether a component should behave as interactive:
@@ -71,40 +130,72 @@ export function useIsInteractive(props, tag, interactiveTags, interactive = fals
         interactiveEventKeys.some((key) => typeof props[key] === 'function'));
 }
 /**
- * useStyles - Utility to compute style declarations for a component (optimized pure function).
- * @param styleAttr - Inline style attribute as a string.
- * @param sStyle - The s-style property which is an object of style key-value pairs.
+ * The CSS name of a property: backgroundColor gives background-color.
+ * A custom property (--x) or a name already in kebab-case is kept as it is.
+ */
+function toCssProperty(name) {
+    if (name.startsWith('--') || !/[A-Z]/.test(name))
+        return name;
+    let property = propertyCache.get(name);
+    if (property === undefined) {
+        property = name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+        // Vendor prefixes: WebkitMask gives -webkit-mask
+        if (/^(webkit|moz|ms)-/.test(property))
+            property = `-${property}`;
+        propertyCache.set(name, property);
+    }
+    return property;
+}
+/**
+ * The declaration of a style value, or undefined to skip it:
+ * - a number (0 included) or a non empty string is kept;
+ * - null, undefined, false, true and '' are skipped (true is not a CSS value);
+ * - a value holding ; { or } is refused: it could add other declarations (CSS injection).
+ */
+function toDeclaration(name, value) {
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? `${toCssProperty(name)}: ${value}` : undefined;
+    }
+    if (typeof value !== 'string' || !value)
+        return undefined;
+    if (/[;{}]/.test(value)) {
+        if (DEV) {
+            console.warn(`[lapikit] the style value of "${name}" is ignored: it contains ; { or } ("${value}")`);
+        }
+        return undefined;
+    }
+    return `${toCssProperty(name)}: ${value}`;
+}
+/**
+ * useStyles - Utility to compute style declarations for a component (pure function).
+ * @param styleAttr - Inline style attribute as a string (raw CSS, kept as it is).
+ * @param sStyle - The s-style property: an object of property / value pairs (camelCase or kebab-case).
  * @param styleProps - An object containing s-style_xxx directives.
- * @returns A computed style string.
+ * @returns A computed style string; the style attribute comes last, so it wins.
  */
 export function useStyles({ styleAttr, sStyle, styleProps } = {}) {
+    // Fast path, the most common case: nothing to merge
+    if (!hasKeys(sStyle) && !hasKeys(styleProps))
+        return styleAttr ?? '';
     const styles = [];
     if (sStyle && typeof sStyle === 'object') {
-        const entries = Object.entries(sStyle);
-        if (entries.length > 0) {
-            for (const [key, value] of entries) {
-                if (value) {
-                    styles.push(`${key}: ${value}`);
-                }
-            }
+        for (const key in sStyle) {
+            const declaration = toDeclaration(key, sStyle[key]);
+            if (declaration)
+                styles.push(declaration);
         }
     }
     if (styleProps) {
-        const entries = Object.entries(styleProps);
-        if (entries.length > 0) {
-            for (const [key, value] of entries) {
-                // Use slice instead of replace for better performance (8 = 's-style_'.length)
-                const base = key.slice(8);
-                if (value) {
-                    styles.push(`${base}: ${value}`);
-                }
-            }
+        for (const key in styleProps) {
+            // 8 = 's-style_'.length
+            const declaration = toDeclaration(key.slice(8), styleProps[key]);
+            if (declaration)
+                styles.push(declaration);
         }
     }
-    if (styleAttr) {
+    if (styleAttr)
         styles.push(styleAttr);
-    }
-    return styles.filter(Boolean).join('; ');
+    return styles.join('; ');
 }
 /**
  * useElevation - Utility to resolve the `elevation` prop into its base/hover/active states.
@@ -125,3 +216,23 @@ export function useElevation(elevation) {
         active: elevation.active
     };
 }
+/**
+ * useComponentAttrs - The class, style and other attributes of a labs component, in one call.
+ *
+ * The class is left to Svelte (clsx): class and s-class follow the same rules as class on an element,
+ * a string, an array, or an object whose keys are added when their value is truthy
+ * ({ active: isActive } -> active). The s-class_xxx directives (class:xxx on a kit tag) keep their
+ * rule: class:gap={4} -> gap-4.
+ *
+ * @param baseClass - The class of the component ('kit-btn-v2'), '' for none.
+ * @param props - The class, s-class, style and s-style props of the component.
+ * @param rest - The rest of the props: the s-class_xxx / s-style_xxx directives are taken out of it.
+ */
+export function useComponentAttrs(baseClass, { className, sClass, styleAttr, sStyle }, rest) {
+    const { classProps, styleProps, restProps } = makeComponentProps(rest);
+    return {
+        class: [baseClass, sClass, directiveClasses(classProps), className],
+        style: useStyles({ styleAttr, sStyle, styleProps }),
+        rest: restProps
+    };
+}

package/dist/utils/directives.d.ts

@@ -0,0 +1,20 @@
+import type { PropValue } from '../@types';
+/**
+ * The classes of the s-class_xxx directives (class:xxx on a kit tag):
+ * - true gives the name (class:active -> active);
+ * - a number or a text gives the name and the value, joined by a dash (class:gap={4} -> gap-4),
+ *   without a dash when the name ends or the value starts with a separator (- _ : / .):
+ *   s-class_gap-={4}, s-class_variant="-primary" and s-class_state=":active" keep working;
+ * - false, null, undefined and '' give nothing.
+ */
+export declare function directiveClasses(classProps: Record<string, PropValue> | undefined): string[];
+/**
+ * Adds the classes of a value (one or several, separated by spaces) to the set.
+ * The set keeps the first position of each class and drops the duplicates.
+ */
+export declare function addClasses(classes: Set<string>, value: string): void;
+/**
+ * Adds a class value with the rules of clsx (class on an element): a string, an array (nested too),
+ * or an object whose keys are added when their value is truthy. Joining an array would give "a,b"
+ */
+export declare function addClassValue(classes: Set<string>, value: unknown): void;

package/dist/utils/directives.js

@@ -0,0 +1,64 @@
+const endsWithSeparator = /[^a-zA-Z0-9]$/;
+const startsWithSeparator = /^[^a-zA-Z0-9]/;
+const whitespace = /\s/;
+const whitespaces = /\s+/;
+/**
+ * The classes of the s-class_xxx directives (class:xxx on a kit tag):
+ * - true gives the name (class:active -> active);
+ * - a number or a text gives the name and the value, joined by a dash (class:gap={4} -> gap-4),
+ *   without a dash when the name ends or the value starts with a separator (- _ : / .):
+ *   s-class_gap-={4}, s-class_variant="-primary" and s-class_state=":active" keep working;
+ * - false, null, undefined and '' give nothing.
+ */
+export function directiveClasses(classProps) {
+    const classes = [];
+    if (!classProps)
+        return classes;
+    for (const key in classProps) {
+        const value = classProps[key];
+        // 8 = 's-class_'.length
+        const base = key.slice(8);
+        if (value === true)
+            classes.push(base);
+        else if ((typeof value === 'string' && value) || typeof value === 'number') {
+            const text = String(value);
+            const dash = endsWithSeparator.test(base) || startsWithSeparator.test(text) ? '' : '-';
+            classes.push(`${base}${dash}${text}`);
+        }
+    }
+    return classes;
+}
+/**
+ * Adds the classes of a value (one or several, separated by spaces) to the set.
+ * The set keeps the first position of each class and drops the duplicates.
+ */
+export function addClasses(classes, value) {
+    // Most values are a single class: no split (the costly part)
+    if (!whitespace.test(value)) {
+        if (value)
+            classes.add(value);
+        return;
+    }
+    for (const name of value.split(whitespaces)) {
+        if (name)
+            classes.add(name);
+    }
+}
+/**
+ * Adds a class value with the rules of clsx (class on an element): a string, an array (nested too),
+ * or an object whose keys are added when their value is truthy. Joining an array would give "a,b"
+ */
+export function addClassValue(classes, value) {
+    if (typeof value === 'string')
+        addClasses(classes, value);
+    else if (Array.isArray(value)) {
+        for (const item of value)
+            addClassValue(classes, item);
+    }
+    else if (value && typeof value === 'object') {
+        for (const key in value) {
+            if (value[key])
+                addClasses(classes, key);
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.7.0",
+	"version": "0.7.1",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"
@@ -35,7 +35,8 @@
 		"README.md",
 		"LICENSE",
 		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
+		"!dist/**/*.spec.*",
+		"!dist/**/*.scss"
 	],
 	"sideEffects": [
 		"**/*.css"
@@ -104,6 +105,7 @@
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"publint": "^0.3.2",
+		"sass": "^1.105.1",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",