snice 4.26.2 → 4.28.0

package/dist/index.iife.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.26.1
+ * snice v4.27.0
  * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.
@@ -2062,9 +2062,20 @@ var Snice = (function (exports) {
         constructor(ifElement) {
             super();
             this.value = NOT_SET;
-            this.fragment = null;
-            this.ifElement = ifElement;
-            this.ifElement.style.display = 'contents';
+            this.childFragment = null;
+            const parent = ifElement.parentNode;
+            // Create comment boundary markers
+            this.startNode = document.createComment('if');
+            this.endNode = document.createComment('/if');
+            // Insert markers where <if> is
+            parent.insertBefore(this.startNode, ifElement);
+            parent.insertBefore(this.endNode, ifElement.nextSibling);
+            // Move <if>'s children between the markers
+            while (ifElement.firstChild) {
+                parent.insertBefore(ifElement.firstChild, this.endNode);
+            }
+            // Remove the <if> element from DOM
+            parent.removeChild(ifElement);
         }
         commit(value) {
             const condition = Boolean(value);
@@ -2073,26 +2084,32 @@ var Snice = (function (exports) {
             this.value = value;
             if (condition) {
                 // Show: restore children from fragment
-                if (this.fragment && this.fragment.hasChildNodes()) {
-                    this.ifElement.appendChild(this.fragment);
+                if (this.childFragment && this.childFragment.hasChildNodes()) {
+                    this.startNode.parentNode.insertBefore(this.childFragment, this.endNode);
                 }
             }
             else {
                 // Hide: move children to fragment
-                if (!this.fragment) {
-                    this.fragment = document.createDocumentFragment();
+                if (!this.childFragment) {
+                    this.childFragment = document.createDocumentFragment();
                 }
-                while (this.ifElement.firstChild) {
-                    this.fragment.appendChild(this.ifElement.firstChild);
+                let node = this.startNode.nextSibling;
+                while (node && node !== this.endNode) {
+                    const next = node.nextSibling;
+                    this.childFragment.appendChild(node);
+                    node = next;
                 }
             }
         }
         clear() {
-            if (!this.fragment) {
-                this.fragment = document.createDocumentFragment();
+            if (!this.childFragment) {
+                this.childFragment = document.createDocumentFragment();
             }
-            while (this.ifElement.firstChild) {
-                this.fragment.appendChild(this.ifElement.firstChild);
+            let node = this.startNode.nextSibling;
+            while (node && node !== this.endNode) {
+                const next = node.nextSibling;
+                this.childFragment.appendChild(node);
+                node = next;
             }
         }
     }
@@ -2104,62 +2121,70 @@ var Snice = (function (exports) {
         constructor(caseElement) {
             super();
             this.value = NOT_SET;
-            this.childrenMap = new Map();
-            this.fragments = new Map();
-            this.defaultChild = null;
-            this.currentChild = null;
-            this.caseElement = caseElement;
-            this.caseElement.style.display = 'contents';
-            // Build map and store children in fragments initially
-            for (const child of Array.from(this.caseElement.children)) {
+            this.branches = new Map();
+            this.defaultBranch = null;
+            this.currentKey = null;
+            const parent = caseElement.parentNode;
+            // Create comment boundary markers
+            this.startNode = document.createComment('case');
+            this.endNode = document.createComment('/case');
+            // Insert markers where <case> is
+            parent.insertBefore(this.startNode, caseElement);
+            parent.insertBefore(this.endNode, caseElement.nextSibling);
+            // Extract branches from <when> and <default> children
+            for (const child of Array.from(caseElement.children)) {
                 const childTag = child.tagName.toLowerCase();
                 if (childTag === 'when') {
-                    child.style.display = 'contents';
                     const whenValue = child.getAttribute('value') || '';
-                    this.childrenMap.set(whenValue, child);
                     const fragment = document.createDocumentFragment();
-                    fragment.appendChild(child);
-                    this.fragments.set(child, fragment);
+                    while (child.firstChild) {
+                        fragment.appendChild(child.firstChild);
+                    }
+                    this.branches.set(whenValue, fragment);
                 }
                 else if (childTag === 'default') {
-                    child.style.display = 'contents';
-                    this.defaultChild = child;
-                    const fragment = document.createDocumentFragment();
-                    fragment.appendChild(child);
-                    this.fragments.set(child, fragment);
+                    this.defaultBranch = document.createDocumentFragment();
+                    while (child.firstChild) {
+                        this.defaultBranch.appendChild(child.firstChild);
+                    }
                 }
             }
+            // Remove the <case> element from DOM
+            parent.removeChild(caseElement);
         }
         commit(value) {
             if (this.value === value)
                 return;
             this.value = value;
             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);
-                }
-            }
-            // 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;
+            // Move current content back to its fragment
+            this._collectCurrent();
+            // Insert matching branch
+            const hasBranch = this.branches.has(valueStr);
+            const matchingFragment = hasBranch ? this.branches.get(valueStr) : this.defaultBranch;
+            this.currentKey = hasBranch ? valueStr : (this.defaultBranch ? '__default__' : null);
+            if (matchingFragment && matchingFragment.hasChildNodes()) {
+                this.startNode.parentNode.insertBefore(matchingFragment, this.endNode);
+            }
+        }
+        _collectCurrent() {
+            if (this.currentKey === null)
+                return;
+            const fragment = this.currentKey === '__default__'
+                ? this.defaultBranch
+                : this.branches.get(this.currentKey);
+            if (!fragment)
+                return;
+            let node = this.startNode.nextSibling;
+            while (node && node !== this.endNode) {
+                const next = node.nextSibling;
+                fragment.appendChild(node);
+                node = next;
             }
         }
         clear() {
-            if (this.currentChild) {
-                const fragment = this.fragments.get(this.currentChild);
-                if (fragment && !fragment.hasChildNodes()) {
-                    fragment.appendChild(this.currentChild);
-                }
-                this.currentChild = null;
-            }
+            this._collectCurrent();
+            this.currentKey = null;
         }
     }
 
@@ -3084,19 +3109,16 @@ var Snice = (function (exports) {
             if (!element.shadowRoot) {
                 element.attachShadow({ mode: 'open' });
             }
-            // Create base styles for meta elements (if, case)
-            const baseStyleSheet = new CSSStyleSheet();
-            baseStyleSheet.replaceSync('if, case { display: contents; }');
             if (!element.shadowRoot)
                 return;
             // Prefer constructable stylesheets
             if (result.styleSheet && 'adoptedStyleSheets' in element.shadowRoot) {
-                element.shadowRoot.adoptedStyleSheets = [baseStyleSheet, result.styleSheet];
+                element.shadowRoot.adoptedStyleSheets = [result.styleSheet];
                 return;
             }
             // Fallback to <style> tag
             const style = document.createElement('style');
-            style.textContent = 'if, case { display: contents; }\n' + result.cssText;
+            style.textContent = result.cssText;
             element.shadowRoot.appendChild(style);
         }
         catch (error) {