mtrl 0.3.8 → 0.4.0

package/src/core/dom/create.ts

@@ -1,273 +0,0 @@
-// src/core/dom/create.ts
-/**
- * @module core/dom
- * @description DOM manipulation utilities
- */
-
-import { setAttributes } from './attributes';
-import { normalizeClasses } from '../utils';
-import { PREFIX } from '../config';
-import { addClass } from './classes'; // Import addClass
-
-/**
- * Event handler function type
- */
-export type EventHandler = (event: Event) => void;
-
-/**
- * Event condition type - either a boolean or a function that returns a boolean
- */
-export type EventCondition = boolean | ((context: any, event: Event) => boolean);
-
-/**
- * Options for element creation
- */
-export interface CreateElementOptions {
-  /**
-   * HTML tag name
-   */
-  tag?: string;
-  
-  /**
-   * Container to append element to
-   */
-  container?: HTMLElement | null;
-  
-  /**
-   * Inner HTML content
-   */
-  html?: string;
-  
-  /**
-   * Text content
-   */
-  text?: string;
-  
-  /**
-   * Element ID
-   */
-  id?: string;
-
-  /**
-   * Element ariaLabel
-   */
-  ariaLabel?: string;
-  
-  /**
-   * Dataset attributes
-   */
-  data?: Record<string, string>;
-  
-  /**
-   * CSS classes (will be automatically prefixed with 'mtrl-')
-   * Alias for 'className'
-   */
-  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
-   */
-  attrs?: Record<string, any>;
-  
-  /**
-   * Events to forward when component has emit method
-   */
-  forwardEvents?: Record<string, EventCondition>;
-  
-  /**
-   * Callback after element creation
-   */
-  onCreate?: (element: HTMLElement, context?: any) => void;
-  
-  /**
-   * Component context
-   */
-  context?: any;
-  
-  /**
-   * Additional attributes
-   */
-  [key: string]: any;
-}
-
-/**
- * Event handler storage to facilitate cleanup
- */
-export interface EventHandlerStorage {
-  [eventName: string]: EventHandler;
-}
-
-/**
- * Creates a DOM element with the specified options
- *
- * @param {CreateElementOptions} options - Element creation options
- * @returns {HTMLElement} Created element
- */
-export const createElement = (options: CreateElementOptions = {}): HTMLElement => {
-  const {
-    tag = 'div',
-    container = null,
-    html = '',
-    text = '',
-    id = '',
-    data = {},
-    class: classOption,
-    className,
-    rawClass,
-    attrs = {},
-    forwardEvents = {},
-    onCreate,
-    context,
-    ...rest
-  } = options;
-
-  const element = document.createElement(tag);
-
-  // Apply basic properties
-  if (html) element.innerHTML = html;
-  if (text) element.textContent = text;
-  if (id) element.id = id;
-
-  // 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);
-    }
-  }
-
-  // Handle data attributes directly
-  for (const key in data) {
-    element.dataset[key] = data[key];
-  }
-
-  // Handle regular attributes
-  const allAttrs = { ...attrs, ...rest };
-  for (const key in allAttrs) {
-    const value = allAttrs[key];
-    if (value != null) element.setAttribute(key, String(value));
-  }
-
-  // Handle event forwarding
-  if (forwardEvents && (context?.emit || context?.on)) {
-    element.__eventHandlers = {};
-    
-    for (const nativeEvent in forwardEvents) {
-      const eventConfig = forwardEvents[nativeEvent];
-      
-      const handler = (event: Event) => {
-        let shouldForward = true;
-        
-        if (typeof eventConfig === 'function') {
-          try {
-            // Create a lightweight context clone
-            const ctxWithElement = { ...context, element };
-            shouldForward = eventConfig(ctxWithElement, event);
-          } catch (error) {
-            console.warn(`Error in event condition for ${nativeEvent}:`, error);
-            shouldForward = false;
-          }
-        } else {
-          shouldForward = Boolean(eventConfig);
-        }
-        
-        if (shouldForward) {
-          if (context.emit) {
-            context.emit(nativeEvent, { event, element, originalEvent: event });
-          } else if (context.on) {
-            element.dispatchEvent(new CustomEvent(nativeEvent, {
-              detail: { event, element, originalEvent: event },
-              bubbles: true,
-              cancelable: true
-            }));
-          }
-        }
-      };
-      
-      element.__eventHandlers[nativeEvent] = handler;
-      element.addEventListener(nativeEvent, handler);
-    }
-  }
-
-  // Append to container if provided
-  if (container) container.appendChild(element);
-  if (onCreate) onCreate(element, context);
-
-  return element;
-};
-
-/**
- * Removes event handlers from an element
- * @param element - Element to cleanup
- */
-export const removeEventHandlers = (element: HTMLElement): void => {
-  const handlers = element.__eventHandlers;
-  if (handlers) {
-    for (const event in handlers) {
-      element.removeEventListener(event, handlers[event]);
-    }
-    delete element.__eventHandlers;
-  }
-};
-
-/**
- * Higher-order function to add attributes to an element
- * @param {Record<string, any>} attrs - Attributes to add
- * @returns {(element: HTMLElement) => HTMLElement} Element transformer
- */
-export const withAttributes = (attrs: Record<string, any>) => 
-  (element: HTMLElement): HTMLElement => {
-    setAttributes(element, attrs);
-    return element;
-  };
-
-/**
- * Higher-order function to add classes to an element
- * @param {...(string | string[])} classes - Classes to add
- * @returns {(element: HTMLElement) => HTMLElement} Element transformer
- */
-export const withClasses = (...classes: (string | string[])[]) => 
-  (element: HTMLElement): HTMLElement => {
-    addClass(element, ...classes);
-    return element;
-  };
-
-/**
- * Higher-order function to add content to an element
- * @param {Node|string} content - Content to add
- * @returns {(element: HTMLElement) => HTMLElement} Element transformer
- */
-export const withContent = (content: Node | string) => 
-  (element: HTMLElement): HTMLElement => {
-    if (content instanceof Node) element.appendChild(content);
-    else element.textContent = content;
-    return element;
-  };
-
-// Extend HTMLElement interface to add eventHandlers property
-declare global {
-  interface HTMLElement {
-    /**
-     * Storage for event handlers to enable cleanup
-     */
-    __eventHandlers?: EventHandlerStorage;
-  }
-}

package/src/core/dom/events.ts

@@ -1,209 +0,0 @@
-// src/core/dom/events.ts
-/**
- * @module core/dom
- * @description DOM manipulation utilities
- */
-
-/**
- * Event manager interface for handling DOM events
- */
-export interface EventManager {
-  /**
-   * Add an event listener with options
-   * @param event - Event name
-   * @param handler - Event handler
-   * @param options - addEventListener options
-   * @returns EventManager instance for chaining
-   */
-  on: <T extends Event>(event: string, handler: (e: T) => void, options?: AddEventListenerOptions) => EventManager;
-  
-  /**
-   * Remove an event listener
-   * @param event - Event name
-   * @param handler - Event handler
-   * @returns EventManager instance for chaining
-   */
-  off: <T extends Event>(event: string, handler: (e: T) => void) => EventManager;
-  
-  /**
-   * Temporarily disable all event listeners
-   * @returns EventManager instance for chaining
-   */
-  pause: () => EventManager;
-  
-  /**
-   * Re-enable all event listeners
-   * @returns EventManager instance for chaining
-   */
-  resume: () => EventManager;
-  
-  /**
-   * Remove all event listeners and clean up
-   */
-  destroy: () => void;
-  
-  /**
-   * Get all active handlers
-   * @returns Map of active handlers
-   */
-  getHandlers: () => Map<string, HandlerInfo>;
-  
-  /**
-   * Check if a specific handler exists
-   * @param event - Event name
-   * @param handler - Event handler
-   * @returns Whether handler exists
-   */
-  hasHandler: <T extends Event>(event: string, handler: (e: T) => void) => boolean;
-}
-
-/**
- * Handler information
- */
-interface HandlerInfo {
-  original: EventListener;
-  enhanced: EventListener;
-  event: string;
-  options: AddEventListenerOptions;
-}
-
-/**
- * Creates an event manager to handle DOM events with enhanced functionality.
- * Provides a robust interface for managing event listeners with error handling,
- * cleanup, and lifecycle management.
- *
- * @param element - DOM element to attach events to
- * @returns Event manager interface
- */
-export const createEventManager = (element: HTMLElement): EventManager => {
-  // Store handlers with their metadata
-  const handlers = new Map<string, HandlerInfo>();
-
-  /**
-   * Creates a unique handler identifier
-   * @param event - Event name
-   * @param handler - EventListener
-   * @returns Unique identifier
-   */
-  const createHandlerId = (event: string, handler: EventListener): string =>
-    `${event}_${handler.toString()}`;
-
-  /**
-   * Wraps an event handler with error boundary and logging
-   * @param handler - Original event handler
-   * @param event - Event name for error context
-   * @returns Enhanced handler with error boundary
-   */
-  const enhanceHandler = (handler: EventListener, event: string): EventListener => (e: Event) => {
-    try {
-      handler(e);
-    } catch (error) {
-      console.error(`Error in ${event} handler:`, error);
-    }
-  };
-
-  /**
-   * Safely removes event listener
-   * @param event - Event name
-   * @param handler - Event handler
-   */
-  const safeRemoveListener = (event: string, handler: EventListener): void => {
-    try {
-      element.removeEventListener(event, handler);
-    } catch (error) {
-      console.warn(`Failed to remove ${event} listener:`, error);
-    }
-  };
-
-  return {
-    /**
-     * Adds an event listener with options
-     * @param event - Event name
-     * @param handler - Event handler
-     * @param options - addEventListener options
-     * @returns EventManager instance for chaining
-     */
-    on<T extends Event>(event: string, handler: (e: T) => void, options: AddEventListenerOptions = {}): EventManager {
-      const enhanced = enhanceHandler(handler as EventListener, event);
-      const id = createHandlerId(event, handler as EventListener);
-
-      handlers.set(id, {
-        original: handler as EventListener,
-        enhanced,
-        event,
-        options
-      });
-
-      element.addEventListener(event, enhanced, options);
-      return this;
-    },
-
-    /**
-     * Removes an event listener
-     * @param event - Event name
-     * @param handler - Event handler
-     * @returns EventManager instance for chaining
-     */
-    off<T extends Event>(event: string, handler: (e: T) => void): EventManager {
-      const id = createHandlerId(event, handler as EventListener);
-      const stored = handlers.get(id);
-
-      if (stored) {
-        safeRemoveListener(event, stored.enhanced);
-        handlers.delete(id);
-      }
-      return this;
-    },
-
-    /**
-     * Temporarily disables all event listeners
-     * @returns EventManager instance for chaining
-     */
-    pause(): EventManager {
-      handlers.forEach(({ enhanced, event }) => {
-        safeRemoveListener(event, enhanced);
-      });
-      return this;
-    },
-
-    /**
-     * Re-enables all event listeners
-     * @returns EventManager instance for chaining
-     */
-    resume(): EventManager {
-      handlers.forEach(({ enhanced, event, options }) => {
-        element.addEventListener(event, enhanced, options);
-      });
-      return this;
-    },
-
-    /**
-     * Removes all event listeners and cleans up
-     */
-    destroy(): void {
-      handlers.forEach(({ enhanced, event }) => {
-        safeRemoveListener(event, enhanced);
-      });
-      handlers.clear();
-    },
-
-    /**
-     * Gets all active handlers
-     * @returns Map of active handlers
-     */
-    getHandlers(): Map<string, HandlerInfo> {
-      return new Map(handlers);
-    },
-
-    /**
-     * Checks if a specific handler exists
-     * @param event - Event name
-     * @param handler - Event handler
-     * @returns Whether handler exists
-     */
-    hasHandler<T extends Event>(event: string, handler: (e: T) => void): boolean {
-      const id = createHandlerId(event, handler as EventListener);
-      return handlers.has(id);
-    }
-  };
-};

package/src/core/dom/index.ts

@@ -1,10 +0,0 @@
-// src/core/dom/index.ts
-
-export { createElement, withAttributes, withClasses, withContent } from './create';
-export type { CreateElementOptions } from './create';
-
-export { setAttributes, removeAttributes } from './attributes';
-export { addClass, removeClass, toggleClass, hasClass } from './classes';
-
-export { createEventManager } from './events';
-export type { EventManager } from './events';

package/src/core/dom/utils.ts

@@ -1,97 +0,0 @@
-// src/core/dom/utils.ts
-
-/**
- * Normalizes class names input by handling various formats:
- * - String with space-separated classes
- * - Array of strings
- * - Mixed array of strings and space-separated classes
- * 
- * @param classes - Classes to normalize
- * @returns Array of unique, non-empty class names
- */
-export const normalizeClasses = (...classes: (string | string[])[]): string[] => {
-  return [...new Set(
-    classes
-      .flat()
-      .reduce((acc: string[], cls) => {
-        if (typeof cls === 'string') {
-          // Split space-separated classes and add them individually
-          acc.push(...cls.split(/\s+/));
-        }
-        return acc;
-      }, [])
-      .filter(Boolean) // Remove empty strings
-  )];
-};
-
-/**
- * Creates a DOM element with attributes
- * 
- * @param tag - Element tag name
- * @param attributes - Element attributes
- * @returns Created element
- */
-export const createElement = <T extends HTMLElement>(tag: string, attributes: Record<string, any> = {}): T => {
-  const element = document.createElement(tag) as T;
-  
-  Object.entries(attributes).forEach(([key, value]) => {
-    if (key === 'className') {
-      element.className = value;
-    } else if (key === 'style' && typeof value === 'object') {
-      Object.assign(element.style, value);
-    } else if (key === 'data' && typeof value === 'object') {
-      Object.entries(value).forEach(([dataKey, dataValue]) => {
-        element.dataset[dataKey] = String(dataValue);
-      });
-    } else if (key === 'children' && Array.isArray(value)) {
-      value.forEach(child => {
-        if (child instanceof Node) {
-          element.appendChild(child);
-        } else if (child != null) {
-          element.appendChild(document.createTextNode(String(child)));
-        }
-      });
-    } else if (key.startsWith('on') && typeof value === 'function') {
-      const eventName = key.slice(2).toLowerCase();
-      element.addEventListener(eventName, value);
-    } else if (value !== null && value !== undefined) {
-      element.setAttribute(key, String(value));
-    }
-  });
-  
-  return element;
-};
-
-/**
- * Sets inline styles on an element
- * 
- * @param element - Target element
- * @param styles - Styles to set
- * @returns Modified element
- */
-export const setStyles = <T extends HTMLElement>(element: T, styles: Partial<CSSStyleDeclaration>): T => {
-  Object.assign(element.style, styles);
-  return element;
-};
-
-/**
- * Checks if an element matches a selector
- * 
- * @param element - Element to check
- * @param selector - CSS selector
- * @returns Whether element matches selector
- */
-export const matches = (element: Element, selector: string): boolean => {
-  return element.matches(selector);
-};
-
-/**
- * Finds the closest ancestor matching a selector
- * 
- * @param element - Starting element
- * @param selector - CSS selector
- * @returns Matching ancestor or null
- */
-export const closest = <T extends HTMLElement>(element: Element, selector: string): T | null => {
-  return element.closest(selector) as T | null;
-};

package/src/core/index.ts

@@ -1,111 +0,0 @@
-// src/core/index.ts
-/**
- * @module core
- * @description Core utilities and building blocks for the component system
- */
-
-// Config
-export { PREFIX, COMPONENTS, STATES, classNames } from './config';
-export type { 
-  ThemeConfig, 
-  ComponentConfig, 
-  ThemedComponentConfig, 
-  VariantComponentConfig, 
-  StateComponentConfig
-} from './config';
-
-// Build
-export { createText } from './build/text';
-export { createIcon } from './build/icon';
-export { createRipple } from './build/ripple';
-export { RIPPLE_TIMING } from './build/constants';
-
-// DOM manipulation
-export { createElement, withAttributes, withClasses, withContent } from './dom/create';
-export { setAttributes, removeAttributes } from './dom/attributes';
-export { addClass, removeClass, toggleClass, hasClass } from './dom/classes';
-
-// State Management
-export { createDisabled } from './state/disabled';
-export { createEventManager } from './state/events';
-export { createLifecycle } from './state/lifecycle';
-export { createEmitter } from './state/emitter';
-export { createStore } from './state/store';
-
-// Composition Utilities
-export { pipe, compose, transform } from './compose/pipe';
-export { createBase, withElement } from './compose/component';
-export {
-  withEvents,
-  withText,
-  withIcon,
-  withVariant,
-  withSize,
-  withPosition,
-  withDisabled,
-  withLifecycle,
-  withRipple
-} from './compose/features';
-
-// Utilities
-export { 
-  normalizeClasses, 
-  when, 
-  classNames as joinClasses, 
-  isObject, 
-  byString,
-  hasTouchSupport,
-  isMobileDevice,
-  normalizeEvent
-} from './utils';
-
-// Component feature interfaces for better developer experience
-export type { 
-  BaseComponent, 
-  ElementComponent, 
-  TouchState 
-} from './compose/component';
-
-export type {
-  EventComponent,
-  TextComponent,
-  IconComponent,
-  LifecycleComponent,
-  Lifecycle,
-  DisabledComponent,
-  DisabledManager,
-  RippleComponent
-} from './compose/features';
-
-// Other interfaces
-export type { 
-  CreateElementOptions 
-} from './dom/create';
-
-export type { 
-  TextManager, 
-  TextConfig 
-} from './build/text';
-
-export type { 
-  IconManager, 
-  IconConfig 
-} from './build/icon';
-
-export type { 
-  RippleController, 
-  RippleConfig 
-} from './build/ripple';
-
-export type { 
-  Emitter, 
-  EventCallback 
-} from './state/emitter';
-
-export type { 
-  DisabledState 
-} from './state/disabled';
-
-export type { 
-  NormalizedEvent 
-} from './utils/mobile';