Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix prefetch and some other issues with optional catch all #14400

Merged
merged 2 commits into from
Jun 22, 2020
Merged

Fix prefetch and some other issues with optional catch all #14400

merged 2 commits into from
Jun 22, 2020

Conversation

Janpot
Copy link
Contributor

@Janpot Janpot commented Jun 21, 2020 •
edited
Loading

Fix #14290 and a couple other issues around optional catch-all that popped up after writing these tests

Closes #14344

@Janpot Janpot changed the title Fix some issues with optional catch all Fix prefetch and some other issues with optional catch all Jun 21, 2020
@ijjk
Copy link
Member

ijjk commented Jun 21, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
buildDuration 11.9s 11.7s -163ms
nodeModulesSize 67 MB 67 MB ⚠️ +167 B
Page Load Tests Overall increase ✓
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.099 1.949 -0.15
/ avg req/sec 1190.86 1282.6 ⚠️ +91.74
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.249 1.172 -0.08
/error-in-render avg req/sec 2001.27 2132.56 ⚠️ +131.29
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
main-HASH.js gzip 6.51 kB 6.54 kB ⚠️ +24 B
webpack-HASH.js gzip 746 B 746 B ✓
19b7e98f51cc..75a9.js gzip 10.5 kB 10.6 kB ⚠️ +29 B
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 56.9 kB 57 kB ⚠️ +53 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
main-HASH.module.js gzip 5.6 kB 5.62 kB ⚠️ +22 B
webpack-HASH..dule.js gzip 746 B 746 B ✓
19b7e98f51cc..dule.js gzip 6.92 kB 6.94 kB ⚠️ +22 B
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.4 kB 52.5 kB ⚠️ +44 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
_buildManifest.js gzip 267 B 267 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 539 B 539 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
index.html gzip 954 B 954 B ✓
link.html gzip 959 B 959 B ✓
withRouter.html gzip 947 B 946 B -1 B
Overall change 2.86 kB 2.86 kB -1 B

Diffs

Diff for 19b7e98f51cc..edb6832d1.js 
@@ -521,6 +521,27 @@
         return str.replace(/[|\\{}()[\]^$+*?.-]/g, "\\$&");
       }
 
+      function parseParameter(param) {
+        var optional = /^\\\[.*\\\]$/.test(param);
+
+        if (optional) {
+          param = param.slice(2, -2);
+        }
+
+        var repeat = /^(\\\.){3}/.test(param);
+
+        if (repeat) {
+          param = param.slice(6);
+        } // Un-escape key
+
+        var key = param.replace(/\\([|\\{}()[\]^$+*?.-])/g, "$1");
+        return {
+          key: key,
+          repeat: repeat,
+          optional: optional
+        };
+      }
+
       function getRouteRegex(normalizedRoute) {
         // Escape all characters that could be considered RegEx
         var escapedRoute = escapeRegex(
@@ -531,31 +552,17 @@
         var parameterizedRoute = escapedRoute.replace(
           /\/\\\[([^/]+?)\\\](?=\/|$)/g,
           function(_, $1) {
-            var isOptional = /^\\\[.*\\\]$/.test($1);
-
-            if (isOptional) {
-              $1 = $1.slice(2, -2);
-            }
-
-            var isCatchAll = /^(\\\.){3}/.test($1);
-
-            if (isCatchAll) {
-              $1 = $1.slice(6);
-            }
+            var _parseParameter = parseParameter($1),
+              key = _parseParameter.key,
+              optional = _parseParameter.optional,
+              repeat = _parseParameter.repeat;
 
-            groups[
-              $1 // Un-escape key
-                .replace(/\\([|\\{}()[\]^$+*?.-])/g, "$1") // eslint-disable-next-line no-sequences
-            ] = {
+            groups[key] = {
               pos: groupIndex++,
-              repeat: isCatchAll,
-              optional: isOptional
+              repeat: repeat,
+              optional: optional
             };
-            return isCatchAll
-              ? isOptional
-                ? "(?:/(.+?))?"
-                : "/(.+?)"
-              : "/([^/]+?)";
+            return repeat ? (optional ? "(?:/(.+?))?" : "/(.+?)") : "/([^/]+?)";
           }
         );
         var namedParameterizedRoute; // dead code eliminate for browser since it's only needed
Diff for 19b7e98f51cc..a9.module.js 
@@ -443,6 +443,27 @@
         return str.replace(/[|\\{}()[\]^$+*?.-]/g, "\\$&");
       }
 
+      function parseParameter(param) {
+        var optional = /^\\\[.*\\\]$/.test(param);
+
+        if (optional) {
+          param = param.slice(2, -2);
+        }
+
+        var repeat = /^(\\\.){3}/.test(param);
+
+        if (repeat) {
+          param = param.slice(6);
+        } // Un-escape key
+
+        var key = param.replace(/\\([|\\{}()[\]^$+*?.-])/g, "$1");
+        return {
+          key,
+          repeat,
+          optional
+        };
+      }
+
       function getRouteRegex(normalizedRoute) {
         // Escape all characters that could be considered RegEx
         var escapedRoute = escapeRegex(
@@ -453,31 +474,13 @@
         var parameterizedRoute = escapedRoute.replace(
           /\/\\\[([^/]+?)\\\](?=\/|$)/g,
           (_, $1) => {
-            var isOptional = /^\\\[.*\\\]$/.test($1);
-
-            if (isOptional) {
-              $1 = $1.slice(2, -2);
-            }
-
-            var isCatchAll = /^(\\\.){3}/.test($1);
-
-            if (isCatchAll) {
-              $1 = $1.slice(6);
-            }
-
-            groups[
-              $1 // Un-escape key
-                .replace(/\\([|\\{}()[\]^$+*?.-])/g, "$1") // eslint-disable-next-line no-sequences
-            ] = {
+            var { key, optional, repeat } = parseParameter($1);
+            groups[key] = {
               pos: groupIndex++,
-              repeat: isCatchAll,
-              optional: isOptional
+              repeat,
+              optional
             };
-            return isCatchAll
-              ? isOptional
-                ? "(?:/(.+?))?"
-                : "/(.+?)"
-              : "/([^/]+?)";
+            return repeat ? (optional ? "(?:/(.+?))?" : "/(.+?)") : "/([^/]+?)";
           }
         );
         var namedParameterizedRoute; // dead code eliminate for browser since it's only needed
Diff for main-HASH.js 
@@ -1610,14 +1610,24 @@
                 if (
                   !Object.keys(dynamicGroups).every(function(param) {
                     var value = dynamicMatches[param];
-                    var repeat = dynamicGroups[param].repeat; // support single-level catch-all
+                    var _dynamicGroups$param = dynamicGroups[param],
+                      repeat = _dynamicGroups$param.repeat,
+                      optional = _dynamicGroups$param.optional; // support single-level catch-all
                     // TODO: more robust handling for user-error (passing `/`)
 
                     if (repeat && !Array.isArray(value)) value = [value];
+                    var replaced = "["
+                      .concat(repeat ? "..." : "")
+                      .concat(param, "]");
+
+                    if (optional) {
+                      replaced = "[".concat(replaced, "]");
+                    }
+
                     return (
                       param in dynamicMatches && // Interpolate group into data URL if present
                       (interpolatedRoute = interpolatedRoute.replace(
-                        "[".concat(repeat ? "..." : "").concat(param, "]"),
+                        replaced,
                         repeat
                           ? value.map(encodeURIComponent).join("/")
                           : encodeURIComponent(value)
Diff for main-HASH.module.js 
@@ -1228,14 +1228,22 @@
             if (
               !Object.keys(dynamicGroups).every(param => {
                 var value = dynamicMatches[param];
-                var repeat = dynamicGroups[param].repeat; // support single-level catch-all
+                var { repeat, optional } = dynamicGroups[param]; // support single-level catch-all
                 // TODO: more robust handling for user-error (passing `/`)
 
                 if (repeat && !Array.isArray(value)) value = [value];
+                var replaced = "["
+                  .concat(repeat ? "..." : "")
+                  .concat(param, "]");
+
+                if (optional) {
+                  replaced = "[".concat(replaced, "]");
+                }
+
                 return (
                   param in dynamicMatches && // Interpolate group into data URL if present
                   (interpolatedRoute = interpolatedRoute.replace(
-                    "[".concat(repeat ? "..." : "").concat(param, "]"),
+                    replaced,
                     repeat
                       ? value.map(encodeURIComponent).join("/")
                       : encodeURIComponent(value)
Diff for index.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-5f78243a616295ba5ac1.module.js"
+      href="/_next/static/runtime/main-1790b86f3de419a1eff2.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6b23cf48f915c17ee2a9.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.fe4bf1a99e86eb3bd7b0.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/runtime/polyfills-b9d354b83d10fbe21b38.js"
     ></script>
     <script
-      src="/_next/static/runtime/main-00c3bae2c9fcf7e20c0a.js"
+      src="/_next/static/runtime/main-41faedbd1599fb205d54.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/runtime/main-5f78243a616295ba5ac1.module.js"
+      src="/_next/static/runtime/main-1790b86f3de419a1eff2.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.23a257d02f3edb6832d1.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.c55587ea6d828e4bf6b8.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6b23cf48f915c17ee2a9.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.fe4bf1a99e86eb3bd7b0.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-5f78243a616295ba5ac1.module.js"
+      href="/_next/static/runtime/main-1790b86f3de419a1eff2.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6b23cf48f915c17ee2a9.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.fe4bf1a99e86eb3bd7b0.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -86,13 +86,13 @@
       src="/_next/static/runtime/polyfills-b9d354b83d10fbe21b38.js"
     ></script>
     <script
-      src="/_next/static/runtime/main-00c3bae2c9fcf7e20c0a.js"
+      src="/_next/static/runtime/main-41faedbd1599fb205d54.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/runtime/main-5f78243a616295ba5ac1.module.js"
+      src="/_next/static/runtime/main-1790b86f3de419a1eff2.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.23a257d02f3edb6832d1.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.c55587ea6d828e4bf6b8.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6b23cf48f915c17ee2a9.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.fe4bf1a99e86eb3bd7b0.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-5f78243a616295ba5ac1.module.js"
+      href="/_next/static/runtime/main-1790b86f3de419a1eff2.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6b23cf48f915c17ee2a9.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.fe4bf1a99e86eb3bd7b0.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/runtime/polyfills-b9d354b83d10fbe21b38.js"
     ></script>
     <script
-      src="/_next/static/runtime/main-00c3bae2c9fcf7e20c0a.js"
+      src="/_next/static/runtime/main-41faedbd1599fb205d54.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/runtime/main-5f78243a616295ba5ac1.module.js"
+      src="/_next/static/runtime/main-1790b86f3de419a1eff2.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.23a257d02f3edb6832d1.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.c55587ea6d828e4bf6b8.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6b23cf48f915c17ee2a9.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.fe4bf1a99e86eb3bd7b0.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
buildDuration 13s 12.8s -297ms
nodeModulesSize 67 MB 67 MB ⚠️ +167 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
main-HASH.js gzip 6.51 kB 6.54 kB ⚠️ +24 B
webpack-HASH.js gzip 746 B 746 B ✓
19b7e98f51cc..75a9.js gzip 10.5 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..33d5.js gzip N/A 10.6 kB N/A
Overall change 56.9 kB 57 kB ⚠️ +53 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
main-HASH.module.js gzip 5.6 kB 5.62 kB ⚠️ +22 B
webpack-HASH..dule.js gzip 746 B 746 B ✓
19b7e98f51cc..dule.js gzip 6.92 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..dule.js gzip N/A 6.94 kB N/A
Overall change 52.4 kB 52.5 kB ⚠️ +44 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
_buildManifest.js gzip 267 B 267 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 539 B 539 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
_error.js 875 kB 875 kB ✓
404.html 4.17 kB 4.17 kB ✓
hooks.html 3.79 kB 3.79 kB ✓
index.js 875 kB 875 kB ✓
link.js 914 kB 914 kB ⚠️ +8 B
routerDirect.js 906 kB 906 kB ⚠️ +8 B
withRouter.js 906 kB 906 kB ⚠️ +8 B
Overall change 4.48 MB 4.48 MB ⚠️ +24 B
Commit: 73f3ff4

@Timer Timer self-assigned this Jun 22, 2020
@ijjk
Copy link
Member

ijjk commented Jun 22, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
buildDuration 9.5s 9.8s ⚠️ +277ms
nodeModulesSize 67 MB 67 MB ⚠️ +167 B
Page Load Tests Overall increase ✓
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
/ failed reqs 0 0 ✓
/ total time (seconds) 1.588 1.645 ⚠️ +0.06
/ avg req/sec 1573.83 1520.13 -53.7
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.017 0.987 -0.03
/error-in-render avg req/sec 2457.43 2533.38 ⚠️ +75.95
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
main-HASH.js gzip 6.51 kB 6.54 kB ⚠️ +24 B
webpack-HASH.js gzip 746 B 746 B ✓
19b7e98f51cc..75a9.js gzip 10.5 kB 10.6 kB ⚠️ +29 B
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 56.9 kB 57 kB ⚠️ +53 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
main-HASH.module.js gzip 5.6 kB 5.62 kB ⚠️ +22 B
webpack-HASH..dule.js gzip 746 B 746 B ✓
19b7e98f51cc..dule.js gzip 6.92 kB 6.94 kB ⚠️ +22 B
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.4 kB 52.5 kB ⚠️ +44 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
_buildManifest.js gzip 267 B 267 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 539 B 539 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
index.html gzip 954 B 954 B ✓
link.html gzip 959 B 959 B ✓
withRouter.html gzip 947 B 946 B -1 B
Overall change 2.86 kB 2.86 kB -1 B

Diffs

Diff for 19b7e98f51cc..edb6832d1.js 
@@ -521,6 +521,27 @@
         return str.replace(/[|\\{}()[\]^$+*?.-]/g, "\\$&");
       }
 
+      function parseParameter(param) {
+        var optional = /^\\\[.*\\\]$/.test(param);
+
+        if (optional) {
+          param = param.slice(2, -2);
+        }
+
+        var repeat = /^(\\\.){3}/.test(param);
+
+        if (repeat) {
+          param = param.slice(6);
+        } // Un-escape key
+
+        var key = param.replace(/\\([|\\{}()[\]^$+*?.-])/g, "$1");
+        return {
+          key: key,
+          repeat: repeat,
+          optional: optional
+        };
+      }
+
       function getRouteRegex(normalizedRoute) {
         // Escape all characters that could be considered RegEx
         var escapedRoute = escapeRegex(
@@ -531,31 +552,17 @@
         var parameterizedRoute = escapedRoute.replace(
           /\/\\\[([^/]+?)\\\](?=\/|$)/g,
           function(_, $1) {
-            var isOptional = /^\\\[.*\\\]$/.test($1);
-
-            if (isOptional) {
-              $1 = $1.slice(2, -2);
-            }
-
-            var isCatchAll = /^(\\\.){3}/.test($1);
-
-            if (isCatchAll) {
-              $1 = $1.slice(6);
-            }
+            var _parseParameter = parseParameter($1),
+              key = _parseParameter.key,
+              optional = _parseParameter.optional,
+              repeat = _parseParameter.repeat;
 
-            groups[
-              $1 // Un-escape key
-                .replace(/\\([|\\{}()[\]^$+*?.-])/g, "$1") // eslint-disable-next-line no-sequences
-            ] = {
+            groups[key] = {
               pos: groupIndex++,
-              repeat: isCatchAll,
-              optional: isOptional
+              repeat: repeat,
+              optional: optional
             };
-            return isCatchAll
-              ? isOptional
-                ? "(?:/(.+?))?"
-                : "/(.+?)"
-              : "/([^/]+?)";
+            return repeat ? (optional ? "(?:/(.+?))?" : "/(.+?)") : "/([^/]+?)";
           }
         );
         var namedParameterizedRoute; // dead code eliminate for browser since it's only needed
Diff for 19b7e98f51cc..a9.module.js 
@@ -443,6 +443,27 @@
         return str.replace(/[|\\{}()[\]^$+*?.-]/g, "\\$&");
       }
 
+      function parseParameter(param) {
+        var optional = /^\\\[.*\\\]$/.test(param);
+
+        if (optional) {
+          param = param.slice(2, -2);
+        }
+
+        var repeat = /^(\\\.){3}/.test(param);
+
+        if (repeat) {
+          param = param.slice(6);
+        } // Un-escape key
+
+        var key = param.replace(/\\([|\\{}()[\]^$+*?.-])/g, "$1");
+        return {
+          key,
+          repeat,
+          optional
+        };
+      }
+
       function getRouteRegex(normalizedRoute) {
         // Escape all characters that could be considered RegEx
         var escapedRoute = escapeRegex(
@@ -453,31 +474,13 @@
         var parameterizedRoute = escapedRoute.replace(
           /\/\\\[([^/]+?)\\\](?=\/|$)/g,
           (_, $1) => {
-            var isOptional = /^\\\[.*\\\]$/.test($1);
-
-            if (isOptional) {
-              $1 = $1.slice(2, -2);
-            }
-
-            var isCatchAll = /^(\\\.){3}/.test($1);
-
-            if (isCatchAll) {
-              $1 = $1.slice(6);
-            }
-
-            groups[
-              $1 // Un-escape key
-                .replace(/\\([|\\{}()[\]^$+*?.-])/g, "$1") // eslint-disable-next-line no-sequences
-            ] = {
+            var { key, optional, repeat } = parseParameter($1);
+            groups[key] = {
               pos: groupIndex++,
-              repeat: isCatchAll,
-              optional: isOptional
+              repeat,
+              optional
             };
-            return isCatchAll
-              ? isOptional
-                ? "(?:/(.+?))?"
-                : "/(.+?)"
-              : "/([^/]+?)";
+            return repeat ? (optional ? "(?:/(.+?))?" : "/(.+?)") : "/([^/]+?)";
           }
         );
         var namedParameterizedRoute; // dead code eliminate for browser since it's only needed
Diff for main-HASH.js 
@@ -1610,14 +1610,24 @@
                 if (
                   !Object.keys(dynamicGroups).every(function(param) {
                     var value = dynamicMatches[param];
-                    var repeat = dynamicGroups[param].repeat; // support single-level catch-all
+                    var _dynamicGroups$param = dynamicGroups[param],
+                      repeat = _dynamicGroups$param.repeat,
+                      optional = _dynamicGroups$param.optional; // support single-level catch-all
                     // TODO: more robust handling for user-error (passing `/`)
 
                     if (repeat && !Array.isArray(value)) value = [value];
+                    var replaced = "["
+                      .concat(repeat ? "..." : "")
+                      .concat(param, "]");
+
+                    if (optional) {
+                      replaced = "[".concat(replaced, "]");
+                    }
+
                     return (
                       param in dynamicMatches && // Interpolate group into data URL if present
                       (interpolatedRoute = interpolatedRoute.replace(
-                        "[".concat(repeat ? "..." : "").concat(param, "]"),
+                        replaced,
                         repeat
                           ? value.map(encodeURIComponent).join("/")
                           : encodeURIComponent(value)
Diff for main-HASH.module.js 
@@ -1228,14 +1228,22 @@
             if (
               !Object.keys(dynamicGroups).every(param => {
                 var value = dynamicMatches[param];
-                var repeat = dynamicGroups[param].repeat; // support single-level catch-all
+                var { repeat, optional } = dynamicGroups[param]; // support single-level catch-all
                 // TODO: more robust handling for user-error (passing `/`)
 
                 if (repeat && !Array.isArray(value)) value = [value];
+                var replaced = "["
+                  .concat(repeat ? "..." : "")
+                  .concat(param, "]");
+
+                if (optional) {
+                  replaced = "[".concat(replaced, "]");
+                }
+
                 return (
                   param in dynamicMatches && // Interpolate group into data URL if present
                   (interpolatedRoute = interpolatedRoute.replace(
-                    "[".concat(repeat ? "..." : "").concat(param, "]"),
+                    replaced,
                     repeat
                       ? value.map(encodeURIComponent).join("/")
                       : encodeURIComponent(value)
Diff for index.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-5f78243a616295ba5ac1.module.js"
+      href="/_next/static/runtime/main-1790b86f3de419a1eff2.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6b23cf48f915c17ee2a9.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.fe4bf1a99e86eb3bd7b0.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/runtime/polyfills-b9d354b83d10fbe21b38.js"
     ></script>
     <script
-      src="/_next/static/runtime/main-00c3bae2c9fcf7e20c0a.js"
+      src="/_next/static/runtime/main-41faedbd1599fb205d54.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/runtime/main-5f78243a616295ba5ac1.module.js"
+      src="/_next/static/runtime/main-1790b86f3de419a1eff2.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.23a257d02f3edb6832d1.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.c55587ea6d828e4bf6b8.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6b23cf48f915c17ee2a9.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.fe4bf1a99e86eb3bd7b0.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-5f78243a616295ba5ac1.module.js"
+      href="/_next/static/runtime/main-1790b86f3de419a1eff2.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6b23cf48f915c17ee2a9.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.fe4bf1a99e86eb3bd7b0.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -86,13 +86,13 @@
       src="/_next/static/runtime/polyfills-b9d354b83d10fbe21b38.js"
     ></script>
     <script
-      src="/_next/static/runtime/main-00c3bae2c9fcf7e20c0a.js"
+      src="/_next/static/runtime/main-41faedbd1599fb205d54.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/runtime/main-5f78243a616295ba5ac1.module.js"
+      src="/_next/static/runtime/main-1790b86f3de419a1eff2.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.23a257d02f3edb6832d1.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.c55587ea6d828e4bf6b8.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6b23cf48f915c17ee2a9.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.fe4bf1a99e86eb3bd7b0.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-5f78243a616295ba5ac1.module.js"
+      href="/_next/static/runtime/main-1790b86f3de419a1eff2.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6b23cf48f915c17ee2a9.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.fe4bf1a99e86eb3bd7b0.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/runtime/polyfills-b9d354b83d10fbe21b38.js"
     ></script>
     <script
-      src="/_next/static/runtime/main-00c3bae2c9fcf7e20c0a.js"
+      src="/_next/static/runtime/main-41faedbd1599fb205d54.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/runtime/main-5f78243a616295ba5ac1.module.js"
+      src="/_next/static/runtime/main-1790b86f3de419a1eff2.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.23a257d02f3edb6832d1.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.c55587ea6d828e4bf6b8.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6b23cf48f915c17ee2a9.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.fe4bf1a99e86eb3bd7b0.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
buildDuration 10.3s 10.3s -28ms
nodeModulesSize 67 MB 67 MB ⚠️ +167 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
main-HASH.js gzip 6.51 kB 6.54 kB ⚠️ +24 B
webpack-HASH.js gzip 746 B 746 B ✓
19b7e98f51cc..75a9.js gzip 10.5 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..33d5.js gzip N/A 10.6 kB N/A
Overall change 56.9 kB 57 kB ⚠️ +53 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
main-HASH.module.js gzip 5.6 kB 5.62 kB ⚠️ +22 B
webpack-HASH..dule.js gzip 746 B 746 B ✓
19b7e98f51cc..dule.js gzip 6.92 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..dule.js gzip N/A 6.94 kB N/A
Overall change 52.4 kB 52.5 kB ⚠️ +44 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
_buildManifest.js gzip 267 B 267 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 539 B 539 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary Janpot/next.js fix-optional-catch-all Change
_error.js 875 kB 875 kB ✓
404.html 4.17 kB 4.17 kB ✓
hooks.html 3.79 kB 3.79 kB ✓
index.js 875 kB 875 kB ✓
link.js 914 kB 914 kB ⚠️ +8 B
routerDirect.js 906 kB 906 kB ⚠️ +8 B
withRouter.js 906 kB 906 kB ⚠️ +8 B
Overall change 4.48 MB 4.48 MB ⚠️ +24 B
Commit: dbc2ffd

@kodiakhq kodiakhq bot merged commit eead55c into vercel:canary Jun 22, 2020
@Janpot Janpot mentioned this pull request Jun 22, 2020
Merged
kodiakhq bot pushed a commit that referenced this pull request Jun 22, 2020
@Janpot
Update route regex for optional catch-all parameters in named regexes (…
a7af013 
…#14456)

Noticed while working on #14400 that the optional catch-all handling was missing in `namedRegex`.

This whole file also seemed quite regex heavy so I took a look at the overall logic and changed a few things. It worked by regex escaping the whole route then unescape the dynamic parts. I changed it to only regex escape the static parts, this eliminates unnecessary back and forth escaping. It also makes the dynamic parts handling more readable. The whole logic is less reliant on regexes and just uses simple string manipulation to translate the route into a regex, I didn't measure anything but as an effect this should make it more performant.
rokinsky pushed a commit to rokinsky/next.js that referenced this pull request Jul 11, 2020
@Janpot @rokinsky
Fix prefetch and some other issues with optional catch all (vercel#14400
9016cea 
)

Fix vercel#14290 and a couple other issues around optional catch-all that popped up after writing these tests

Closes vercel#14344
rokinsky pushed a commit to rokinsky/next.js that referenced this pull request Jul 11, 2020
@Janpot @rokinsky
Update route regex for optional catch-all parameters in named regexes (…
397914d 
…vercel#14456)

Noticed while working on vercel#14400 that the optional catch-all handling was missing in `namedRegex`.

This whole file also seemed quite regex heavy so I took a look at the overall logic and changed a few things. It worked by regex escaping the whole route then unescape the dynamic parts. I changed it to only regex escape the static parts, this eliminates unnecessary back and forth escaping. It also makes the dynamic parts handling more readable. The whole logic is less reliant on regexes and just uses simple string manipulation to translate the route into a regex, I didn't measure anything but as an effect this should make it more performant.
@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@Timer Timer Timer approved these changes

@ijjk ijjk Awaiting requested review from ijjk

@lfades lfades Awaiting requested review from lfades

@timneutkens timneutkens Awaiting requested review from timneutkens

Assignees

@Timer Timer

Labels
type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Route prefetch not working correctly with [experimental] optional catch-all
3 participants
@Janpot @ijjk @Timer