@ionic/react-router 9.0.7-dev.11791381676.118a7a15 → 9.0.7-dev.11791478996.1b854592

package/dist/index.js

@@ -8,34 +8,6 @@ const IonRouteInner = ({ path, index, caseSensitive, element }) => {
     return React.createElement(Route, { path: path, index: index, caseSensitive: caseSensitive, element: element });
 };
 
-/**
- * Compares two route param objects by value, treating a missing object as empty.
- *
- * @param a The first params object.
- * @param b The second params object.
- * @returns True if both have the same keys with equal values.
- */
-const areParamsEqual = (a, b) => {
-    const paramsA = a || {};
-    const paramsB = b || {};
-    const keysA = Object.keys(paramsA);
-    const keysB = Object.keys(paramsB);
-    if (keysA.length !== keysB.length) {
-        return false;
-    }
-    return keysA.every((key) => {
-        const valueA = paramsA[key];
-        const valueB = paramsB[key];
-        if (Array.isArray(valueA) && Array.isArray(valueB)) {
-            if (valueA.length !== valueB.length) {
-                return false;
-            }
-            return valueA.every((entry, idx) => entry === valueB[idx]);
-        }
-        return valueA === valueB;
-    });
-};
-
 /**
  * The matchPath function is used only for matching paths, not rendering components or elements.
  * @see https://reactrouter.com/v6/utils/match-path
@@ -722,42 +694,6 @@ const resolveIndexRouteMatch = (viewItem, pathname, parentPath) => {
     const normalizedBase = normalizePathnameForComparison(previousMatch.pathnameBase || previousMatch.pathname || '');
     return normalizedPathname === normalizedBase ? previousMatch : null;
 };
-const shallowEqual = (a, b) => {
-    const aRecord = a;
-    const bRecord = b;
-    const aKeys = Object.keys(aRecord);
-    return aKeys.length === Object.keys(bRecord).length && aKeys.every((key) => aRecord[key] === bRecord[key]);
-};
-const isSameMatch = (a, b) => a === b ||
-    (a.pathname === b.pathname &&
-        a.pathnameBase === b.pathnameBase &&
-        areParamsEqual(a.params, b.params) &&
-        (a.route === b.route || shallowEqual(a.route, b.route)));
-/**
- * The outlet rebuilds a view's RouteContext on every render, and it renders
- * several times per navigation, so this compares by content to tell whether
- * the view's route state actually changed.
- */
-const isSameRouteContext = (a, b) => {
-    const { matches: aMatches, ...aRest } = a;
-    const { matches: bMatches, ...bRest } = b;
-    return (shallowEqual(aRest, bRest) &&
-        aMatches.length === bMatches.length &&
-        aMatches.every((match, i) => isSameMatch(match, bMatches[i])));
-};
-/**
- * Provides a view's RouteContext, reusing the previous value while its content
- * is unchanged or while `hold` is set (the view is not the one being shown), so
- * RouteContext-only readers like useParams skip re-rendering. Kept in component
- * state since two outlets with the same id share view items.
- */
-const ViewRouteContextProvider = ({ value, hold, children }) => {
-    const [heldValue, setHeldValue] = React.useState(value);
-    if (!hold && heldValue !== value && !isSameRouteContext(heldValue, value)) {
-        setHeldValue(value);
-    }
-    return React.createElement(UNSAFE_RouteContext.Provider, { value: heldValue }, children);
-};
 class ReactRouterViewStack extends ViewStacks {
     /**
      * Stores the computed parent path for each outlet.
@@ -958,8 +894,6 @@ class ReactRouterViewStack extends ViewStacks {
             viewItem.mount = true;
             viewItem.routeData.match = match;
         }
-        // Set when a more specific sibling owns the pathname, so this view is hidden even though it matches.
-        let hiddenBySpecificMatch = false;
         // Deactivate wildcard (catch-all) and empty-path (default) routes when a more-specific route matches.
         // This prevents "Not found" or fallback pages from showing alongside valid routes.
         if (routePath === '*' || routePath === '/*' || routePath === '') {
@@ -1016,7 +950,6 @@ class ReactRouterViewStack extends ViewStacks {
                 }
             }
             if (hasSpecificMatch && !isSwipeRevealed(viewItem)) {
-                hiddenBySpecificMatch = true;
                 // A splat can be the outlet's container page rather than a "not found" fallback.
                 // Pushed over it is the page underneath, so unmounting it destroys its state and
                 // leaves nothing for back to reveal. Hiding it below covers that. A view with no
@@ -1039,11 +972,6 @@ class ReactRouterViewStack extends ViewStacks {
             viewItem.routeData.match = match;
         }
         const routeMatch = shouldSkipForDifferentParam ? viewItem.routeData?.match : match || viewItem.routeData?.match;
-        // Hold the RouteContext while the view isn't the one shown: a sibling owns the pathname, it's
-        // parked on another param instance, or it doesn't match. A pathless default only strictly
-        // matches at "/", so a missing match there doesn't mean it's hidden.
-        const isPathlessDefault = !routePath && !viewItem.routeData?.childProps?.index;
-        const holdRouteContext = hiddenBySpecificMatch || !!shouldSkipForDifferentParam || (!match && !isPathlessDefault);
         return (React.createElement(UNSAFE_RouteContext.Consumer, { key: `view-context-${viewItem.id}` }, (parentContext) => {
             const parentMatches = (parentContext?.matches ?? []);
             // Accumulate params from parent matches, with fallback to other outlets
@@ -1059,7 +987,7 @@ class ReactRouterViewStack extends ViewStacks {
                 ? { ...parentContext, matches: contextMatches }
                 : { outlet: null, matches: contextMatches, isDataRoute: false };
             return (React.createElement(ViewLifeCycleManager, { key: `view-${viewItem.id}`, mount: viewItem.mount, removeView: () => this.remove(viewItem) },
-                React.createElement(ViewRouteContextProvider, { value: routeContextValue, hold: holdRouteContext }, componentElement)));
+                React.createElement(UNSAFE_RouteContext.Provider, { value: routeContextValue }, componentElement)));
         }));
     };
     /**
@@ -2650,7 +2578,7 @@ class StackManager extends React.PureComponent {
             return canStartSwipe;
         };
         const onStart = async () => {
-            // Core only calls onEnd when a progress animation exists, so with animations off a
+            // Core skips onEnd when an animated swipe ends without a progress animation, so a
             // previous gesture can leave its mark behind. Drop any stale one before marking.
             this.clearSwipeRevealedView();
             const { routeInfo } = this.props;
@@ -2679,9 +2607,9 @@ class StackManager extends React.PureComponent {
             revealIonPageForSwipeBack(enteringViewItem?.ionPageElement);
             // When the gesture starts, kick off a transition controlled via swipe gesture
             if (enteringViewItem && leavingViewItem) {
-                // Without a leaving view there is no progress animation, and core only calls
-                // swipeHandler.onEnd when one exists, so nothing would clear the mark until the
-                // next transition.
+                // Without a leaving view there is no progress animation, and core skips
+                // swipeHandler.onEnd for an animated swipe without one, so nothing would clear the
+                // mark until the next transition.
                 markSwipeRevealed(enteringViewItem);
                 this.swipeRevealedViewItem = enteringViewItem;
                 await this.transitionPage(routeInfo, enteringViewItem, leavingViewItem, 'back', true);
@@ -3178,6 +3106,26 @@ const checkIsMultiStepBack = (prevInfo, destinationPathname, history) => {
     }
     return false;
 };
+const areParamsEqual = (a, b) => {
+    const paramsA = a || {};
+    const paramsB = b || {};
+    const keysA = Object.keys(paramsA);
+    const keysB = Object.keys(paramsB);
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+    return keysA.every((key) => {
+        const valueA = paramsA[key];
+        const valueB = paramsB[key];
+        if (Array.isArray(valueA) && Array.isArray(valueB)) {
+            if (valueA.length !== valueB.length) {
+                return false;
+            }
+            return valueA.every((entry, idx) => entry === valueB[idx]);
+        }
+        return valueA === valueB;
+    });
+};
 const IonRouter = ({ children, registerHistoryListener }) => {
     const location = useLocation();
     const navigate = useNavigate();