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

package/src/getStateFromPath.tsx

@@ -37,11 +37,13 @@ type RouteConfig = {
   screen: string;
   order: number;
   regex?: RegExp | undefined;
+  pattern: string;
   segments: string[];
-  params: { screen: string; name?: string | undefined; index: number }[];
+  params: { screen: string; name: string; index: number }[];
   routeNames: string[];
   parse?: ParseConfig | undefined;
   explicitParamNames?: Set<string> | undefined;
+  pathParamNames: Set<string>;
   hasNestedScreens: boolean;
   shared: boolean;
 };
@@ -57,7 +59,6 @@ type ResultState = PartialState<NavigationState> & {
 
 type ParsedRoute = {
   name: string;
-  path?: string | undefined;
   params?: Record<string, unknown> | undefined;
 };
 
@@ -88,9 +89,15 @@ const NESTED_SCREEN_PARAM_NAMES = [
 ];
 
 const getExplicitParamNames = (parse?: ParseConfig) => {
-  const names = Object.entries(parse ?? {})
-    .filter(([, parser]) => parser != null)
-    .map(([name]) => name);
+  const names: string[] = [];
+
+  if (parse) {
+    for (const name in parse) {
+      if (parse[name] != null) {
+        names.push(name);
+      }
+    }
+  }
 
   return names.length ? new Set(names) : undefined;
 };
@@ -163,7 +170,7 @@ export function getStateFromPath<ParamList extends {}>(
   // pick the one that best matches the current navigation state
   const resolveSharedConfig = (config: RouteConfig) => {
     if (config.shared) {
-      const candidates = configsByPattern[config.segments.join('/')];
+      const candidates = configsByPattern[config.pattern];
 
       if (candidates) {
         return selectSharedConfig(config, candidates, previous, initialRoutes);
@@ -196,23 +203,21 @@ export function getStateFromPath<ParamList extends {}>(
     remaining = remaining.replace(normalizedPrefix, '');
   }
 
-  const decodedSegments: string[] = [];
+  if (screens === undefined) {
+    // When no config is specified, use the path segments as route names
+    const routes: ParsedRoute[] = [];
 
-  for (const segment of remaining.split('/')) {
-    if (!segment) {
-      continue;
-    }
+    for (const segment of remaining.split('/')) {
+      if (!segment) {
+        continue;
+      }
 
-    try {
-      decodedSegments.push(decodeURIComponent(segment));
-    } catch {
-      return undefined;
+      try {
+        routes.push({ name: decodeURIComponent(segment) });
+      } catch {
+        return undefined;
+      }
     }
-  }
-
-  if (screens === undefined) {
-    // When no config is specified, use the path segments as route names
-    const routes = decodedSegments.map((name) => ({ name }));
 
     if (routes.length) {
       return createNestedStateObject(path, routes, initialRoutes);
@@ -224,7 +229,7 @@ export function getStateFromPath<ParamList extends {}>(
   if (remaining === '/') {
     // We need to add special handling of empty path so navigation to empty path also works
     // When handling empty path, we should only look at the root level config
-    const match = configs.find((config) => config.segments.join('/') === '');
+    const match = configs.find((config) => config.pattern === '');
 
     if (match) {
       const config = resolveSharedConfig(match);
@@ -242,7 +247,29 @@ export function getStateFromPath<ParamList extends {}>(
 
   // We match the whole path against the regex instead of segments
   // This makes sure matches such as wildcard will catch any unmatched routes, even if nested
+  const firstRawSegment = remaining.split('/')[0];
+
+  let firstDecodedSegment: string | undefined;
+
+  try {
+    firstDecodedSegment =
+      firstRawSegment != null ? decodeURIComponent(firstRawSegment) : undefined;
+  } catch {
+    firstDecodedSegment = undefined;
+  }
+
   for (const config of configs) {
+    // Regex matching is expensive, so skip configs that can't match this path.
+    if (
+      !canMatchFirstSegment(
+        config.segments[0],
+        firstDecodedSegment,
+        firstRawSegment
+      )
+    ) {
+      continue;
+    }
+
     const routes = matchAgainstConfig(remaining, config, configsByScreen);
 
     if (routes === undefined) {
@@ -281,6 +308,26 @@ export function getStateFromPath<ParamList extends {}>(
   return undefined;
 }
 
+const canMatchFirstSegment = (
+  configSegment: string | undefined,
+  decodedSegment: string | undefined,
+  rawSegment: string | undefined
+) => {
+  if (decodedSegment === undefined) {
+    return true;
+  }
+
+  if (configSegment === undefined) {
+    return false;
+  }
+
+  if (configSegment === '*' || configSegment.startsWith(':')) {
+    return true;
+  }
+
+  return configSegment === decodedSegment || configSegment === rawSegment;
+};
+
 /**
  * Reference to the last used config resources. This is used to avoid recomputing the config resources when the options are the same.
  */
@@ -289,11 +336,17 @@ const cachedConfigResources = new WeakMap<Options<{}>, ConfigResources>();
 function getConfigResources<ParamList extends {}>(
   options: Options<ParamList> | undefined
 ) {
-  if (!options) return prepareConfigResources();
+  if (!options) {
+    return prepareConfigResources();
+  }
 
   const cached = cachedConfigResources.get(options);
 
-  if (cached) return cached;
+  if (cached) {
+    return cached;
+  }
+
+  validatePathConfig(options);
 
   const resources = prepareConfigResources(options);
 
@@ -303,21 +356,23 @@ function getConfigResources<ParamList extends {}>(
 }
 
 function prepareConfigResources(options?: Options<{}>) {
-  if (options) {
-    validatePathConfig(options);
-  }
-
   const initialRoutes = getInitialRoutes(options);
   const configs = getSortedNormalizedConfigs(initialRoutes, options?.screens);
 
-  checkForDuplicatedConfigs(configs);
-
   const configsByScreen: Record<string, RouteConfig[]> = {};
   const configsByPattern: Record<string, RouteConfig[]> = {};
 
   for (const c of configs) {
     (configsByScreen[c.screen] ??= []).push(c);
-    (configsByPattern[c.segments.join('/')] ??= []).push(c);
+
+    const existing = configsByPattern[c.pattern];
+
+    if (existing) {
+      checkForDuplicatedConfigs(existing[existing.length - 1], c);
+      existing.push(c);
+    } else {
+      configsByPattern[c.pattern] = [c];
+    }
   }
 
   return {
@@ -346,129 +401,133 @@ function getSortedNormalizedConfigs(
   screens: Record<string, string | PathConfig<{}>> = {}
 ) {
   // Create a normalized configs array which will be easier to use
-  return ([] as RouteConfig[])
-    .concat(
-      ...Object.keys(screens).map((key) =>
-        createNormalizedConfigs(key, screens, initialRoutes, [], [], [])
-      )
-    )
-    .map((config, order) => ({ ...config, order }))
-    .sort((a, b) => {
-      // Sort config from most specific to least specific:
-      // - more segments
-      // - static segments
-      // - params with regex
-      // - regular params
-      // - wildcard
-
-      // 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('>'));
-      }
+  const configs: RouteConfig[] = [];
 
-      // If one of the patterns starts with the other, it's more exhaustive
-      // So move it up
-      if (arrayStartsWith(a.segments, b.segments)) {
-        return -1;
-      }
+  for (const key in screens) {
+    configs.push(
+      ...createNormalizedConfigs(key, screens, initialRoutes, [], [], [])
+    );
+  }
 
-      if (arrayStartsWith(b.segments, a.segments)) {
-        return 1;
-      }
+  for (let order = 0; order < configs.length; order++) {
+    const config = configs[order];
 
-      for (let i = 0; i < Math.max(a.segments.length, b.segments.length); i++) {
-        const aSegment = a.segments[i];
-        const bSegment = b.segments[i];
+    if (config) {
+      config.order = order;
+    }
+  }
 
-        // if b is longer, b gets higher priority
-        if (aSegment == null) {
-          return 1;
-        }
+  return configs.sort((a, b) => {
+    // Sort config from most specific to least specific:
+    // - more segments
+    // - static segments
+    // - params with regex
+    // - regular params
+    // - wildcard
+
+    // 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 is longer, a gets higher priority
-        if (bSegment == null) {
-          return -1;
-        }
+    // If one of the patterns starts with the other, it's more exhaustive
+    // So move it up
+    if (arrayStartsWith(a.segments, b.segments)) {
+      return -1;
+    }
 
-        const aWildCard = aSegment === '*';
-        const bWildCard = bSegment === '*';
-        const aParam = aSegment.startsWith(':');
-        const bParam = bSegment.startsWith(':');
-        const aRegex = aParam && aSegment.includes('(');
-        const bRegex = bParam && bSegment.includes('(');
+    if (arrayStartsWith(b.segments, a.segments)) {
+      return 1;
+    }
 
-        // if both are wildcard or regex, we compare next component
-        if ((aWildCard && bWildCard) || (aRegex && bRegex)) {
-          continue;
-        }
+    for (let i = 0; i < Math.max(a.segments.length, b.segments.length); i++) {
+      const aSegment = a.segments[i];
+      const bSegment = b.segments[i];
 
-        // if only a is wildcard, b gets higher priority
-        if (aWildCard && !bWildCard) {
-          return 1;
-        }
+      // if b is longer, b gets higher priority
+      if (aSegment == null) {
+        return 1;
+      }
 
-        // if only b is wildcard, a gets higher priority
-        if (bWildCard && !aWildCard) {
-          return -1;
-        }
+      // if a is longer, a gets higher priority
+      if (bSegment == null) {
+        return -1;
+      }
 
-        // If only a has a param, b gets higher priority
-        if (aParam && !bParam) {
-          return 1;
-        }
+      const aWildCard = aSegment === '*';
+      const bWildCard = bSegment === '*';
+      const aParam = aSegment.startsWith(':');
+      const bParam = bSegment.startsWith(':');
+      const aRegex = aParam && aSegment.includes('(');
+      const bRegex = bParam && bSegment.includes('(');
 
-        // If only b has a param, a gets higher priority
-        if (bParam && !aParam) {
-          return -1;
-        }
+      // if both are wildcard or regex, we compare next component
+      if ((aWildCard && bWildCard) || (aRegex && bRegex)) {
+        continue;
+      }
 
-        // if only a has regex, a gets higher priority
-        if (aRegex && !bRegex) {
-          return -1;
-        }
+      // if only a is wildcard, b gets higher priority
+      if (aWildCard && !bWildCard) {
+        return 1;
+      }
 
-        // if only b has regex, b gets higher priority
-        if (bRegex && !aRegex) {
-          return 1;
-        }
+      // if only b is wildcard, a gets higher priority
+      if (bWildCard && !aWildCard) {
+        return -1;
       }
 
-      return a.segments.length - b.segments.length;
-    });
-}
+      // If only a has a param, b gets higher priority
+      if (aParam && !bParam) {
+        return 1;
+      }
 
-function checkForDuplicatedConfigs(configs: RouteConfig[]) {
-  // Check for duplicate patterns in the config
-  configs.reduce<Record<string, RouteConfig>>((acc, config) => {
-    const pattern = config.segments.join('/');
-
-    if (acc[pattern]) {
-      const a = acc[pattern].routeNames;
-      const b = config.routeNames;
-
-      // It's not a problem if the path string omitted from a inner most screen
-      // For example, it's ok if a path resolves to `A > B > C` or `A > B`
-      const intersects =
-        a.length > b.length
-          ? b.every((it, i) => a[i] === it)
-          : a.every((it, i) => b[i] === it);
-
-      if (!intersects && (!acc[pattern].shared || !config.shared)) {
-        throw new Error(
-          `Found conflicting screens with the same pattern. The pattern '${
-            pattern
-          }' resolves to both '${a.join(' > ')}' and '${b.join(
-            ' > '
-          )}'. Patterns must be unique and cannot resolve to more than one screen unless shared: true is specified.`
-        );
+      // If only b has a param, a gets higher priority
+      if (bParam && !aParam) {
+        return -1;
+      }
+
+      // if only a has regex, a gets higher priority
+      if (aRegex && !bRegex) {
+        return -1;
+      }
+
+      // if only b has regex, b gets higher priority
+      if (bRegex && !aRegex) {
+        return 1;
       }
     }
 
-    return Object.assign(acc, {
-      [pattern]: config,
-    });
-  }, {});
+    return a.segments.length - b.segments.length;
+  });
+}
+
+// Throw if two configs resolve to the same pattern but conflicting screens
+function checkForDuplicatedConfigs(
+  existing: RouteConfig | undefined,
+  config: RouteConfig
+) {
+  if (!existing) {
+    return;
+  }
+
+  const a = existing.routeNames;
+  const b = config.routeNames;
+
+  // It's not a problem if the path string omitted from a inner most screen
+  // For example, it's ok if a path resolves to `A > B > C` or `A > B`
+  const intersects =
+    a.length > b.length ? arrayStartsWith(a, b) : arrayStartsWith(b, a);
+
+  if (!intersects && (!existing.shared || !config.shared)) {
+    throw new Error(
+      `Found conflicting screens with the same pattern. The pattern '${
+        config.pattern
+      }' resolves to both '${a.join(' > ')}' and '${b.join(
+        ' > '
+      )}'. Patterns must be unique and cannot resolve to more than one screen unless shared: true is specified.`
+    );
+  }
 }
 
 const matchAgainstConfig = (
@@ -500,20 +559,21 @@ const matchAgainstConfig = (
     );
 
     let params: Record<string, unknown> | undefined;
+    let hasParams = false;
 
     if (routeConfig && match.groups) {
-      const paramEntries: [string, unknown][] = [];
-
-      for (const [key, value] of Object.entries(match.groups)) {
-        const index = Number(key.replace(PARAM_GROUP_PREFIX, ''));
-        const param = routeConfig.params.find((it) => it.index === index);
+      params = {};
 
-        if (param?.screen !== routeName || !param.name) {
+      for (const param of routeConfig.params) {
+        if (param.screen !== routeName) {
           continue;
         }
 
+        const value = match.groups[`${PARAM_GROUP_PREFIX}${param.index}`];
+
         if (value == null) {
-          paramEntries.push([param.name, undefined]);
+          params[param.name] = undefined;
+          hasParams = true;
           continue;
         }
 
@@ -528,7 +588,8 @@ const matchAgainstConfig = (
         const parser = routeConfig.parse?.[param.name];
 
         if (!parser) {
-          paramEntries.push([param.name, decoded]);
+          params[param.name] = decoded;
+          hasParams = true;
           continue;
         }
 
@@ -542,12 +603,14 @@ const matchAgainstConfig = (
             break;
           }
 
-          paramEntries.push([param.name, result.value]);
+          params[param.name] = result.value;
+          hasParams = true;
           continue;
         }
 
         if (typeof parser === 'function') {
-          paramEntries.push([param.name, parser(decoded)]);
+          params[param.name] = parser(decoded);
+          hasParams = true;
           continue;
         }
 
@@ -558,13 +621,9 @@ const matchAgainstConfig = (
         // A failed param validation invalidates the whole nested route chain for this config.
         break;
       }
-
-      if (paramEntries.length) {
-        params = Object.fromEntries(paramEntries);
-      }
     }
 
-    if (params && Object.keys(params).length) {
+    if (params && hasParams) {
       matchedRoutes.push({ name: routeName, params });
     } else {
       matchedRoutes.push({ name: routeName });
@@ -605,7 +664,10 @@ const createNormalizedConfigs = (
     // if an object is specified as the value (e.g. Foo: { ... }),
     // it can have `path` property and
     // it could have `screens` prop which has nested configs
-    const nestedScreens = 'screens' in config ? config.screens : undefined;
+    const nestedScreens =
+      'screens' in config
+        ? (config.screens as Record<string, string | PathConfig<{}>>)
+        : undefined;
     const hasNestedScreens = !!nestedScreens;
     const currentParts =
       typeof config.path === 'string'
@@ -683,7 +745,7 @@ const createNormalizedConfigs = (
       );
     }
 
-    if (hasNestedScreens) {
+    if (nestedScreens) {
       // property `initialRouteName` without `screens` has no purpose
       if (
         'initialRouteName' in config &&
@@ -695,10 +757,10 @@ const createNormalizedConfigs = (
         });
       }
 
-      Object.keys(nestedScreens).forEach((nestedConfig) => {
+      for (const nestedConfig in nestedScreens) {
         const result = createNormalizedConfigs(
           nestedConfig,
-          nestedScreens as Record<string, string | PathConfig<{}>>,
+          nestedScreens,
           initials,
           currentParts,
           [...parentScreens],
@@ -706,7 +768,7 @@ const createNormalizedConfigs = (
         );
 
         configs.push(...result);
-      });
+      }
     }
   }
 
@@ -723,44 +785,56 @@ const createConfigItem = (
   hasNestedScreens = false,
   shared = false
 ): RouteConfig => {
-  const regex = parts.length
-    ? new RegExp(
-        `^(${parts
-          .map((it, i) => {
-            if (it.param) {
-              const reg = it.regex || '[^/]+';
-
-              return `(((?<${PARAM_GROUP_PREFIX}${i}>${reg})\\/)${it.optional ? '?' : ''})`;
-            }
-
-            return `${it.segment === '*' ? '.*' : escape(it.segment)}\\/`;
-          })
-          .join('')})$`
-      )
-    : undefined;
-
-  const segments = parts.map((it) => it.segment);
-  const params = parts
-    .map((it, i) =>
-      it.param
-        ? {
-            index: i,
-            screen: it.screen,
-            name: it.param,
-          }
-        : null
-    )
-    .filter((it) => it != null);
+  let regex: RegExp | undefined;
+
+  const segments: string[] = [];
+  const params: RouteConfig['params'] = [];
+  const pathParamNames = new Set<string>();
+
+  if (parts.length) {
+    let regexString = '^(';
+    let index = 0;
+
+    for (const part of parts) {
+      segments.push(part.segment);
+
+      if (part.param) {
+        const reg = part.regex || '[^/]+';
+
+        regexString += `(((?<${PARAM_GROUP_PREFIX}${index}>${reg})\\/)${part.optional ? '?' : ''})`;
+        params.push({
+          index,
+          screen: part.screen,
+          name: part.param,
+        });
+
+        if (part.screen === screen) {
+          pathParamNames.add(part.param);
+        }
+      } else {
+        regexString += `${part.segment === '*' ? '.*' : escape(part.segment)}\\/`;
+      }
+
+      index++;
+    }
+
+    regexString += ')$';
+    regex = new RegExp(regexString);
+  }
+
+  const pattern = segments.join('/');
 
   return {
     screen,
     order: 0,
     regex,
+    pattern,
     segments,
     params,
     routeNames,
     parse,
     explicitParamNames: getExplicitParamNames(parse),
+    pathParamNames,
     hasNestedScreens,
     shared,
   };
@@ -979,19 +1053,10 @@ const createNestedStateObject = (
 
   focusedRoute.path = path.replace(/\/$/, '');
 
-  const pathParamNames = new Set(
-    routeConfig?.params
-      .filter(
-        (param): param is { screen: string; name: string; index: number } =>
-          param.screen === routeConfig.screen && typeof param.name === 'string'
-      )
-      .map((param) => param.name)
-  );
-
   const queryParams = parseQueryParams(
     path,
     routeConfig?.parse,
-    pathParamNames,
+    routeConfig?.pathParamNames,
     routeConfig?.explicitParamNames,
     routeConfig?.hasNestedScreens,
     focusedRoute.params
@@ -1028,7 +1093,9 @@ const parseQueryParams = (
   }
 
   if (parseConfig) {
-    for (const [name, parser] of Object.entries(parseConfig)) {
+    for (const name in parseConfig) {
+      const parser = parseConfig[name];
+
       if (!parser || pathParamNames.has(name)) {
         continue;
       }