snice 4.27.0 → 4.29.0

package/dist/cdn/runtime/snice-runtime.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.27.0
+ * snice v4.29.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.
@@ -8,7 +8,7 @@ var Snice = (function (exports) {
     'use strict';
 
     /*!
-     * snice v4.26.2
+     * snice v4.28.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.
@@ -2068,9 +2068,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);
@@ -2079,26 +2090,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;
             }
         }
     }
@@ -2110,62 +2127,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;
         }
     }
 
@@ -3090,19 +3115,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) {
@@ -4886,6 +4908,74 @@ var Snice = (function (exports) {
         };
     }
 
+    /**
+     * createRequestHandler — vanilla JS utility for handling @request channels
+     * outside of the Snice element/controller decorator system.
+     *
+     * Listens for @request CustomEvents on a target element (or document),
+     * performs the discovery/data handshake, and dispatches to your route map.
+     *
+     * @example
+     * ```js
+     * import { createRequestHandler } from 'snice';
+     *
+     * const cleanup = createRequestHandler(document, {
+     *   'fetch-user': async (payload) => {
+     *     const res = await fetch(`/api/users/${payload.id}`);
+     *     return res.json();
+     *   },
+     *   'save-settings': async (payload) => {
+     *     await fetch('/api/settings', { method: 'POST', body: JSON.stringify(payload) });
+     *     return { ok: true };
+     *   }
+     * });
+     *
+     * // Later, to remove all listeners:
+     * cleanup();
+     * ```
+     */
+    /**
+     * Attach request handlers to a DOM target.
+     *
+     * @param target  The element or document to listen on. Events bubble, so an
+     *                ancestor element catches requests from any descendant.
+     * @param routes  Map of channel names to handler functions.
+     * @param options Optional configuration.
+     * @returns A cleanup function that removes all listeners.
+     */
+    function createRequestHandler(target, routes, options) {
+        const cleanups = [];
+        for (const [channelName, handler] of Object.entries(routes)) {
+            const eventName = `@request/${channelName}`;
+            const listener = (event) => {
+                const ce = event;
+                const { discovery, data, payload } = ce.detail;
+                if (!options?.passive) {
+                    ce.preventDefault();
+                    ce.stopImmediatePropagation();
+                    ce.stopPropagation();
+                }
+                // Signal that we found the handler — clears discovery timeout
+                discovery.resolve();
+                // Execute the handler and wire up the data promise
+                Promise.resolve()
+                    .then(() => handler(payload))
+                    .then((result) => data.resolve(result))
+                    .catch((error) => {
+                    data.reject(error);
+                    console.error(`createRequestHandler: error in "${channelName}" handler:`, error);
+                });
+            };
+            target.addEventListener(eventName, listener);
+            cleanups.push(() => target.removeEventListener(eventName, listener));
+        }
+        return () => {
+            for (const fn of cleanups)
+                fn();
+            cleanups.length = 0;
+        };
+    }
+
     /**
      * Custom element readiness utilities
      * Handles waiting for custom elements to be defined with timeout warnings
@@ -5422,7 +5512,7 @@ var Snice = (function (exports) {
     }
 
     /*!
-     * snice v4.26.2
+     * snice v4.28.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.
@@ -5439,7 +5529,7 @@ var Snice = (function (exports) {
     }
 
     /*!
-     * snice v4.26.2
+     * snice v4.28.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.
@@ -5472,6 +5562,7 @@ var Snice = (function (exports) {
     exports.context = context$1;
     exports.contextProperty = context;
     exports.controller = controller;
+    exports.createRequestHandler = createRequestHandler;
     exports.css = css;
     exports.debounce = debounce;
     exports.dispatch = dispatch;