@react-navigation/core 8.0.0-alpha.4 → 8.0.0-alpha.40

package/src/getPathFromState.tsx

@@ -1,17 +1,18 @@
-import type {
-  NavigationState,
-  PartialState,
-  Route,
-} from '@react-navigation/routers';
-import * as queryString from 'query-string';
-
-import { getPatternParts, type PatternPart } from './getPatternParts';
+import type { NavigationState, PartialState } from '@react-navigation/routers';
+
+import {
+  combinePatternParts,
+  getPatternParts,
+  type PatternPart,
+} from './getPatternParts';
+import { getStateFromRouteParams } from './getStateFromRouteParams';
+import * as queryString from './queryString';
 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 +20,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);
 
-  const cached = cachedNormalizedConfigs.get(options?.screens);
+  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 +144,179 @@ 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> = {
+          __proto__: null,
+        };
+
+        for (const key in params) {
+          const value = params[key];
+
+          if (value === undefined) {
+            let canBeOmitted = false;
+
+            for (const part of ownParts) {
+              if (part.name === key) {
+                canBeOmitted = part.optional === true || part.repeat != null;
+                break;
               }
+            }
 
-              const stringify = options?.stringify?.[key] ?? String;
+            if (canBeOmitted) {
+              continue;
+            }
+          }
 
-              return [key, stringify(value)];
-            })
-            .filter((entry) => entry != null)
-        );
+          const stringify = options.stringify?.[key];
 
-        if (parts?.length) {
-          Object.assign(allParams, currentParams);
+          currentParams[key] = stringify
+            ? stringify(value)
+            : serializeParamValue(value);
+        }
+
+        const claimedParams = new Set<string>();
+
+        for (const part of ownParts) {
+          if (part.name && part.name in currentParams) {
+            const value = currentParams[part.name];
+
+            if (value !== undefined) {
+              partValues.set(part, value);
+              claimedParams.add(part.name);
+            }
+          }
         }
 
         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 = { __proto__: null };
+
+          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.name && !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];
+
+        if (nextRoute == null) {
+          throw new Error(`Couldn't find a route at index ${index}.`);
+        }
 
-        const nextRoute = route.state.routes[index];
-        const nestedConfig = currentOptions[route.name].screens;
+        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,70 +325,112 @@ 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, name, optional, repeat } = 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];
+          if (name) {
+            const value = partValues.get(part);
 
             if (value === undefined && optional) {
               // Optional params without value assigned in route.params should be ignored
-              return '';
+              continue;
+            }
+
+            if (repeat) {
+              if (value === null) {
+                throw new Error(
+                  `The path pattern '${segment}' does not allow null for param '${name}'.`
+                );
+              }
+
+              if (Array.isArray(value)) {
+                throw new Error(
+                  `The path pattern '${segment}' requires a string for param '${name}'.`
+                );
+              }
+
+              const values =
+                value === undefined || value === '' ? [] : value.split('/');
+
+              if (repeat === 'one-or-more' && values.length === 0) {
+                throw new Error(
+                  `The path pattern '${segment}' requires at least one value for param '${name}'.`
+                );
+              }
+
+              if (values.some((item) => item.length === 0)) {
+                throw new Error(
+                  `The path pattern '${segment}' does not allow empty values for param '${name}'.`
+                );
+              }
+
+              if (values.length === 0) {
+                path = path.replace(/\/$/, '');
+              }
+
+              path += values.map(encodePathParam).join('/');
+              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 = { __proto__: null };
 
-    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;
         }
       }
+    }
 
-      const query = queryString.stringify(focusedParams, { sort: false });
+    if (routeState) {
+      path += '/';
+    } else if (focusedParams) {
+      const query = queryString.stringify(focusedParams);
 
       if (query) {
         path += `?${query}`;
       }
     }
 
-    current = route.state;
+    current = routeState;
   }
 
   // Include the root path if specified
@@ -275,8 +439,13 @@ export function getPathFromState<ParamList extends {}>(
   }
 
   // Remove multiple as well as trailing slashes
-  path = path.replace(/\/+/g, '/');
-  path = path.length > 1 ? path.replace(/\/$/, '') : path;
+  if (path.includes('//')) {
+    path = path.replace(/\/+/g, '/');
+  }
+
+  if (path.length > 1 && path.endsWith('/')) {
+    path = path.slice(0, -1);
+  }
 
   // If path doesn't start with a slash, add it
   // This makes sure that history.pushState will update the path correctly instead of appending
@@ -292,14 +461,16 @@ 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: combinePatternParts(parentParts, ownParts),
+        ownParts,
+      };
     }
 
-    return { parts };
+    return { parts: ownParts, ownParts };
   }
 
   if (config.exact && config.path === undefined) {
@@ -310,14 +481,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)
+      ? combinePatternParts(parentParts || [], ownParts)
+      : ownParts.length
+        ? ownParts
         : undefined;
 
   const screens =
@@ -327,6 +496,7 @@ const createConfigItem = (
 
   return {
     parts,
+    ownParts,
     stringify: config.stringify,
     screens,
   };
@@ -335,11 +505,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;
+};