@repobit/dex-store-elements 1.2.2 → 1.2.4

package/dist/src/nodes/node.state.js

@@ -8,7 +8,7 @@ import { derivedContext } from "../contexts/context.derived.js";
 import { eventContext } from "../contexts/context.event.js";
 import { stateContext } from "../contexts/context.state.js";
 import { storeContext } from "../contexts/context.store.js";
-import { ActionEvent, CollectActionEvent, CollectOptionEvent, CollectUpdateByDeltaEvent, UpdateByDeltaEvent } from "../events/events.js";
+import { ActionEvent, CollectActionEvent, CollectChildEvent, CollectChildRemovedEvent, CollectOptionEvent, CollectUpdateByDeltaEvent, UpdateByDeltaEvent } from "../events/events.js";
 import { toDSLContext } from "../renders/context.js";
 import eta from "../templating/eta.js";
 import { consume, provide } from "@lit/context";
@@ -32,6 +32,11 @@ export class StateNode extends LitElement {
         this.autoForward = true;
         this.noCollect = false;
         this.storeName = Symbol("bd-state");
+        // Configurable delay for mutation-triggered Eta coalescing (ms).
+        //  - Use 0 for next-tick behavior (runs ASAP, more visits)
+        //  - Use a higher value (e.g., 50–150) to batch SPA bursts
+        this.etaMutationDelay = 10;
+        this.etaMutationDelayMax = 100;
         // If true, ignore events coming from parent context; only react to
         // events originating inside this subtree (DOM-bubbled via listeners).
         this.ignoreEventsParent = false;
@@ -234,11 +239,54 @@ export class StateNode extends LitElement {
                 if (!this.shouldRunEtaStateRender())
                     return;
                 // Provide 'it' derived from DSL context
-                const it = await toDSLContext({ state, derived });
-                await this._renderEtaTemplates(it);
+                // Mark cause (mutation-triggered vs state/derived-triggered)
+                this._etaRenderCurrentFromMutation = this._etaRenderTriggeredByMutation;
+                this._etaRenderTriggeredByMutation = false;
+                this._etaRenderInProgress = true;
+                try {
+                    const it = await toDSLContext({ state, derived });
+                    await this._renderEtaTemplates(it);
+                }
+                finally {
+                    this._etaRenderInProgress = false;
+                    this._etaRenderCurrentFromMutation = false;
+                    // If mutations arrived while rendering, schedule one more pass
+                    if (this._etaRenderNeedsRun) {
+                        this._etaRenderNeedsRun = false;
+                        this._scheduleEtaRenderFromMutation();
+                    }
+                    this._notifyEtaIdle();
+                }
             },
             args: () => [this.state, this._derived]
         });
+        // Track DOM changes in the light DOM (slot content) to rerun Eta when SPA rewrites
+        this._etaRenderInProgress = false;
+        this._etaRenderScheduled = false;
+        this._etaRenderNeedsRun = false;
+        this._etaRenderTriggeredByMutation = false;
+        this._etaRenderCurrentFromMutation = false;
+        this._etaIdleWaiters = [];
+        // Track nearest contextual children (register via CollectChildEvent)
+        this._contextualChildren = new Set();
+        this._onCollectChild = (e) => {
+            if (e.target === this)
+                return;
+            e.stopPropagation();
+            const { child } = e.detail;
+            if (child && child !== this) {
+                this._contextualChildren.add(child);
+            }
+        };
+        this._onCollectChildRemoved = (e) => {
+            if (e.target === this)
+                return;
+            e.stopPropagation();
+            const { child } = e.detail;
+            if (child && child !== this) {
+                this._contextualChildren.delete(child);
+            }
+        };
     }
     /**
      * all options computed by this node
@@ -250,12 +298,78 @@ export class StateNode extends LitElement {
     // Allow subclasses (e.g., OptionNode) to disable the base Eta render
     // when they provide their own option-specific rendering pipeline.
     shouldRunEtaStateRender() { return true; }
+    _isEtaIdle() {
+        return !this._etaRenderInProgress && !this._etaRenderDebounce && !this._etaRenderNeedsRun;
+    }
+    _waitEtaSettled() {
+        if (this._isEtaIdle())
+            return Promise.resolve();
+        return new Promise((resolve) => {
+            this._etaIdleWaiters.push(resolve);
+        });
+    }
+    _notifyEtaIdle() {
+        if (!this._isEtaIdle())
+            return;
+        if (this._etaIdleWaiters.length === 0)
+            return;
+        const waiters = this._etaIdleWaiters.splice(0);
+        for (const w of waiters)
+            w();
+    }
+    _scheduleEtaRenderFromMutation() {
+        // If a render is already in progress, remember to run again once it finishes.
+        if (this._etaRenderInProgress) {
+            this._etaRenderNeedsRun = true;
+            return;
+        }
+        if (!this.shouldRunEtaStateRender())
+            return;
+        // Adaptive coalescing: restart timer on every mutation and, if bursts continue,
+        // increase delay up to a configured max to batch work.
+        const base = Math.max(0, Number(this.etaMutationDelay) || 0);
+        const max = Math.max(base, Number(this.etaMutationDelayMax) || 0);
+        let delay = base;
+        if (this._etaRenderDebounce) {
+            clearTimeout(this._etaRenderDebounce);
+            const prev = this._etaCoalesceDelay ?? base;
+            delay = Math.min(prev > 0 ? prev * 2 : base, max);
+        }
+        this._etaCoalesceDelay = delay;
+        this._etaRenderTriggeredByMutation = true;
+        this._etaRenderDebounce = window.setTimeout(() => {
+            this._etaRenderDebounce = undefined;
+            this._etaCoalesceDelay = base;
+            this._etaRenderTask.run();
+            // If nothing else is scheduled and not in-progress, resolve any idle waiters
+            queueMicrotask(() => this._notifyEtaIdle());
+        }, delay);
+    }
     _isStateNodeElement(el) {
         if (el instanceof StateNode)
             return true;
         const t = el.tagName;
         return t === 'BD-STATE' || t === 'BD-PRODUCT' || t === 'BD-OPTION' || t === 'BD-CONTEXT';
     }
+    // Find the nearest eligible element under this provider to use as a refresh root
+    _findEligibleRoot(n) {
+        let cur = n;
+        while (cur && cur !== this) {
+            if (!(cur instanceof HTMLElement)) {
+                cur = cur.parentNode;
+                continue;
+            }
+            if (this._isStateNodeElement(cur) && cur !== this)
+                return null; // nested provider boundary
+            if (cur.hasAttribute('data-store-render'))
+                return null; // render-managed boundary
+            const parentProvider = cur.parentElement?.closest('bd-state,bd-product,bd-option,bd-context');
+            if (parentProvider === this || cur.parentElement === this)
+                return cur;
+            cur = cur.parentNode;
+        }
+        return this;
+    }
     _hasNestedStateNode(el) {
         return !!el.querySelector?.('bd-state,bd-product,bd-option,bd-context');
     }
@@ -280,11 +394,16 @@ export class StateNode extends LitElement {
             cache = new Map();
             this._tplAttrTemplates.set(el, cache);
         }
+        // Fast path: if we've previously seen no templated attributes, skip scan
+        if (this._noEtaAttrs && this._noEtaAttrs.has(el))
+            return;
+        let foundTemplateAttr = false;
         // Implicit any-attribute templates (heuristic: contains '{{')
         for (const a of names) {
             const raw = el.getAttribute(a);
             if (!raw || !raw.includes('{{'))
                 continue;
+            foundTemplateAttr = true;
             const key = `imp:${a}`;
             let entry = cache.get(key);
             if (!entry || entry.src !== raw) {
@@ -299,11 +418,27 @@ export class StateNode extends LitElement {
                 catch { /* ignore */ }
             }
         }
+        // If no templated attributes were found on this element, mark it to skip next time
+        if (!foundTemplateAttr) {
+            if (!this._noEtaAttrs)
+                this._noEtaAttrs = new WeakSet();
+            this._noEtaAttrs.add(el);
+        }
     }
     _hasRenderNodes(el) {
-        return !!el.querySelector?.('[data-store-render]');
+        const h = el;
+        if (!h)
+            return false;
+        if (h.hasAttribute && h.hasAttribute('data-store-render'))
+            return true;
+        // Heuristic: check innerHTML for render markers to avoid expensive queries
+        const html = h.innerHTML;
+        return typeof html === 'string' && html.includes('data-store-render');
     }
     async _morphElementFromHTML(el, html) {
+        // Fast path: nothing changed
+        if (el.innerHTML === html)
+            return;
         try {
             const wrapper = el.cloneNode(false);
             wrapper.innerHTML = html;
@@ -316,10 +451,19 @@ export class StateNode extends LitElement {
     async _renderEtaTemplates(context) {
         // Traverse descendants; for any element that does NOT contain a nested state node,
         // treat its innerHTML as a single Eta template and render/morph the entire subtree.
+        let _processed = 0;
         const visit = async (root) => {
+            // If a follow-up Eta run is already requested (DOM still changing)
+            // and this pass was triggered by mutation, bail out to avoid unstable writes.
+            if (this._etaRenderCurrentFromMutation && this._etaRenderNeedsRun)
+                return;
             for (const child of Array.from(root.children)) {
+                if (this._etaRenderCurrentFromMutation && this._etaRenderNeedsRun)
+                    return;
                 if (!(child instanceof HTMLElement))
                     continue;
+                // Read current HTML source once
+                const currentSrc = child.innerHTML ?? '';
                 // Always allow attribute-level Eta on any node in this subtree
                 await this._renderEtaAttributes(child, context);
                 if (this._isStateNodeElement(child) && child !== this) {
@@ -330,6 +474,7 @@ export class StateNode extends LitElement {
                     await visit(child);
                     continue;
                 }
+                // Cheap render-node detection using current HTML source
                 // If subtree contains render nodes, recurse into it but don't morph at this level
                 if (this._hasRenderNodes(child)) {
                     await visit(child);
@@ -339,30 +484,118 @@ export class StateNode extends LitElement {
                 if (child.hasAttribute('data-store-render')) {
                     continue;
                 }
+                // Reuse cached template, but refresh if DOM source changed (e.g., SPA mutated innerHTML)
                 let entry = this._tplElementTemplates.get(child);
+                const hadTemplate = Boolean(entry && entry.src && entry.src.includes('{{'));
+                // If this element and its attributes contain no templates, it is not a
+                // special provider/render container, and it never had a template cached,
+                // skip further work.
+                const noAttrs = this._noEtaAttrs?.has(child) ?? false;
+                if (!currentSrc.includes('{{') && noAttrs && !hadTemplate && !this._hasNestedStateNode(child)) {
+                    continue;
+                }
                 if (!entry) {
-                    const src = child.innerHTML ?? '';
-                    entry = { src };
+                    entry = { src: currentSrc };
                     this._tplElementTemplates.set(child, entry);
                 }
+                else if (entry.src !== currentSrc) {
+                    const isTemplateLike = currentSrc.includes('{{');
+                    // Accept SPA-authored changes (even without templates) only when this pass is mutation-triggered.
+                    if (isTemplateLike || this._etaRenderCurrentFromMutation) {
+                        entry.src = currentSrc;
+                        delete entry.fn;
+                    }
+                }
                 const out = this._safeEtaRender(entry, context, { onErrorReturnInput: true });
+                if (this._etaRenderCurrentFromMutation) {
+                    // During mutation-triggered passes, avoid writing to DOM to prevent
+                    // racing with SPA changes. We refreshed caches above so subsequent
+                    // non-mutation renders have the latest source.
+                    continue;
+                }
+                if (this._etaRenderCurrentFromMutation && this._etaRenderNeedsRun)
+                    return;
                 await this._morphElementFromHTML(child, out);
+                // Periodically yield to avoid long tasks
+                if ((++_processed % 50) === 0) {
+                    await Promise.resolve();
+                }
             }
         };
-        await visit(this);
+        // If this is a mutation-triggered pass and we have specific dirty roots, only refresh those
+        if (this._etaRenderCurrentFromMutation && this._etaDirtyRoots && this._etaDirtyRoots.size) {
+            for (const r of this._etaDirtyRoots) {
+                await visit(r);
+            }
+            this._etaDirtyRoots.clear();
+        }
+        else {
+            await visit(this);
+        }
     }
     connectedCallback() {
         super.connectedCallback();
+        // Listen for child registration/unregistration
+        this.addEventListener(CollectChildEvent.eventName, this._onCollectChild);
+        this.addEventListener(CollectChildRemovedEvent.eventName, this._onCollectChildRemoved);
         this.addEventListener(CollectActionEvent.eventName, this._collectActionEvent);
         this.addEventListener(CollectUpdateByDeltaEvent.eventName, this._collectUpdateByDeltaEvent);
         this.addEventListener(CollectOptionEvent.eventName, this._collectOptionEvent);
         [ActionEvent, UpdateByDeltaEvent].forEach(e => this.addEventListener(e.eventName, this._eventChange));
+        // Observe slot/light DOM changes to trigger Eta re-rendering in SPA scenarios
+        if (!this._slotMo && this.shouldRunEtaStateRender()) {
+            this._slotMo = new MutationObserver((muts) => {
+                for (const m of muts) {
+                    // Consider only targets that aren't within nested-provider or render-managed subtrees
+                    const targets = [];
+                    if (m.type === 'characterData' || m.type === 'attributes') {
+                        targets.push(m.target);
+                        // If attributes changed on an element previously marked as having no Eta attrs,
+                        // clear the cache so it can be rescanned on the next pass.
+                        if (m.type === 'attributes' && this._noEtaAttrs && m.target instanceof HTMLElement) {
+                            this._noEtaAttrs.delete(m.target);
+                        }
+                    }
+                    else {
+                        targets.push(...Array.from(m.addedNodes));
+                    }
+                    const eligibles = [];
+                    for (const t of targets) {
+                        const root = this._findEligibleRoot(t);
+                        if (root)
+                            eligibles.push(root);
+                    }
+                    if (!eligibles.length)
+                        continue;
+                    // Track dirty roots for this cycle
+                    if (!this._etaDirtyRoots)
+                        this._etaDirtyRoots = new Set();
+                    eligibles.forEach(r => this._etaDirtyRoots.add(r));
+                    this._scheduleEtaRenderFromMutation();
+                    break; // one schedule is enough per batch
+                }
+            });
+            this._slotMo.observe(this, {
+                childList: true,
+                subtree: true,
+                characterData: true,
+                attributes: true
+            });
+        }
+        // Announce this node as a contextual child of its nearest parent StateNode
+        // so parents can await our updateComplete as part of theirs.
+        this._announceAsContextualChild();
     }
     remove() {
+        // Announce removal to parent before DOM detaches, so it can unregister us
+        this._announceContextualChildRemoved();
         this.dispatchEvent(new CollectOptionEvent({ name: this.storeName, options: null }));
         super.remove();
     }
     disconnectedCallback() {
+        // Stop listening for contextual child events
+        this.removeEventListener(CollectChildEvent.eventName, this._onCollectChild);
+        this.removeEventListener(CollectChildRemovedEvent.eventName, this._onCollectChildRemoved);
         this.removeEventListener(CollectActionEvent.eventName, this._collectActionEvent);
         this.removeEventListener(CollectUpdateByDeltaEvent.eventName, this._collectUpdateByDeltaEvent);
         this.removeEventListener(CollectOptionEvent.eventName, this._collectOptionEvent);
@@ -370,8 +603,21 @@ export class StateNode extends LitElement {
         this._options.clear();
         this._actions.clear();
         this._partialOptions.clear();
+        this._contextualChildren.clear();
+        if (this._etaRenderDebounce) {
+            clearTimeout(this._etaRenderDebounce);
+            this._etaRenderDebounce = undefined;
+        }
+        this._slotMo?.disconnect();
+        this._slotMo = undefined;
         super.disconnectedCallback();
     }
+    _announceAsContextualChild() {
+        this.dispatchEvent(new CollectChildEvent({ child: this }));
+    }
+    _announceContextualChildRemoved() {
+        this.dispatchEvent(new CollectChildRemovedEvent({ child: this }));
+    }
     _eventChange(e) {
         e.stopPropagation();
         // ignore if source matches ignore list
@@ -446,28 +692,41 @@ export class StateNode extends LitElement {
         this._notifyParent();
     }
     async _computeState(isActive) {
+        // We'll iteratively expand the set of options using actions and delta updates
+        // until we reach a fixed point (no new options discovered). This ensures
+        // combinations across different dimensions are included (e.g., 10-24).
         const computed = new Set();
-        // 1) collect base options + partialOptions
+        const queue = [];
+        const enqueue = (opt) => {
+            if (!computed.has(opt)) {
+                computed.add(opt);
+                queue.push(opt);
+            }
+        };
+        // 1) collect base options + partialOptions and seed the queue
         for (const optsPromise of this._options.values()) {
             isActive();
             const opts = await optsPromise;
             for (const opt of opts) {
                 isActive();
-                computed.add(opt);
-                await this._applyPartials(opt, computed, isActive);
+                enqueue(opt);
+                const partials = await this._applyPartials(opt, isActive);
+                for (const p of partials)
+                    enqueue(p);
             }
         }
-        // 2) apply full “actions”
-        for (const opt of [...computed]) {
-            isActive();
-            await this._applyActions(opt, computed, isActive);
-        }
-        // 3) apply full "delta updates"
-        for (const opt of [...computed]) {
+        // 2) Repeatedly apply actions and delta updates to closure
+        while (queue.length) {
             isActive();
-            await this._applyDeltaUpdates(opt, computed, isActive);
+            const current = queue.shift();
+            const actionResults = await this._applyActions(current, isActive);
+            for (const a of actionResults)
+                enqueue(a);
+            const deltaResults = await this._applyDeltaUpdates(current, isActive);
+            for (const d of deltaResults)
+                enqueue(d);
         }
-        // 3) combine bundles
+        // 3) combine bundles on the full set
         for (const opt of [...computed]) {
             isActive();
             const bundles = [...this._partialBundleOptions.values()];
@@ -476,7 +735,8 @@ export class StateNode extends LitElement {
         }
         return [...computed];
     }
-    async _applyPartials(baseOpt, computed, isActive) {
+    async _applyPartials(baseOpt, isActive) {
+        const results = [];
         for (const partial of this._partialOptions.values()) {
             isActive();
             if (!partial.id) {
@@ -485,27 +745,37 @@ export class StateNode extends LitElement {
             const newProduct = await baseOpt.switchProduct({ id: partial.id, campaign: partial.campaign });
             const newOpt = await newProduct?.getOption({ devices: partial.devices, subscription: partial.subscription });
             if (newOpt)
-                computed.add(newOpt);
+                results.push(newOpt);
         }
+        return results;
     }
-    async _applyActions(baseOpt, computed, isActive) {
+    async _applyActions(baseOpt, isActive) {
+        const results = [];
         for (const action of this._actions.values()) {
             isActive();
+            const targetDevices = action.devices ?? baseOpt.getDevices();
+            const targetSubscription = action.subscription ?? baseOpt.getSubscription();
+            // Skip no-op actions that don't change anything
+            if (targetDevices === baseOpt.getDevices() && targetSubscription === baseOpt.getSubscription()) {
+                continue;
+            }
             const newOpt = await baseOpt.getOption({
-                devices: action.devices ?? baseOpt.getDevices(),
-                subscription: action.subscription ?? baseOpt.getSubscription()
+                devices: targetDevices,
+                subscription: targetSubscription
             });
             if (newOpt)
-                computed.add(newOpt);
+                results.push(newOpt);
         }
+        return results;
     }
-    async _applyDeltaUpdates(baseOpt, computed, isActive) {
+    async _applyDeltaUpdates(baseOpt, isActive) {
+        const results = [];
         const product = baseOpt.getProduct();
         const baseDevices = product.getDevices().values;
         const baseSubscriptions = product.getSubscriptions().values;
         let devices = baseOpt.getDevices();
         let subscription = baseOpt.getSubscription();
-        //corner case for input types that define an interval by themselves
+        // corner case for input types that define an interval by themselves
         const getValue = (action, startValue, minValue) => {
             if (action.useAsValue) {
                 action.delta = 1;
@@ -520,9 +790,7 @@ export class StateNode extends LitElement {
             // Loop until we can no longer apply the delta
             while (true) {
                 isActive();
-                const values = action.type === "devices"
-                    ? baseDevices
-                    : baseSubscriptions;
+                const values = action.type === "devices" ? baseDevices : baseSubscriptions;
                 const current = action.type === "devices"
                     ? getValue(action, devices, baseDevices[0])
                     : getValue(action, subscription, baseSubscriptions[0]);
@@ -536,13 +804,13 @@ export class StateNode extends LitElement {
                 else {
                     subscription = newValue;
                 }
-                // Fetch the new option and add it if exists
+                // Fetch the new option and collect it if exists
                 const newOpt = await baseOpt.getOption({ devices, subscription });
-                if (newOpt) {
-                    computed.add(newOpt);
-                }
+                if (newOpt)
+                    results.push(newOpt);
             }
         }
+        return results;
     }
     /**
    * Attempts to apply the given delta action to the current value.
@@ -653,6 +921,18 @@ export class StateNode extends LitElement {
         await this._syncEventTask.taskComplete;
         await this._collectToggleTask.taskComplete;
         await this._etaRenderTask.taskComplete;
+        // Ensure any debounced/mutation-triggered Eta runs have settled
+        await this._waitEtaSettled();
+        // Await all registered contextual children (nearest descendants only)
+        try {
+            const children = Array.from(this._contextualChildren);
+            const waits = children
+                .map((c) => c.updateComplete)
+                .filter((p) => !!p);
+            if (waits.length > 0)
+                await Promise.allSettled(waits);
+        }
+        catch { /* ignore */ }
         return result;
     }
     isDeviceAndSubscriptionChange(evt) {
@@ -708,6 +988,12 @@ __decorate([
 __decorate([
     property({ attribute: 'store-name' })
 ], StateNode.prototype, "storeName", void 0);
+__decorate([
+    property({ attribute: 'eta-mutation-delay', type: Number })
+], StateNode.prototype, "etaMutationDelay", void 0);
+__decorate([
+    property({ attribute: 'eta-mutation-delay-max', type: Number })
+], StateNode.prototype, "etaMutationDelayMax", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'ignore-events-parent' })
 ], StateNode.prototype, "ignoreEventsParent", void 0);