snice 3.1.0 → 3.3.0

package/dist/index.iife.js

@@ -1,5 +1,5 @@
 /*!
- * snice v3.0.0
+ * snice v3.2.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.
@@ -705,7 +705,6 @@ var Snice = (function (exports) {
 
     /**
      * Template system for Snice v3.0.0
-     * Inspired by lit-html but custom implementation
      * Provides html`` and css`` tagged template processors with differential rendering
      */
     // Unique symbols for type checking
@@ -806,18 +805,14 @@ var Snice = (function (exports) {
         return value && value._$litType$ === UNSAFE_HTML;
     }
 
-    /**
-     * Simplified lit-html-style template system
-     * Based on lit-html's approach but simplified
-     */
     // Unique marker for dynamic parts
-    // Using processing instruction syntax like lit-html for better compatibility
     // This parses as a comment node but doesn't get escaped in attributes
     const marker = `snice$${Math.random().toFixed(9).slice(2)}$`;
     const markerMatch = '?' + marker;
     const nodeMarker = `<${markerMatch}>`;
     const markerRegex = new RegExp(marker, 'g');
-    // Template cache removed - negligible performance benefit (~0.00004ms per template)
+    // Template cache - templates with same string array can be reused
+    const templateCache = new WeakMap();
     /**
      * A prepared template ready for rendering
      */
@@ -834,8 +829,8 @@ var Snice = (function (exports) {
                     const element = node;
                     const tagName = element.tagName.toLowerCase();
                     // Handle virtual elements: <if>, <case>
-                    // These elements stay in the DOM but are styled with display:contents
-                    // to be transparent wrappers that don't affect layout
+                    // Keep them in the DOM with display:contents for now
+                    // Will optimize later with proper template extraction
                     if (tagName === 'if') {
                         // <if value="${condition}">children</if>
                         const valueAttr = element.getAttribute('value');
@@ -843,16 +838,15 @@ var Snice = (function (exports) {
                             // Remove the value attribute
                             element.removeAttribute('value');
                             this.parts.push({
-                                type: 'if',
+                                type: 'conditional-if',
                                 index: partIndex++,
-                                element // Keep the <if> element, will show/hide via display property
+                                element // Keep the <if> element
                             });
                             // Continue processing children normally
                         }
                         continue;
                     }
                     // Handle <case> element
-                    // Like <if>, <case> stays in DOM styled with display:contents
                     if (tagName === 'case') {
                         // <case value="${value}">children</case>
                         const valueAttr = element.getAttribute('value');
@@ -860,9 +854,9 @@ var Snice = (function (exports) {
                             // Remove the value attribute
                             element.removeAttribute('value');
                             this.parts.push({
-                                type: 'case',
+                                type: 'conditional-case',
                                 index: partIndex++,
-                                caseElement: element // Keep the <case> element for when/default processing
+                                element // Keep the <case> element
                             });
                             // Continue processing children normally
                         }
@@ -984,13 +978,18 @@ var Snice = (function (exports) {
      * Prepare a template for rendering
      */
     function prepareTemplate(result) {
-        // Build HTML with markers and extract original attribute names
+        // Check cache first
         const { strings } = result;
-        let html = '';
+        const cached = templateCache.get(strings);
+        if (cached) {
+            return cached;
+        }
+        // Build HTML with markers and extract original attribute names
+        const htmlParts = [];
         const attrNamesForParts = [];
         for (let i = 0; i < strings.length; i++) {
             const str = strings[i];
-            html += str;
+            htmlParts.push(str);
             if (i < strings.length - 1) {
                 // Check if we're in an attribute context
                 // Look backwards for = sign
@@ -1004,7 +1003,7 @@ var Snice = (function (exports) {
                     }
                     const attrName = str.substring(attrStart + 1, lastEquals).trim();
                     attrNamesForParts.push(attrName);
-                    html += marker;
+                    htmlParts.push(marker);
                 }
                 else {
                     // Check if this is a meta element (<if> or <case>) by looking backwards
@@ -1013,19 +1012,23 @@ var Snice = (function (exports) {
                     if (metaElementMatch) {
                         // This is a meta element - add value attribute
                         attrNamesForParts.push('value');
-                        html += `value="${marker}"`;
+                        htmlParts.push(`value="${marker}"`);
                     }
                     else {
                         // We're in node content
                         attrNamesForParts.push(''); // Empty string for node parts
-                        html += nodeMarker;
+                        htmlParts.push(nodeMarker);
                     }
                 }
             }
         }
+        const html = htmlParts.join('');
         const template = document.createElement('template');
         template.innerHTML = html;
-        return new Template(result, template, attrNamesForParts);
+        const tmpl = new Template(result, template, attrNamesForParts);
+        // Cache the template for reuse
+        templateCache.set(strings, tmpl);
+        return tmpl;
     }
     /**
      * Instance of a rendered template
@@ -1034,6 +1037,8 @@ var Snice = (function (exports) {
         constructor(result) {
             this.parts = [];
             this.fragment = null;
+            this.conditionalParts = []; // if/case parts with their indices
+            this.regularParts = []; // all other parts with their indices
             this.template = prepareTemplate(result);
         }
         renderFragment() {
@@ -1051,7 +1056,8 @@ var Snice = (function (exports) {
                     templateNode = walker.nextNode();
                     clonedNode = clonedWalker.nextNode();
                 }
-                for (const partDef of this.template.parts) {
+                for (let i = 0; i < this.template.parts.length; i++) {
+                    const partDef = this.template.parts[i];
                     let part;
                     switch (partDef.type) {
                         case 'node':
@@ -1075,18 +1081,25 @@ var Snice = (function (exports) {
                             const eventElement = nodeMap.get(partDef.element);
                             part = new EventPart(eventElement, partDef.name);
                             break;
-                        case 'if':
-                            const ifElement = nodeMap.get(partDef.element);
-                            part = new IfPart(ifElement);
+                        case 'conditional-if':
+                            const conditionalIfElement = nodeMap.get(partDef.element);
+                            part = new ConditionalIfPart(conditionalIfElement);
                             break;
-                        case 'case':
-                            const caseElement = nodeMap.get(partDef.caseElement);
-                            part = new CasePart(caseElement);
+                        case 'conditional-case':
+                            const conditionalCaseElement = nodeMap.get(partDef.element);
+                            part = new ConditionalCasePart(conditionalCaseElement);
                             break;
                         default:
                             throw new Error(`Unknown part type: ${partDef.type}`);
                     }
                     this.parts.push(part);
+                    // Separate conditional parts from regular parts for optimized update
+                    if (part instanceof ConditionalIfPart || part instanceof ConditionalCasePart) {
+                        this.conditionalParts.push({ part, index: i });
+                    }
+                    else {
+                        this.regularParts.push({ part, index: i });
+                    }
                 }
             }
             return this.fragment;
@@ -1098,19 +1111,15 @@ var Snice = (function (exports) {
             return fragment;
         }
         update(values) {
-            // Process virtual elements (if/case) first
-            for (let i = 0; i < this.parts.length; i++) {
-                const part = this.parts[i];
-                if (part instanceof IfPart || part instanceof CasePart) {
-                    part.commit(values[i]);
-                }
+            // Optimized: Process conditional parts first (if any), then regular parts
+            // Using pre-separated arrays with cached indices avoids instanceof and indexOf calls
+            // Process conditional parts first (they control visibility)
+            for (const { part, index } of this.conditionalParts) {
+                part.commit(values[index]);
             }
-            // Then process all other parts
-            for (let i = 0; i < this.parts.length; i++) {
-                const part = this.parts[i];
-                if (!(part instanceof IfPart || part instanceof CasePart)) {
-                    part.commit(values[i]);
-                }
+            // Then process regular parts
+            for (const { part, index } of this.regularParts) {
+                part.commit(values[index]);
             }
         }
         clear() {
@@ -1170,6 +1179,7 @@ var Snice = (function (exports) {
         }
         commitArray(values) {
             this.clear();
+            // Template caching (via prepareTemplate) still provides significant performance benefit
             for (const value of values) {
                 if (isTemplateResult(value)) {
                     const instance = new TemplateInstance(value);
@@ -1226,8 +1236,18 @@ var Snice = (function (exports) {
                 this.element.removeAttribute(this.name);
             }
             else {
-                // Data-oriented: compute final value from strings + value
-                const finalValue = computeAttributeValue(this.attrStrings, value);
+                // Inline attribute value computation for performance
+                let finalValue;
+                if (!this.attrStrings || this.attrStrings.length === 0) {
+                    finalValue = String(value);
+                }
+                else if (this.attrStrings.length === 1) {
+                    finalValue = this.attrStrings[0];
+                }
+                else {
+                    // Multiple segments: "prefix" + value + "suffix"
+                    finalValue = this.attrStrings[0] + String(value) + this.attrStrings[1];
+                }
                 this.element.setAttribute(this.name, finalValue);
             }
         }
@@ -1235,22 +1255,6 @@ var Snice = (function (exports) {
             this.element.removeAttribute(this.name);
         }
     }
-    /**
-     * Data-oriented function to compute attribute value from static strings and dynamic value
-     */
-    function computeAttributeValue(attrStrings, value) {
-        if (!attrStrings || attrStrings.length === 0) {
-            // No template strings, just use the value
-            return String(value);
-        }
-        if (attrStrings.length === 1) {
-            // Single string segment, no interpolation (shouldn't happen but handle it)
-            return attrStrings[0];
-        }
-        // Multiple segments: "prefix" + value + "suffix"
-        // For aria-label="Remove ${label}", attrStrings = ["Remove ", ""]
-        return attrStrings[0] + String(value) + attrStrings[1];
-    }
     /**
      * PropertyPart handles property bindings
      */
@@ -1305,6 +1309,7 @@ var Snice = (function (exports) {
             this.listener = null;
             this.value = undefined;
             this.keyFilter = null;
+            this.host = null; // Cache host element
             this.element = element;
             // Parse keyboard shortcuts:
             // Supports both dot notation (@keydown.enter) and colon notation (@keydown:Enter) to match @on decorator
@@ -1340,14 +1345,15 @@ var Snice = (function (exports) {
             }
             if (typeof value === 'function') {
                 // Auto-bind to host element (the custom element with shadow root)
-                // This allows @click=${this.handleClick} to work without manual binding
-                const rootNode = this.element.getRootNode();
-                const host = rootNode.host;
+                // Cache host lookup for performance
+                if (!this.host) {
+                    const rootNode = this.element.getRootNode();
+                    this.host = rootNode.host || null;
+                }
                 // Create a wrapper that calls the handler with the host as context
-                // This ensures consistent function reference for proper cleanup
-                if (host) {
+                if (this.host) {
+                    const host = this.host; // Capture for closure
                     this.listener = ((event) => {
-                        // If keyboard filter is specified, check if event matches
                         if (this.keyFilter && !matchesKeyboardFilter(event, this.keyFilter)) {
                             return;
                         }
@@ -1465,146 +1471,107 @@ var Snice = (function (exports) {
         return ctrlMatch && altMatch && shiftMatch && metaMatch;
     }
     /**
-     * IfPart handles <if> conditional rendering
-     * Uses document fragments to actually remove/insert nodes from the DOM
-     * instead of just hiding them with CSS
+     * ConditionalIfPart handles <if> conditional rendering
+     * Removes/inserts DOM nodes based on condition
      */
-    class IfPart extends Part {
+    class ConditionalIfPart extends Part {
         constructor(ifElement) {
             super();
             this.value = undefined;
             this.fragment = null;
-            this.childNodes = [];
             this.ifElement = ifElement;
-            // Set display to contents so the wrapper is transparent
-            // display:contents makes the element invisible but renders its children
             this.ifElement.style.display = 'contents';
-            // Store initial child nodes
-            this.childNodes = Array.from(this.ifElement.childNodes);
         }
         commit(value) {
             const condition = Boolean(value);
-            // If condition hasn't changed, do nothing
-            if (this.value !== undefined && Boolean(this.value) === condition) {
+            if (this.value === value)
                 return;
-            }
             this.value = value;
             if (condition) {
-                // Show: restore children from fragment if they were removed
+                // Show: restore children from fragment
                 if (this.fragment && this.fragment.hasChildNodes()) {
                     this.ifElement.appendChild(this.fragment);
-                    this.fragment = null;
                 }
             }
             else {
-                // Hide: move children to document fragment
-                this.fragment = document.createDocumentFragment();
+                // Hide: move children to fragment
+                if (!this.fragment) {
+                    this.fragment = document.createDocumentFragment();
+                }
                 while (this.ifElement.firstChild) {
                     this.fragment.appendChild(this.ifElement.firstChild);
                 }
             }
         }
         clear() {
-            // Move all children to fragment
-            this.fragment = document.createDocumentFragment();
+            if (!this.fragment) {
+                this.fragment = document.createDocumentFragment();
+            }
             while (this.ifElement.firstChild) {
                 this.fragment.appendChild(this.ifElement.firstChild);
             }
         }
     }
     /**
-     * CasePart handles <case>/<when>/<default> conditional rendering
-     * Uses document fragments to remove/insert <when> and <default> children
+     * ConditionalCasePart handles <case>/<when>/<default> conditional rendering
+     * Removes/inserts matching branch based on value
      */
-    class CasePart extends Part {
+    class ConditionalCasePart extends Part {
         constructor(caseElement) {
             super();
             this.value = undefined;
-            this.fragments = new Map(); // Store removed children in fragments
-            this.attachedChildren = new Map(); // Track which children are in DOM
+            this.childrenMap = new Map();
+            this.fragments = new Map();
+            this.defaultChild = null;
+            this.currentChild = null;
             this.caseElement = caseElement;
-            // Store children in original order
-            this.childrenList = Array.from(this.caseElement.children);
-            // Initialize all children as attached
-            this.childrenList.forEach(child => {
-                this.attachedChildren.set(child, true);
-                // Create a fragment for each child to hold it when detached
-                this.fragments.set(child, document.createDocumentFragment());
-            });
+            // Build map and store children in fragments initially
+            for (const child of Array.from(this.caseElement.children)) {
+                const childTag = child.tagName.toLowerCase();
+                if (childTag === 'when') {
+                    const whenValue = child.getAttribute('value') || '';
+                    this.childrenMap.set(whenValue, child);
+                    const fragment = document.createDocumentFragment();
+                    fragment.appendChild(child);
+                    this.fragments.set(child, fragment);
+                }
+                else if (childTag === 'default') {
+                    this.defaultChild = child;
+                    const fragment = document.createDocumentFragment();
+                    fragment.appendChild(child);
+                    this.fragments.set(child, fragment);
+                }
+            }
         }
         commit(value) {
-            // If value hasn't changed, do nothing
             if (this.value === value)
                 return;
             this.value = value;
-            // Find matching <when> or <default> and remove/insert appropriately
-            let hasMatch = false;
-            // First pass: check if any <when> matches
-            for (const child of this.childrenList) {
-                if (child.tagName.toLowerCase() === 'when') {
-                    const whenValue = child.getAttribute('value');
-                    if (whenValue === String(value)) {
-                        hasMatch = true;
-                        break;
-                    }
+            const valueStr = String(value);
+            // Remove current child
+            if (this.currentChild) {
+                const fragment = this.fragments.get(this.currentChild);
+                if (fragment && !fragment.hasChildNodes()) {
+                    fragment.appendChild(this.currentChild);
                 }
             }
-            // Second pass: remove/insert children based on match
-            for (const child of this.childrenList) {
-                const tagName = child.tagName.toLowerCase();
-                const isAttached = this.attachedChildren.get(child) ?? true;
-                let shouldBeAttached = false;
-                if (tagName === 'when') {
-                    const whenValue = child.getAttribute('value');
-                    shouldBeAttached = (whenValue === String(value));
-                }
-                else if (tagName === 'default') {
-                    shouldBeAttached = !hasMatch;
-                }
-                // Update DOM if state changed
-                if (shouldBeAttached && !isAttached) {
-                    // Re-insert from fragment in correct position
-                    // Find next sibling that is still attached
-                    const childIndex = this.childrenList.indexOf(child);
-                    let insertBefore = null;
-                    for (let i = childIndex + 1; i < this.childrenList.length; i++) {
-                        if (this.attachedChildren.get(this.childrenList[i])) {
-                            insertBefore = this.childrenList[i];
-                            break;
-                        }
-                    }
-                    // Get child from fragment
-                    const fragment = this.fragments.get(child);
-                    if (fragment && fragment.firstChild) {
-                        if (insertBefore) {
-                            this.caseElement.insertBefore(fragment.firstChild, insertBefore);
-                        }
-                        else {
-                            this.caseElement.appendChild(fragment.firstChild);
-                        }
-                    }
-                    this.attachedChildren.set(child, true);
-                }
-                else if (!shouldBeAttached && isAttached) {
-                    // Move to fragment
-                    const fragment = this.fragments.get(child);
-                    if (fragment) {
-                        fragment.appendChild(child);
-                    }
-                    this.attachedChildren.set(child, false);
+            // Insert matching child
+            const matchingChild = this.childrenMap.get(valueStr) || this.defaultChild;
+            if (matchingChild) {
+                const fragment = this.fragments.get(matchingChild);
+                if (fragment && fragment.hasChildNodes()) {
+                    this.caseElement.appendChild(fragment);
                 }
+                this.currentChild = matchingChild;
             }
         }
         clear() {
-            // Move all children to fragments
-            for (const child of this.childrenList) {
-                if (this.attachedChildren.get(child)) {
-                    const fragment = this.fragments.get(child);
-                    if (fragment) {
-                        fragment.appendChild(child);
-                    }
-                    this.attachedChildren.set(child, false);
+            if (this.currentChild) {
+                const fragment = this.fragments.get(this.currentChild);
+                if (fragment && !fragment.hasChildNodes()) {
+                    fragment.appendChild(this.currentChild);
                 }
+                this.currentChild = null;
             }
         }
     }