@barefootjs/client 0.27.0 → 0.28.1

package/dist/runtime/index.js

@@ -1,14 +1,14 @@
 // src/runtime/index.ts
 import {
-  createSignal as createSignal2,
-  createEffect as createEffect4,
+  createSignal as createSignal3,
+  createEffect as createEffect5,
   createDisposableEffect,
   createMemo,
   createSelector,
   createRoot as createRoot3,
   onCleanup,
   onMount,
-  untrack as untrack3,
+  untrack as untrack4,
   batch,
   setProfilerSink,
   beginTurn,
@@ -1142,9 +1142,7 @@ function upsertChild(parent, name, slotId, props, key, anchorScope) {
   const ph = parent.getAttribute(BF_PLACEHOLDER) === phId ? parent : parent.querySelector(`[${BF_PLACEHOLDER}="${phId}"]`);
   if (ph) {
     const slot = slotId ? buildSlotInfo(parent, slotId, anchorScope) : undefined;
-    const comp = createComponent(name, props, key, slot);
-    ph.replaceWith(comp);
-    return comp;
+    return createComponent(name, props, key, slot, ph);
   }
   return null;
 }
@@ -1352,11 +1350,30 @@ var _parentScopeId = null;
 function setParentScopeId(id) {
   _parentScopeId = id;
 }
-function createComponent(nameOrDef, props = {}, key, slot) {
+var _rowMountPoint = null;
+function setRowMountPoint(p) {
+  const prev = _rowMountPoint;
+  _rowMountPoint = p;
+  return prev;
+}
+function takeRowMountPoint() {
+  const p = _rowMountPoint;
+  _rowMountPoint = null;
+  return p;
+}
+function createComponent(nameOrDef, props = {}, key, slot, mountAt) {
+  const element = materializeComponent(nameOrDef, props, key, slot, mountAt);
+  if (mountAt && mountAt.parentNode && element !== mountAt) {
+    mountAt.replaceWith(element);
+  }
+  return element;
+}
+function materializeComponent(nameOrDef, props = {}, key, slot, mountAt) {
   if (props == null)
     props = {};
+  const rowMount = mountAt ? null : takeRowMountPoint();
   if (typeof nameOrDef !== "string") {
-    return createComponentFromDef(nameOrDef, props, key);
+    return createComponentFromDef(nameOrDef, props, key, mountAt, rowMount);
   }
   const name = nameOrDef;
   const templateFn = getTemplate(name);
@@ -1416,8 +1433,13 @@ function createComponent(nameOrDef, props = {}, key, slot) {
   if (key !== undefined) {
     element.setAttribute(BF_KEY, String(key));
   }
-  const prevScope = setCurrentScope(element);
   const rootIsDeferredPlaceholder = element.hasAttribute(BF_PLACEHOLDER);
+  if (mountAt && !rootIsDeferredPlaceholder) {
+    mountAt.replaceWith(element);
+  } else if (rowMount && !rootIsDeferredPlaceholder) {
+    rowMount.container.insertBefore(element, rowMount.anchor);
+  }
+  const prevScope = setCurrentScope(element);
   let placeholderWrapper = null;
   if (rootIsDeferredPlaceholder) {
     placeholderWrapper = parseHTML("<div></div>").firstChild;
@@ -1558,7 +1580,7 @@ function insertGetterChildren(element, children) {
     element.appendChild(document.createTextNode(String(children)));
   }
 }
-function createComponentFromDef(def, props, key) {
+function createComponentFromDef(def, props, key, mountAt, rowMount) {
   if (!def.template) {
     throw new Error("[BarefootJS] createComponent with ComponentDef requires a template function");
   }
@@ -1577,6 +1599,11 @@ function createComponentFromDef(def, props, key) {
   if (key !== undefined) {
     element.setAttribute(BF_KEY, String(key));
   }
+  if (mountAt) {
+    mountAt.replaceWith(element);
+  } else if (rowMount) {
+    rowMount.container.insertBefore(element, rowMount.anchor);
+  }
   def.init(element, props);
   hydratedScopes.add(element);
   return element;
@@ -1757,9 +1784,7 @@ function upsertChildItem(primaryEl, name, slotId, props, key, anchorScope) {
   const ph = qsaItem(primaryEl, `[data-bf-ph="${phId}"]`);
   if (ph) {
     const slot = slotId ? buildSlotInfo(primaryEl, slotId, anchorScope) : undefined;
-    const comp = createComponent(name, props, key, slot);
-    ph.replaceWith(comp);
-    return comp;
+    return createComponent(name, props, key, slot, ph);
   }
   return null;
 }
@@ -1872,7 +1897,7 @@ function removeScope(scope) {
       ex.remove();
   }
 }
-function createItemScope(item, index, renderItem, existingPrimary, existingExtras, existingStart) {
+function createItemScope(item, index, renderItem, existingPrimary, existingExtras, existingStart, rowMount) {
   let primaryEl;
   let dispose;
   let setItem;
@@ -1882,7 +1907,14 @@ function createItemScope(item, index, renderItem, existingPrimary, existingExtra
     dispose = d;
     const [itemAccessor, itemSetter] = createSignal(item);
     setItem = itemSetter;
-    primaryEl = renderItem(itemAccessor, index, existingPrimary);
+    const ownsRowMount = !existingPrimary && !!rowMount;
+    const prevRowMount = ownsRowMount ? setRowMountPoint(rowMount) : null;
+    try {
+      primaryEl = renderItem(itemAccessor, index, existingPrimary);
+    } finally {
+      if (ownsRowMount)
+        setRowMountPoint(prevRowMount);
+    }
     if (existingPrimary) {
       extras = existingExtras ?? [];
       startMarker = existingStart ?? null;
@@ -1896,6 +1928,9 @@ function createItemScope(item, index, renderItem, existingPrimary, existingExtra
     }
     return;
   });
+  if (rowMount && !existingPrimary && extras.length > 0 && primaryEl.parentNode) {
+    primaryEl.remove();
+  }
   return { startMarker, primaryEl, extras, dispose, setItem };
 }
 function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
@@ -1937,7 +1972,7 @@ function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
         for (let i2 = existingRanges.length;i2 < items.length; i2++) {
           const item = items[i2];
           const key = getKey ? getKey(item, i2) : String(i2);
-          const scope = createItemScope(item, i2, renderItem);
+          const scope = createItemScope(item, i2, renderItem, undefined, undefined, undefined, { container, anchor });
           if (!scope.primaryEl.dataset.key)
             scope.primaryEl.setAttribute(BF_KEY, key);
           scopes.set(key, scope);
@@ -2016,7 +2051,7 @@ function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
         existing.setItem(item);
         desiredOrder.push(existing);
       } else {
-        const scope = createItemScope(item, i2, renderItem);
+        const scope = createItemScope(item, i2, renderItem, undefined, undefined, undefined, { container, anchor });
         if (!scope.primaryEl.dataset.key)
           scope.primaryEl.setAttribute(BF_KEY, key);
         scopes.set(key, scope);
@@ -2212,6 +2247,198 @@ function mapArrayAnchored(accessor, container, getKey, renderItem, markerId, bfI
     }
   }, bfId);
 }
+// src/runtime/map-array-lazy.ts
+import { createEffect as createEffect2, createSignal as createSignal2, untrack as untrack2 } from "@barefootjs/client/reactive";
+function mapArrayLazy(accessor, container, getKey, plan, markerId, bfId) {
+  if (!container)
+    return;
+  const entries = new Map;
+  let entryList = [];
+  let hydrated = false;
+  const needsResubscribe = plan.applyOuter !== undefined;
+  const [generation, bumpGeneration] = needsResubscribe ? createSignal2(0) : [null, null];
+  let stranded = false;
+  const markStranded = () => {
+    if (needsResubscribe)
+      stranded = true;
+  };
+  const flushStranded = () => {
+    if (stranded && bumpGeneration) {
+      stranded = false;
+      bumpGeneration((n) => n + 1);
+    }
+  };
+  let cachedStart = null;
+  let cachedEnd = null;
+  const resolveMarkers = () => {
+    if (cachedStart && cachedEnd && cachedStart.isConnected && cachedEnd.isConnected) {
+      return { start: cachedStart, end: cachedEnd };
+    }
+    const found = findLoopMarkers2(container, markerId);
+    cachedStart = found.start;
+    cachedEnd = found.end;
+    return found;
+  };
+  const createEntry = (item, index, key) => {
+    const entry = {
+      key,
+      primaryEl: undefined,
+      item,
+      refs: null,
+      last: null
+    };
+    entry.primaryEl = untrack2(() => plan.createRow(entry, index));
+    if (!entry.primaryEl.dataset.key)
+      entry.primaryEl.setAttribute(BF_KEY, key);
+    markStranded();
+    return entry;
+  };
+  createEffect2(() => {
+    const items = accessor();
+    if (!items)
+      return;
+    const { start: startMarker, end: endMarker } = resolveMarkers();
+    const anchor = endMarker ?? null;
+    if (!hydrated) {
+      hydrated = true;
+      const doms = [];
+      for (let node = startMarker ? startMarker.nextSibling : container.firstChild;node && node !== anchor; node = node.nextSibling) {
+        if (node.nodeType === Node.ELEMENT_NODE)
+          doms.push(node);
+      }
+      if (doms.length > 0 && entries.size === 0) {
+        const list = [];
+        const shared = Math.min(doms.length, items.length);
+        for (let i2 = 0;i2 < shared; i2++) {
+          const el = doms[i2];
+          const ssrKey = el.getAttribute(BF_KEY);
+          const key = ssrKey !== null ? ssrKey : getKey ? getKey(items[i2], i2) : String(i2);
+          const entry = { key, primaryEl: el, item: items[i2], refs: null, last: null };
+          entries.set(key, entry);
+          list.push(entry);
+        }
+        for (let i2 = doms.length;i2 < items.length; i2++) {
+          const item = items[i2];
+          const key = getKey ? getKey(item, i2) : String(i2);
+          const entry = createEntry(item, i2, key);
+          entries.set(key, entry);
+          list.push(entry);
+          container.insertBefore(entry.primaryEl, anchor);
+        }
+        for (let i2 = items.length;i2 < doms.length; i2++)
+          doms[i2].remove();
+        entryList = list;
+        flushStranded();
+        return;
+      }
+    }
+    if (items.length === 0) {
+      if (entries.size > 0) {
+        if (startMarker && endMarker) {
+          const range = document.createRange();
+          range.setStartAfter(startMarker);
+          range.setEndBefore(endMarker);
+          range.deleteContents();
+        } else {
+          let actualNodeCount = 0;
+          for (let node = container.firstChild;node; node = node.nextSibling)
+            actualNodeCount++;
+          if (actualNodeCount === entries.size) {
+            container.textContent = "";
+          } else {
+            for (const entry of entries.values())
+              entry.primaryEl.remove();
+          }
+        }
+        entries.clear();
+        entryList = [];
+      }
+      return;
+    }
+    const newKeys = new Set;
+    const warnedKeys = new Set;
+    const desiredOrder = [];
+    for (let i2 = 0;i2 < items.length; i2++) {
+      const item = items[i2];
+      const key = getKey ? getKey(item, i2) : String(i2);
+      if (newKeys.has(key) && !warnedKeys.has(key)) {
+        warnedKeys.add(key);
+        console.warn(`[BarefootJS] mapArrayLazy: duplicate key "${key}" — items with this key collapse to a single DOM row, ` + `so only the last one renders. Use a per-item identifier (e.g. \`key={item.id}\`) for correct reconciliation.`);
+      }
+      newKeys.add(key);
+      const existing = entries.get(key);
+      if (existing) {
+        if (!Object.is(existing.item, item)) {
+          const prevItem = existing.item;
+          existing.item = item;
+          untrack2(() => plan.applyItem(existing, prevItem));
+          markStranded();
+        }
+        desiredOrder.push(existing);
+      } else {
+        const entry = createEntry(item, i2, key);
+        entries.set(key, entry);
+        desiredOrder.push(entry);
+      }
+    }
+    for (const [key, entry] of entries) {
+      if (!newKeys.has(key)) {
+        if (entry.primaryEl.parentNode)
+          entry.primaryEl.remove();
+        entries.delete(key);
+      }
+    }
+    const primaryElToDesiredIndex = new Map;
+    for (let i2 = 0;i2 < desiredOrder.length; i2++) {
+      primaryElToDesiredIndex.set(desiredOrder[i2].primaryEl, i2);
+    }
+    const domOrderIndices = [];
+    for (let node = startMarker ? startMarker.nextSibling : container.firstChild;node && node !== anchor; node = node.nextSibling) {
+      if (node.nodeType !== Node.ELEMENT_NODE)
+        continue;
+      const idx = primaryElToDesiredIndex.get(node);
+      if (idx !== undefined)
+        domOrderIndices.push(idx);
+    }
+    const stationary = new Array(desiredOrder.length).fill(false);
+    for (const pos of longestIncreasingSubsequenceIndices(domOrderIndices)) {
+      stationary[domOrderIndices[pos]] = true;
+    }
+    let i = 0;
+    while (i < desiredOrder.length) {
+      if (stationary[i]) {
+        i++;
+        continue;
+      }
+      let j = i;
+      while (j < desiredOrder.length && !stationary[j])
+        j++;
+      const before = j < desiredOrder.length ? desiredOrder[j].primaryEl : anchor;
+      if (j - i === 1) {
+        container.insertBefore(desiredOrder[i].primaryEl, before);
+      } else {
+        const runFragment = document.createDocumentFragment();
+        for (let k = i;k < j; k++)
+          runFragment.appendChild(desiredOrder[k].primaryEl);
+        container.insertBefore(runFragment, before);
+      }
+      i = j;
+    }
+    entryList = desiredOrder;
+    flushStranded();
+  }, bfId);
+  if (plan.applyOuter) {
+    const applyOuter = plan.applyOuter.bind(plan);
+    let seed = true;
+    createEffect2(() => {
+      if (generation)
+        generation();
+      const isSeed = seed;
+      seed = false;
+      applyOuter(entryList, isSeed);
+    });
+  }
+}
 // src/runtime/patch-leaf.ts
 function patchLeaf(el, html) {
   const tpl = document.createElement("template");
@@ -2318,11 +2545,11 @@ function claimMarkerlessText(root, spec) {
   }
   const existing = parent.childNodes[idx];
   if (existing && existing.nodeType === Node.TEXT_NODE) {
-    return { kind: "text", node: existing };
+    return { kind: "text", ref: existing };
   }
   const node = document.createTextNode("");
   parent.insertBefore(node, existing ?? null);
-  return { kind: "text", node };
+  return { kind: "text", ref: node };
 }
 function claimOne(root, spec) {
   if (spec.kind === "text" && spec.markerless) {
@@ -2332,7 +2559,8 @@ function claimOne(root, spec) {
   if (!anchor)
     return null;
   if (spec.kind === "text") {
-    return { kind: "text", node: textNodeAfterComment(anchor) };
+    const next = anchor.nextSibling;
+    return { kind: "text", ref: next?.nodeType === Node.TEXT_NODE ? next : anchor };
   }
   const end = findMarkupEnd(anchor);
   if (!end) {
@@ -2341,8 +2569,42 @@ function claimOne(root, spec) {
   }
   return { kind: "markup", start: anchor, end, last: undefined };
 }
-function writeText(ref, value) {
-  ref.node.nodeValue = String(value ?? "");
+function materializeText(slot) {
+  const anchor = slot.ref;
+  const parent = anchor.parentNode;
+  if (!parent)
+    return null;
+  const node = document.createTextNode("");
+  parent.insertBefore(node, anchor.nextSibling);
+  slot.ref = node;
+  return node;
+}
+function readText(slot) {
+  return slot.ref.nodeType === Node.TEXT_NODE ? slot.ref.nodeValue ?? "" : "";
+}
+function writeText(slot, value) {
+  const node = slot.ref.nodeType === Node.TEXT_NODE ? slot.ref : materializeText(slot);
+  if (!node)
+    return;
+  node.nodeValue = String(value ?? "");
+}
+function textOrNode(value) {
+  if (typeof Node !== "undefined" && value instanceof Node)
+    return value;
+  return String(value);
+}
+function promoteTextToMarkup(slot, id) {
+  const anchor = slot.ref.nodeType === Node.COMMENT_NODE ? slot.ref : isSlotComment(slot.ref.previousSibling, id) ? slot.ref.previousSibling : null;
+  if (!anchor) {
+    console.warn(`[barefootjs] slot ${id} was claimed as text and received a Node, but has no anchor marker to promote from; write ignored`);
+    return null;
+  }
+  const end = findMarkupEnd(anchor);
+  if (!end) {
+    console.warn(`[barefootjs] slot ${id} was claimed as text and received a Node, but has no end marker; write ignored`);
+    return null;
+  }
+  return { kind: "markup", start: anchor, end, last: undefined };
 }
 function clearMarkupRange(start, end) {
   const parent = end.parentNode;
@@ -2386,19 +2648,37 @@ function writeSlot(refs, id, value) {
     return;
   }
   if (ref.kind === "text") {
+    if (typeof Node !== "undefined" && value instanceof Node) {
+      const promoted = promoteTextToMarkup(ref, id);
+      if (!promoted)
+        return;
+      refs.set(id, promoted);
+      writeMarkup(promoted, value);
+      return;
+    }
     writeText(ref, value);
   } else {
     writeMarkup(ref, value);
   }
 }
+function readSlot(refs, id) {
+  const ref = refs.get(id);
+  if (!ref || ref.kind !== "text")
+    return null;
+  return readText(ref);
+}
 function claimSlots(root, plan) {
+  const refs = claimRefs(root, plan);
+  return { write: (id, value) => writeSlot(refs, id, value) };
+}
+function claimRefs(root, plan) {
   const refs = new Map;
   for (const spec of plan) {
     const ref = claimOne(root, spec);
     if (ref)
       refs.set(spec.id, ref);
   }
-  return { write: (id, value) => writeSlot(refs, id, value) };
+  return refs;
 }
 function lazySlots(root, plan) {
   let claimed = null;
@@ -2408,8 +2688,16 @@ function lazySlots(root, plan) {
     claimed.write(id, value);
   };
 }
+function lazyClaimSlots(root, plan) {
+  let refs = null;
+  const ensure = () => refs ??= claimRefs(root, plan);
+  return {
+    write: (id, value) => writeSlot(ensure(), id, value),
+    read: (id) => readSlot(ensure(), id)
+  };
+}
 // src/runtime/apply-rest-attrs.ts
-import { createEffect as createEffect2 } from "@barefootjs/client/reactive";
+import { createEffect as createEffect3 } from "@barefootjs/client/reactive";
 
 // src/runtime/style.ts
 function styleToCss(value) {
@@ -2454,7 +2742,7 @@ function applyRestAttrs(el, source, excludeKeys) {
     }
   }
   const attrEntries = classified.filter(({ c }) => c.kind !== "ref" && c.kind !== "event" && c.kind !== "skip");
-  createEffect2(() => {
+  createEffect3(() => {
     for (const { key, c } of attrEntries) {
       const value = source[key];
       if (c.kind === "innerHTML") {
@@ -2530,7 +2818,7 @@ function date(recv, op) {
   return d[op]();
 }
 // src/runtime/insert.ts
-import { createEffect as createEffect3, untrack as untrack2 } from "@barefootjs/client/reactive";
+import { createEffect as createEffect4, untrack as untrack3 } from "@barefootjs/client/reactive";
 function makeRegion(scope) {
   if (scope.nodeType === Node.COMMENT_NODE) {
     const anchor = scope;
@@ -2585,7 +2873,7 @@ function normalizeTemplate(value) {
   return typeof value === "string" ? { html: value, slots: EMPTY_SLOTS } : value;
 }
 function evalBranchTemplate(branch) {
-  return untrack2(() => normalizeTemplate(branch.template()));
+  return untrack3(() => normalizeTemplate(branch.template()));
 }
 function insert(scope, id, conditionFn, whenTrue, whenFalse, bfId) {
   if (!scope)
@@ -2611,7 +2899,7 @@ function insert(scope, id, conditionFn, whenTrue, whenFalse, bfId) {
   }
   let prevCond;
   let branchCleanup = null;
-  createEffect3(() => {
+  createEffect4(() => {
     let currCond;
     try {
       currCond = Boolean(conditionFn());
@@ -2935,7 +3223,8 @@ export {
   upsertChildItem,
   upsertChild,
   unwrap,
-  untrack3 as untrack,
+  untrack4 as untrack,
+  textOrNode,
   textNodeAfterComment as tAfter,
   styleToCss,
   spreadAttrs,
@@ -2959,9 +3248,11 @@ export {
   parseHTML,
   onMount,
   onCleanup,
+  mapArrayLazy,
   mapArrayAnchored,
   mapArray,
   lazySlots,
+  lazyClaimSlots,
   isSSRPortal,
   insert,
   initChild,
@@ -2986,14 +3277,14 @@ export {
   disposeScope,
   date,
   cssEscape,
-  createSignal2 as createSignal,
+  createSignal3 as createSignal,
   createSelector,
   createSearchParams,
   createRoot3 as createRoot,
   createRecordingSink,
   createPortal,
   createMemo,
-  createEffect4 as createEffect,
+  createEffect5 as createEffect,
   createDisposableEffect,
   createContext,
   createComponent,