@react-navigation/core 8.0.0-alpha.19 → 8.0.0-alpha.20

package/src/StaticNavigation.tsx

@@ -1,11 +1,12 @@
-import type {
-  NavigationState,
-  ParamListBase,
-  Route,
-} from '@react-navigation/routers';
+import type { NavigationState, ParamListBase } from '@react-navigation/routers';
 import * as React from 'react';
 import { isValidElementType } from 'react-is';
 
+import {
+  combinePatternParts,
+  getPatternParts,
+  type PatternPart,
+} from './getPatternParts';
 import type {
   DefaultNavigatorOptions,
   EventMapBase,
@@ -31,50 +32,54 @@ import type {
   ValidPathPattern,
 } from './utilities';
 
+type ScreenComponentParams<T> = [T] extends [
+  React.ComponentType<{ route: { params: infer Params } }>,
+]
+  ? Params
+  : undefined;
+
 type ParamsForScreenComponent<T> = [T] extends [(...args: any[]) => any]
-  ? HasArguments<T> extends true
-    ? [T] extends [React.ComponentType<{ route: { params: infer Params } }>]
-      ? Params
-      : undefined
+  ? // Don't infer params from a parameterless function component
+    // It'd infer `unknown` - but we want `undefined` if no params are accepted
+    HasArguments<T> extends true
+    ? ScreenComponentParams<T>
     : undefined
-  : [T] extends [React.ComponentType<{ route: { params: infer Params } }>]
-    ? Params
-    : undefined;
+  : ScreenComponentParams<T>;
 
 // If every nested route's params include `undefined`, the nested navigator
 // itself can be omitted. Otherwise, require `NavigatorScreenParams`.
 type ParamsForNestedNavigator<
   T extends { config: any },
   ParamList extends {} = StaticParamList<T>,
+  Params = NavigatorScreenParams<ParamList>,
 > = {
-  // Exclude routes with optional params so the resulting union only contains route names with required params.
-  // If there are no routes with required params, the resulting union will be `never`.
+  // Map each route to `never` when params are optional, or name when params are required
+  // If every route has optional params, the resulting union is `never`
   [RouteName in keyof ParamList]-?: undefined extends ParamList[RouteName]
     ? never
     : RouteName;
 }[keyof ParamList] extends never
-  ? NavigatorScreenParams<ParamList> | undefined
-  : NavigatorScreenParams<ParamList>;
-
-type ParamsForScreen<T> =
-  // Nested navigator in screen property
-  T extends { screen: infer Screen }
-    ? ParamsForScreenInner<Screen>
-    : // Direct nested navigator
-      T extends { config: any }
-      ? ParamsForNestedNavigator<T>
-      : ParamsForScreenComponent<T>;
-
-// `screen` can be a union when users build their screens map from a
-// `Record<K, V>`. A naked `T extends ...` conditional would distribute over
-// every screen in that union, creating a large params union for each route.
-// Wrapping `T` in a tuple checks the union as a whole and avoids that fanout.
-type ParamsForScreenInner<T> = [T] extends [{ config: any }]
+  ? Params | undefined
+  : Params;
+
+// If the screens were constructed from a `Record<K, V>`,
+// the screen value (`T`) may be a union.
+// A naked `T extends ...` conditional would distribute over every screen in the union,
+// creating a large params union per route.
+// Wrapping `T` in a tuple checks the union as a whole instead of distributing,
+// https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types
+type ParamsForScreen<T> = [T] extends [{ config: any }]
   ? ParamsForNestedNavigator<T>
   : [T] extends [React.ComponentType<any>]
     ? ParamsForScreenComponent<T>
     : undefined;
 
+// Unlike `ParamsForScreen`, we want to distribute for `Record<string, Component | StaticNavigation>`
+// This creates union like:
+// `C extends C ? ParamsForScreen<C> : never) | (S extends S ? ParamsForScreen<S> : never)`
+// `= ParamsForScreen<C> | ParamsForScreen<S>`
+type ParamsForScreenEntry<T> = T extends T ? ParamsForScreen<T> : never;
+
 // Only infer params from linking if it's a pattern (i.e., contains ':')
 // or if parse is present for query params.
 // This avoids inferring non-literals like 'string' without parse.
@@ -85,30 +90,25 @@ type ShouldInferFromLinking<Linking> = Linking extends
   ? true
   : false;
 
-type MergeLinkingAndScreenParams<LinkingParams, ScreenParams> =
-  undefined extends ScreenParams
-    ? FlatType<LinkingParams>
-    : FlatType<LinkingParams & ScreenParams>;
-
 /**
- * Inferred params type based on both linking config and screen.
- * - When linking is undefined: infers params from screen
- * - When screen is a nested navigator: merges path params with navigator screen params
- * - Otherwise: merges path params with screen component params
+ * Params type derived from both linking and screen.
+ *
+ * - Linking has no extractable params (no ':' in path, no `parse`): returns
+ *   screen params alone.
+ * - Linking has params + screen is a nested navigator: intersects path params
+ *   with the navigator's screen params.
+ * - Linking has params + screen is a component without route params: returns
+ *   path params alone (avoids `LP & undefined = never`).
+ * - Linking has params + screen has route params: intersects them.
  */
-type ParamsForConfig<Linking, Screen> = ParamsForConfigInternal<
-  Linking,
-  Screen,
-  ParamsForScreenInner<Screen>
->;
-
-type ParamsForConfigInternal<Linking, Screen, SP> = undefined extends Linking
-  ? SP
-  : ShouldInferFromLinking<Linking> extends true
+type ParamsForConfig<Linking, Screen, Params = ParamsForScreen<Screen>> =
+  ShouldInferFromLinking<Linking> extends true
     ? [Screen] extends [{ config: any }]
-      ? FlatType<InferParamsFromLinking<Linking>> & SP
-      : MergeLinkingAndScreenParams<InferParamsFromLinking<Linking>, SP>
-    : SP;
+      ? FlatType<InferParamsFromLinking<Linking>> & Params
+      : undefined extends Params
+        ? FlatType<InferParamsFromLinking<Linking>>
+        : FlatType<InferParamsFromLinking<Linking> & Params>
+    : Params;
 
 type ParamListForScreens<Screens> = {
   [Key in KeysOf<Screens>]: Screens[Key] extends StaticScreenConfig<
@@ -117,10 +117,11 @@ type ParamListForScreens<Screens> = {
     any,
     any,
     any,
+    any,
     any
   >
     ? ParamsForConfig<Linking, Screen>
-    : ParamsForScreen<Screens[Key]>;
+    : ParamsForScreenEntry<Screens[Key]>;
 };
 
 type ParamListForGroups<
@@ -139,25 +140,25 @@ type ParamListForGroups<
   ? ParamListForScreens<UnionToIntersection<Screens>>
   : {};
 
-type RouteType<Params> = Readonly<
-  FlatType<
-    Omit<Route<string, AnyToUnknown<Params>>, 'params'> &
-      Readonly<
-        undefined extends Params
-          ? {
-              /**
-               * Params for this route
-               */
-              params?: AnyToUnknown<Params>;
-            }
-          : {
-              /**
-               * Params for this route
-               */
-              params: AnyToUnknown<Params>;
-            }
-      >
-  >
+type RouteType<Params, P = AnyToUnknown<Params>> = Readonly<
+  {
+    key: string;
+    name: string;
+    path?: string | undefined;
+    history?: { type: 'params'; params: object }[] | undefined;
+  } & (undefined extends Params
+    ? {
+        /**
+         * Params for this route
+         */
+        params?: P;
+      }
+    : {
+        /**
+         * Params for this route
+         */
+        params: P;
+      })
 >;
 
 type StaticScreenConfigLinkingAlias = {
@@ -200,6 +201,21 @@ type StaticScreenConfigLinkingAlias = {
    * ```
    */
   stringify?: Record<string, (value: unknown) => string>;
+  /**
+   * Whether this path can resolve to multiple routes.
+   * Both routes should specify `shared: true` for this to work.
+   *
+   * When automatic path generation is enabled,
+   * screens using the same path pattern and the same screen component
+   * or navigator will be automatically marked as shared.
+   * Explicitly specifying the option overrides the automatic detection.
+   *
+   * This is useful when same screen used in multiple navigators,
+   * e.g. tabs with stacks containing profile screen in each stack.
+   *
+   * The path defined first will be the canonical path.
+   */
+  shared?: boolean;
 };
 
 export type StaticScreenConfigLinking =
@@ -397,11 +413,10 @@ type StaticConfigScreens<
   in out NavigationList extends NavigationListBase<ParamList>,
 > = {
   [RouteName in keyof ParamList]:
-    | React.ComponentType<any>
-    | StaticNavigation<any>
+    | StaticScreenConfigScreen
     | StaticScreenConfig<
         StaticScreenConfigLinking,
-        StaticNavigation<any> | React.ComponentType<any>,
+        StaticScreenConfigScreen,
         State,
         ScreenOptions,
         EventMap,
@@ -425,27 +440,6 @@ type StaticConfigGroup<
    * This can be useful for conditional rendering of group of screens.
    */
   if?: () => boolean;
-  /**
-   * Linking config for the screens in the group.
-   * This can be a string to specify the path, or an object following properties:
-   * - `path`
-   * - `stringify`
-   * - `parse`
-   *
-   * The path specified will be prepended to the paths of the screens in the group.
-   * The `parse` and `stringify` properties will be merged.
-   *
-   * @example
-   * ```js
-   * linking: {
-   *   path: 'users/:id',
-   *   parse: {
-   *     id: (id) => parseInt(id, 10),
-   *   }
-   * },
-   * ```
-   */
-  linking?: LinkingForGroup;
   /**
    * Static navigation config or Component to render for the screen.
    */
@@ -475,6 +469,22 @@ type StaticConfigInternal<
   EventMap extends EventMapBase,
   NavigationList extends NavigationListBase<ParamList>,
   Navigator extends React.ComponentType<any>,
+  Screens = StaticConfigScreens<
+    ParamList,
+    State,
+    ScreenOptions,
+    EventMap,
+    NavigationList
+  >,
+  Groups = {
+    [key: string]: StaticConfigGroup<
+      ParamList,
+      State,
+      ScreenOptions,
+      EventMap,
+      NavigationList
+    >;
+  },
 > = Omit<
   Omit<
     React.ComponentProps<Navigator>,
@@ -494,49 +504,21 @@ type StaticConfigInternal<
         /**
          * Screens to render in the navigator and their configuration.
          */
-        screens: StaticConfigScreens<
-          ParamList,
-          State,
-          ScreenOptions,
-          EventMap,
-          NavigationList
-        >;
+        screens: Screens;
         /**
          * Groups of screens to render in the navigator and their configuration.
          */
-        groups?: {
-          [key: string]: StaticConfigGroup<
-            ParamList,
-            State,
-            ScreenOptions,
-            EventMap,
-            NavigationList
-          >;
-        };
+        groups?: Groups;
       }
     | {
         /**
          * Screens to render in the navigator and their configuration.
          */
-        screens?: StaticConfigScreens<
-          ParamList,
-          State,
-          ScreenOptions,
-          EventMap,
-          NavigationList
-        >;
+        screens?: Screens;
         /**
          * Groups of screens to render in the navigator and their configuration.
          */
-        groups: {
-          [key: string]: StaticConfigGroup<
-            ParamList,
-            State,
-            ScreenOptions,
-            EventMap,
-            NavigationList
-          >;
-        };
+        groups: Groups;
       }
   );
 
@@ -754,10 +736,6 @@ export function createComponentForStaticConfig<
   return NavigatorComponent;
 }
 
-type LinkingForGroup =
-  | Pick<PathConfig<any>, 'path' | 'stringify' | 'parse'>
-  | string;
-
 type TreeForPathConfig = {
   config: ConfigForPathConfig;
 };
@@ -765,12 +743,7 @@ type TreeForPathConfig = {
 type ConfigForPathConfig = {
   initialRouteName?: string;
   screens?: Record<string, ScreenForPathConfig>;
-  groups?: {
-    [key: string]: {
-      linking?: LinkingForGroup;
-      screens: Record<string, ScreenForPathConfig>;
-    };
-  };
+  groups?: Record<string, { screens: Record<string, ScreenForPathConfig> }>;
 };
 
 type LinkingForPathConfig =
@@ -783,14 +756,95 @@ type LinkingForPathConfig =
   | null
   | undefined;
 
+type ScreenValueForPathConfig = React.ComponentType<{}> | TreeForPathConfig;
+
 type ScreenForPathConfig =
-  | React.ComponentType<{}>
-  | TreeForPathConfig
+  | ScreenValueForPathConfig
   | {
-      screen: React.ComponentType<{}> | TreeForPathConfig;
+      screen: ScreenValueForPathConfig;
       linking?: LinkingForPathConfig;
     };
 
+type PathConfigMapForStaticNavigation = Record<
+  string,
+  string | PathConfigForStaticNavigation | undefined
+>;
+
+type PathConfigForStaticNavigation = Omit<
+  PathConfig<ParamListBase>,
+  'screens'
+> & {
+  initialRouteName?: string | undefined;
+  screens?: PathConfigMapForStaticNavigation | undefined;
+};
+
+// Mark screens that resolve to the same pattern and same component or navigator
+const markSharedPathConfigs = (
+  screens: PathConfigMapForStaticNavigation,
+  sources: WeakMap<PathConfigForStaticNavigation, ScreenValueForPathConfig>,
+  blocked: WeakSet<PathConfigForStaticNavigation>
+) => {
+  const candidates = new Map<string, PathConfigForStaticNavigation[]>();
+
+  const collect = (
+    screens: PathConfigMapForStaticNavigation,
+    parentParts: PatternPart[],
+    disabled: boolean
+  ) => {
+    for (const config of Object.values(screens)) {
+      if (config == null || typeof config === 'string') {
+        continue;
+      }
+
+      const parts =
+        typeof config.path === 'string'
+          ? combinePatternParts(
+              parentParts,
+              getPatternParts(config.path),
+              config.exact
+            )
+          : parentParts;
+
+      if (sources.has(config) && typeof config.path === 'string') {
+        if (disabled) {
+          blocked.add(config);
+        }
+
+        const pattern = parts.map((part) => part.segment).join('/');
+        const entries = candidates.get(pattern) ?? [];
+
+        entries.push(config);
+        candidates.set(pattern, entries);
+      }
+
+      if (config.screens) {
+        collect(config.screens, parts, disabled || config.shared === false);
+      }
+    }
+  };
+
+  collect(screens, [], false);
+
+  for (const entries of candidates.values()) {
+    for (const entry of entries) {
+      const source = sources.get(entry);
+
+      if (
+        entry.shared === undefined &&
+        !blocked.has(entry) &&
+        entries.some(
+          (candidate) =>
+            candidate !== entry &&
+            !blocked.has(candidate) &&
+            sources.get(candidate) === source
+        )
+      ) {
+        entry.shared = true;
+      }
+    }
+  }
+};
+
 /**
  * Create a path config object from a static navigation config for deep linking.
  *
@@ -821,6 +875,12 @@ export function createPathConfigForStaticNavigation<ParamList extends {}>(
   let initialScreenConfig: PathConfig<{}> | undefined;
   let hasEmptyPath = false;
 
+  const blocked = new WeakSet<PathConfigForStaticNavigation>();
+  const sources = new WeakMap<
+    PathConfigForStaticNavigation,
+    ScreenValueForPathConfig
+  >();
+
   const createPathConfigForTree = (
     t: TreeForPathConfig,
     o: { initialRouteName?: string | undefined } | undefined,
@@ -847,7 +907,6 @@ export function createPathConfigForStaticNavigation<ParamList extends {}>(
 
     const createPathConfigForScreens = (
       screens: Record<string, ScreenForPathConfig>,
-      groupLinking: LinkingForGroup | undefined,
       initialRouteName: string | undefined
     ) => {
       return Object.fromEntries(
@@ -866,26 +925,15 @@ export function createPathConfigForStaticNavigation<ParamList extends {}>(
             return 0;
           })
           .map(([key, item]) => {
-            const screenConfig: PathConfig<{}> = {};
-            const groupPath =
-              typeof groupLinking === 'string'
-                ? groupLinking
-                : groupLinking?.path;
-
-            const normalizePath = (path: string, exact?: boolean) => {
-              const normalizePart = (part: string) =>
-                part.replace(/^\/+|\/+$/g, '');
-
-              if (exact) {
-                return normalizePart(path);
-              }
+            const screenConfig: PathConfigForStaticNavigation = {};
+
+            sources.set(
+              screenConfig,
+              typeof item === 'object' && 'screen' in item ? item.screen : item
+            );
 
-              return [groupPath, path]
-                .filter((part): part is string => part != null && part !== '')
-                .map(normalizePart)
-                .filter(Boolean)
-                .join('/');
-            };
+            const normalizePath = (path: string) =>
+              path.replace(/^\/+|\/+$/g, '');
 
             if ('linking' in item && item.linking !== undefined) {
               if (typeof item.linking === 'string') {
@@ -894,7 +942,7 @@ export function createPathConfigForStaticNavigation<ParamList extends {}>(
                 item.linking != null &&
                 typeof item.linking === 'object'
               ) {
-                Object.assign(screenConfig, item.linking);
+                Object.assign(screenConfig, { ...item.linking });
               }
             }
 
@@ -905,10 +953,7 @@ export function createPathConfigForStaticNavigation<ParamList extends {}>(
             }
 
             if (typeof screenConfig.path === 'string') {
-              screenConfig.path = normalizePath(
-                screenConfig.path,
-                screenConfig.exact
-              );
+              screenConfig.path = normalizePath(screenConfig.path);
             }
 
             if (screenConfig.alias != null) {
@@ -917,29 +962,9 @@ export function createPathConfigForStaticNavigation<ParamList extends {}>(
                   return normalizePath(alias);
                 }
 
-                const groupParse =
-                  typeof groupLinking === 'string'
-                    ? undefined
-                    : groupLinking?.parse;
-                const hasGroupParams =
-                  groupParse != null &&
-                  Object.keys(groupParse).some((name) =>
-                    alias.path
-                      .split('/')
-                      .some((part) => part.startsWith(`:${name}`))
-                  );
-
                 return {
                   ...alias,
-                  ...(hasGroupParams
-                    ? {
-                        parse: {
-                          ...groupParse,
-                          ...alias.parse,
-                        },
-                      }
-                    : {}),
-                  path: normalizePath(alias.path, alias.exact),
+                  path: normalizePath(alias.path),
                 };
               });
             }
@@ -950,11 +975,6 @@ export function createPathConfigForStaticNavigation<ParamList extends {}>(
               'screens' in screenConfig && screenConfig.screens != null;
             const hasDisabledLinking =
               'linking' in item && item.linking === null;
-            const hasNestedStaticConfig =
-              'config' in item ||
-              ('screen' in item &&
-                'config' in item.screen &&
-                (item.screen.config.screens || item.screen.config.groups));
             const childOptions =
               'initialRouteName' in screenConfig &&
               typeof screenConfig.initialRouteName === 'string'
@@ -973,15 +993,6 @@ export function createPathConfigForStaticNavigation<ParamList extends {}>(
               );
             }
 
-            if (
-              hasNestedStaticConfig &&
-              screenConfig.path == null &&
-              groupPath != null &&
-              !hasDisabledLinking
-            ) {
-              screenConfig.path = normalizePath('');
-            }
-
             const skipInitialDetectionInChild =
               skipInitialDetection ||
               (screenConfig.path != null && screenConfig.path !== '');
@@ -1016,7 +1027,6 @@ export function createPathConfigForStaticNavigation<ParamList extends {}>(
             }
 
             if (screens) {
-              // @ts-expect-error - we can't type this properly
               screenConfig.screens = screens;
             }
 
@@ -1049,7 +1059,6 @@ export function createPathConfigForStaticNavigation<ParamList extends {}>(
                 }
               } else {
                 if (
-                  !groupPath &&
                   !skipInitialDetection &&
                   allowAutoEmptyPath &&
                   (initialRouteName == null || key === initialRouteName) &&
@@ -1068,54 +1077,13 @@ export function createPathConfigForStaticNavigation<ParamList extends {}>(
               }
             }
 
-            const groupOptionKeys =
-              typeof groupLinking === 'string'
-                ? []
-                : Object.keys({
-                    ...groupLinking?.parse,
-                    ...groupLinking?.stringify,
-                  });
-            const hasAliasWithGroupParams =
-              groupOptionKeys.length > 0 &&
-              screenConfig.alias?.some((alias) => {
-                if (typeof alias !== 'string') {
-                  return false;
-                }
-
-                return groupOptionKeys.some((name) =>
-                  alias.split('/').some((part) => part.startsWith(`:${name}`))
-                );
-              });
-            const shouldUseGroupOptions =
-              typeof groupLinking !== 'string' &&
-              groupLinking != null &&
-              screenConfig.path != null &&
-              screenConfig.path !== '' &&
-              (!screenConfig.exact || hasAliasWithGroupParams);
-
-            if (shouldUseGroupOptions) {
-              if (groupLinking.parse != null) {
-                screenConfig.parse = {
-                  ...groupLinking.parse,
-                  ...screenConfig.parse,
-                };
-              }
-
-              if (groupLinking.stringify != null && !screenConfig.exact) {
-                screenConfig.stringify = {
-                  ...groupLinking.stringify,
-                  ...screenConfig.stringify,
-                };
-              }
-            }
-
             return [key, screenConfig] as const;
           })
           .filter(([, screen]) => Object.keys(screen).length > 0)
       );
     };
 
-    const screens = {};
+    const screens: PathConfigMapForStaticNavigation = {};
 
     // Loop through the config to find screens and groups
     // So we add the screens and groups in the same order as they are defined
@@ -1125,7 +1093,6 @@ export function createPathConfigForStaticNavigation<ParamList extends {}>(
           screens,
           createPathConfigForScreens(
             t.config.screens,
-            undefined,
             o?.initialRouteName ?? t.config.initialRouteName
           )
         );
@@ -1137,7 +1104,6 @@ export function createPathConfigForStaticNavigation<ParamList extends {}>(
             screens,
             createPathConfigForScreens(
               group.screens,
-              group.linking,
               o?.initialRouteName ?? t.config.initialRouteName
             )
           );
@@ -1158,5 +1124,11 @@ export function createPathConfigForStaticNavigation<ParamList extends {}>(
     initialScreenConfig.path = '';
   }
 
-  return screens;
+  if (!screens) {
+    return undefined;
+  }
+
+  markSharedPathConfigs(screens, sources, blocked);
+
+  return screens as PathConfigMap<ParamList>;
 }