@react-navigation/core 8.0.0-alpha.32 → 8.0.0-alpha.34

package/src/getPathFromState.tsx

@@ -1,7 +1,11 @@
 import type { NavigationState, PartialState } from '@react-navigation/routers';
 import queryString from 'query-string';
 
-import { getPatternParts, type PatternPart } from './getPatternParts';
+import {
+  combinePatternParts,
+  getPatternParts,
+  type PatternPart,
+} from './getPatternParts';
 import { getStateFromRouteParams } from './getStateFromRouteParams';
 import type { PathConfig, PathConfigMap } from './types';
 import { validatePathConfig } from './validatePathConfig';
@@ -228,16 +232,16 @@ export function getPathFromState<ParamList extends {}>(
           const value = params[key];
 
           if (value === undefined) {
-            let optional = false;
+            let canBeOmitted = false;
 
             for (const part of ownParts) {
-              if (part.param === key) {
-                optional = part.optional === true;
+              if (part.name === key) {
+                canBeOmitted = part.optional === true || part.repeat != null;
                 break;
               }
             }
 
-            if (optional) {
+            if (canBeOmitted) {
               continue;
             }
           }
@@ -252,12 +256,12 @@ export function getPathFromState<ParamList extends {}>(
         const claimedParams = new Set<string>();
 
         for (const part of ownParts) {
-          if (part.param && part.param in currentParams) {
-            const value = currentParams[part.param];
+          if (part.name && part.name in currentParams) {
+            const value = currentParams[part.name];
 
             if (value !== undefined) {
               partValues.set(part, value);
-              claimedParams.add(part.param);
+              claimedParams.add(part.name);
             }
           }
         }
@@ -283,7 +287,7 @@ export function getPathFromState<ParamList extends {}>(
       }
 
       for (const part of ownParts) {
-        if (part.param && !partValues.has(part)) {
+        if (part.name && !partValues.has(part)) {
           partValues.set(part, undefined);
         }
       }
@@ -326,7 +330,7 @@ export function getPathFromState<ParamList extends {}>(
         let index = 0;
 
         for (const part of parts) {
-          const { segment, param, optional } = part;
+          const { segment, name, optional, repeat } = part;
 
           if (index > 0) {
             path += '/';
@@ -343,7 +347,7 @@ export function getPathFromState<ParamList extends {}>(
           }
 
           // If the path has a pattern for a param, put the param in the path
-          if (param) {
+          if (name) {
             const value = partValues.get(part);
 
             if (value === undefined && optional) {
@@ -351,6 +355,42 @@ export function getPathFromState<ParamList extends {}>(
               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)
             path += encodePathParam(String(value));
@@ -397,8 +437,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
@@ -417,7 +462,10 @@ const createConfigItem = (
     const ownParts = getPatternParts(config);
 
     if (parentParts) {
-      return { parts: [...parentParts, ...ownParts], ownParts };
+      return {
+        parts: combinePatternParts(parentParts, ownParts),
+        ownParts,
+      };
     }
 
     return { parts: ownParts, ownParts };
@@ -434,7 +482,7 @@ const createConfigItem = (
   const ownParts = config.path ? getPatternParts(config.path) : [];
   const parts =
     config.exact !== true
-      ? [...(parentParts || []), ...ownParts]
+      ? combinePatternParts(parentParts || [], ownParts)
       : ownParts.length
         ? ownParts
         : undefined;

package/src/getPatternParts.tsx

@@ -1,8 +1,11 @@
+export type PatternPartRepeat = 'zero-or-more' | 'one-or-more';
+
 export type PatternPart = {
   segment: string;
-  param?: string;
-  regex?: string;
+  name?: string;
+  pattern?: string;
   optional?: boolean;
+  repeat?: PatternPartRepeat;
 };
 
 /**
@@ -15,6 +18,7 @@ export function getPatternParts(path: string): PatternPart[] {
 
   let isRegex = false;
   let isParam = false;
+  let hasRepeat = false;
   let isEscaped = false;
   let isInCharClass = false;
   let regexInnerParens = 0;
@@ -55,7 +59,7 @@ export function getPatternParts(path: string): PatternPart[] {
           // The ')' is part of the regex if we're already inside one
           regexInnerParens--;
         } else {
-          current.regex += char;
+          current.pattern += char;
           isRegex = false;
           isParam = false;
         }
@@ -65,7 +69,7 @@ export function getPatternParts(path: string): PatternPart[] {
         );
       }
     } else if (char === '?' && !isRegex) {
-      if (current.param) {
+      if (current.name) {
         isParam = false;
 
         current.optional = true;
@@ -74,6 +78,27 @@ export function getPatternParts(path: string): PatternPart[] {
           `Encountered '?' without preceding ':' in path: ${path}`
         );
       }
+    } else if (
+      current.name &&
+      !isRegex &&
+      (char === '*' || char === '+') &&
+      (path[i + 1] == null ||
+        path[i + 1] === '/' ||
+        path[i + 1] === '?' ||
+        path[i + 1] === '*' ||
+        path[i + 1] === '+')
+    ) {
+      if (
+        current.optional ||
+        (path[i + 1] !== undefined && path[i + 1] !== '/')
+      ) {
+        throw new Error(`Cannot combine path param modifiers in path: ${path}`);
+      }
+
+      isParam = false;
+
+      current.repeat = char === '*' ? 'zero-or-more' : 'one-or-more';
+      hasRepeat = true;
     } else if (char == null || (char === '/' && !isRegex)) {
       isParam = false;
 
@@ -84,12 +109,12 @@ export function getPatternParts(path: string): PatternPart[] {
         continue;
       }
 
-      if (current.param) {
-        current.param = current.param.replace(/^:/, '');
+      if (current.name) {
+        current.name = current.name.replace(/^:/, '');
       }
 
-      if (current.regex) {
-        current.regex = current.regex.replace(/^\(/, '').replace(/\)$/, '');
+      if (current.pattern) {
+        current.pattern = current.pattern.replace(/^\(/, '').replace(/\)$/, '');
       }
 
       parts.push(current);
@@ -102,8 +127,8 @@ export function getPatternParts(path: string): PatternPart[] {
     }
 
     if (isRegex) {
-      current.regex = current.regex || '';
-      current.regex += char;
+      current.pattern = current.pattern || '';
+      current.pattern += char;
 
       // Track escapes and character classes so parens inside them are not special
       if (isEscaped) {
@@ -118,8 +143,8 @@ export function getPatternParts(path: string): PatternPart[] {
     }
 
     if (isParam && !isRegex) {
-      current.param = current.param || '';
-      current.param += char;
+      current.name = current.name || '';
+      current.name += char;
     }
   }
 
@@ -127,7 +152,7 @@ export function getPatternParts(path: string): PatternPart[] {
     throw new Error(`Could not find closing ')' in path: ${path}`);
   }
 
-  const params = parts.map((part) => part.param).filter(Boolean);
+  const params = parts.map((part) => part.name).filter(Boolean);
 
   for (const [index, param] of params.entries()) {
     if (params.indexOf(param) !== index) {
@@ -135,13 +160,49 @@ export function getPatternParts(path: string): PatternPart[] {
     }
   }
 
+  if (hasRepeat) {
+    validateRepeatedParts(parts, path);
+  }
+
   return parts;
 }
 
+function validateRepeatedParts(parts: PatternPart[], path: string) {
+  let variablePart: PatternPart | undefined;
+
+  for (const part of parts) {
+    if (!part.name && part.segment !== '*') {
+      variablePart = undefined;
+      continue;
+    }
+
+    if (!part.repeat && !part.optional && part.segment !== '*') {
+      continue;
+    }
+
+    if (variablePart && (variablePart.repeat || part.repeat)) {
+      throw new Error(
+        `A repeated param must be separated from optional, repeated, or wildcard segments by a static segment: ${path}`
+      );
+    }
+
+    variablePart = part;
+  }
+}
+
 export function combinePatternParts<T extends PatternPart>(
   parentParts: T[],
   parts: T[],
   exact = false
 ): T[] {
-  return exact ? parts : [...parentParts, ...parts];
+  const combined = exact ? parts : [...parentParts, ...parts];
+
+  if (combined.some((part) => part.repeat)) {
+    validateRepeatedParts(
+      combined,
+      combined.map((part) => part.segment).join('/')
+    );
+  }
+
+  return combined;
 }