@jsenv/navi 0.29.449 → 0.29.450

package/dist/jsenv_navi.js

@@ -72291,6 +72291,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,
@@ -74460,6 +74463,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) {
@@ -75931,6 +75935,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,
@@ -75946,13 +75951,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,
@@ -78087,6 +78094,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
@@ -78202,6 +78218,7 @@ const ListItemsRun = ({
     count,
     itemsAction,
     settling,
+    pageSize: runProps.pageSize,
     memoryBudget,
     onRequestStateChange,
     onCountChange
@@ -78470,9 +78487,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) {
@@ -78872,6 +78897,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;
@@ -78889,6 +78926,7 @@ const useItemStore = ({
   count,
   itemsAction,
   settling,
+  pageSize,
   memoryBudget,
   onRequestStateChange,
   onCountChange
@@ -79082,8 +79120,17 @@ const useItemStore = ({
   });
   // 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).
@@ -79102,7 +79149,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);
@@ -79150,6 +79196,8 @@ 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 () => {
@@ -79213,11 +79261,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;
@@ -79287,26 +79331,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 = () => {
@@ -79320,6 +79364,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.
@@ -79474,9 +79524,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();
+        });
       });
     }
   };