@lightspeed-js/core 0.4.5 → 0.4.6

package/dist/compile.js

@@ -1133,6 +1133,30 @@ function isPlain(value) {
   return proto === Object.prototype || proto === null;
 }
 // src/runtime/dom/ForBlock.ts
+var TAG_NAME = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
+var REFUSED_TAGS = new Set([
+  "script",
+  "style",
+  "template",
+  "slot",
+  "iframe",
+  "object",
+  "embed"
+]);
+function retag(source, name) {
+  const doc = source.ownerDocument;
+  const el = source.namespaceURI ? doc.createElementNS(source.namespaceURI, name) : doc.createElement(name);
+  for (const attr of Array.from(source.attributes)) {
+    if (attr.namespaceURI)
+      el.setAttributeNS(attr.namespaceURI, attr.name, attr.value);
+    else
+      el.setAttribute(attr.name, attr.value);
+  }
+  for (const child of Array.from(source.childNodes)) {
+    el.appendChild(child.cloneNode(true));
+  }
+  return el;
+}
 function toIterable(value) {
   if (value == null)
     return [];
@@ -1174,12 +1198,13 @@ class ForBlock {
   renderer;
   conditional;
   itemsExpr;
+  tagged;
   rows = new Map;
   order = [];
   pendingItems = null;
   running = false;
   warnedDuplicates = false;
-  constructor(owner, anchor, templates, alias, params, parentLocals, keyFor, renderer, conditional = false, itemsExpr = "") {
+  constructor(owner, anchor, templates, alias, params, parentLocals, keyFor, renderer, conditional = false, itemsExpr = "", tagged = false) {
     this.owner = owner;
     this.anchor = anchor;
     this.templates = templates;
@@ -1190,22 +1215,55 @@ class ForBlock {
     this.renderer = renderer;
     this.conditional = conditional;
     this.itemsExpr = itemsExpr;
+    this.tagged = tagged;
   }
+  retagged = new Map;
+  warnedTag = false;
   toItems(value) {
     if (this.conditional) {
       return Number.isInteger(value) && value >= 0 ? [value] : [];
     }
+    if (this.tagged)
+      return [this.tagFor(value)];
     return toIterable(value);
   }
   templateFor(item) {
+    if (this.tagged) {
+      const source = this.templates[0];
+      if (item === source.localName)
+        return source;
+      let made = this.retagged.get(item);
+      if (!made) {
+        made = retag(source, item);
+        this.retagged.set(item, made);
+      }
+      return made;
+    }
     return this.conditional ? this.templates[item] : this.templates[0];
   }
+  tagFor(value) {
+    const written = this.templates[0].localName;
+    if (value == null || value === "")
+      return written;
+    const name = typeof value === "string" ? value.trim().toLowerCase() : null;
+    if (name && TAG_NAME.test(name) && !REFUSED_TAGS.has(name))
+      return name;
+    if (!this.warnedTag) {
+      this.warnedTag = true;
+      warn(`$tag="${this.itemsExpr}" gave ${JSON.stringify(value)}, which is not an element it can make - rendering <${written}>.`);
+    }
+    return written;
+  }
   schedule(items) {
     this.pendingItems = items;
     if (this.running)
       return;
     this.running = true;
-    this.drain();
+    this.draining = this.drain();
+  }
+  draining = null;
+  settled() {
+    return this.draining ?? Promise.resolve();
   }
   async drain() {
     try {

package/dist/index.js

@@ -1040,6 +1040,30 @@ class Row {
     this.locals[this.locals.length - 1] = value;
   }
 }
+var TAG_NAME = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
+var REFUSED_TAGS = new Set([
+  "script",
+  "style",
+  "template",
+  "slot",
+  "iframe",
+  "object",
+  "embed"
+]);
+function retag(source, name) {
+  const doc = source.ownerDocument;
+  const el = source.namespaceURI ? doc.createElementNS(source.namespaceURI, name) : doc.createElement(name);
+  for (const attr of Array.from(source.attributes)) {
+    if (attr.namespaceURI)
+      el.setAttributeNS(attr.namespaceURI, attr.name, attr.value);
+    else
+      el.setAttribute(attr.name, attr.value);
+  }
+  for (const child of Array.from(source.childNodes)) {
+    el.appendChild(child.cloneNode(true));
+  }
+  return el;
+}
 function toIterable(value) {
   if (value == null)
     return [];
@@ -1081,12 +1105,13 @@ class ForBlock {
   renderer;
   conditional;
   itemsExpr;
+  tagged;
   rows = new Map;
   order = [];
   pendingItems = null;
   running = false;
   warnedDuplicates = false;
-  constructor(owner, anchor, templates, alias, params, parentLocals, keyFor, renderer, conditional = false, itemsExpr = "") {
+  constructor(owner, anchor, templates, alias, params, parentLocals, keyFor, renderer, conditional = false, itemsExpr = "", tagged = false) {
     this.owner = owner;
     this.anchor = anchor;
     this.templates = templates;
@@ -1097,22 +1122,55 @@ class ForBlock {
     this.renderer = renderer;
     this.conditional = conditional;
     this.itemsExpr = itemsExpr;
+    this.tagged = tagged;
   }
+  retagged = new Map;
+  warnedTag = false;
   toItems(value) {
     if (this.conditional) {
       return Number.isInteger(value) && value >= 0 ? [value] : [];
     }
+    if (this.tagged)
+      return [this.tagFor(value)];
     return toIterable(value);
   }
   templateFor(item) {
+    if (this.tagged) {
+      const source = this.templates[0];
+      if (item === source.localName)
+        return source;
+      let made = this.retagged.get(item);
+      if (!made) {
+        made = retag(source, item);
+        this.retagged.set(item, made);
+      }
+      return made;
+    }
     return this.conditional ? this.templates[item] : this.templates[0];
   }
+  tagFor(value) {
+    const written = this.templates[0].localName;
+    if (value == null || value === "")
+      return written;
+    const name = typeof value === "string" ? value.trim().toLowerCase() : null;
+    if (name && TAG_NAME.test(name) && !REFUSED_TAGS.has(name))
+      return name;
+    if (!this.warnedTag) {
+      this.warnedTag = true;
+      warn(`$tag="${this.itemsExpr}" gave ${JSON.stringify(value)}, which is not an element it can make - rendering <${written}>.`);
+    }
+    return written;
+  }
   schedule(items) {
     this.pendingItems = items;
     if (this.running)
       return;
     this.running = true;
-    this.drain();
+    this.draining = this.drain();
+  }
+  draining = null;
+  settled() {
+    return this.draining ?? Promise.resolve();
   }
   async drain() {
     try {
@@ -1466,6 +1524,15 @@ class Mounter {
         this.createBlock(el, context, "if");
         return;
       }
+      if (el.hasAttribute("data-bind-tag")) {
+        if (el.tagName === "TEMPLATE") {
+          warn("$tag on a <template> means nothing - it renders its contents, not itself.", el);
+          el.removeAttribute("data-bind-tag");
+        } else {
+          this.createBlock(el, context, "tag");
+          return;
+        }
+      }
       if (el.hasAttribute("data-bind-else") || el.hasAttribute("data-bind-else-if")) {
         warn("$else / $else-if must directly follow a $if or $else-if sibling", el);
         el.remove();
@@ -1611,6 +1678,13 @@ class Mounter {
           i += consumed.templates - 1;
           continue;
         }
+        if (el.hasAttribute("data-bind-tag") && el.tagName !== "TEMPLATE") {
+          const consumed = this.adoptBlock(el, found, d, context, "tag");
+          if (!consumed)
+            return false;
+          d += consumed.dom;
+          continue;
+        }
         if (el.tagName === "SLOT") {
           if (!found[d] || !isSlotStart(found[d])) {
             if (!this.adoptNodes(Array.from(el.childNodes), found.slice(d), context, markers)) {
@@ -1746,18 +1820,19 @@ class Mounter {
     const rawExpression = el.getAttribute(`data-bind-${kind}`) ?? "";
     const branches = conditional ? this.gatherBranches(el) : [];
     const expression = conditional ? composeBranchExpression(branches) : rawExpression;
-    const parsed = conditional ? { alias: null, items: expression } : parseForExpression(rawExpression);
+    const parsed = conditional || kind === "tag" ? { alias: null, items: expression } : parseForExpression(rawExpression);
     if (!parsed) {
       warn(`Could not parse $for="${expression}" - expected "item in items"`);
       el.remove();
       return null;
     }
-    if (!conditional && el.hasAttribute("data-bind-if")) {
+    if (kind === "for" && el.hasAttribute("data-bind-if")) {
       warn(`$for and $if on the same element are not supported (${rawExpression}). Wrap one in an element.`);
     }
-    const keyExpr = conditional ? null : el.getAttribute("data-bind-key");
+    const keyExpr = kind === "for" ? el.getAttribute("data-bind-key") : null;
     el.removeAttribute(`data-bind-${kind}`);
-    el.removeAttribute("data-bind-key");
+    if (kind === "for")
+      el.removeAttribute("data-bind-key");
     let anchor;
     if (existingAnchor) {
       anchor = existingAnchor;
@@ -1772,7 +1847,7 @@ class Mounter {
       const compiled = this.bindings.compileExpression(keyExpr, params);
       return compiled(context.owner.state, context.owner.props, this.cellsProxy(), this.bindings.pendingProbe(), ...locals);
     } : null;
-    const block = new ForBlock(context.owner, anchor, templates, parsed.alias, context.params, context.locals, keyFor, this, conditional, parsed.items);
+    const block = new ForBlock(context.owner, anchor, templates, parsed.alias, context.params, context.locals, keyFor, this, conditional, parsed.items, kind === "tag");
     context.holder.addBlock(block);
     context.holder.addBinding(this.bindings.createForBinding(block, parsed.items, context.params));
     return block;
@@ -1860,9 +1935,10 @@ class Mounter {
     if (this.ssg) {
       fragment.insertBefore(document.createComment(ROW_MARK), fragment.firstChild);
     }
-    row.nodes = Array.from(fragment.childNodes);
     this.bindings.updateRow(block.owner, row);
     row.instances.forEach((child) => this.bindings.updateTree(child));
+    await Promise.all(row.blocks.map((nested) => nested.settled()));
+    row.nodes = Array.from(fragment.childNodes);
     return row;
   }
   connected() {
@@ -2268,7 +2344,7 @@ function isBlockAnchor(node) {
   if (node.nodeType !== 8)
     return false;
   const data = node.data.trim();
-  return data.startsWith("for:") || data.startsWith("if:");
+  return data.startsWith("for:") || data.startsWith("if:") || data.startsWith("tag:");
 }
 function isInsignificant(node) {
   return node.nodeType === 3 && !(node.textContent ?? "").trim();

package/dist/ssg.js

@@ -1059,6 +1059,30 @@ class Row {
     this.locals[this.locals.length - 1] = value;
   }
 }
+var TAG_NAME = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
+var REFUSED_TAGS = new Set([
+  "script",
+  "style",
+  "template",
+  "slot",
+  "iframe",
+  "object",
+  "embed"
+]);
+function retag(source, name) {
+  const doc = source.ownerDocument;
+  const el = source.namespaceURI ? doc.createElementNS(source.namespaceURI, name) : doc.createElement(name);
+  for (const attr of Array.from(source.attributes)) {
+    if (attr.namespaceURI)
+      el.setAttributeNS(attr.namespaceURI, attr.name, attr.value);
+    else
+      el.setAttribute(attr.name, attr.value);
+  }
+  for (const child of Array.from(source.childNodes)) {
+    el.appendChild(child.cloneNode(true));
+  }
+  return el;
+}
 function toIterable(value) {
   if (value == null)
     return [];
@@ -1100,12 +1124,13 @@ class ForBlock {
   renderer;
   conditional;
   itemsExpr;
+  tagged;
   rows = new Map;
   order = [];
   pendingItems = null;
   running = false;
   warnedDuplicates = false;
-  constructor(owner, anchor, templates, alias, params, parentLocals, keyFor, renderer, conditional = false, itemsExpr = "") {
+  constructor(owner, anchor, templates, alias, params, parentLocals, keyFor, renderer, conditional = false, itemsExpr = "", tagged = false) {
     this.owner = owner;
     this.anchor = anchor;
     this.templates = templates;
@@ -1116,22 +1141,55 @@ class ForBlock {
     this.renderer = renderer;
     this.conditional = conditional;
     this.itemsExpr = itemsExpr;
+    this.tagged = tagged;
   }
+  retagged = new Map;
+  warnedTag = false;
   toItems(value) {
     if (this.conditional) {
       return Number.isInteger(value) && value >= 0 ? [value] : [];
     }
+    if (this.tagged)
+      return [this.tagFor(value)];
     return toIterable(value);
   }
   templateFor(item) {
+    if (this.tagged) {
+      const source = this.templates[0];
+      if (item === source.localName)
+        return source;
+      let made = this.retagged.get(item);
+      if (!made) {
+        made = retag(source, item);
+        this.retagged.set(item, made);
+      }
+      return made;
+    }
     return this.conditional ? this.templates[item] : this.templates[0];
   }
+  tagFor(value) {
+    const written = this.templates[0].localName;
+    if (value == null || value === "")
+      return written;
+    const name = typeof value === "string" ? value.trim().toLowerCase() : null;
+    if (name && TAG_NAME.test(name) && !REFUSED_TAGS.has(name))
+      return name;
+    if (!this.warnedTag) {
+      this.warnedTag = true;
+      warn(`$tag="${this.itemsExpr}" gave ${JSON.stringify(value)}, which is not an element it can make - rendering <${written}>.`);
+    }
+    return written;
+  }
   schedule(items) {
     this.pendingItems = items;
     if (this.running)
       return;
     this.running = true;
-    this.drain();
+    this.draining = this.drain();
+  }
+  draining = null;
+  settled() {
+    return this.draining ?? Promise.resolve();
   }
   async drain() {
     try {
@@ -1489,6 +1547,15 @@ class Mounter {
         this.createBlock(el, context, "if");
         return;
       }
+      if (el.hasAttribute("data-bind-tag")) {
+        if (el.tagName === "TEMPLATE") {
+          warn("$tag on a <template> means nothing - it renders its contents, not itself.", el);
+          el.removeAttribute("data-bind-tag");
+        } else {
+          this.createBlock(el, context, "tag");
+          return;
+        }
+      }
       if (el.hasAttribute("data-bind-else") || el.hasAttribute("data-bind-else-if")) {
         warn("$else / $else-if must directly follow a $if or $else-if sibling", el);
         el.remove();
@@ -1634,6 +1701,13 @@ class Mounter {
           i += consumed.templates - 1;
           continue;
         }
+        if (el.hasAttribute("data-bind-tag") && el.tagName !== "TEMPLATE") {
+          const consumed = this.adoptBlock(el, found, d, context, "tag");
+          if (!consumed)
+            return false;
+          d += consumed.dom;
+          continue;
+        }
         if (el.tagName === "SLOT") {
           if (!found[d] || !isSlotStart(found[d])) {
             if (!this.adoptNodes(Array.from(el.childNodes), found.slice(d), context, markers)) {
@@ -1769,18 +1843,19 @@ class Mounter {
     const rawExpression = el.getAttribute(`data-bind-${kind}`) ?? "";
     const branches = conditional ? this.gatherBranches(el) : [];
     const expression = conditional ? composeBranchExpression(branches) : rawExpression;
-    const parsed = conditional ? { alias: null, items: expression } : parseForExpression(rawExpression);
+    const parsed = conditional || kind === "tag" ? { alias: null, items: expression } : parseForExpression(rawExpression);
     if (!parsed) {
       warn(`Could not parse $for="${expression}" - expected "item in items"`);
       el.remove();
       return null;
     }
-    if (!conditional && el.hasAttribute("data-bind-if")) {
+    if (kind === "for" && el.hasAttribute("data-bind-if")) {
       warn(`$for and $if on the same element are not supported (${rawExpression}). Wrap one in an element.`);
     }
-    const keyExpr = conditional ? null : el.getAttribute("data-bind-key");
+    const keyExpr = kind === "for" ? el.getAttribute("data-bind-key") : null;
     el.removeAttribute(`data-bind-${kind}`);
-    el.removeAttribute("data-bind-key");
+    if (kind === "for")
+      el.removeAttribute("data-bind-key");
     let anchor;
     if (existingAnchor) {
       anchor = existingAnchor;
@@ -1795,7 +1870,7 @@ class Mounter {
       const compiled = this.bindings.compileExpression(keyExpr, params);
       return compiled(context.owner.state, context.owner.props, this.cellsProxy(), this.bindings.pendingProbe(), ...locals);
     } : null;
-    const block = new ForBlock(context.owner, anchor, templates, parsed.alias, context.params, context.locals, keyFor, this, conditional, parsed.items);
+    const block = new ForBlock(context.owner, anchor, templates, parsed.alias, context.params, context.locals, keyFor, this, conditional, parsed.items, kind === "tag");
     context.holder.addBlock(block);
     context.holder.addBinding(this.bindings.createForBinding(block, parsed.items, context.params));
     return block;
@@ -1883,9 +1958,10 @@ class Mounter {
     if (this.ssg) {
       fragment.insertBefore(document.createComment(ROW_MARK), fragment.firstChild);
     }
-    row.nodes = Array.from(fragment.childNodes);
     this.bindings.updateRow(block.owner, row);
     row.instances.forEach((child) => this.bindings.updateTree(child));
+    await Promise.all(row.blocks.map((nested) => nested.settled()));
+    row.nodes = Array.from(fragment.childNodes);
     return row;
   }
   connected() {
@@ -2291,7 +2367,7 @@ function isBlockAnchor(node) {
   if (node.nodeType !== 8)
     return false;
   const data = node.data.trim();
-  return data.startsWith("for:") || data.startsWith("if:");
+  return data.startsWith("for:") || data.startsWith("if:") || data.startsWith("tag:");
 }
 function isInsignificant(node) {
   return node.nodeType === 3 && !(node.textContent ?? "").trim();

package/dist/types/src/runtime/dom/ForBlock.d.ts

@@ -73,6 +73,8 @@ export declare class ForBlock {
     conditional: boolean;
     /** The collection expression, kept so adoption can re-evaluate it. */
     itemsExpr: string;
+    /** `$tag`: one row, of the element the expression names (ADR-063). */
+    tagged: boolean;
     rows: Map<string, Row>;
     order: string[];
     private pendingItems;
@@ -93,7 +95,12 @@ export declare class ForBlock {
     /** `$if`: zero or one row, driven by a condition rather than a list. */
     conditional?: boolean, 
     /** The collection expression, kept so adoption can re-evaluate it. */
-    itemsExpr?: string);
+    itemsExpr?: string, 
+    /** `$tag`: one row, of the element the expression names (ADR-063). */
+    tagged?: boolean);
+    /** `$tag`'s copies of the template under other names, made once each. */
+    private retagged;
+    private warnedTag;
     /**
      * Turn a bound expression into the rows it implies.
      *
@@ -103,6 +110,8 @@ export declare class ForBlock {
     toItems(value: any): any[];
     /** The markup a row should clone. */
     templateFor(item: any): Element;
+    /** The element `$tag` evaluated to, or the one as written. */
+    private tagFor;
     /**
      * Queue a reconcile.
      *
@@ -111,6 +120,14 @@ export declare class ForBlock {
      * matters, so it replaces any queued one and the loop runs until settled.
      */
     schedule(items: any[]): void;
+    private draining;
+    /**
+     * Resolves once every queued reconcile has run.
+     *
+     * A row built inside another block's new row waits for this before that row
+     * counts its nodes, or the rows placed meanwhile are left out of it.
+     */
+    settled(): Promise<void>;
     private drain;
     /** Public so adoption can match rendered rows to the current data. */
     keysFor(items: any[]): string[];

package/dist/types/test/tag.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/vite.js

@@ -490,6 +490,30 @@ class Row {
     this.locals[this.locals.length - 1] = value;
   }
 }
+var TAG_NAME = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
+var REFUSED_TAGS = new Set([
+  "script",
+  "style",
+  "template",
+  "slot",
+  "iframe",
+  "object",
+  "embed"
+]);
+function retag(source, name) {
+  const doc = source.ownerDocument;
+  const el = source.namespaceURI ? doc.createElementNS(source.namespaceURI, name) : doc.createElement(name);
+  for (const attr of Array.from(source.attributes)) {
+    if (attr.namespaceURI)
+      el.setAttributeNS(attr.namespaceURI, attr.name, attr.value);
+    else
+      el.setAttribute(attr.name, attr.value);
+  }
+  for (const child of Array.from(source.childNodes)) {
+    el.appendChild(child.cloneNode(true));
+  }
+  return el;
+}
 function toIterable(value) {
   if (value == null)
     return [];
@@ -531,12 +555,13 @@ class ForBlock {
   renderer;
   conditional;
   itemsExpr;
+  tagged;
   rows = new Map;
   order = [];
   pendingItems = null;
   running = false;
   warnedDuplicates = false;
-  constructor(owner, anchor, templates, alias, params, parentLocals, keyFor, renderer, conditional = false, itemsExpr = "") {
+  constructor(owner, anchor, templates, alias, params, parentLocals, keyFor, renderer, conditional = false, itemsExpr = "", tagged = false) {
     this.owner = owner;
     this.anchor = anchor;
     this.templates = templates;
@@ -547,22 +572,55 @@ class ForBlock {
     this.renderer = renderer;
     this.conditional = conditional;
     this.itemsExpr = itemsExpr;
+    this.tagged = tagged;
   }
+  retagged = new Map;
+  warnedTag = false;
   toItems(value) {
     if (this.conditional) {
       return Number.isInteger(value) && value >= 0 ? [value] : [];
     }
+    if (this.tagged)
+      return [this.tagFor(value)];
     return toIterable(value);
   }
   templateFor(item) {
+    if (this.tagged) {
+      const source = this.templates[0];
+      if (item === source.localName)
+        return source;
+      let made = this.retagged.get(item);
+      if (!made) {
+        made = retag(source, item);
+        this.retagged.set(item, made);
+      }
+      return made;
+    }
     return this.conditional ? this.templates[item] : this.templates[0];
   }
+  tagFor(value) {
+    const written = this.templates[0].localName;
+    if (value == null || value === "")
+      return written;
+    const name = typeof value === "string" ? value.trim().toLowerCase() : null;
+    if (name && TAG_NAME.test(name) && !REFUSED_TAGS.has(name))
+      return name;
+    if (!this.warnedTag) {
+      this.warnedTag = true;
+      warn(`$tag="${this.itemsExpr}" gave ${JSON.stringify(value)}, which is not an element it can make - rendering <${written}>.`);
+    }
+    return written;
+  }
   schedule(items) {
     this.pendingItems = items;
     if (this.running)
       return;
     this.running = true;
-    this.drain();
+    this.draining = this.drain();
+  }
+  draining = null;
+  settled() {
+    return this.draining ?? Promise.resolve();
   }
   async drain() {
     try {
@@ -920,6 +978,15 @@ class Mounter {
         this.createBlock(el, context, "if");
         return;
       }
+      if (el.hasAttribute("data-bind-tag")) {
+        if (el.tagName === "TEMPLATE") {
+          warn("$tag on a <template> means nothing - it renders its contents, not itself.", el);
+          el.removeAttribute("data-bind-tag");
+        } else {
+          this.createBlock(el, context, "tag");
+          return;
+        }
+      }
       if (el.hasAttribute("data-bind-else") || el.hasAttribute("data-bind-else-if")) {
         warn("$else / $else-if must directly follow a $if or $else-if sibling", el);
         el.remove();
@@ -1065,6 +1132,13 @@ class Mounter {
           i += consumed.templates - 1;
           continue;
         }
+        if (el.hasAttribute("data-bind-tag") && el.tagName !== "TEMPLATE") {
+          const consumed = this.adoptBlock(el, found, d, context, "tag");
+          if (!consumed)
+            return false;
+          d += consumed.dom;
+          continue;
+        }
         if (el.tagName === "SLOT") {
           if (!found[d] || !isSlotStart(found[d])) {
             if (!this.adoptNodes(Array.from(el.childNodes), found.slice(d), context, markers)) {
@@ -1200,18 +1274,19 @@ class Mounter {
     const rawExpression = el.getAttribute(`data-bind-${kind}`) ?? "";
     const branches = conditional ? this.gatherBranches(el) : [];
     const expression = conditional ? composeBranchExpression(branches) : rawExpression;
-    const parsed = conditional ? { alias: null, items: expression } : parseForExpression(rawExpression);
+    const parsed = conditional || kind === "tag" ? { alias: null, items: expression } : parseForExpression(rawExpression);
     if (!parsed) {
       warn(`Could not parse $for="${expression}" - expected "item in items"`);
       el.remove();
       return null;
     }
-    if (!conditional && el.hasAttribute("data-bind-if")) {
+    if (kind === "for" && el.hasAttribute("data-bind-if")) {
       warn(`$for and $if on the same element are not supported (${rawExpression}). Wrap one in an element.`);
     }
-    const keyExpr = conditional ? null : el.getAttribute("data-bind-key");
+    const keyExpr = kind === "for" ? el.getAttribute("data-bind-key") : null;
     el.removeAttribute(`data-bind-${kind}`);
-    el.removeAttribute("data-bind-key");
+    if (kind === "for")
+      el.removeAttribute("data-bind-key");
     let anchor;
     if (existingAnchor) {
       anchor = existingAnchor;
@@ -1226,7 +1301,7 @@ class Mounter {
       const compiled = this.bindings.compileExpression(keyExpr, params);
       return compiled(context.owner.state, context.owner.props, this.cellsProxy(), this.bindings.pendingProbe(), ...locals);
     } : null;
-    const block = new ForBlock(context.owner, anchor, templates, parsed.alias, context.params, context.locals, keyFor, this, conditional, parsed.items);
+    const block = new ForBlock(context.owner, anchor, templates, parsed.alias, context.params, context.locals, keyFor, this, conditional, parsed.items, kind === "tag");
     context.holder.addBlock(block);
     context.holder.addBinding(this.bindings.createForBinding(block, parsed.items, context.params));
     return block;
@@ -1314,9 +1389,10 @@ class Mounter {
     if (this.ssg) {
       fragment.insertBefore(document.createComment(ROW_MARK), fragment.firstChild);
     }
-    row.nodes = Array.from(fragment.childNodes);
     this.bindings.updateRow(block.owner, row);
     row.instances.forEach((child) => this.bindings.updateTree(child));
+    await Promise.all(row.blocks.map((nested) => nested.settled()));
+    row.nodes = Array.from(fragment.childNodes);
     return row;
   }
   connected() {
@@ -1722,7 +1798,7 @@ function isBlockAnchor(node) {
   if (node.nodeType !== 8)
     return false;
   const data = node.data.trim();
-  return data.startsWith("for:") || data.startsWith("if:");
+  return data.startsWith("for:") || data.startsWith("if:") || data.startsWith("tag:");
 }
 function isInsignificant(node) {
   return node.nodeType === 3 && !(node.textContent ?? "").trim();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed-js/core",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "Lightspeed: a compile-first framework for islands of reactivity in static HTML.",
   "keywords": [
     "lightspeed",