@stacksjs/stx 0.2.110 → 0.2.112

package/dist/signal-processing.js

@@ -199,68 +199,74 @@ function isBalancedForTag(inner, tag) {
   return !0;
 }
 export function convertSignalDirectivesToAttributes(template, context) {
-  let output = template;
-  const signalNames = extractClientSignalNames(template), ifDirectiveStart = /@if\s*\(/g;
-  let match;
-  const replacements = [];
-  while ((match = ifDirectiveStart.exec(output)) !== null) {
-    const startIdx = match.index, exprStart = startIdx + match[0].length;
-    let depth = 1, i = exprStart;
-    while (i < output.length && depth > 0) {
-      if (output[i] === "(")
-        depth++;
-      else if (output[i] === ")")
-        depth--;
-      i++;
-    }
-    if (depth !== 0)
-      continue;
-    const condition = output.substring(exprStart, i - 1).trim(), afterCondition = i;
-    let ifDepth = 1, endIdx = afterCondition;
-    const endifRegex = /@(if\s*\(|endif)/g;
-    endifRegex.lastIndex = afterCondition;
-    let endMatch;
-    while ((endMatch = endifRegex.exec(output)) !== null)
-      if (endMatch[1].startsWith("if"))
-        ifDepth++;
-      else if (endMatch[1] === "endif") {
-        ifDepth--;
-        if (ifDepth === 0) {
-          endIdx = endMatch.index + endMatch[0].length;
-          break;
-        }
+  const signalNames = extractClientSignalNames(template);
+  function convert(input) {
+    let output = input;
+    const ifDirectiveStart = /@if\s*\(/g;
+    let match;
+    const replacements = [];
+    while ((match = ifDirectiveStart.exec(output)) !== null) {
+      const startIdx = match.index, exprStart = startIdx + match[0].length;
+      let depth = 1, i = exprStart;
+      while (i < output.length && depth > 0) {
+        if (output[i] === "(")
+          depth++;
+        else if (output[i] === ")")
+          depth--;
+        i++;
       }
-    if (ifDepth !== 0)
-      continue;
-    const content = output.substring(afterCondition, endIdx - 6).trim();
-    let replacement;
-    if (hasTopLevelElseBranch(content)) {
-      const parsed = findIfBlocks(output.substring(startIdx, endIdx));
-      if (parsed.length === 0)
+      if (depth !== 0)
         continue;
-      const valueBranches = parsed[0].branches.filter((b) => b.type !== "else");
-      if (!(valueBranches.length > 0 && valueBranches.every((b) => conditionIsClientReactive(b.condition, signalNames, context))))
+      const condition = output.substring(exprStart, i - 1).trim(), afterCondition = i;
+      let ifDepth = 1, endIdx = afterCondition;
+      const endifRegex = /@(if\s*\(|endif)/g;
+      endifRegex.lastIndex = afterCondition;
+      let endMatch;
+      while ((endMatch = endifRegex.exec(output)) !== null)
+        if (endMatch[1].startsWith("if"))
+          ifDepth++;
+        else if (endMatch[1] === "endif") {
+          ifDepth--;
+          if (ifDepth === 0) {
+            endIdx = endMatch.index + endMatch[0].length;
+            break;
+          }
+        }
+      if (ifDepth !== 0)
         continue;
-      replacement = parsed[0].branches.map((branch) => {
-        if (branch.type === "elseif")
-          return branchToAttrElement(branch.content, "@else-if", branch.condition ?? "");
-        if (branch.type === "else")
-          return branchToAttrElement(branch.content, "@else");
-        return branchToAttrElement(branch.content, "@if", branch.condition ?? "");
-      }).join(`
+      const content = output.substring(afterCondition, endIdx - 6).trim();
+      let replacement;
+      if (hasTopLevelElseBranch(content)) {
+        const parsed = findIfBlocks(output.substring(startIdx, endIdx));
+        if (parsed.length === 0)
+          continue;
+        const valueBranches = parsed[0].branches.filter((b) => b.type !== "else");
+        if (!(valueBranches.length > 0 && valueBranches.every((b) => conditionIsClientReactive(b.condition, signalNames, context))))
+          continue;
+        replacement = parsed[0].branches.map((branch) => {
+          const branchContent = convert(branch.content);
+          if (branch.type === "elseif")
+            return branchToAttrElement(branchContent, "@else-if", branch.condition ?? "");
+          if (branch.type === "else")
+            return branchToAttrElement(branchContent, "@else");
+          return branchToAttrElement(branchContent, "@if", branch.condition ?? "");
+        }).join(`
 `);
-    } else {
-      if (!conditionIsClientReactive(condition, signalNames, context))
-        continue;
-      replacement = branchToAttrElement(content, "@if", condition);
+      } else {
+        if (!conditionIsClientReactive(condition, signalNames, context))
+          continue;
+        replacement = branchToAttrElement(convert(content), "@if", condition);
+      }
+      replacements.push({ start: startIdx, end: endIdx, replacement });
+      ifDirectiveStart.lastIndex = endIdx;
     }
-    replacements.push({ start: startIdx, end: endIdx, replacement });
-  }
-  for (let i = replacements.length - 1;i >= 0; i--) {
-    const { start, end, replacement } = replacements[i];
-    output = output.substring(0, start) + replacement + output.substring(end);
+    for (let i = replacements.length - 1;i >= 0; i--) {
+      const { start, end, replacement } = replacements[i];
+      output = output.substring(0, start) + replacement + output.substring(end);
+    }
+    return output;
   }
-  return output;
+  return convert(template);
 }
 function evalLiteralCondition(expr) {
   const trimmed = expr.trim();

package/dist/signals.js

@@ -1579,7 +1579,7 @@ catch (e) {
     if (el.nodeType === Node.TEXT_NODE) {
       const text = el.textContent;
       if (text && text.includes('{{')) {
-        const parts = text.split(/(\\{\\{[^}]+\\}\\})/g);
+        const parts = text.split(/(\\{\\{[\\s\\S]+?\\}\\})/g);
         if (parts.length > 1) {
           const fragment = document.createDocumentFragment();
           const parentEl = el.parentNode;
@@ -1588,7 +1588,7 @@ catch (e) {
           // through nested @if/@for processing where componentScope may be restored
           const capturedScope = { ...scope, ...(findElementScope(parentEl) || {}), ...globalHelpers };
           parts.forEach(part => {
-            const match = part.match(/^\\{\\{\\s*(.+?)\\s*\\}\\}$/);
+            const match = part.match(/^\\{\\{\\s*([\\s\\S]+?)\\s*\\}\\}$/);
             if (match) {
               const expr = match[1];
               // Skip placeholder expressions like __TITLE__ (build-time placeholders)
@@ -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
@@ -2775,6 +2791,18 @@ catch (e) {
       b.placeholder = document.createComment('stx-if-chain');
       parent.insertBefore(b.placeholder, b.el);
       b.el.removeAttribute(b.attr);
+      // A <template> branch (the wrapper convertSignalDirectivesToAttributes
+      // emits for a multi-child / text branch) is INERT \u2014 inserting the element
+      // renders nothing, its content lives in a document fragment. Clone that
+      // content ONCE into a stable node set we toggle in and out, exactly as
+      // bindIf/bindFor already do for template elements. An element branch is
+      // its own single node. Without this, a multi-element @else / @else-if
+      // branch rendered blank the moment the markup was well-formed enough to
+      // survive as a real <template> (the #1784 markup fix). See #1784.
+      b.isTemplate = b.el.tagName === 'TEMPLATE';
+      b.nodes = b.isTemplate
+        ? Array.prototype.slice.call(b.el.content.cloneNode(true).childNodes)
+        : [b.el];
       b.el.remove();
       b.childrenProcessed = false;
     });
@@ -2858,13 +2886,16 @@ catch (e2) {
       // components under reactive conditionals (#1737). Permanent disposal is
       // still handled by bindFor (item removal) and cleanupContainer (SPA nav).
       if (currentIdx !== -1) {
-        chain[currentIdx].el.remove();
+        chain[currentIdx].nodes.forEach(function (n) { if (n.parentNode) n.parentNode.removeChild(n); });
       }
 
       // Insert + process the newly-picked branch.
       if (pickedIdx !== -1) {
         var pick = chain[pickedIdx];
-        pick.placeholder.parentNode.insertBefore(pick.el, pick.placeholder.nextSibling);
+        // Insert this branch's node(s) before the placeholder's next sibling.
+        // The anchor is captured once so the nodes stack in source order.
+        var anchor = pick.placeholder.nextSibling;
+        pick.nodes.forEach(function (n) { pick.placeholder.parentNode.insertBefore(n, anchor); });
         pick.el.__stx_shown_at = performance.now();
         if (!pick.childrenProcessed) {
           pick.childrenProcessed = true;
@@ -2874,9 +2905,12 @@ catch (e2) {
           (function (branch) {
             setTimeout(function () {
               var childScope = { ...capturedComponentScope, ...(branch.capturedElementScope || {}), ...globalHelpers };
-              processElement(branch.el, childScope);
-              branch.el.removeAttribute('x-cloak');
-              branch.el.querySelectorAll('[x-cloak]').forEach(function (c) { c.removeAttribute('x-cloak'); });
+              branch.nodes.forEach(function (n) {
+                if (n.nodeType !== 1) return; // whitespace/text between template children
+                processElement(n, childScope);
+                n.removeAttribute('x-cloak');
+                n.querySelectorAll('[x-cloak]').forEach(function (c) { c.removeAttribute('x-cloak'); });
+              });
             }, 0);
           })(pick);
         }
@@ -4847,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
@@ -5006,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)
   // ==========================================================================
@@ -5073,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.
@@ -5168,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