feat: Add better support for catch-all segments (#14)

* add better support for catch-all segments

* add comment to document regex

* fix ci script to use `bun`

.changeset/funny-geckos-destroy.md

@@ -0,0 +1,5 @@
+---
+"next-safe-navigation": minor
+---
+
+Add better support for Catch-all Segments

.github/workflows/ci.yml

@@ -92,7 +92,7 @@ jobs:
  run: bun install --frozen-lockfile
 
  - name: 🧪 Run tests
- run: pnpm run test:ci
+ run: bun run test:ci
 
  - name: ⬆️ Upload coverage reports to Codecov
  uses: codecov/codecov-action@v3

README.md

@@ -58,6 +58,18 @@ export const { routes, useSafeParams, useSafeSearchParams } = createNavigationCo
  invoiceId: z.string(),
  }),
  }),
+ shop: defineRoute('/support/[...tickets]', {
+ params: z.object({
+ tickets: z.array(z.string()),
+ }),
+ }),
+ shop: defineRoute('/shop/[[...slug]]', {
+ params: z.object({
+ // ⚠️ Remember to always set your optional catch-all segments
+ // as optional values, or add a default value to them
+ slug: z.array(z.string()).optional(),
+ }),
+ }),
  }),
 );
 ```

src/make-route-builder.spec.ts

@@ -161,6 +161,50 @@ describe('makeRouteBuilder', () => {
  expect(builder({ orgId: 'org_789' })).toBe('/organizations/org_789');
  });
  });
+
+ describe('when path has catch-all params', () => {
+ it('creates a builder that replaces the path param with its value', () => {
+ const builder = makeRouteBuilder('/[...catch_all]', {
+ params: z.object({
+ catch_all: z.array(z.string()),
+ }),
+ });
+
+ // @ts-expect-error no searchParams validation was defined
+ builder({ catch_all: ['channels'], search: {} });
+
+ expect(builder({ catch_all: ['channels', 'channel_123'] })).toBe(
+ '/channels/channel_123',
+ );
+
+ expect(builder.getSchemas()).toEqual({
+ params: expect.any(Object),
+ search: undefined,
+ });
+ });
+ });
+
+ describe('when path has optional catch-all params', () => {
+ it('creates a builder that replaces the path param with its value', () => {
+ const builder = makeRouteBuilder('/[[...catch_all]]', {
+ params: z.object({
+ catch_all: z.array(z.string()).default([]),
+ }),
+ });
+
+ // @ts-expect-error no searchParams validation was defined
+ builder({ catch_all: ['channels'], search: {} });
+
+ expect(builder({ catch_all: ['channels', 'channel_123'] })).toBe(
+ '/channels/channel_123',
+ );
+
+ expect(builder.getSchemas()).toEqual({
+ params: expect.any(Object),
+ search: undefined,
+ });
+ });
+ });
  });
 
  describe('for a path with route params and searchParams', () => {

src/make-route-builder.ts

@@ -6,7 +6,11 @@ import type { ExcludeAny } from './types';
 type PathBlueprint = `/${string}`;
 
 type ExtractPathParams<T extends string> =
- T extends `${string}[${infer Param}]${infer Rest}` ?
+ T extends `${string}[[...${infer Param}]]${infer Rest}` ?
+ Param | ExtractPathParams<Rest>
+ : T extends `${string}[...${infer Param}]${infer Rest}` ?
+ Param | ExtractPathParams<Rest>
+ : T extends `${string}[${infer Param}]${infer Rest}` ?
  Param | ExtractPathParams<Rest>
  : never;
 
@@ -71,7 +75,21 @@ type RouteBuilderResult<
  RouteBuilder<Params, Search>
  : never;
 
-const PATH_PARAM_REGEX = /\[([^[\]]+)]/g;
+const PATH_PARAM_REGEX = /\[{1,2}([^[\]]+)]{1,2}/g;
+
+/**
+ * Remove param notation from string to only get the param name when it is a catch-all segment
+ *
+ * @example
+ * ```ts
+ * '/shop/[[...slug]]'.replace(PATH_PARAM_REGEX, (match, param) => {
+ * // ^? '[[...slug]]'
+ * const [sanitizedParam] = REMOVE_PARAM_NOTATION_REGEX.exec(param)
+ * // ^? 'slug'
+ * })
+ * ```
+ */
+const REMOVE_PARAM_NOTATION_REGEX = /[^[.].+[^\]]/;
 
 // @ts-expect-error overload signature does match the implementation,
 // the compiler complains about EnsurePathWithNoParams, but it is fine
@@ -107,7 +125,7 @@ export function makeRouteBuilder(
  path = `/${path}`;
  }
 
- const hasParamsInPath = /\[\w+\]/g.test(path);
+ const hasParamsInPath = PATH_PARAM_REGEX.test(path);
  const isMissingParamsValidation = hasParamsInPath && !schemas?.params;
 
  if (isMissingParamsValidation) {
@@ -117,10 +135,17 @@ export function makeRouteBuilder(
  const routeBuilder: RouteBuilder<any, any> = (options) => {
  const { search = {}, ...params } = options ?? {};
 
- const basePath = path.replace(
- PATH_PARAM_REGEX,
- (match, param) => params[param] ?? match,
- );
+ const basePath = path.replace(PATH_PARAM_REGEX, (match, param: string) => {
+ const sanitizedParam = REMOVE_PARAM_NOTATION_REGEX.exec(param)?.[0];
+
+ const value = params[sanitizedParam ?? param];
+
+ if (Array.isArray(value)) {
+ return value.join('/');
+ }
+
+ return value ?? match;
+ });
 
  const urlSearchParams = convertObjectToURLSearchParams(search);