@ionic/react-router 9.0.1-dev.11787177893.1979eb13 → 9.0.1-dev.11787589191.1e183b55

package/dist/index.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState, useEffect, useCallback } from 'react';
 import { Route, matchPath as matchPath$1, Routes, Navigate, UNSAFE_RouteContext, matchRoutes, useLocation, useNavigate, BrowserRouter, useNavigationType, HashRouter } from 'react-router-dom';
-import { IonRoute, ViewStacks, generateId, ViewLifeCycleManager, createDebugLogger, StackContext, RouteManagerContext, LocationHistory, NavManager, getConfig } from '@ionic/react';
+import { IonRoute, ViewStacks, generateId, ViewLifeCycleManager, createDebugLogger, StackContext, RouteManagerContext, getConfig, LocationHistory, NavManager } from '@ionic/react';
 import { MemoryRouter, useLocation as useLocation$1, useNavigationType as useNavigationType$1 } from 'react-router';
 
 const IonRouteInner = ({ path, index, caseSensitive, element }) => {
@@ -2577,8 +2577,31 @@ class StackManager extends React.PureComponent {
      */
     async transitionPage(routeInfo, enteringViewItem, leavingViewItem, direction, progressAnimation = false, skipAnimation = false) {
         const myGeneration = ++this.transitionGeneration;
+        const routerOutlet = this.routerOutletElement;
+        const routeInfoFallbackDirection = routeInfo.routeDirection === 'none' || routeInfo.routeDirection === 'root' ? undefined : routeInfo.routeDirection;
+        const directionToUse = direction ?? routeInfoFallbackDirection;
+        /**
+         * The cases where we pass `commit()` a duration of 0. It's a function so each
+         * caller reads `skipTransition` as of when it runs, since the swipe gesture can
+         * set it after we get here.
+         */
+        const isInstantCommit = () => this.skipTransition || skipAnimation || directionToUse === undefined;
+        /**
+         * Whether `commit()` will run an animation. Mirrors the check in core's
+         * `router-outlet.tsx`, so keep the two in sync: an instant commit never
+         * animates, and otherwise the outlet's `animated` prop and the global
+         * `animated` config both have to allow it (`ionic:_testing` turns it off).
+         */
+        const willCommitAnimate = () => {
+            if (isInstantCommit()) {
+                return false;
+            }
+            const config = getConfig();
+            return !!routerOutlet.animated && (config ? config.getBoolean('animated', true) : true);
+        };
         const runCommit = async (enteringEl, leavingEl) => {
             const skipTransition = this.skipTransition;
+            const commitDuration = isInstantCommit() ? 0 : undefined;
             /**
              * If the transition was handled
              * via the swipe to go back gesture,
@@ -2614,7 +2637,6 @@ class StackManager extends React.PureComponent {
                     enteringEl.classList.add('ion-page-invisible');
                 }
             }
-            const commitDuration = skipTransition || skipAnimation || directionToUse === undefined ? 0 : undefined;
             // Race commit against a timeout to recover from hangs
             const commitPromise = routerOutlet.commit(enteringEl, leavingEl, {
                 duration: commitDuration,
@@ -2646,15 +2668,12 @@ class StackManager extends React.PureComponent {
                 enteringEl.classList.remove('ion-page-invisible');
             }
         };
-        const routerOutlet = this.routerOutletElement;
-        const routeInfoFallbackDirection = routeInfo.routeDirection === 'none' || routeInfo.routeDirection === 'root' ? undefined : routeInfo.routeDirection;
-        const directionToUse = direction ?? routeInfoFallbackDirection;
         if (enteringViewItem && enteringViewItem.ionPageElement && this.routerOutletElement) {
             this.transitionEnteringElement = enteringViewItem.ionPageElement;
             if (leavingViewItem && leavingViewItem.ionPageElement && enteringViewItem === leavingViewItem) {
                 // Clone page for same-view transitions (e.g., /user/1 → /user/2)
                 const match = matchComponent(leavingViewItem.reactElement, routeInfo.pathname, undefined, this.outletMountPath);
-                if (match) {
+                if (match && willCommitAnimate()) {
                     const newLeavingElement = clonePageElement(leavingViewItem.ionPageElement.outerHTML);
                     if (newLeavingElement) {
                         this.routerOutletElement.appendChild(newLeavingElement);
@@ -2663,7 +2682,11 @@ class StackManager extends React.PureComponent {
                     }
                 }
                 else {
-                    // Route no longer matches (e.g., /user/1 → /settings)
+                    /**
+                     * Either the route no longer matches (e.g., /user/1 → /settings), or
+                     * nothing will animate, so the clone would duplicate the page in the
+                     * DOM for no benefit.
+                     */
                     await runCommit(enteringViewItem.ionPageElement, undefined);
                 }
             }