@barefootjs/client 0.17.1 → 0.18.0

package/dist/runtime/standalone.js

@@ -209,6 +209,11 @@ function __bfReportOutput(changed) {
 var Owner = null;
 var Listener = null;
 var MAX_EFFECT_RUNS = 100;
+function registerChild(owner, child) {
+  if (!owner.children)
+    owner.children = new Set;
+  owner.children.add(child);
+}
 var BatchDepth = 0;
 var PendingEffects = new Set;
 function createSignal(initialValue, __bfId) {
@@ -218,10 +223,18 @@ function createSignal(initialValue, __bfId) {
   subscribers.__bfSignalId = id;
   const get = () => {
     if (Listener) {
-      subscribers.add(Listener);
-      Listener.dependencies.add(subscribers);
-      if (profilerSink)
+      if (profilerSink) {
+        subscribers.add(Listener);
+        subscribers.__bfSnapshot = null;
+        Listener.dependencies.set(subscribers, Listener.gen);
         profilerSink.subscribeAdd(id, Listener.id);
+      } else if (!Listener.dependencies.has(subscribers)) {
+        subscribers.add(Listener);
+        subscribers.__bfSnapshot = null;
+        Listener.dependencies.set(subscribers, Listener.gen);
+      } else {
+        Listener.dependencies.set(subscribers, Listener.gen);
+      }
     }
     return value;
   };
@@ -238,9 +251,12 @@ function createSignal(initialValue, __bfId) {
         PendingEffects.add(effect);
       }
     } else {
-      const effectsToRun = [...subscribers];
-      for (const effect of effectsToRun) {
-        runEffect(effect);
+      let snapshot = subscribers.__bfSnapshot;
+      if (!snapshot) {
+        snapshot = subscribers.__bfSnapshot = [...subscribers];
+      }
+      for (let i = 0;i < snapshot.length; i++) {
+        runEffect(snapshot[i]);
       }
     }
   };
@@ -250,9 +266,10 @@ function createEffect(fn, __bfId, __bfKind = "effect") {
   const effect = {
     fn,
     cleanup: null,
-    dependencies: new Set,
+    dependencies: new Map,
+    gen: 0,
     owner: Owner,
-    children: [],
+    children: null,
     disposed: false,
     runCount: 0,
     id: __bfId ?? (profilerSink ? `e${++subscriberSeq}` : ""),
@@ -263,7 +280,7 @@ function createEffect(fn, __bfId, __bfKind = "effect") {
   if (profilerSink)
     profilerSink.effectCreate(effect.id, effect.kind);
   if (Owner)
-    Owner.children.push(effect);
+    registerChild(Owner, effect);
   runEffect(effect);
 }
 function runEffect(effect) {
@@ -274,22 +291,26 @@ function runEffect(effect) {
     effect.runCount = 0;
     throw new Error(`Circular dependency detected: effect re-entered itself ${MAX_EFFECT_RUNS} times.`);
   }
+  const isOutermostRun = effect.runCount === 1;
   if (profilerSink)
     profilerSink.effectEnter(effect.id);
   if (effect.cleanup) {
     effect.cleanup();
     effect.cleanup = null;
   }
-  for (const dep of effect.dependencies) {
-    dep.delete(effect);
-    if (profilerSink)
+  if (profilerSink) {
+    for (const dep of effect.dependencies.keys()) {
+      dep.delete(effect);
+      dep.__bfSnapshot = null;
       profilerSink.subscribeRemove(dep.__bfSignalId ?? "", effect.id);
+    }
+    effect.dependencies.clear();
   }
-  effect.dependencies.clear();
   const prevOwner = Owner;
   const prevListener = Listener;
   Owner = effect;
   Listener = effect;
+  effect.gen++;
   effect.outputReported = false;
   effect.outputChanged = false;
   const start = profilerSink ? performance.now() : 0;
@@ -302,6 +323,15 @@ function runEffect(effect) {
     Owner = prevOwner;
     Listener = prevListener;
     effect.runCount--;
+    if (!profilerSink && isOutermostRun) {
+      for (const [dep, gen] of effect.dependencies) {
+        if (gen !== effect.gen) {
+          effect.dependencies.delete(dep);
+          dep.delete(effect);
+          dep.__bfSnapshot = null;
+        }
+      }
+    }
     if (profilerSink) {
       profilerSink.effectExit(effect.id, performance.now() - start);
       if (effect.outputReported)
@@ -313,16 +343,19 @@ function disposeSubtree(effect) {
   if (effect.disposed)
     return;
   effect.disposed = true;
-  for (const child of effect.children) {
-    disposeSubtree(child);
+  if (effect.children) {
+    for (const child of effect.children) {
+      disposeSubtree(child);
+    }
+    effect.children.clear();
   }
-  effect.children.length = 0;
   if (effect.cleanup) {
     effect.cleanup();
     effect.cleanup = null;
   }
-  for (const dep of effect.dependencies) {
+  for (const dep of effect.dependencies.keys()) {
     dep.delete(effect);
+    dep.__bfSnapshot = null;
     if (profilerSink)
       profilerSink.subscribeRemove(dep.__bfSignalId ?? "", effect.id);
   }
@@ -335,9 +368,7 @@ function disposeEffect(effect) {
   if (effect.disposed)
     return;
   if (effect.owner) {
-    const idx = effect.owner.children.indexOf(effect);
-    if (idx >= 0)
-      effect.owner.children.splice(idx, 1);
+    effect.owner.children?.delete(effect);
   }
   disposeSubtree(effect);
 }
@@ -345,9 +376,10 @@ function createRoot(fn) {
   const root = {
     fn: () => {},
     cleanup: null,
-    dependencies: new Set,
+    dependencies: new Map,
+    gen: 0,
     owner: Owner,
-    children: [],
+    children: null,
     disposed: false,
     runCount: 0,
     id: profilerSink ? `r${++subscriberSeq}` : "",
@@ -358,7 +390,7 @@ function createRoot(fn) {
   if (profilerSink)
     profilerSink.effectCreate(root.id, "root");
   if (Owner)
-    Owner.children.push(root);
+    registerChild(Owner, root);
   const prevOwner = Owner;
   const prevListener = Listener;
   Owner = root;
@@ -379,9 +411,10 @@ function createDisposableEffect(fn, __bfId) {
       return fn();
     },
     cleanup: null,
-    dependencies: new Set,
+    dependencies: new Map,
+    gen: 0,
     owner: Owner,
-    children: [],
+    children: null,
     disposed: false,
     runCount: 0,
     id: __bfId ?? (profilerSink ? `e${++subscriberSeq}` : ""),
@@ -392,7 +425,7 @@ function createDisposableEffect(fn, __bfId) {
   if (profilerSink)
     profilerSink.effectCreate(effect.id, effect.kind);
   if (Owner)
-    Owner.children.push(effect);
+    registerChild(Owner, effect);
   runEffect(effect);
   return () => {
     disposeEffect(effect);
@@ -1574,6 +1607,8 @@ function escapeAttr(value) {
   return String(value).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 function escapeText(value) {
+  if (value == null)
+    return "";
   return escapeAttr(value);
 }
 var SVG_NS = "http://www.w3.org/2000/svg";
@@ -1993,7 +2028,7 @@ function findLoopMarkers2(container, markerId) {
   if (markerId) {
     const startVal = loopStartMarker(markerId);
     const endVal = loopEndMarker(markerId);
-    for (const node of Array.from(container.childNodes)) {
+    for (let node = container.firstChild;node; node = node.nextSibling) {
       if (node.nodeType !== Node.COMMENT_NODE)
         continue;
       const value = node.nodeValue;
@@ -2005,7 +2040,7 @@ function findLoopMarkers2(container, markerId) {
   } else {
     const startPrefix = `${BF_LOOP_START}:`;
     const endPrefix = `${BF_LOOP_END}:`;
-    for (const node of Array.from(container.childNodes)) {
+    for (let node = container.firstChild;node; node = node.nextSibling) {
       if (node.nodeType !== Node.COMMENT_NODE)
         continue;
       const value = node.nodeValue ?? "";
@@ -2045,12 +2080,44 @@ function findItemRanges(start, end) {
   }
   return ranges.filter((r) => r.primaryEl !== null);
 }
-function insertScope(scope, container, anchor) {
+function insertScope(scope, target, anchor) {
   if (scope.startMarker)
-    container.insertBefore(scope.startMarker, anchor);
-  container.insertBefore(scope.primaryEl, anchor);
+    target.insertBefore(scope.startMarker, anchor);
+  target.insertBefore(scope.primaryEl, anchor);
   for (const ex of scope.extras)
-    container.insertBefore(ex, anchor);
+    target.insertBefore(ex, anchor);
+}
+function longestIncreasingSubsequenceIndices(arr) {
+  const n = arr.length;
+  if (n === 0)
+    return [];
+  const tails = [];
+  const predecessors = new Array(n).fill(-1);
+  for (let i = 0;i < n; i++) {
+    const value = arr[i];
+    let lo = 0;
+    let hi = tails.length;
+    while (lo < hi) {
+      const mid = lo + hi >>> 1;
+      if (arr[tails[mid]] < value)
+        lo = mid + 1;
+      else
+        hi = mid;
+    }
+    if (lo > 0)
+      predecessors[i] = tails[lo - 1];
+    if (lo === tails.length)
+      tails.push(i);
+    else
+      tails[lo] = i;
+  }
+  const result = new Array(tails.length);
+  let k = tails[tails.length - 1];
+  for (let i = tails.length - 1;i >= 0; i--) {
+    result[i] = k;
+    k = predecessors[k];
+  }
+  return result;
 }
 function removeScope(scope) {
   if (scope.startMarker?.parentNode)
@@ -2093,37 +2160,48 @@ function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
     return;
   const scopes = new Map;
   let hydrated = false;
+  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;
+  };
   createEffect(() => {
     const items = accessor();
     if (!items)
       return;
-    const { start: startMarker, end: endMarker } = findLoopMarkers2(container, markerId);
+    const { start: startMarker, end: endMarker } = resolveMarkers();
     const anchor = endMarker ?? null;
     if (!hydrated) {
       hydrated = true;
       const existingRanges = startMarker ? findItemRanges(startMarker, endMarker) : Array.from(container.children).map((el) => ({ startMarker: null, primaryEl: el, extras: [] }));
       const needsHydration = existingRanges.length > 0 && (!existingRanges[0]?.primaryEl.hasAttribute("data-key") || scopes.size === 0);
       if (needsHydration) {
-        for (let i = 0;i < existingRanges.length && i < items.length; i++) {
-          const range = existingRanges[i];
-          const item = items[i];
-          const key = getKey ? getKey(item, i) : String(i);
+        for (let i2 = 0;i2 < existingRanges.length && i2 < items.length; i2++) {
+          const range = existingRanges[i2];
+          const item = items[i2];
+          const key = getKey ? getKey(item, i2) : String(i2);
           range.primaryEl.setAttribute(BF_KEY, key);
-          const scope = createItemScope(item, i, renderItem, range.primaryEl, range.extras, range.startMarker);
+          const scope = createItemScope(item, i2, renderItem, range.primaryEl, range.extras, range.startMarker);
           scopes.set(key, scope);
           hydratedScopes.add(range.primaryEl);
         }
-        for (let i = existingRanges.length;i < items.length; i++) {
-          const item = items[i];
-          const key = getKey ? getKey(item, i) : String(i);
-          const scope = createItemScope(item, i, renderItem);
+        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);
           if (!scope.primaryEl.dataset.key)
             scope.primaryEl.setAttribute(BF_KEY, key);
           scopes.set(key, scope);
           insertScope(scope, container, anchor);
         }
-        for (let i = items.length;i < existingRanges.length; i++) {
-          const range = existingRanges[i];
+        for (let i2 = items.length;i2 < existingRanges.length; i2++) {
+          const range = existingRanges[i2];
           if (range.startMarker?.parentNode)
             range.startMarker.remove();
           if (range.primaryEl.parentNode)
@@ -2151,12 +2229,40 @@ function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
         }
       }
     }
+    if (items.length === 0) {
+      if (scopes.size > 0) {
+        for (const scope of scopes.values())
+          scope.dispose();
+        if (startMarker && endMarker) {
+          const range = document.createRange();
+          range.setStartAfter(startMarker);
+          range.setEndBefore(endMarker);
+          range.deleteContents();
+        } else {
+          let expectedNodeCount = 0;
+          for (const scope of scopes.values()) {
+            expectedNodeCount += 1 + scope.extras.length + (scope.startMarker ? 1 : 0);
+          }
+          let actualNodeCount = 0;
+          for (let node = container.firstChild;node; node = node.nextSibling)
+            actualNodeCount++;
+          if (actualNodeCount === expectedNodeCount) {
+            container.textContent = "";
+          } else {
+            for (const scope of scopes.values())
+              removeScope(scope);
+          }
+        }
+        scopes.clear();
+      }
+      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);
+    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] mapArray: 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}\`) for correct reconciliation.`);
@@ -2167,7 +2273,7 @@ function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
         existing.setItem(item);
         desiredOrder.push(existing);
       } else {
-        const scope = createItemScope(item, i, renderItem);
+        const scope = createItemScope(item, i2, renderItem);
         if (!scope.primaryEl.dataset.key)
           scope.primaryEl.setAttribute(BF_KEY, key);
         scopes.set(key, scope);
@@ -2181,32 +2287,41 @@ function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
         scopes.delete(key);
       }
     }
-    let inOrder = true;
-    let checkNode = startMarker ? startMarker.nextSibling : container.firstChild;
-    for (const scope of desiredOrder) {
-      while (checkNode && checkNode.nodeType !== Node.ELEMENT_NODE)
-        checkNode = checkNode.nextSibling;
-      if (checkNode !== scope.primaryEl) {
-        inOrder = false;
-        break;
-      }
-      checkNode = checkNode.nextSibling;
-      for (let i = 0;i < scope.extras.length; i++) {
-        while (checkNode && checkNode.nodeType !== Node.ELEMENT_NODE)
-          checkNode = checkNode.nextSibling;
-        if (checkNode !== scope.extras[i]) {
-          inOrder = false;
-          break;
-        }
-        checkNode = checkNode.nextSibling;
-      }
-      if (!inOrder)
-        break;
+    const primaryElToDesiredIndex = new Map;
+    for (let i2 = 0;i2 < desiredOrder.length; i2++) {
+      primaryElToDesiredIndex.set(desiredOrder[i2].primaryEl, i2);
     }
-    if (!inOrder) {
-      for (const scope of desiredOrder) {
-        insertScope(scope, container, anchor);
+    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].startMarker ?? desiredOrder[j].primaryEl : anchor;
+      if (j - i === 1) {
+        insertScope(desiredOrder[i], container, before);
+      } else {
+        const runFragment = document.createDocumentFragment();
+        for (let k = i;k < j; k++)
+          insertScope(desiredOrder[k], runFragment, null);
+        container.insertBefore(runFragment, before);
       }
+      i = j;
     }
   }, bfId);
 }

package/package.json

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

package/src/build.ts

@@ -58,6 +58,20 @@ export interface CSRBuildOptions {
   adapter?: TemplateAdapter
   /** Options forwarded to the default `CSRAdapter`. Ignored when `adapter` is set. */
   adapterOptions?: CSRAdapterOptions
+  /**
+   * How the CLI produces `barefoot.js`. Defaults to `'treeshake'`, which
+   * bundles only the runtime exports this project's compiled client JS
+   * actually imports (plus the always-kept public mount API). Set to
+   * `'full'` to copy the entire prebuilt runtime bundle verbatim, matching
+   * pre-tree-shaking behavior.
+   */
+  runtimeBundle?: 'treeshake' | 'full'
+  /**
+   * Extra `@barefootjs/client*` export names to force-keep in `barefoot.js`
+   * under `runtimeBundle: 'treeshake'` — for names only ever referenced
+   * from hand-written page scripts the CLI never compiles.
+   */
+  runtimeKeep?: string[]
 }
 
 /**
@@ -85,6 +99,8 @@ export function createConfig(options: CSRBuildOptions = {}) {
     bundleEntries: options.bundleEntries,
     outputLayout: options.outputLayout,
     postBuild: options.postBuild,
+    runtimeBundle: options.runtimeBundle,
+    runtimeKeep: options.runtimeKeep,
   }
 }