@react-navigation/routers 8.0.0-alpha.6 → 8.0.0-alpha.8

package/lib/module/BaseRouter.js

@@ -47,11 +47,12 @@ export const BaseRouter = {
       case 'RESET':
         {
           const nextState = action.payload;
-          if (nextState.routes.length === 0 || nextState.routes.some(route => !state.routeNames.includes(route.name))) {
+          const routeNamesSet = new Set(state.routeNames);
+          if (nextState.routes.length === 0 || nextState.routes.some(route => !routeNamesSet.has(route.name))) {
             return null;
           }
           if (nextState.stale === false) {
-            if (state.routeNames.length !== nextState.routeNames.length || nextState.routeNames.some(name => !state.routeNames.includes(name))) {
+            if (state.routeNames.length !== nextState.routeNames.length || nextState.routeNames.some(name => !routeNamesSet.has(name))) {
               return null;
             }
             return {

package/lib/module/BaseRouter.js.map

@@ -1 +1 @@
-{"version":3,"names":["nanoid","BaseRouter","getStateForAction","state","action","type","index","source","routes","findIndex","r","key","map","i","params","payload","history","nextState","length","some","route","routeNames","includes","name","stale","shouldActionChangeFocus"],"sourceRoot":"../../src","sources":["BaseRouter.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["nanoid","BaseRouter","getStateForAction","state","action","type","index","source","routes","findIndex","r","key","map","i","params","payload","history","nextState","routeNamesSet","Set","routeNames","length","some","route","has","name","stale","shouldActionChangeFocus"],"sourceRoot":"../../src","sources":["BaseRouter.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/StackRouter.js

@@ -61,16 +61,34 @@ function retainRoutes(previousState, nextState) {
   }
   const retainedRouteKeySet = new Set(nextState.retainedRouteKeys);
   const nextRouteKeySet = new Set(nextState.routes.map(route => route.key));
-  const retainedRoutes = previousState.routes.filter(route => retainedRouteKeySet.has(route.key) && !nextRouteKeySet.has(route.key));
+  const retainedRoutes = getActiveRoutes(previousState).filter(route => retainedRouteKeySet.has(route.key) && !nextRouteKeySet.has(route.key));
   if (!retainedRoutes.length) {
     return nextState;
   }
   const removedRetainedRouteKeys = new Set(retainedRoutes.map(route => route.key));
+  return getStateWithRoutes(nextState, getActiveRoutes(nextState), getPreloadedRoutes(nextState), retainedRoutes.concat(getRetainedRoutes(nextState).filter(route => !removedRetainedRouteKeys.has(route.key))));
+}
+const getActiveRoutes = state => state.routes.slice(0, state.index + 1);
+const getInactiveRoutes = state => state.routes.slice(state.index + 1);
+const getPreloadedRoutes = state => {
+  const retainedRouteKeySet = new Set(state.retainedRouteKeys);
+  return getInactiveRoutes(state).filter(route => !retainedRouteKeySet.has(route.key));
+};
+const getRetainedRoutes = state => {
+  const retainedRouteKeySet = new Set(state.retainedRouteKeys);
+  return getInactiveRoutes(state).filter(route => retainedRouteKeySet.has(route.key));
+};
+const getStateWithRoutes = (state, activeRoutes, preloadedRoutes = getPreloadedRoutes(state), retainedRoutes = getRetainedRoutes(state)) => {
+  const routeKeySet = new Set(activeRoutes.map(route => route.key));
+  const retainedRouteKeySet = new Set(state.retainedRouteKeys);
+  const filteredRetainedRoutes = retainedRoutes.filter(route => !routeKeySet.has(route.key));
+  const filteredPreloadedRoutes = preloadedRoutes.filter(route => !retainedRouteKeySet.has(route.key) && !routeKeySet.has(route.key));
   return {
-    ...nextState,
-    preloadedRoutes: retainedRoutes.concat(nextState.preloadedRoutes.filter(route => !removedRetainedRouteKeys.has(route.key)))
+    ...state,
+    index: activeRoutes.length - 1,
+    routes: activeRoutes.concat(filteredRetainedRoutes, filteredPreloadedRoutes)
   };
-}
+};
 export function StackRouter(options) {
   const router = {
     ...BaseRouter,
@@ -86,7 +104,6 @@ export function StackRouter(options) {
         key: `stack-${nanoid()}`,
         index: 0,
         routeNames,
-        preloadedRoutes: [],
         retainedRouteKeys: [],
         routes: [{
           key: `${initialRouteName}-${nanoid()}`,
@@ -111,15 +128,6 @@ export function StackRouter(options) {
           ...route.params
         } : route.params
       }));
-      const preloadedRoutes = state.preloadedRoutes?.filter(route => routeNames.includes(route.name)).map(route => ({
-        ...route,
-        key: route.key || `${route.name}-${nanoid()}`,
-        params: routeParamList[route.name] !== undefined ? {
-          ...routeParamList[route.name],
-          ...route.params
-        } : route.params
-      })) ?? [];
-      const retainedRouteKeys = state.retainedRouteKeys?.filter(key => [...routes, ...preloadedRoutes].some(route => route.key === key)) ?? [];
       if (routes.length === 0) {
         const initialRouteName = options.initialRouteName !== undefined ? options.initialRouteName : routeNames[0];
         routes.push({
@@ -128,14 +136,16 @@ export function StackRouter(options) {
           params: routeParamList[initialRouteName]
         });
       }
+      const index = Math.min(Math.max(state.index ?? routes.length - 1, 0), routes.length - 1);
+      const routeKeys = new Set(routes.map(route => route.key));
+      const retainedRouteKeys = state.retainedRouteKeys?.filter(key => routeKeys.has(key)) ?? [];
       return {
         stale: false,
         type: 'stack',
         key: `stack-${nanoid()}`,
-        index: routes.length - 1,
+        index,
         routeNames,
         routes,
-        preloadedRoutes,
         retainedRouteKeys
       };
     },
@@ -144,8 +154,9 @@ export function StackRouter(options) {
       routeParamList,
       routeKeyChanges
     }) {
-      const routes = state.routes.filter(route => routeNames.includes(route.name) && !routeKeyChanges.includes(route.name));
-      const preloadedRoutes = state.preloadedRoutes.filter(route => routeNames.includes(route.name) && !routeKeyChanges.includes(route.name));
+      const routes = getActiveRoutes(state).filter(route => routeNames.includes(route.name) && !routeKeyChanges.includes(route.name));
+      const preloadedRoutes = getPreloadedRoutes(state).filter(route => routeNames.includes(route.name) && !routeKeyChanges.includes(route.name));
+      const retainedRoutes = getRetainedRoutes(state).filter(route => routeNames.includes(route.name) && !routeKeyChanges.includes(route.name));
       if (routes.length === 0) {
         const initialRouteName = options.initialRouteName !== undefined && routeNames.includes(options.initialRouteName) ? options.initialRouteName : routeNames[0];
         routes.push({
@@ -154,36 +165,33 @@ export function StackRouter(options) {
           params: routeParamList[initialRouteName]
         });
       }
-      const routeKeys = new Set([...routes, ...preloadedRoutes].map(route => route.key));
+      const routeKeys = new Set([...routes, ...preloadedRoutes, ...retainedRoutes].map(route => route.key));
       const retainedRouteKeys = state.retainedRouteKeys.filter(key => routeKeys.has(key));
-      return {
+      return getStateWithRoutes({
         ...state,
         routeNames,
-        routes,
-        preloadedRoutes,
-        retainedRouteKeys,
-        index: Math.min(state.index, routes.length - 1)
-      };
+        retainedRouteKeys
+      }, routes, preloadedRoutes, retainedRoutes);
     },
     getStateForRouteFocus(state, key) {
-      const index = state.routes.findIndex(r => r.key === key);
+      const routes = getActiveRoutes(state);
+      const index = routes.findIndex(r => r.key === key);
       if (index === -1 || index === state.index) {
         return state;
       }
-      return retainRoutes(state, {
-        ...state,
-        index,
-        routes: state.routes.slice(0, index + 1)
-      });
+      return retainRoutes(state, getStateWithRoutes(state, routes.slice(0, index + 1)));
     },
     getStateForAction(state, action, options) {
       const {
         routeParamList
       } = options;
+      const routes = getActiveRoutes(state);
+      const preloadedRoutes = getPreloadedRoutes(state);
+      const inactiveRoutes = getInactiveRoutes(state);
       switch (action.type) {
         case 'REPLACE':
           {
-            const currentIndex = action.target === state.key && action.source ? state.routes.findIndex(r => r.key === action.source) : state.index;
+            const currentIndex = action.target === state.key && action.source ? routes.findIndex(r => r.key === action.source) : state.index;
             if (currentIndex === -1) {
               return null;
             }
@@ -195,8 +203,8 @@ export function StackRouter(options) {
               params: action.payload.params
             });
 
-            // Re-use preloaded route if available
-            let route = state.preloadedRoutes.find(route => route.name === action.payload.name && id === getId?.({
+            // Re-use inactive route if available
+            let route = inactiveRoutes.find(route => route.name === action.payload.name && id === getId?.({
               params: route.params
             }));
             if (!route) {
@@ -204,12 +212,19 @@ export function StackRouter(options) {
                 action,
                 routeParamList
               });
+            } else {
+              const params = createParamsFromAction({
+                action,
+                routeParamList
+              });
+              if (route.params !== params) {
+                route = {
+                  ...route,
+                  params
+                };
+              }
             }
-            return retainRoutes(state, {
-              ...state,
-              routes: state.routes.map((r, i) => i === currentIndex ? route : r),
-              preloadedRoutes: state.preloadedRoutes.filter(r => r.key !== route.key)
-            });
+            return retainRoutes(state, getStateWithRoutes(state, routes.map((r, i) => i === currentIndex ? route : r), preloadedRoutes.filter(r => r.key !== route.key)));
           }
         case 'PUSH':
         case 'NAVIGATE':
@@ -223,15 +238,15 @@ export function StackRouter(options) {
             });
             let route;
             if (action.type === 'NAVIGATE') {
-              const currentRoute = state.routes[state.index];
+              const currentRoute = routes[state.index];
               if (id !== undefined) {
                 if (currentRoute.name === action.payload.name && id === getId?.({
                   params: currentRoute.params
                 })) {
                   route = currentRoute;
                 } else if (action.payload.pop) {
-                  for (let i = state.routes.length - 1; i >= 0; i--) {
-                    const r = state.routes[i];
+                  for (let i = routes.length - 1; i >= 0; i--) {
+                    const r = routes[i];
                     if (r.name !== action.payload.name) {
                       continue;
                     }
@@ -265,12 +280,12 @@ export function StackRouter(options) {
                 if (action.payload.name === currentRoute.name) {
                   route = currentRoute;
                 } else if (action.payload.pop) {
-                  route = state.routes.findLast(route => route.name === action.payload.name);
+                  route = routes.findLast(route => route.name === action.payload.name);
                 }
               }
             }
             if (!route) {
-              route = state.preloadedRoutes.find(route => route.name === action.payload.name && id === getId?.({
+              route = inactiveRoutes.find(route => route.name === action.payload.name && id === getId?.({
                 params: route.params
               }));
             }
@@ -287,50 +302,55 @@ export function StackRouter(options) {
                 routeParamList
               });
             }
-            let routes;
+            let nextRoutes;
             if (route) {
               if (action.type === 'NAVIGATE' && action.payload.pop) {
-                routes = [];
+                nextRoutes = [];
 
                 // Get all routes until the matching one
-                for (const r of state.routes) {
+                for (const r of routes) {
                   if (r.key === route.key) {
-                    routes.push({
+                    nextRoutes.push({
                       ...route,
                       path: action.payload.path !== undefined ? action.payload.path : route.path,
                       params
                     });
                     break;
                   }
-                  routes.push(r);
+                  nextRoutes.push(r);
+                }
+                if (!nextRoutes.some(r => r.key === route.key)) {
+                  nextRoutes.push({
+                    ...route,
+                    path: action.payload.path !== undefined ? action.payload.path : route.path,
+                    params
+                  });
                 }
               } else {
-                routes = state.routes.filter(r => r.key !== route.key);
-                routes.push({
+                nextRoutes = routes.filter(r => r.key !== route.key);
+                nextRoutes.push({
                   ...route,
                   path: action.type === 'NAVIGATE' && action.payload.path !== undefined ? action.payload.path : route.path,
                   params
                 });
               }
             } else {
-              routes = [...state.routes, {
+              nextRoutes = [...routes, {
                 key: `${action.payload.name}-${nanoid()}`,
                 name: action.payload.name,
                 path: action.type === 'NAVIGATE' ? action.payload.path : undefined,
                 params
               }];
             }
-            return retainRoutes(state, {
-              ...state,
-              index: routes.length - 1,
-              preloadedRoutes: state.preloadedRoutes.filter(route => routes[routes.length - 1].key !== route.key),
-              routes
-            });
+            return retainRoutes(state, getStateWithRoutes(state, nextRoutes, preloadedRoutes.filter(route => nextRoutes[nextRoutes.length - 1].key !== route.key)));
           }
         case 'POP':
           {
-            let currentIndex = action.target === state.key && action.source ? state.routes.findIndex(r => r.key === action.source) : state.index;
-            let route = state.routes[currentIndex];
+            let currentIndex = action.target === state.key && action.source ? routes.findIndex(r => r.key === action.source) : state.index;
+            if (currentIndex === -1) {
+              return null;
+            }
+            let route = routes[currentIndex];
 
             /**
              * When popping entries,
@@ -343,42 +363,38 @@ export function StackRouter(options) {
              */
             if (route.history?.length || currentIndex > 0) {
               let count = action.payload.count;
-              let routes = state.routes;
+              let nextRoutes = routes;
               while (count > 0 && (route.history?.length || currentIndex > 0)) {
                 if (route.history?.length) {
-                  routes = [...routes];
+                  nextRoutes = [...nextRoutes];
                   const end = Math.min(count, route.history.length);
                   const last = route.history.at(-end);
                   const history = route.history.slice(0, -end);
                   const removed = route.history.length - history.length;
                   count = count - removed;
-                  routes[currentIndex] = {
+                  nextRoutes[currentIndex] = {
                     ...route,
                     params: last?.type === 'params' ? last.params : route.params,
                     history
                   };
                 }
                 if (currentIndex > 0 && count > 0) {
-                  const length = routes.length;
+                  const length = nextRoutes.length;
                   const end = Math.max(currentIndex - count + 1, 1);
-                  routes = routes.slice(0, end).concat(routes.slice(currentIndex + 1));
-                  const removed = length - routes.length;
+                  nextRoutes = nextRoutes.slice(0, end).concat(nextRoutes.slice(currentIndex + 1));
+                  const removed = length - nextRoutes.length;
                   count = count - removed;
-                  currentIndex = routes.length - 1;
-                  route = routes[currentIndex];
+                  currentIndex = nextRoutes.length - 1;
+                  route = nextRoutes[currentIndex];
                 }
               }
-              return retainRoutes(state, {
-                ...state,
-                index: routes.length - 1,
-                routes
-              });
+              return retainRoutes(state, getStateWithRoutes(state, nextRoutes));
             }
             return null;
           }
         case 'POP_TO_TOP':
           {
-            let route = state.routes[0];
+            let route = routes[0];
             if (state.index > 0 || route.history?.length) {
               if (route.history?.length) {
                 route = {
@@ -386,17 +402,13 @@ export function StackRouter(options) {
                   history: undefined
                 };
               }
-              return retainRoutes(state, {
-                ...state,
-                index: 0,
-                routes: [route]
-              });
+              return retainRoutes(state, getStateWithRoutes(state, [route]));
             }
             return null;
           }
         case 'POP_TO':
           {
-            const currentIndex = action.target === state.key && action.source ? state.routes.findLastIndex(r => r.key === action.source) : state.index;
+            const currentIndex = action.target === state.key && action.source ? routes.findLastIndex(r => r.key === action.source) : state.index;
             if (currentIndex === -1) {
               return null;
             }
@@ -413,7 +425,7 @@ export function StackRouter(options) {
             });
             if (id !== undefined) {
               for (let i = currentIndex; i >= 0; i--) {
-                const r = state.routes[i];
+                const r = routes[i];
                 if (r.name !== action.payload.name) {
                   continue;
                 }
@@ -438,11 +450,11 @@ export function StackRouter(options) {
                   }
                 }
               }
-            } else if (state.routes[currentIndex].name === action.payload.name) {
+            } else if (routes[currentIndex].name === action.payload.name) {
               index = currentIndex;
             } else {
               for (let i = currentIndex; i >= 0; i--) {
-                if (state.routes[i].name === action.payload.name) {
+                if (routes[i].name === action.payload.name) {
                   index = i;
                   break;
                 }
@@ -451,8 +463,8 @@ export function StackRouter(options) {
 
             // If the route doesn't exist, remove the current route and add the new one
             if (index === -1) {
-              // Re-use preloaded route if available
-              let route = state.preloadedRoutes.find(route => route.name === action.payload.name && id === getId?.({
+              // Re-use inactive route if available
+              let route = inactiveRoutes.find(route => route.name === action.payload.name && id === getId?.({
                 params: route.params
               }));
               if (!route) {
@@ -460,16 +472,22 @@ export function StackRouter(options) {
                   action,
                   routeParamList
                 });
+              } else {
+                const params = createParamsFromAction({
+                  action,
+                  routeParamList
+                });
+                if (route.params !== params) {
+                  route = {
+                    ...route,
+                    params
+                  };
+                }
               }
-              const routes = state.routes.slice(0, currentIndex).concat(route);
-              return retainRoutes(state, {
-                ...state,
-                index: routes.length - 1,
-                routes,
-                preloadedRoutes: state.preloadedRoutes.filter(r => r.key !== route.key)
-              });
+              const nextRoutes = routes.slice(0, currentIndex).concat(route);
+              return retainRoutes(state, getStateWithRoutes(state, nextRoutes, preloadedRoutes.filter(r => r.key !== route.key)));
             }
-            const route = state.routes[index];
+            const route = routes[index];
             let baseParams = route.params;
             let history = route.history;
             if (historyIndex !== undefined && route.history) {
@@ -489,18 +507,14 @@ export function StackRouter(options) {
                 routeParamList
               });
             }
-            return retainRoutes(state, {
-              ...state,
-              index,
-              routes: [...state.routes.slice(0, index), params !== baseParams || historyIndex !== undefined ? {
-                ...route,
-                params,
-                history
-              } : state.routes[index]]
-            });
+            return retainRoutes(state, getStateWithRoutes(state, [...routes.slice(0, index), params !== baseParams || historyIndex !== undefined ? {
+              ...route,
+              params,
+              history
+            } : routes[index]]));
           }
         case 'GO_BACK':
-          if (state.index > 0 || state.routes[state.index].history?.length) {
+          if (state.index > 0 || routes[state.index].history?.length) {
             return router.getStateForAction(state, {
               type: 'POP',
               payload: {
@@ -513,8 +527,8 @@ export function StackRouter(options) {
           return null;
         case 'RETAIN':
           {
-            const routeKey = action.source ?? state.routes[state.index].key;
-            if (!state.routes.some(route => route.key === routeKey) && !state.preloadedRoutes.some(route => route.key === routeKey)) {
+            const routeKey = action.source ?? routes[state.index].key;
+            if (!state.routes.some(route => route.key === routeKey)) {
               return null;
             }
             if (action.payload.enable) {
@@ -529,14 +543,16 @@ export function StackRouter(options) {
             if (!state.retainedRouteKeys.includes(routeKey)) {
               return state;
             }
-            return {
+            return getStateWithRoutes({
               ...state,
-              preloadedRoutes: state.preloadedRoutes.filter(route => route.key !== routeKey),
               retainedRouteKeys: state.retainedRouteKeys.filter(key => key !== routeKey)
-            };
+            }, routes, preloadedRoutes.filter(route => route.key !== routeKey));
           }
         case 'PRELOAD':
           {
+            if (!state.routeNames.includes(action.payload.name)) {
+              return null;
+            }
             const getId = options.routeGetIdList[action.payload.name];
             const id = getId?.({
               params: action.payload.params
@@ -547,53 +563,41 @@ export function StackRouter(options) {
             });
             let route;
             if (action.payload.reuse) {
-              route = state.preloadedRoutes.findLast(route => route.name === action.payload.name && (id === undefined || id === getId?.({
+              route = preloadedRoutes.findLast(route => route.name === action.payload.name && (id === undefined || id === getId?.({
                 params: route.params
               })));
               if (route) {
-                return {
-                  ...state,
-                  preloadedRoutes: state.preloadedRoutes.map(r => r.key === route?.key && r.params !== params ? {
-                    ...r,
-                    params
-                  } : r)
-                };
+                return getStateWithRoutes(state, routes, preloadedRoutes.map(r => r.key === route?.key && r.params !== params ? {
+                  ...r,
+                  params
+                } : r));
               }
             }
             if (id !== undefined) {
-              route = state.routes.findLast(route => route.name === action.payload.name && id === getId?.({
+              route = routes.findLast(route => route.name === action.payload.name && id === getId?.({
                 params: route.params
               }));
             } else if (action.payload.reuse) {
-              route = state.routes.findLast(route => route.name === action.payload.name);
+              route = routes.findLast(route => route.name === action.payload.name);
             }
             if (route) {
-              return {
-                ...state,
-                routes: state.routes.map(r => r.key === route.key && r.params !== params ? {
-                  ...r,
-                  params
-                } : r)
-              };
+              return getStateWithRoutes(state, routes.map(r => r.key === route.key && r.params !== params ? {
+                ...r,
+                params
+              } : r), preloadedRoutes);
             } else {
-              return {
-                ...state,
-                preloadedRoutes: state.preloadedRoutes.filter(r => r.name !== action.payload.name || id !== getId?.({
-                  params: r.params
-                })).concat(createRouteFromAction({
-                  action,
-                  routeParamList
-                }))
-              };
+              return getStateWithRoutes(state, routes, preloadedRoutes.filter(r => r.name !== action.payload.name || id !== getId?.({
+                params: r.params
+              })).concat(createRouteFromAction({
+                action,
+                routeParamList
+              })));
             }
           }
         default:
           return BaseRouter.getStateForAction(state, action);
       }
     },
-    getRoutesFromState(state) {
-      return [...state.routes, ...state.preloadedRoutes];
-    },
     actionCreators: StackActions
   };
   return router;