snice 4.27.0 → 4.29.0

package/dist/index.d.ts

@@ -8,6 +8,8 @@ export { observe } from './observe';
 export { on } from './on';
 export type { OnOptions } from './on';
 export { request, respond } from './request-response';
+export { createRequestHandler } from './create-request-handler';
+export type { RequestRoute, RequestRouteMap, CreateRequestHandlerOptions } from './create-request-handler';
 export { IS_CONTROLLER_INSTANCE, getSymbol } from './symbols';
 export { html, css, nothing, unsafeHTML } from './template';
 export type { TemplateResult, CSSResult, Nothing, UnsafeHTML } from './template';

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 /*!
- * 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.
@@ -2059,9 +2059,20 @@ class ConditionalIfPart extends Part {
     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);
@@ -2070,26 +2081,32 @@ class ConditionalIfPart extends Part {
         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;
         }
     }
 }
@@ -2101,62 +2118,70 @@ class ConditionalCasePart extends Part {
     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;
     }
 }
 
@@ -3081,19 +3106,16 @@ function applyStyles(element) {
         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) {
@@ -4877,6 +4899,74 @@ function dispatch(eventName, options) {
     };
 }
 
+/**
+ * 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
@@ -5415,5 +5505,5 @@ if (typeof document !== 'undefined') {
 // Supports event delegation, keyboard modifiers, debounce/throttle - see docs/events.md
 // Template event syntax (@click=${handler}) is also available as an alternative.
 
-export { Context, ContextAwareFetcher, IS_CONTROLLER_INSTANCE, Router, SimpleArray, adopted, applyElementFunctionality, clearDebounceTimers, clearMemoizeCache, clearThrottleTimers, context$1 as context, context as contextProperty, controller, css, debounce, dispatch, dispose, element, getSymbol, html, layout, memoize, moved, noChange, nothing, observe, on, once, property, query, queryAll, ready, render, request, resetOnce, respond, setDisableElementReadyWarnings, styles, throttle, trackRenders, unsafeHTML, useNativeElementControllers, waitForAllCustomElements, waitForElementDefined, waitForElementReady, watch };
+export { Context, ContextAwareFetcher, IS_CONTROLLER_INSTANCE, Router, SimpleArray, adopted, applyElementFunctionality, clearDebounceTimers, clearMemoizeCache, clearThrottleTimers, context$1 as context, context as contextProperty, controller, createRequestHandler, css, debounce, dispatch, dispose, element, getSymbol, html, layout, memoize, moved, noChange, nothing, observe, on, once, property, query, queryAll, ready, render, request, resetOnce, respond, setDisableElementReadyWarnings, styles, throttle, trackRenders, unsafeHTML, useNativeElementControllers, waitForAllCustomElements, waitForElementDefined, waitForElementReady, watch };
 //# sourceMappingURL=index.esm.js.map