@react-navigation/routers 8.0.0-alpha.2 → 8.0.0-alpha.21

package/src/TabRouter.tsx

@@ -1,44 +1,16 @@
-import { nanoid } from 'nanoid/non-secure';
-
-import { BaseRouter } from './BaseRouter';
-import { createParamsFromAction } from './createParamsFromAction';
+import {
+  type SwitchActionType as TabActionType,
+  SwitchRouter,
+  type SwitchRouterOptions as TabRouterOptions,
+} from './SwitchRouter';
 import type {
   CommonNavigationAction,
-  DefaultRouterOptions,
   NavigationState,
   ParamListBase,
-  PartialState,
-  Route,
   Router,
 } from './types';
 
-export type TabActionType = {
-  type: 'JUMP_TO';
-  payload: { name: string; params?: object };
-  source?: string;
-  target?: string;
-};
-
-export type BackBehavior =
-  | 'firstRoute'
-  | 'initialRoute'
-  | 'order'
-  | 'history'
-  | 'fullHistory'
-  | 'none';
-
-export type TabRouterOptions = DefaultRouterOptions & {
-  /**
-   * Control how going back should behave
-   * - `firstRoute` - return to the first defined route
-   * - `initialRoute` - return to the route from `initialRouteName`
-   * - `order` - return to the route defined before the focused route
-   * - `history` - return to last visited route; if the same route is visited multiple times, the older entries are dropped from the history
-   * - `fullHistory` - return to last visited route; doesn't drop duplicate entries unlike `history` - matches behavior of web pages
-   * - `none` - do not handle going back
-   */
-  backBehavior?: BackBehavior;
-};
+export type { TabActionType, TabRouterOptions };
 
 export type TabNavigationState<ParamList extends ParamListBase> = Omit<
   NavigationState<ParamList>,
@@ -74,8 +46,6 @@ export type TabActionHelpers<ParamList extends ParamListBase> = {
   ): void;
 };
 
-const TYPE_ROUTE = 'route' as const;
-
 export const TabActions = {
   jumpTo(name: string, params?: object) {
     return {
@@ -85,452 +55,43 @@ export const TabActions = {
   },
 };
 
-const getRouteHistory = (
-  routes: Route<string>[],
-  index: number,
-  backBehavior: BackBehavior,
-  initialRouteName: string | undefined
-) => {
-  const history = [
-    {
-      type: TYPE_ROUTE,
-      key: routes[index].key,
-    },
-  ];
-
-  let initialRouteIndex;
-
-  switch (backBehavior) {
-    case 'order':
-      for (let i = index; i > 0; i--) {
-        history.unshift({
-          type: TYPE_ROUTE,
-          key: routes[i - 1].key,
-        });
-      }
-      break;
-    case 'firstRoute':
-      if (index !== 0) {
-        history.unshift({
-          type: TYPE_ROUTE,
-          key: routes[0].key,
-        });
-      }
-      break;
-    case 'initialRoute':
-      initialRouteIndex = routes.findIndex(
-        (route) => route.name === initialRouteName
-      );
-      initialRouteIndex = initialRouteIndex === -1 ? 0 : initialRouteIndex;
-
-      if (index !== initialRouteIndex) {
-        history.unshift({
-          type: TYPE_ROUTE,
-          key: routes[initialRouteIndex].key,
-        });
-      }
-      break;
-    case 'history':
-    case 'fullHistory':
-      // The history will fill up on navigation
-      break;
-  }
-
-  return history;
-};
-
-const changeIndex = (
-  state: TabNavigationState<ParamListBase>,
-  index: number,
-  backBehavior: BackBehavior,
-  initialRouteName: string | undefined
-) => {
-  let history = state.history;
-
-  if (backBehavior === 'history' || backBehavior === 'fullHistory') {
-    const currentRoute = state.routes[index];
-
-    if (backBehavior === 'history') {
-      // Remove the existing key from the history to de-duplicate it
-      history = history.filter((it) =>
-        it.type === 'route' ? it.key !== currentRoute.key : false
-      );
-    } else if (backBehavior === 'fullHistory') {
-      const lastHistoryRouteItemIndex = history.findLastIndex(
-        (item) => item.type === 'route'
-      );
-
-      if (currentRoute.key === history[lastHistoryRouteItemIndex]?.key) {
-        // For full-history, only remove if it matches the last route
-        // Useful for drawer, if current route was in history, then drawer state changed
-        // Then we only need to move the route to the front
-        history = [
-          ...history.slice(0, lastHistoryRouteItemIndex),
-          ...history.slice(lastHistoryRouteItemIndex + 1),
-        ];
-      }
-    }
-
-    history = history.concat({
-      type: TYPE_ROUTE,
-      key: currentRoute.key,
-      params: backBehavior === 'fullHistory' ? currentRoute.params : undefined,
-    });
-  } else {
-    history = getRouteHistory(
-      state.routes,
-      index,
-      backBehavior,
-      initialRouteName
-    );
-  }
+export function TabRouter(
+  options: TabRouterOptions
+): Router<
+  TabNavigationState<ParamListBase>,
+  TabActionType | CommonNavigationAction
+> {
+  const router = SwitchRouter<'tab'>(options);
 
   return {
-    ...state,
-    index,
-    history,
-  };
-};
-
-export function TabRouter({
-  initialRouteName,
-  backBehavior = 'firstRoute',
-}: TabRouterOptions) {
-  const router: Router<
-    TabNavigationState<ParamListBase>,
-    TabActionType | CommonNavigationAction
-  > = {
-    ...BaseRouter,
+    ...router,
 
     type: 'tab',
 
-    getInitialState({ routeNames, routeParamList }) {
-      const index =
-        initialRouteName !== undefined && routeNames.includes(initialRouteName)
-          ? routeNames.indexOf(initialRouteName)
-          : 0;
-
-      const routes = routeNames.map((name) => ({
-        name,
-        key: `${name}-${nanoid()}`,
-        params: routeParamList[name],
-      }));
-
-      const history = getRouteHistory(
-        routes,
-        index,
-        backBehavior,
-        initialRouteName
-      );
+    getInitialState(routerOptions) {
+      const state = router.getInitialState(routerOptions);
 
       return {
-        stale: false,
+        ...state,
         type: 'tab',
-        key: `tab-${nanoid()}`,
-        index,
-        routeNames,
-        history,
-        routes,
-        preloadedRouteKeys: [],
+        key: `tab-${state.key}`,
       };
     },
 
-    getRehydratedState(partialState, { routeNames, routeParamList }) {
-      const state = partialState;
-
-      if (state.stale === false) {
-        return state;
+    getRehydratedState(partialState, routerOptions) {
+      if (partialState.stale === false) {
+        return partialState;
       }
 
-      const routes = routeNames.map((name) => {
-        const route = (
-          state as PartialState<TabNavigationState<ParamListBase>>
-        ).routes.find((r) => r.name === name);
-
-        return {
-          ...route,
-          name,
-          key:
-            route && route.name === name && route.key
-              ? route.key
-              : `${name}-${nanoid()}`,
-          params:
-            routeParamList[name] !== undefined
-              ? {
-                  ...routeParamList[name],
-                  ...(route ? route.params : undefined),
-                }
-              : route
-                ? route.params
-                : undefined,
-        } as Route<string>;
-      });
-
-      const index = Math.min(
-        Math.max(routeNames.indexOf(state.routes[state?.index ?? 0]?.name), 0),
-        routes.length - 1
-      );
-
-      const routeKeys = routes.map((route) => route.key);
-
-      const history =
-        state.history?.filter((it) => routeKeys.includes(it.key)) ?? [];
-
-      return changeIndex(
-        {
-          stale: false,
-          type: 'tab',
-          key: `tab-${nanoid()}`,
-          index,
-          routeNames,
-          history,
-          routes,
-          preloadedRouteKeys:
-            state.preloadedRouteKeys?.filter((key) =>
-              routeKeys.includes(key)
-            ) ?? [],
-        },
-        index,
-        backBehavior,
-        initialRouteName
-      );
-    },
-
-    getStateForRouteNamesChange(
-      state,
-      { routeNames, routeParamList, routeKeyChanges }
-    ) {
-      const routes = routeNames.map(
-        (name) =>
-          state.routes.find(
-            (r) => r.name === name && !routeKeyChanges.includes(r.name)
-          ) || {
-            name,
-            key: `${name}-${nanoid()}`,
-            params: routeParamList[name],
-          }
-      );
-
-      const index = Math.max(
-        0,
-        routeNames.indexOf(state.routes[state.index].name)
-      );
-
-      let history = state.history.filter(
-        // Type will always be 'route' for tabs, but could be different in a router extending this (e.g. drawer)
-        (it) => it.type !== 'route' || routes.find((r) => r.key === it.key)
-      );
-
-      if (!history.length) {
-        history = getRouteHistory(
-          routes,
-          index,
-          backBehavior,
-          initialRouteName
-        );
-      }
+      const state = router.getRehydratedState(partialState, routerOptions);
 
       return {
         ...state,
-        history,
-        routeNames,
-        routes,
-        index,
+        type: 'tab',
+        key: `tab-${state.key}`,
       };
     },
 
-    getStateForRouteFocus(state, key) {
-      const index = state.routes.findIndex((r) => r.key === key);
-
-      if (index === -1 || index === state.index) {
-        return state;
-      }
-
-      return changeIndex(state, index, backBehavior, initialRouteName);
-    },
-
-    getStateForAction(state, action, { routeParamList, routeGetIdList }) {
-      switch (action.type) {
-        case 'JUMP_TO':
-        case 'NAVIGATE': {
-          const index = state.routes.findIndex(
-            (route) => route.name === action.payload.name
-          );
-
-          if (index === -1) {
-            return null;
-          }
-
-          const updatedState = changeIndex(
-            {
-              ...state,
-              routes: state.routes.map((route) => {
-                if (route.name !== action.payload.name) {
-                  return route;
-                }
-
-                const getId = routeGetIdList[route.name];
-
-                const currentId = getId?.({ params: route.params });
-                const nextId = getId?.({ params: action.payload.params });
-
-                const key =
-                  currentId === nextId
-                    ? route.key
-                    : `${route.name}-${nanoid()}`;
-
-                let params;
-
-                if (
-                  action.type === 'NAVIGATE' &&
-                  action.payload.merge &&
-                  currentId === nextId
-                ) {
-                  params =
-                    action.payload.params !== undefined ||
-                    routeParamList[route.name] !== undefined
-                      ? {
-                          ...routeParamList[route.name],
-                          ...route.params,
-                          ...action.payload.params,
-                        }
-                      : route.params;
-                } else {
-                  params = createParamsFromAction({ action, routeParamList });
-                }
-
-                const path =
-                  action.type === 'NAVIGATE' && action.payload.path != null
-                    ? action.payload.path
-                    : route.path;
-
-                return params !== route.params || path !== route.path
-                  ? { ...route, key, path, params }
-                  : route;
-              }),
-            },
-            index,
-            backBehavior,
-            initialRouteName
-          );
-
-          return {
-            ...updatedState,
-            preloadedRouteKeys: updatedState.preloadedRouteKeys.filter(
-              (key) => key !== state.routes[updatedState.index].key
-            ),
-          };
-        }
-
-        case 'GO_BACK': {
-          const focusedRoute = state.routes[state.index];
-
-          if (state.history.length === 1 && !focusedRoute.history?.length) {
-            return null;
-          }
-
-          const lastHistoryItem = state.history[state.history.length - 1];
-
-          if (
-            lastHistoryItem?.type === 'route' &&
-            focusedRoute.history?.length
-          ) {
-            const routes = [...state.routes];
-            const history = [...focusedRoute.history];
-            const last = history.pop();
-
-            routes[state.index] = {
-              ...focusedRoute,
-              params:
-                last?.type === 'params' ? last.params : focusedRoute.params,
-              history,
-            };
-
-            return {
-              ...state,
-              routes,
-            };
-          }
-
-          const previousHistoryItem = state.history[state.history.length - 2];
-          const previousKey = previousHistoryItem?.key;
-          const index = state.routes.findLastIndex(
-            (route) => route.key === previousKey
-          );
-
-          if (index === -1) {
-            return null;
-          }
-
-          let routes = state.routes;
-
-          if (
-            backBehavior === 'fullHistory' &&
-            routes[index].params !== previousHistoryItem.params
-          ) {
-            routes = [...state.routes];
-            routes[index] = {
-              ...routes[index],
-              params: previousHistoryItem.params,
-            };
-          }
-
-          return {
-            ...state,
-            routes,
-            preloadedRouteKeys: state.preloadedRouteKeys.filter(
-              (key) => key !== state.routes[index].key
-            ),
-            history: state.history.slice(0, -1),
-            index,
-          };
-        }
-
-        case 'PRELOAD': {
-          const routeIndex = state.routes.findIndex(
-            (route) => route.name === action.payload.name
-          );
-
-          if (routeIndex === -1) {
-            return null;
-          }
-
-          const route = state.routes[routeIndex];
-
-          const getId = routeGetIdList[route.name];
-
-          const currentId = getId?.({ params: route.params });
-          const nextId = getId?.({ params: action.payload.params });
-
-          const key =
-            currentId === nextId ? route.key : `${route.name}-${nanoid()}`;
-
-          const params = createParamsFromAction({ action, routeParamList });
-          const newRoute =
-            params !== route.params ? { ...route, key, params } : route;
-
-          return {
-            ...state,
-            preloadedRouteKeys: state.preloadedRouteKeys
-              .filter((key) => key !== route.key)
-              .concat(newRoute.key),
-            routes: state.routes.map((route, index) =>
-              index === routeIndex ? newRoute : route
-            ),
-            history:
-              key === route.key
-                ? state.history
-                : state.history.filter((record) => record.key !== route.key),
-          };
-        }
-
-        default:
-          return BaseRouter.getStateForAction(state, action);
-      }
-    },
-
     actionCreators: TabActions,
   };
-
-  return router;
 }

package/src/createParamsFromAction.tsx

@@ -4,7 +4,7 @@ type Options = {
   action: {
     payload: {
       name: string;
-      params?: object;
+      params?: object | undefined;
     };
   };
   routeParamList: ParamListBase;

package/src/createRouteFromAction.tsx

@@ -7,7 +7,7 @@ type Options = {
   action: {
     payload: {
       name: string;
-      params?: object;
+      params?: object | undefined;
     };
   };
   routeParamList: ParamListBase;

package/src/types.tsx

@@ -6,7 +6,7 @@ export type NavigationRoute<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList,
 > = Route<Extract<RouteName, string>, ParamList[RouteName]> & {
-  state?: NavigationState | PartialState<NavigationState>;
+  state?: NavigationState | PartialState<NavigationState> | undefined;
 };
 
 export type NavigationState<ParamList extends ParamListBase = ParamListBase> =
@@ -26,13 +26,13 @@ export type NavigationState<ParamList extends ParamListBase = ParamListBase> =
     /**
      * Alternative entries for history.
      */
-    history?: unknown[];
+    history?: unknown[] | undefined;
     /**
      * List of rendered routes.
      */
     routes: NavigationRoute<ParamList, keyof ParamList>[];
     /**
-     * Custom type for the state, whether it's for tab, stack, drawer etc.
+     * The type of the state, i.e., whether it's for tab, stack, drawer etc.
      * During rehydration, the state will be discarded if type doesn't match with router type.
      * It can also be used to detect the type of the navigator we're dealing with.
      */
@@ -45,21 +45,23 @@ export type NavigationState<ParamList extends ParamListBase = ParamListBase> =
 
 export type InitialState = Readonly<
   Partial<Omit<NavigationState, 'stale' | 'routes'>> & {
-    routes: (Omit<Route<string>, 'key'> & { state?: InitialState })[];
+    routes: (Omit<Route<string>, 'key'> & {
+      state?: InitialState | undefined;
+    })[];
   }
 >;
 
 export type PartialRoute<R extends Route<string>> = Omit<R, 'key'> & {
-  key?: string;
-  state?: PartialState<NavigationState>;
+  key?: string | undefined;
+  state?: NavigationState | PartialState<NavigationState> | undefined;
 };
 
 export type PartialState<State extends NavigationState> = Partial<
   Omit<State, 'stale' | 'routes'>
 > &
   Readonly<{
-    stale?: true;
-    routes: PartialRoute<Route<State['routeNames'][number]>>[];
+    stale?: true | undefined;
+    routes: PartialRoute<State['routes'][number]>[];
   }>;
 
 export type Route<
@@ -79,26 +81,31 @@ export type Route<
      * Path associated with the route.
      * Usually present when the screen was opened from a deep link.
      */
-    path?: string;
+    path?: string | undefined;
     /**
      * History of param changes for this route.
      */
-    history?: { type: 'params'; params: object }[];
-  } & Readonly<
-    undefined extends Params
-      ? {
-          /**
-           * Params for this route
-           */
-          params?: Readonly<Params>;
-        }
-      : {
-          /**
-           * Params for this route
-           */
-          params: Readonly<Params>;
-        }
-  >
+    history?:
+      | {
+          type: 'params';
+          params: undefined extends Params
+            ? Readonly<Params> | undefined
+            : Readonly<Params>;
+        }[]
+      | undefined;
+  } & (undefined extends Params
+    ? {
+        /**
+         * Params for this route
+         */
+        params?: Readonly<Params> | undefined;
+      }
+    : {
+        /**
+         * Params for this route
+         */
+        params: Readonly<Params>;
+      })
 >;
 
 export type ParamListBase = Record<string, object | undefined>;
@@ -111,15 +118,15 @@ export type NavigationAction = Readonly<{
   /**
    * Additional data for the action
    */
-  payload?: object;
+  payload?: object | undefined;
   /**
    * Key of the route which dispatched this action.
    */
-  source?: string;
+  source?: string | undefined;
   /**
    * Key of the navigator which should handle this action.
    */
-  target?: string;
+  target?: string | undefined;
 }>;
 
 export type ActionCreators<Action extends NavigationAction> = {
@@ -131,7 +138,7 @@ export type DefaultRouterOptions<RouteName extends string = string> = {
    * Name of the route to focus by on initial render.
    * If not specified, usually the first route is used.
    */
-  initialRouteName?: RouteName;
+  initialRouteName?: RouteName | undefined;
 };
 
 export type RouterFactory<
@@ -145,7 +152,9 @@ export type RouterConfigOptions = {
   routeParamList: ParamListBase;
   routeGetIdList: Record<
     string,
-    | ((options: { params?: Record<string, any> }) => string | undefined)
+    | ((options: {
+        params?: Record<string, any> | undefined;
+      }) => string | undefined)
     | undefined
   >;
 };
@@ -228,17 +237,6 @@ export type Router<
    */
   shouldActionChangeFocus(action: NavigationAction): boolean;
 
-  /**
-   * Get the list of routes from the navigation state.
-   *
-   * By default, `state.routes` is used.
-   * But in some cases (like `preloadedRoutes` in stack),
-   * the actual list of routes may be different.
-   *
-   * @param state Navigation state to get the routes from.
-   */
-  getRoutesFromState?(state: State): Route<string>[];
-
   /**
    * Action creators for the router.
    */