@react-navigation/core 8.0.0-alpha.3 → 8.0.0-alpha.30

package/src/StaticTreeContext.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+import type { TreeForPathConfig } from './StaticNavigation';
+
+export const StaticTreeContext = React.createContext<
+  TreeForPathConfig | undefined
+>(undefined);

package/src/checkSerializable.tsx

@@ -1,14 +1,18 @@
+type Success = { serializable: true };
+
+type Failure = {
+  serializable: false;
+  location: (string | number)[];
+  reason: string;
+};
+
+type Result = Success | Failure;
+
 const checkSerializableWithoutCircularReference = (
   o: { [key: string]: any },
   seen: Set<any>,
   location: (string | number)[]
-):
-  | { serializable: true }
-  | {
-      serializable: false;
-      location: (string | number)[];
-      reason: string;
-    } => {
+): Failure | undefined => {
   if (
     o === undefined ||
     o === null ||
@@ -16,7 +20,7 @@ const checkSerializableWithoutCircularReference = (
     typeof o === 'number' ||
     typeof o === 'string'
   ) {
-    return { serializable: true };
+    return undefined;
   }
 
   if (
@@ -25,7 +29,7 @@ const checkSerializableWithoutCircularReference = (
   ) {
     return {
       serializable: false,
-      location,
+      location: location.slice(),
       reason: typeof o === 'function' ? 'Function' : String(o),
     };
   }
@@ -34,7 +38,7 @@ const checkSerializableWithoutCircularReference = (
     return {
       serializable: false,
       reason: 'Circular reference',
-      location,
+      location: location.slice(),
     };
   }
 
@@ -42,33 +46,45 @@ 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) {
+      if (childResult) {
+        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) {
+      if (childResult) {
+        seen.delete(o);
         return childResult;
       }
     }
   }
 
-  return { serializable: true };
+  seen.delete(o);
+
+  return undefined;
 };
 
-export function checkSerializable(o: { [key: string]: any }) {
-  return checkSerializableWithoutCircularReference(o, new Set<any>(), []);
+export function checkSerializable(o: { [key: string]: any }): Result {
+  return (
+    checkSerializableWithoutCircularReference(o, new Set<any>(), []) ?? {
+      serializable: true,
+    }
+  );
 }

package/src/createNavigationContainerRef.tsx

@@ -30,6 +30,8 @@ export function createNavigationContainerRef<
 
   const listeners: Record<string, ((...args: any[]) => void)[]> = {};
 
+  let current: NavigationContainerRef<ParamList> | null = null;
+
   const removeListener = (
     event: string,
     callback: (...args: any[]) => void
@@ -37,9 +39,12 @@ export function createNavigationContainerRef<
     if (listeners[event]) {
       listeners[event] = listeners[event].filter((cb) => cb !== callback);
     }
-  };
 
-  let current: NavigationContainerRef<ParamList> | null = null;
+    current?.removeListener(
+      event as keyof NavigationContainerEventMap,
+      callback
+    );
+  };
 
   const ref: NavigationContainerRefWithCurrent<ParamList> = {
     get current() {
@@ -68,7 +73,11 @@ export function createNavigationContainerRef<
     },
     ...methods.reduce<any>((acc, name) => {
       acc[name] = (...args: any[]) => {
-        if (current == null) {
+        if (name === 'removeListener') {
+          const [event, callback] = args;
+
+          removeListener(event, callback);
+        } else if (current == null) {
           switch (name) {
             case 'addListener': {
               const [event, callback] = args;
@@ -78,12 +87,6 @@ export function createNavigationContainerRef<
 
               return () => removeListener(event, callback);
             }
-            case 'removeListener': {
-              const [event, callback] = args;
-
-              removeListener(event, callback);
-              break;
-            }
             default:
               console.error(NOT_INITIALIZED_ERROR);
           }

package/src/createNavigatorFactory.tsx

@@ -1,23 +1,107 @@
-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 NoExcessStaticConfig,
+  type StaticConfig,
+  type StaticParamList,
+} from './StaticNavigation';
+import type {
+  NavigatorTypeBagBase,
+  NavigatorTypeBagFor,
+  NestedNavigatorsForParamList,
+  TypedNavigator,
+} from './types';
+import type { KeysOf, NoExcessObject } from './utilities';
+
+type NavigatorNesting<ParamList extends ParamListBase, Nesting> = {
+  [RouteName in keyof ParamList]?: unknown;
+} & Record<Exclude<KeysOf<Nesting>, keyof ParamList>, never>;
+
+type ValidNavigatorNesting<ParamList extends ParamListBase, Nesting> =
+  Nesting extends NavigatorNesting<ParamList, Nesting> ? Nesting : never;
+
+type AnyStaticConfig<TypeBag extends NavigatorTypeBagBase> = StaticConfig<
+  NavigatorTypeBagFor<TypeBag, ParamListBase>
+>;
+
+export type TypedNavigatorFactory<in out TypeBag extends NavigatorTypeBagBase> =
+  {
+    <
+      const ParamList extends ParamListBase,
+      const Nesting extends NavigatorNesting<ParamList, Nesting> =
+        ValidNavigatorNesting<
+          ParamList,
+          NestedNavigatorsForParamList<ParamList>
+        >,
+    >(): TypedNavigator<
+      NavigatorTypeBagFor<TypeBag, ParamList>,
+      undefined,
+      Nesting
+    >;
+    <
+      const Config extends AnyStaticConfig<TypeBag> &
+        NoExcessObject<Config, AnyStaticConfig<TypeBag>>,
+    >(
+      config: Config & NoExcessStaticConfig<NoInfer<Config>, TypeBag>
+    ): 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 ?? current.routes.length - 1];
+
+    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,34 +21,60 @@ 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;
+  const routesLength =
+    state.index == null || state.index >= state.routes.length
+      ? state.routes.length
+      : state.index + 1;
 
-  if (routes.length === 0) {
+  if (routesLength === 0) {
     return undefined;
   }
 
+  const firstRoute = state.routes[0];
+
+  if (firstRoute == null) {
+    return undefined;
+  }
+
+  const secondRoute = state.routes[1];
+
   if (
     !(
-      (routes.length === 1 && routes[0].key === undefined) ||
-      (routes.length === 2 &&
-        routes[0].key === undefined &&
-        routes[0].name === normalizedConfig?.initialRouteName &&
-        routes[1].key === undefined)
+      (routesLength === 1 && firstRoute.key == null) ||
+      (routesLength === 2 &&
+        firstRoute.key == null &&
+        firstRoute.name === normalizedConfig?.initialRouteName &&
+        secondRoute?.key == null)
     )
   ) {
     return {
@@ -61,20 +85,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 +114,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;
   }
 
@@ -99,13 +123,24 @@ export function getActionFromState(
       return undefined;
     }
 
-    const routes =
-      current.index != null
-        ? current.routes.slice(0, current.index + 1)
-        : current.routes;
+    const routesLength =
+      current.index == null || current.index >= current.routes.length
+        ? current.routes.length
+        : current.index + 1;
+
+    const route = current.routes[routesLength - 1];
+
+    if (route == null) {
+      return undefined;
+    }
+
+    const firstRoute = current.routes[0];
+
+    if (firstRoute == null) {
+      return undefined;
+    }
 
-    const route: Route<string> | PartialRoute<Route<string>> =
-      routes[routes.length - 1];
+    const secondRoute = current.routes[1];
 
     // Explicitly set to override existing value when merging params
     Object.assign(params, {
@@ -115,14 +150,14 @@ export function getActionFromState(
       state: undefined,
     });
 
-    if (routes.length === 1 && routes[0].key === undefined) {
+    if (routesLength === 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
+      routesLength === 2 &&
+      firstRoute.key == null &&
+      firstRoute.name === config?.initialRouteName &&
+      secondRoute?.key == null
     ) {
       params.initial = false;
       params.screen = route.name;
@@ -148,14 +183,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 {
@@ -164,11 +195,16 @@ export function getActionFromState(
   };
 }
 
-const createNormalizedConfigItem = (config: PathConfig<object> | string) =>
+const createNormalizedConfigItem = (
+  config: PathConfig<object> | string
+): ConfigItem =>
   typeof config === 'object' && config != null
     ? {
         initialRouteName:
-          'initialRouteName' in config ? config.initialRouteName : undefined,
+          'initialRouteName' in config &&
+          typeof config.initialRouteName === 'string'
+            ? config.initialRouteName
+            : undefined,
         screens:
           'screens' in config && config.screens != null
             ? createNormalizedConfigs(config.screens)
@@ -178,7 +214,6 @@ const createNormalizedConfigItem = (config: PathConfig<object> | string) =>
 
 const createNormalizedConfigs = (options: PathConfigMap<object>) =>
   Object.entries(options).reduce<Record<string, ConfigItem>>((acc, [k, v]) => {
-    // @ts-expect-error -we can't properly type this
     acc[k] = createNormalizedConfigItem(v);
     return acc;
   }, {});