mtrl 0.3.3 → 0.3.6

package/src/core/dom/classes.ts

@@ -1,60 +1,132 @@
 // src/core/dom/classes.ts
 /**
  * @module core/dom
- * @description DOM manipulation utilities
+ * @description DOM manipulation utilities optimized for performance
  */
 
 import { normalizeClasses } from '../utils';
+import { PREFIX } from '../config';
+
+// Constant for prefix with dash for better performance
+const PREFIX_WITH_DASH = `${PREFIX}-`;
 
 /**
  * Adds multiple classes to an element
+ * Automatically adds prefix to classes that don't already have it
+ * Optimized for minimal array operations and DOM interactions
+ * 
  * @param {HTMLElement} element - Target element
  * @param {...(string | string[])} classes - Classes to add
  * @returns {HTMLElement} Modified element
  */
 export const addClass = (element: HTMLElement, ...classes: (string | string[])[]): HTMLElement => {
   const normalizedClasses = normalizeClasses(...classes);
-  if (normalizedClasses.length) {
-    element.classList.add(...normalizedClasses);
+  
+  // Early return for empty classes
+  if (!normalizedClasses.length) return element;
+  
+  // Using DOMTokenList's add() with multiple arguments is faster than multiple add() calls
+  // But we need to handle prefixing first
+  const prefixedClasses: string[] = [];
+  
+  for (let i = 0; i < normalizedClasses.length; i++) {
+    const cls = normalizedClasses[i];
+    if (!cls) continue;
+    
+    prefixedClasses.push(
+      cls.startsWith(PREFIX_WITH_DASH) ? cls : PREFIX_WITH_DASH + cls
+    );
+  }
+  
+  // Add all classes in a single operation if possible
+  if (prefixedClasses.length) {
+    element.classList.add(...prefixedClasses);
   }
+  
   return element;
 };
 
 /**
  * Removes multiple classes from an element
+ * Handles only exact class names as specified (no automatic prefixing)
+ * For better performance, clients should know exactly which classes to remove
+ * 
  * @param {HTMLElement} element - Target element
  * @param {...(string | string[])} classes - Classes to remove
  * @returns {HTMLElement} Modified element
  */
 export const removeClass = (element: HTMLElement, ...classes: (string | string[])[]): HTMLElement => {
   const normalizedClasses = normalizeClasses(...classes);
-  if (normalizedClasses.length) {
-    element.classList.remove(...normalizedClasses);
+  
+  // Early return for empty classes
+  if (!normalizedClasses.length) return element;
+  
+  // Prepare prefixed class names
+  const prefixedClasses: string[] = [];
+  
+  for (let i = 0; i < normalizedClasses.length; i++) {
+    const cls = normalizedClasses[i];
+    if (!cls) continue;
+    
+    // Only add the prefixed version
+    prefixedClasses.push(
+      cls.startsWith(PREFIX_WITH_DASH) ? cls : PREFIX_WITH_DASH + cls
+    );
+  }
+  
+  // Remove all classes in a single operation if possible
+  if (prefixedClasses.length) {
+    element.classList.remove(...prefixedClasses);
   }
+  
   return element;
 };
 
 /**
  * Toggles multiple classes on an element
+ * Automatically adds prefix to classes that don't already have it
+ * 
  * @param {HTMLElement} element - Target element
  * @param {...(string | string[])} classes - Classes to toggle
  * @returns {HTMLElement} Modified element
  */
 export const toggleClass = (element: HTMLElement, ...classes: (string | string[])[]): HTMLElement => {
   const normalizedClasses = normalizeClasses(...classes);
-  normalizedClasses.forEach(cls => {
-    element.classList.toggle(cls);
-  });
+  
+  for (let i = 0; i < normalizedClasses.length; i++) {
+    const cls = normalizedClasses[i];
+    if (!cls) continue;
+    
+    const prefixedClass = cls.startsWith(PREFIX_WITH_DASH) ? cls : PREFIX_WITH_DASH + cls;
+    element.classList.toggle(prefixedClass);
+  }
+  
   return element;
 };
 
 /**
  * Checks if an element has all specified classes
+ * Automatically adds prefix to classes that don't already have it
+ * 
  * @param {HTMLElement} element - Target element
  * @param {...(string | string[])} classes - Classes to check
  * @returns {boolean} True if element has all specified classes
  */
 export const hasClass = (element: HTMLElement, ...classes: (string | string[])[]): boolean => {
   const normalizedClasses = normalizeClasses(...classes);
-  return normalizedClasses.every(cls => element.classList.contains(cls));
+  
+  // Early return for empty classes (technically all are present)
+  if (!normalizedClasses.length) return true;
+  
+  for (let i = 0; i < normalizedClasses.length; i++) {
+    const cls = normalizedClasses[i];
+    if (!cls) continue;
+    
+    const prefixedClass = cls.startsWith(PREFIX_WITH_DASH) ? cls : PREFIX_WITH_DASH + cls;
+    if (!element.classList.contains(prefixedClass)) {
+      return false;
+    }
+  }
+  
+  return true;
 };

package/src/core/dom/create.ts

@@ -7,6 +7,7 @@
 import { setAttributes } from './attributes';
 import { normalizeClasses } from '../utils';
 import { PREFIX } from '../config';
+import { addClass } from './classes'; // Import addClass
 
 /**
  * Event handler function type
@@ -58,9 +59,22 @@ export interface CreateElementOptions {
   data?: Record<string, string>;
   
   /**
-   * CSS classes
+   * CSS classes (will be automatically prefixed with 'mtrl-')
+   * Alias for 'className'
    */
-  className?: string | string[] | null;
+  class?: string | string[];
+  
+  /**
+   * CSS classes (will be automatically prefixed with 'mtrl-')
+   * Alias for 'class'
+   */
+  className?: string | string[];
+  
+  /**
+   * CSS classes that will NOT be prefixed
+   * Added as-is to the element
+   */
+  rawClass?: string | string[];
   
   /**
    * HTML attributes
@@ -95,9 +109,6 @@ export interface EventHandlerStorage {
   [eventName: string]: EventHandler;
 }
 
-// Constant for prefix with dash
-const PREFIX_WITH_DASH = `${PREFIX}-`;
-
 /**
  * Creates a DOM element with the specified options
  *
@@ -112,7 +123,9 @@ export const createElement = (options: CreateElementOptions = {}): HTMLElement =
     text = '',
     id = '',
     data = {},
+    class: classOption,
     className,
+    rawClass,
     attrs = {},
     forwardEvents = {},
     onCreate,
@@ -127,14 +140,17 @@ export const createElement = (options: CreateElementOptions = {}): HTMLElement =
   if (text) element.textContent = text;
   if (id) element.id = id;
 
-  // Handle classes
-  if (className) {
-    const classes = normalizeClasses(className);
-    if (classes.length) {
-      // Apply prefix to classes in a single operation
-      element.classList.add(...classes.map(cls => 
-        cls && !cls.startsWith(PREFIX_WITH_DASH) ? PREFIX_WITH_DASH + cls : cls
-      ).filter(Boolean));
+  // 1. Handle prefixed classes using addClass
+  const prefixedClassSource = classOption || className;
+  if (prefixedClassSource) {
+    addClass(element, prefixedClassSource);
+  }
+  
+  // 2. Handle raw classes (no prefix)
+  if (rawClass) {
+    const rawClasses = normalizeClasses(rawClass);
+    if (rawClasses.length) {
+      element.classList.add(...rawClasses);
     }
   }
 
@@ -230,12 +246,7 @@ export const withAttributes = (attrs: Record<string, any>) =>
  */
 export const withClasses = (...classes: (string | string[])[]) => 
   (element: HTMLElement): HTMLElement => {
-    const normalizedClasses = normalizeClasses(...classes);
-    if (normalizedClasses.length) {
-      element.classList.add(...normalizedClasses.map(cls => 
-        cls && !cls.startsWith(PREFIX_WITH_DASH) ? PREFIX_WITH_DASH + cls : cls
-      ).filter(Boolean));
-    }
+    addClass(element, ...classes);
     return element;
   };