@stacksjs/stx 0.2.109 → 0.2.111

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)
@@ -2775,6 +2775,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 +2870,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 +2889,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);
         }