mtrl 0.1.3 → 0.2.0

package/src/core/dom/create.js

@@ -1,132 +0,0 @@
-// src/core/dom/create.js
-/**
- * @module core/dom
- * @description DOM manipulation utilities
- */
-
-import { setAttributes } from './attributes'
-import { normalizeClasses } from '../utils'
-
-/**
- * Creates a DOM element with the specified options
- * @memberof module:core/dom
- * @param {Object} options - Element creation options
- * @param {string} [options.tag='div'] - HTML tag name
- * @param {HTMLElement} [options.container] - Container to append element to
- * @param {string} [options.html] - Inner HTML content
- * @param {string} [options.text] - Text content
- * @param {string} [options.id] - Element ID
- * @param {Object} [options.data] - Dataset attributes
- * @param {string|string[]} [options.className] - CSS classes
- * @param {Object} [options.attrs] - HTML attributes
- * @param {Object} [options.forwardEvents] - Events to forward when component has emit method
- * @param {Function} [options.onCreate] - Callback after element creation
- * @returns {HTMLElement} Created element
- */
-export const createElement = (options = {}) => {
-  const {
-    tag = 'div',
-    container = null,
-    html = '',
-    text = '',
-    id = '',
-    data = {},
-    className,
-    attrs = {},
-    forwardEvents = {},
-    onCreate,
-    context,
-    ...rest
-  } = options
-
-  const element = document.createElement(tag)
-
-  // Handle content
-  if (html) element.innerHTML = html
-  if (text) element.textContent = text
-  if (id) element.id = id
-
-  // Handle classes
-  if (className) {
-    const normalizedClasses = normalizeClasses(className)
-    if (normalizedClasses.length) {
-      element.classList.add(...normalizedClasses)
-    }
-  }
-
-  // Handle data attributes
-  Object.entries(data).forEach(([key, value]) => {
-    element.dataset[key] = value
-  })
-
-  // Handle all other attributes
-  const allAttrs = { ...attrs, ...rest }
-  Object.entries(allAttrs).forEach(([key, value]) => {
-    if (value != null) element.setAttribute(key, value)
-  })
-
-  // Handle event forwarding if context has emit method
-  if (context?.emit && forwardEvents) {
-    Object.entries(forwardEvents).forEach(([nativeEvent, eventConfig]) => {
-      const shouldForward = typeof eventConfig === 'function'
-        ? eventConfig
-        : () => true
-
-      element.addEventListener(nativeEvent, (event) => {
-        if (shouldForward({ ...context, element }, event)) {
-          context.emit(nativeEvent, { event })
-        }
-      })
-    })
-  }
-
-  // Append to container if provided
-  if (container) {
-    container.appendChild(element)
-  }
-
-  if (typeof onCreate === 'function') {
-    onCreate(element, context)
-  }
-
-  return element
-}
-
-/**
- * Higher-order function to add attributes to an element
- * @param {Object} attrs - Attributes to add
- * @returns {Function} Element transformer
- */
-export const withAttributes = (attrs) => (element) => {
-  setAttributes(element, attrs)
-  return element
-}
-
-/**
- * Higher-order function to add classes to an element
- * @memberof module:core/dom
- * @param {...string} classes - Classes to add
- * @returns {Function} Element transformer
- */
-export const withClasses = (...classes) => (element) => {
-  const normalizedClasses = normalizeClasses(...classes)
-  if (normalizedClasses.length) {
-    element.classList.add(...normalizedClasses)
-  }
-  return element
-}
-
-/**
- * Higher-order function to add content to an element
- * @memberof module:core/dom
- * @param {Node|string} content - Content to add
- * @returns {Function} Element transformer
- */
-export const withContent = (content) => (element) => {
-  if (content instanceof Node) {
-    element.appendChild(content)
-  } else {
-    element.textContent = content
-  }
-  return element
-}

package/src/core/dom/events.js

@@ -1,175 +0,0 @@
-// src/core/state/events.js
-/**
- * @module core/dom
- * @description DOM manipulation utilities
- */
-
-/**
- * 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 {HTMLElement} element - DOM element to attach events to
- * @returns {Object} Event manager interface with the following methods:
- *
- * @property {Function} on - Adds an event listener with options
- * @property {Function} off - Removes an event listener
- * @property {Function} pause - Temporarily disables all event listeners
- * @property {Function} resume - Re-enables all event listeners
- * @property {Function} destroy - Removes all event listeners and cleans up
- * @property {Function} getHandlers - Gets all active handlers
- * @property {Function} hasHandler - Checks if a specific handler exists
- *
- * @example
- * const manager = createEventManager(myElement);
- *
- * // Add a listener
- * manager.on('click', (e) => console.log('clicked'), { capture: true });
- *
- * // Remove a listener
- * manager.off('click', myHandler);
- *
- * // Pause all events
- * manager.pause();
- *
- * // Resume all events
- * manager.resume();
- *
- * // Cleanup
- * manager.destroy();
- */
-export const createEventManager = (element) => {
-  // Store handlers with their metadata
-  const handlers = new Map()
-
-  /**
-   * Private helper to create a unique handler identifier
-   * @memberof module:core/dom
-   * @private
-   * @param {string} event - Event name
-   * @param {Function} handler - Event handler
-   * @returns {string} Unique identifier
-   */
-  const createHandlerId = (event, handler) =>
-    `${event}_${handler.toString()}`
-
-  /**
-   * Wraps an event handler with error boundary and logging
-   * @memberof module:core/dom
-   * @private
-   * @param {Function} handler - Original event handler
-   * @param {string} event - Event name for error context
-   * @returns {Function} Enhanced handler with error boundary
-   */
-  const enhanceHandler = (handler, event) => (e) => {
-    try {
-      handler(e)
-    } catch (error) {
-      console.error(`Error in ${event} handler:`, error)
-    }
-  }
-
-  /**
-   * Safely removes event listener
-   * @memberof module:core/dom
-   * @param {string} event - Event name
-   * @param {Function} handler - Event handler
-   */
-  const safeRemoveListener = (event, handler) => {
-    try {
-      element.removeEventListener(event, handler)
-    } catch (error) {
-      console.warn(`Failed to remove ${event} listener:`, error)
-    }
-  }
-
-  return {
-    /**
-     * Adds an event listener with options
-     * @memberof module:core/dom
-     * @param {string} event - Event name
-     * @param {Function} handler - Event handler
-     * @param {Object} [options] - addEventListener options
-     */
-    on (event, handler, options = {}) {
-      const enhanced = enhanceHandler(handler, event)
-      const id = createHandlerId(event, handler)
-
-      handlers.set(id, {
-        original: handler,
-        enhanced,
-        event,
-        options
-      })
-
-      element.addEventListener(event, enhanced, options)
-      return this
-    },
-
-    /**
-     * Removes an event listener
-     * @memberof module:core/dom
-     * @param {string} event - Event name
-     * @param {Function} handler - Event handler
-     */
-    off (event, handler) {
-      const id = createHandlerId(event, handler)
-      const stored = handlers.get(id)
-
-      if (stored) {
-        safeRemoveListener(event, stored.enhanced)
-        handlers.delete(id)
-      }
-      return this
-    },
-
-    /**
-     * Temporarily disables all event listeners
-     */
-    pause () {
-      handlers.forEach(({ enhanced, event, options }) => {
-        safeRemoveListener(event, enhanced)
-      })
-      return this
-    },
-
-    /**
-     * Re-enables all event listeners
-     */
-    resume () {
-      handlers.forEach(({ enhanced, event, options }) => {
-        element.addEventListener(event, enhanced, options)
-      })
-      return this
-    },
-
-    /**
-     * Removes all event listeners and cleans up
-     */
-    destroy () {
-      handlers.forEach(({ enhanced, event }) => {
-        safeRemoveListener(event, enhanced)
-      })
-      handlers.clear()
-    },
-
-    /**
-     * Gets all active handlers
-     * @returns {Map} Map of active handlers
-     */
-    getHandlers () {
-      return new Map(handlers)
-    },
-
-    /**
-     * Checks if a specific handler exists
-     * @param {string} event - Event name
-     * @param {Function} handler - Event handler
-     * @returns {boolean} Whether handler exists
-     */
-    hasHandler (event, handler) {
-      const id = createHandlerId(event, handler)
-      return handlers.has(id)
-    }
-  }
-}

package/src/core/dom/index.js

@@ -1,5 +0,0 @@
-// src/core/dom/index.js
-export { createElement } from './create'
-export { setAttributes, removeAttributes } from './attributes'
-export { addClass, removeClass } from './classes'
-// export { attachEvents } from './events'

package/src/core/dom/utils.js

@@ -1,22 +0,0 @@
-/**
- * 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 {...(string|string[])} classes - Classes to normalize
- * @returns {string[]} Array of unique, non-empty class names
- */
-export const normalizeClasses = (...classes) => {
-  return [...new Set(
-    classes
-      .flat()
-      .reduce((acc, 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
-  )]
-}

package/src/core/index.js

@@ -1,23 +0,0 @@
-// src/core/index.js
-/**
- * @module core
- * @description Core utilities and building blocks for the component system
- */
-// Build
-export { createText } from './build/text'
-export { createIcon } from './build/icon'
-
-// Classes management
-export { addClass, removeClass } 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'
-
-// Composition Utilities
-export { pipe, compose, transform } from './compose'
-
-// General Utilities
-export { classNames } from './utils'

package/src/core/state/disabled.js

@@ -1,51 +0,0 @@
-// src/core/state/disabled.js
-
-/**
- * Creates a controller for managing the disabled state of an element
- * @param {HTMLElement} element - The element to control
- * @returns {Object} Disabled state controller
- */
-export const createDisabled = (element) => {
-  return {
-    /**
-     * Enables the element
-     * @returns {Object} The controller instance for chaining
-     */
-    enable () {
-      element.disabled = false
-      element.removeAttribute('disabled')
-      return this
-    },
-
-    /**
-     * Disables the element
-     * @returns {Object} The controller instance for chaining
-     */
-    disable () {
-      element.disabled = true
-      element.setAttribute('disabled', 'true')
-      return this
-    },
-
-    /**
-     * Toggles the disabled state
-     * @returns {Object} The controller instance for chaining
-     */
-    toggle () {
-      if (element.disabled) {
-        this.enable()
-      } else {
-        this.disable()
-      }
-      return this
-    },
-
-    /**
-     * Checks if the element is disabled
-     * @returns {boolean} True if the element is disabled
-     */
-    isDisabled () {
-      return element.disabled === true
-    }
-  }
-}

package/src/core/state/emitter.js

@@ -1,63 +0,0 @@
-// src/core/state/emitter.js
-/**
- * @module core/state
- */
-
-/**
- * Creates an event emitter with subscription management
- * @memberof module:core/state
- * @function createEmitter
- * @returns {Object} Event emitter interface
- * @property {Function} on - Subscribe to an event
- * @property {Function} off - Unsubscribe from an event
- * @property {Function} emit - Emit an event
- * @property {Function} clear - Clear all subscriptions
- * @example
- * const emitter = createEmitter()
- * const unsubscribe = emitter.on('change', (data) => console.log(data))
- * emitter.emit('change', { value: 42 })
- * unsubscribe()
- */
-export const createEmitter = () => {
-  const events = new Map()
-
-  return {
-    /**
-     * Subscribe to an event
-     * @param {string} event - Event name
-     * @param {Function} callback - Event handler
-     * @returns {Function} Unsubscribe function
-     */
-    on: (event, callback) => {
-      const callbacks = events.get(event) || []
-      events.set(event, [...callbacks, callback])
-
-      return () => {
-        const callbacks = events.get(event) || []
-        events.set(event, callbacks.filter(cb => cb !== callback))
-      }
-    },
-
-    off (event, callback) {
-      const callbacks = events.get(event) || []
-      events.set(event, callbacks.filter(cb => cb !== callback))
-    },
-
-    /**
-     * Emit an event
-     * @param {string} event - Event name
-     * @param {...any} args - Event arguments
-     */
-    emit: (event, ...args) => {
-      const callbacks = events.get(event) || []
-      callbacks.forEach(cb => cb(...args))
-    },
-
-    /**
-     * Clear all event listeners
-     */
-    clear: () => {
-      events.clear()
-    }
-  }
-}

package/src/core/state/events.js

@@ -1,29 +0,0 @@
-// src/core/state/events.js
-export const createEventManager = (element) => {
-  const handlers = new Map()
-
-  return {
-    on (event, handler) {
-      element.addEventListener(event, handler)
-      handlers.set(handler, event)
-      return this
-    },
-
-    off (event, handler) {
-      element.removeEventListener(event, handler)
-      handlers.delete(handler)
-      return this
-    },
-
-    destroy () {
-      handlers.forEach((event, handler) => {
-        element.removeEventListener(event, handler)
-      })
-      handlers.clear()
-    },
-
-    getHandlers () {
-      return handlers
-    }
-  }
-}

package/src/core/state/index.js

@@ -1,6 +0,0 @@
-// src/core/state/index.js
-export { createEmitter } from './state/emitter'
-export { createStore } from './store'
-export { createLifecycle } from './lifecycle'
-export { createDisabled } from './disabled'
-export { createEventManager } from './events'

package/src/core/state/lifecycle.js

@@ -1,64 +0,0 @@
-// src/core/state/lifecycle.js
-import { createEmitter } from './emitter'
-
-export const createLifecycle = (element, managers = {}) => {
-  let mounted = false
-  const emitter = createEmitter()
-
-  return {
-    // Mount/Unmount state management
-    onMount: (handler) => emitter.on('mount', handler),
-    onUnmount: (handler) => emitter.on('unmount', handler),
-    
-    mount: () => {
-      if (!mounted) {
-        mounted = true
-        emitter.emit('mount')
-      }
-    },
-
-    unmount: () => {
-      if (mounted) {
-        mounted = false
-        emitter.emit('unmount')
-        emitter.clear()
-      }
-    },
-
-    isMounted: () => mounted,
-
-    // Cleanup and destruction
-    destroy() {
-      // First trigger unmount
-      if (mounted) {
-        this.unmount()
-      }
-
-      // Clean up all event listeners
-      if (managers.events) {
-        managers.events.destroy()
-      }
-      
-      // Clean up text element
-      if (managers.text) {
-        const textElement = managers.text.getElement()
-        if (textElement) {
-          textElement.remove()
-        }
-      }
-      
-      // Clean up icon element
-      if (managers.icon) {
-        const iconElement = managers.icon.getElement()
-        if (iconElement) {
-          iconElement.remove()
-        }
-      }
-      
-      // Remove the main element
-      if (element) {
-        element.remove()
-      }
-    }
-  }
-}

package/src/core/state/store.js

@@ -1,112 +0,0 @@
-// src/core/state/store.js
-import { createEmitter } from './emitter'
-
-/**
- * Creates a state store with support for derived state and middleware
- * @template T
- * @param {T} initialState - Initial state object
- * @param {Object} [options] - Store options
- * @param {Function[]} [options.middleware] - Middleware functions
- * @returns {Object} State store interface
- */
-export const createStore = (initialState = {}, options = {}) => {
-  let state = { ...initialState }
-  const emitter = createEmitter()
-  const derivedStates = new Map()
-  const middleware = options.middleware || []
-
-  const notifyListeners = (newState, oldState) => {
-    emitter.emit('change', newState, oldState)
-  }
-
-  const applyMiddleware = (newState, oldState) => {
-    return middleware.reduce((state, fn) => fn(state, oldState), newState)
-  }
-
-  return {
-    /**
-     * Get current state including derived values
-     * @returns {T} Current state
-     */
-    getState: () => {
-      const derivedValues = {}
-      derivedStates.forEach((compute, key) => {
-        derivedValues[key] = compute(state)
-      })
-      return { ...state, ...derivedValues }
-    },
-
-    /**
-     * Update state
-     * @param {Object|Function} update - State update or updater function
-     */
-    setState: (update) => {
-      const oldState = { ...state }
-      const newState = typeof update === 'function' 
-        ? update(state)
-        : { ...state, ...update }
-
-      state = applyMiddleware(newState, oldState)
-      notifyListeners(state, oldState)
-    },
-
-    /**
-     * Subscribe to state changes
-     * @param {Function} listener - Change listener
-     * @returns {Function} Unsubscribe function
-     */
-    subscribe: (listener) => emitter.on('change', listener),
-
-    /**
-     * Create a derived state value
-     * @param {string} key - Derived state key
-     * @param {Function} computation - Function to compute derived value
-     * @returns {Function} Function to remove derived state
-     */
-    derive: (key, computation) => {
-      derivedStates.set(key, computation)
-      return () => {
-        derivedStates.delete(key)
-      }
-    },
-
-    /**
-     * Select a specific slice of state
-     * @param {Function} selector - State selector function
-     * @returns {any} Selected state
-     */
-    select: (selector) => selector(state),
-
-    /**
-     * Reset state to initial values
-     */
-    reset: () => {
-      state = { ...initialState }
-      notifyListeners(state, null)
-    }
-  }
-}
-
-// Example middleware
-export const loggingMiddleware = (newState, oldState) => {
-  console.log('State change:', { 
-    old: oldState, 
-    new: newState, 
-    diff: Object.keys(newState).reduce((acc, key) => {
-      if (newState[key] !== oldState[key]) {
-        acc[key] = { from: oldState[key], to: newState[key] }
-      }
-      return acc
-    }, {})
-  })
-  return newState
-}
-
-// Example derived state
-export const deriveFiltered = (predicate) => (state) => 
-  Object.keys(state).reduce((acc, key) => {
-    if (predicate(state[key], key)) {
-      acc[key] = state[key]
-    }
-    return acc
-  }, {})