@ionic/react-router 9.0.6-dev.11790615145.1d8c56a2 → 9.0.6-dev.11790776272.1d27d1bd

package/dist/index.js

@@ -499,6 +499,41 @@ const compareRouteSpecificity = (a, b) => {
     }
     return 0;
 };
+/**
+ * True when a route matches more pathnames than its own path, so a splat, an index route,
+ * or a route with an empty or absent path. A lookup can return one of these for a pathname
+ * a more specific sibling owns, so callers must confirm ownership against React Router's
+ * ranking before reusing the view item.
+ *
+ * This is deliberately wider than the catch-all checks in ReactRouterViewStack, which each
+ * gate on a narrower shape for a different reason. Don't unify them with this helper.
+ */
+const isOverMatchingRoute = (route) => {
+    const { path, index } = route;
+    return !path || path.includes('*') || !!index;
+};
+/** True when the navigation pushed a new page forward on top of the current one. */
+const isForwardPush = (routeInfo) => routeInfo.routeAction === 'push' && routeInfo.routeDirection === 'forward';
+const swipeRevealed = new WeakSet();
+/**
+ * Marks the page a swipe-back gesture has revealed. For the length of the drag that page
+ * is on screen while a more specific sibling still matches the current pathname, and the
+ * deactivation scan in `renderViewItem` would otherwise re-hide it on the next render and
+ * leave the user dragging a blank page.
+ */
+const markSwipeRevealed = (viewItem) => {
+    if (viewItem) {
+        swipeRevealed.add(viewItem);
+    }
+};
+/** Drops the mark once the gesture ends, so the view is hidden normally again. */
+const clearSwipeRevealed = (viewItem) => {
+    if (viewItem) {
+        swipeRevealed.delete(viewItem);
+    }
+};
+/** True while a swipe-back gesture is showing this view. */
+const isSwipeRevealed = (viewItem) => swipeRevealed.has(viewItem);
 /**
  * Sorts view items by route specificity (most specific first).
  *
@@ -860,7 +895,7 @@ class ReactRouterViewStack extends ViewStacks {
         }
         // 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 === '') {
+        if (routePath === '*' || routePath === '/*' || routePath === '') {
             // Check if any other view in this outlet has a match for the current route
             const outletViews = this.getViewItemsForOutlet(viewItem.outletId);
             // When parent path context is available, compute the relative pathname once
@@ -913,8 +948,15 @@ class ReactRouterViewStack extends ViewStacks {
                     }
                 }
             }
-            if (hasSpecificMatch) {
-                viewItem.mount = false;
+            if (hasSpecificMatch && !isSwipeRevealed(viewItem)) {
+                // 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
+                // ion-page was never a page in the stack and has nothing to hide, so it still
+                // unmounts.
+                if (!isForwardPush(routeInfo) || !viewItem.ionPageElement) {
+                    viewItem.mount = false;
+                }
                 if (viewItem.ionPageElement) {
                     viewItem.ionPageElement.classList.add('ion-page-hidden');
                     viewItem.ionPageElement.setAttribute('aria-hidden', 'true');
@@ -984,8 +1026,11 @@ class ReactRouterViewStack extends ViewStacks {
                 parentPath = result.parentPath;
                 // Persist the mount path for subsequent calls, mirroring StackManager.outletMountPath.
                 // Unlike outletParentPaths (cleared when parentPath is undefined), the mount path is
-                // intentionally sticky — it anchors the outlet's scope and is only removed in clear().
-                if (result.outletMountPath && !this.outletMountPaths.has(outletId)) {
+                // intentionally sticky, it anchors the outlet's scope and is only removed in clear().
+                // A root outlet is skipped because it is mounted under nothing, so an inferred path
+                // would scope it to whatever route was active. parentPathnameBase is undefined
+                // exactly when the outlet has no parent matches.
+                if (parentPathnameBase && result.outletMountPath && !this.outletMountPaths.has(outletId)) {
                     this.outletMountPaths.set(outletId, result.outletMountPath);
                 }
             }
@@ -1407,12 +1452,6 @@ const revealIonPageForSwipeBack = (element) => {
         element.removeAttribute('aria-hidden');
     }
 };
-/** Dispatches a view lifecycle event the way core's `lifecycle()` does. */
-const dispatchLifecycleEvent = (element, eventName) => {
-    if (element) {
-        element.dispatchEvent(new CustomEvent(eventName, { bubbles: false, cancelable: false }));
-    }
-};
 /**
  * A leaf view is "preservable" on browser-back (pop) when its React state
  * should survive a forward-pop round-trip. Non-parameterized leaf paths
@@ -1441,6 +1480,8 @@ class StackManager extends React.PureComponent {
     routerOutletElement;
     prevProps;
     skipTransition;
+    /** The view item the in-flight swipe gesture revealed, so the same one gets cleared. */
+    swipeRevealedViewItem;
     stackContextValue = {
         registerIonPage: this.registerIonPage.bind(this),
         isInOutlet: () => true,
@@ -1532,7 +1573,9 @@ class StackManager extends React.PureComponent {
                     hasIndexRoute,
                     hasWildcardRoute,
                 });
-                if (result.outletMountPath && !this.outletMountPath) {
+                // A root outlet is mounted under nothing, so caching the inferred path would scope
+                // it to whatever route was active and make every other pathname look out of scope.
+                if (!this.isRootOutlet && result.outletMountPath && !this.outletMountPath) {
                     this.outletMountPath = result.outletMountPath;
                 }
                 return result.parentPath;
@@ -1587,12 +1630,16 @@ class StackManager extends React.PureComponent {
             return true;
         }
         // For non-replace actions, only unmount for back navigation
-        const isForwardPush = routeInfo.routeAction === 'push' && routeInfo.routeDirection === 'forward';
-        if (!isForwardPush && routeInfo.routeDirection !== 'none' && enteringViewItem !== leavingViewItem) {
+        if (!isForwardPush(routeInfo) && routeInfo.routeDirection !== 'none' && enteringViewItem !== leavingViewItem) {
             return true;
         }
         return false;
     }
+    /** Clears the reveal flag from the view item the gesture marked. */
+    clearSwipeRevealedView() {
+        clearSwipeRevealed(this.swipeRevealedViewItem);
+        this.swipeRevealedViewItem = undefined;
+    }
     /**
      * Handles out-of-scope outlet. Returns true if transition should be aborted.
      */
@@ -1641,8 +1688,8 @@ class StackManager extends React.PureComponent {
         const allViewsInOutlet = this.context.getViewItemsForOutlet(this.id);
         allViewsInOutlet.forEach((viewItem) => {
             if (viewItem.ionPageElement && isViewVisible(viewItem.ionPageElement)) {
-                dispatchLifecycleEvent(viewItem.ionPageElement, 'ionViewWillLeave');
-                dispatchLifecycleEvent(viewItem.ionPageElement, 'ionViewDidLeave');
+                viewItem.ionPageElement.dispatchEvent(new CustomEvent('ionViewWillLeave', { bubbles: false, cancelable: false }));
+                viewItem.ionPageElement.dispatchEvent(new CustomEvent('ionViewDidLeave', { bubbles: false, cancelable: false }));
             }
         });
         // Defer removal of view items to allow the parent outlet's leaving-page
@@ -1677,8 +1724,8 @@ class StackManager extends React.PureComponent {
                 return;
             }
             if (viewItem.ionPageElement && isViewVisible(viewItem.ionPageElement)) {
-                dispatchLifecycleEvent(viewItem.ionPageElement, 'ionViewWillLeave');
-                dispatchLifecycleEvent(viewItem.ionPageElement, 'ionViewDidLeave');
+                viewItem.ionPageElement.dispatchEvent(new CustomEvent('ionViewWillLeave', { bubbles: false, cancelable: false }));
+                viewItem.ionPageElement.dispatchEvent(new CustomEvent('ionViewDidLeave', { bubbles: false, cancelable: false }));
             }
             this.context.unMountViewItem(viewItem);
         });
@@ -1762,7 +1809,9 @@ class StackManager extends React.PureComponent {
             const containerBase = routePath.replace(/\/\*$/, '');
             const currentInContainer = routeInfo.pathname.startsWith(containerBase + '/') || routeInfo.pathname === containerBase;
             const previousInContainer = routeInfo.lastPathname.startsWith(containerBase + '/') || routeInfo.lastPathname === containerBase;
-            if (currentInContainer && previousInContainer) {
+            // A root-level "/*" leaves an empty base, so both checks above are true for every
+            // pathname and the shortcut would otherwise skip every navigation in this outlet.
+            if (containerBase !== '' && currentInContainer && previousInContainer) {
                 const updatedMatch = matchComponent(enteringViewItem.reactElement, routeInfo.pathname, true, this.outletMountPath);
                 if (updatedMatch) {
                     enteringViewItem.routeData.match = updatedMatch;
@@ -2224,6 +2273,7 @@ class StackManager extends React.PureComponent {
         }
         this.waitingForIonPage = false;
         this.preservedViewItems.clear();
+        this.clearSwipeRevealedView();
         // Hide all views in this outlet before clearing.
         // This is critical for nested outlets - when the parent component unmounts,
         // the nested outlet's componentDidUpdate won't be called, so we must hide
@@ -2255,13 +2305,32 @@ class StackManager extends React.PureComponent {
             this.pendingPageTransition = true;
             return;
         }
+        // A completed swipe keeps its reveal flag past goBack() so the deactivation scan does
+        // not re-hide the page between the gesture ending and the URL settling. Clear it at
+        // the start of the transition for the new pathname.
+        this.clearSwipeRevealedView();
         // Find entering and leaving view items
         const viewItems = this.findViewItems(routeInfo);
         let enteringViewItem = viewItems.enteringViewItem;
         let leavingViewItem = viewItems.leavingViewItem;
-        let shouldUnmountLeavingViewItem = this.shouldUnmountLeavingView(routeInfo, enteringViewItem, leavingViewItem);
         // Get parent path for nested outlets
         const parentPath = this.getParentPath();
+        // Find the matching route element. This is React Router's own ranking of the outlet's
+        // routes, so it decides which route owns the pathname.
+        const enteringRoute = findRouteByRouteInfo(this.ionRouterOutlet?.props.children, routeInfo, parentPath);
+        // The lookup above only matches view items that already exist, so a sibling route with
+        // no view item yet never wins there and an over-matching route (splat, index, empty
+        // path) comes back for pathnames it does not own. Drop it rather than reusing it,
+        // because overwriting its reactElement below would swap its page for the winning
+        // route's and unmount it. This has to resolve before shouldUnmountLeavingView and
+        // handleRootNavigation, which both branch on the entering view item.
+        const matchedRouteProps = enteringViewItem?.routeData?.childProps;
+        const matchedAnOverMatchingRoute = isOverMatchingRoute(matchedRouteProps ?? {});
+        const routeOwnerDisagrees = enteringRoute !== undefined && enteringRoute.props.path !== matchedRouteProps?.path;
+        if (enteringViewItem && matchedAnOverMatchingRoute && routeOwnerDisagrees) {
+            enteringViewItem = undefined;
+        }
+        let shouldUnmountLeavingViewItem = this.shouldUnmountLeavingView(routeInfo, enteringViewItem, leavingViewItem);
         // Handle out-of-scope outlet (route outside mount path)
         if (this.handleOutOfScopeOutlet(routeInfo)) {
             return;
@@ -2281,8 +2350,6 @@ class StackManager extends React.PureComponent {
         if (this.handleOutOfContextNestedOutlet(parentPath, leavingViewItem)) {
             return;
         }
-        // Find the matching route element
-        const enteringRoute = findRouteByRouteInfo(this.ionRouterOutlet?.props.children, routeInfo, parentPath);
         // Handle nested outlet with no matching route
         if (this.handleNoMatchingRoute(enteringRoute, enteringViewItem, leavingViewItem)) {
             return;
@@ -2479,17 +2546,17 @@ class StackManager extends React.PureComponent {
             const { routeInfo } = this.props;
             const swipeBackRouteInfo = this.getSwipeBackRouteInfo();
             const enteringViewItem = this.findEnteringViewForSwipe(swipeBackRouteInfo);
+            const leavingViewItem = this.context.findViewItemByRouteInfo(routeInfo, this.id, false);
             // View might have mount=false but ionPageElement still in DOM
             const ionPageInDocument = Boolean(enteringViewItem?.ionPageElement && document.body.contains(enteringViewItem.ionPageElement));
-            // For wildcard/parameterized routes, the pattern path (e.g. "/foo/*") will
-            // never equal the resolved pathname (e.g. "/foo/bar"), so the pattern check
-            // alone isn't sufficient. Also, verify the entering view's resolved pathname
-            // differs from the current pathname — if they match, the entering and leaving
-            // views are the same and the swipe gesture shouldn't start.
+            // A splat consumes whatever is left of the pathname, so its match resolves to the whole
+            // current pathname and comparing pathnames can't tell a container page underneath a
+            // pushed sibling from the page being left. Compare the view items instead, like onEnd
+            // does. Without a leaving view onStart skips the transition, so reject that here too.
             const canStartSwipe = !!enteringViewItem &&
+                !!leavingViewItem &&
                 (enteringViewItem.mount || ionPageInDocument) &&
-                enteringViewItem.routeData.match.pattern.path !== routeInfo.pathname &&
-                enteringViewItem.routeData.match.pathname !== routeInfo.pathname;
+                enteringViewItem !== leavingViewItem;
             debug('SwipeBackCanStart', () => ({
                 outletId: this.id,
                 routePathname: routeInfo.pathname,
@@ -2498,11 +2565,15 @@ class StackManager extends React.PureComponent {
                 enteringViewPath: enteringViewItem?.reactElement?.props?.path,
                 enteringMount: enteringViewItem?.mount,
                 ionPageInDocument,
+                leavingViewId: leavingViewItem?.id,
                 canStartSwipe,
             }));
             return canStartSwipe;
         };
         const onStart = async () => {
+            // Core only calls onEnd when a progress animation exists, so with animations off a
+            // previous gesture can leave its mark behind. Drop any stale one before marking.
+            this.clearSwipeRevealedView();
             const { routeInfo } = this.props;
             const swipeBackRouteInfo = this.getSwipeBackRouteInfo();
             const enteringViewItem = this.findEnteringViewForSwipe(swipeBackRouteInfo);
@@ -2529,6 +2600,11 @@ 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.
+                markSwipeRevealed(enteringViewItem);
+                this.swipeRevealedViewItem = enteringViewItem;
                 await this.transitionPage(routeInfo, enteringViewItem, leavingViewItem, 'back', true);
             }
             debug('SwipeBackOnStart:exit', () => ({
@@ -2553,6 +2629,7 @@ class StackManager extends React.PureComponent {
                 const swipeBackRouteInfo = this.getSwipeBackRouteInfo();
                 const enteringViewItem = this.findEnteringViewForSwipe(swipeBackRouteInfo);
                 const leavingViewItem = this.context.findViewItemByRouteInfo(routeInfo, this.id, false);
+                this.clearSwipeRevealedView();
                 // Don't hide if entering and leaving are the same (parameterized route edge case)
                 if (enteringViewItem !== leavingViewItem && enteringViewItem?.ionPageElement !== undefined) {
                     hideIonPageElement(enteringViewItem.ionPageElement);
@@ -2779,34 +2856,10 @@ class StackManager extends React.PureComponent {
                     // Bail out if the component unmounted during waitForComponentsReady
                     if (!this._isMounted)
                         return;
-                    const isCurrent = myGeneration === this.transitionGeneration;
-                    // A page the newest transition is entering is not leaving after all.
-                    const isLeaving = isCurrent || leavingEl !== this.transitionEnteringElement;
-                    // Already hidden means the leave events have fired. This checks the class rather
-                    // than `isViewVisible` because a nested outlet marks its leaving page
-                    // `visibility: hidden` before we get here and still needs `ionViewDidLeave`.
-                    const announceLeaving = isLeaving && !leavingEl.classList.contains('ion-page-hidden');
-                    /**
-                     * Dispatch the lifecycle events, since we skipped `commit()`. Only the
-                     * newest transition fires the entering events, and the class swap follows
-                     * all four so the ordering matches core's `transition()`.
-                     *
-                     * These run after `waitForComponentsReady` because on a first mount the
-                     * page has not attached its listeners yet.
-                     */
-                    if (announceLeaving) {
-                        dispatchLifecycleEvent(leavingEl, 'ionViewWillLeave');
-                    }
-                    if (isCurrent) {
-                        dispatchLifecycleEvent(enteringEl, 'ionViewWillEnter');
-                        dispatchLifecycleEvent(enteringEl, 'ionViewDidEnter');
-                    }
-                    if (announceLeaving) {
-                        dispatchLifecycleEvent(leavingEl, 'ionViewDidLeave');
-                    }
                     // Swap visibility synchronously - show entering, hide leaving
+                    // Skip hiding if a newer transition already made leavingEl the entering view
                     enteringEl.classList.remove('ion-page-invisible');
-                    if (isLeaving) {
+                    if (myGeneration === this.transitionGeneration || leavingEl !== this.transitionEnteringElement) {
                         leavingEl.classList.add('ion-page-hidden');
                         leavingEl.setAttribute('aria-hidden', 'true');
                     }