@stacksjs/stx 0.2.111 → 0.2.112

package/dist/signals.js

@@ -2388,6 +2388,13 @@ else {
     }
 
     let currentElements = [];
+    // One entry per list item, each holding EVERY node that item rendered.
+    // currentElements stays flat for transition snapshots, but the keyed
+    // diff below must pair a key with all of its nodes: a template row
+    // routinely yields several (an element plus its surrounding text nodes),
+    // and indexing a flat list by key position then paired the wrong node
+    // with each key, leaving the list rotated after an update.
+    let currentGroups = [];
     let currentKeys = [];
     let loadingElement = null;
     let emptyElement = null;
@@ -2529,6 +2536,7 @@ catch (e) {
           // Dispose scopes registered by items before they leave the DOM (#1727).
           currentElements.forEach(e => { disposeSubtreeScopes(e); e.remove(); });
           currentElements = [];
+          currentGroups = [];
           currentKeys = [];
           showLoading();
           return;
@@ -2577,6 +2585,7 @@ catch (e) {
           // Dispose scopes registered by items before they leave the DOM (#1727).
           currentElements.forEach(e => { disposeSubtreeScopes(e); e.remove(); });
           currentElements = [];
+          currentGroups = [];
           currentKeys = [];
           hideEmpty();
           return;
@@ -2617,6 +2626,7 @@ catch (e) {
         // Dispose scopes registered by items before they leave the DOM (#1727).
         currentElements.forEach(e => { disposeSubtreeScopes(e); e.remove(); });
         currentElements = [];
+        currentGroups = [];
         currentKeys = [];
         if (emptyExpr) {
           const emptyContent = evalLazy(emptyExpr);
@@ -2651,11 +2661,12 @@ catch (e) {
       for (let i = 0; i < currentKeys.length; i++) {
         const k = currentKeys[i];
         if (!oldKeyMap.has(k)) oldKeyMap.set(k, []);
-        oldKeyMap.get(k).push(currentElements[i]);
+        oldKeyMap.get(k).push(currentGroups[i] || []);
       }
 
       // Build new element list, reusing existing DOM nodes by key
       const newElements = [];
+      const newGroups = [];
       const usedKeys = new Set();
 
       for (let i = 0; i < list.length; i++) {
@@ -2663,10 +2674,12 @@ catch (e) {
         const existing = oldKeyMap.get(key);
 
         if (existing && existing.length > 0 && !usedKeys.has(key)) {
-          // Reuse existing element \u2014 move to correct position
-          const el = existing.shift();
-          parent.insertBefore(el, placeholder);
-          newElements.push(el);
+          // Reuse this item's nodes \u2014 move the whole group into position, in
+          // order, so a multi-node row stays contiguous and correctly ordered.
+          const group = existing.shift();
+          group.forEach(el => parent.insertBefore(el, placeholder));
+          newElements.push(...group);
+          newGroups.push(group);
           usedKeys.add(key);
           // Update the item signal so bindings re-evaluate with new data.
           // This is the fix for #1669 \u2014 without this, reused elements show
@@ -2681,14 +2694,16 @@ catch (e) {
           const elements = createItemElements(list[i], i, key);
           elements.forEach(el => { parent.insertBefore(el, placeholder); if (tgReady) tgEnter(el, tgName); });
           newElements.push(...elements);
+          newGroups.push(elements);
         }
       }
 
       // Remove old elements whose keys are no longer in the list.
       // Dispose any scopes registered inside removed items before the
       // remove() call (#1727).
-      for (const [key, elements] of oldKeyMap) {
+      for (const [key, groups] of oldKeyMap) {
         if (!usedKeys.has(key)) {
+          const elements = groups.flat();
           // In a transition group, run the leave animation and let it remove the
           // node; otherwise remove immediately. Scopes are disposed up-front
           // either way (their destroy hooks shouldn't wait on a CSS transition).
@@ -2698,6 +2713,7 @@ catch (e) {
       }
 
       currentElements = newElements;
+      currentGroups = newGroups;
       currentKeys = newKeys;
 
       // \u2500\u2500 <TransitionGroup> play (#1742) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -4865,6 +4881,10 @@ else {
       processedScopes.add(el);
 
       const scopeVars = window.stx._scopes && window.stx._scopes[scopeId];
+      // Record the element this scope is bound to so cleanupContainer can tell a
+      // dead registry entry (element replaced by an SPA swap) from a live one.
+      // See sweepOrphanedScopes / #1775.
+      if (scopeVars) scopeVars.__el = el;
 
       // Deferred island (#1746): its setup script (type="stx/island") hasn't run
       // yet, so the scope isn't registered. Arm the hydration trigger anyway \u2014
@@ -5024,6 +5044,54 @@ catch (e) {
     }
   }
 
+  // Reclaim registry entries whose element is gone from the document.
+  //
+  // disposeSubtreeScopes only deletes scopes found UNDER the cleanup container,
+  // so two shapes leaked forever across SPA navigation (#1775): components
+  // rendered outside the swap container (an @include in the layout, above
+  // <main>), and elements already detached by the time cleanup ran its
+  // querySelectorAll. Each round-trip re-ran the include scripts under fresh
+  // scope ids while the previous ids stayed in window.stx._scopes \u2014 ~4 orphans
+  // per hop, unbounded, each retaining that scope's vars, signals and closures.
+  //
+  // The sweep is deliberately CONSERVATIVE \u2014 an over-eager delete is the #1737
+  // failure (a scope removed from the registry cannot be recreated: its setup
+  // IIFE ran once at page load), which is strictly worse than a leak. An entry
+  // is dropped only when all three hold:
+  //   1. the runtime actually bound it to an element (__el recorded),
+  //   2. that element is no longer connected to the document, and
+  //   3. neither it nor any ancestor is retained by a live conditional.
+  // Entries with no __el (e.g. a scope whose element still sits inside untouched
+  // <template> content, never inserted) are left alone \u2014 we can't prove they're
+  // dead, and a later clone re-uses that registration.
+  function sweepOrphanedScopes() {
+    if (!window.stx || !window.stx._scopes) return;
+    var scopes = window.stx._scopes;
+    for (var id in scopes) {
+      if (!Object.prototype.hasOwnProperty.call(scopes, id)) continue;
+      var entry = scopes[id];
+      if (!entry) continue;
+      var el = entry.__el;
+      if (!el || el.isConnected) continue;
+      // Detached but RETAINED: :if toggles keep their element (bindIf re-inserts
+      // the SAME node) and :if/:else chains keep their branches. Parent links
+      // inside a detached subtree stay intact, so walking up from the scope
+      // element still finds the conditional that owns it.
+      var retained = false;
+      for (var p = el; p; p = p.parentNode) {
+        if (p.__stx_if_bound || p.__stx_chain_member) { retained = true; break; }
+      }
+      if (retained) continue;
+      if (entry.__destroyCallbacks && Array.isArray(entry.__destroyCallbacks)) {
+        for (var k = 0; k < entry.__destroyCallbacks.length; k++) {
+          try { entry.__destroyCallbacks[k](); }
+          catch (e) { console.warn('[stx] scope destroy error:', e); }
+        }
+      }
+      delete scopes[id];
+    }
+  }
+
   // ==========================================================================
   // Container Cleanup (for SPA navigation)
   // ==========================================================================
@@ -5091,6 +5159,11 @@ catch (e) { console.warn('[stx] destroy hook error:', e); }
     // through disposeSubtreeScopes so the same walk runs for SPA
     // navigation and for :if/:for-driven unmount (see #1727).
     disposeSubtreeScopes(container);
+
+    // 4. Reclaim entries the container walk can't see \u2014 components rendered
+    // outside the swap container, or already detached before step 3 ran its
+    // querySelectorAll. Without this the registry grew every navigation (#1775).
+    sweepOrphanedScopes();
   }
 
   // Re-initialize components after SPA content swap.
@@ -5186,6 +5259,9 @@ catch (e) { console.warn('[stx] destroy callback error:', e); }
     document.body.querySelectorAll('[data-stx-scope]').forEach(function(el) {
       var scopeId = el.getAttribute('data-stx-scope');
       var scopeVars = window.stx._scopes && window.stx._scopes[scopeId];
+      // Record the bound element for the orphan sweep (#1775) \u2014 see the
+      // DOMContentLoaded walk above for the rationale.
+      if (scopeVars) scopeVars.__el = el;
       // Deferred island reached via SPA navigation (#1746): its setup script is
       // inert (type="stx/island"), so the scope isn't registered yet. Arm the
       // hydration trigger (deferHydration) instead of skipping it \u2014 mirrors the