kerfjs 5.0.0-beta.90 → 5.0.0-beta.92

package/dist/{chunk-T33U7SRR.js → chunk-E53LC47B.js}

@@ -1,6 +1,6 @@
 import { itemVersion } from './chunk-5WRGJZV6.js';
-import { parseRowTemplate, rowContractError, parseSingleRow, collectTemplateChildren } from './chunk-WKIPLNVO.js';
-import { captureRowBindings, listSafeHtml, boundTextNodeOf, syncFormProp, newBindingContext, wireBindings, disposeRowBindings, isSafeHtml, _setBindingContext, TEXT_MARKER_PREFIX, ROW_TEXT_PREFIX, wireRowBindings, carryOrRewireRowBindings, granularListSafeHtml } from './chunk-UGNPDLNI.js';
+import { seedRenderedAttrs, RENDERED_ATTRS, isUserAgentOwnedAttr, hasCustomTag, parseRowTemplate, rowContractError, parseSingleRow, collectTemplateChildren } from './chunk-6LXUC4ZY.js';
+import { captureRowBindings, listSafeHtml, boundTextNodeOf, syncFormProp, newBindingContext, wireBindings, disposeRowBindings, isSafeHtml, _setBindingContext, TEXT_MARKER_PREFIX, ROW_TEXT_PREFIX, wireRowBindings, carryOrRewireRowBindings, granularListSafeHtml } from './chunk-VUAZFDLB.js';
 import { effect } from './chunk-IHMDBBUJ.js';
 import { LIST_MARKER_PREFIX, flattenWithoutListItems, collectLists, isOverlayHost, flatten } from './chunk-4TX6YJDM.js';
 import { devHooks } from './chunk-3C6F6NM4.js';
@@ -299,14 +299,6 @@ function restoreFocus(snap) {
   }
 }
 
-// src/utils/isUserAgentOwnedAttr.ts
-function isUserAgentOwnedAttr(tagNameUpper, name) {
-  if (tagNameUpper.includes("-")) {
-    return name === "open" || name === "role" || name.startsWith("aria-");
-  }
-  return name === "open" && (tagNameUpper === "DETAILS" || tagNameUpper === "DIALOG");
-}
-
 // src/utils/moveNode.ts
 function moveNode(parent, node, ref) {
   const move = parent.moveBefore;
@@ -459,6 +451,9 @@ function morphChildren(fromParent, toParent, ownedItems) {
       morphNode(matched, toChild, ownedItems);
     } else {
       const cloned = toChild.cloneNode(true);
+      if (toChild.nodeType === ELEMENT_NODE) {
+        seedRenderedAttrs(toChild, cloned);
+      }
       fromParent.insertBefore(cloned, fromChild);
     }
     toChild = toNext;
@@ -490,6 +485,7 @@ function morphNode(fromNode, toNode, ownedItems) {
 function morphElement(fromEl, toEl, ownedItems) {
   if (fromEl.tagName !== toEl.tagName) {
     const replacement = toEl.cloneNode(true);
+    seedRenderedAttrs(toEl, replacement);
     fromEl.parentNode?.replaceChild(replacement, fromEl);
     return;
   }
@@ -509,6 +505,9 @@ function morphElement(fromEl, toEl, ownedItems) {
   }
 }
 function morphAttributes(fromEl, toEl) {
+  const fromTag = fromEl.tagName;
+  const host = fromEl;
+  const rendered = host[RENDERED_ATTRS];
   const toAttrs = toEl.attributes;
   for (let i = 0; i < toAttrs.length; i++) {
     const attr = toAttrs[i];
@@ -525,18 +524,18 @@ function morphAttributes(fromEl, toEl) {
     }
   }
   const fromAttrs = fromEl.attributes;
-  const fromTag = fromEl.tagName;
   for (let i = fromAttrs.length - 1; i >= 0; i--) {
     const attr = fromAttrs[i];
     const ns = attr.namespaceURI;
     const name = attr.localName;
     if (ns !== null) {
       if (!toEl.hasAttributeNS(ns, name)) fromEl.removeAttributeNS(ns, name);
-    } else if (!toEl.hasAttribute(name) && !isUserAgentOwnedAttr(fromTag, name)) {
+    } else if (!toEl.hasAttribute(name) && !isUserAgentOwnedAttr(fromTag, name) && (!rendered || rendered.includes(name))) {
       fromEl.removeAttribute(name);
       syncFormProp(fromEl, name, "", false);
     }
   }
+  if (fromTag.includes("-")) host[RENDERED_ATTRS] = toEl.getAttributeNames();
 }
 function isTextInputOrTextarea(el) {
   if (el.tagName === "TEXTAREA") return true;
@@ -614,6 +613,7 @@ function tryAttributeOnlyFastPath(liveNode, oldHtml, newHtml) {
     liveNode.removeAttribute(name);
     syncFormProp(liveNode, name, "", false);
   }
+  delete liveNode[RENDERED_ATTRS];
   return true;
 }
 function tryTextContentFastPath(liveNode, oldHtml, newHtml) {
@@ -1207,6 +1207,7 @@ function anyRebuiltListIsGranular(segment, rebuilt) {
 }
 function bindListsFromMarkers(rootEl, segment, bindings, inlinedItems, rebuiltLists) {
   const lists = collectLists(segment);
+  if (lists.size === 0 && bindings.size === 0) return;
   const found = [];
   collectComments(rootEl, found);
   for (const marker of found) {
@@ -1301,6 +1302,259 @@ function collectComments(node, out) {
   }
 }
 
+// src/static-subtree-morph.ts
+var START = 0;
+var OPEN_END = 1;
+var CLOSE = 2;
+var END = 3;
+var PARENT = 4;
+var INDEX = 5;
+var COUNT = 6;
+var FIRST = 7;
+var NEXT = 8;
+var FLAG = 9;
+var LAST = 10;
+var W = 11;
+var VOID = 1;
+var RAW = 2;
+var REFUSE = 4;
+var BOX = 8;
+var SENSITIVE = 16;
+var FOREIGN = 32;
+var FLAGS = /* @__PURE__ */ new Map();
+for (const [tags, bit] of [
+  [
+    "area base basefont bgsound br col embed frame hr img input keygen link meta param source track wbr",
+    VOID
+  ],
+  ["script style textarea title xmp iframe noembed noframes", RAW],
+  ["html head body frameset image noscript plaintext", REFUSE],
+  ["table tbody thead tfoot tr colgroup", BOX],
+  [
+    "p li dd dt a button nobr select option optgroup datalist ruby rb rt rtc rp svg math template h1 h2 h3 h4 h5 h6 b big code em font i s small strike strong tt u",
+    SENSITIVE
+  ],
+  ["svg math", FOREIGN]
+]) {
+  for (const t of tags.split(" ")) FLAGS.set(t, (FLAGS.get(t) ?? 0) | bit);
+}
+var TABLE_PARENT = {
+  tr: " tbody thead tfoot ",
+  td: " tr ",
+  th: " tr ",
+  tbody: " table ",
+  thead: " table ",
+  tfoot: " table ",
+  caption: " table ",
+  colgroup: " table ",
+  col: " colgroup "
+};
+var isSpace = (c) => c === 32 || c === 9 || c === 10 || c === 12 || c === 13;
+function scanStatic(html, rootTag) {
+  const len = html.length;
+  const tag = [rootTag];
+  const r = [-1, 0, len, len, -1, 0, 0, -1, -1, FLAGS.get(rootTag) ?? 0, -1];
+  const stack = [0];
+  let textFrom = 0;
+  let dq = -1;
+  let sq = -1;
+  const blankUntil = (to) => {
+    for (let k = textFrom; k < to; k++)
+      if (!isSpace(html.charCodeAt(k))) return false;
+    return true;
+  };
+  for (let i = 0; (i = html.indexOf("<", i)) !== -1; ) {
+    const top = stack[stack.length - 1];
+    const topFlag = r[top * W + FLAG];
+    const c = html.charCodeAt(i + 1);
+    if (c !== 33 && c !== 47 && !((c | 32) >= 97 && (c | 32) <= 122)) {
+      i++;
+      continue;
+    }
+    if (topFlag & BOX && !blankUntil(i)) return null;
+    if (c === 33) {
+      const e2 = html.indexOf("-->", i + 4);
+      if (!html.startsWith("!--", i + 1) || e2 < 0) return null;
+      const body = html.slice(i + 4, e2);
+      if (body[0] === ">" || body.startsWith("->") || body.includes("--!>"))
+        return null;
+      i = textFrom = e2 + 3;
+      continue;
+    }
+    if (c === 47) {
+      const gt = html.indexOf(">", i);
+      if (top === 0 || gt < 0) return null;
+      const t = tag[top];
+      let j2 = i + 2 + t.length;
+      if (!html.startsWith(t, i + 2)) {
+        j2 = i + 2;
+        while (j2 < gt && !isSpace(html.charCodeAt(j2))) j2++;
+        if (html.slice(i + 2, j2).toLowerCase() !== t) return null;
+      } else if (j2 !== gt && !isSpace(html.charCodeAt(j2))) return null;
+      stack.pop();
+      r[top * W + CLOSE] = i;
+      i = textFrom = r[top * W + END] = gt + 1;
+      continue;
+    }
+    let j = i + 1;
+    let ch;
+    while (j < len && !isSpace(ch = html.charCodeAt(j)) && ch !== 47 && ch !== 62)
+      j++;
+    const name = html.slice(i + 1, j).toLowerCase();
+    const flag = FLAGS.get(name) ?? 0;
+    for (; ; ) {
+      const gt = html.indexOf(">", j);
+      if (gt < 0) return null;
+      if (dq < j) dq = html.indexOf('"', j) >>> 0;
+      if (sq < j) sq = html.indexOf("'", j) >>> 0;
+      const qpos = dq < sq ? dq : sq;
+      if (qpos > gt) {
+        j = gt;
+        break;
+      }
+      let k = qpos - 1;
+      while (isSpace(html.charCodeAt(k))) k--;
+      const close = html.indexOf(html[qpos], qpos + 1);
+      if (html.charCodeAt(k) !== 61 || close < 0) return null;
+      j = close + 1;
+    }
+    const want = TABLE_PARENT[name];
+    if (flag & REFUSE || (want !== void 0 ? !want.includes(` ${tag[top]} `) : topFlag & BOX))
+      return null;
+    const e = tag.length;
+    const p = top * W;
+    const last = r[p + LAST];
+    if (last < 0) r[p + FIRST] = e;
+    else r[last * W + NEXT] = e;
+    r[p + LAST] = e;
+    tag.push(name);
+    r.push(i, j + 1, j + 1, j + 1, top, r[p + COUNT]++, 0, -1, -1, flag, -1);
+    i = textFrom = j + 1;
+    if (flag & (FOREIGN | RAW)) {
+      const re = new RegExp(`<(/?)${name}[\\s/>]`, "gi");
+      re.lastIndex = i;
+      let depth = flag & FOREIGN && html[j - 1] === "/" ? 0 : 1;
+      while (depth > 0) {
+        const m = re.exec(html);
+        if (m === null) return null;
+        const gt = html.indexOf(">", m.index);
+        if (m[1] === "/") depth--;
+        else if (flag & FOREIGN && html[gt - 1] !== "/") depth++;
+        r[e * W + CLOSE] = m.index;
+        i = textFrom = r[e * W + END] = gt + 1;
+      }
+    } else if (!(flag & VOID)) {
+      stack.push(e);
+    }
+  }
+  return stack.length > 1 || r[FLAG] & BOX && !blankUntil(len) ? null : { tag, r };
+}
+function commonRun(a, b, max, fromEnd) {
+  const at = (s, from, to) => fromEnd ? s.slice(s.length - to, s.length - from) : s.slice(from, to);
+  let n = 0;
+  for (let step = 1024; n < max; ) {
+    const to = Math.min(n + step, max);
+    if (at(a, n, to) === at(b, n, to)) {
+      n = to;
+      step *= 2;
+    } else if (step > 16) step >>= 2;
+    else break;
+  }
+  while (n < max && at(a, n, n + 1) === at(b, n, n + 1)) n++;
+  return n;
+}
+function overlapping(s, host, p, to) {
+  const out = [];
+  for (let c = s.r[host * W + FIRST]; c >= 0; c = s.r[c * W + NEXT])
+    if (s.r[c * W + END] > p && s.r[c * W + START] < to) out.push(c);
+  return out;
+}
+function morphStaticChange(rootEl, prev, next, cache, ownedItems) {
+  const rootTag = rootEl.localName;
+  const sa = cache.html === prev ? cache.scan : scanStatic(prev, rootTag);
+  const sb = scanStatic(next, rootTag);
+  cache.html = next;
+  cache.scan = sb;
+  if (sa === null || sb === null) return false;
+  const a = sa.r;
+  const b = sb.r;
+  const delta = next.length - prev.length;
+  const p = commonRun(prev, next, Math.min(prev.length, next.length), false);
+  const q = commonRun(prev, next, Math.min(prev.length, next.length) - p, true);
+  const aEnd = prev.length - q;
+  let host = 0;
+  for (let lo = 1, hi = sa.tag.length - 1; lo <= hi; ) {
+    const mid = lo + hi >> 1;
+    if (a[mid * W + START] < p) {
+      host = mid;
+      lo = mid + 1;
+    } else hi = mid - 1;
+  }
+  while (!(a[host * W + OPEN_END] <= p && a[host * W + CLOSE] >= aEnd))
+    host = a[host * W + PARENT];
+  for (let x = host; x > 0; x = a[x * W + PARENT])
+    if (a[x * W + FLAG] & SENSITIVE) host = a[x * W + PARENT];
+  let olds;
+  let news;
+  for (; ; host = a[host * W + PARENT]) {
+    if (host < 0) return false;
+    if (b[host * W + CLOSE] - delta !== a[host * W + CLOSE]) continue;
+    olds = overlapping(sa, host, p, aEnd);
+    news = overlapping(sb, host, p, next.length - q);
+    const k = olds.length;
+    let ok = k > 0 && k === news.length && a[olds[0] * W + START] <= p && b[news[0] * W + START] <= p && a[olds[k - 1] * W + END] >= aEnd && b[news[k - 1] * W + END] - delta === a[olds[k - 1] * W + END];
+    for (let m = 0; ok && m < k; m++) {
+      ok = sa.tag[olds[m]] === sb.tag[news[m]] && (m === 0 || prev.slice(a[olds[m - 1] * W + END], a[olds[m] * W + START]) === next.slice(b[news[m - 1] * W + END], b[news[m] * W + START]));
+    }
+    if (ok) break;
+  }
+  if (rootEl.childElementCount !== a[COUNT]) return false;
+  const path = [];
+  for (let x = host; x > 0; x = a[x * W + PARENT]) path.push(x);
+  let live = rootEl;
+  for (let m = path.length - 1; m >= 0; m--) {
+    const x = path[m];
+    const el = live.children[a[x * W + INDEX]];
+    if (el.localName !== sa.tag[x] || el.childElementCount !== a[x * W + COUNT] || el.dataset.morphSkip !== void 0 || el.dataset.morphSkipChildren !== void 0 || el === document.activeElement)
+      return false;
+    live = el;
+  }
+  const lives = [];
+  let html = "";
+  for (let m = 0; m < olds.length; m++) {
+    const o = olds[m] * W;
+    const n = news[m] * W;
+    const nextChild = next.slice(b[n + START], b[n + END]);
+    if (prev.slice(a[o + START], a[o + END]) === nextChild) continue;
+    const el = live.children[a[o + INDEX]];
+    if (el.localName !== sa.tag[olds[m]]) return false;
+    lives.push(el);
+    html += nextChild;
+  }
+  const tpl = live.cloneNode(false);
+  tpl.innerHTML = html;
+  const tos = tpl.childNodes;
+  if (tos.length !== lives.length) return false;
+  for (let m = 0; m < lives.length; m++) {
+    const from = lives[m];
+    const to = tos[m];
+    if (to.localName !== from.localName || keyOf(from) !== keyOf(to) || keyOf(from) === "" && protectionOf(from) !== protectionOf(to))
+      return false;
+  }
+  const focusSnap = captureFocus(live);
+  for (let m = 0; m < lives.length; m++)
+    _morphElement(lives[m], tos[m], ownedItems);
+  if (focusSnap !== null) restoreFocus(focusSnap);
+  return true;
+}
+function keyOf(el) {
+  return el.id !== "" ? `#${el.id}` : el.dataset.key !== void 0 ? `k${el.dataset.key}` : "";
+}
+function protectionOf(el) {
+  const d = el.dataset;
+  return `${d.morphSkip !== void 0}${d.morphSkipChildren !== void 0}${d.morphPreserve !== void 0}`;
+}
+
 // src/mount.ts
 var MOUNTED_MARKER = /* @__PURE__ */ Symbol.for("kerfjs.mounted");
 var NESTED_MOUNT_MSG = "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.";
@@ -1369,6 +1623,7 @@ function mount(rootEl, render) {
   let prevWiredBindings = [];
   let isFirst = true;
   let prevStaticHtml = "";
+  const scanCache = { html: "", scan: null };
   const valueOnlyWarnCtx = { warned: false };
   const runRenderPass = () => {
     renderCtx.counter = 0;
@@ -1411,7 +1666,8 @@ function mount(rootEl, render) {
         bindings,
         renderCtx,
         prevStaticHtml,
-        valueOnlyWarnCtx
+        valueOnlyWarnCtx,
+        scanCache
       );
       if (anyRebuiltListIsGranular(segment, renderCtx.rebuiltLists)) {
         for (const id of renderCtx.rebuiltLists)
@@ -1424,7 +1680,8 @@ function mount(rootEl, render) {
           bindings,
           renderCtx,
           prevStaticHtml,
-          valueOnlyWarnCtx
+          valueOnlyWarnCtx,
+          scanCache
         );
       }
       if (nextStaticHtml !== prevStaticHtml) {
@@ -1484,10 +1741,20 @@ function mount(rootEl, render) {
   };
 }
 function runFirstRender(rootEl, segment, bindings) {
-  rootEl.innerHTML = flatten(segment, true);
+  const html = flatten(segment, true);
+  if (hasCustomTag(html)) {
+    const tpl = rootEl.cloneNode(false);
+    tpl.innerHTML = html;
+    const content = document.createDocumentFragment();
+    while (tpl.firstChild !== null) content.appendChild(tpl.firstChild);
+    seedRenderedAttrs(content);
+    rootEl.replaceChildren(content);
+  } else {
+    rootEl.innerHTML = html;
+  }
   bindListsFromMarkers(rootEl, segment, bindings, true);
 }
-function runSubsequentRender(rootEl, segment, bindings, renderCtx, prevStaticHtml, valueOnlyWarnCtx) {
+function runSubsequentRender(rootEl, segment, bindings, renderCtx, prevStaticHtml, valueOnlyWarnCtx, scanCache) {
   renderCtx.rebuiltLists.clear();
   const currentStaticHtml = flattenWithoutListItems(segment);
   if (currentStaticHtml === prevStaticHtml) {
@@ -1499,9 +1766,18 @@ function runSubsequentRender(rootEl, segment, bindings, renderCtx, prevStaticHtm
     valueOnlyWarnCtx
   );
   cleanupOrphanBindings(segment, bindings, renderCtx);
-  const template = rootEl.cloneNode(false);
-  template.innerHTML = currentStaticHtml;
-  morph(rootEl, template, collectOwnedItems(bindings));
+  const ownedItems = collectOwnedItems(bindings);
+  if (!(segment.kind === "static" && bindings.size === 0 && morphStaticChange(
+    rootEl,
+    prevStaticHtml,
+    currentStaticHtml,
+    scanCache,
+    ownedItems
+  ))) {
+    const template = rootEl.cloneNode(false);
+    template.innerHTML = currentStaticHtml;
+    morph(rootEl, template, ownedItems);
+  }
   bindListsFromMarkers(
     rootEl,
     segment,
@@ -1521,4 +1797,4 @@ function resultToSegment(result) {
 
 export { captureFocus, each, morph, mount, moveNode, restoreFocus };
 
-//# sourceMappingURL=chunk-T33U7SRR.js.map
+//# sourceMappingURL=chunk-E53LC47B.js.map