@react-navigation/core 7.1.2 → 7.2.0

package/src/getStateFromPath.tsx

@@ -6,7 +6,10 @@ import type {
 import escape from 'escape-string-regexp';
 import * as queryString from 'query-string';
 
+import { arrayStartsWith } from './arrayStartsWith';
 import { findFocusedRoute } from './findFocusedRoute';
+import { getPatternParts, type PatternPart } from './getPatternParts';
+import { isArrayEqual } from './isArrayEqual';
 import type { PathConfigMap } from './types';
 import { validatePathConfig } from './validatePathConfig';
 
@@ -16,13 +19,13 @@ type Options<ParamList extends {}> = {
   screens: PathConfigMap<ParamList>;
 };
 
-type ParseConfig = Record<string, (value: string) => any>;
+type ParseConfig = Record<string, (value: string) => unknown>;
 
 type RouteConfig = {
   screen: string;
   regex?: RegExp;
-  path: string;
-  pattern: string;
+  segments: string[];
+  params: { screen: string; name?: string; index: number }[];
   routeNames: string[];
   parse?: ParseConfig;
 };
@@ -39,7 +42,7 @@ type ResultState = PartialState<NavigationState> & {
 type ParsedRoute = {
   name: string;
   path?: string;
-  params?: Record<string, any> | undefined;
+  params?: Record<string, unknown> | undefined;
 };
 
 type ConfigResources = {
@@ -121,14 +124,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.path === '' &&
-        config.routeNames.every(
-          // Make sure that none of the parent configs have a non-empty path defined
-          (name) => !configs.find((c) => c.screen === name)?.path
-        )
-    );
+    const match = configs.find((config) => config.segments.join('/') === '');
 
     if (match) {
       return createNestedStateObject(
@@ -231,8 +227,9 @@ function getNormalizedConfigs(
         createNormalizedConfigs(
           key,
           screens as PathConfigMap<object>,
-          [],
           initialRoutes,
+          [],
+          [],
           []
         )
       )
@@ -244,56 +241,77 @@ function getNormalizedConfigs(
 
       // 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 (a.pattern === b.pattern) {
+      if (isArrayEqual(a.segments, b.segments)) {
         return b.routeNames.join('>').localeCompare(a.routeNames.join('>'));
       }
 
       // If one of the patterns starts with the other, it's more exhaustive
       // So move it up
-      if (a.pattern.startsWith(b.pattern)) {
+      if (arrayStartsWith(a.segments, b.segments)) {
         return -1;
       }
 
-      if (b.pattern.startsWith(a.pattern)) {
+      if (arrayStartsWith(b.segments, a.segments)) {
         return 1;
       }
 
-      const aParts = a.pattern.split('/');
-      const bParts = b.pattern.split('/');
-
-      for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
-        // if b is longer, b get higher priority
-        if (aParts[i] == null) {
+      for (let i = 0; i < Math.max(a.segments.length, b.segments.length); i++) {
+        // if b is longer, b gets higher priority
+        if (a.segments[i] == null) {
           return 1;
         }
-        // if a is longer, a get higher priority
-        if (bParts[i] == null) {
+
+        // if a is longer, a gets higher priority
+        if (b.segments[i] == null) {
           return -1;
         }
-        const aWildCard = aParts[i] === '*' || aParts[i].startsWith(':');
-        const bWildCard = bParts[i] === '*' || bParts[i].startsWith(':');
-        // if both are wildcard we compare next component
-        if (aWildCard && bWildCard) {
+
+        const aWildCard =
+          a.segments[i] === '*' || a.segments[i].startsWith(':');
+        const bWildCard =
+          b.segments[i] === '*' || b.segments[i].startsWith(':');
+        const aRegex =
+          a.segments[i].startsWith(':') && a.segments[i].includes('(');
+        const bRegex =
+          b.segments[i].startsWith(':') && b.segments[i].includes('(');
+
+        // if both are wildcard & regex we compare next component
+        if (aWildCard && bWildCard && aRegex && bRegex) {
           continue;
         }
-        // if only a is wild card, b get higher priority
-        if (aWildCard) {
+
+        // 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;
         }
-        // if only b is wild card, a get higher priority
-        if (bWildCard) {
+
+        // if only a is wildcard, b gets higher priority
+        if (aWildCard && !bWildCard) {
+          return 1;
+        }
+
+        // if only b is wildcard, a gets higher priority
+        if (bWildCard && !aWildCard) {
           return -1;
         }
       }
-      return bParts.length - aParts.length;
+
+      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) => {
-    if (acc[config.pattern]) {
-      const a = acc[config.pattern].routeNames;
+    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
@@ -306,7 +324,7 @@ function checkForDuplicatedConfigs(configs: RouteConfig[]) {
       if (!intersects) {
         throw new Error(
           `Found conflicting screens with the same pattern. The pattern '${
-            config.pattern
+            pattern
           }' resolves to both '${a.join(' > ')}' and '${b.join(
             ' > '
           )}'. Patterns must be unique and cannot resolve to more than one screen.`
@@ -315,7 +333,7 @@ function checkForDuplicatedConfigs(configs: RouteConfig[]) {
     }
 
     return Object.assign(acc, {
-      [config.pattern]: config,
+      [pattern]: config,
     });
   }, {});
 }
@@ -328,12 +346,6 @@ function getConfigsWithRegexes(configs: RouteConfig[]) {
   }));
 }
 
-const joinPaths = (...paths: string[]): string =>
-  ([] as string[])
-    .concat(...paths.map((p) => p.split('/')))
-    .filter(Boolean)
-    .join('/');
-
 const matchAgainstConfigs = (remaining: string, configs: RouteConfig[]) => {
   let routes: ParsedRoute[] | undefined;
   let remainingPath = remaining;
@@ -348,86 +360,55 @@ const matchAgainstConfigs = (remaining: string, configs: RouteConfig[]) => {
 
     // If our regex matches, we need to extract params from the path
     if (match) {
-      const matchResult = config.pattern?.split('/').reduce<{
-        pos: number; // Position of the current path param segment in the path (e.g in pattern `a/:b/:c`, `:a` is 0 and `:b` is 1)
-        matchedParams: Record<string, Record<string, string>>; // The extracted params
-      }>(
-        (acc, p, index) => {
-          if (!p.startsWith(':')) {
-            return acc;
-          }
-
-          // Path parameter so increment position for the segment
-          acc.pos += 1;
-
-          const decodedParamSegment = decodeURIComponent(
-            // The param segments appear every second item starting from 2 in the regex match result
-            match![(acc.pos + 1) * 2]
-              // Remove trailing slash
-              .replace(/\/$/, '')
-          );
-
-          Object.assign(acc.matchedParams, {
-            [p]: Object.assign(acc.matchedParams[p] || {}, {
-              [index]: decodedParamSegment,
-            }),
-          });
-
-          return acc;
-        },
-        { pos: -1, matchedParams: {} }
-      );
-
-      const matchedParams = matchResult.matchedParams || {};
-
-      routes = config.routeNames.map((name) => {
+      routes = config.routeNames.map((routeName) => {
         const routeConfig = configs.find((c) => {
           // Check matching name AND pattern in case same screen is used at different levels in config
-          return c.screen === name && config.pattern.startsWith(c.pattern);
+          return (
+            c.screen === routeName &&
+            arrayStartsWith(config.segments, c.segments)
+          );
         });
 
-        // Normalize pattern to remove any leading, trailing slashes, duplicate slashes etc.
-        const normalizedPath = routeConfig?.path
-          .split('/')
-          .filter(Boolean)
-          .join('/');
-
-        // Get the number of segments in the initial pattern
-        const numInitialSegments = routeConfig?.pattern
-          // Extract the prefix from the pattern by removing the ending path pattern (e.g pattern=`a/b/c/d` and normalizedPath=`c/d` becomes `a/b`)
-          .replace(new RegExp(`${escape(normalizedPath!)}$`), '')
-          ?.split('/').length;
-
-        const params = normalizedPath
-          ?.split('/')
-          .reduce<Record<string, unknown>>((acc, p, index) => {
-            if (!p.startsWith(':')) {
-              return acc;
-            }
-
-            // Get the real index of the path parameter in the matched path
-            // by offsetting by the number of segments in the initial pattern
-            const offset = numInitialSegments ? numInitialSegments - 1 : 0;
-            const value = matchedParams[p]?.[index + offset];
-
-            if (value) {
-              const key = p.replace(/^:/, '').replace(/\?$/, '');
-              acc[key] = routeConfig?.parse?.[key]
-                ? routeConfig.parse[key](value)
-                : value;
-            }
-
-            return acc;
-          }, {});
+        const params =
+          routeConfig && match.groups
+            ? Object.fromEntries(
+                Object.entries(match.groups)
+                  .map(([key, value]) => {
+                    const index = Number(key.replace('param_', ''));
+                    const param = routeConfig.params.find(
+                      (it) => it.index === index
+                    );
+
+                    if (param?.screen === routeName && param?.name) {
+                      return [param.name, value];
+                    }
+
+                    return null;
+                  })
+                  .filter((it) => it != null)
+                  .map(([key, value]) => {
+                    if (value == null) {
+                      return [key, undefined];
+                    }
+
+                    const decoded = decodeURIComponent(value);
+                    const parsed = routeConfig.parse?.[key]
+                      ? routeConfig.parse[key](decoded)
+                      : decoded;
+
+                    return [key, parsed];
+                  })
+              )
+            : undefined;
 
         if (params && Object.keys(params).length) {
-          return { name, params };
+          return { name: routeName, params };
         }
 
-        return { name };
+        return { name: routeName };
       });
 
-      remainingPath = remainingPath.replace(match[1], '');
+      remainingPath = remainingPath.replace(match[0], '');
 
       break;
     }
@@ -439,10 +420,10 @@ const matchAgainstConfigs = (remaining: string, configs: RouteConfig[]) => {
 const createNormalizedConfigs = (
   screen: string,
   routeConfig: PathConfigMap<object>,
-  routeNames: string[] = [],
   initials: InitialRouteConfig[],
+  paths: { screen: string; path: string }[],
   parentScreens: string[],
-  parentPattern?: string
+  routeNames: string[]
 ): RouteConfig[] => {
   const configs: RouteConfig[] = [];
 
@@ -454,13 +435,9 @@ const createNormalizedConfigs = (
   const config = routeConfig[screen];
 
   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 pattern = parentPattern ? joinPaths(parentPattern, config) : config;
-
-    configs.push(createConfigItem(screen, routeNames, pattern, config));
+    paths.push({ screen, path: config });
+    configs.push(createConfigItem(screen, [...routeNames], [...paths]));
   } else if (typeof config === 'object') {
-    let pattern: string | undefined;
-
     // 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
@@ -471,19 +448,15 @@ const createNormalizedConfigs = (
         );
       }
 
-      pattern =
-        config.exact !== true
-          ? joinPaths(parentPattern || '', config.path || '')
-          : config.path || '';
+      if (config.exact) {
+        // If it's an exact path, we don't need to keep track of the parent screens
+        // So we can clear it
+        paths.length = 0;
+      }
 
+      paths.push({ screen, path: config.path });
       configs.push(
-        createConfigItem(
-          screen,
-          routeNames,
-          pattern!,
-          config.path,
-          config.parse
-        )
+        createConfigItem(screen, [...routeNames], [...paths], config.parse)
       );
     }
 
@@ -500,10 +473,10 @@ const createNormalizedConfigs = (
         const result = createNormalizedConfigs(
           nestedConfig,
           config.screens as PathConfigMap<object>,
-          routeNames,
           initials,
+          [...paths],
           [...parentScreens],
-          pattern ?? parentPattern
+          routeNames
         );
 
         configs.push(...result);
@@ -519,35 +492,51 @@ const createNormalizedConfigs = (
 const createConfigItem = (
   screen: string,
   routeNames: string[],
-  pattern: string,
-  path: string,
+  paths: { screen: string; path: string }[],
   parse?: ParseConfig
 ): RouteConfig => {
-  // Normalize pattern to remove any leading, trailing slashes, duplicate slashes etc.
-  pattern = pattern.split('/').filter(Boolean).join('/');
+  const parts: (PatternPart & { screen: string })[] = [];
+
+  // Parse the path string into parts for easier matching
+  for (const { screen, path } of paths) {
+    parts.push(...getPatternParts(path).map((part) => ({ ...part, screen })));
+  }
 
-  const regex = pattern
+  const regex = parts.length
     ? new RegExp(
-        `^(${pattern
-          .split('/')
-          .map((it) => {
-            if (it.startsWith(':')) {
-              return `(([^/]+\\/)${it.endsWith('?') ? '?' : ''})`;
+        `^(${parts
+          .map((it, i) => {
+            if (it.param) {
+              const reg = it.regex || '[^/]+';
+
+              return `(((?<param_${i}>${reg})\\/)${it.optional ? '?' : ''})`;
             }
 
-            return `${it === '*' ? '.*' : escape(it)}\\/`;
+            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);
+
   return {
     screen,
     regex,
-    pattern,
-    path,
-    // The routeNames array is mutated, so copy it to keep the current state
-    routeNames: [...routeNames],
+    segments,
+    params,
+    routeNames,
     parse,
   };
 };
@@ -666,7 +655,7 @@ const createNestedStateObject = (
   }
 
   route = findFocusedRoute(state) as ParsedRoute;
-  route.path = path;
+  route.path = path.replace(/\/$/, '');
 
   const params = parseQueryParams(
     path,
@@ -682,10 +671,10 @@ const createNestedStateObject = (
 
 const parseQueryParams = (
   path: string,
-  parseConfig?: Record<string, (value: string) => any>
+  parseConfig?: Record<string, (value: string) => unknown>
 ) => {
   const query = path.split('?')[1];
-  const params = queryString.parse(query);
+  const params: Record<string, unknown> = queryString.parse(query);
 
   if (parseConfig) {
     Object.keys(params).forEach((name) => {
@@ -693,7 +682,7 @@ const parseQueryParams = (
         Object.hasOwnProperty.call(parseConfig, name) &&
         typeof params[name] === 'string'
       ) {
-        params[name] = parseConfig[name](params[name] as string);
+        params[name] = parseConfig[name](params[name]);
       }
     });
   }