@jsenv/navi 0.29.448 → 0.29.450

package/dist/dev/jsenv_navi.js

@@ -4988,9 +4988,11 @@ const actionRunEffect = (
     return params;
   });
   // Whether the getter asks for a run is read off what it returned, never off
-  // the params of the instance it leads to: an action handed here holding
-  // params of its own (an instance, a binding) keeps them when the getter
-  // returns nothing — and nothing must still run nothing.
+  // the instances it moves between: an action handed here holding params of
+  // its own (an instance, a binding) keeps them when the getter returns
+  // nothing — and nothing must still run nothing; an instance reset under the
+  // effect (a same-resource DELETE) reads as never run — and the next params
+  // the getter asks for must still run.
   let asking = Boolean(actionParamsSignal.peek());
   const actionRunnedByThisEffect = action.bindParams(actionParamsSignal, {
     debounce,
@@ -5017,11 +5019,7 @@ const actionRunEffect = (
         return;
       }
 
-      if (
-        actionTargetPrevious &&
-        !actionTargetPrevious.isPrerun &&
-        actionTarget
-      ) {
+      if (actionTargetPrevious && actionTarget) {
         // params changed
         if (!asking) {
           // falsy params, don't run
@@ -73699,6 +73697,9 @@ const createListItems = () => {
     // what puts the view back once they have (see VirtualFiller).
     captureAnchor: () => {},
     holdViewStill: () => {},
+    // The list has asked for a window no render has drawn yet: a run holding
+    // the one before has nothing to ask for it (see useRequestMissing).
+    windowOnItsWay: () => false,
     horizontal: false,
     virtualItemSizeSignal: null,
     roomById,
@@ -75907,6 +75908,7 @@ const useListScrollSync = ({
   const renderWindowRef = useRef(null);
   // A window was asked for that no render has drawn yet (see settleWindow).
   const windowAskedRef = useRef(false);
+  listItems.windowOnItsWay = () => windowAskedRef.current;
   const windowLeavesItemsOut = () => {
     const renderWindow = renderWindowRef.current;
     if (!renderWindow) {
@@ -77401,6 +77403,7 @@ const useListScrollSync = ({
   }, [scrollerElResolved]);
   holdWindow();
   // Whatever was asked for until now is what this render draws.
+  const windowWasAsked = windowAskedRef.current;
   windowAskedRef.current = false;
   const {
     start: windowStart,
@@ -77416,13 +77419,15 @@ const useListScrollSync = ({
   // column — started anywhere but on a line, every item drawn would sit in the
   // column of another. Started on one, an item is in the column its place says
   // whatever the window frames. The same object while the numbers hold, so the
-  // runs are not told about a window that did not move.
+  // runs are not told about a window that did not move — except after a window
+  // was asked for: a run waiting for it to ask (see useRequestMissing) must be
+  // told, even when the window framed comes back to the same numbers.
   const windowDrawnRef = useRef(null);
   const drawnStart = windowStart - windowStart % itemsPerLine;
   const endPastLine = windowEnd % itemsPerLine;
   const drawnEnd = endPastLine === 0 ? windowEnd : windowEnd + itemsPerLine - endPastLine;
   let windowDrawn = windowDrawnRef.current;
-  if (!windowDrawn || windowDrawn.start !== drawnStart || windowDrawn.end !== drawnEnd || windowDrawn.itemsPerLine !== itemsPerLine) {
+  if (!windowDrawn || windowWasAsked || windowDrawn.start !== drawnStart || windowDrawn.end !== drawnEnd || windowDrawn.itemsPerLine !== itemsPerLine) {
     windowDrawn = {
       start: drawnStart,
       end: drawnEnd,
@@ -79661,6 +79666,15 @@ const VISIBILITY_HIDDEN_STYLE = {
  * @param {(range: object) => any} [props.itemsAction]
  *   Where the items come from when the collection is read a slice at a time:
  *   a resource's range reader (`RESOURCE.GET_RANGE.bindParams(...)`).
+ * @param {number} [props.count]
+ *   How many items the collection holds, when the app knows it before the
+ *   first answer: a total shown elsewhere, a profile saying how many there are.
+ *   The list is then as long as the collection from its first frame: it opens
+ *   where it is held, the scrollbar right, and asks for that window. Without
+ *   it, the run stands for skeletons up to the item the list opens on and a
+ *   page past it, until the first answer says how many there are. Not worth a
+ *   request of its own, since the first answer gives it (see docs/scroll.md,
+ *   "What a run knows when it opens").
  * @param {number} [props.debounce]
  *   Milliseconds the reader must hold still before the run draws the
  *   collection it reads: params following a field as the user types
@@ -79776,6 +79790,7 @@ const ListItemsRun = ({
     count,
     itemsAction,
     settling,
+    pageSize: runProps.pageSize,
     memoryBudget,
     onRequestStateChange,
     onCountChange
@@ -80044,9 +80059,17 @@ const useRunItems = (store, {
         // A hole with nothing on either side (the scrollbar was thrown into
         // territory never visited): grow it both ways around what is on
         // screen.
-        const grow = Math.floor((itemsPerPage - holeSize) / 2);
-        askStart = missingStart - grow;
-        askEnd = missingEnd + grow;
+        askStart = missingStart - Math.floor((itemsPerPage - holeSize) / 2);
+        askEnd = askStart + itemsPerPage - 1;
+        // Cut by an edge of the run (the first page, the last one), the page
+        // takes the room on the other side.
+        if (askStart < runStart) {
+          askEnd += runStart - askStart;
+          askStart = runStart;
+        } else if (askEnd > runEnd - 1) {
+          askStart -= askEnd - (runEnd - 1);
+          askEnd = runEnd - 1;
+        }
       }
     }
     if (askStart < runStart) {
@@ -80446,6 +80469,18 @@ const ListItemsFailure = ({
 const ITEM_STORE_MAX_DEFAULT = 1000;
 const ITEM_STORE_KEEP_AROUND = 250;
 const COUNT_NOT_SAID = {};
+
+// The index of the item the list is held at, when the hold names one: a number,
+// or a position remembered with its index (see placeWhereHeld).
+const readHeldIndex = scrolled => {
+  if (typeof scrolled === "number") {
+    return scrolled;
+  }
+  if (scrolled && typeof scrolled === "object" && typeof scrolled.index === "number") {
+    return scrolled.index;
+  }
+  return null;
+};
 const rangeIsSame = (a, b) => {
   if (!a || !b) {
     return a === b;
@@ -80463,6 +80498,7 @@ const useItemStore = ({
   count,
   itemsAction,
   settling,
+  pageSize,
   memoryBudget,
   onRequestStateChange,
   onCountChange
@@ -80557,6 +80593,68 @@ const useItemStore = ({
   if (staleRanksRef.current === null) {
     staleRanksRef.current = restored ? new Set(pages.byIndex.keys()) : new Set();
   }
+  const takeInPage = ({
+    pageItems,
+    pageStart,
+    pageCount
+  }) => {
+    // An item from before is gone from where it stood when the page puts
+    // it at another rank (it would be drawn twice), or when its rank is
+    // past the end of the collection.
+    const staleRanks = staleRanksRef.current;
+    const pageEnd = pageStart + pageItems.length;
+    let dropped = false;
+    if (staleRanks.size > 0) {
+      const pageIds = new Set();
+      for (const pageItem of pageItems) {
+        if (pageItem && pageItem.id !== undefined) {
+          pageIds.add(pageItem.id);
+        }
+      }
+      for (const rank of staleRanks) {
+        if (rank >= pageStart && rank < pageEnd) {
+          continue;
+        }
+        const staleItem = pages.byIndex.get(rank);
+        if (rank >= pageCount || staleItem && pageIds.has(staleItem.id)) {
+          staleRanks.delete(rank);
+          pages.byIndex.delete(rank);
+          dropped = true;
+        }
+      }
+    }
+    let i = 0;
+    while (i < pageItems.length) {
+      pages.byIndex.set(pageStart + i, pageItems[i]);
+      staleRanks.delete(pageStart + i);
+      i++;
+    }
+    pages.count = pageCount;
+    // Which rank holds which id, kept by the source so a list drawing
+    // this collection again finds it drawn (see readComposition above).
+    if (itemsAction.writeComposition) {
+      itemsAction.writeComposition({
+        byIndex: pages.byIndex,
+        count: pageCount,
+        replace: dropped
+      });
+    }
+  };
+  // The pages answered since the last render, taken in by the render and not
+  // as they land: what the list reads of the run — how many items it stands for
+  // (see listItems.take), where an item sits (its locator) — then moves in one
+  // step. Taken in on landing, an item could be located past the count the list
+  // still holds, and a list held on it would aim its window there at every
+  // render, framed back each time.
+  const pagesLandedRef = useRef([]);
+  const pagesLanded = pagesLandedRef.current;
+  const pagesTakenIn = pagesLanded.length > 0;
+  if (pagesTakenIn) {
+    pagesLandedRef.current = [];
+    for (const page of pagesLanded) {
+      takeInPage(page);
+    }
+  }
   const [refreshing, setRefreshing] = useState(false);
   // A source that says when what it reads has moved (a resource range reader
   // does: see rerunOn.GET_RANGE) is heard here — a write deciding who belongs
@@ -80587,19 +80685,33 @@ const useItemStore = ({
   const [failure, setFailure] = useState(null);
   const listItems = useContext(ListItemsContext);
   // The items are there, which is what the list waits for to place itself on the
-  // item it is held at (see placeWhereHeld). Said from an effect: a signal read
-  // during this very render must not be written during it.
+  // item it is held at (see placeWhereHeld). Said from an effect, once the run
+  // has drawn them: a signal read during this very render must not be written
+  // during it.
   useLayoutEffect(() => {
-    if (!inMemory || itemsHeldRef.current) {
+    if (inMemory) {
+      if (itemsHeldRef.current) {
+        return;
+      }
+      itemsHeldRef.current = true;
+    } else if (!pagesTakenIn) {
       return;
     }
-    itemsHeldRef.current = true;
     listItems.pagesSignal.value = listItems.pagesSignal.peek() + 1;
   });
   // Before the first answer a run does not know how many items it stands for.
   // It stands for a page of them: a list that is about to be filled looks
-  // like items on their way, not like an empty list.
-  const itemCount = pages.count ?? count ?? listItems.pageSize;
+  // like items on their way, not like an empty list. A list held on an item
+  // (see placeWhereHeld) is about to be filled there: the run stands for the
+  // items up to that one and a page past it, so the window frames the item
+  // before any answer, and what the run asks for first is that window.
+  const itemsPerPage = pageSize || listItems.pageSize;
+  const countKnown = pages.count ?? count;
+  let itemCount = countKnown;
+  if (itemCount === undefined) {
+    const heldIndex = readHeldIndex(listItems.scrolled);
+    itemCount = heldIndex === null ? itemsPerPage : heldIndex + itemsPerPage;
+  }
   // The items drawn are from before while they are read again, and while the
   // collection that replaces them waits for its params to hold still (see
   // useSettledReader).
@@ -80618,7 +80730,6 @@ const useItemStore = ({
   // say: the count the source answered or the caller gave, never the page the
   // run stands for before it knows. Said by each run on its first commit, so a
   // run drawing another collection takes back what the one before said.
-  const countKnown = pages.count ?? count;
   const onCountChangeRef = useRef(onCountChange);
   onCountChangeRef.current = onCountChange;
   const countSaidRef = useRef(COUNT_NOT_SAID);
@@ -80665,8 +80776,13 @@ const useItemStore = ({
   };
   // A list taken off the screen while it was asking leaves nothing ringing
   // behind it: whoever is drawing "looking for items" has to stop.
+  const mountedRef = useRef(false);
+  // Which render's ask is the one to send (see useRequestMissing).
+  const askTurnRef = useRef(0);
   useLayoutEffect(() => {
+    mountedRef.current = true;
     return () => {
+      mountedRef.current = false;
       if (requestStateRef.current.busy && onRequestStateChangeRef.current) {
         onRequestStateChangeRef.current({
           busy: false,
@@ -80726,11 +80842,7 @@ const useItemStore = ({
       // what it hands over (see rankOf). The one thing read from the list
       // itself is where it is being held, which is a list item.
       const rankOfIndex = itemIndex => itemIndex - runStart;
-      // The very first ask has nothing to go on: the run does not even know
-      // how many items there are, so it asks for the items the list would open
-      // on — counting back from the end when that is where it opens, the way
-      // an HTTP range does.
-      const budget = listItems.pageSize;
+      const budget = itemsPerPage;
       let start = missingStart;
       let end = missingEnd;
       let around;
@@ -80800,26 +80912,26 @@ const useItemStore = ({
           around = firstStale.id;
         }
       } else if (pages.count === undefined) {
+        // The very first ask is what the window misses, like any other: the
+        // run stands for the items up to where the list opens (see
+        // itemCount), so the window frames that place already.
         const scrolled = listItems.scrolled;
-        if (scrolled === "end") {
-          // Counting back from the end, the way an HTTP range does: a list
-          // opening on its last items asks for them before it knows how many
-          // there are.
+        if (scrolled === "end" && countKnown === undefined) {
+          // Except the end, which no window can frame before the count is
+          // known: counted back from, the way an HTTP range does.
           start = -budget;
           end = -1;
-        } else if (scrolled && scrolled.id !== undefined) {
-          // Asked for by name, since a place can have changed hands since it
-          // was written down — but the place it had is sent too, so a source
-          // that paginates by index has something to work with, and the answer
-          // says where it really landed (see the page's own `start`).
-          const from = typeof scrolled.index === "number" ? rankOfIndex(scrolled.index) - Math.floor(budget / 2) : 0;
-          start = from < 0 ? 0 : from;
-          end = start + budget - 1;
+        } else if (start === -1) {
+          // The window does not reach the run yet: its first page is asked
+          // for all the same, which says how many items it stands for.
+          start = 0;
+          end = budget - 1;
+        }
+        if (scrolled && scrolled.id !== undefined) {
+          // Asked for by name too, since a place can have changed hands since
+          // it was written down: the answer says where it really landed (see
+          // the page's own `start`).
           around = scrolled.id;
-        } else {
-          const first = typeof scrolled === "number" ? rankOfIndex(scrolled) - Math.floor(budget / 2) : 0;
-          start = first < 0 ? 0 : first;
-          end = start + budget - 1;
         }
       }
       const ask = () => {
@@ -80833,6 +80945,12 @@ const useItemStore = ({
         const debugAsk = outcome => {
           debugScroll(`ask ${start}-${end}: ${outcome}`, `(revalidating=${revalidating} holdPending=${listItems.holdPending} count=${pages.count})`);
         };
+        if (listItems.windowOnItsWay()) {
+          // The list moved its window after this render drew the one it had:
+          // the run draws the new one in the list's next pass, and asks then.
+          debugAsk("the list is moving its window");
+          return;
+        }
         if (start === -1) {
           // Nothing missing and nothing to revalidate: the run has what it
           // draws.
@@ -80928,51 +81046,21 @@ const useItemStore = ({
           const pageItems = Array.isArray(page) ? page : page.items;
           const pageStart = Array.isArray(page) ? 0 : page.start ?? 0;
           const pageCount = Array.isArray(page) ? pageItems.length : page.count ?? pageStart + pageItems.length;
+          const pageLanded = {
+            pageItems,
+            pageStart,
+            pageCount
+          };
+          if (!mountedRef.current) {
+            // No render is coming to take it in, and the source still keeps
+            // what came back for the next list drawing this collection.
+            takeInPage(pageLanded);
+            return;
+          }
           // Before the items land: what is on screen has to stay where it is,
           // and the DOM still shows the state to hold onto.
           listItems.captureAnchor();
-          // An item from before is gone from where it stood when the page puts
-          // it at another rank (it would be drawn twice), or when its rank is
-          // past the end of the collection.
-          const staleRanksNow = staleRanksRef.current;
-          const pageEnd = pageStart + pageItems.length;
-          let dropped = false;
-          if (staleRanksNow.size > 0) {
-            const pageIds = new Set();
-            for (const pageItem of pageItems) {
-              if (pageItem && pageItem.id !== undefined) {
-                pageIds.add(pageItem.id);
-              }
-            }
-            for (const rank of staleRanksNow) {
-              if (rank >= pageStart && rank < pageEnd) {
-                continue;
-              }
-              const staleItem = pages.byIndex.get(rank);
-              if (rank >= pageCount || staleItem && pageIds.has(staleItem.id)) {
-                staleRanksNow.delete(rank);
-                pages.byIndex.delete(rank);
-                dropped = true;
-              }
-            }
-          }
-          let i = 0;
-          while (i < pageItems.length) {
-            pages.byIndex.set(pageStart + i, pageItems[i]);
-            staleRanksNow.delete(pageStart + i);
-            i++;
-          }
-          pages.count = pageCount;
-          // Which rank holds which id, kept by the source so a list drawing
-          // this collection again finds it drawn (see readComposition above).
-          if (itemsAction.writeComposition) {
-            itemsAction.writeComposition({
-              byIndex: pages.byIndex,
-              count: pageCount,
-              replace: dropped
-            });
-          }
-          listItems.pagesSignal.value = listItems.pagesSignal.peek() + 1;
+          pagesLandedRef.current.push(pageLanded);
           setPageVersion(version => version + 1);
         };
         const failed = error => {
@@ -81017,9 +81105,20 @@ const useItemStore = ({
           done(result);
         }
       };
+      // Asked once the commit is over rather than from the effect: the list
+      // frames its window after its runs, in that same commit — sized on the
+      // screen, aimed at the item it is held on — and what the run asks for is
+      // the window the list settles on. A render coming meanwhile asks instead.
       useLayoutEffect(() => {
-        ask();
-        publishRequestState();
+        askTurnRef.current++;
+        const turn = askTurnRef.current;
+        queueMicrotask(() => {
+          if (turn !== askTurnRef.current || !mountedRef.current) {
+            return;
+          }
+          ask();
+          publishRequestState();
+        });
       });
     }
   };