From 1518a2a070ea4cbdf6f61a87b2c2caac9e7ba3d1 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 21 Jun 2021 13:09:08 +0100
Subject: [PATCH] feat(pages): add catchall support (`[...id].vue`) (#254)

---
 examples/pages/pages/catchall/[...id].vue |  5 +++++
 packages/pages/src/utils.ts               | 19 +++++++++++++++----
 2 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 examples/pages/pages/catchall/[...id].vue

diff --git a/examples/pages/pages/catchall/[...id].vue b/examples/pages/pages/catchall/[...id].vue
new file mode 100644
index 0000000000..c4e5f199e6
--- /dev/null
+++ b/examples/pages/pages/catchall/[...id].vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    test-{{ $route.params.id }}
+  </div>
+</template>
diff --git a/packages/pages/src/utils.ts b/packages/pages/src/utils.ts
index 27a2c9625d..f33d9a3482 100644
--- a/packages/pages/src/utils.ts
+++ b/packages/pages/src/utils.ts
@@ -13,11 +13,13 @@ enum SegmentParserState {
   initial,
   static,
   dynamic,
+  catchall,
 }
 
 enum SegmentTokenType {
   static,
   dynamic,
+  catchall,
 }
 
 interface SegmentToken {
@@ -93,15 +95,17 @@ function getRoutePath (tokens: SegmentToken[]): string {
       path +
       (token.type === SegmentTokenType.dynamic
         ? `:${token.value}`
-        : encodePath(token.value))
+        : token.type === SegmentTokenType.catchall
+          ? `:${token.value}(.*)*`
+          : encodePath(token.value))
     )
   }, '/')
 }
 
-const PARAM_CHAR_RE = /[\w\d_]/
+const PARAM_CHAR_RE = /[\w\d_.]/
 
 function parseSegment (segment: string) {
-  let state = SegmentParserState.initial
+  let state: SegmentParserState = SegmentParserState.initial
   let i = 0
 
   let buffer = ''
@@ -119,7 +123,9 @@ function parseSegment (segment: string) {
       type:
         state === SegmentParserState.static
           ? SegmentTokenType.static
-          : SegmentTokenType.dynamic,
+          : state === SegmentParserState.dynamic
+            ? SegmentTokenType.dynamic
+            : SegmentTokenType.catchall,
       value: buffer
     })
 
@@ -149,7 +155,12 @@ function parseSegment (segment: string) {
         }
         break
 
+      case SegmentParserState.catchall:
       case SegmentParserState.dynamic:
+        if (buffer === '...') {
+          buffer = ''
+          state = SegmentParserState.catchall
+        }
         if (c === ']') {
           consumeBuffer()
           state = SegmentParserState.initial