@jsenv/navi 0.29.140 → 0.29.141

package/dist/jsenv_navi.js

@@ -61984,12 +61984,9 @@ const ListVirtualContext = createContext(null);
 // that returning a component of one's own — instead of a bare <List.Item> —
 // works the same way.
 const ListRowContext = createContext(null);
-// The slot a child of the list stands in — which one it is, and where it sits
-// among its siblings (see ListDeclaredChildren). A row takes its place in the
-// collection by slot, and hears through this context that its slot moved: a
-// context subscriber is re-rendered even when preact skipped the component
-// that holds it, which is what lets a row nobody rebuilt follow the list all
-// the same.
+// The slot a child of the list stands in, by id (see ListDeclaredChildren). A
+// row takes its place in the collection by slot: the place is then the list's
+// to move, and the row's to follow — see createListVirtual.
 const ListSlotContext = createContext(null);
 const css$x = /* css */`
   @layer navi {
@@ -64947,9 +64944,7 @@ const ListItemUI = props => {
   // registered the row, decided it is inside the render window, and placed its
   // separator. All that is left here is to draw it.
   const row = useContext(ListRowContext);
-  // Where this row was declared, when it was declared one by one (see
-  // ListDeclaredChildren).
-  const slot = useContext(ListSlotContext);
+  const slotId = useContext(ListSlotContext);
   // There is no standalone match/matchScore/highlight prop — participation
   // in a matching system (search, filter…) only goes through `matchInfo`
   // (e.g. useSearchText's getItemMatchInfo(item): { match, matchScore,
@@ -64975,18 +64970,20 @@ const ListItemUI = props => {
   // Where a row sits is where it was declared, full stop: a list is written in
   // the order it reads. Its slot is what says that — a search that reorders
   // rows reorders the rows it declares, and the slots follow. A row drawn by a
-  // run already knows its place; the run gave it.
+  // run already knows its place; the run gave it. The place is taken in the
+  // name of this very component (idDefault, not the row's id): two components
+  // may stand for the same row for a moment, one leaving as the other arrives,
+  // and the one leaving must give back its own place, not the newcomer's.
   if (!row) {
     if (props.filtered) {
-      virtual.drop(props.id);
+      virtual.drop(idDefault);
     } else {
-      props.index = virtual.take(props.id, 1, slot ? slot.id : props.id);
+      props.index = virtual.take(idDefault, 1, slotId);
     }
   }
-  const rowId = props.id;
   useLayoutEffect(() => {
     return () => {
-      virtual.drop(rowId);
+      virtual.drop(idDefault);
     };
   }, []);
   // Every row that is drawn registers itself, whether it was declared one by
@@ -65355,9 +65352,10 @@ List.Item = ListItem;
 // So the places are read off the walk instead of off the renders: the list
 // names a slot for each of its children and declares them here, in order,
 // before any of them renders (see ListDeclaredChildren). A child then takes
-// its place BY SLOT and keeps it for as long as its slot stands — whether it
-// renders again or not — while a child whose slot the walk no longer names
-// loses its place in that same render, so nothing removed is ever counted.
+// its place BY SLOT, and the place is a signal: it moves when what stands
+// before it changes — a row filtered out, a run taking in rows, a slot added
+// or moved — and the child follows, rendered again for it whether or not
+// anything else would have rendered it.
 const createListVirtual = () => {
   const totalSignal = signal(0);
   // Bumped whenever a run takes in rows. The list itself has to hear about it:
@@ -65369,100 +65367,108 @@ const createListVirtual = () => {
   // an attribute: what is drawn is from before, and the app may want to say so
   // without taking anything away.
   const refreshingSignal = signal(0);
-  // Where the walk put each slot: the slot it lives in (a group walks its own
-  // rows, inside the slot the list gave the group) and its rank among the
-  // slots declared with it.
-  const slotById = new Map();
-  // What stands in a slot once it has rendered: the row, or the run of rows,
-  // that took the place, and how many rows of the collection it stands for.
+  // The slots each walk declared, in order, by the slot the walk stands in
+  // (null for the list's own children). Together they are a tree: a group's
+  // rows live inside the group's slot.
+  const slotIdsByParent = new Map();
+  // Who took a place — a row, or a run of rows — and how many rows of the
+  // collection it stands for. The place itself is a signal, see take.
   const ownerById = new Map();
-  const placeByOwner = new Map();
-  // The owners in the order their slots put them, and how many rows they stand
-  // for together: kept so that a child declared after all the others — a whole
-  // first render, and anything the list gains at its end — is placed without
-  // going over the others again.
-  const orderedOwnerIds = [];
-  let rowTotal = 0;
+  // The owners standing in each slot, in the order they took their place.
+  // One, as a rule; a child that renders several rows keeps them in the order
+  // they first rendered, which is all it can be told.
+  const ownerIdsBySlot = new Map();
   const locatorByOwner = new Map();
-  const pathCache = new Map();
-  // Tells two owners sharing a slot apart (several rows inside one child of
-  // the list), in the order they first took a place.
-  let sequence = 0;
+  // The slots as the tree reads, first to last, and where each stands in it.
+  // Rebuilt once a walk has changed the tree, read to place the owners.
+  const slotWalk = [];
+  const rankBySlot = new Map();
+  let rowTotal = 0;
+  // Owners have left and the others have not been moved up yet. Done on the
+  // next ask rather than on the spot: rows leave many at a time (a search, a
+  // list unmounting), and moving the others up once is enough.
   let placesStale = false;
-
-  // Whatever the slot held is gone with it, and so is whatever its own walk
-  // declared inside it.
-  const dropSlot = slotId => {
-    slotById.delete(slotId);
-    for (const [ownerId, owner] of ownerById) {
-      if (owner.slotId === slotId) {
-        ownerById.delete(ownerId);
-        placeByOwner.delete(ownerId);
+  // Where the last slot holding an owner stands: an owner arriving at or after
+  // it is placed at the end without going over the others — a whole first
+  // render, rows arriving in order, costs each row nothing but itself.
+  let rankOwnedLast = -1;
+  const rebuildWalk = () => {
+    slotWalk.length = 0;
+    rankBySlot.clear();
+    const visit = parentSlotId => {
+      const slotIds = slotIdsByParent.get(parentSlotId);
+      if (!slotIds) {
+        return;
       }
-    }
-    for (const [otherSlotId, slot] of slotById) {
-      if (slot.parentId === slotId) {
-        dropSlot(otherSlotId);
+      for (const slotId of slotIds) {
+        rankBySlot.set(slotId, slotWalk.length);
+        slotWalk.push(slotId);
+        visit(slotId);
       }
-    }
-  };
-  // Where a slot sits, said as the ranks of the slots it lives in, outermost
-  // first: comparing two of them keeps a group's rows inside their group and
-  // the groups where the list declared them.
-  const pathOf = slotId => {
-    const pathCached = pathCache.get(slotId);
-    if (pathCached) {
-      return pathCached;
-    }
-    const slot = slotById.get(slotId);
-    if (!slot) {
-      return null;
-    }
-    let path;
-    if (slot.parentId === null) {
-      path = [slot.order];
-    } else {
-      const parentPath = pathOf(slot.parentId);
-      path = parentPath === null ? [slot.order] : [...parentPath, slot.order];
-    }
-    pathCache.set(slotId, path);
-    return path;
+    };
+    visit(null);
   };
-  // The places, all of them, from the order the slots are in. Done in one go
-  // rather than owner by owner: a place is a sum of what stands before it, so
-  // there is nothing to hand out one at a time — and nothing changes it but a
-  // slot moving or a child taking a different number of rows.
+  // Every place, in one go: a place is the sum of what stands before it, so
+  // there is nothing to hand out one at a time. Writing a place that did not
+  // change wakes nobody — a signal ignores a value equal to its own.
   const refreshPlaces = () => {
     placesStale = false;
-    const owners = [...ownerById.entries()];
-    owners.sort(([, leftOwner], [, rightOwner]) => {
-      const comparison = comparePath(pathOf(leftOwner.slotId), pathOf(rightOwner.slotId));
-      if (comparison !== 0) {
-        return comparison;
-      }
-      return leftOwner.sequence - rightOwner.sequence;
-    });
-    orderedOwnerIds.length = 0;
     let index = 0;
-    for (const [ownerId, owner] of owners) {
-      orderedOwnerIds.push(ownerId);
-      placeByOwner.set(ownerId, index);
-      index += owner.rowCount;
+    let rank = 0;
+    rankOwnedLast = -1;
+    while (rank < slotWalk.length) {
+      const ownerIds = ownerIdsBySlot.get(slotWalk[rank]);
+      if (ownerIds) {
+        for (const ownerId of ownerIds) {
+          const owner = ownerById.get(ownerId);
+          owner.placeSignal.value = index;
+          index += owner.rowCount;
+        }
+        rankOwnedLast = rank;
+      }
+      rank++;
     }
     rowTotal = index;
-    totalSignal.value = rowTotal;
+    totalSignal.value = index;
   };
-  // Whether nothing that has taken a place stands after this one.
-  const standsLast = owner => {
-    if (orderedOwnerIds.length === 0) {
-      return true;
+  const addToSlot = (slotId, ownerId) => {
+    const ownerIds = ownerIdsBySlot.get(slotId);
+    if (ownerIds) {
+      ownerIds.push(ownerId);
+    } else {
+      ownerIdsBySlot.set(slotId, [ownerId]);
+    }
+  };
+  const removeFromSlot = (slotId, ownerId) => {
+    const ownerIds = ownerIdsBySlot.get(slotId);
+    if (!ownerIds) {
+      return;
     }
-    const lastOwner = ownerById.get(orderedOwnerIds[orderedOwnerIds.length - 1]);
-    const comparison = comparePath(pathOf(lastOwner.slotId), pathOf(owner.slotId));
-    if (comparison !== 0) {
-      return comparison < 0;
+    const index = ownerIds.indexOf(ownerId);
+    if (index !== -1) {
+      ownerIds.splice(index, 1);
+    }
+    if (ownerIds.length === 0) {
+      ownerIdsBySlot.delete(slotId);
+    }
+  };
+  // A slot the walk no longer names: whatever stood in it is gone, and so is
+  // whatever a walk inside it had declared.
+  const dropSlot = slotId => {
+    const ownerIds = ownerIdsBySlot.get(slotId);
+    if (ownerIds) {
+      for (const ownerId of ownerIds) {
+        ownerById.delete(ownerId);
+      }
+      ownerIdsBySlot.delete(slotId);
+    }
+    const childSlotIds = slotIdsByParent.get(slotId);
+    if (childSlotIds) {
+      slotIdsByParent.delete(slotId);
+      for (const childSlotId of childSlotIds) {
+        dropSlot(childSlotId);
+      }
     }
-    return lastOwner.sequence < owner.sequence;
   };
   const virtual = {
     totalSignal,
@@ -65486,40 +65492,30 @@ const createListVirtual = () => {
     renderSkeleton: undefined,
     // The children a walk stands over, in order — said in one call, before any
     // of them renders, so that what a child asks next is answered against the
-    // whole picture and not against the children that happened to render first.
+    // whole picture and not against the children that happened to render
+    // first. Said again on every render of the walk, and heard only when
+    // something moved.
     declareSlots: (parentSlotId, slotIds) => {
-      const slotIdSet = new Set(slotIds);
-      for (const [slotId, slot] of slotById) {
-        if (slot.parentId === parentSlotId && !slotIdSet.has(slotId)) {
-          dropSlot(slotId);
-          pathCache.clear();
-          placesStale = true;
-        }
+      const slotIdsPrevious = slotIdsByParent.get(parentSlotId);
+      if (slotIdsPrevious && sameSlotIds(slotIdsPrevious, slotIds)) {
+        return;
       }
-      let order = 0;
-      for (const slotId of slotIds) {
-        const slot = slotById.get(slotId);
-        if (!slot) {
-          // A slot nothing stands in yet moves nobody: the child that takes it
-          // says so itself, when it renders.
-          slotById.set(slotId, {
-            parentId: parentSlotId,
-            order
-          });
-        } else if (slot.order !== order) {
-          slot.order = order;
-          pathCache.clear();
-          placesStale = true;
+      if (slotIdsPrevious) {
+        const slotIdSet = new Set(slotIds);
+        for (const slotId of slotIdsPrevious) {
+          if (!slotIdSet.has(slotId)) {
+            dropSlot(slotId);
+          }
         }
-        order++;
-      }
-      // Now, rather than when the first child asks: the walk has just said
-      // where everything stands, so every place can be settled once instead of
-      // once per child.
-      if (placesStale) {
-        refreshPlaces();
       }
+      slotIdsByParent.set(parentSlotId, slotIds);
+      rebuildWalk();
+      refreshPlaces();
     },
+    // Whether something has taken this slot for its own: what it renders
+    // inside is then its to place (a run draws its groups with their rows
+    // already placed), and no walk inside it has anything to declare.
+    slotHasOwner: slotId => ownerIdsBySlot.has(slotId),
     // Whether any run of rows lives in this list: what makes a render window
     // mean anything (see List's renderBudget).
     hasRuns: () => locatorByOwner.size > 0,
@@ -65539,127 +65535,129 @@ const createListVirtual = () => {
       }
       return null;
     },
-    // The place the slot's rows start at. Asked again on every render of the
-    // child and answered with the same number for as long as nothing moved —
-    // and answered at all for a child that does not ask again, which is the
-    // point of taking by slot.
+    // The place the owner's rows start at — read from a signal, so that the
+    // owner is rendered again when it moves (see createListVirtual). Asked on
+    // every render, and answered without a second look for as long as the
+    // owner stands in the same slot for the same number of rows.
     take: (ownerId, rowCount, slotId) => {
-      const previous = ownerById.get(ownerId);
-      if (previous && previous.slotId === slotId && previous.rowCount === rowCount) {
+      let owner = ownerById.get(ownerId);
+      if (owner) {
+        if (owner.slotId !== slotId || owner.rowCount !== rowCount) {
+          removeFromSlot(owner.slotId, ownerId);
+          addToSlot(slotId, ownerId);
+          owner.slotId = slotId;
+          owner.rowCount = rowCount;
+          placesStale = true;
+        }
         if (placesStale) {
           refreshPlaces();
         }
-        return placeByOwner.get(ownerId);
+        return owner.placeSignal.value;
+      }
+      if (placesStale) {
+        refreshPlaces();
       }
-      const owner = {
+      const rank = rankBySlot.get(slotId);
+      addToSlot(slotId, ownerId);
+      if (rank !== undefined && rank >= rankOwnedLast) {
+        owner = {
+          slotId,
+          rowCount,
+          placeSignal: signal(rowTotal)
+        };
+        ownerById.set(ownerId, owner);
+        rowTotal += rowCount;
+        rankOwnedLast = rank;
+        totalSignal.value = rowTotal;
+        return owner.placeSignal.value;
+      }
+      owner = {
         slotId,
         rowCount,
-        sequence: previous ? previous.sequence : sequence++
+        placeSignal: signal(0)
       };
       ownerById.set(ownerId, owner);
-      if (!previous && !placesStale && standsLast(owner)) {
-        orderedOwnerIds.push(ownerId);
-        placeByOwner.set(ownerId, rowTotal);
-        rowTotal += rowCount;
-        totalSignal.value = rowTotal;
-        return placeByOwner.get(ownerId);
-      }
-      placesStale = true;
       refreshPlaces();
-      return placeByOwner.get(ownerId);
+      return owner.placeSignal.value;
     },
-    // The child stands for no row of the collection any more: it was filtered
-    // out by a search, or it is gone.
+    // The owner stands for no row of the collection: it was filtered out by a
+    // search, or it is gone.
     drop: ownerId => {
-      if (!ownerById.delete(ownerId)) {
+      const owner = ownerById.get(ownerId);
+      if (!owner) {
         return;
       }
-      placeByOwner.delete(ownerId);
-      refreshPlaces();
+      ownerById.delete(ownerId);
+      removeFromSlot(owner.slotId, ownerId);
+      if (placesStale) {
+        return;
+      }
+      placesStale = true;
+      queueMicrotask(() => {
+        if (placesStale) {
+          refreshPlaces();
+        }
+      });
     }
   };
   return virtual;
 };
-// The walk that gives the list's children their places. It names a slot for
-// each of them — after the child's key when it has one, after its position
-// otherwise, which is how preact itself tells unkeyed children apart — and says
-// the whole set to the list's virtual before any of them renders.
+const sameSlotIds = (left, right) => {
+  if (left.length !== right.length) {
+    return false;
+  }
+  let index = 0;
+  while (index < left.length) {
+    if (left[index] !== right[index]) {
+      return false;
+    }
+    index++;
+  }
+  return true;
+};
+
+// The walk that gives the list's children their places: a slot for each of
+// them, declared to the list's virtual all at once before any child renders,
+// and handed to the child through a provider of its own — which is what lets
+// the row reach it however deep the caller buried it in components of theirs.
 //
-// Wrapping each child in its own provider is what makes a slot reach the row
-// inside it, however deep the caller buried it, and what wakes a row whose slot
-// moved: the value it holds is the same object for as long as the child stays
-// where it was.
+// A slot is named the way preact tells the child apart: by key when it has
+// one, by position otherwise, and inside the array it was given in — a nested
+// array is one child to preact, so what follows the array keeps its name
+// however many rows the array holds. A child preact would not render (null,
+// a boolean) has no slot: it is not there.
 const ListDeclaredChildren = ({
   children
 }) => {
   const virtual = useContext(ListVirtualContext);
-  const parentSlot = useContext(ListSlotContext);
-  const parentSlotId = parentSlot ? parentSlot.id : null;
-  const slotsRef = useRef(new Map());
-  const slotsPrevious = slotsRef.current;
-  const childArray = flattenChildren(children);
-  const slots = new Map();
-  const slotIds = [];
-  let index = 0;
-  for (const child of childArray) {
-    const childKey = child && child.key !== undefined && child.key !== null ? `k${child.key}` : `i${index}`;
-    let slotId = parentSlotId === null ? childKey : `${parentSlotId}/${childKey}`;
-    if (slots.has(slotId)) {
-      // Two children answering to the same key: preact cannot tell them apart
-      // either, but a slot each is what keeps them both on screen.
-      slotId = `${slotId}#${index}`;
-    }
-    const slotPrevious = slotsPrevious.get(slotId);
-    slots.set(slotId, slotPrevious && slotPrevious.order === index ? slotPrevious : {
-      id: slotId,
-      order: index
-    });
-    slotIds.push(slotId);
-    index++;
+  const parentSlotId = useContext(ListSlotContext);
+  if (parentSlotId !== null && virtual.slotHasOwner(parentSlotId)) {
+    return children;
   }
-  slotsRef.current = slots;
+  const slotIds = [];
+  const declared = [];
+  declareChildren(children, parentSlotId === null ? "" : `${parentSlotId}/`, slotIds, declared);
   virtual.declareSlots(parentSlotId, slotIds);
   return jsx(Fragment$1, {
-    children: childArray.map((child, childIndex) => {
-      const slotId = slotIds[childIndex];
-      return jsx(ListSlotContext.Provider, {
-        value: slots.get(slotId),
-        children: child
-      }, slotId);
-    })
+    children: declared
   });
 };
-// The children as preact will diff them: nested arrays flattened, and a child
-// that renders nothing still holding its position — a conditional child must
-// not move the ones after it as it comes and goes.
-const flattenChildren = (children, flat = []) => {
-  if (Array.isArray(children)) {
-    for (const child of children) {
-      flattenChildren(child, flat);
-    }
-    return flat;
-  }
-  flat.push(children);
-  return flat;
-};
-
-// Two slots compared by where they sit (see pathOf). A slot no walk declared
-// sorts after them all: it stands nowhere the list knows of.
-const comparePath = (leftPath, rightPath) => {
-  if (leftPath === null) {
-    return rightPath === null ? 0 : 1;
-  }
-  if (rightPath === null) {
-    return -1;
-  }
-  let depth = 0;
-  while (depth < leftPath.length && depth < rightPath.length) {
-    if (leftPath[depth] !== rightPath[depth]) {
-      return leftPath[depth] - rightPath[depth];
+const declareChildren = (children, prefix, slotIds, declared) => {
+  const childArray = Array.isArray(children) ? children : [children];
+  let index = 0;
+  for (const child of childArray) {
+    if (Array.isArray(child)) {
+      declareChildren(child, `${prefix}${index}/`, slotIds, declared);
+    } else if (child !== null && child !== undefined && child !== false && child !== true) {
+      const slotId = child.key === undefined || child.key === null ? `${prefix}i${index}` : `${prefix}k${child.key}`;
+      slotIds.push(slotId);
+      declared.push(jsx(ListSlotContext.Provider, {
+        value: slotId,
+        children: child
+      }, slotId));
     }
-    depth++;
+    index++;
   }
-  return leftPath.length - rightPath.length;
 };
 const VISIBILITY_HIDDEN_STYLE = {
   visibility: "hidden"
@@ -65795,7 +65793,7 @@ const ListItems = ({
 }) => {
   const ownerId = useId();
   const virtual = useContext(ListVirtualContext);
-  const slot = useContext(ListSlotContext);
+  const slotId = useContext(ListSlotContext);
   const renderWindow = useContext(RenderWindowContext);
   const separator = useContext(SeparatorContext);
   const store = useItemStore({
@@ -65817,7 +65815,7 @@ const ListItems = ({
       skeletonRow.rowMinHeight = `${virtualItemSize}px`;
     }
   }
-  const runStart = virtual.take(ownerId, store.rowCount, slot ? slot.id : ownerId);
+  const runStart = virtual.take(ownerId, store.rowCount, slotId);
   const runEnd = runStart + store.rowCount;
   const getItemAt = index => store.getItem(index);
   const windowFrom = renderWindow.start > runStart ? renderWindow.start : runStart;