@stacksjs/stx 0.2.172 → 0.2.174

package/dist/server-bindings.js

@@ -20,7 +20,50 @@ const BOOLEAN_ATTRS = new Set([
   "playsinline",
   "reversed",
   "selected"
+]), VOID_TAGS = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
 ]);
+function reactiveLoopRanges(template) {
+  const ranges = [], openingTag = /<([a-zA-Z][a-zA-Z0-9-]*)\b((?:[^>"']|"[^"]*"|'[^']*')*)\s*\/?>/g;
+  let match;
+  while ((match = openingTag.exec(template)) !== null) {
+    const attributes = match[2] || "";
+    if (!/(?:^|\s)(?::for|x-for|v-for|@for)\s*=/.test(attributes))
+      continue;
+    const start = match.index, openingEnd = start + match[0].length, tagName = match[1].toLowerCase();
+    if (match[0].endsWith("/>") || VOID_TAGS.has(tagName)) {
+      ranges.push([start, openingEnd]);
+      continue;
+    }
+    const escapedTag = tagName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), sameTag = new RegExp(`<\\/?${escapedTag}\\b(?:[^>"']|"[^"]*"|'[^']*')*>`, "gi");
+    sameTag.lastIndex = openingEnd;
+    let depth = 1, closingEnd = openingEnd, nested;
+    while ((nested = sameTag.exec(template)) !== null)
+      if (nested[0].startsWith("</")) {
+        depth--;
+        if (depth === 0) {
+          closingEnd = nested.index + nested[0].length;
+          break;
+        }
+      } else if (!nested[0].endsWith("/>"))
+        depth++;
+    ranges.push([start, closingEnd]);
+  }
+  return ranges;
+}
 function resolveClassBinding(value) {
   if (typeof value === "string")
     return value;
@@ -38,10 +81,11 @@ export function processServerBindings(template, context) {
   let match;
   while ((match = scriptStyleRegex.exec(template)) !== null)
     protectedRanges.push([match.index, match.index + match[0].length]);
+  protectedRanges.push(...reactiveLoopRanges(template));
   function isProtected(pos) {
     return protectedRanges.some(([start, end]) => pos >= start && pos < end);
   }
-  const tagRegex = /<([a-zA-Z][a-zA-Z0-9-]*)((?:\s+(?:[^>"']|"[^"]*"|'[^']*'))*)\s*\/?>/g, replacements = [];
+  const tagRegex = /<([a-zA-Z][a-zA-Z0-9-]*)\b((?:[^>"']|"[^"]*"|'[^']*')*)\s*\/?>/g, replacements = [];
   while ((match = tagRegex.exec(output)) !== null) {
     if (isProtected(match.index))
       continue;

package/dist/signals.js

@@ -1175,9 +1175,15 @@ else if (immediate) {
   // ==========================================================================
 
   function useRef(name) {
+    // A ref belongs to the component scope that created it. Capturing that
+    // owner now is essential: componentScope is a mutable compatibility
+    // fallback and changes while the rest of the page hydrates. Reading it
+    // from the getter made an early component resolve refs from whichever
+    // component happened to hydrate last.
+    var ownerScope = currentLifecycleScope() || componentScope;
     return {
       get current() {
-        return componentScope.$refs ? componentScope.$refs[name] : null;
+        return ownerScope.$refs ? ownerScope.$refs[name] : null;
       },
       get value() {
         return this.current;