@jsenv/navi 0.29.408 → 0.29.410

package/dist/dev/jsenv_navi.js

@@ -13145,12 +13145,13 @@ const useBoundAction = (action, actionParamsSignal) => {
     if (existingNoopAction) {
       return existingNoopAction;
     }
+    // Not bound to the params signal: nothing reads what a noop runs with, and
+    // a proxy following the signal would retarget (a new child action for each
+    // new value) at every change — for every button of a form, at every change
+    // of any of its fields.
     const noopAction = createAction(() => {}, { params: undefined });
-    const noopActionBound = actionParamsSignal
-      ? noopAction.bindParams(actionParamsSignal)
-      : noopAction;
-    noopActionRef.current = noopActionBound;
-    return noopActionBound;
+    noopActionRef.current = noopAction;
+    return noopAction;
   }
   const isFunction = typeof action === "function";
   if (!isFunction) {
@@ -13919,7 +13920,9 @@ const createControlValidation = (
 
     let newConstraintValidityState = { valid: true };
     const constraintSet = getConstraintSet();
-    const elementSig = getElementSignature(controller.ref.current);
+    // Only for the debug lines of a failure or a change: computed when one of
+    // them is written, not at every check (every notch of a wheel).
+    const elementSig = () => getElementSignature(controller.ref.current);
     // Not logged: every control checks its constraints on every interaction and
     // almost always passes, so this line alone was most of the debug output —
     // and with devtools open, formatting it costs a frame. What matters is a
@@ -13945,7 +13948,7 @@ const createControlValidation = (
         constraintValidityInfo.message,
       );
       debugUIState(
-        `${elementSig} constraint "${constraint.name}" failed -> ${constraintValidityInfo.message}`,
+        `${elementSig()} constraint "${constraint.name}" failed -> ${constraintValidityInfo.message}`,
       );
       const thisConstraintFailureInfo = {
         name: constraint.name,
@@ -14017,7 +14020,7 @@ const createControlValidation = (
       if (element) {
         debugUIState(
           event,
-          `${elementSig} constraint validity changed -> dispatch ${NAVI_VALIDITY_CHANGE_CUSTOM_EVENT}`,
+          `${elementSig()} constraint validity changed -> dispatch ${NAVI_VALIDITY_CHANGE_CUSTOM_EVENT}`,
         );
         dispatchPublicCustomEvent(element, NAVI_VALIDITY_CHANGE_CUSTOM_EVENT);
       }
@@ -14063,7 +14066,7 @@ const createControlValidation = (
     event,
     { report = false, fromRequestAction = false } = {},
   ) => {
-    const elementSig = getElementSignature(controller.ref.current);
+    const elementSig = () => getElementSignature(controller.ref.current);
     const isValid = checkValidity({ event, fromRequestAction });
     if (failingManagedControlValidity) {
       // Group/form case: find the actual failing leaf and report on it.
@@ -14085,7 +14088,7 @@ const createControlValidation = (
       if (report) {
         debugUIState(
           event,
-          `syncValidity ${elementSig}: has failing constraint and report=true -> reportValidity`,
+          `syncValidity ${elementSig()}: has failing constraint and report=true -> reportValidity`,
         );
         reportValidity({ event });
       } else if (failedConstraintInfo.status === "error") {
@@ -14095,12 +14098,12 @@ const createControlValidation = (
         // on the next action attempt via autoResetOnAction.
         debugUIState(
           event,
-          `syncValidity ${elementSig}: has error constraint and report=false -> keep callout open`,
+          `syncValidity ${elementSig()}: has error constraint and report=false -> keep callout open`,
         );
       } else {
         debugUIState(
           event,
-          `syncValidity ${elementSig}: has failing constraint but report=false -> close callout if any`,
+          `syncValidity ${elementSig()}: has failing constraint but report=false -> close callout if any`,
         );
         callout.removeOpenToken(VALIDATION_TOKEN, event);
       }
@@ -28087,6 +28090,7 @@ This prevents cross-test pollution and ensures clean state.`,
 
   // Store previous route states to detect changes
   const routePreviousStateMap = new WeakMap();
+  let previousPath = null;
   const updateRoutes = (
     url,
     {
@@ -28095,6 +28099,14 @@ This prevents cross-test pollution and ensures clean state.`,
     } = {},
   ) => {
     currentUrl = url;
+    // Whether a route matches is decided by the path alone: the search string
+    // only fills the params (see matchUrl). An address that keeps its path — a
+    // search param written, at every notch of a wheel bound to it — cannot make
+    // a route start or stop matching, so only the routes already matching are
+    // read again.
+    const path = urlWithoutSearchAndHash(url);
+    const pathKept = path === previousPath;
+    previousPath = path;
     const returnValue = {};
     const routeMatchInfoSet = new Set();
     for (const route of routeSet) {
@@ -28110,7 +28122,8 @@ This prevents cross-test pollution and ensures clean state.`,
       const oldParams = previousState.params;
       const oldActionParams = previousState.actionParams;
 
-      let extractedParams = routePattern.applyOn(url);
+      let extractedParams =
+        pathKept && !oldMatching ? null : routePattern.applyOn(url);
       let newMatching = Boolean(extractedParams);
       let newParams;
       if (extractedParams) {
@@ -28179,6 +28192,25 @@ This prevents cross-test pollution and ensures clean state.`,
           }
         }
 
+        // What the matching routes say, read once for every connection of every
+        // route that does not match (below), rather than by walking all the
+        // routes again for each of those connections.
+        const matchingRawParamsArray = [];
+        const paramNameDeclaredByMatchingRouteSet = new Set();
+        const matchingFamilyRootSet = new Set();
+        for (const matchingRoute of matchingRouteSet) {
+          matchingRawParamsArray.push(matchingRoute.rawParamsSignal.value);
+          const matchingPattern =
+            getRoutePrivateProperties(matchingRoute).routePattern;
+          for (const paramName of matchingPattern.queryConnectionMap.keys()) {
+            paramNameDeclaredByMatchingRouteSet.add(paramName);
+          }
+          for (const paramName of matchingPattern.pathConnectionMap.keys()) {
+            paramNameDeclaredByMatchingRouteSet.add(paramName);
+          }
+          matchingFamilyRootSet.add(matchingPattern.familyRoot);
+        }
+
         for (const {
           route,
           routePrivateProperties,
@@ -28194,40 +28226,21 @@ This prevents cross-test pollution and ensures clean state.`,
             const urlParamValue = rawParams[paramName];
 
             if (!newMatching) {
-              // Route doesn't match - check if any matching route extracts this parameter
-              let parameterExtractedByMatchingRoute = false;
-              let parameterDeclaredByMatchingRoute = false;
-              let matchingRouteInSameFamily = false;
-
-              for (const otherRoute of routeSet) {
-                if (otherRoute === route || !otherRoute.matching) {
-                  continue;
-                }
-                const otherRawParams = otherRoute.rawParamsSignal.value;
-
-                // Check if this matching route extracts the parameter
-                if (paramName in otherRawParams) {
-                  parameterExtractedByMatchingRoute = true;
-                }
-
-                // Same param, on the page one is arriving at: what it is worth
-                // there is that page's business, url or no url — it may open on
-                // a default of its own (see searchParams' `{ signal, default }`).
-                const otherPattern =
-                  getRoutePrivateProperties(otherRoute).routePattern;
-                if (
-                  otherPattern.queryConnectionMap.has(paramName) ||
-                  otherPattern.pathConnectionMap.has(paramName)
-                ) {
-                  parameterDeclaredByMatchingRoute = true;
-                }
-
-                // Same family = same topmost ancestor
-                // (familyRoot, computed in setupRoutePatterns)
-                if (otherPattern.familyRoot === routePattern.familyRoot) {
-                  matchingRouteInSameFamily = true;
-                }
-              }
+              // Whether a matching route extracts this parameter from the url
+              const parameterExtractedByMatchingRoute =
+                matchingRawParamsArray.some(
+                  (matchingRawParams) => paramName in matchingRawParams,
+                );
+              // Same param, on the page one is arriving at: what it is worth
+              // there is that page's business, url or no url — it may open on
+              // a default of its own (see searchParams' `{ signal, default }`).
+              const parameterDeclaredByMatchingRoute =
+                paramNameDeclaredByMatchingRouteSet.has(paramName);
+              // Same family = same topmost ancestor
+              // (familyRoot, computed in setupRoutePatterns)
+              const matchingRouteInSameFamily = matchingFamilyRootSet.has(
+                routePattern.familyRoot,
+              );
 
               // A weak param qualifies one visit: leaving the route ends it,
               // whatever the family and whatever the default. Coming back by a
@@ -28479,6 +28492,11 @@ const getParamsCacheKey = (params) => {
   return key;
 };
 
+const urlWithoutSearchAndHash = (url) => {
+  const urlObject = new URL(url);
+  return `${urlObject.origin}${urlObject.pathname}`;
+};
+
 /**
  * Is there an entry of THIS document behind the current one? And ahead of it?
  *
@@ -28922,7 +28940,13 @@ const forgetScrollerUnlessPageLeft = (name) => {
   }
 };
 
-const getHrefTargetInfo = (href) => {
+// `currentUrlString`: the address the href is compared with — the document's by
+// default. A caller subscribed to documentUrlSignal passes the value it read,
+// which is ahead of window.location while a debounced write is pending.
+const getHrefTargetInfo = (
+  href,
+  currentUrlString = window.location.href,
+) => {
   href = String(href);
 
   if (!href || href.trim() === "") {
@@ -28935,8 +28959,8 @@ const getHrefTargetInfo = (href) => {
     };
   }
 
-  const currentUrl = new URL(window.location.href);
-  const targetUrl = new URL(href, window.location.href);
+  const currentUrl = new URL(currentUrlString);
+  const targetUrl = new URL(href, currentUrlString);
 
   let isCurrent = false;
   {
@@ -28978,6 +29002,21 @@ const getHrefTargetInfo = (href) => {
   };
 };
 
+// A field of getHrefTargetInfo that depends on the page one is on (isCurrent,
+// isAnchor), read through a computed of that one boolean: the caller re-renders
+// when it flips, not at every address write — a search param bound to a wheel
+// writes the address at every notch.
+const useHrefTargetFlag = (href, flagName) => {
+  const flagSignal = useMemo(
+    () =>
+      computed(
+        () => getHrefTargetInfo(href, documentUrlSignal.value)[flagName],
+      ),
+    [href, flagName],
+  );
+  return flagSignal.value;
+};
+
 /*
  * An app can ship more than one document — an admin panel, a status page, an
  * entry point of its own — and a link to one of them is not a route, it is a
@@ -47869,19 +47908,28 @@ const usePreloadOpeningOnPress = (ref, command, prefetch = true) => {
 
 /**
  * Hook that reactively checks if a URL is visited.
- * Re-renders when the visited URL set changes.
+ * Re-renders when that answer changes — not at every url added to the visited
+ * set, which grows at every new address (a search param bound to a wheel
+ * writes one at every notch).
  *
  * @param {string} url - The URL to check
  * @returns {boolean} Whether the URL has been visited
  */
 const useIsVisited = (url) => {
-  return useMemo(() => {
-    // Access the signal to create reactive dependency
-    // eslint-disable-next-line no-unused-expressions
-    visitedUrlsSignal.value;
-
-    return isVisited(url);
-  }, [url, visitedUrlsSignal.value]);
+  const visitedSignal = useMemo(
+    () =>
+      computed(() => {
+        // Both are what the answer depends on: the set, and the address a
+        // relative url is resolved against (see isVisited).
+        // eslint-disable-next-line no-unused-expressions
+        visitedUrlsSignal.value;
+        // eslint-disable-next-line no-unused-expressions
+        documentUrlSignal.value;
+        return isVisited(url);
+      }),
+    [url],
+  );
+  return visitedSignal.value;
 };
 
 /**
@@ -48550,13 +48598,14 @@ const LinkPlain = props => {
   const loading = basePseudoState[":-navi-loading"];
   const shouldDimColor = readOnly || disabled;
   useDimColorWhen(props.ref, shouldDimColor);
-  // subscribe to document url to re-render and re-compute getHrefTargetInfo
-  useDocumentUrl();
+  // Re-rendered when one of these flips, not at every address write (see
+  // useHrefTargetFlag). Whether the href leaves the site does not depend on
+  // the address.
+  const isCurrent = useHrefTargetFlag(href, "isCurrent");
+  const isAnchor = useHrefTargetFlag(href, "isAnchor");
   const {
-    isSameSite,
-    isAnchor,
-    isCurrent
-  } = getHrefTargetInfo(href);
+    isSameSite
+  } = getHrefTargetInfo(href, documentUrlSignal.peek());
   // A tab that is a SLIDE is current when the container is on it — which the
   // <Nav> around reads off that container, so nothing here has to be told.
   const innerCurrent = current || (slide ? nav?.currentSlideArea === slide : isCurrent);
@@ -53522,10 +53571,9 @@ const ButtonHrefResolver = props => {
   });
 };
 
-// What the href means next to the page one is on depends on the document url,
-// so a button with an href re-renders at every address write. One without
-// never reaches here: it has nothing to re-compute, and every button on screen
-// would otherwise pay for each write.
+// Whether the href is the page one is on depends on the address, and re-renders
+// the button only when it flips (see useHrefTargetFlag). Whether it leaves the
+// site does not depend on the address.
 const ButtonWithHref = props => {
   const Next = useNextResolver();
   const {
@@ -53534,12 +53582,10 @@ const ButtonWithHref = props => {
     rel,
     pseudoState
   } = props;
-  // Read for the subscription: getHrefTargetInfo reads window.location.
-  useDocumentUrl();
+  const isCurrent = useHrefTargetFlag(href, "isCurrent");
   const {
-    isSameSite,
-    isCurrent
-  } = getHrefTargetInfo(href);
+    isSameSite
+  } = getHrefTargetInfo(href, documentUrlSignal.peek());
   return jsx(Next, {
     ...props,
     target: target === undefined ? isSameSite ? undefined : "_blank" : target,
@@ -83110,7 +83156,6 @@ const useWheelInteractions = ({
   attemptInteraction,
   cancelAnim,
   setPos,
-  releaseScrub,
   snapPosToRow,
   getItemSize,
   viewportMain,
@@ -83519,8 +83564,6 @@ const useWheelInteractions = ({
       clearTimeout(settleTimer);
       stopClaimingGesture();
       cancelAnim();
-      // Nothing is left to settle the scrub in progress.
-      releaseScrub();
       document.removeEventListener("pointerdown", onDocumentPointerDown, {
         capture: true
       });
@@ -83686,11 +83729,11 @@ function WheelUI(props) {
     ...props,
     ref: inputRef,
     type: "navi_js",
-    // An arrow or a tap changes the value at once while the row glides into
-    // place, and the action must wait for the wheel to come to rest. "custom"
-    // stops setUIState from auto-firing the action on every value change;
-    // commitSelection dispatches it explicitly on settle. A caller can still
-    // override actionEvent.
+    // uiAction fires live (every center-crossing, via setPos live reports);
+    // the committed action must fire only when the wheel stabilizes. "custom"
+    // stops setUIState from auto-firing the action on every value change, so
+    // the live reports are uiAction-only; commitSelection then dispatches the
+    // action explicitly on settle. A caller can still override actionEvent.
     actionEvent: props.actionEvent ?? "custom"
   }, {
     controlType: "input"
@@ -83786,11 +83829,6 @@ function WheelUI(props) {
   // while our own scroll-driven selection does not scroll a second time. Holds the
   // TARGET so rapid inputs step from it and accumulate. null = nothing pending.
   const centeredIndexRef = useRef(null);
-  // A user scrub moved the wheel onto a row that is not the value yet: set at
-  // the first row it crosses, cleared when it settles (commitSelection), when
-  // an arrow or a tap sets a value at once (glideToIndex), or when it is
-  // dropped (releaseScrub). See setPos.
-  const scrubHoldsRowRef = useRef(false);
   // The wheel does NOT use native scroll. `posRef` is our own virtual scroll
   // position (px, main axis); the list track is translated by -pos. This is the
   // single source of truth, wrapped modulo the real-list extent in loop mode, so
@@ -83979,14 +84017,12 @@ function WheelUI(props) {
     posRef.current = clampNumber(posRef.current, 0, (count - 1) * size);
   };
 
-  // `live` marks a user scrub (drag, momentum, wheel scroll). A scrub moves the
-  // drawing, not the value: the row it reaches is held by the wheel, and only
-  // commitSelection turns it into the value, once the motion settles. Reported
-  // at each crossing, every notch would be a value change for all that is
-  // bound to the wheel — its group, its form, a signal, the address, which
-  // records where a value was put down, not the path the finger took
-  // (navigation.md, "A value written per frame"). A programmatic move
-  // (centerOnIndex) omits `live`: it places the value the wheel already has.
+  // `live` (user scrubs: drag, momentum, wheel scroll) reports the value as each
+  // item crosses the center, so uiAction tracks the wheel in real time — like
+  // every other control. The committed action still fires only once it settles
+  // (commitSelection). A programmatic move (centerOnIndex on an external value
+  // sync) omits it, so scrolling the wheel into place doesn't echo the value
+  // back out.
   const setPos = (vp, pos, {
     live = false
   } = {}) => {
@@ -83997,25 +84033,18 @@ function WheelUI(props) {
     renderPos(vp);
     if (live && interactive) {
       const index = centeredIndex(vp);
-      if (index !== centeredIndexRef.current && trackedItemsRef.current[index]) {
-        // In step with the scrub so the next arrow or tap steps from the row
-        // the wheel is on (see currentTargetIndex).
-        centeredIndexRef.current = index;
-        scrubHoldsRowRef.current = true;
+      if (index !== centeredIndexRef.current) {
+        const item = trackedItemsRef.current[index];
+        if (item) {
+          // Keep centeredIndexRef in step so the every-render
+          // syncCenterToSelection doesn't read this as an external change and
+          // fight the in-progress motion.
+          centeredIndexRef.current = index;
+          requestSelectValue(item.value, new CustomEvent("navi_wheel_scrub"));
+        }
       }
     }
   };
-  // The scrub was dropped before it settled (the wheel stopped being
-  // interactive, or its input bindings were torn down): the row it held never
-  // became the value. Forgetting it lets the next sync put the wheel back on
-  // the value.
-  const releaseScrub = () => {
-    if (!scrubHoldsRowRef.current) {
-      return;
-    }
-    scrubHoldsRowRef.current = false;
-    centeredIndexRef.current = null;
-  };
 
   // Returns whether it actually interrupted a motion in flight — lets the caller
   // tell a fresh gesture from one that "caught" a spinning/gliding wheel.
@@ -84051,7 +84080,6 @@ function WheelUI(props) {
       renderPos(vp);
     }
     centeredIndexRef.current = index;
-    scrubHoldsRowRef.current = false;
     if (!interactive || glideFromOutsideRef.current) {
       return;
     }
@@ -84256,7 +84284,6 @@ function WheelUI(props) {
   // inputs accumulate.
   const glideToIndex = (vp, index, event) => {
     centeredIndexRef.current = index;
-    scrubHoldsRowRef.current = false;
     requestSelectValue(trackedItemsRef.current[index].value, event);
     glideTo(vp, glideTargetFor(vp, index));
   };
@@ -84287,12 +84314,12 @@ function WheelUI(props) {
   // Sync the center with the current value — used on first display and whenever
   // the controlled value changes from outside.
   const syncCenterToSelection = (viewportEl, behavior) => {
-    // A fling in flight, or a scrub holding a row, commits on settle: the finger
-    // owns the wheel until then, and the row it leaves the wheel on overrules a
-    // value arriving meanwhile. A glide is different: its target is re-aimed
-    // below (glideTo never restarts the loop), so a value set from outside
-    // mid-glide is where the wheel ends up.
-    if (momentumRef.current !== null || scrubHoldsRowRef.current) {
+    // A fling in flight reports its own value at every row crossing and commits
+    // on settle: the finger that threw it owns the wheel until then, and a value
+    // arriving meanwhile is re-stated by the next crossing anyway. A glide is
+    // different: its target is re-aimed below (glideTo never restarts the
+    // loop), so a value set from outside mid-glide is where the wheel ends up.
+    if (momentumRef.current !== null) {
       return;
     }
     if (trackedItemsRef.current.length === 0) {
@@ -84375,7 +84402,6 @@ function WheelUI(props) {
     attemptInteraction,
     cancelAnim,
     setPos,
-    releaseScrub,
     snapPosToRow,
     getItemSize,
     viewportMain,