@barefootjs/client 0.27.0 → 0.28.1

package/dist/runtime/standalone.js

@@ -1550,9 +1550,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;
 }
@@ -1758,11 +1756,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);
@@ -1822,8 +1839,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;
@@ -1964,7 +1986,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");
   }
@@ -1983,6 +2005,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;
@@ -2163,9 +2190,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;
 }
@@ -2277,7 +2302,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;
@@ -2287,7 +2312,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;
@@ -2301,6 +2333,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) {
@@ -2342,7 +2377,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);
@@ -2421,7 +2456,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);
@@ -2617,6 +2652,197 @@ function mapArrayAnchored(accessor, container, getKey, renderItem, markerId, bfI
     }
   }, bfId);
 }
+// src/runtime/map-array-lazy.ts
+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 ? createSignal(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 = untrack(() => plan.createRow(entry, index));
+    if (!entry.primaryEl.dataset.key)
+      entry.primaryEl.setAttribute(BF_KEY, key);
+    markStranded();
+    return entry;
+  };
+  createEffect(() => {
+    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;
+          untrack(() => 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;
+    createEffect(() => {
+      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");
@@ -2723,11 +2949,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) {
@@ -2737,7 +2963,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) {
@@ -2746,8 +2973,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;
@@ -2791,19 +3052,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;
@@ -2813,6 +3092,14 @@ 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/style.ts
 function styleToCss(value) {
   if (value == null)
@@ -3336,6 +3623,7 @@ export {
   upsertChild,
   unwrap,
   untrack,
+  textOrNode,
   textNodeAfterComment as tAfter,
   styleToCss,
   spreadAttrs,
@@ -3359,9 +3647,11 @@ export {
   parseHTML,
   onMount,
   onCleanup,
+  mapArrayLazy,
   mapArrayAnchored,
   mapArray,
   lazySlots,
+  lazyClaimSlots,
   isSSRPortal,
   insert,
   initChild,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/client",
-  "version": "0.27.0",
+  "version": "0.28.1",
   "description": "BarefootJS client package: reactive primitives (SSR-safe) plus browser runtime under the `/runtime` subpath (compiler target)",
   "type": "module",
   "main": "./dist/index.js",
@@ -55,7 +55,7 @@
     "directory": "packages/client"
   },
   "dependencies": {
-    "@barefootjs/shared": "0.27.0"
+    "@barefootjs/shared": "0.28.1"
   },
   "peerDependencies": {
     "@barefootjs/jsx": ">=0.2.0"