@zubra/runtime 5.1.0 → 5.1.2

package/dist/production/element.js

@@ -877,13 +877,24 @@ const isContent = (node) => node.nodeType === 1 || (node.nodeType === TEXT && no
  * The slot for each of `nodes` (an element's children, in order). Comments and whitespace are
  * frameworks' markers (Lit's parts, Svelte's anchors): a comment goes with the content after it
  * and whitespace with the content before it, so a framework's range stays together in one slot.
+ * Empty text nodes come in pairs (Vue brackets each fragment, a v-for, with two): both go with
+ * the content between them, since Vue moves that content through the start anchor's parent.
  */
 function assignSlots(nodes) {
   const named = nodes.map((node) => (isContent(node) ? slotName(node) : null));
-  const after = (i) => { for (let j = i + 1; j < nodes.length; j++) if (named[j]) return named[j]; return null; };
-  const before = (i) => { for (let j = i - 1; j >= 0; j--) if (named[j]) return named[j]; return null; };
+  // The slot of the nearest content after (step 1) or before (step -1) node i.
+  const near = (i, step) => { for (let j = i + step; nodes[j]; j += step) if (named[j]) return named[j]; return null; };
+  // An empty text node right before content opens a range; otherwise it closes the last one,
+  // and both take the slot of the first content between them.
+  const open = [];
+  nodes.forEach((node, i) => {
+    if (node.nodeType !== TEXT || node.data) return;
+    if (!open.length || named[i + 1] && nodes[i + 1].data == null) return open.push(i);
+    const start = open.pop();
+    named[start] = named[i] = named.slice(start + 1, i).find(Boolean);
+  });
   return nodes.map((node, i) => named[i]
-    ?? (node.nodeType === COMMENT ? after(i) ?? before(i) : before(i) ?? after(i))
+    ?? (node.nodeType === COMMENT ? near(i, 1) ?? near(i, -1) : near(i, -1) ?? near(i, 1))
     ?? 'default');
 }
 let nativeText, nativeHTML; // looked up on first use, so the module loads without a DOM
@@ -1013,10 +1024,11 @@ function routeChildren(host, context, slots, tag) {
       for (const node of actual) if (node.nodeType === 1 && slotName(node) !== slot.name) insert(node, null);
       show(slot);
     }
-    // Content a parent adds inside a slot itself (its zb-if or zb-each there) is slotted too.
+    // Content a parent adds inside a slot itself (its zb-if or zb-each there) is slotted too;
+    // a fallback showing there is the component's own, so it stays unmarked.
     if (context.slotted) {
       for (const slot of context.slots.values()) {
-        if (!slot.region) continue;
+        if (!slot.region?.provided) continue;
         for (let node = slot.region.open.nextSibling; node && node !== slot.region.close; node = node.nextSibling) {
           mark(node, context.slotted);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zubra/runtime",
-  "version": "5.1.0",
+  "version": "5.1.2",
   "description": "Browser runtime for Zubra compiled components, built on the TC39 Signals API",
   "license": "ISC",
   "repository": {

package/src/element.js

@@ -892,13 +892,24 @@ const isContent = (node) => node.nodeType === 1 || (node.nodeType === TEXT && no
  * The slot for each of `nodes` (an element's children, in order). Comments and whitespace are
  * frameworks' markers (Lit's parts, Svelte's anchors): a comment goes with the content after it
  * and whitespace with the content before it, so a framework's range stays together in one slot.
+ * Empty text nodes come in pairs (Vue brackets each fragment, a v-for, with two): both go with
+ * the content between them, since Vue moves that content through the start anchor's parent.
  */
 function assignSlots(nodes) {
   const named = nodes.map((node) => (isContent(node) ? slotName(node) : null));
-  const after = (i) => { for (let j = i + 1; j < nodes.length; j++) if (named[j]) return named[j]; return null; };
-  const before = (i) => { for (let j = i - 1; j >= 0; j--) if (named[j]) return named[j]; return null; };
+  // The slot of the nearest content after (step 1) or before (step -1) node i.
+  const near = (i, step) => { for (let j = i + step; nodes[j]; j += step) if (named[j]) return named[j]; return null; };
+  // An empty text node right before content opens a range; otherwise it closes the last one,
+  // and both take the slot of the first content between them.
+  const open = [];
+  nodes.forEach((node, i) => {
+    if (node.nodeType !== TEXT || node.data) return;
+    if (!open.length || named[i + 1] && nodes[i + 1].data == null) return open.push(i);
+    const start = open.pop();
+    named[start] = named[i] = named.slice(start + 1, i).find(Boolean);
+  });
   return nodes.map((node, i) => named[i]
-    ?? (node.nodeType === COMMENT ? after(i) ?? before(i) : before(i) ?? after(i))
+    ?? (node.nodeType === COMMENT ? near(i, 1) ?? near(i, -1) : near(i, -1) ?? near(i, 1))
     ?? 'default');
 }
 let nativeText, nativeHTML; // looked up on first use, so the module loads without a DOM
@@ -1028,10 +1039,11 @@ function routeChildren(host, context, slots, tag) {
       for (const node of actual) if (node.nodeType === 1 && slotName(node) !== slot.name) insert(node, null);
       show(slot);
     }
-    // Content a parent adds inside a slot itself (its zb-if or zb-each there) is slotted too.
+    // Content a parent adds inside a slot itself (its zb-if or zb-each there) is slotted too;
+    // a fallback showing there is the component's own, so it stays unmarked.
     if (context.slotted) {
       for (const slot of context.slots.values()) {
-        if (!slot.region) continue;
+        if (!slot.region?.provided) continue;
         for (let node = slot.region.open.nextSibling; node && node !== slot.region.close; node = node.nextSibling) {
           mark(node, context.slotted);
         }