@lightspeed-js/core 0.4.5 → 0.4.7

package/dist/compile.js

@@ -1019,7 +1019,7 @@ class BindingEvaluator {
         binding.el.innerHTML = value == null ? "" : String(value);
         break;
       case "attr": {
-        const attr = binding.attr;
+        const attr = svgAttributeName(binding.el, binding.attr);
         const aria = attr.startsWith("aria-");
         if (BOOLEAN_ATTRIBUTES.has(attr) && !aria) {
           if (value)
@@ -1132,7 +1132,95 @@ function isPlain(value) {
   const proto = Object.getPrototypeOf(value);
   return proto === Object.prototype || proto === null;
 }
+var SVG_NS = "http://www.w3.org/2000/svg";
+var SVG_ATTRIBUTES = new Map([
+  "attributeName",
+  "attributeType",
+  "baseFrequency",
+  "baseProfile",
+  "calcMode",
+  "clipPathUnits",
+  "diffuseConstant",
+  "edgeMode",
+  "filterUnits",
+  "glyphRef",
+  "gradientTransform",
+  "gradientUnits",
+  "kernelMatrix",
+  "kernelUnitLength",
+  "keyPoints",
+  "keySplines",
+  "keyTimes",
+  "lengthAdjust",
+  "limitingConeAngle",
+  "markerHeight",
+  "markerUnits",
+  "markerWidth",
+  "maskContentUnits",
+  "maskUnits",
+  "numOctaves",
+  "pathLength",
+  "patternContentUnits",
+  "patternTransform",
+  "patternUnits",
+  "pointsAtX",
+  "pointsAtY",
+  "pointsAtZ",
+  "preserveAlpha",
+  "preserveAspectRatio",
+  "primitiveUnits",
+  "refX",
+  "refY",
+  "repeatCount",
+  "repeatDur",
+  "requiredExtensions",
+  "requiredFeatures",
+  "specularConstant",
+  "specularExponent",
+  "spreadMethod",
+  "startOffset",
+  "stdDeviation",
+  "stitchTiles",
+  "surfaceScale",
+  "systemLanguage",
+  "tableValues",
+  "targetX",
+  "targetY",
+  "textLength",
+  "viewBox",
+  "viewTarget",
+  "xChannelSelector",
+  "yChannelSelector",
+  "zoomAndPan"
+].map((name) => [name.toLowerCase(), name]));
+function svgAttributeName(el, attr) {
+  return el.namespaceURI === SVG_NS ? SVG_ATTRIBUTES.get(attr) ?? attr : attr;
+}
 // 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 +1262,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 +1279,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

@@ -591,7 +591,7 @@ class BindingEvaluator {
         binding.el.innerHTML = value == null ? "" : String(value);
         break;
       case "attr": {
-        const attr = binding.attr;
+        const attr = svgAttributeName(binding.el, binding.attr);
         const aria = attr.startsWith("aria-");
         if (BOOLEAN_ATTRIBUTES.has(attr) && !aria) {
           if (value)
@@ -704,6 +704,70 @@ function isPlain(value) {
   const proto = Object.getPrototypeOf(value);
   return proto === Object.prototype || proto === null;
 }
+var SVG_NS = "http://www.w3.org/2000/svg";
+var SVG_ATTRIBUTES = new Map([
+  "attributeName",
+  "attributeType",
+  "baseFrequency",
+  "baseProfile",
+  "calcMode",
+  "clipPathUnits",
+  "diffuseConstant",
+  "edgeMode",
+  "filterUnits",
+  "glyphRef",
+  "gradientTransform",
+  "gradientUnits",
+  "kernelMatrix",
+  "kernelUnitLength",
+  "keyPoints",
+  "keySplines",
+  "keyTimes",
+  "lengthAdjust",
+  "limitingConeAngle",
+  "markerHeight",
+  "markerUnits",
+  "markerWidth",
+  "maskContentUnits",
+  "maskUnits",
+  "numOctaves",
+  "pathLength",
+  "patternContentUnits",
+  "patternTransform",
+  "patternUnits",
+  "pointsAtX",
+  "pointsAtY",
+  "pointsAtZ",
+  "preserveAlpha",
+  "preserveAspectRatio",
+  "primitiveUnits",
+  "refX",
+  "refY",
+  "repeatCount",
+  "repeatDur",
+  "requiredExtensions",
+  "requiredFeatures",
+  "specularConstant",
+  "specularExponent",
+  "spreadMethod",
+  "startOffset",
+  "stdDeviation",
+  "stitchTiles",
+  "surfaceScale",
+  "systemLanguage",
+  "tableValues",
+  "targetX",
+  "targetY",
+  "textLength",
+  "viewBox",
+  "viewTarget",
+  "xChannelSelector",
+  "yChannelSelector",
+  "zoomAndPan"
+].map((name) => [name.toLowerCase(), name]));
+function svgAttributeName(el, attr) {
+  return el.namespaceURI === SVG_NS ? SVG_ATTRIBUTES.get(attr) ?? attr : attr;
+}
 // src/runtime/events/EventBinder.ts
 class EventBinder {
   bind(el, eventType, handlerName, owner, cleanupTarget = owner) {
@@ -1040,6 +1104,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 +1169,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 +1186,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 +1588,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,12 +1742,22 @@ 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)) {
+            const fallback = significant(Array.from(el.childNodes));
+            const countable = fallback.every((n) => n.nodeType === 3 || n.nodeType === 1 && !isBlockTemplate(n) && n.tagName !== "SLOT");
+            const share = countable ? found.slice(d, d + fallback.length) : found.slice(d);
+            if (!this.adoptNodes(fallback, share, context, markers)) {
               return false;
             }
-            d = found.length;
+            d += share.length;
             continue;
           }
           const name = found[d].data.slice(SLOT_MARK.length);
@@ -1746,18 +1887,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 +1914,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 +2002,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 +2411,10 @@ 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 isBlockTemplate(el) {
+  return el.hasAttribute("data-bind-for") || el.hasAttribute("data-bind-if") || el.hasAttribute("data-bind-tag");
 }
 function isInsignificant(node) {
   return node.nodeType === 3 && !(node.textContent ?? "").trim();

package/dist/ssg.js

@@ -610,7 +610,7 @@ class BindingEvaluator {
         binding.el.innerHTML = value == null ? "" : String(value);
         break;
       case "attr": {
-        const attr = binding.attr;
+        const attr = svgAttributeName(binding.el, binding.attr);
         const aria = attr.startsWith("aria-");
         if (BOOLEAN_ATTRIBUTES.has(attr) && !aria) {
           if (value)
@@ -723,6 +723,70 @@ function isPlain(value) {
   const proto = Object.getPrototypeOf(value);
   return proto === Object.prototype || proto === null;
 }
+var SVG_NS = "http://www.w3.org/2000/svg";
+var SVG_ATTRIBUTES = new Map([
+  "attributeName",
+  "attributeType",
+  "baseFrequency",
+  "baseProfile",
+  "calcMode",
+  "clipPathUnits",
+  "diffuseConstant",
+  "edgeMode",
+  "filterUnits",
+  "glyphRef",
+  "gradientTransform",
+  "gradientUnits",
+  "kernelMatrix",
+  "kernelUnitLength",
+  "keyPoints",
+  "keySplines",
+  "keyTimes",
+  "lengthAdjust",
+  "limitingConeAngle",
+  "markerHeight",
+  "markerUnits",
+  "markerWidth",
+  "maskContentUnits",
+  "maskUnits",
+  "numOctaves",
+  "pathLength",
+  "patternContentUnits",
+  "patternTransform",
+  "patternUnits",
+  "pointsAtX",
+  "pointsAtY",
+  "pointsAtZ",
+  "preserveAlpha",
+  "preserveAspectRatio",
+  "primitiveUnits",
+  "refX",
+  "refY",
+  "repeatCount",
+  "repeatDur",
+  "requiredExtensions",
+  "requiredFeatures",
+  "specularConstant",
+  "specularExponent",
+  "spreadMethod",
+  "startOffset",
+  "stdDeviation",
+  "stitchTiles",
+  "surfaceScale",
+  "systemLanguage",
+  "tableValues",
+  "targetX",
+  "targetY",
+  "textLength",
+  "viewBox",
+  "viewTarget",
+  "xChannelSelector",
+  "yChannelSelector",
+  "zoomAndPan"
+].map((name) => [name.toLowerCase(), name]));
+function svgAttributeName(el, attr) {
+  return el.namespaceURI === SVG_NS ? SVG_ATTRIBUTES.get(attr) ?? attr : attr;
+}
 // src/runtime/events/EventBinder.ts
 class EventBinder {
   bind(el, eventType, handlerName, owner, cleanupTarget = owner) {
@@ -1059,6 +1123,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 +1188,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 +1205,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 +1611,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,12 +1765,22 @@ 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)) {
+            const fallback = significant(Array.from(el.childNodes));
+            const countable = fallback.every((n) => n.nodeType === 3 || n.nodeType === 1 && !isBlockTemplate(n) && n.tagName !== "SLOT");
+            const share = countable ? found.slice(d, d + fallback.length) : found.slice(d);
+            if (!this.adoptNodes(fallback, share, context, markers)) {
               return false;
             }
-            d = found.length;
+            d += share.length;
             continue;
           }
           const name = found[d].data.slice(SLOT_MARK.length);
@@ -1769,18 +1910,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 +1937,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 +2025,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 +2434,10 @@ 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 isBlockTemplate(el) {
+  return el.hasAttribute("data-bind-for") || el.hasAttribute("data-bind-if") || el.hasAttribute("data-bind-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/slot-fallback-adoption.test.d.ts

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

package/dist/types/test/svg-attribute-case.test.d.ts

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

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

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

package/dist/vite.js

@@ -349,7 +349,7 @@ class BindingEvaluator {
         binding.el.innerHTML = value == null ? "" : String(value);
         break;
       case "attr": {
-        const attr = binding.attr;
+        const attr = svgAttributeName(binding.el, binding.attr);
         const aria = attr.startsWith("aria-");
         if (BOOLEAN_ATTRIBUTES.has(attr) && !aria) {
           if (value)
@@ -462,6 +462,70 @@ function isPlain(value) {
   const proto = Object.getPrototypeOf(value);
   return proto === Object.prototype || proto === null;
 }
+var SVG_NS = "http://www.w3.org/2000/svg";
+var SVG_ATTRIBUTES = new Map([
+  "attributeName",
+  "attributeType",
+  "baseFrequency",
+  "baseProfile",
+  "calcMode",
+  "clipPathUnits",
+  "diffuseConstant",
+  "edgeMode",
+  "filterUnits",
+  "glyphRef",
+  "gradientTransform",
+  "gradientUnits",
+  "kernelMatrix",
+  "kernelUnitLength",
+  "keyPoints",
+  "keySplines",
+  "keyTimes",
+  "lengthAdjust",
+  "limitingConeAngle",
+  "markerHeight",
+  "markerUnits",
+  "markerWidth",
+  "maskContentUnits",
+  "maskUnits",
+  "numOctaves",
+  "pathLength",
+  "patternContentUnits",
+  "patternTransform",
+  "patternUnits",
+  "pointsAtX",
+  "pointsAtY",
+  "pointsAtZ",
+  "preserveAlpha",
+  "preserveAspectRatio",
+  "primitiveUnits",
+  "refX",
+  "refY",
+  "repeatCount",
+  "repeatDur",
+  "requiredExtensions",
+  "requiredFeatures",
+  "specularConstant",
+  "specularExponent",
+  "spreadMethod",
+  "startOffset",
+  "stdDeviation",
+  "stitchTiles",
+  "surfaceScale",
+  "systemLanguage",
+  "tableValues",
+  "targetX",
+  "targetY",
+  "textLength",
+  "viewBox",
+  "viewTarget",
+  "xChannelSelector",
+  "yChannelSelector",
+  "zoomAndPan"
+].map((name) => [name.toLowerCase(), name]));
+function svgAttributeName(el, attr) {
+  return el.namespaceURI === SVG_NS ? SVG_ATTRIBUTES.get(attr) ?? attr : attr;
+}
 // src/runtime/dom/ForBlock.ts
 class Row {
   locals;
@@ -490,6 +554,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 +619,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 +636,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 +1042,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,12 +1196,22 @@ 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)) {
+            const fallback = significant(Array.from(el.childNodes));
+            const countable = fallback.every((n) => n.nodeType === 3 || n.nodeType === 1 && !isBlockTemplate(n) && n.tagName !== "SLOT");
+            const share = countable ? found.slice(d, d + fallback.length) : found.slice(d);
+            if (!this.adoptNodes(fallback, share, context, markers)) {
               return false;
             }
-            d = found.length;
+            d += share.length;
             continue;
           }
           const name = found[d].data.slice(SLOT_MARK.length);
@@ -1200,18 +1341,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 +1368,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 +1456,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 +1865,10 @@ 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 isBlockTemplate(el) {
+  return el.hasAttribute("data-bind-for") || el.hasAttribute("data-bind-if") || el.hasAttribute("data-bind-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.7",
   "description": "Lightspeed: a compile-first framework for islands of reactivity in static HTML.",
   "keywords": [
     "lightspeed",