snice 3.1.0 → 3.3.0

package/dist/index.esm.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.
@@ -702,7 +702,6 @@ function cleanupResponseHandlers(instance) {
 
 /**
  * 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
@@ -803,18 +802,14 @@ function isUnsafeHTML(value) {
     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
  */
@@ -831,8 +826,8 @@ class Template {
                 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');
@@ -840,16 +835,15 @@ class Template {
                         // 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');
@@ -857,9 +851,9 @@ class Template {
                         // 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
                     }
@@ -981,13 +975,18 @@ class Template {
  * 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
@@ -1001,7 +1000,7 @@ function prepareTemplate(result) {
                 }
                 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
@@ -1010,19 +1009,23 @@ function prepareTemplate(result) {
                 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
@@ -1031,6 +1034,8 @@ class TemplateInstance {
     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() {
@@ -1048,7 +1053,8 @@ class TemplateInstance {
                 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':
@@ -1072,18 +1078,25 @@ class TemplateInstance {
                         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;
@@ -1095,19 +1108,15 @@ class TemplateInstance {
         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() {
@@ -1167,6 +1176,7 @@ class NodePart extends Part {
     }
     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);
@@ -1223,8 +1233,18 @@ class AttributePart extends Part {
             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);
         }
     }
@@ -1232,22 +1252,6 @@ class AttributePart extends Part {
         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
  */
@@ -1302,6 +1306,7 @@ class EventPart extends Part {
         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
@@ -1337,14 +1342,15 @@ class EventPart extends Part {
         }
         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;
                     }
@@ -1462,146 +1468,107 @@ function matchesKeyboardFilter(event, filter) {
     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;
         }
     }
 }