@jsenv/navi 0.29.434 → 0.29.435

package/dist/dev/jsenv_navi.js

@@ -12938,15 +12938,12 @@ const useNavStateWithWarnings = (id, options) => {
     ownerRef.current = {};
   }
   const owner = ownerRef.current;
-  // Claimed during render so warnAboutOrphanGeneratedKeys sees every id of
-  // the commit, including the ones whose effect has not run yet. The conflict
-  // is judged in the effect: when a screen replaces another in one commit,
-  // preact renders the new children before unmounting the old ones, so at
-  // render time the id may still be held by a component about to go.
-  if (id !== undefined && !idUsageMap.has(id)) {
-    idUsageMap.set(id, { owner, stackTrace: new Error().stack });
-  }
 
+  // Claimed in the effect, never during render: only the effect has a cleanup
+  // to give the id back, and a render is not always followed by its effects.
+  // A page parked by a Suspense boundary (every hook cleanup run), rendered
+  // again and taken down before the paint, leaves a render-time claim holding
+  // the id for nobody — and the next mount reads a conflict.
   useEffect(() => {
     if (id === undefined) {
       return undefined;
@@ -12960,12 +12957,9 @@ This can cause UI state conflicts and unexpected behavior.
 Consider using unique IDs for each component instance.`,
       );
     } else {
-      // Also set when absent: preact/compat's Suspense parks a subtree by
-      // running every hook cleanup in it, and the render resuming it carries
-      // the same id.
       idUsageMap.set(id, { owner, stackTrace: new Error().stack });
     }
-    warnAboutOrphanGeneratedKeys();
+    scheduleOrphanGeneratedKeysCheck();
     return () => {
       if (idUsageMap.get(id)?.owner === owner) {
         idUsageMap.delete(id);
@@ -12981,6 +12975,20 @@ Consider using unique IDs for each component instance.`,
 // and the mount coming back to the entry generates another id: the state is
 // there, and nothing reads it. Reported when a component mounting on the entry
 // finds such a key, the moment someone expected the state back.
+//
+// Checked once every effect of the flush has claimed its id: a component
+// whose effect comes later in the same flush is not an orphan.
+let orphanGeneratedKeysCheckScheduled = false;
+const scheduleOrphanGeneratedKeysCheck = () => {
+  if (orphanGeneratedKeysCheckScheduled) {
+    return;
+  }
+  orphanGeneratedKeysCheckScheduled = true;
+  queueMicrotask(() => {
+    orphanGeneratedKeysCheckScheduled = false;
+    warnAboutOrphanGeneratedKeys();
+  });
+};
 const warnAboutOrphanGeneratedKeys = () => {
   const state = browserIntegration.getDocumentState();
   if (!state) {
@@ -54662,6 +54670,26 @@ const Expandable = props => {
     return stopRide;
   };
 
+  // A silent change is a state the page was already in (see openEffect): it
+  // lands at once. Not playing a reveal is not enough — the stylesheet's own
+  // transition plays it whenever the previous state's style was resolved
+  // before the render: an expandable mounted closed and measured in the same
+  // commit (a List sizing its items) before its deferred mount-time open, or
+  // one kept on screen across the page change.
+  const renderWithoutMovement = (contentContainer, render) => {
+    if (!animation || !contentContainer) {
+      flushSyncRendering(render);
+      return;
+    }
+    contentContainer.style.transitionProperty = "none";
+    flushSyncRendering(render);
+    // The new style must be resolved while transitions are off — re-enabled
+    // in the same recalc, the change would transition after all.
+    // eslint-disable-next-line no-unused-expressions
+    getComputedStyle(contentContainer).transitionProperty;
+    contentContainer.style.transitionProperty = "";
+  };
+
   // What opening LOOKS like here, and how to undo it — the one thing an
   // expandable owns that a popup does not (see open_controller.js). Reassigned
   // on every render so it always closes over the latest props.
@@ -54682,10 +54710,15 @@ const Expandable = props => {
     // reopening during a collapse — read while the DOM still says closed.
     const startRect = revealing ? contentContainer.getBoundingClientRect() : null;
     cancelSettleWatch();
-    flushSyncRendering(() => {
+    const renderOpened = () => {
       setOpened(true);
       setSettled(!revealing);
-    });
+    };
+    if (silent) {
+      renderWithoutMovement(contentContainer, renderOpened);
+    } else {
+      flushSyncRendering(renderOpened);
+    }
     if (hasAction) {
       runUnwatched(() => effectiveAction.run());
     }
@@ -54724,16 +54757,22 @@ const Expandable = props => {
       cancelSettleWatch();
       // `silent`: closed by the navigation that puts another page on screen,
       // which is its movement (see page_change.js).
-      const collapsing = animation && !closeEvent.detail.silent && Boolean(contentContainerAtClose);
+      const silentClose = Boolean(closeEvent.detail.silent);
+      const collapsing = animation && !silentClose && Boolean(contentContainerAtClose);
       if (collapsing) {
         // Now, while the content is still fully laid out — the collapsing
         // track uncovers a content frozen at that size.
         freezeContentSize();
       }
-      flushSyncRendering(() => {
+      const renderClosed = () => {
         setOpened(false);
         setSettled(!collapsing);
-      });
+      };
+      if (silentClose) {
+        renderWithoutMovement(contentContainerAtClose, renderClosed);
+      } else {
+        flushSyncRendering(renderClosed);
+      }
       if (restoreFocus) {
         restoreFocus(closeEvent);
       } else if (focusedBeforeClose && contentContainerAtClose && contentContainerAtClose.contains(focusedBeforeClose)) {
@@ -74651,6 +74690,45 @@ const LIST_STYLE_CSS_VARS = {
   backgroundColor: "--list-background-color"
 };
 const LIST_PSEUDO_CLASSES = [":hover", ":focus", ":focus-visible", ":focus-within", ":read-only", ":disabled", ":-navi-void", ":-navi-expanded"];
+// Two lists mounted at once under one `id` are one entry to the scroll memory:
+// each overwrites the other's position (see docs/scroll.md). Said the moment
+// the second one mounts, once per id — on a route transition, that is the page
+// arriving while the page being left is still mounted, hidden.
+const createSharedRememberedIdWarning = () => {
+  const mountedListsById = new Map();
+  const warnedIdSet = new Set();
+  return (listId, rememberScroll, ref) => {
+    useLayoutEffect(() => {
+      if (!rememberScroll) {
+        return undefined;
+      }
+      let mountedLists = mountedListsById.get(listId);
+      if (!mountedLists) {
+        mountedLists = new Set();
+        mountedListsById.set(listId, mountedLists);
+      }
+      const mounted = {
+        element: ref.current
+      };
+      if (mountedLists.size > 0 && !warnedIdSet.has(listId)) {
+        warnedIdSet.add(listId);
+        const [other] = mountedLists;
+        console.warn(`<List id="${listId}"> mounted while another list with this id is mounted. The position a list comes back to is kept under its id, so the two overwrite each other's: the one arriving can open where the other one was, or come back at its top. Lists are mounted together on one page, under a popup, in a bar every page keeps, and during a route transition, whose page being left stays mounted until the movement ends. Give each list an id naming it in the app (a component drawing a list on several pages takes its id from the page), or set scrollResetOnNavigation on a list with no use for coming back. See docs/scroll.md.`, {
+          list: mounted.element,
+          otherList: other.element
+        });
+      }
+      mountedLists.add(mounted);
+      return () => {
+        mountedLists.delete(mounted);
+        if (mountedLists.size === 0) {
+          mountedListsById.delete(listId);
+        }
+      };
+    }, [listId, rememberScroll]);
+  };
+};
+const useWarnSharedRememberedId = createSharedRememberedIdWarning() ;
 const useListScrollSync = ({
   ref,
   listItems,
@@ -75557,6 +75635,7 @@ const useListScrollSync = ({
       }
     };
   }, []);
+  useWarnSharedRememberedId(listId, rememberScroll, ref);
 
   // A list that gets narrower rewraps every item it holds, so everything below
   // moves and the reader loses their place — the very thing scrolling a long