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

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>;
 };
 
@@ -19,40 +16,87 @@ type State = NavigationState | Omit<PartialState<NavigationState>, 'stale'>;
 
 type StringifyConfig = Record<string, ((value: unknown) => string) | undefined>;
 
+type SerializedParamValue = string | string[] | null;
+
 type ConfigItem = {
-  parts?: PatternPart[];
-  stringify?: StringifyConfig;
-  screens?: Record<string, ConfigItem>;
+  parts?: PatternPart[] | undefined;
+  ownParts: PatternPart[];
+  stringify?: StringifyConfig | undefined;
+  screens?: Record<string, ConfigItem> | undefined;
+};
+
+const serializeParamValue = (value: unknown): SerializedParamValue =>
+  value === null
+    ? null
+    : Array.isArray(value)
+      ? value.map(String)
+      : String(value);
+
+const encodePathParam = (value: string) => {
+  let result = '';
+
+  for (const char of value) {
+    const charCode = char.charCodeAt(0);
+    const safe =
+      (charCode >= 65 && charCode <= 90) ||
+      (charCode >= 97 && charCode <= 122) ||
+      (charCode >= 48 && charCode <= 57) ||
+      "-._~!$&'()*+,;=:@".includes(char);
+
+    result += safe ? char : encodeURIComponent(char);
+  }
+
+  return result;
 };
 
-const getActiveRoute = (state: State): { name: string; params?: object } => {
+const getActiveRoute = (
+  state: State,
+  configs: Record<string, ConfigItem> | undefined,
+  getRouteState: (
+    route: State['routes'][number],
+    config: ConfigItem | undefined
+  ) => State | undefined
+): { name: string; params?: object | undefined } => {
   const route =
     typeof state.index === 'number'
       ? state.routes[state.index]
       : state.routes[state.routes.length - 1];
 
-  if (route.state) {
-    return getActiveRoute(route.state);
+  if (route == null) {
+    throw new Error(`Couldn't find the active route.`);
+  }
+
+  const config = configs?.[route.name];
+  const routeState = getRouteState(route, config);
+
+  if (routeState) {
+    return getActiveRoute(routeState, config?.screens, getRouteState);
   }
 
   return route;
 };
 
 const cachedNormalizedConfigs = new WeakMap<
-  PathConfigMap<{}>,
+  Options<{}>,
   Record<string, ConfigItem>
 >();
 
 const getNormalizedConfigs = (options?: Options<{}>) => {
-  if (!options?.screens) return {};
+  if (!options) {
+    return {};
+  }
 
-  const cached = cachedNormalizedConfigs.get(options?.screens);
+  const cached = cachedNormalizedConfigs.get(options);
 
-  if (cached) return cached;
+  if (cached) {
+    return cached;
+  }
+
+  validatePathConfig(options);
 
   const normalizedConfigs = createNormalizedConfigs(options.screens);
 
-  cachedNormalizedConfigs.set(options.screens, normalizedConfigs);
+  cachedNormalizedConfigs.set(options, normalizedConfigs);
 
   return normalizedConfigs;
 };
@@ -96,105 +140,177 @@ export function getPathFromState<ParamList extends {}>(
     );
   }
 
-  if (options) {
-    validatePathConfig(options);
-  }
-
   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 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;
+    // Values for each pattern part object, so the same param name
+    // at different nesting levels gets the value from its own level
+    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 = [];
 
     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;
+
+      const ownParts = config.ownParts;
 
       nestedRouteNames.push(route.name);
 
       if (route.params) {
-        const options = currentOptions[route.name];
-
-        const currentParams = Object.fromEntries(
-          Object.entries(route.params)
-            .map(([key, value]): [string, string] | null => {
-              if (value === undefined) {
-                if (options) {
-                  const optional = options.parts?.find(
-                    (part) => part.param === key
-                  )?.optional;
-
-                  if (optional) {
-                    return null;
-                  }
-                } else {
-                  return null;
-                }
+        const options = config;
+        const params = route.params as Record<string, unknown>;
+        const currentParams: Record<string, SerializedParamValue> = {};
+
+        for (const key in params) {
+          const value = params[key];
+
+          if (value === undefined) {
+            let optional = false;
+
+            for (const part of ownParts) {
+              if (part.param === key) {
+                optional = part.optional === true;
+                break;
               }
+            }
+
+            if (optional) {
+              continue;
+            }
+          }
+
+          const stringify = options.stringify?.[key];
+
+          currentParams[key] = stringify
+            ? stringify(value)
+            : serializeParamValue(value);
+        }
 
-              const stringify = options?.stringify?.[key] ?? String;
+        const claimedParams = new Set<string>();
 
-              return [key, stringify(value)];
-            })
-            .filter((entry) => entry != null)
-        );
+        for (const part of ownParts) {
+          if (part.param && part.param in currentParams) {
+            const value = currentParams[part.param];
 
-        if (parts?.length) {
-          Object.assign(allParams, currentParams);
+            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];
-                }
-              }
-            });
+          // Params claimed by the pattern shouldn't be repeated in the query string
+          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);
         }
       }
 
       // If there is no `screens` property or no nested state, we return pattern
-      if (!currentOptions[route.name].screens || route.state === undefined) {
+      const routeState = getRouteState(route, config);
+
+      if (!config.screens || routeState == null) {
         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: State['routes'][number] | undefined =
+          routeState.routes[index];
 
-        const nextRoute = route.state.routes[index];
-        const nestedConfig = currentOptions[route.name].screens;
+        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,62 +319,68 @@ export function getPathFromState<ParamList extends {}>(
       }
     }
 
-    if (currentOptions[route.name] !== undefined) {
-      path += parts
-        ?.map(({ segment, param, optional }) => {
+    const routeState = getRouteState(route, currentOptions[route.name]);
+
+    if (currentOptions[route.name] != null) {
+      if (parts) {
+        let index = 0;
+
+        for (const part of parts) {
+          const { segment, param, optional } = part;
+
+          if (index > 0) {
+            path += '/';
+          }
+
+          index++;
+
           // 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
           if (segment === '*') {
-            return route.name;
+            path += route.name;
+            continue;
           }
 
           // 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
-              return '';
+              continue;
             }
 
             // Valid characters according to
             // https://datatracker.ietf.org/doc/html/rfc3986#section-3.3 (see pchar definition)
-            return Array.from(String(value))
-              .map((char) =>
-                /[^A-Za-z0-9\-._~!$&'()*+,;=:@]/g.test(char)
-                  ? encodeURIComponent(char)
-                  : char
-              )
-              .join('');
+            path += encodePathParam(String(value));
+            continue;
           }
 
-          return encodeURIComponent(segment);
-        })
-        .join('/');
+          path += encodeURIComponent(segment);
+        }
+      }
     } else {
       path += encodeURIComponent(route.name);
     }
 
     if (!focusedParams && focusedRoute.params) {
-      focusedParams = Object.fromEntries(
-        Object.entries(focusedRoute.params).map(([key, value]) => [
-          key,
-          String(value),
-        ])
-      );
-    }
+      focusedParams = {};
 
-    if (route.state) {
-      path += '/';
-    } else if (focusedParams) {
-      for (const param in focusedParams) {
-        if (focusedParams[param] === 'undefined') {
-          // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-          delete focusedParams[param];
+      const params = focusedRoute.params as Record<string, unknown>;
+
+      for (const key in params) {
+        const value = serializeParamValue(params[key]);
+
+        if (value !== 'undefined') {
+          focusedParams[key] = value;
         }
       }
+    }
 
+    if (routeState) {
+      path += '/';
+    } else if (focusedParams) {
       const query = queryString.stringify(focusedParams, { sort: false });
 
       if (query) {
@@ -266,7 +388,7 @@ export function getPathFromState<ParamList extends {}>(
       }
     }
 
-    current = route.state;
+    current = routeState;
   }
 
   // Include the root path if specified
@@ -292,14 +414,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 +431,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 =
@@ -327,6 +446,7 @@ const createConfigItem = (
 
   return {
     parts,
+    ownParts,
     stringify: config.stringify,
     screens,
   };
@@ -335,11 +455,17 @@ const createConfigItem = (
 const createNormalizedConfigs = (
   options: PathConfigMap<object>,
   parts?: PatternPart[]
-): Record<string, ConfigItem> =>
-  Object.fromEntries(
-    Object.entries(options).map(([name, c]) => {
-      const result = createConfigItem(c, parts);
-
-      return [name, result];
-    })
-  );
+): Record<string, ConfigItem> => {
+  const configs: Record<string, ConfigItem> = {};
+  const screens = options as Record<string, PathConfig<{}> | string>;
+
+  for (const name in screens) {
+    const config = screens[name];
+
+    if (config !== undefined) {
+      configs[name] = createConfigItem(config, parts);
+    }
+  }
+
+  return configs;
+};

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,13 +49,13 @@ 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
           regexInnerParens--;
-          current.regex += char;
         } else {
+          current.regex += char;
           isRegex = false;
           isParam = false;
         }
@@ -62,7 +64,7 @@ export function getPatternParts(path: string): PatternPart[] {
           `Encountered ')' without preceding '(' in path: ${path}`
         );
       }
-    } else if (char === '?') {
+    } else if (char === '?' && !isRegex) {
       if (current.param) {
         isParam = false;
 
@@ -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) {
@@ -124,3 +137,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];
+}