@react-navigation/core 7.0.0-rc.12 → 7.0.0-rc.14

package/src/getPathFromState.tsx

@@ -37,6 +37,11 @@ const getActiveRoute = (state: State): { name: string; params?: object } => {
   return route;
 };
 
+let cachedNormalizedConfigs: [
+  PathConfigMap<{}> | undefined,
+  Record<string, ConfigItem>,
+] = [undefined, {}];
+
 /**
  * Utility to serialize a navigation state object to a path string.
  *
@@ -81,9 +86,13 @@ export function getPathFromState<ParamList extends {}>(
   }
 
   // Create a normalized configs object which will be easier to use
-  const configs: Record<string, ConfigItem> = options?.screens
-    ? createNormalizedConfigs(options?.screens)
-    : {};
+  if (cachedNormalizedConfigs[0] !== options?.screens) {
+    cachedNormalizedConfigs = [
+      options?.screens,
+      options?.screens ? createNormalizedConfigs(options.screens) : {},
+    ];
+  }
+  const configs: Record<string, ConfigItem> = cachedNormalizedConfigs[1];
 
   let path = '/';
   let current: State | undefined = state;

package/src/getStateFromPath.tsx

@@ -42,6 +42,12 @@ type ParsedRoute = {
   params?: Record<string, any> | undefined;
 };
 
+type ConfigResources = {
+  initialRoutes: InitialRouteConfig[];
+  configs: RouteConfig[];
+  configWithRegexes: RouteConfig[];
+};
+
 /**
  * Utility to parse a path string to initial state object accepted by the container.
  * This is useful for deep linking when we need to handle the incoming URL.
@@ -67,18 +73,8 @@ export function getStateFromPath<ParamList extends {}>(
   path: string,
   options?: Options<ParamList>
 ): ResultState | undefined {
-  if (options) {
-    validatePathConfig(options);
-  }
-
-  const initialRoutes: InitialRouteConfig[] = [];
-
-  if (options?.initialRouteName) {
-    initialRoutes.push({
-      initialRouteName: options.initialRouteName,
-      parentScreens: [],
-    });
-  }
+  const { initialRoutes, configs, configWithRegexes } =
+    getConfigResources(options);
 
   const screens = options?.screens;
 
@@ -122,8 +118,111 @@ export function getStateFromPath<ParamList extends {}>(
     return undefined;
   }
 
+  if (remaining === '/') {
+    // We need to add special handling of empty path so navigation to empty path also works
+    // When handling empty path, we should only look at the root level config
+    const match = configs.find(
+      (config) =>
+        config.path === '' &&
+        config.routeNames.every(
+          // Make sure that none of the parent configs have a non-empty path defined
+          (name) => !configs.find((c) => c.screen === name)?.path
+        )
+    );
+
+    if (match) {
+      return createNestedStateObject(
+        path,
+        match.routeNames.map((name) => ({ name })),
+        initialRoutes,
+        configs
+      );
+    }
+
+    return undefined;
+  }
+
+  let result: PartialState<NavigationState> | undefined;
+  let current: PartialState<NavigationState> | undefined;
+
+  // We match the whole path against the regex instead of segments
+  // This makes sure matches such as wildcard will catch any unmatched routes, even if nested
+  const { routes, remainingPath } = matchAgainstConfigs(
+    remaining,
+    configWithRegexes
+  );
+
+  if (routes !== undefined) {
+    // This will always be empty if full path matched
+    current = createNestedStateObject(path, routes, initialRoutes, configs);
+    remaining = remainingPath;
+    result = current;
+  }
+
+  if (current == null || result == null) {
+    return undefined;
+  }
+
+  return result;
+}
+
+/**
+ * Reference to the last used config resources. This is used to avoid recomputing the config resources when the options are the same.
+ */
+let cachedConfigResources: [Options<{}> | undefined, ConfigResources] = [
+  undefined,
+  prepareConfigResources(),
+];
+
+function getConfigResources<ParamList extends {}>(
+  options: Options<ParamList> | undefined
+) {
+  if (cachedConfigResources[0] !== options) {
+    cachedConfigResources = [options, prepareConfigResources(options)];
+  }
+
+  return cachedConfigResources[1];
+}
+
+function prepareConfigResources(options?: Options<{}>) {
+  if (options) {
+    validatePathConfig(options);
+  }
+
+  const initialRoutes = getInitialRoutes(options);
+
+  const configs = getNormalizedConfigs(initialRoutes, options?.screens);
+
+  checkForDuplicatedConfigs(configs);
+
+  const configWithRegexes = getConfigsWithRegexes(configs);
+
+  return {
+    initialRoutes,
+    configs,
+    configWithRegexes,
+  };
+}
+
+function getInitialRoutes(options?: Options<{}>) {
+  const initialRoutes: InitialRouteConfig[] = [];
+
+  if (options?.initialRouteName) {
+    initialRoutes.push({
+      initialRouteName: options.initialRouteName,
+      parentScreens: [],
+    });
+  }
+
+  return initialRoutes;
+}
+
+function getNormalizedConfigs(
+  initialRoutes: InitialRouteConfig[],
+  screens: PathConfigMap<object> = {}
+) {
   // Create a normalized configs array which will be easier to use
-  const configs = ([] as RouteConfig[])
+  return ([] as RouteConfig[])
     .concat(
       ...Object.keys(screens).map((key) =>
         createNormalizedConfigs(
@@ -185,7 +284,9 @@ export function getStateFromPath<ParamList extends {}>(
       }
       return bParts.length - aParts.length;
     });
+}
 
+function checkForDuplicatedConfigs(configs: RouteConfig[]) {
   // Check for duplicate patterns in the config
   configs.reduce<Record<string, RouteConfig>>((acc, config) => {
     if (acc[config.pattern]) {
@@ -214,57 +315,14 @@ export function getStateFromPath<ParamList extends {}>(
       [config.pattern]: config,
     });
   }, {});
+}
 
-  if (remaining === '/') {
-    // We need to add special handling of empty path so navigation to empty path also works
-    // When handling empty path, we should only look at the root level config
-    const match = configs.find(
-      (config) =>
-        config.path === '' &&
-        config.routeNames.every(
-          // Make sure that none of the parent configs have a non-empty path defined
-          (name) => !configs.find((c) => c.screen === name)?.path
-        )
-    );
-
-    if (match) {
-      return createNestedStateObject(
-        path,
-        match.routeNames.map((name) => ({ name })),
-        initialRoutes,
-        configs
-      );
-    }
-
-    return undefined;
-  }
-
-  let result: PartialState<NavigationState> | undefined;
-  let current: PartialState<NavigationState> | undefined;
-
-  // We match the whole path against the regex instead of segments
-  // This makes sure matches such as wildcard will catch any unmatched routes, even if nested
-  const { routes, remainingPath } = matchAgainstConfigs(
-    remaining,
-    configs.map((c) => ({
-      ...c,
-      // Add `$` to the regex to make sure it matches till end of the path and not just beginning
-      regex: c.regex ? new RegExp(c.regex.source + '$') : undefined,
-    }))
-  );
-
-  if (routes !== undefined) {
-    // This will always be empty if full path matched
-    current = createNestedStateObject(path, routes, initialRoutes, configs);
-    remaining = remainingPath;
-    result = current;
-  }
-
-  if (current == null || result == null) {
-    return undefined;
-  }
-
-  return result;
+function getConfigsWithRegexes(configs: RouteConfig[]) {
+  return configs.map((c) => ({
+    ...c,
+    // Add `$` to the regex to make sure it matches till end of the path and not just beginning
+    regex: c.regex ? new RegExp(c.regex.source + '$') : undefined,
+  }));
 }
 
 const joinPaths = (...paths: string[]): string =>

package/src/types.tsx

@@ -22,6 +22,21 @@ declare global {
 
 type Keyof<T extends {}> = Extract<keyof T, string>;
 
+type ScreenParamsPair<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList,
+> = {
+  // First we use a mapped type to get an union of screen & params pairs
+  // Then we pick the pair which matches the RouteName
+  // Mapped type is used instead of just ParamList[RouteName]
+  // Otherwise it'll result in union of all params leading to incorrect types
+  [Screen in keyof ParamList]: undefined extends ParamList[Screen] // Params are either undefined or a union with undefined
+    ?
+        | [screen: Screen] // if the params are optional, we don't have to provide it
+        | [screen: Screen, params: ParamList[Screen]]
+    : [screen: Screen, params: ParamList[Screen]];
+}[RouteName];
+
 export type DefaultNavigatorOptions<
   ParamList extends ParamListBase,
   NavigatorID extends string | undefined,
@@ -239,18 +254,7 @@ type NavigationHelpersCommon<
    * @param [params] Params object for the route.
    */
   navigate<RouteName extends keyof ParamList>(
-    ...args: // This condition allows us to iterate over a union type
-    // This is to avoid getting a union of all the params from `ParamList[RouteName]`,
-    // which will get our types all mixed up if a union RouteName is passed in.
-    RouteName extends unknown
-      ? // This condition checks if the params are optional,
-        // which means it's either undefined or a union with undefined
-        undefined extends ParamList[RouteName]
-        ?
-            | [screen: RouteName] // if the params are optional, we don't have to provide it
-            | [screen: RouteName, params: ParamList[RouteName]]
-        : [screen: RouteName, params: ParamList[RouteName]]
-      : never
+    ...args: ScreenParamsPair<ParamList, RouteName>
   ): void;
 
   /**
@@ -259,14 +263,14 @@ type NavigationHelpersCommon<
    * @param route Object with `name` for the route to navigate to, and a `params` object.
    */
   navigate<RouteName extends keyof ParamList>(
-    options: RouteName extends unknown
-      ? {
-          name: RouteName;
-          params: ParamList[RouteName];
-          path?: string;
-          merge?: boolean;
-        }
-      : never
+    options: {
+      [Screen in keyof ParamList]: {
+        name: Screen;
+        params: ParamList[Screen];
+        path?: string;
+        merge?: boolean;
+      };
+    }[RouteName]
   ): void;
 
   /**
@@ -278,18 +282,7 @@ type NavigationHelpersCommon<
    * @param [params] Params object for the route.
    */
   navigateDeprecated<RouteName extends keyof ParamList>(
-    ...args: // This condition allows us to iterate over a union type
-    // This is to avoid getting a union of all the params from `ParamList[RouteName]`,
-    // which will get our types all mixed up if a union RouteName is passed in.
-    RouteName extends unknown
-      ? // This condition checks if the params are optional,
-        // which means it's either undefined or a union with undefined
-        undefined extends ParamList[RouteName]
-        ?
-            | [screen: RouteName] // if the params are optional, we don't have to provide it
-            | [screen: RouteName, params: ParamList[RouteName]]
-        : [screen: RouteName, params: ParamList[RouteName]]
-      : never
+    ...args: ScreenParamsPair<ParamList, RouteName>
   ): void;
 
   /**
@@ -300,13 +293,13 @@ type NavigationHelpersCommon<
    * @param route Object with `name` for the route to navigate to, and a `params` object.
    */
   navigateDeprecated<RouteName extends keyof ParamList>(
-    options: RouteName extends unknown
-      ? {
-          name: RouteName;
-          params: ParamList[RouteName];
-          merge?: boolean;
-        }
-      : never
+    options: {
+      [Screen in keyof ParamList]: {
+        name: Screen;
+        params: ParamList[Screen];
+        merge?: boolean;
+      };
+    }[RouteName]
   ): void;
 
   /**
@@ -316,13 +309,7 @@ type NavigationHelpersCommon<
    * @param [params] Params object for the route.
    */
   preload<RouteName extends keyof ParamList>(
-    ...args: RouteName extends unknown
-      ? undefined extends ParamList[RouteName]
-        ?
-            | [screen: RouteName]
-            | [screen: RouteName, params: ParamList[RouteName]]
-        : [screen: RouteName, params: ParamList[RouteName]]
-      : never
+    ...args: ScreenParamsPair<ParamList, RouteName>
   ): void;
 
   /**

package/src/useNavigationBuilder.tsx

@@ -249,7 +249,7 @@ const getRouteConfigsFromChildren = <
 export function useNavigationBuilder<
   State extends NavigationState,
   RouterOptions extends DefaultRouterOptions,
-  ActionHelpers extends Record<string, () => void>,
+  ActionHelpers extends Record<string, (...args: any) => void>,
   ScreenOptions extends {},
   EventMap extends Record<string, any>,
 >(