@barefootjs/client 0.5.0 → 0.5.2

package/dist/runtime/standalone.js

@@ -304,6 +304,9 @@ var BF_SCOPE_COMMENT_PREFIX = "bf-scope:";
 var BF_LOOP_START = "bf-loop";
 var BF_LOOP_END = "bf-/loop";
 var BF_LOOP_ITEM = "bf-loop-i";
+function loopItemMarker(key) {
+  return `${BF_LOOP_ITEM}:${key}`;
+}
 function loopStartMarker(markerId) {
   return `${BF_LOOP_START}:${markerId}`;
 }
@@ -552,10 +555,18 @@ function getPortalScopeId(element) {
   return info?.scopeId ?? null;
 }
 function getCommentScopeBoundary(commentNode) {
+  const isLoopItem = commentNode.nodeValue?.startsWith(`${BF_LOOP_ITEM}:`) ?? false;
   let node = commentNode.nextSibling;
   while (node) {
-    if (node.nodeType === Node.COMMENT_NODE && node.nodeValue?.startsWith(BF_SCOPE_COMMENT_PREFIX)) {
-      return node;
+    if (node.nodeType === Node.COMMENT_NODE) {
+      const value = node.nodeValue ?? "";
+      if (isLoopItem) {
+        if (value.startsWith(`${BF_LOOP_ITEM}:`) || value.startsWith(`${BF_LOOP_END}:`)) {
+          return node;
+        }
+      } else if (value.startsWith(BF_SCOPE_COMMENT_PREFIX)) {
+        return node;
+      }
     }
     node = node.nextSibling;
   }
@@ -1131,7 +1142,9 @@ function setParentScopeId(id) {
 }
 var propsUpdateMap = new WeakMap;
 var propsMap = new WeakMap;
-function createComponent(nameOrDef, props, key, slot) {
+function createComponent(nameOrDef, props = {}, key, slot) {
+  if (props == null)
+    props = {};
   if (typeof nameOrDef !== "string") {
     return createComponentFromDef(nameOrDef, props, key);
   }
@@ -1915,6 +1928,150 @@ function mapArray(accessor, container, getKey, renderItem, markerId) {
     }
   });
 }
+var ITEM_PREFIX = `${BF_LOOP_ITEM}:`;
+function isItemAnchor(node) {
+  return node.nodeType === Node.COMMENT_NODE && (node.nodeValue ?? "").startsWith(ITEM_PREFIX);
+}
+function collectAnchorRange(anchor, end) {
+  const nodes = [anchor];
+  let node = anchor.nextSibling;
+  while (node && node !== end) {
+    if (isItemAnchor(node))
+      break;
+    nodes.push(node);
+    node = node.nextSibling;
+  }
+  return nodes;
+}
+function findItemAnchors(start, end) {
+  const anchors = [];
+  let node = start.nextSibling;
+  while (node && node !== end) {
+    if (isItemAnchor(node))
+      anchors.push(node);
+    node = node.nextSibling;
+  }
+  return anchors;
+}
+function placeAnchorScope(scope, container, before, end) {
+  if (scope.pending) {
+    container.insertBefore(scope.pending, before);
+    scope.pending = null;
+    return;
+  }
+  for (const node of collectAnchorRange(scope.anchor, end)) {
+    container.insertBefore(node, before);
+  }
+}
+function removeAnchorScope(scope, end) {
+  for (const node of collectAnchorRange(scope.anchor, end)) {
+    node.parentNode?.removeChild(node);
+  }
+}
+function createAnchorScope(item, index, key, renderItem, existingAnchor) {
+  let dispose;
+  let setItem;
+  let returned;
+  createRoot((d) => {
+    dispose = d;
+    const [itemAccessor, itemSetter] = createSignal(item);
+    setItem = itemSetter;
+    returned = renderItem(itemAccessor, index, existingAnchor);
+    return;
+  });
+  if (existingAnchor) {
+    return { anchor: existingAnchor, pending: null, dispose, setItem };
+  }
+  const frag = returned;
+  const anchor = frag.firstChild;
+  if (anchor && !anchor.nodeValue?.startsWith(ITEM_PREFIX)) {
+    anchor.nodeValue = loopItemMarker(key);
+  }
+  return { anchor, pending: frag, dispose, setItem };
+}
+function mapArrayAnchored(accessor, container, getKey, renderItem, markerId) {
+  if (!container)
+    return;
+  const scopes = new Map;
+  let hydrated = false;
+  createEffect(() => {
+    const items = accessor();
+    if (!items)
+      return;
+    const { start, end } = findLoopMarkers2(container, markerId);
+    if (!start || !end)
+      return;
+    if (!hydrated) {
+      hydrated = true;
+      const existing = findItemAnchors(start, end);
+      if (existing.length > 0 && scopes.size === 0) {
+        for (let i = 0;i < existing.length && i < items.length; i++) {
+          const item = items[i];
+          const key = getKey ? getKey(item, i) : String(i);
+          scopes.set(key, createAnchorScope(item, i, key, renderItem, existing[i]));
+        }
+        for (let i = existing.length;i < items.length; i++) {
+          const item = items[i];
+          const key = getKey ? getKey(item, i) : String(i);
+          const scope = createAnchorScope(item, i, key, renderItem);
+          scopes.set(key, scope);
+          placeAnchorScope(scope, container, end, end);
+        }
+        for (let i = items.length;i < existing.length; i++) {
+          for (const node of collectAnchorRange(existing[i], end)) {
+            node.parentNode?.removeChild(node);
+          }
+        }
+        return;
+      }
+    }
+    const newKeys = new Set;
+    const warnedKeys = new Set;
+    const desiredOrder = [];
+    for (let i = 0;i < items.length; i++) {
+      const item = items[i];
+      const key = getKey ? getKey(item, i) : String(i);
+      if (newKeys.has(key) && !warnedKeys.has(key)) {
+        warnedKeys.add(key);
+        console.warn(`[BarefootJS] mapArrayAnchored: duplicate key "${key}" — items with this key collapse to a ` + `single DOM scope, so only the last one renders. Use a per-item identifier (e.g. \`key={item.id}\`).`);
+      }
+      newKeys.add(key);
+      const existing = scopes.get(key);
+      if (existing) {
+        existing.setItem(item);
+        desiredOrder.push(existing);
+      } else {
+        const scope = createAnchorScope(item, i, key, renderItem);
+        scopes.set(key, scope);
+        desiredOrder.push(scope);
+      }
+    }
+    for (const [key, scope] of scopes) {
+      if (!newKeys.has(key)) {
+        scope.dispose();
+        removeAnchorScope(scope, end);
+        scopes.delete(key);
+      }
+    }
+    let inOrder = true;
+    const domAnchors = findItemAnchors(start, end);
+    if (domAnchors.length !== desiredOrder.length) {
+      inOrder = false;
+    } else {
+      for (let i = 0;i < desiredOrder.length; i++) {
+        if (domAnchors[i] !== desiredOrder[i].anchor) {
+          inOrder = false;
+          break;
+        }
+      }
+    }
+    if (!inOrder) {
+      for (const scope of desiredOrder) {
+        placeAnchorScope(scope, container, end, end);
+      }
+    }
+  });
+}
 // src/runtime/style.ts
 function styleToCss(value) {
   if (value == null)
@@ -2019,6 +2176,55 @@ function spreadAttrs(obj) {
   return parts.join(" ");
 }
 // src/runtime/insert.ts
+function makeRegion(scope) {
+  if (scope.nodeType === Node.COMMENT_NODE) {
+    const anchor = scope;
+    const parentEl = anchor.parentElement;
+    const componentScope = parentEl?.closest(`[${BF_SCOPE}]`) ?? null;
+    const parentScopeId = componentScope?.getAttribute(BF_SCOPE) ?? null;
+    const proxyEl = document.createElement("bf-loop-item");
+    commentScopeRegistry.set(proxyEl, { commentNode: anchor, scopeId: parentScopeId ?? "" });
+    return { anchor, bindScope: proxyEl, parentScopeId };
+  }
+  const el = scope;
+  return { anchor: null, bindScope: el, parentScopeId: el.getAttribute(BF_SCOPE) };
+}
+function findCondElInRange(anchor, id) {
+  const sel = `[${BF_COND}="${id}"]`;
+  const boundary = getCommentScopeBoundary(anchor);
+  let node = anchor.nextSibling;
+  while (node && node !== boundary) {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const el = node;
+      if (el.matches?.(sel))
+        return el;
+      const inner = el.querySelector(sel);
+      if (inner)
+        return inner;
+    }
+    node = node.nextSibling;
+  }
+  return null;
+}
+function findCondStartInRange(anchor, id) {
+  const want = `bf-cond-start:${id}`;
+  const boundary = getCommentScopeBoundary(anchor);
+  let node = anchor.nextSibling;
+  while (node && node !== boundary) {
+    if (node.nodeType === Node.COMMENT_NODE && node.nodeValue === want) {
+      return node;
+    }
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const w = document.createTreeWalker(node, NodeFilter.SHOW_COMMENT);
+      while (w.nextNode()) {
+        if (w.currentNode.nodeValue === want)
+          return w.currentNode;
+      }
+    }
+    node = node.nextSibling;
+  }
+  return null;
+}
 var EMPTY_SLOTS = [];
 function normalizeTemplate(value) {
   return typeof value === "string" ? { html: value, slots: EMPTY_SLOTS } : value;
@@ -2029,7 +2235,8 @@ function evalBranchTemplate(branch) {
 function insert(scope, id, conditionFn, whenTrue, whenFalse) {
   if (!scope)
     return;
-  const parentScopeId = scope.getAttribute(BF_SCOPE);
+  const region = makeRegion(scope);
+  const parentScopeId = region.parentScopeId;
   let isFragmentCond = false;
   try {
     const sampleTrue = evalBranchTemplate(whenTrue);
@@ -2072,23 +2279,23 @@ function insert(scope, id, conditionFn, whenTrue, whenFalse) {
       } finally {
         setParentScopeId(null);
       }
-      const existingEl = find(scope, `[${BF_COND}="${id}"]`);
+      const existingEl = region.anchor ? findCondElInRange(region.anchor, id) : find(region.bindScope, `[${BF_COND}="${id}"]`);
       if (existingEl) {
         const expectedSig = getTemplateRootSignature(result2.html);
         const existingSig = existingEl.outerHTML.match(/^<[^>]+>/)?.[0] ?? null;
         if (isFragmentCond && (!expectedSig || existingSig !== expectedSig)) {
-          updateFragmentConditional(scope, id, result2);
+          updateFragmentConditional(region, id, result2);
         } else if (!isFragmentCond && expectedSig && existingSig && expectedSig !== existingSig) {
-          updateElementConditional(scope, id, result2);
+          updateElementConditional(region, id, result2);
         } else if (result2.slots.length > 0) {
-          updateElementConditional(scope, id, result2);
+          updateElementConditional(region, id, result2);
         }
       } else if (isFragmentCond) {
-        updateFragmentConditional(scope, id, result2);
+        updateFragmentConditional(region, id, result2);
       }
-      const cleanup2 = branch.bindEvents(scope, { isFirstRun: true });
+      const cleanup2 = branch.bindEvents(region.bindScope, { isFirstRun: true });
       branchCleanup = typeof cleanup2 === "function" ? cleanup2 : null;
-      autoFocusConditionalElement(scope, id);
+      autoFocusConditionalElement(region, id);
       return;
     }
     if (currCond === prevVal) {
@@ -2106,18 +2313,18 @@ function insert(scope, id, conditionFn, whenTrue, whenFalse) {
       setParentScopeId(null);
     }
     if (isFragmentCond) {
-      updateFragmentConditional(scope, id, result);
+      updateFragmentConditional(region, id, result);
     } else {
-      updateElementConditional(scope, id, result);
+      updateElementConditional(region, id, result);
     }
-    const cleanup = branch.bindEvents(scope, { isFirstRun: false });
+    const cleanup = branch.bindEvents(region.bindScope, { isFirstRun: false });
     branchCleanup = typeof cleanup === "function" ? cleanup : null;
-    autoFocusConditionalElement(scope, id);
+    autoFocusConditionalElement(region, id);
   });
 }
-function autoFocusConditionalElement(scope, id) {
+function autoFocusConditionalElement(region, id) {
   requestAnimationFrame(() => {
-    const condEl = scope.querySelector(`[${BF_COND}="${id}"]`);
+    const condEl = region.anchor ? findCondElInRange(region.anchor, id) : region.bindScope.querySelector(`[${BF_COND}="${id}"]`);
     if (condEl) {
       const autofocusEl = condEl.matches("[autofocus]") ? condEl : condEl.querySelector("[autofocus]");
       if (autofocusEl && typeof autofocusEl.focus === "function") {
@@ -2150,18 +2357,23 @@ function spliceSlots(fragment, slots) {
   }
   return fragment;
 }
-function updateFragmentConditional(scope, id, result) {
+function updateFragmentConditional(region, id, result) {
   const { html, slots } = result;
+  const scope = region.bindScope;
   const startMarker = `bf-cond-start:${id}`;
   let startComment = null;
-  const walker = document.createTreeWalker(scope, NodeFilter.SHOW_COMMENT);
-  while (walker.nextNode()) {
-    if (walker.currentNode.nodeValue === startMarker) {
-      startComment = walker.currentNode;
-      break;
+  if (region.anchor) {
+    startComment = findCondStartInRange(region.anchor, id);
+  } else {
+    const walker = document.createTreeWalker(scope, NodeFilter.SHOW_COMMENT);
+    while (walker.nextNode()) {
+      if (walker.currentNode.nodeValue === startMarker) {
+        startComment = walker.currentNode;
+        break;
+      }
     }
   }
-  const condEl = scope.querySelector(`[${BF_COND}="${id}"]`);
+  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : scope.querySelector(`[${BF_COND}="${id}"]`);
   const endMarker = `bf-cond-end:${id}`;
   if (startComment) {
     const nodesToRemove = [];
@@ -2200,8 +2412,8 @@ function updateFragmentConditional(scope, id, result) {
     }
   }
 }
-function updateElementConditional(scope, id, result) {
-  const condEl = scope.querySelector(`[${BF_COND}="${id}"]`);
+function updateElementConditional(region, id, result) {
+  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : region.bindScope.querySelector(`[${BF_COND}="${id}"]`);
   if (!condEl)
     return;
   const { html, slots } = result;
@@ -2226,6 +2438,58 @@ function __bfSlot(value, slots) {
   }
   return String(value);
 }
+// src/runtime/dynamic-text.ts
+var END_MARKER = "/";
+function clearSlotRegion(start, keep) {
+  let n = start.nextSibling;
+  while (n && !(n.nodeType === Node.COMMENT_NODE && n.nodeValue === END_MARKER)) {
+    const next = n.nextSibling;
+    if (n !== keep)
+      n.parentNode?.removeChild(n);
+    n = next;
+  }
+}
+function slotStart(node) {
+  let n = node.previousSibling;
+  while (n && n.nodeType !== Node.COMMENT_NODE)
+    n = n.previousSibling;
+  return n;
+}
+function __bfText(current, value) {
+  if (!current)
+    return current;
+  if (value != null && value.__isSlot)
+    return current;
+  if (typeof Node !== "undefined" && value instanceof Node) {
+    if (value === current)
+      return current;
+    const start2 = current.previousSibling;
+    if (start2 && start2.nodeType === Node.COMMENT_NODE) {
+      clearSlotRegion(start2);
+      start2.parentNode?.insertBefore(value, start2.nextSibling);
+      return value;
+    }
+    current.parentNode?.replaceChild(value, current);
+    return value;
+  }
+  const text = String(value ?? "");
+  if (current.nodeType === Node.TEXT_NODE) {
+    current.nodeValue = text;
+    const start2 = slotStart(current);
+    if (start2 && start2.nodeType === Node.COMMENT_NODE)
+      clearSlotRegion(start2, current);
+    return current;
+  }
+  const start = current.previousSibling;
+  const textNode = (current.ownerDocument ?? document).createTextNode(text);
+  if (start && start.nodeType === Node.COMMENT_NODE) {
+    clearSlotRegion(start);
+    start.parentNode?.insertBefore(textNode, start.nextSibling);
+  } else {
+    current.parentNode?.replaceChild(textNode, current);
+  }
+  return textNode;
+}
 // src/runtime/client-marker.ts
 function updateClientMarker(scope, id, value) {
   if (!scope)
@@ -2346,6 +2610,7 @@ export {
   parseHTML,
   onMount,
   onCleanup,
+  mapArrayAnchored,
   mapArray,
   isSSRPortal,
   insert,
@@ -2379,6 +2644,7 @@ export {
   applyRestAttrs,
   __slot,
   __bf_swap,
+  __bfText,
   __bfSlot,
   $t,
   $c,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/client",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "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.5.0"
+    "@barefootjs/shared": "0.5.2"
   },
   "peerDependencies": {
     "@barefootjs/jsx": ">=0.2.0"

package/src/runtime/component.ts

@@ -74,10 +74,15 @@ export interface CreateComponentSlotInfo {
 
 export function createComponent(
   nameOrDef: string | ComponentDef,
-  props: Record<string, unknown>,
+  props: Record<string, unknown> = {},
   key?: string | number,
   slot?: CreateComponentSlotInfo,
 ): HTMLElement {
+  // A bare callable shim invoked from user code (e.g. an object-literal
+  // value `LOGOS[id]()` whose arrow the compiler hoisted into a component)
+  // reaches us with no props (#1663). Normalize to an empty object so the
+  // descriptor probes below don't throw on `undefined`.
+  if (props == null) props = {}
   // ComponentDef mode: use def directly instead of registry lookup
   if (typeof nameOrDef !== 'string') {
     return createComponentFromDef(nameOrDef, props, key)

package/src/runtime/dynamic-text.ts

@@ -0,0 +1,88 @@
+/**
+ * Dynamic text/JSX slot updater (#1663).
+ *
+ * The compiler wraps reactive child expressions (`<div>{expr}</div>`) in a
+ * `createEffect` that writes the value into the text node sitting between
+ * the slot's `<!--bf:sX-->` / `<!--/-->` comment markers. That was a pure
+ * `nodeValue = String(value)` assignment, which is correct for primitives
+ * but destroys a live `Node` — e.g. when `expr` is a JSX-returning call such
+ * as `{themeLogo(id)}` / `{LOGOS[id]()}` whose value is the `HTMLElement`
+ * returned by `createComponent`. Stringifying it produced
+ * `"[object HTMLElement]"` (and clobbered the server-rendered subtree).
+ *
+ * `__bfText` mirrors `__bfSlot` (the branch-template equivalent): when the
+ * value is a `Node`, it replaces the slot region with that node by identity;
+ * otherwise it behaves exactly like the previous text assignment. It returns
+ * the node that now occupies the slot so the caller can track it across
+ * reactive re-runs (the previous node is detached once replaced).
+ */
+
+const END_MARKER = '/'
+
+/** Remove every sibling between `start` (the `<!--bf:sX-->` comment) and the
+ *  matching `<!--/-->` end comment, leaving both markers in place. When `keep`
+ *  is supplied that node is left in place (used when writing a primitive
+ *  through a text anchor that must survive while stale siblings are cleared). */
+function clearSlotRegion(start: Node, keep?: Node): void {
+  let n = start.nextSibling
+  while (
+    n &&
+    !(n.nodeType === Node.COMMENT_NODE && (n as Comment).nodeValue === END_MARKER)
+  ) {
+    const next = n.nextSibling
+    if (n !== keep) n.parentNode?.removeChild(n)
+    n = next
+  }
+}
+
+/** Walk back from `node` to the nearest preceding comment marker (the slot's
+ *  `<!--bf:sX-->` start), skipping any stale element siblings in between. */
+function slotStart(node: Node): Node | null {
+  let n = node.previousSibling
+  while (n && n.nodeType !== Node.COMMENT_NODE) n = n.previousSibling
+  return n
+}
+
+export function __bfText(current: Node | null, value: unknown): Node | null {
+  if (!current) return current
+  // Slot markers (`__slot()`): leave the server-rendered DOM untouched.
+  if (value != null && (value as { __isSlot?: boolean }).__isSlot) return current
+
+  if (typeof Node !== 'undefined' && value instanceof Node) {
+    if (value === current) return current
+    const start = current.previousSibling
+    if (start && start.nodeType === Node.COMMENT_NODE) {
+      clearSlotRegion(start)
+      start.parentNode?.insertBefore(value, start.nextSibling)
+      return value
+    }
+    // No marker to anchor against — best-effort in-place replacement.
+    current.parentNode?.replaceChild(value, current)
+    return value
+  }
+
+  const text = String(value ?? '')
+  if (current.nodeType === Node.TEXT_NODE) {
+    current.nodeValue = text
+    // The conditional-slot path re-resolves the anchor via `$t()` on every
+    // run, which can hand back a freshly created text node sitting *before* a
+    // stale element left by a previous Node-valued run. Clear any remaining
+    // siblings up to the end marker so switching JSX → text doesn't render
+    // both the old element and the new text.
+    const start = slotStart(current)
+    if (start && start.nodeType === Node.COMMENT_NODE) clearSlotRegion(start, current)
+    return current
+  }
+
+  // Switching back from a Node value to text: drop the element and restore a
+  // text node in the slot region.
+  const start = current.previousSibling
+  const textNode = (current.ownerDocument ?? document).createTextNode(text)
+  if (start && start.nodeType === Node.COMMENT_NODE) {
+    clearSlotRegion(start)
+    start.parentNode?.insertBefore(textNode, start.nextSibling)
+  } else {
+    current.parentNode?.replaceChild(textNode, current)
+  }
+  return textNode
+}

package/src/runtime/index.ts

@@ -56,7 +56,7 @@ export {
 export { reconcileList, type RenderItemFn } from './list'
 export { reconcileElements, getLoopChildren, getLoopNodes } from './reconcile-elements'
 export { qsaItem, upsertChildItem } from './qsa-item'
-export { mapArray } from './map-array'
+export { mapArray, mapArrayAnchored } from './map-array'
 
 // Template registry
 export { registerTemplate, getTemplate, hasTemplate, type TemplateFn } from './template'
@@ -81,6 +81,7 @@ export { hydrate, rehydrateAll, flushHydration, getRegisteredDef } from './hydra
 export { registerComponent, getComponentInit, initChild, upsertChild } from './registry'
 export { insert, type BranchConfig, type BranchTemplateResult } from './insert'
 export { __bfSlot } from './branch-slot'
+export { __bfText } from './dynamic-text'
 export { updateClientMarker } from './client-marker'
 
 // Hydration state