@react-navigation/core 8.0.0-alpha.23 → 8.0.0-alpha.25

package/src/getActionFromState.tsx

@@ -51,25 +51,27 @@ export function getActionFromState(
     normalizedConfig = {};
   }
 
-  const routes =
-    state.index != null ? state.routes.slice(0, state.index + 1) : state.routes;
+  const routesLength =
+    state.index == null || state.index >= state.routes.length
+      ? state.routes.length
+      : state.index + 1;
 
-  if (routes.length === 0) {
+  if (routesLength === 0) {
     return undefined;
   }
 
-  const firstRoute = routes[0];
+  const firstRoute = state.routes[0];
 
   if (firstRoute == null) {
     return undefined;
   }
 
-  const secondRoute = routes[1];
+  const secondRoute = state.routes[1];
 
   if (
     !(
-      (routes.length === 1 && firstRoute.key == null) ||
-      (routes.length === 2 &&
+      (routesLength === 1 && firstRoute.key == null) ||
+      (routesLength === 2 &&
         firstRoute.key == null &&
         firstRoute.name === normalizedConfig?.initialRouteName &&
         secondRoute?.key == null)
@@ -121,24 +123,24 @@ export function getActionFromState(
       return undefined;
     }
 
-    const routes =
-      current.index != null
-        ? current.routes.slice(0, current.index + 1)
-        : current.routes;
+    const routesLength =
+      current.index == null || current.index >= current.routes.length
+        ? current.routes.length
+        : current.index + 1;
 
-    const route = routes[routes.length - 1];
+    const route = current.routes[routesLength - 1];
 
     if (route == null) {
       return undefined;
     }
 
-    const firstRoute = routes[0];
+    const firstRoute = current.routes[0];
 
     if (firstRoute == null) {
       return undefined;
     }
 
-    const secondRoute = routes[1];
+    const secondRoute = current.routes[1];
 
     // Explicitly set to override existing value when merging params
     Object.assign(params, {
@@ -148,11 +150,11 @@ export function getActionFromState(
       state: undefined,
     });
 
-    if (routes.length === 1 && firstRoute.key == null) {
+    if (routesLength === 1 && firstRoute.key == null) {
       params.initial = true;
       params.screen = route.name;
     } else if (
-      routes.length === 2 &&
+      routesLength === 2 &&
       firstRoute.key == null &&
       firstRoute.name === config?.initialRouteName &&
       secondRoute?.key == null

package/src/getPathFromState.tsx

@@ -22,8 +22,30 @@ type ConfigItem = {
   screens?: Record<string, ConfigItem> | undefined;
 };
 
+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
+  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'
@@ -34,74 +56,41 @@ const getActiveRoute = (
     throw new Error(`Couldn't find the active route.`);
   }
 
-  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;
 };
 
 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;
 };
 
-const getTransformedState = (
-  state: State,
-  configs: Record<string, ConfigItem> | undefined
-): Omit<PartialState<NavigationState>, 'stale'> => {
-  const routes = state.routes.map(
-    (route): Omit<PartialState<NavigationState>, 'stale'>['routes'][number] => {
-      const config = configs?.[route.name];
-
-      if (
-        route.state ||
-        (config?.screens &&
-          route.params &&
-          (('screen' in route.params &&
-            typeof route.params.screen === 'string' &&
-            config.screens[route.params.screen]) ||
-            'state' in route.params))
-      ) {
-        const nestedState: State | undefined =
-          route.state ?? getStateFromRouteParams(route.params);
-
-        if (nestedState) {
-          return {
-            ...route,
-            state: getTransformedState(
-              nestedState,
-              configs?.[route.name]?.screens
-            ),
-          };
-        }
-      }
-
-      // @ts-expect-error route.state is handled in previous condition
-      return route;
-    }
-  );
-
-  return {
-    ...state,
-    routes,
-  };
-};
-
 /**
  * Utility to serialize a navigation state object to a path string.
  *
@@ -141,15 +130,45 @@ export function getPathFromState<ParamList extends {}>(
     );
   }
 
-  if (options) {
-    validatePathConfig(options);
-  }
-
   const configs = getNormalizedConfigs(options);
-  const transformedState = getTransformedState(state, configs);
+  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 = transformedState;
+  let current: State | undefined = state;
 
   const allParams: Record<string, string> = {};
 
@@ -170,8 +189,6 @@ export function getPathFromState<ParamList extends {}>(
     let focusedParams: Record<string, string> | undefined;
     let currentOptions = configs;
 
-    const focusedRoute = getActiveRoute(transformedState);
-
     // Keep all the route names that appeared during going deeper in config in case the pattern is resolved to undefined
     const nestedRouteNames = [];
 
@@ -190,30 +207,31 @@ export function getPathFromState<ParamList extends {}>(
 
       if (route.params) {
         const options = config;
+        const params = route.params as Record<string, unknown>;
+        const currentParams: Record<string, string> = {};
+
+        for (const key in params) {
+          const value = params[key];
 
-        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;
-                }
+          if (value === undefined) {
+            let optional = false;
+
+            for (const part of options.parts ?? []) {
+              if (part.param === key) {
+                optional = part.optional === true;
+                break;
               }
+            }
 
-              const stringify = options?.stringify?.[key] ?? String;
+            if (optional) {
+              continue;
+            }
+          }
 
-              return [key, stringify(value)];
-            })
-            .filter((entry) => entry != null)
-        );
+          const stringify = options.stringify?.[key] ?? String;
+
+          currentParams[key] = stringify(value);
+        }
 
         if (parts?.length) {
           Object.assign(allParams, currentParams);
@@ -222,33 +240,40 @@ export function getPathFromState<ParamList extends {}>(
         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) {
+            let inPattern = false;
+
+            for (const part of parts ?? []) {
+              if (part.param === key) {
+                inPattern = true;
+                break;
               }
-            });
+            }
+
+            const value = currentParams[key];
+
+            if (!inPattern && value !== undefined && value !== 'undefined') {
+              focusedParams[key] = value;
+            }
+          }
         }
       }
 
       // If there is no `screens` property or no nested state, we return pattern
-      if (!config.screens || route.state == null) {
+      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 =
-          route.state.routes[index];
+          routeState.routes[index];
 
         if (nextRoute == null) {
           throw new Error(`Couldn't find a route at index ${index}.`);
@@ -267,14 +292,25 @@ export function getPathFromState<ParamList extends {}>(
       }
     }
 
+    const routeState = getRouteState(route, currentOptions[route.name]);
+
     if (currentOptions[route.name] != null) {
-      path += parts
-        ?.map(({ segment, param, optional }) => {
+      if (parts) {
+        let index = 0;
+
+        for (const { segment, param, optional } of parts) {
+          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
@@ -283,46 +319,39 @@ export function getPathFromState<ParamList extends {}>(
 
             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 = String(params[key]);
+
+        if (value !== 'undefined') {
+          focusedParams[key] = value;
         }
       }
+    }
 
+    if (routeState) {
+      path += '/';
+    } else if (focusedParams) {
       const query = queryString.stringify(focusedParams, { sort: false });
 
       if (query) {
@@ -330,7 +359,7 @@ export function getPathFromState<ParamList extends {}>(
       }
     }
 
-    current = route.state;
+    current = routeState;
   }
 
   // Include the root path if specified
@@ -399,11 +428,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

@@ -52,8 +52,8 @@ export function getPatternParts(path: string): PatternPart[] {
         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 +62,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;