@react-navigation/routers 8.0.0-alpha.1 → 8.0.0-alpha.11

package/lib/module/StackRouter.js

@@ -45,8 +45,50 @@ export const StackActions = {
         merge: options?.merge
       }
     };
+  },
+  retain(enable) {
+    return {
+      type: 'RETAIN',
+      payload: {
+        enable
+      }
+    };
   }
 };
+function retainRoutes(previousState, nextState) {
+  if (!nextState.retainedRouteKeys.length) {
+    return nextState;
+  }
+  const retainedRouteKeySet = new Set(nextState.retainedRouteKeys);
+  const nextRouteKeySet = new Set(nextState.routes.map(route => 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 {
+    ...state,
+    index: activeRoutes.length - 1,
+    routes: activeRoutes.concat(filteredRetainedRoutes, filteredPreloadedRoutes)
+  };
+};
 export function StackRouter(options) {
   const router = {
     ...BaseRouter,
@@ -56,13 +98,16 @@ export function StackRouter(options) {
       routeParamList
     }) {
       const initialRouteName = options.initialRouteName !== undefined && routeNames.includes(options.initialRouteName) ? options.initialRouteName : routeNames[0];
+      if (initialRouteName == null) {
+        throw new Error("Couldn't initialize the stack navigator. Have you defined any screens?");
+      }
       return {
         stale: false,
         type: 'stack',
         key: `stack-${nanoid()}`,
         index: 0,
         routeNames,
-        preloadedRoutes: [],
+        retainedRouteKeys: [],
         routes: [{
           key: `${initialRouteName}-${nanoid()}`,
           name: initialRouteName,
@@ -86,30 +131,28 @@ 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
-      })) ?? [];
       if (routes.length === 0) {
         const initialRouteName = options.initialRouteName !== undefined ? options.initialRouteName : routeNames[0];
+        if (initialRouteName == null) {
+          throw new Error("Couldn't initialize the stack navigator. Have you defined any screens?");
+        }
         routes.push({
           key: `${initialRouteName}-${nanoid()}`,
           name: initialRouteName,
           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
       };
     },
     getStateForRouteNamesChange(state, {
@@ -117,41 +160,47 @@ export function StackRouter(options) {
       routeParamList,
       routeKeyChanges
     }) {
-      const routes = state.routes.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];
+        if (initialRouteName == null) {
+          throw new Error("Couldn't initialize the stack navigator. Have you defined any screens?");
+        }
         routes.push({
           key: `${initialRouteName}-${nanoid()}`,
           name: initialRouteName,
           params: routeParamList[initialRouteName]
         });
       }
-      return {
+      const routeKeys = new Set([...routes, ...preloadedRoutes, ...retainedRoutes].map(route => route.key));
+      const retainedRouteKeys = state.retainedRouteKeys.filter(key => routeKeys.has(key));
+      return getStateWithRoutes({
         ...state,
         routeNames,
-        routes,
-        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 {
-        ...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;
             }
@@ -163,8 +212,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) {
@@ -172,12 +221,19 @@ export function StackRouter(options) {
                 action,
                 routeParamList
               });
+            } else {
+              const params = createParamsFromAction({
+                action,
+                routeParamList
+              });
+              if (route.params !== params) {
+                route = {
+                  ...route,
+                  params
+                };
+              }
             }
-            return {
-              ...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':
@@ -190,22 +246,65 @@ export function StackRouter(options) {
               params: action.payload.params
             });
             let route;
-            if (id !== undefined) {
-              route = state.routes.findLast(route => route.name === action.payload.name && id === getId?.({
-                params: route.params
-              }));
-            } else if (action.type === 'NAVIGATE') {
-              const currentRoute = state.routes[state.index];
-
-              // If the route matches the current one, then navigate to it
-              if (action.payload.name === currentRoute.name) {
-                route = currentRoute;
-              } else if (action.payload.pop) {
-                route = state.routes.findLast(route => route.name === action.payload.name);
+            if (action.type === 'NAVIGATE') {
+              const currentRoute = routes[state.index];
+              if (currentRoute == null) {
+                throw new Error(`Couldn't find a route at index ${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 = routes.length - 1; i >= 0; i--) {
+                    const r = routes[i];
+                    if (r == null) {
+                      throw new Error(`Couldn't find a route at index ${i}.`);
+                    }
+                    if (r.name !== action.payload.name) {
+                      continue;
+                    }
+                    if (id === getId?.({
+                      params: r.params
+                    })) {
+                      route = r;
+                      break;
+                    }
+                    if (r.history?.length) {
+                      for (let j = r.history.length - 1; j >= 0; j--) {
+                        const historyEntry = r.history[j];
+                        if (historyEntry == null) {
+                          throw new Error(`Couldn't find a route history entry at index ${j}.`);
+                        }
+                        if (historyEntry.type === 'params' && id === getId?.({
+                          params: historyEntry.params
+                        })) {
+                          route = {
+                            ...r,
+                            params: historyEntry.params,
+                            history: r.history.slice(0, j)
+                          };
+                          break;
+                        }
+                      }
+                      if (route) {
+                        break;
+                      }
+                    }
+                  }
+                }
+              } else {
+                // If the route matches the current one, then navigate to it
+                if (action.payload.name === currentRoute.name) {
+                  route = currentRoute;
+                } else if (action.payload.pop) {
+                  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
               }));
             }
@@ -222,50 +321,62 @@ 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 {
-              ...state,
-              index: routes.length - 1,
-              preloadedRoutes: state.preloadedRoutes.filter(route => routes[routes.length - 1].key !== route.key),
-              routes
-            };
+            const lastRoute = nextRoutes[nextRoutes.length - 1];
+            if (lastRoute == null) {
+              throw new Error(`Couldn't find a route at index ${nextRoutes.length - 1}.`);
+            }
+            return retainRoutes(state, getStateWithRoutes(state, nextRoutes, preloadedRoutes.filter(route => lastRoute.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];
+            if (route == null) {
+              throw new Error(`Couldn't find a route at index ${currentIndex}.`);
+            }
 
             /**
              * When popping entries,
@@ -278,42 +389,45 @@ 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;
+                  const currentRoute = nextRoutes[currentIndex];
+                  if (currentRoute == null) {
+                    throw new Error(`Couldn't find a route at index ${currentIndex}.`);
+                  }
+                  route = currentRoute;
                 }
               }
-              return {
-                ...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 (route == null) {
+              throw new Error("Couldn't find a route at index 0.");
+            }
             if (state.index > 0 || route.history?.length) {
               if (route.history?.length) {
                 route = {
@@ -321,17 +435,13 @@ export function StackRouter(options) {
                   history: undefined
                 };
               }
-              return {
-                ...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;
             }
@@ -341,19 +451,61 @@ export function StackRouter(options) {
 
             // If the route already exists, navigate to it
             let index = -1;
+            let historyIndex;
             const getId = options.routeGetIdList[action.payload.name];
             const id = getId?.({
               params: action.payload.params
             });
             if (id !== undefined) {
-              index = state.routes.findIndex(route => route.name === action.payload.name && id === getId?.({
-                params: route.params
-              }));
-            } else if (state.routes[currentIndex].name === action.payload.name) {
-              index = currentIndex;
+              for (let i = currentIndex; i >= 0; i--) {
+                const r = routes[i];
+                if (r == null) {
+                  throw new Error(`Couldn't find a route at index ${i}.`);
+                }
+                if (r.name !== action.payload.name) {
+                  continue;
+                }
+                if (id === getId?.({
+                  params: r.params
+                })) {
+                  index = i;
+                  break;
+                }
+                if (r.history?.length) {
+                  for (let j = r.history.length - 1; j >= 0; j--) {
+                    const historyEntry = r.history[j];
+                    if (historyEntry == null) {
+                      throw new Error(`Couldn't find a route history entry at index ${j}.`);
+                    }
+                    if (historyEntry.type === 'params' && id === getId?.({
+                      params: historyEntry.params
+                    })) {
+                      index = i;
+                      historyIndex = j;
+                      break;
+                    }
+                  }
+                  if (index !== -1) {
+                    break;
+                  }
+                }
+              }
             } else {
+              const currentRoute = routes[currentIndex];
+              if (currentRoute == null) {
+                throw new Error(`Couldn't find a route at index ${currentIndex}.`);
+              }
+              if (currentRoute.name === action.payload.name) {
+                index = currentIndex;
+              }
+            }
+            if (id == null && index === -1) {
               for (let i = currentIndex; i >= 0; i--) {
-                if (state.routes[i].name === action.payload.name) {
+                const route = routes[i];
+                if (route == null) {
+                  throw new Error(`Couldn't find a route at index ${i}.`);
+                }
+                if (route.name === action.payload.name) {
                   index = i;
                   break;
                 }
@@ -362,8 +514,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) {
@@ -371,97 +523,130 @@ 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 {
-                ...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 = routes[index];
+            if (route == null) {
+              throw new Error(`Couldn't find a route at index ${index}.`);
+            }
+            let baseParams = route.params;
+            let history = route.history;
+            if (historyIndex !== undefined && route.history) {
+              const historyEntry = route.history[historyIndex];
+              if (historyEntry == null) {
+                throw new Error(`Couldn't find a route history entry at index ${historyIndex}.`);
+              }
+              baseParams = historyEntry.params;
+              history = route.history.slice(0, historyIndex);
             }
-            const route = state.routes[index];
             let params;
             if (action.payload.merge) {
               params = action.payload.params !== undefined || routeParamList[route.name] !== undefined ? {
                 ...routeParamList[route.name],
-                ...route.params,
+                ...baseParams,
                 ...action.payload.params
-              } : route.params;
+              } : baseParams;
             } else {
               params = createParamsFromAction({
                 action,
                 routeParamList
               });
             }
-            return {
-              ...state,
-              index,
-              routes: [...state.routes.slice(0, index), params !== route.params ? {
-                ...route,
-                params
-              } : state.routes[index]]
-            };
+            return retainRoutes(state, getStateWithRoutes(state, [...routes.slice(0, index), params !== baseParams || historyIndex !== undefined ? {
+              ...route,
+              params,
+              history
+            } : route]));
           }
         case 'GO_BACK':
-          if (state.index > 0 || state.routes[state.index].history?.length) {
-            return router.getStateForAction(state, {
-              type: 'POP',
-              payload: {
-                count: 1
-              },
-              target: action.target,
-              source: action.source
-            }, options);
+          {
+            const route = routes[state.index];
+            if (route == null) {
+              throw new Error(`Couldn't find a route at index ${state.index}.`);
+            }
+            if (state.index > 0 || route.history?.length) {
+              return router.getStateForAction(state, {
+                type: 'POP',
+                payload: {
+                  count: 1
+                },
+                target: action.target,
+                source: action.source
+              }, options);
+            }
+            return null;
+          }
+        case 'RETAIN':
+          {
+            const route = routes[state.index];
+            if (route == null) {
+              throw new Error(`Couldn't find a route at index ${state.index}.`);
+            }
+            const routeKey = action.source ?? route.key;
+            if (!state.routes.some(route => route.key === routeKey)) {
+              return null;
+            }
+            if (action.payload.enable) {
+              if (state.retainedRouteKeys.includes(routeKey)) {
+                return state;
+              }
+              return {
+                ...state,
+                retainedRouteKeys: [...state.retainedRouteKeys, routeKey]
+              };
+            }
+            if (!state.retainedRouteKeys.includes(routeKey)) {
+              return state;
+            }
+            return getStateWithRoutes({
+              ...state,
+              retainedRouteKeys: state.retainedRouteKeys.filter(key => key !== routeKey)
+            }, routes, preloadedRoutes.filter(route => route.key !== routeKey));
           }
-          return null;
         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
             });
-            let route;
-            if (id !== undefined) {
-              route = state.routes.find(route => route.name === action.payload.name && id === getId?.({
-                params: route.params
-              }));
-            }
+            const params = createParamsFromAction({
+              action,
+              routeParamList
+            });
+            const route = preloadedRoutes.findLast(route => route.name === action.payload.name && (id === undefined || id === getId?.({
+              params: route.params
+            })));
             if (route) {
-              return {
-                ...state,
-                routes: state.routes.map(r => {
-                  if (r.key !== route?.key) {
-                    return r;
-                  }
-                  return {
-                    ...r,
-                    params: createParamsFromAction({
-                      action,
-                      routeParamList
-                    })
-                  };
-                })
-              };
-            } 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.map(r => r.key === route.key && r.params !== params ? {
+                ...r,
+                params
+              } : r));
             }
+            return getStateWithRoutes(state, routes, preloadedRoutes.concat(createRouteFromAction({
+              action,
+              routeParamList
+            })));
           }
         default:
           return BaseRouter.getStateForAction(state, action);
       }
     },
-    getRoutesFromState(state) {
-      return [...state.routes, ...state.preloadedRoutes];
-    },
     actionCreators: StackActions
   };
   return router;