Added flag to identify shallow router events #13243

bragle · 2020-05-22T17:30:23Z

This PR solves #3322 by adding a second parameter to the router events that'll allow you to see whether or not the route is shallow.

It should be noted that it might be easier to return an object with the event parameters in the future. The reason why I did not do that is because it would break backwards compatibility, while this does not.

ijjk · 2020-05-22T17:39:01Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
buildDuration	13.2s	13.1s	-40ms
nodeModulesSize	61.8 MB	61.8 MB	⚠️ +246 B

Page Load Tests Overall increase ✓

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.307	2.283	-0.02
/ avg req/sec	1083.55	1095.08	⚠️ +11.53
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.478	1.474	0
/error-in-render avg req/sec	1690.97	1696.5	⚠️ +5.53

Client Bundles (main, webpack, commons) Overall increase ⚠️

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
main-HASH.js gzip	6.49 kB	6.49 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..fef6.js gzip	10.5 kB	10.5 kB	⚠️ +7 B
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.9 kB	56.9 kB	⚠️ +7 B

Client Bundles (main, webpack, commons) Modern Overall increase ⚠️

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
main-HASH.module.js gzip	5.58 kB	5.58 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	6.93 kB	⚠️ +16 B
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.4 kB	52.4 kB	⚠️ +16 B

Legacy Client Bundles (polyfills)

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.22 kB	8.22 kB	✓

Client Pages Modern

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.52 kB	1.52 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.33 kB	5.33 kB	✓

Client Build Manifests

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes Overall decrease ✓

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
index.html gzip	928 B	926 B	-2 B
link.html gzip	937 B	935 B	-2 B
withRouter.html gzip	924 B	923 B	-1 B
Overall change	2.79 kB	2.78 kB	-5 B

Diffs

Diff for de003c3a9d30..95.module.js

@@ -949,7 +949,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               var rewriteUrlForNextExport;
             }
 
-            this.abortComponentLoad(as); // If the url change is only related to a hash change
+            var { shallow = false } = options;
+            this.abortComponentLoad(as, shallow); // If the url change is only related to a hash change
             // We should not proceed. We should only change the state.
             // WARNING: `_h` is an internal option for handing Next.js client-side
             // hydration. Your app should _never_ use this property. It may change at
@@ -982,7 +983,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             }
 
             var route = toRoute(pathname);
-            var { shallow = false } = options;
 
             if ((0, _isDynamic.isDynamicRoute)(route)) {
               var { pathname: asPathname } = (0, _url2.parse)(as);
@@ -1018,7 +1018,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               }
             }
 
-            Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+            Router.events.emit("routeChangeStart", as, shallow); // If shallow is true and the route exists in the router cache we reuse the previous result
 
             this.getRouteInfo(route, pathname, query, as, shallow).then(
               routeInfo => {
@@ -1028,7 +1028,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                   return resolve(false);
                 }
 
-                Router.events.emit("beforeHistoryChange", as);
+                Router.events.emit("beforeHistoryChange", as, shallow);
                 this.changeState(method, url, as, options);
 
                 if (false) {
@@ -1038,11 +1038,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 this.set(route, pathname, query, as, routeInfo);
 
                 if (error) {
-                  Router.events.emit("routeChangeError", error, as);
+                  Router.events.emit("routeChangeError", error, as, shallow);
                   throw error;
                 }
 
-                Router.events.emit("routeChangeComplete", as);
+                Router.events.emit("routeChangeComplete", as, shallow);
                 return resolve(true);
               },
               reject
@@ -1352,11 +1352,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           });
         }
 
-        abortComponentLoad(as) {
+        abortComponentLoad(as, shallow) {
           if (this.clc) {
             var e = new Error("Route Cancelled");
             e.cancelled = true;
-            Router.events.emit("routeChangeError", e, as);
+            Router.events.emit("routeChangeError", e, as, shallow);
             this.clc();
             this.clc = null;
           }

Diff for de003c3a9d30..af23efe53.js

@@ -1098,7 +1098,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     var rewriteUrlForNextExport;
                   }
 
-                  _this2.abortComponentLoad(as); // If the url change is only related to a hash change
+                  var _options$shallow = options.shallow,
+                    shallow =
+                      _options$shallow === void 0 ? false : _options$shallow;
+
+                  _this2.abortComponentLoad(as, shallow); // If the url change is only related to a hash change
                   // We should not proceed. We should only change the state.
                   // WARNING: `_h` is an internal option for handing Next.js client-side
                   // hydration. Your app should _never_ use this property. It may change at
@@ -1137,9 +1141,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                   }
 
                   var route = toRoute(pathname);
-                  var _options$shallow = options.shallow,
-                    shallow =
-                      _options$shallow === void 0 ? false : _options$shallow;
 
                   if ((0, _isDynamic.isDynamicRoute)(route)) {
                     var _ref4 = (0, _url2.parse)(as),
@@ -1179,7 +1180,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     }
                   }
 
-                  Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+                  Router.events.emit("routeChangeStart", as, shallow); // If shallow is true and the route exists in the router cache we reuse the previous result
 
                   _this2
                     .getRouteInfo(route, pathname, query, as, shallow)
@@ -1190,7 +1191,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                         return resolve(false);
                       }
 
-                      Router.events.emit("beforeHistoryChange", as);
+                      Router.events.emit("beforeHistoryChange", as, shallow);
 
                       _this2.changeState(method, url, as, options);
 
@@ -1201,11 +1202,16 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       _this2.set(route, pathname, query, as, routeInfo);
 
                       if (error) {
-                        Router.events.emit("routeChangeError", error, as);
+                        Router.events.emit(
+                          "routeChangeError",
+                          error,
+                          as,
+                          shallow
+                        );
                         throw error;
                       }
 
-                      Router.events.emit("routeChangeComplete", as);
+                      Router.events.emit("routeChangeComplete", as, shallow);
                       return resolve(true);
                     }, reject);
                 });
@@ -1609,11 +1615,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             },
             {
               key: "abortComponentLoad",
-              value: function abortComponentLoad(as) {
+              value: function abortComponentLoad(as, shallow) {
                 if (this.clc) {
                   var e = new Error("Route Cancelled");
                   e.cancelled = true;
-                  Router.events.emit("routeChangeError", e, as);
+                  Router.events.emit("routeChangeError", e, as, shallow);
                   this.clc();
                   this.clc = null;
                 }

Diff for index.html

@@ -30,7 +30,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.2a61a2f37e22a8cbee95.module.js"
+      href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.26798cd0eba71cc5e259.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -133,13 +133,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.48e5abf2108af23efe53.js"
+      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.7f655ac71b0dc13707e9.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.2a61a2f37e22a8cbee95.module.js"
+      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.26798cd0eba71cc5e259.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

Diff for link.html

@@ -30,7 +30,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.2a61a2f37e22a8cbee95.module.js"
+      href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.26798cd0eba71cc5e259.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -138,13 +138,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.48e5abf2108af23efe53.js"
+      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.7f655ac71b0dc13707e9.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.2a61a2f37e22a8cbee95.module.js"
+      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.26798cd0eba71cc5e259.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

Diff for withRouter.html

@@ -30,7 +30,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.2a61a2f37e22a8cbee95.module.js"
+      href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.26798cd0eba71cc5e259.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -133,13 +133,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.48e5abf2108af23efe53.js"
+      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.7f655ac71b0dc13707e9.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.2a61a2f37e22a8cbee95.module.js"
+      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.26798cd0eba71cc5e259.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
buildDuration	14.2s	14s	-142ms
nodeModulesSize	61.8 MB	61.8 MB	⚠️ +246 B

Client Bundles (main, webpack, commons) Overall increase ⚠️

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
main-HASH.js gzip	6.49 kB	6.49 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..fef6.js gzip	10.5 kB	N/A	N/A
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
de003c3a9d30..e8ae.js gzip	N/A	10.5 kB	N/A
Overall change	56.9 kB	56.9 kB	⚠️ +7 B

Client Bundles (main, webpack, commons) Modern Overall increase ⚠️

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
main-HASH.module.js gzip	5.58 kB	5.58 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	N/A	N/A
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
de003c3a9d30..dule.js gzip	N/A	6.93 kB	N/A
Overall change	52.4 kB	52.4 kB	⚠️ +16 B

Legacy Client Bundles (polyfills)

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.22 kB	8.22 kB	✓

Client Pages Modern

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.52 kB	1.52 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.33 kB	5.33 kB	✓

Client Build Manifests

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles Overall increase ⚠️

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
_error.js	844 kB	844 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	844 kB	844 kB	✓
link.js	882 kB	882 kB	⚠️ +63 B
routerDirect.js	874 kB	874 kB	⚠️ +63 B
withRouter.js	874 kB	874 kB	⚠️ +63 B
Overall change	4.33 MB	4.33 MB	⚠️ +189 B

ijjk · 2020-05-22T17:41:07Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
buildDuration	11.8s	12s	⚠️ +252ms
nodeModulesSize	61.8 MB	61.8 MB	⚠️ +246 B

Page Load Tests Overall decrease ⚠️

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.041	2.126	⚠️ +0.08
/ avg req/sec	1224.9	1176.07	-48.83
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.376	1.41	⚠️ +0.03
/error-in-render avg req/sec	1817.49	1772.94	-44.55

Client Bundles (main, webpack, commons) Overall increase ⚠️

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
main-HASH.js gzip	6.49 kB	6.49 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..fef6.js gzip	10.5 kB	10.5 kB	⚠️ +7 B
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.9 kB	56.9 kB	⚠️ +7 B

Client Bundles (main, webpack, commons) Modern Overall increase ⚠️

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
main-HASH.module.js gzip	5.58 kB	5.58 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	6.93 kB	⚠️ +16 B
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.4 kB	52.4 kB	⚠️ +16 B

Legacy Client Bundles (polyfills)

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.22 kB	8.22 kB	✓

Client Pages Modern

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.52 kB	1.52 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.33 kB	5.33 kB	✓

Client Build Manifests

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes Overall decrease ✓

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
index.html gzip	928 B	926 B	-2 B
link.html gzip	937 B	935 B	-2 B
withRouter.html gzip	924 B	923 B	-1 B
Overall change	2.79 kB	2.78 kB	-5 B

Diffs

Diff for de003c3a9d30..95.module.js

@@ -949,7 +949,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               var rewriteUrlForNextExport;
             }
 
-            this.abortComponentLoad(as); // If the url change is only related to a hash change
+            var { shallow = false } = options;
+            this.abortComponentLoad(as, shallow); // If the url change is only related to a hash change
             // We should not proceed. We should only change the state.
             // WARNING: `_h` is an internal option for handing Next.js client-side
             // hydration. Your app should _never_ use this property. It may change at
@@ -982,7 +983,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             }
 
             var route = toRoute(pathname);
-            var { shallow = false } = options;
 
             if ((0, _isDynamic.isDynamicRoute)(route)) {
               var { pathname: asPathname } = (0, _url2.parse)(as);
@@ -1018,7 +1018,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               }
             }
 
-            Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+            Router.events.emit("routeChangeStart", as, shallow); // If shallow is true and the route exists in the router cache we reuse the previous result
 
             this.getRouteInfo(route, pathname, query, as, shallow).then(
               routeInfo => {
@@ -1028,7 +1028,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                   return resolve(false);
                 }
 
-                Router.events.emit("beforeHistoryChange", as);
+                Router.events.emit("beforeHistoryChange", as, shallow);
                 this.changeState(method, url, as, options);
 
                 if (false) {
@@ -1038,11 +1038,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 this.set(route, pathname, query, as, routeInfo);
 
                 if (error) {
-                  Router.events.emit("routeChangeError", error, as);
+                  Router.events.emit("routeChangeError", error, as, shallow);
                   throw error;
                 }
 
-                Router.events.emit("routeChangeComplete", as);
+                Router.events.emit("routeChangeComplete", as, shallow);
                 return resolve(true);
               },
               reject
@@ -1352,11 +1352,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           });
         }
 
-        abortComponentLoad(as) {
+        abortComponentLoad(as, shallow) {
           if (this.clc) {
             var e = new Error("Route Cancelled");
             e.cancelled = true;
-            Router.events.emit("routeChangeError", e, as);
+            Router.events.emit("routeChangeError", e, as, shallow);
             this.clc();
             this.clc = null;
           }

Diff for de003c3a9d30..af23efe53.js

@@ -1098,7 +1098,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     var rewriteUrlForNextExport;
                   }
 
-                  _this2.abortComponentLoad(as); // If the url change is only related to a hash change
+                  var _options$shallow = options.shallow,
+                    shallow =
+                      _options$shallow === void 0 ? false : _options$shallow;
+
+                  _this2.abortComponentLoad(as, shallow); // If the url change is only related to a hash change
                   // We should not proceed. We should only change the state.
                   // WARNING: `_h` is an internal option for handing Next.js client-side
                   // hydration. Your app should _never_ use this property. It may change at
@@ -1137,9 +1141,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                   }
 
                   var route = toRoute(pathname);
-                  var _options$shallow = options.shallow,
-                    shallow =
-                      _options$shallow === void 0 ? false : _options$shallow;
 
                   if ((0, _isDynamic.isDynamicRoute)(route)) {
                     var _ref4 = (0, _url2.parse)(as),
@@ -1179,7 +1180,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     }
                   }
 
-                  Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+                  Router.events.emit("routeChangeStart", as, shallow); // If shallow is true and the route exists in the router cache we reuse the previous result
 
                   _this2
                     .getRouteInfo(route, pathname, query, as, shallow)
@@ -1190,7 +1191,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                         return resolve(false);
                       }
 
-                      Router.events.emit("beforeHistoryChange", as);
+                      Router.events.emit("beforeHistoryChange", as, shallow);
 
                       _this2.changeState(method, url, as, options);
 
@@ -1201,11 +1202,16 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       _this2.set(route, pathname, query, as, routeInfo);
 
                       if (error) {
-                        Router.events.emit("routeChangeError", error, as);
+                        Router.events.emit(
+                          "routeChangeError",
+                          error,
+                          as,
+                          shallow
+                        );
                         throw error;
                       }
 
-                      Router.events.emit("routeChangeComplete", as);
+                      Router.events.emit("routeChangeComplete", as, shallow);
                       return resolve(true);
                     }, reject);
                 });
@@ -1609,11 +1615,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             },
             {
               key: "abortComponentLoad",
-              value: function abortComponentLoad(as) {
+              value: function abortComponentLoad(as, shallow) {
                 if (this.clc) {
                   var e = new Error("Route Cancelled");
                   e.cancelled = true;
-                  Router.events.emit("routeChangeError", e, as);
+                  Router.events.emit("routeChangeError", e, as, shallow);
                   this.clc();
                   this.clc = null;
                 }

Diff for index.html

@@ -30,7 +30,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.2a61a2f37e22a8cbee95.module.js"
+      href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.26798cd0eba71cc5e259.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -133,13 +133,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.48e5abf2108af23efe53.js"
+      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.7f655ac71b0dc13707e9.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.2a61a2f37e22a8cbee95.module.js"
+      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.26798cd0eba71cc5e259.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

Diff for link.html

@@ -30,7 +30,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.2a61a2f37e22a8cbee95.module.js"
+      href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.26798cd0eba71cc5e259.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -138,13 +138,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.48e5abf2108af23efe53.js"
+      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.7f655ac71b0dc13707e9.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.2a61a2f37e22a8cbee95.module.js"
+      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.26798cd0eba71cc5e259.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

Diff for withRouter.html

@@ -30,7 +30,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.2a61a2f37e22a8cbee95.module.js"
+      href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.26798cd0eba71cc5e259.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -133,13 +133,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.48e5abf2108af23efe53.js"
+      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.7f655ac71b0dc13707e9.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.2a61a2f37e22a8cbee95.module.js"
+      src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.26798cd0eba71cc5e259.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
buildDuration	13.1s	13.3s	⚠️ +161ms
nodeModulesSize	61.8 MB	61.8 MB	⚠️ +246 B

Client Bundles (main, webpack, commons) Overall increase ⚠️

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
main-HASH.js gzip	6.49 kB	6.49 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..fef6.js gzip	10.5 kB	N/A	N/A
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
de003c3a9d30..e8ae.js gzip	N/A	10.5 kB	N/A
Overall change	56.9 kB	56.9 kB	⚠️ +7 B

Client Bundles (main, webpack, commons) Modern Overall increase ⚠️

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
main-HASH.module.js gzip	5.58 kB	5.58 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	N/A	N/A
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
de003c3a9d30..dule.js gzip	N/A	6.93 kB	N/A
Overall change	52.4 kB	52.4 kB	⚠️ +16 B

Legacy Client Bundles (polyfills)

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.22 kB	8.22 kB	✓

Client Pages Modern

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.52 kB	1.52 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.33 kB	5.33 kB	✓

Client Build Manifests

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles Overall increase ⚠️

	zeit/next.js canary	bragle/next.js identify-shallow-events	Change
_error.js	844 kB	844 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	844 kB	844 kB	✓
link.js	882 kB	882 kB	⚠️ +63 B
routerDirect.js	874 kB	874 kB	⚠️ +63 B
withRouter.js	874 kB	874 kB	⚠️ +63 B
Overall change	4.33 MB	4.33 MB	⚠️ +189 B

Timer

Could you please write an RFC for what you're trying to solve by adding this information to the callbacks?

We like to have a full understanding of use cases before increasing our API surface.

bragle · 2020-05-23T15:48:49Z

@Timer I've created this RFC: #13276

@banerjeesouvik

This PR is an implementation of RFC #13276 (more specifically @banerjeesouvik's [suggestion](#13276 (comment))) which solves #3322 by adding an extra parameter to the router events that'll allow you to see whether or not the route is shallow. This is a recreation of PR #13243.

added shallow flag to Router.events functions

35e3fee

bragle requested review from ijjk, lfades, Timer and timneutkens as code owners May 22, 2020 17:30

Merge branch 'canary' into identify-shallow-events

d9e96fd

Timer requested changes May 22, 2020

View reviewed changes

timneutkens closed this May 23, 2020

bragle mentioned this pull request Dec 3, 2020

Added flag to identify shallow router events #19802

Merged

vercel locked as resolved and limited conversation to collaborators Jan 30, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added flag to identify shallow router events #13243

Added flag to identify shallow router events #13243

bragle commented May 22, 2020

ijjk commented May 22, 2020

Diffs

ijjk commented May 22, 2020

Diffs

Timer left a comment

bragle commented May 23, 2020

Added flag to identify shallow router events #13243

Added flag to identify shallow router events #13243

Conversation

bragle commented May 22, 2020

ijjk commented May 22, 2020

Stats from current PR

Diffs

ijjk commented May 22, 2020

Stats from current PR

Diffs

Timer left a comment

Choose a reason for hiding this comment

bragle commented May 23, 2020