kerfjs 0.6.0 → 0.7.0

package/dist/index.js

@@ -1,8 +1,8 @@
-import { isSafeHtml, listSafeHtml, flattenWithoutListItems, collectLists, flatten, granularListSafeHtml } from './chunk-LADH5GVQ.js';
-export { Fragment, SafeHtml, isSafeHtml, raw } from './chunk-LADH5GVQ.js';
-export { defineStore, resetAllStores } from './chunk-GQGJFCWL.js';
-import { effect } from './chunk-FN2ID4QO.js';
-export { batch, computed, effect, signal } from './chunk-FN2ID4QO.js';
+import { isSafeHtml, listSafeHtml, flattenWithoutListItems, collectLists, flatten, granularListSafeHtml } from './chunk-4VT4YZOO.js';
+export { Fragment, SafeHtml, isSafeHtml, raw } from './chunk-4VT4YZOO.js';
+export { defineStore, resetAllStores } from './chunk-Z7ZHXD2R.js';
+import { effect } from './chunk-UU2YJEJY.js';
+export { batch, computed, effect, signal } from './chunk-UU2YJEJY.js';
 
 // src/delegate.ts
 var NON_BUBBLING = /* @__PURE__ */ new Set([
@@ -63,41 +63,41 @@ var context = null;
 function _setRenderContext(c) {
   context = c;
 }
-function each(items, render, key) {
+function each(items, render, cacheKey) {
   if (isArraySignal(items) && context !== null) {
-    return eachGranular(items, render, key);
+    return eachGranular(items, render, cacheKey);
   }
   const snapshotItems = isArraySignal(items) ? items.value : items;
-  return eachSnapshot(snapshotItems, render, key);
+  return eachSnapshot(snapshotItems, render, cacheKey);
 }
-function eachSnapshot(items, render, key) {
+function eachSnapshot(items, render, cacheKey) {
   let id;
   if (context !== null) {
     id = String(context.counter++);
   } else {
     id = "orphan";
   }
-  return eachSnapshotById(items, render, key, id);
+  return eachSnapshotById(items, render, cacheKey, id);
 }
-function eachGranular(sig, render, key) {
+function eachGranular(sig, render, cacheKey) {
   const ctx = context;
   const id = String(ctx.counter++);
   const previousBindingCount = ctx.bindingCounts.get(id);
   const patches = sig._consumePatches();
   const snapshot = sig.value;
   if (previousBindingCount === void 0 || patches.length === 0) {
-    return eachSnapshotById(snapshot, render, key, id);
+    return eachSnapshotById(snapshot, render, cacheKey, id);
   }
   let netDelta = 0;
   for (const p of patches) {
     if (p.type === "insert") netDelta += 1;
     else if (p.type === "remove") netDelta -= 1;
     else if (p.type === "replace") {
-      return eachSnapshotById(snapshot, render, key, id);
+      return eachSnapshotById(snapshot, render, cacheKey, id);
     }
   }
   if (previousBindingCount + netDelta !== snapshot.length) {
-    return eachSnapshotById(snapshot, render, key, id);
+    return eachSnapshotById(snapshot, render, cacheKey, id);
   }
   const renderFnInternal = (item, index) => {
     const out = render(item, index);
@@ -120,11 +120,11 @@ function eachGranular(sig, render, key) {
     }
   } catch {
     ctx.bindingCounts.delete(id);
-    return eachSnapshotById(snapshot, render, key, id);
+    return eachSnapshotById(snapshot, render, cacheKey, id);
   }
   return granularListSafeHtml(id, [], internalPatches);
 }
-function eachSnapshotById(items, render, key, id) {
+function eachSnapshotById(items, render, cacheKey, id) {
   let cache = null;
   if (context !== null) {
     let c = context.caches.get(id);
@@ -149,15 +149,15 @@ function eachSnapshotById(items, render, key, id) {
       );
     }
     seen.add(item);
-    const k = key ? key(item, i) : void 0;
+    const k = cacheKey ? cacheKey(item, i) : void 0;
     let html;
     const cached = cache !== null ? cache.get(item) : void 0;
-    if (cached !== void 0 && cached.key === k) {
+    if (cached !== void 0 && cached.cacheKey === k) {
       html = cached.html;
     } else {
       const out = render(item, i);
       html = isSafeHtml(out) ? out.toString() : out;
-      if (cache !== null) cache.set(item, { key: k, html });
+      if (cache !== null) cache.set(item, { cacheKey: k, html });
     }
     segItems[i] = { ref: item, cacheKey: k, html };
   }
@@ -184,6 +184,9 @@ function morph(liveRoot, template, ownedItems = EMPTY_OWNED) {
   const templateEl = isElementNode(template) ? template : parseTemplate(liveRoot, template);
   morphChildren(liveRoot, templateEl, ownedItems);
 }
+function _morphElement(fromEl, toEl, ownedItems = EMPTY_OWNED) {
+  morphElement(fromEl, toEl, ownedItems);
+}
 function isElementNode(t) {
   return typeof t === "object" && t !== null && t.nodeType === ELEMENT_NODE;
 }
@@ -324,6 +327,73 @@ function preserveTextEntryState(fromEl, toEl) {
   }
 }
 
+// src/dev-listener-warn.ts
+var LISTENER_MARKER = /* @__PURE__ */ Symbol.for("kerfjs.devListener");
+var patched = false;
+var warned = false;
+function isOptedIn() {
+  const proc = globalThis.process;
+  if (proc?.env?.NODE_ENV === "production") return false;
+  return proc?.env?.KERF_DEV_WARN_REBUILT_LISTENERS === "1";
+}
+function findAddEventListenerProto() {
+  const probe = document.createElement("div");
+  let proto = Object.getPrototypeOf(probe);
+  while (!Object.prototype.hasOwnProperty.call(proto, "addEventListener")) {
+    proto = Object.getPrototypeOf(proto);
+  }
+  return proto;
+}
+function patchAddEventListenerOnce() {
+  if (patched) return;
+  patched = true;
+  const proto = findAddEventListenerProto();
+  const orig = proto.addEventListener;
+  proto.addEventListener = function(type, listener, options) {
+    if (this instanceof Element) {
+      this[LISTENER_MARKER] = true;
+    }
+    return orig.call(this, type, listener, options);
+  };
+}
+function hasMarkedListener(el) {
+  if (el[LISTENER_MARKER] === true) return true;
+  const stack = [];
+  for (let i = 0; i < el.children.length; i++) stack.push(el.children[i]);
+  while (stack.length > 0) {
+    const cur = stack.pop();
+    if (cur[LISTENER_MARKER] === true) return true;
+    for (let i = 0; i < cur.children.length; i++) stack.push(cur.children[i]);
+  }
+  return false;
+}
+function emitWarning() {
+  if (warned) return;
+  warned = true;
+  console.warn(
+    "kerf: a node inside a mount()-managed tree was removed/rebuilt while carrying an imperative addEventListener listener. The listener is gone with the old node. Use `delegate(rootEl, 'click', '[data-action=\"...\"]', handler)` so the listener lives on a stable ancestor and survives re-renders, or wrap the host in `data-morph-skip` if the subtree is library-owned (Monaco, xterm, D3 charts). Set KERF_DEV_WARN_REBUILT_LISTENERS=0 (or unset it) to silence this warning."
+  );
+}
+function installListenerRebuildWarn(rootEl) {
+  if (!isOptedIn()) return null;
+  patchAddEventListenerOnce();
+  const observer = new MutationObserver((mutations) => {
+    if (warned) return;
+    for (const m of mutations) {
+      for (let i = 0; i < m.removedNodes.length; i++) {
+        const removed = m.removedNodes[i];
+        if (!(removed instanceof Element)) continue;
+        if (hasMarkedListener(removed)) {
+          emitWarning();
+          return;
+        }
+      }
+    }
+  });
+  observer.observe(rootEl, { childList: true, subtree: true });
+  return observer;
+}
+
 // src/list-binding.ts
 function endAnchor(binding) {
   if (binding.items.length > 0) {
@@ -332,6 +402,184 @@ function endAnchor(binding) {
   return binding.marker.nextElementSibling;
 }
 
+// src/list-reconcile-fast-paths.ts
+var LT = 60;
+var GT = 62;
+var DQUOTE = 34;
+var SQUOTE = 39;
+var AMP = 38;
+var EQ = 61;
+var SLASH = 47;
+var TEXT_NODE2 = 3;
+var ELEMENT_NODE2 = 1;
+function isWhitespace(cc) {
+  return cc === 32 || cc === 9 || cc === 10 || cc === 13;
+}
+function tryAttributeOnlyFastPath(liveNode, oldHtml, newHtml) {
+  const oldGt = oldHtml.indexOf(">");
+  const newGt = newHtml.indexOf(">");
+  if (oldGt === -1 || newGt === -1) return false;
+  if (oldHtml.length - oldGt !== newHtml.length - newGt) return false;
+  if (oldHtml.slice(oldGt) !== newHtml.slice(newGt)) return false;
+  if (containsDataMorphSkip(oldHtml) || containsDataMorphSkip(newHtml)) return false;
+  const oldTag = parseOpeningTag(oldHtml, oldGt);
+  const newTag = parseOpeningTag(newHtml, newGt);
+  if (oldTag === null || newTag === null) return false;
+  if (oldTag.tagName !== newTag.tagName) return false;
+  for (const name of oldTag.attrs.keys()) {
+    if (name.indexOf(":") !== -1) return false;
+  }
+  for (const name of newTag.attrs.keys()) {
+    if (name.indexOf(":") !== -1) return false;
+  }
+  const liveTagUpper = liveNode.tagName;
+  for (const [name, rawValue] of newTag.attrs) {
+    const oldValue = oldTag.attrs.get(name);
+    if (oldValue === rawValue) continue;
+    liveNode.setAttribute(name, unescapeAttrValue(rawValue));
+  }
+  for (const name of oldTag.attrs.keys()) {
+    if (newTag.attrs.has(name)) continue;
+    if (isUserAgentOwnedAttr2(liveTagUpper, name)) continue;
+    liveNode.removeAttribute(name);
+  }
+  return true;
+}
+function tryTextContentFastPath(liveNode, oldHtml, newHtml) {
+  if (containsDataMorphSkip(oldHtml) || containsDataMorphSkip(newHtml)) return false;
+  let p = 0;
+  const minLen = Math.min(oldHtml.length, newHtml.length);
+  while (p < minLen && oldHtml.charCodeAt(p) === newHtml.charCodeAt(p)) p++;
+  let s = 0;
+  const maxS = minLen - p;
+  while (s < maxS && oldHtml.charCodeAt(oldHtml.length - 1 - s) === newHtml.charCodeAt(newHtml.length - 1 - s)) {
+    s++;
+  }
+  const oldWinEnd = oldHtml.length - s;
+  const newWinEnd = newHtml.length - s;
+  if (!isPureTextWindow(oldHtml, p, oldWinEnd)) return false;
+  if (!isPureTextWindow(newHtml, p, newWinEnd)) return false;
+  if (p === 0) return false;
+  const boundaryCc = oldHtml.charCodeAt(p - 1);
+  if (boundaryCc === LT || boundaryCc === DQUOTE || boundaryCc === SQUOTE || boundaryCc === EQ || boundaryCc === AMP) return false;
+  const textStart = lastIndexOfChar(oldHtml, GT, p - 1);
+  if (textStart === -1) return false;
+  const textEnd = oldHtml.indexOf("<", p);
+  if (textEnd === -1) return false;
+  if (textEnd < oldWinEnd) return false;
+  const newTextEnd = textEnd + (newHtml.length - oldHtml.length);
+  const oldText = oldHtml.slice(textStart + 1, textEnd);
+  const newText = newHtml.slice(textStart + 1, newTextEnd);
+  const textIdx = countTextNodesBefore(oldHtml, textStart + 1);
+  const targetNode = nthTextNodeDescendant(liveNode, textIdx);
+  if (targetNode === null) return false;
+  if (targetNode.nodeValue !== oldText) return false;
+  targetNode.nodeValue = newText;
+  return true;
+}
+function containsDataMorphSkip(html) {
+  return html.indexOf("data-morph-skip") !== -1;
+}
+function isPureTextWindow(html, start, end) {
+  for (let i = start; i < end; i++) {
+    const cc = html.charCodeAt(i);
+    if (cc === LT || cc === GT || cc === DQUOTE || cc === SQUOTE || cc === AMP || cc === EQ) return false;
+  }
+  return true;
+}
+function lastIndexOfChar(html, target, beforeInclusive) {
+  for (let i = beforeInclusive; i >= 0; i--) {
+    if (html.charCodeAt(i) === target) return i;
+  }
+  return -1;
+}
+function countTextNodesBefore(html, beforePos) {
+  let count = 0;
+  let i = 0;
+  while (i < beforePos) {
+    if (html.charCodeAt(i) === LT) {
+      while (i < beforePos && html.charCodeAt(i) !== GT) i++;
+      i++;
+    } else {
+      const start = i;
+      while (i < beforePos && html.charCodeAt(i) !== LT) i++;
+      if (i > start) count++;
+    }
+  }
+  return count;
+}
+function nthTextNodeDescendant(root, n) {
+  let count = 0;
+  let result = null;
+  function walk(node) {
+    for (let c = node.firstChild; c !== null; c = c.nextSibling) {
+      if (result !== null) return;
+      if (c.nodeType === TEXT_NODE2) {
+        if (count === n) {
+          result = c;
+          return;
+        }
+        count++;
+      } else if (c.nodeType === ELEMENT_NODE2) {
+        walk(c);
+      }
+    }
+  }
+  walk(root);
+  return result;
+}
+function parseOpeningTag(html, gtPos) {
+  if (html.charCodeAt(0) !== LT) return null;
+  let i = 1;
+  let end = gtPos;
+  if (i < end && html.charCodeAt(end - 1) === SLASH) end -= 1;
+  const nameStart = i;
+  while (i < end) {
+    const cc = html.charCodeAt(i);
+    if (isWhitespace(cc)) break;
+    i++;
+  }
+  const tagName = html.slice(nameStart, i);
+  if (tagName.length === 0) return null;
+  const attrs = /* @__PURE__ */ new Map();
+  while (i < end) {
+    while (i < end && isWhitespace(html.charCodeAt(i))) i++;
+    if (i >= end) break;
+    const aNameStart = i;
+    while (i < end) {
+      const cc = html.charCodeAt(i);
+      if (cc === EQ || isWhitespace(cc)) break;
+      i++;
+    }
+    const aName = html.slice(aNameStart, i);
+    if (aName.length === 0) return null;
+    while (i < end && isWhitespace(html.charCodeAt(i))) i++;
+    if (i < end && html.charCodeAt(i) === EQ) {
+      i++;
+      while (i < end && isWhitespace(html.charCodeAt(i))) i++;
+      if (i >= end) return null;
+      const q = html.charCodeAt(i);
+      if (q !== DQUOTE && q !== SQUOTE) return null;
+      i++;
+      const vStart = i;
+      while (i < end && html.charCodeAt(i) !== q) i++;
+      if (i >= end) return null;
+      attrs.set(aName, html.slice(vStart, i));
+      i++;
+    } else {
+      attrs.set(aName, "");
+    }
+  }
+  return { tagName, attrs };
+}
+function unescapeAttrValue(s) {
+  if (s.indexOf("&") === -1) return s;
+  return s.replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
+}
+function isUserAgentOwnedAttr2(tagNameUpper, name) {
+  return name === "open" && (tagNameUpper === "DETAILS" || tagNameUpper === "DIALOG");
+}
+
 // src/list-reconcile-focus.ts
 function captureFocus(liveParent) {
   const active = document.activeElement;
@@ -378,6 +626,19 @@ function rowContractError(index, html) {
     `each(): row render at index ${index} ${reason}. Each item's render must return exactly one element \u2014 wrap multiple roots in a single parent (e.g. <li>...</li>). Got HTML: ${JSON.stringify(truncateRowHtml(html))}`
   );
 }
+function isDevMode() {
+  const proc = globalThis.process;
+  return proc?.env?.NODE_ENV !== "production";
+}
+function maybeWarnMissingRowKey(rowEl, rowIndex, rowHtml, binding) {
+  if (!isDevMode()) return;
+  if (binding.warnedMissingKey === true) return;
+  binding.warnedMissingKey = true;
+  if (rowEl.id !== "" || rowEl.hasAttribute("data-key")) return;
+  console.warn(
+    `kerf each(): row at index ${rowIndex} has no \`id\` or \`data-key\` attribute. Without one, rows match positionally \u2014 an insert/remove at the head shifts every row's identity, so focused inputs jump to the wrong row, mid-edit textareas swap content with their neighbor, and any per-row state silently follows the wrong item. Add \`data-key={item.id}\` (or set \`id\`) to the top-level element returned by the row render. Row HTML: ${JSON.stringify(truncateRowHtml(rowHtml))}`
+  );
+}
 
 // src/list-reconcile-granular.ts
 function reconcileGranular(binding, patches) {
@@ -439,6 +700,9 @@ function reconcileGranular(binding, patches) {
     }
   }
   if (focusSnap !== null) restoreFocus(focusSnap);
+  if (items.length > 0) {
+    maybeWarnMissingRowKey(items[0].node, 0, items[0].html, binding);
+  }
 }
 function applySingleInsert(liveParent, items, patch, tailAnchor) {
   const { html } = patch;
@@ -456,35 +720,53 @@ function applySingleUpdate(liveParent, items, patch) {
   const { html } = patch;
   const oldEntry = items[patch.index];
   if (html === oldEntry.html) return;
+  if (tryAttributeOnlyFastPath(oldEntry.node, oldEntry.html, html) || tryTextContentFastPath(oldEntry.node, oldEntry.html, html)) {
+    items[patch.index] = { ref: patch.item, cacheKey: void 0, html, node: oldEntry.node };
+    return;
+  }
   const newNode = parseSingleRow(html);
-  liveParent.replaceChild(newNode, oldEntry.node);
-  items[patch.index] = { ref: patch.item, cacheKey: void 0, html, node: newNode };
+  if (oldEntry.node.tagName === newNode.tagName) {
+    _morphElement(oldEntry.node, newNode);
+    items[patch.index] = { ref: patch.item, cacheKey: void 0, html, node: oldEntry.node };
+  } else {
+    liveParent.replaceChild(newNode, oldEntry.node);
+    items[patch.index] = { ref: patch.item, cacheKey: void 0, html, node: newNode };
+  }
 }
 function applyBulkUpdate(liveParent, items, patches, start, end) {
-  const changes = [];
+  const morphChanges = [];
   for (let k = start; k < end; k++) {
     const p = patches[k];
-    if (p.html !== items[p.index].html) {
-      changes.push({ patchIdx: k, html: p.html });
+    const oldEntry = items[p.index];
+    if (p.html === oldEntry.html) continue;
+    if (tryAttributeOnlyFastPath(oldEntry.node, oldEntry.html, p.html) || tryTextContentFastPath(oldEntry.node, oldEntry.html, p.html)) {
+      items[p.index] = { ref: p.item, cacheKey: void 0, html: p.html, node: oldEntry.node };
+      continue;
     }
+    morphChanges.push({ patchIdx: k, html: p.html });
   }
-  if (changes.length === 0) return;
-  const { tpl, count } = parseRowTemplate(changes.map((c) => c.html).join(""));
-  if (count !== changes.length) {
-    throw findOffendingChange(patches, changes);
+  if (morphChanges.length === 0) return;
+  const { tpl, count } = parseRowTemplate(morphChanges.map((c) => c.html).join(""));
+  if (count !== morphChanges.length) {
+    throw findOffendingChange(patches, morphChanges);
   }
-  const newNodes = new Array(changes.length);
+  const newNodes = new Array(morphChanges.length);
   let child = tpl.content.firstElementChild;
   for (let k = 0; k < newNodes.length; k++) {
     newNodes[k] = child;
     child = child.nextElementSibling;
   }
-  for (let k = 0; k < changes.length; k++) {
-    const c = changes[k];
+  for (let k = 0; k < morphChanges.length; k++) {
+    const c = morphChanges[k];
     const p = patches[c.patchIdx];
     const oldEntry = items[p.index];
-    liveParent.replaceChild(newNodes[k], oldEntry.node);
-    items[p.index] = { ref: p.item, cacheKey: void 0, html: c.html, node: newNodes[k] };
+    if (oldEntry.node.tagName === newNodes[k].tagName) {
+      _morphElement(oldEntry.node, newNodes[k]);
+      items[p.index] = { ref: p.item, cacheKey: void 0, html: c.html, node: oldEntry.node };
+    } else {
+      liveParent.replaceChild(newNodes[k], oldEntry.node);
+      items[p.index] = { ref: p.item, cacheKey: void 0, html: c.html, node: newNodes[k] };
+    }
   }
 }
 function applyBulkInsert(liveParent, items, patches, start, end, tailAnchor) {
@@ -553,6 +835,9 @@ function reconcileSnapshot(binding, listSeg) {
   const { newRecord, prevIdx, replacedNodes, freshIndices, freshHtmls } = classifyItems(binding.items, listSeg);
   if (replacedNodes.length === 0 && freshIndices.length === 0 && isInOrder(prevIdx)) {
     binding.items = newRecord;
+    if (newRecord.length > 0) {
+      maybeWarnMissingRowKey(newRecord[0].node, 0, newRecord[0].html, binding);
+    }
     return;
   }
   const tailAnchor = endAnchor(binding);
@@ -562,6 +847,9 @@ function reconcileSnapshot(binding, listSeg) {
   applyMoves(liveParent, newRecord, prevIdx, lis(prevIdx), tailAnchor);
   if (focusSnap !== null) restoreFocus(focusSnap);
   binding.items = newRecord;
+  if (newRecord.length > 0) {
+    maybeWarnMissingRowKey(newRecord[0].node, 0, newRecord[0].html, binding);
+  }
 }
 function classifyItems(oldItems, listSeg) {
   const oldByRef = /* @__PURE__ */ new Map();
@@ -681,12 +969,43 @@ function reconcileList(binding, listSeg) {
 
 // src/mount.ts
 var LIST_MARKER_PREFIX = "kf-list:";
+var MOUNTED_MARKER = /* @__PURE__ */ Symbol.for("kerfjs.mounted");
+function assertNotInsideMountedTree(rootEl) {
+  if (rootEl[MOUNTED_MARKER] === true) {
+    throw new Error(
+      "mount: rootEl is already inside (or contains) a mounted tree. kerf supports one mount per tree \u2014 compose with plain functions that return JSX instead of nesting mounts."
+    );
+  }
+  let ancestor = rootEl.parentElement;
+  while (ancestor !== null) {
+    if (ancestor[MOUNTED_MARKER] === true) {
+      throw new Error(
+        "mount: rootEl is already inside (or contains) a mounted tree. kerf supports one mount per tree \u2014 compose with plain functions that return JSX instead of nesting mounts."
+      );
+    }
+    ancestor = ancestor.parentElement;
+  }
+  const stack = [];
+  for (let i = 0; i < rootEl.children.length; i++) stack.push(rootEl.children[i]);
+  while (stack.length > 0) {
+    const cur = stack.pop();
+    if (cur[MOUNTED_MARKER] === true) {
+      throw new Error(
+        "mount: rootEl is already inside (or contains) a mounted tree. kerf supports one mount per tree \u2014 compose with plain functions that return JSX instead of nesting mounts."
+      );
+    }
+    for (let i = 0; i < cur.children.length; i++) stack.push(cur.children[i]);
+  }
+}
 function mount(rootEl, render) {
   if (rootEl == null) {
     throw new Error(
       'mount: rootEl is null/undefined \u2014 pass the live element, e.g. mount(document.getElementById("app")!, render). A common cause is a typo in the id or selector that returns null at runtime even though the TypeScript types say HTMLElement.'
     );
   }
+  assertNotInsideMountedTree(rootEl);
+  rootEl[MOUNTED_MARKER] = true;
+  const listenerWarnObserver = installListenerRebuildWarn(rootEl);
   const bindings = /* @__PURE__ */ new Map();
   const renderCtx = {
     counter: 0,
@@ -695,7 +1014,7 @@ function mount(rootEl, render) {
   };
   let isFirst = true;
   let prevStaticHtml = "";
-  return effect(() => {
+  const disposeEffect = effect(() => {
     renderCtx.counter = 0;
     _setRenderContext(renderCtx);
     let result;
@@ -718,6 +1037,11 @@ function mount(rootEl, render) {
       renderCtx.bindingCounts.set(listSeg.id, binding.items.length);
     }
   });
+  return () => {
+    disposeEffect();
+    listenerWarnObserver?.disconnect();
+    delete rootEl[MOUNTED_MARKER];
+  };
 }
 function runFirstRender(rootEl, segment, bindings) {
   rootEl.innerHTML = flatten(segment, true);
@@ -764,7 +1088,11 @@ function bindListsFromMarkers(rootEl, segment, bindings, inlinedItems) {
         next = next.nextElementSibling;
       }
     }
-    bindings.set(id, { liveParent, items, marker });
+    const binding = { liveParent, items, marker };
+    if (items.length > 0) {
+      maybeWarnMissingRowKey(items[0].node, 0, items[0].html, binding);
+    }
+    bindings.set(id, binding);
   }
 }
 function validateInlinedRowMatch(expectedHtml, index, boundEl) {