@react-navigation/core 8.0.0-alpha.22 → 8.0.0-alpha.24

package/src/getStateFromPath.tsx

@@ -37,8 +37,9 @@ 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;
@@ -57,7 +58,6 @@ type ResultState = PartialState<NavigationState> & {
 
 type ParsedRoute = {
   name: string;
-  path?: string | undefined;
   params?: Record<string, unknown> | undefined;
 };
 
@@ -88,9 +88,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 +169,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);
@@ -224,7 +230,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);
@@ -317,7 +323,7 @@ function prepareConfigResources(options?: Options<{}>) {
 
   for (const c of configs) {
     (configsByScreen[c.screen] ??= []).push(c);
-    (configsByPattern[c.segments.join('/')] ??= []).push(c);
+    (configsByPattern[c.pattern] ??= []).push(c);
   }
 
   return {
@@ -346,105 +352,117 @@ 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;
+      }
+
+      // 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 a.segments.length - b.segments.length;
+  });
 }
 
 function checkForDuplicatedConfigs(configs: RouteConfig[]) {
   // Check for duplicate patterns in the config
-  configs.reduce<Record<string, RouteConfig>>((acc, config) => {
-    const pattern = config.segments.join('/');
+  const patterns: Record<string, RouteConfig> = {};
 
-    if (acc[pattern]) {
-      const a = acc[pattern].routeNames;
+  for (const config of configs) {
+    const pattern = config.pattern;
+    const existing = patterns[pattern];
+
+    if (existing) {
+      const a = existing.routeNames;
       const b = config.routeNames;
 
       // It's not a problem if the path string omitted from a inner most screen
@@ -454,7 +472,7 @@ function checkForDuplicatedConfigs(configs: RouteConfig[]) {
           ? b.every((it, i) => a[i] === it)
           : a.every((it, i) => b[i] === it);
 
-      if (!intersects && (!acc[pattern].shared || !config.shared)) {
+      if (!intersects && (!existing.shared || !config.shared)) {
         throw new Error(
           `Found conflicting screens with the same pattern. The pattern '${
             pattern
@@ -465,10 +483,8 @@ function checkForDuplicatedConfigs(configs: RouteConfig[]) {
       }
     }
 
-    return Object.assign(acc, {
-      [pattern]: config,
-    });
-  }, {});
+    patterns[pattern] = config;
+  }
 }
 
 const matchAgainstConfig = (
@@ -500,20 +516,23 @@ const matchAgainstConfig = (
     );
 
     let params: Record<string, unknown> | undefined;
+    let hasParams = false;
 
     if (routeConfig && match.groups) {
-      const paramEntries: [string, unknown][] = [];
+      params = {};
 
-      for (const [key, value] of Object.entries(match.groups)) {
+      for (const key in match.groups) {
+        const value = match.groups[key];
         const index = Number(key.replace(PARAM_GROUP_PREFIX, ''));
         const param = routeConfig.params.find((it) => it.index === index);
 
-        if (param?.screen !== routeName || !param.name) {
+        if (!param || param.screen !== routeName) {
           continue;
         }
 
         if (value == null) {
-          paramEntries.push([param.name, undefined]);
+          params[param.name] = undefined;
+          hasParams = true;
           continue;
         }
 
@@ -528,7 +547,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 +562,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 +580,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 +623,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 +704,7 @@ const createNormalizedConfigs = (
       );
     }
 
-    if (hasNestedScreens) {
+    if (nestedScreens) {
       // property `initialRouteName` without `screens` has no purpose
       if (
         'initialRouteName' in config &&
@@ -695,10 +716,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 +727,7 @@ const createNormalizedConfigs = (
         );
 
         configs.push(...result);
-      });
+      }
     }
   }
 
@@ -723,39 +744,45 @@ 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'] = [];
+
+  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,
+        });
+      } 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,
@@ -981,10 +1008,7 @@ const createNestedStateObject = (
 
   const pathParamNames = new Set(
     routeConfig?.params
-      .filter(
-        (param): param is { screen: string; name: string; index: number } =>
-          param.screen === routeConfig.screen && typeof param.name === 'string'
-      )
+      .filter((param) => param.screen === routeConfig.screen)
       .map((param) => param.name)
   );
 
@@ -1028,7 +1052,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;
       }

package/src/index.tsx

@@ -47,6 +47,7 @@ export type {
   EventMapBase,
   EventMapCore,
   GenericNavigation,
+  NavigationContainerEventMap,
   NavigationContainerProps,
   NavigationContainerRef,
   NavigationContainerRefWithCurrent,