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

package/src/checkSerializable.tsx

@@ -1,14 +1,16 @@
-const checkSerializableWithoutCircularReference = (
-  o: { [key: string]: any },
-  seen: Set<any>,
-  location: (string | number)[]
-):
+type Result =
   | { serializable: true }
   | {
       serializable: false;
       location: (string | number)[];
       reason: string;
-    } => {
+    };
+
+const checkSerializableWithoutCircularReference = (
+  o: { [key: string]: any },
+  seen: Set<any>,
+  location: (string | number)[]
+): Result => {
   if (
     o === undefined ||
     o === null ||
@@ -25,7 +27,7 @@ const checkSerializableWithoutCircularReference = (
   ) {
     return {
       serializable: false,
-      location,
+      location: location.slice(),
       reason: typeof o === 'function' ? 'Function' : String(o),
     };
   }
@@ -34,7 +36,7 @@ const checkSerializableWithoutCircularReference = (
     return {
       serializable: false,
       reason: 'Circular reference',
-      location,
+      location: location.slice(),
     };
   }
 
@@ -42,30 +44,38 @@ const checkSerializableWithoutCircularReference = (
 
   if (Array.isArray(o)) {
     for (let i = 0; i < o.length; i++) {
+      location.push(i);
       const childResult = checkSerializableWithoutCircularReference(
         o[i],
-        new Set<any>(seen),
-        [...location, i]
+        seen,
+        location
       );
+      location.pop();
 
       if (!childResult.serializable) {
+        seen.delete(o);
         return childResult;
       }
     }
   } else {
     for (const key in o) {
+      location.push(key);
       const childResult = checkSerializableWithoutCircularReference(
         o[key],
-        new Set<any>(seen),
-        [...location, key]
+        seen,
+        location
       );
+      location.pop();
 
       if (!childResult.serializable) {
+        seen.delete(o);
         return childResult;
       }
     }
   }
 
+  seen.delete(o);
+
   return { serializable: true };
 };
 

package/src/createNavigatorFactory.tsx

@@ -1,23 +1,98 @@
-import type * as React from 'react';
+import type { ParamListBase } from '@react-navigation/routers';
+import * as React from 'react';
 
 import { Group } from './Group';
 import { Screen } from './Screen';
+import {
+  createComponentForStaticConfig,
+  type StaticConfig,
+  type StaticParamList,
+} from './StaticNavigation';
+import type {
+  NavigatorTypeBagBase,
+  NavigatorTypeBagFor,
+  TypedNavigator,
+} from './types';
+import type { KeysOf } from './utilities';
+
+export type TypedNavigatorFactory<in out TypeBag extends NavigatorTypeBagBase> =
+  {
+    <const ParamList extends ParamListBase>(): TypedNavigator<
+      NavigatorTypeBagFor<TypeBag, ParamList>,
+      undefined
+    >;
+    <
+      const Config extends StaticConfig<
+        NavigatorTypeBagFor<TypeBag, ParamListBase>
+      > &
+        // TS only checks for excess properties for non-generic object literal types.
+        // Since `Config` is generic, extra keys satisfy the constraint and slip through.
+        // So we force any key in `Config` that isn't a known key to have the type `never`,
+        // Thus causing an error for any extra key.
+        Record<
+          Exclude<
+            keyof Config,
+            KeysOf<StaticConfig<NavigatorTypeBagFor<TypeBag, ParamListBase>>>
+          >,
+          never
+        >,
+    >(
+      config: Config
+    ): TypedNavigator<
+      NavigatorTypeBagFor<TypeBag, StaticParamList<{ config: Config }>>,
+      Config
+    >;
+  };
 
 /**
- * Higher order component to create a `Navigator` and `Screen` pair.
- * Custom navigators should wrap the navigator component in `createNavigator` before exporting.
+ * Higher order function to create a navigator factory
+ * A navigator factory creates a navigator:
+ * - `Navigator` and `Screen` pairs for dynamic configuration
+ * - Static navigator object for static configuration
  *
  * @param Navigator The navigator component to wrap.
- * @returns Factory method to create a `Navigator` and `Screen` pair.
+ * @returns Factory method to create a navigator
  */
-export function createNavigatorFactory(Navigator: React.ComponentType<any>) {
+export function createNavigatorFactory<TypeBag extends NavigatorTypeBagBase>(
+  Navigator: React.ComponentType<any>
+): TypedNavigatorFactory<TypeBag> {
+  const displayName = Navigator.displayName ?? Navigator.name ?? 'Navigator';
+
   function createNavigator(config?: any): any {
     if (config != null) {
+      const NavigatorComponent = createComponentForStaticConfig(
+        {
+          Navigator,
+          Screen,
+          Group,
+          config,
+        },
+        displayName
+      );
+
       return {
-        Navigator,
-        Screen,
-        Group,
         config,
+        with(
+          DecoratorComponent: React.ComponentType<{
+            Navigator: React.ComponentType<any>;
+          }>
+        ) {
+          const WithComponent = () => {
+            return React.createElement(DecoratorComponent, {
+              Navigator: NavigatorComponent,
+            });
+          };
+
+          WithComponent.displayName = `${displayName}With`;
+
+          return {
+            config,
+            getComponent: () => WithComponent,
+          };
+        },
+        getComponent() {
+          return NavigatorComponent;
+        },
       };
     }
 

package/src/findFocusedRoute.tsx

@@ -2,21 +2,26 @@ import type { InitialState } from '@react-navigation/routers';
 
 type Result =
   | {
-      key?: string;
+      key?: string | undefined;
       name: string;
-      params?: object;
-      path?: string;
+      params?: object | undefined;
+      path?: string | undefined;
     }
   | undefined;
 
 export function findFocusedRoute(state: InitialState): Result {
   let current: InitialState | undefined = state;
 
-  while (current?.routes[current.index ?? 0].state != null) {
-    current = current.routes[current.index ?? 0].state;
-  }
+  while (current != null) {
+    const route: InitialState['routes'][number] | undefined =
+      current.routes[current.index ?? 0];
+
+    if (route?.state == null) {
+      return route;
+    }
 
-  const route = current?.routes[current?.index ?? 0];
+    current = route.state;
+  }
 
-  return route;
+  return undefined;
 }

package/src/getActionFromState.tsx

@@ -2,20 +2,18 @@ import type {
   CommonActions,
   NavigationState,
   ParamListBase,
-  PartialRoute,
   PartialState,
-  Route,
 } from '@react-navigation/routers';
 
 import type { NavigatorScreenParams, PathConfig, PathConfigMap } from './types';
 
 type ConfigItem = {
-  initialRouteName?: string;
-  screens?: Record<string, ConfigItem>;
+  initialRouteName?: string | undefined;
+  screens?: Record<string, ConfigItem> | undefined;
 };
 
 type Options = {
-  initialRouteName?: string;
+  initialRouteName?: string | undefined;
   screens: PathConfigMap<object>;
 };
 
@@ -23,19 +21,35 @@ type NavigateAction<State extends NavigationState> = {
   type: 'NAVIGATE';
   payload: {
     name: string;
-    params?: NavigatorScreenParams<State>;
-    path?: string;
+    params?: NavigatorScreenParams<State> | undefined;
+    path?: string | undefined;
   };
 };
 
+// Cache the normalized config across calls for the same `options` reference,
+// so we don't re-walk the config tree on every action conversion.
+const cachedNormalizedConfig = new WeakMap<Options, ConfigItem>();
+
 export function getActionFromState(
   state: PartialState<NavigationState>,
   options?: Options
 ): NavigateAction<NavigationState> | CommonActions.Action | undefined {
-  // Create a normalized configs object which will be easier to use
-  const normalizedConfig = options
-    ? createNormalizedConfigItem(options as PathConfig<object> | string)
-    : {};
+  let normalizedConfig;
+
+  if (options) {
+    const cached = cachedNormalizedConfig.get(options);
+
+    if (cached) {
+      normalizedConfig = cached;
+    } else {
+      normalizedConfig = createNormalizedConfigItem(
+        options as PathConfig<object> | string
+      );
+      cachedNormalizedConfig.set(options, normalizedConfig as ConfigItem);
+    }
+  } else {
+    normalizedConfig = {};
+  }
 
   const routes =
     state.index != null ? state.routes.slice(0, state.index + 1) : state.routes;
@@ -44,13 +58,21 @@ export function getActionFromState(
     return undefined;
   }
 
+  const firstRoute = routes[0];
+
+  if (firstRoute == null) {
+    return undefined;
+  }
+
+  const secondRoute = routes[1];
+
   if (
     !(
-      (routes.length === 1 && routes[0].key === undefined) ||
+      (routes.length === 1 && firstRoute.key == null) ||
       (routes.length === 2 &&
-        routes[0].key === undefined &&
-        routes[0].name === normalizedConfig?.initialRouteName &&
-        routes[1].key === undefined)
+        firstRoute.key == null &&
+        firstRoute.name === normalizedConfig?.initialRouteName &&
+        secondRoute?.key == null)
     )
   ) {
     return {
@@ -61,20 +83,20 @@ export function getActionFromState(
 
   const route = state.routes[state.index ?? state.routes.length - 1];
 
-  let current: PartialState<NavigationState> | undefined = route?.state;
-  let config: ConfigItem | undefined = normalizedConfig?.screens?.[route?.name];
+  if (route == null) {
+    return undefined;
+  }
+
+  let current: PartialState<NavigationState> | undefined = route.state;
+  let config: ConfigItem | undefined = normalizedConfig?.screens?.[route.name];
   let params = { ...route.params } as NavigatorScreenParams<ParamListBase>;
 
-  const payload:
-    | {
-        name: string;
-        params: NavigatorScreenParams<ParamListBase>;
-        path?: string;
-        pop?: boolean;
-      }
-    | undefined = route
-    ? { name: route.name, path: route.path, params }
-    : undefined;
+  const payload: {
+    name: string;
+    params: NavigatorScreenParams<ParamListBase>;
+    path?: string | undefined;
+    pop?: boolean | undefined;
+  } = { name: route.name, path: route.path, params };
 
   // If the screen contains a navigator, pop other screens to navigate to it
   // This avoid pushing multiple instances of navigators onto a stack
@@ -90,7 +112,7 @@ export function getActionFromState(
   // There are 2 ways we can detect if a screen contains a navigator:
   // - The route contains nested state in `route.state`
   // - Nested screens are defined in the config
-  if (payload && config?.screens && Object.keys(config.screens).length) {
+  if (config?.screens && Object.keys(config.screens).length) {
     payload.pop = true;
   }
 
@@ -104,8 +126,19 @@ export function getActionFromState(
         ? current.routes.slice(0, current.index + 1)
         : current.routes;
 
-    const route: Route<string> | PartialRoute<Route<string>> =
-      routes[routes.length - 1];
+    const route = routes[routes.length - 1];
+
+    if (route == null) {
+      return undefined;
+    }
+
+    const firstRoute = routes[0];
+
+    if (firstRoute == null) {
+      return undefined;
+    }
+
+    const secondRoute = routes[1];
 
     // Explicitly set to override existing value when merging params
     Object.assign(params, {
@@ -115,14 +148,14 @@ export function getActionFromState(
       state: undefined,
     });
 
-    if (routes.length === 1 && routes[0].key === undefined) {
+    if (routes.length === 1 && firstRoute.key == null) {
       params.initial = true;
       params.screen = route.name;
     } else if (
       routes.length === 2 &&
-      routes[0].key === undefined &&
-      routes[0].name === config?.initialRouteName &&
-      routes[1].key === undefined
+      firstRoute.key == null &&
+      firstRoute.name === config?.initialRouteName &&
+      secondRoute?.key == null
     ) {
       params.initial = false;
       params.screen = route.name;
@@ -148,14 +181,10 @@ export function getActionFromState(
     }
   }
 
-  if (payload?.params.screen || payload?.params.state) {
+  if (payload.params.screen || payload.params.state) {
     payload.pop = true;
   }
 
-  if (!payload) {
-    return;
-  }
-
   // Try to construct payload for a `NAVIGATE` action from the state
   // This lets us preserve the navigation state and not lose it
   return {

package/src/getPathFromState.tsx

@@ -1,17 +1,14 @@
-import type {
-  NavigationState,
-  PartialState,
-  Route,
-} from '@react-navigation/routers';
-import * as queryString from 'query-string';
+import type { NavigationState, PartialState } from '@react-navigation/routers';
+import queryString from 'query-string';
 
 import { getPatternParts, type PatternPart } from './getPatternParts';
+import { getStateFromRouteParams } from './getStateFromRouteParams';
 import type { PathConfig, PathConfigMap } from './types';
 import { validatePathConfig } from './validatePathConfig';
 
 type Options<ParamList extends {}> = {
-  path?: string;
-  initialRouteName?: string;
+  path?: string | undefined;
+  initialRouteName?: string | undefined;
   screens: PathConfigMap<ParamList>;
 };
 
@@ -20,17 +17,23 @@ type State = NavigationState | Omit<PartialState<NavigationState>, 'stale'>;
 type StringifyConfig = Record<string, ((value: unknown) => string) | undefined>;
 
 type ConfigItem = {
-  parts?: PatternPart[];
-  stringify?: StringifyConfig;
-  screens?: Record<string, ConfigItem>;
+  parts?: PatternPart[] | undefined;
+  stringify?: StringifyConfig | undefined;
+  screens?: Record<string, ConfigItem> | undefined;
 };
 
-const getActiveRoute = (state: State): { name: string; params?: object } => {
+const getActiveRoute = (
+  state: State
+): { name: string; params?: object | undefined } => {
   const route =
     typeof state.index === 'number'
       ? state.routes[state.index]
       : state.routes[state.routes.length - 1];
 
+  if (route == null) {
+    throw new Error(`Couldn't find the active route.`);
+  }
+
   if (route.state) {
     return getActiveRoute(route.state);
   }
@@ -57,6 +60,48 @@ const getNormalizedConfigs = (options?: Options<{}>) => {
   return normalizedConfigs;
 };
 
+const getTransformedState = (
+  state: State,
+  configs: Record<string, ConfigItem> | undefined
+): Omit<PartialState<NavigationState>, 'stale'> => {
+  const routes = state.routes.map(
+    (route): Omit<PartialState<NavigationState>, 'stale'>['routes'][number] => {
+      const config = configs?.[route.name];
+
+      if (
+        route.state ||
+        (config?.screens &&
+          route.params &&
+          (('screen' in route.params &&
+            typeof route.params.screen === 'string' &&
+            config.screens[route.params.screen]) ||
+            'state' in route.params))
+      ) {
+        const nestedState: State | undefined =
+          route.state ?? getStateFromRouteParams(route.params);
+
+        if (nestedState) {
+          return {
+            ...route,
+            state: getTransformedState(
+              nestedState,
+              configs?.[route.name]?.screens
+            ),
+          };
+        }
+      }
+
+      // @ts-expect-error route.state is handled in previous condition
+      return route;
+    }
+  );
+
+  return {
+    ...state,
+    routes,
+  };
+};
+
 /**
  * Utility to serialize a navigation state object to a path string.
  *
@@ -101,37 +146,50 @@ export function getPathFromState<ParamList extends {}>(
   }
 
   const configs = getNormalizedConfigs(options);
+  const transformedState = getTransformedState(state, configs);
 
   let path = '/';
-  let current: State | undefined = state;
+  let current: State | undefined = transformedState;
 
   const allParams: Record<string, string> = {};
 
   while (current) {
-    let index = typeof current.index === 'number' ? current.index : 0;
-    let route = current.routes[index] as Route<string> & {
-      state?: State;
-    };
+    let index: number = typeof current.index === 'number' ? current.index : 0;
+
+    const initialRoute: State['routes'][number] | undefined =
+      current.routes[index];
+
+    if (initialRoute == null) {
+      throw new Error(`Couldn't find a route at index ${index}.`);
+    }
+
+    let route: State['routes'][number] = initialRoute;
 
     let parts: PatternPart[] | undefined;
 
     let focusedParams: Record<string, string> | undefined;
     let currentOptions = configs;
 
-    const focusedRoute = getActiveRoute(state);
+    const focusedRoute = getActiveRoute(transformedState);
 
     // Keep all the route names that appeared during going deeper in config in case the pattern is resolved to undefined
     const nestedRouteNames = [];
 
     let hasNext = true;
 
-    while (route.name in currentOptions && hasNext) {
-      parts = currentOptions[route.name].parts;
+    while (hasNext) {
+      const config = currentOptions[route.name];
+
+      if (config == null) {
+        break;
+      }
+
+      parts = config.parts;
 
       nestedRouteNames.push(route.name);
 
       if (route.params) {
-        const options = currentOptions[route.name];
+        const options = config;
 
         const currentParams = Object.fromEntries(
           Object.entries(route.params)
@@ -181,7 +239,7 @@ export function getPathFromState<ParamList extends {}>(
       }
 
       // If there is no `screens` property or no nested state, we return pattern
-      if (!currentOptions[route.name].screens || route.state === undefined) {
+      if (!config.screens || route.state == null) {
         hasNext = false;
       } else {
         index =
@@ -189,12 +247,18 @@ export function getPathFromState<ParamList extends {}>(
             ? route.state.index
             : route.state.routes.length - 1;
 
-        const nextRoute = route.state.routes[index];
-        const nestedConfig = currentOptions[route.name].screens;
+        const nextRoute: State['routes'][number] | undefined =
+          route.state.routes[index];
+
+        if (nextRoute == null) {
+          throw new Error(`Couldn't find a route at index ${index}.`);
+        }
+
+        const nestedConfig = config.screens;
 
         // if there is config for next route name, we go deeper
-        if (nestedConfig && nextRoute.name in nestedConfig) {
-          route = nextRoute as Route<string> & { state?: State };
+        if (nextRoute.name in nestedConfig) {
+          route = nextRoute;
           currentOptions = nestedConfig;
         } else {
           // If not, there is no sense in going deeper in config
@@ -203,7 +267,7 @@ export function getPathFromState<ParamList extends {}>(
       }
     }
 
-    if (currentOptions[route.name] !== undefined) {
+    if (currentOptions[route.name] != null) {
       path += parts
         ?.map(({ segment, param, optional }) => {
           // We don't know what to show for wildcard patterns

package/src/getPatternParts.tsx

@@ -124,3 +124,11 @@ export function getPatternParts(path: string): PatternPart[] {
 
   return parts;
 }
+
+export function combinePatternParts<T extends PatternPart>(
+  parentParts: T[],
+  parts: T[],
+  exact = false
+): T[] {
+  return exact ? parts : [...parentParts, ...parts];
+}