@react-navigation/core 7.21.4 → 7.21.6

package/src/getPathFromState.tsx

@@ -1,11 +1,8 @@
-import type {
-  NavigationState,
-  PartialState,
-  Route,
-} from '@react-navigation/routers';
+import type { NavigationState, PartialState } from '@react-navigation/routers';
 import * as queryString from 'query-string';
 
 import { getPatternParts, type PatternPart } from './getPatternParts';
+import { getStateFromRouteParams } from './getStateFromRouteParams';
 import type { PathConfig, PathConfigMap } from './types';
 import { validatePathConfig } from './validatePathConfig';
 
@@ -19,20 +16,40 @@ type State = NavigationState | Omit<PartialState<NavigationState>, 'stale'>;
 
 type StringifyConfig = Record<string, (value: unknown) => string>;
 
+type SerializedParamValue = string | string[] | null;
+
 type ConfigItem = {
   parts?: PatternPart[];
+  ownParts: PatternPart[];
   stringify?: StringifyConfig;
   screens?: Record<string, ConfigItem>;
 };
 
-const getActiveRoute = (state: State): { name: string; params?: object } => {
+const serializeParamValue = (value: unknown): SerializedParamValue =>
+  value === null
+    ? null
+    : Array.isArray(value)
+      ? value.map(String)
+      : String(value);
+
+const getActiveRoute = (
+  state: State,
+  configs: Record<string, ConfigItem> | undefined,
+  getRouteState: (
+    route: State['routes'][number],
+    config: ConfigItem | undefined
+  ) => State | undefined
+): { name: string; params?: object } => {
   const route =
     typeof state.index === 'number'
       ? state.routes[state.index]
       : state.routes[state.routes.length - 1];
 
-  if (route.state) {
-    return getActiveRoute(route.state);
+  const config = configs?.[route.name];
+  const routeState = getRouteState(route, config);
+
+  if (routeState) {
+    return getActiveRoute(routeState, config?.screens, getRouteState);
   }
 
   return route;
@@ -101,24 +118,55 @@ export function getPathFromState<ParamList extends {}>(
   }
 
   const configs = getNormalizedConfigs(options);
+  const cachedRouteStates = new Map<object, State | undefined>();
+
+  const getRouteState = (
+    route: State['routes'][number],
+    config: ConfigItem | undefined
+  ) => {
+    if (route.state) {
+      return route.state;
+    }
+
+    const hasScreenParams =
+      route.params &&
+      'screen' in route.params &&
+      typeof route.params.screen === 'string' &&
+      config?.screens?.[route.params.screen];
+
+    const hasStateParams =
+      route.params && 'state' in route.params && config?.screens;
+
+    if (
+      !route.params ||
+      !config?.screens ||
+      (!hasScreenParams && !hasStateParams)
+    ) {
+      return undefined;
+    }
+
+    if (!cachedRouteStates.has(route)) {
+      cachedRouteStates.set(route, getStateFromRouteParams(route.params));
+    }
+
+    return cachedRouteStates.get(route);
+  };
+
+  const focusedRoute = getActiveRoute(state, configs, getRouteState);
 
   let path = '/';
   let current: State | undefined = state;
 
-  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 route = current.routes[index];
 
     let parts: PatternPart[] | undefined;
 
-    let focusedParams: Record<string, string> | undefined;
-    let currentOptions = configs;
+    const partValues = new Map<PatternPart, SerializedParamValue | undefined>();
 
-    const focusedRoute = getActiveRoute(state);
+    let focusedParams: Record<string, SerializedParamValue> | undefined;
+    let currentOptions = configs;
 
     // Keep all the route names that appeared during going deeper in config in case the pattern is resolved to undefined
     const nestedRouteNames = [];
@@ -126,19 +174,21 @@ export function getPathFromState<ParamList extends {}>(
     let hasNext = true;
 
     while (route.name in currentOptions && hasNext) {
-      parts = currentOptions[route.name].parts;
+      const config = currentOptions[route.name];
+      parts = config.parts;
+      const ownParts = config.ownParts;
 
       nestedRouteNames.push(route.name);
 
       if (route.params) {
-        const options = currentOptions[route.name];
+        const options = config;
 
         const currentParams = Object.fromEntries(
           Object.entries(route.params)
-            .map(([key, value]): [string, string] | null => {
+            .map(([key, value]): [string, SerializedParamValue] | null => {
               if (value === undefined) {
                 if (options) {
-                  const optional = options.parts?.find(
+                  const optional = ownParts.find(
                     (part) => part.param === key
                   )?.optional;
 
@@ -150,51 +200,71 @@ export function getPathFromState<ParamList extends {}>(
                 }
               }
 
-              const stringify = options?.stringify?.[key] ?? String;
+              const stringify = options?.stringify?.[key];
 
-              return [key, stringify(value)];
+              return [
+                key,
+                stringify ? stringify(value) : serializeParamValue(value),
+              ];
             })
             .filter((entry) => entry != null)
         );
 
-        if (parts?.length) {
-          Object.assign(allParams, currentParams);
+        const claimedParams = new Set<string>();
+
+        for (const part of ownParts) {
+          if (part.param && part.param in currentParams) {
+            const value = currentParams[part.param];
+
+            if (value !== undefined) {
+              partValues.set(part, value);
+              claimedParams.add(part.param);
+            }
+          }
         }
 
         if (focusedRoute === route) {
           // If this is the focused route, keep the params for later use
           // We save it here since it's been stringified already
-          focusedParams = { ...currentParams };
-
-          parts
-            // eslint-disable-next-line no-loop-func
-            ?.forEach(({ param }) => {
-              if (param) {
-                // Remove the params present in the pattern since we'll only use the rest for query string
-                if (focusedParams) {
-                  // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-                  delete focusedParams[param];
-                }
-              }
-            });
+          focusedParams = {};
+
+          for (const key in currentParams) {
+            const value = currentParams[key];
+
+            if (
+              !claimedParams.has(key) &&
+              value !== undefined &&
+              value !== 'undefined'
+            ) {
+              focusedParams[key] = value;
+            }
+          }
+        }
+      }
+
+      for (const part of ownParts) {
+        if (part.param && !partValues.has(part)) {
+          partValues.set(part, undefined);
         }
       }
 
+      const routeState = getRouteState(route, config);
+
       // If there is no `screens` property or no nested state, we return pattern
-      if (!currentOptions[route.name].screens || route.state === undefined) {
+      if (!config.screens || routeState === undefined) {
         hasNext = false;
       } else {
         index =
-          typeof route.state.index === 'number'
-            ? route.state.index
-            : route.state.routes.length - 1;
+          typeof routeState.index === 'number'
+            ? routeState.index
+            : routeState.routes.length - 1;
 
-        const nextRoute = route.state.routes[index];
-        const nestedConfig = currentOptions[route.name].screens;
+        const nextRoute = routeState.routes[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 };
+          route = nextRoute;
           currentOptions = nestedConfig;
         } else {
           // If not, there is no sense in going deeper in config
@@ -203,9 +273,12 @@ export function getPathFromState<ParamList extends {}>(
       }
     }
 
+    const routeState = getRouteState(route, currentOptions[route.name]);
+
     if (currentOptions[route.name] !== undefined) {
       path += parts
-        ?.map(({ segment, param, optional }) => {
+        ?.map((part) => {
+          const { segment, param, optional } = part;
           // We don't know what to show for wildcard patterns
           // Showing the route name seems ok, though whatever we show here will be incorrect
           // Since the page doesn't actually exist
@@ -215,7 +288,7 @@ export function getPathFromState<ParamList extends {}>(
 
           // If the path has a pattern for a param, put the param in the path
           if (param) {
-            const value = allParams[param];
+            const value = partValues.get(part);
 
             if (value === undefined && optional) {
               // Optional params without value assigned in route.params should be ignored
@@ -244,12 +317,12 @@ export function getPathFromState<ParamList extends {}>(
       focusedParams = Object.fromEntries(
         Object.entries(focusedRoute.params).map(([key, value]) => [
           key,
-          String(value),
+          serializeParamValue(value),
         ])
       );
     }
 
-    if (route.state) {
+    if (routeState) {
       path += '/';
     } else if (focusedParams) {
       for (const param in focusedParams) {
@@ -266,7 +339,7 @@ export function getPathFromState<ParamList extends {}>(
       }
     }
 
-    current = route.state;
+    current = routeState;
   }
 
   // Include the root path if specified
@@ -292,14 +365,13 @@ const createConfigItem = (
   parentParts?: PatternPart[]
 ): ConfigItem => {
   if (typeof config === 'string') {
-    // If a string is specified as the value of the key(e.g. Foo: '/path'), use it as the pattern
-    const parts = getPatternParts(config);
+    const ownParts = getPatternParts(config);
 
     if (parentParts) {
-      return { parts: [...parentParts, ...parts] };
+      return { parts: [...parentParts, ...ownParts], ownParts };
     }
 
-    return { parts };
+    return { parts: ownParts, ownParts };
   }
 
   if (config.exact && config.path === undefined) {
@@ -310,14 +382,12 @@ const createConfigItem = (
 
   // If an object is specified as the value (e.g. Foo: { ... }),
   // It can have `path` property and `screens` prop which has nested configs
+  const ownParts = config.path ? getPatternParts(config.path) : [];
   const parts =
     config.exact !== true
-      ? [
-          ...(parentParts || []),
-          ...(config.path ? getPatternParts(config.path) : []),
-        ]
-      : config.path
-        ? getPatternParts(config.path)
+      ? [...(parentParts || []), ...ownParts]
+      : ownParts.length
+        ? ownParts
         : undefined;
 
   const screens = config.screens
@@ -326,6 +396,7 @@ const createConfigItem = (
 
   return {
     parts,
+    ownParts,
     stringify: config.stringify,
     screens,
   };

package/src/getPatternParts.tsx

@@ -15,6 +15,8 @@ export function getPatternParts(path: string): PatternPart[] {
 
   let isRegex = false;
   let isParam = false;
+  let isEscaped = false;
+  let isInCharClass = false;
   let regexInnerParens = 0;
 
   // One extra iteration to add the last character
@@ -34,7 +36,7 @@ export function getPatternParts(path: string): PatternPart[] {
           `Encountered ':' in the middle of a segment in path: ${path}`
         );
       }
-    } else if (char === '(') {
+    } else if (char === '(' && !isEscaped && !isInCharClass) {
       if (isParam) {
         if (isRegex) {
           // The '(' is part of the regex if we're already inside one
@@ -47,7 +49,7 @@ export function getPatternParts(path: string): PatternPart[] {
           `Encountered '(' without preceding ':' in path: ${path}`
         );
       }
-    } else if (char === ')') {
+    } else if (char === ')' && !isEscaped && !isInCharClass) {
       if (isParam && isRegex) {
         if (regexInnerParens) {
           // The ')' is part of the regex if we're already inside one
@@ -102,6 +104,17 @@ export function getPatternParts(path: string): PatternPart[] {
     if (isRegex) {
       current.regex = current.regex || '';
       current.regex += char;
+
+      // Track escapes and character classes so parens inside them are not special
+      if (isEscaped) {
+        isEscaped = false;
+      } else if (char === '\\') {
+        isEscaped = true;
+      } else if (char === '[') {
+        isInCharClass = true;
+      } else if (char === ']') {
+        isInCharClass = false;
+      }
     }
 
     if (isParam && !isRegex) {

package/src/getStateFromPath.tsx

@@ -26,7 +26,12 @@ type RouteConfig = {
   screen: string;
   regex?: RegExp;
   segments: string[];
-  params: { screen: string; name: string; index: number }[];
+  params: {
+    screen: string;
+    name: string;
+    index: number;
+    regex?: RegExp;
+  }[];
   routeNames: string[];
   parse?: ParseConfig;
   explicitParamNames?: Set<string>;
@@ -53,6 +58,7 @@ type ConfigResources = {
   initialRoutes: InitialRouteConfig[];
   configs: RouteConfig[];
   configsByScreen: Record<string, RouteConfig[]>;
+  prefixRegex?: RegExp;
 };
 
 const NESTED_SCREEN_PARAM_NAMES = [
@@ -64,6 +70,17 @@ const NESTED_SCREEN_PARAM_NAMES = [
   'pop',
 ];
 
+const getStaticSegmentPattern = (segment: string) =>
+  Array.from(segment, (char) => {
+    const encoded = encodeURIComponent(char);
+    const percentEncoded =
+      encoded === char
+        ? `%${char.charCodeAt(0).toString(16).padStart(2, '0').toUpperCase()}`
+        : encoded;
+
+    return `(?:${escape(char)}|${escape(percentEncoded)})`;
+  }).join('');
+
 const getExplicitParamNames = (parse?: ParseConfig) => {
   const names = Object.entries(parse ?? {}).map(([name]) => name);
 
@@ -95,7 +112,7 @@ export function getStateFromPath<ParamList extends {}>(
   path: string,
   options?: Options<ParamList>
 ): ResultState | undefined {
-  const { initialRoutes, configs, configsByScreen } =
+  const { initialRoutes, configs, configsByScreen, prefixRegex } =
     getConfigResources(options);
 
   const screens = options?.screens;
@@ -103,24 +120,20 @@ export function getStateFromPath<ParamList extends {}>(
   let remaining = path
     .replace(/\/+/g, '/') // Replace multiple slash (//) with single ones
     .replace(/^\//, '') // Remove extra leading slash
-    .replace(/\?.*$/, ''); // Remove query params which we will handle later
+    .replace(/\?.*$/, '') // Remove query params which we will handle later
+    .replace(/%[0-9a-f]{2}/gi, (match) => match.toUpperCase());
 
   // Make sure there is a trailing slash
   remaining = remaining.endsWith('/') ? remaining : `${remaining}/`;
 
-  const prefix = options?.path?.replace(/^\//, ''); // Remove extra leading slash
-
-  if (prefix) {
-    // Make sure there is a trailing slash
-    const normalizedPrefix = prefix.endsWith('/') ? prefix : `${prefix}/`;
+  if (prefixRegex) {
+    const prefixMatch = remaining.match(prefixRegex);
 
-    // If the path doesn't start with the prefix, it's not a match
-    if (!remaining.startsWith(normalizedPrefix)) {
+    if (prefixMatch == null) {
       return undefined;
     }
 
-    // Remove the prefix from the path
-    remaining = remaining.replace(normalizedPrefix, '');
+    remaining = remaining.slice(prefixMatch[0].length);
   }
 
   if (screens === undefined) {
@@ -219,6 +232,19 @@ function prepareConfigResources(options?: Options<{}>) {
 
   const initialRoutes = getInitialRoutes(options);
   const configs = getSortedNormalizedConfigs(initialRoutes, options?.screens);
+  const prefix = options?.path?.replace(/^\//, '');
+
+  let prefixRegex: RegExp | undefined;
+
+  if (prefix) {
+    const normalizedPrefix = prefix.endsWith('/') ? prefix : `${prefix}/`;
+    const prefixPattern = normalizedPrefix
+      .split('/')
+      .map(getStaticSegmentPattern)
+      .join('/');
+
+    prefixRegex = new RegExp(`^${prefixPattern}`);
+  }
 
   const configsByScreen: Record<string, RouteConfig[]> = {};
   const configsByPattern = new Map<string, RouteConfig>();
@@ -237,6 +263,7 @@ function prepareConfigResources(options?: Options<{}>) {
     initialRoutes,
     configs,
     configsByScreen,
+    prefixRegex,
   };
 }
 
@@ -264,6 +291,7 @@ function getSortedNormalizedConfigs(
         createNormalizedConfigs(key, screens, initialRoutes, [], [], [])
       )
     )
+    .map((config, order) => ({ ...config, order }))
     .sort((a, b) => {
       // Sort config from most specific to least specific:
       // - more segments
@@ -275,7 +303,21 @@ function getSortedNormalizedConfigs(
       // If 2 patterns are same, move the one with less route names up
       // This is an error state, so it's only useful for consistent error messages
       if (isArrayEqual(a.segments, b.segments)) {
-        return b.routeNames.join('>').localeCompare(a.routeNames.join('>'));
+        if (
+          a.routeNames.length > b.routeNames.length &&
+          arrayStartsWith(a.routeNames, b.routeNames)
+        ) {
+          return -1;
+        }
+
+        if (
+          b.routeNames.length > a.routeNames.length &&
+          arrayStartsWith(b.routeNames, a.routeNames)
+        ) {
+          return 1;
+        }
+
+        return a.routeNames.length - b.routeNames.length || a.order - b.order;
       }
 
       // If one of the patterns starts with the other, it's more exhaustive
@@ -441,6 +483,15 @@ const matchAgainstConfigs = (
               break;
             }
 
+            if (
+              param.regex &&
+              value !== decoded &&
+              !param.regex.test(decoded)
+            ) {
+              hasInvalidParam = true;
+              break;
+            }
+
             const parser = routeConfig.parse?.[param.name];
 
             paramEntries.push([param.name, parser ? parser(decoded) : decoded]);
@@ -642,12 +693,18 @@ const createConfigItem = (
         `^(${parts
           .map((it, i) => {
             if (it.param) {
-              const reg = it.regex || '[^/]+';
+              const reg = it.regex
+                ? `(?:${it.regex})|(?=[^/]*%[0-9A-F]{2})[^/]+`
+                : '[^/]+';
 
               return `(((?<param_${i}>${reg})\\/)${it.optional ? '?' : ''})`;
             }
 
-            return `${it.segment === '*' ? '.*' : escape(it.segment)}\\/`;
+            if (it.segment === '*') {
+              return `.*\\/`;
+            }
+
+            return `${getStaticSegmentPattern(it.segment)}\\/`;
           })
           .join('')})$`
       )
@@ -666,6 +723,7 @@ const createConfigItem = (
       index,
       screen: part.screen,
       name: part.param,
+      regex: part.regex ? new RegExp(`^(?:${part.regex})$`) : undefined,
     });
 
     if (part.screen === screen) {
@@ -813,8 +871,9 @@ const parseQueryParams = (
   hasNestedScreens = false,
   routeParams?: Record<string, unknown>
 ) => {
-  const query = path.split('?')[1];
-  const params: Record<string, unknown> = queryString.parse(query);
+  const queryIndex = path.indexOf('?');
+  const query = queryIndex === -1 ? undefined : path.slice(queryIndex + 1);
+  const params: Record<string, unknown> = query ? queryString.parse(query) : {};
 
   for (const name of pathParamNames) {
     // eslint-disable-next-line @typescript-eslint/no-dynamic-delete

package/src/getStateFromRouteParams.tsx

@@ -0,0 +1,60 @@
+import type { NavigationState, PartialState } from '@react-navigation/routers';
+
+export function getStateFromRouteParams(
+  params: object | undefined
+): PartialState<NavigationState> | NavigationState | undefined {
+  if (params == null || typeof params !== 'object') {
+    return undefined;
+  }
+
+  if (
+    'state' in params &&
+    params.state &&
+    typeof params.state === 'object' &&
+    'routes' in params.state &&
+    Array.isArray(params.state.routes) &&
+    params.state.routes.every(
+      (route) =>
+        typeof route === 'object' &&
+        route != null &&
+        'name' in route &&
+        typeof route.name === 'string'
+    )
+  ) {
+    // @ts-expect-error this is fine 🔥
+    return params.state;
+  }
+
+  if (
+    'screen' in params &&
+    params.screen &&
+    typeof params.screen === 'string'
+  ) {
+    return {
+      routes: [
+        {
+          name: params.screen,
+          params:
+            'params' in params &&
+            typeof params.params === 'object' &&
+            params.params != null
+              ? params.params
+              : undefined,
+          path:
+            'path' in params && typeof params.path === 'string'
+              ? params.path
+              : undefined,
+          // @ts-expect-error this is fine 🔥
+          state:
+            'params' in params &&
+            typeof params.params === 'object' &&
+            params.params != null
+              ? getStateFromRouteParams(params.params)
+              : undefined,
+        },
+      ],
+    };
+  }
+
+  return undefined;
+}