@uistate/core 2.0.1 → 3.0.0

package/src/templateManager.js

@@ -12,6 +12,52 @@ const createTemplateManager = (stateManager) => {
             return this;
         },
         
+        /**
+         * Register multiple actions with their handlers in a declarative way
+         * @param {Object} actionsMap - Map of action names to handlers or handler configs
+         * @returns {Object} - The manager instance for chaining
+         * 
+         * Example usage:
+         * templateManager.registerActions({
+         *   'add-item': addItem,
+         *   'delete-item': { fn: deleteItem, extractId: true },
+         *   'toggle-state': toggleState
+         * });
+         */
+        registerActions(actionsMap) {
+            Object.entries(actionsMap).forEach(([action, handler]) => {
+                if (typeof handler === 'function') {
+                    // Simple function handler
+                    this.onAction(action, handler);
+                } else if (typeof handler === 'object' && handler !== null) {
+                    // Handler with configuration
+                    const { fn, extractId = true, idAttribute = 'id' } = handler;
+                    
+                    if (typeof fn !== 'function') {
+                        throw new Error(`Handler for action '${action}' must be a function`);
+                    }
+                    
+                    this.onAction(action, (e) => {
+                        if (extractId) {
+                            const target = e.target.closest('[data-action]');
+                            // Look for common ID attributes in order of preference
+                            const id = target.dataset[idAttribute] || 
+                                      target.dataset.actionId || 
+                                      target.dataset.cardId || 
+                                      target.dataset.itemId;
+                                      
+                            fn(id, e, target);
+                        } else {
+                            fn(e);
+                        }
+                    });
+                } else {
+                    throw new Error(`Invalid handler for action '${action}'`);
+                }
+            });
+            return this;
+        },
+        
         attachDelegation(root = document.body) {
             root.addEventListener('click', e => {
                 const target = e.target.closest('[data-action]');
@@ -31,6 +77,36 @@ const createTemplateManager = (stateManager) => {
             return this;
         },
         
+        /**
+         * Render a template from a CSS variable
+         * @param {string} templateName - Name of the template (will be prefixed with --template-)
+         * @param {Object} data - Data to inject into the template
+         * @returns {HTMLElement} - The rendered element
+         */
+        renderTemplateFromCss(templateName, data = {}) {
+            const cssTemplate = getComputedStyle(document.documentElement)
+                .getPropertyValue(`--template-${templateName}`)
+                .trim()
+                .replace(/^['"]|['"]$/g, ''); // Remove surrounding quotes
+            
+            if (!cssTemplate) throw new Error(`Template not found in CSS: --template-${templateName}`);
+            
+            let html = cssTemplate;
+            
+            // Replace all placeholders with actual data
+            Object.entries(data).forEach(([key, value]) => {
+                const regex = new RegExp(`{{${key}}}`, 'g');
+                html = html.replace(regex, value);
+            });
+            
+            // Create a temporary container
+            const temp = document.createElement('div');
+            temp.innerHTML = html;
+            
+            // Return the first child (the rendered template)
+            return temp.firstElementChild;
+        },
+        
         mount(componentName, container) {
             const tpl = document.getElementById(`${componentName}-template`);
             if (!tpl) throw new Error(`Template not found: ${componentName}-template`);
@@ -84,6 +160,49 @@ const createTemplateManager = (stateManager) => {
             return {
                 mount: (container) => this.mount(name, container)
             };
+        },
+        
+        /**
+         * Apply CSS classes to an element based on a state key stored in CSS variables
+         * @param {HTMLElement} element - Element to apply classes to
+         * @param {string} stateKey - State key to look up in CSS variables
+         * @param {Object} options - Options for class application
+         * @returns {HTMLElement} - The element for chaining
+         * 
+         * Example usage:
+         * // CSS: :root { --card-primary-classes: "bg-primary text-white"; }
+         * templateManager.applyClassesFromState(cardElement, 'card-primary');
+         */
+        applyClassesFromState(element, stateKey, options = {}) {
+            if (!element) return element;
+            
+            const { 
+                prefix = '',
+                clearExisting = false,
+                namespace = '' 
+            } = typeof options === 'string' ? { prefix: options } : options;
+            
+            const prefixPath = prefix ? `${prefix}-` : '';
+            const namespacePath = namespace ? `${namespace}-` : '';
+            
+            const classString = getComputedStyle(document.documentElement)
+                .getPropertyValue(`--${namespacePath}${stateKey}-classes`)
+                .trim()
+                .replace(/^['"]|['"]$/g, '');
+                
+            if (classString) {
+                // Clear existing classes if specified
+                if (clearExisting) {
+                    element.className = '';
+                }
+                
+                // Add new classes
+                classString.split(' ').forEach(cls => {
+                    if (cls) element.classList.add(cls);
+                });
+            }
+            
+            return element; // For chaining
         }
     };