@ionic/react-router 9.0.6-dev.11790349282.1a877abd → 9.0.6-dev.11790615145.1d8c56a2

package/dist/index.js

@@ -499,41 +499,6 @@ 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).
  *
@@ -895,7 +860,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 === '/*' || routePath === '') {
+        if (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
@@ -948,15 +913,8 @@ class ReactRouterViewStack extends ViewStacks {
                     }
                 }
             }
-            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 (hasSpecificMatch) {
+                viewItem.mount = false;
                 if (viewItem.ionPageElement) {
                     viewItem.ionPageElement.classList.add('ion-page-hidden');
                     viewItem.ionPageElement.setAttribute('aria-hidden', 'true');
@@ -1026,11 +984,8 @@ 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().
-                // 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)) {
+                // intentionally sticky — it anchors the outlet's scope and is only removed in clear().
+                if (result.outletMountPath && !this.outletMountPaths.has(outletId)) {
                     this.outletMountPaths.set(outletId, result.outletMountPath);
                 }
             }
@@ -1452,6 +1407,12 @@ 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
@@ -1480,8 +1441,6 @@ 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,
@@ -1573,9 +1532,7 @@ class StackManager extends React.PureComponent {
                     hasIndexRoute,
                     hasWildcardRoute,
                 });
-                // 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) {
+                if (result.outletMountPath && !this.outletMountPath) {
                     this.outletMountPath = result.outletMountPath;
                 }
                 return result.parentPath;
@@ -1630,16 +1587,12 @@ class StackManager extends React.PureComponent {
             return true;
         }
         // For non-replace actions, only unmount for back navigation
-        if (!isForwardPush(routeInfo) && routeInfo.routeDirection !== 'none' && enteringViewItem !== leavingViewItem) {
+        const isForwardPush = routeInfo.routeAction === 'push' && routeInfo.routeDirection === 'forward';
+        if (!isForwardPush && 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.
      */
@@ -1688,8 +1641,8 @@ class StackManager extends React.PureComponent {
         const allViewsInOutlet = this.context.getViewItemsForOutlet(this.id);
         allViewsInOutlet.forEach((viewItem) => {
             if (viewItem.ionPageElement && isViewVisible(viewItem.ionPageElement)) {
-                viewItem.ionPageElement.dispatchEvent(new CustomEvent('ionViewWillLeave', { bubbles: false, cancelable: false }));
-                viewItem.ionPageElement.dispatchEvent(new CustomEvent('ionViewDidLeave', { bubbles: false, cancelable: false }));
+                dispatchLifecycleEvent(viewItem.ionPageElement, 'ionViewWillLeave');
+                dispatchLifecycleEvent(viewItem.ionPageElement, 'ionViewDidLeave');
             }
         });
         // Defer removal of view items to allow the parent outlet's leaving-page
@@ -1724,8 +1677,8 @@ class StackManager extends React.PureComponent {
                 return;
             }
             if (viewItem.ionPageElement && isViewVisible(viewItem.ionPageElement)) {
-                viewItem.ionPageElement.dispatchEvent(new CustomEvent('ionViewWillLeave', { bubbles: false, cancelable: false }));
-                viewItem.ionPageElement.dispatchEvent(new CustomEvent('ionViewDidLeave', { bubbles: false, cancelable: false }));
+                dispatchLifecycleEvent(viewItem.ionPageElement, 'ionViewWillLeave');
+                dispatchLifecycleEvent(viewItem.ionPageElement, 'ionViewDidLeave');
             }
             this.context.unMountViewItem(viewItem);
         });
@@ -1809,9 +1762,7 @@ 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;
-            // 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) {
+            if (currentInContainer && previousInContainer) {
                 const updatedMatch = matchComponent(enteringViewItem.reactElement, routeInfo.pathname, true, this.outletMountPath);
                 if (updatedMatch) {
                     enteringViewItem.routeData.match = updatedMatch;
@@ -2273,7 +2224,6 @@ 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
@@ -2305,32 +2255,13 @@ 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.
-        if (enteringViewItem &&
-            enteringRoute &&
-            isOverMatchingRoute(enteringViewItem.routeData?.childProps ?? {}) &&
-            enteringRoute.props.path !== enteringViewItem.routeData?.childProps?.path) {
-            enteringViewItem = undefined;
-        }
-        let shouldUnmountLeavingViewItem = this.shouldUnmountLeavingView(routeInfo, enteringViewItem, leavingViewItem);
         // Handle out-of-scope outlet (route outside mount path)
         if (this.handleOutOfScopeOutlet(routeInfo)) {
             return;
@@ -2350,6 +2281,8 @@ 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;
@@ -2546,17 +2479,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));
-            // 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.
+            // 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.
             const canStartSwipe = !!enteringViewItem &&
-                !!leavingViewItem &&
                 (enteringViewItem.mount || ionPageInDocument) &&
-                enteringViewItem !== leavingViewItem;
+                enteringViewItem.routeData.match.pattern.path !== routeInfo.pathname &&
+                enteringViewItem.routeData.match.pathname !== routeInfo.pathname;
             debug('SwipeBackCanStart', () => ({
                 outletId: this.id,
                 routePathname: routeInfo.pathname,
@@ -2565,15 +2498,11 @@ 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);
@@ -2600,11 +2529,6 @@ 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', () => ({
@@ -2629,7 +2553,6 @@ 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);
@@ -2856,10 +2779,34 @@ 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 (myGeneration === this.transitionGeneration || leavingEl !== this.transitionEnteringElement) {
+                    if (isLeaving) {
                         leavingEl.classList.add('ion-page-hidden');
                         leavingEl.setAttribute('aria-hidden', 'true');
                     }