fix(21606): consider scroll option when using shallow routing #24888
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
chrisneven
requested review from
divmain,
ijjk,
lfades,
shuding and
timneutkens
as code owners
timneutkens
approved these changes
Jun 2, 2021
timneutkens
previously requested changes
Jun 2, 2021
alright will add them, thanks! |
…-option-shallow-routing
…ps://github.com/chrisneven/next.js into feature/21606-fix-scroll-option-shallow-routing
|
Hi @timneutkens, I've updated the PR. Looking forward to your feedback 🙂 |
ijjk
reviewed
Jun 8, 2021
Co-authored-by: JJ Kasper <jj@jjsweb.site>
This comment has been minimized.
This comment has been minimized.
Stats from current PRDefault Server Mode (Increase detected
|
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| buildDuration | 11.9s | 11.7s | -181ms |
| buildDurationCached | 2.9s | 2.9s | -11ms |
| nodeModulesSize | 46.7 MB | 46.7 MB | -271 B |
Page Load Tests Overall increase ✓
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| / failed reqs | 0 | 0 | ✓ |
| / total time (seconds) | 2.444 | 2.419 | -0.02 |
| / avg req/sec | 1022.84 | 1033.68 | +10.84 |
| /error-in-render failed reqs | 0 | 0 | ✓ |
| /error-in-render total time (seconds) | 1.259 | 1.223 | -0.04 |
| /error-in-render avg req/sec | 1985.94 | 2044.88 | +58.94 |
Client Bundles (main, webpack, commons) Overall decrease ✓
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| framework-HASH.js gzip | 39.3 kB | 39.3 kB | ✓ |
| main-HASH.js gzip | 20.2 kB | 20.2 kB | -1 B |
| webpack-HASH.js gzip | 804 B | 804 B | ✓ |
| Overall change | 60.3 kB | 60.3 kB | -1 B |
Legacy Client Bundles (polyfills)
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| polyfills-HASH.js gzip | 31.1 kB | 31.1 kB | ✓ |
| Overall change | 31.1 kB | 31.1 kB | ✓ |
Client Pages
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| _app-HASH.js gzip | 801 B | 801 B | ✓ |
| _error-HASH.js gzip | 3.07 kB | 3.07 kB | ✓ |
| amp-HASH.js gzip | 527 B | 527 B | ✓ |
| css-HASH.js gzip | 334 B | 334 B | ✓ |
| hooks-HASH.js gzip | 890 B | 890 B | ✓ |
| index-HASH.js gzip | 263 B | 263 B | ✓ |
| link-HASH.js gzip | 1.64 kB | 1.64 kB | ✓ |
| routerDirect..HASH.js gzip | 333 B | 333 B | ✓ |
| withRouter-HASH.js gzip | 330 B | 330 B | ✓ |
| bb14e60e810b..30f.css gzip | 125 B | 125 B | ✓ |
| Overall change | 8.31 kB | 8.31 kB | ✓ |
Client Build Manifests Overall increase ⚠️
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 391 B | 392 B | |
| Overall change | 391 B | 392 B |
Rendered Page Sizes Overall decrease ✓
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| index.html gzip | 573 B | 571 B | -2 B |
| link.html gzip | 580 B | 579 B | -1 B |
| withRouter.html gzip | 567 B | 565 B | -2 B |
| Overall change | 1.72 kB | 1.72 kB | -5 B |
Diffs
Diff for _buildManifest.js
@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
"/hooks": [
"static\u002Fchunks\u002Fpages\u002Fhooks-1a097873c02b793e8683.js"
],
- "/link": ["static\u002Fchunks\u002Fpages\u002Flink-9ddbd6b16dce28fb106c.js"],
+ "/link": ["static\u002Fchunks\u002Fpages\u002Flink-59cf3226dc2ef2788890.js"],
"/routerDirect": [
"static\u002Fchunks\u002Fpages\u002FrouterDirect-ae68b1c6ae0c3591e527.js"
],Diff for link-HASH.js
@@ -79,8 +79,8 @@
e.preventDefault(); // avoid scroll for urls with anchor refs
- if (scroll == null) {
- scroll = as.indexOf("#") < 0;
+ if (scroll == null && as.indexOf("#") >= 0) {
+ scroll = false;
} // replace state instead of push if prop is present
router[replace ? "replace" : "push"](href, as, {Diff for main-HASH.js
@@ -3982,8 +3982,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
options,
forcedScroll
) {
- var _options$scroll,
- shouldResolveHref,
+ var shouldResolveHref,
localeChange,
parsedAs,
localePathResult,
@@ -4013,6 +4012,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
missingParams,
_self$__NEXT_DATA__$p,
_self$__NEXT_DATA__$p2,
+ _options$scroll,
routeInfo,
_routeInfo,
error,
@@ -4026,7 +4026,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
newAs,
notFoundRoute,
appComp,
- isValidShallowRoute;
+ isValidShallowRoute,
+ shouldScroll,
+ resetScroll;
return _regeneratorRuntime.wrap(
function _callee$(_context) {
@@ -4050,18 +4052,12 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
if (options._h) {
this.isReady = true;
- } // Default to scroll reset behavior unless explicitly specified to be
- // `false`! This makes the behavior between using `Router#push` and a
- // `<Link />` consistent.
-
- options.scroll = !!((_options$scroll =
- options.scroll) != null
- ? _options$scroll
- : true);
+ }
+
localeChange = options.locale !== this.locale;
if (true) {
- _context.next = 19;
+ _context.next = 18;
break;
}
@@ -4114,7 +4110,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
}
if (!didNavigate) {
- _context.next = 19;
+ _context.next = 18;
break;
}
@@ -4123,7 +4119,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
new Promise(function() {})
);
- case 19:
+ case 18:
if (!options._h) {
this.isSsr = false;
} // marking route changes as a navigation start entry
@@ -4168,7 +4164,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
if (
!(!options._h && this.onlyAHashChange(cleanedAs))
) {
- _context.next = 35;
+ _context.next = 34;
break;
}
@@ -4189,7 +4185,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
);
return _context.abrupt("return", true);
- case 35:
+ case 34:
parsed = (0, _parseRelativeUrl.parseRelativeUrl)(
url
);
@@ -4198,30 +4194,30 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
// get their query parameters to allow ensuring they can be parsed properly
// when rewritten to
- _context.prev = 37;
- _context.next = 40;
+ _context.prev = 36;
+ _context.next = 39;
return this.pageLoader.getPageList();
- case 40:
+ case 39:
pages = _context.sent;
- _context.next = 43;
+ _context.next = 42;
return (0, _routeLoader.getClientBuildManifest)();
- case 43:
+ case 42:
_yield = _context.sent;
rewrites = _yield.__rewrites;
- _context.next = 51;
+ _context.next = 50;
break;
- case 47:
- _context.prev = 47;
- _context.t0 = _context["catch"](37);
+ case 46:
+ _context.prev = 46;
+ _context.t0 = _context["catch"](36);
// If we fail to resolve the page list or client-build manifest, we must
// do a server-side transition:
window.location.href = as;
return _context.abrupt("return", false);
- case 51:
+ case 50:
// If asked to change the current URL we should reload the current page
// (not location.reload() but reload getInitialProps and other Next.js stuffs)
// We also need to set the method = replaceState always
@@ -4269,12 +4265,12 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
);
if (isLocalURL(as)) {
- _context.next = 61;
+ _context.next = 60;
break;
}
if (true) {
- _context.next = 59;
+ _context.next = 58;
break;
}
@@ -4288,18 +4284,18 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
"\nSee more info: https://nextjs.org/docs/messages/invalid-relative-url-external-as"
);
- case 59:
+ case 58:
window.location.href = as;
return _context.abrupt("return", false);
- case 61:
+ case 60:
resolvedAs = delLocale(
delBasePath(resolvedAs),
this.locale
);
if (!(0, _isDynamic.isDynamicRoute)(route)) {
- _context.next = 77;
+ _context.next = 76;
break;
}
@@ -4322,7 +4318,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
(shouldInterpolate && !interpolatedAs.result)
)
) {
- _context.next = 76;
+ _context.next = 75;
break;
}
@@ -4333,7 +4329,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
});
if (!(missingParams.length > 0)) {
- _context.next = 74;
+ _context.next = 73;
break;
}
@@ -4364,11 +4360,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
)
);
- case 74:
- _context.next = 77;
+ case 73:
+ _context.next = 76;
break;
- case 76:
+ case 75:
if (shouldInterpolate) {
as = (0, _utils.formatWithValidation)(
Object.assign({}, _parsedAs, {
@@ -4384,14 +4380,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
Object.assign(query, routeMatch);
}
- case 77:
+ case 76:
Router.events.emit(
"routeChangeStart",
as,
routeProps
);
- _context.prev = 78;
- _context.next = 81;
+ _context.prev = 77;
+ _context.next = 80;
return this.getRouteInfo(
route,
pathname,
@@ -4401,7 +4397,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
routeProps
);
- case 81:
+ case 80:
routeInfo = _context.sent;
(_routeInfo = routeInfo),
(error = _routeInfo.error),
@@ -4410,14 +4406,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
(__N_SSP = _routeInfo.__N_SSP); // handle redirect on client-transition
if (!((__N_SSG || __N_SSP) && props)) {
- _context.next = 108;
+ _context.next = 107;
break;
}
if (
!(props.pageProps && props.pageProps.__N_REDIRECT)
) {
- _context.next = 94;
+ _context.next = 93;
break;
}
@@ -4426,7 +4422,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
// it's not
if (!destination.startsWith("/")) {
- _context.next = 92;
+ _context.next = 91;
break;
}
@@ -4438,7 +4434,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
);
if (!pages.includes(parsedHref.pathname)) {
- _context.next = 92;
+ _context.next = 91;
break;
}
@@ -4454,37 +4450,37 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
this.change(method, newUrl, newAs, options)
);
- case 92:
+ case 91:
window.location.href = destination;
return _context.abrupt(
"return",
new Promise(function() {})
);
- case 94:
+ case 93:
this.isPreview = !!props.__N_PREVIEW; // handle SSG data 404
if (!(props.notFound === SSG_DATA_NOT_FOUND)) {
- _context.next = 108;
+ _context.next = 107;
break;
}
- _context.prev = 96;
- _context.next = 99;
+ _context.prev = 95;
+ _context.next = 98;
return this.fetchComponent("/404");
- case 99:
+ case 98:
notFoundRoute = "/404";
- _context.next = 105;
+ _context.next = 104;
break;
- case 102:
- _context.prev = 102;
- _context.t1 = _context["catch"](96);
+ case 101:
+ _context.prev = 101;
+ _context.t1 = _context["catch"](95);
notFoundRoute = "/_error";
- case 105:
- _context.next = 107;
+ case 104:
+ _context.next = 106;
return this.getRouteInfo(
notFoundRoute,
notFoundRoute,
@@ -4496,10 +4492,10 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
}
);
- case 107:
+ case 106:
routeInfo = _context.sent;
- case 108:
+ case 107:
Router.events.emit(
"beforeHistoryChange",
as,
@@ -4508,10 +4504,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
this.changeState(method, url, as, options);
if (false) {
- } // shallow routing is only allowed for same page URL changes.
-
- isValidShallowRoute =
- options.shallow && this.route === route;
+ }
if (
options._h &&
@@ -4529,30 +4522,36 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
// ensure statusCode is still correct for static 500 page
// when updating query information
props.pageProps.statusCode = 500;
- }
+ } // shallow routing is only allowed for same page URL changes.
- _context.next = 115;
+ isValidShallowRoute =
+ options.shallow && this.route === route;
+ shouldScroll =
+ (_options$scroll = options.scroll) != null
+ ? _options$scroll
+ : !isValidShallowRoute;
+ resetScroll = shouldScroll
+ ? {
+ x: 0,
+ y: 0
+ }
+ : null;
+ _context.next = 116;
return this.set(
route,
pathname,
query,
cleanedAs,
routeInfo,
- forcedScroll ||
- (isValidShallowRoute || !options.scroll
- ? null
- : {
- x: 0,
- y: 0
- })
+ forcedScroll != null ? forcedScroll : resetScroll
)["catch"](function(e) {
if (e.cancelled) error = error || e;
else throw e;
});
- case 115:
+ case 116:
if (!error) {
- _context.next = 118;
+ _context.next = 119;
break;
}
@@ -4564,7 +4563,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
);
throw error;
- case 118:
+ case 119:
if (false) {
}
@@ -4575,21 +4574,21 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
);
return _context.abrupt("return", true);
- case 123:
- _context.prev = 123;
- _context.t2 = _context["catch"](78);
+ case 124:
+ _context.prev = 124;
+ _context.t2 = _context["catch"](77);
if (!_context.t2.cancelled) {
- _context.next = 127;
+ _context.next = 128;
break;
}
return _context.abrupt("return", false);
- case 127:
+ case 128:
throw _context.t2;
- case 128:
+ case 129:
case "end":
return _context.stop();
}
@@ -4598,9 +4597,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
_callee,
this,
[
- [37, 47],
- [78, 123],
- [96, 102]
+ [36, 46],
+ [77, 124],
+ [95, 101]
]
);
})Diff for index.html
@@ -17,7 +17,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/main-4fe711bd69259b210c16.js"
+ href="/_next/static/chunks/main-9a904fb91408237b30c7.js"
as="script"
/>
<link
@@ -57,7 +57,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/main-4fe711bd69259b210c16.js"
+ src="/_next/static/chunks/main-9a904fb91408237b30c7.js"
async=""
></script>
<scriptDiff for link.html
@@ -17,7 +17,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/main-4fe711bd69259b210c16.js"
+ href="/_next/static/chunks/main-9a904fb91408237b30c7.js"
as="script"
/>
<link
@@ -27,7 +27,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/pages/link-9ddbd6b16dce28fb106c.js"
+ href="/_next/static/chunks/pages/link-59cf3226dc2ef2788890.js"
as="script"
/>
</head>
@@ -62,7 +62,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/main-4fe711bd69259b210c16.js"
+ src="/_next/static/chunks/main-9a904fb91408237b30c7.js"
async=""
></script>
<script
@@ -70,7 +70,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/pages/link-9ddbd6b16dce28fb106c.js"
+ src="/_next/static/chunks/pages/link-59cf3226dc2ef2788890.js"
async=""
></script>
<script src="/_next/static/BUILD_ID/_buildManifest.js" async=""></script>Diff for withRouter.html
@@ -17,7 +17,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/main-4fe711bd69259b210c16.js"
+ href="/_next/static/chunks/main-9a904fb91408237b30c7.js"
as="script"
/>
<link
@@ -57,7 +57,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/main-4fe711bd69259b210c16.js"
+ src="/_next/static/chunks/main-9a904fb91408237b30c7.js"
async=""
></script>
<scriptServerless Mode (Decrease detected ✓)
General Overall decrease ✓
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| buildDuration | 14s | 13.2s | -825ms |
| buildDurationCached | 3.9s | 4s | |
| nodeModulesSize | 46.7 MB | 46.7 MB | -271 B |
Client Bundles (main, webpack, commons) Overall decrease ✓
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| framework-HASH.js gzip | 39.3 kB | 39.3 kB | ✓ |
| main-HASH.js gzip | 20.2 kB | 20.2 kB | -1 B |
| webpack-HASH.js gzip | 804 B | 804 B | ✓ |
| Overall change | 60.3 kB | 60.3 kB | -1 B |
Legacy Client Bundles (polyfills)
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| polyfills-HASH.js gzip | 31.1 kB | 31.1 kB | ✓ |
| Overall change | 31.1 kB | 31.1 kB | ✓ |
Client Pages
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| _app-HASH.js gzip | 801 B | 801 B | ✓ |
| _error-HASH.js gzip | 3.07 kB | 3.07 kB | ✓ |
| amp-HASH.js gzip | 527 B | 527 B | ✓ |
| css-HASH.js gzip | 334 B | 334 B | ✓ |
| hooks-HASH.js gzip | 890 B | 890 B | ✓ |
| index-HASH.js gzip | 263 B | 263 B | ✓ |
| link-HASH.js gzip | 1.64 kB | 1.64 kB | ✓ |
| routerDirect..HASH.js gzip | 333 B | 333 B | ✓ |
| withRouter-HASH.js gzip | 330 B | 330 B | ✓ |
| bb14e60e810b..30f.css gzip | 125 B | 125 B | ✓ |
| Overall change | 8.31 kB | 8.31 kB | ✓ |
Client Build Manifests Overall increase ⚠️
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 391 B | 392 B | |
| Overall change | 391 B | 392 B |
Serverless bundles
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| _error.js | 16.9 kB | 16.9 kB | ✓ |
| 404.html | 2.44 kB | 2.44 kB | ✓ |
| 500.html | 2.43 kB | 2.43 kB | ✓ |
| amp.amp.html | 10.8 kB | 10.8 kB | ✓ |
| amp.html | 1.63 kB | 1.63 kB | ✓ |
| css.html | 1.81 kB | 1.81 kB | ✓ |
| hooks.html | 1.69 kB | 1.69 kB | ✓ |
| index.js | 17.2 kB | 17.2 kB | ✓ |
| link.js | 17.4 kB | 17.4 kB | ✓ |
| routerDirect.js | 17.4 kB | 17.4 kB | ✓ |
| withRouter.js | 17.4 kB | 17.4 kB | ✓ |
| Overall change | 107 kB | 107 kB | ✓ |
Webpack 4 Mode (Increase detected ⚠️ )
General Overall decrease ✓
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| buildDuration | 10.5s | 10.6s | |
| buildDurationCached | 4.4s | 4.2s | -157ms |
| nodeModulesSize | 46.7 MB | 46.7 MB | -271 B |
Page Load Tests Overall increase ✓
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| / failed reqs | 0 | 0 | ✓ |
| / total time (seconds) | 2.431 | 2.466 | |
| / avg req/sec | 1028.36 | 1013.83 | |
| /error-in-render failed reqs | 0 | 0 | ✓ |
| /error-in-render total time (seconds) | 1.249 | 1.234 | -0.02 |
| /error-in-render avg req/sec | 2001.51 | 2026.43 | +24.92 |
Client Bundles (main, webpack, commons) Overall increase ⚠️
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| 677f882d2ed8..HASH.js gzip | 13.3 kB | 13.4 kB | |
| framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
| main-HASH.js gzip | 7.99 kB | 7.99 kB | ✓ |
| webpack-HASH.js gzip | 751 B | 751 B | ✓ |
| Overall change | 61.1 kB | 61.1 kB |
Legacy Client Bundles (polyfills)
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| polyfills-HASH.js gzip | 31.3 kB | 31.3 kB | ✓ |
| Overall change | 31.3 kB | 31.3 kB | ✓ |
Client Pages Overall increase ⚠️
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| _app-HASH.js gzip | 1.07 kB | 1.07 kB | ✓ |
| _error-HASH.js gzip | 3.74 kB | 3.74 kB | ✓ |
| amp-HASH.js gzip | 536 B | 536 B | ✓ |
| css-HASH.js gzip | 339 B | 339 B | ✓ |
| hooks-HASH.js gzip | 887 B | 887 B | ✓ |
| index-HASH.js gzip | 227 B | 227 B | ✓ |
| link-HASH.js gzip | 1.63 kB | 1.63 kB | |
| routerDirect..HASH.js gzip | 303 B | 303 B | ✓ |
| withRouter-HASH.js gzip | 302 B | 302 B | ✓ |
| e025d2764813..52f.css gzip | 125 B | 125 B | ✓ |
| Overall change | 9.16 kB | 9.17 kB |
Client Build Manifests
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 420 B | 420 B | ✓ |
| Overall change | 420 B | 420 B | ✓ |
Rendered Page Sizes Overall increase ⚠️
| vercel/next.js canary | chrisneven/next.js feature/21606-fix-scroll-option-shallow-routing | Change | |
|---|---|---|---|
| index.html gzip | 627 B | 627 B | ✓ |
| link.html gzip | 632 B | 633 B | |
| withRouter.html gzip | 620 B | 620 B | ✓ |
| Overall change | 1.88 kB | 1.88 kB |
Diffs
Diff for _buildManifest.js
@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
"/hooks": [
"static\u002Fchunks\u002Fpages\u002Fhooks-f1cc32851f5e866a7e78.js"
],
- "/link": ["static\u002Fchunks\u002Fpages\u002Flink-b1edcc58b3477620bce2.js"],
+ "/link": ["static\u002Fchunks\u002Fpages\u002Flink-670e2914a4b319eea5ad.js"],
"/routerDirect": [
"static\u002Fchunks\u002Fpages\u002FrouterDirect-e9bdf4dc22ca5dd5d885.js"
],Diff for link-HASH.js
@@ -137,8 +137,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
e.preventDefault(); // avoid scroll for urls with anchor refs
- if (scroll == null) {
- scroll = as.indexOf("#") < 0;
+ if (scroll == null && as.indexOf("#") >= 0) {
+ scroll = false;
} // replace state instead of push if prop is present
router[replace ? "replace" : "push"](href, as, {Diff for 677f882d2ed8..c4df.HASH.js
@@ -1828,8 +1828,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
options,
forcedScroll
) {
- var _options$scroll,
- shouldResolveHref,
+ var shouldResolveHref,
localeChange,
parsedAs,
localePathResult,
@@ -1859,6 +1858,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
missingParams,
_self$__NEXT_DATA__$p,
_self$__NEXT_DATA__$p2,
+ _options$scroll,
routeInfo,
_routeInfo,
error,
@@ -1872,7 +1872,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
newAs,
notFoundRoute,
appComp,
- isValidShallowRoute;
+ isValidShallowRoute,
+ shouldScroll,
+ resetScroll;
return _regeneratorRuntime.wrap(
function _callee$(_context) {
@@ -1896,18 +1898,12 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
if (options._h) {
this.isReady = true;
- } // Default to scroll reset behavior unless explicitly specified to be
- // `false`! This makes the behavior between using `Router#push` and a
- // `<Link />` consistent.
-
- options.scroll = !!((_options$scroll =
- options.scroll) != null
- ? _options$scroll
- : true);
+ }
+
localeChange = options.locale !== this.locale;
if (true) {
- _context.next = 19;
+ _context.next = 18;
break;
}
@@ -1960,7 +1956,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
}
if (!didNavigate) {
- _context.next = 19;
+ _context.next = 18;
break;
}
@@ -1969,7 +1965,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
new Promise(function() {})
);
- case 19:
+ case 18:
if (!options._h) {
this.isSsr = false;
} // marking route changes as a navigation start entry
@@ -2014,7 +2010,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
if (
!(!options._h && this.onlyAHashChange(cleanedAs))
) {
- _context.next = 35;
+ _context.next = 34;
break;
}
@@ -2035,7 +2031,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
);
return _context.abrupt("return", true);
- case 35:
+ case 34:
parsed = (0, _parseRelativeUrl.parseRelativeUrl)(
url
);
@@ -2044,30 +2040,30 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
// get their query parameters to allow ensuring they can be parsed properly
// when rewritten to
- _context.prev = 37;
- _context.next = 40;
+ _context.prev = 36;
+ _context.next = 39;
return this.pageLoader.getPageList();
- case 40:
+ case 39:
pages = _context.sent;
- _context.next = 43;
+ _context.next = 42;
return (0, _routeLoader.getClientBuildManifest)();
- case 43:
+ case 42:
_yield = _context.sent;
rewrites = _yield.__rewrites;
- _context.next = 51;
+ _context.next = 50;
break;
- case 47:
- _context.prev = 47;
- _context.t0 = _context["catch"](37);
+ case 46:
+ _context.prev = 46;
+ _context.t0 = _context["catch"](36);
// If we fail to resolve the page list or client-build manifest, we must
// do a server-side transition:
window.location.href = as;
return _context.abrupt("return", false);
- case 51:
+ case 50:
// If asked to change the current URL we should reload the current page
// (not location.reload() but reload getInitialProps and other Next.js stuffs)
// We also need to set the method = replaceState always
@@ -2115,12 +2111,12 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
);
if (isLocalURL(as)) {
- _context.next = 61;
+ _context.next = 60;
break;
}
if (true) {
- _context.next = 59;
+ _context.next = 58;
break;
}
@@ -2134,18 +2130,18 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
"\nSee more info: https://nextjs.org/docs/messages/invalid-relative-url-external-as"
);
- case 59:
+ case 58:
window.location.href = as;
return _context.abrupt("return", false);
- case 61:
+ case 60:
resolvedAs = delLocale(
delBasePath(resolvedAs),
this.locale
);
if (!(0, _isDynamic.isDynamicRoute)(route)) {
- _context.next = 77;
+ _context.next = 76;
break;
}
@@ -2168,7 +2164,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
(shouldInterpolate && !interpolatedAs.result)
)
) {
- _context.next = 76;
+ _context.next = 75;
break;
}
@@ -2179,7 +2175,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
});
if (!(missingParams.length > 0)) {
- _context.next = 74;
+ _context.next = 73;
break;
}
@@ -2210,11 +2206,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
)
);
- case 74:
- _context.next = 77;
+ case 73:
+ _context.next = 76;
break;
- case 76:
+ case 75:
if (shouldInterpolate) {
as = (0, _utils.formatWithValidation)(
Object.assign({}, _parsedAs, {
@@ -2230,14 +2226,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
Object.assign(query, routeMatch);
}
- case 77:
+ case 76:
Router.events.emit(
"routeChangeStart",
as,
routeProps
);
- _context.prev = 78;
- _context.next = 81;
+ _context.prev = 77;
+ _context.next = 80;
return this.getRouteInfo(
route,
pathname,
@@ -2247,7 +2243,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
routeProps
);
- case 81:
+ case 80:
routeInfo = _context.sent;
(_routeInfo = routeInfo),
(error = _routeInfo.error),
@@ -2256,14 +2252,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
(__N_SSP = _routeInfo.__N_SSP); // handle redirect on client-transition
if (!((__N_SSG || __N_SSP) && props)) {
- _context.next = 108;
+ _context.next = 107;
break;
}
if (
!(props.pageProps && props.pageProps.__N_REDIRECT)
) {
- _context.next = 94;
+ _context.next = 93;
break;
}
@@ -2272,7 +2268,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
// it's not
if (!destination.startsWith("/")) {
- _context.next = 92;
+ _context.next = 91;
break;
}
@@ -2284,7 +2280,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
);
if (!pages.includes(parsedHref.pathname)) {
- _context.next = 92;
+ _context.next = 91;
break;
}
@@ -2300,37 +2296,37 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
this.change(method, newUrl, newAs, options)
);
- case 92:
+ case 91:
window.location.href = destination;
return _context.abrupt(
"return",
new Promise(function() {})
);
- case 94:
+ case 93:
this.isPreview = !!props.__N_PREVIEW; // handle SSG data 404
if (!(props.notFound === SSG_DATA_NOT_FOUND)) {
- _context.next = 108;
+ _context.next = 107;
break;
}
- _context.prev = 96;
- _context.next = 99;
+ _context.prev = 95;
+ _context.next = 98;
return this.fetchComponent("/404");
- case 99:
+ case 98:
notFoundRoute = "/404";
- _context.next = 105;
+ _context.next = 104;
break;
- case 102:
- _context.prev = 102;
- _context.t1 = _context["catch"](96);
+ case 101:
+ _context.prev = 101;
+ _context.t1 = _context["catch"](95);
notFoundRoute = "/_error";
- case 105:
- _context.next = 107;
+ case 104:
+ _context.next = 106;
return this.getRouteInfo(
notFoundRoute,
notFoundRoute,
@@ -2342,10 +2338,10 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
}
);
- case 107:
+ case 106:
routeInfo = _context.sent;
- case 108:
+ case 107:
Router.events.emit(
"beforeHistoryChange",
as,
@@ -2354,10 +2350,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
this.changeState(method, url, as, options);
if (false) {
- } // shallow routing is only allowed for same page URL changes.
-
- isValidShallowRoute =
- options.shallow && this.route === route;
+ }
if (
options._h &&
@@ -2375,30 +2368,36 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
// ensure statusCode is still correct for static 500 page
// when updating query information
props.pageProps.statusCode = 500;
- }
+ } // shallow routing is only allowed for same page URL changes.
- _context.next = 115;
+ isValidShallowRoute =
+ options.shallow && this.route === route;
+ shouldScroll =
+ (_options$scroll = options.scroll) != null
+ ? _options$scroll
+ : !isValidShallowRoute;
+ resetScroll = shouldScroll
+ ? {
+ x: 0,
+ y: 0
+ }
+ : null;
+ _context.next = 116;
return this.set(
route,
pathname,
query,
cleanedAs,
routeInfo,
- forcedScroll ||
- (isValidShallowRoute || !options.scroll
- ? null
- : {
- x: 0,
- y: 0
- })
+ forcedScroll != null ? forcedScroll : resetScroll
)["catch"](function(e) {
if (e.cancelled) error = error || e;
else throw e;
});
- case 115:
+ case 116:
if (!error) {
- _context.next = 118;
+ _context.next = 119;
break;
}
@@ -2410,7 +2409,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
);
throw error;
- case 118:
+ case 119:
if (false) {
}
@@ -2421,21 +2420,21 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
);
return _context.abrupt("return", true);
- case 123:
- _context.prev = 123;
- _context.t2 = _context["catch"](78);
+ case 124:
+ _context.prev = 124;
+ _context.t2 = _context["catch"](77);
if (!_context.t2.cancelled) {
- _context.next = 127;
+ _context.next = 128;
break;
}
return _context.abrupt("return", false);
- case 127:
+ case 128:
throw _context.t2;
- case 128:
+ case 129:
case "end":
return _context.stop();
}
@@ -2444,9 +2443,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
_callee,
this,
[
- [37, 47],
- [78, 123],
- [96, 102]
+ [36, 46],
+ [77, 124],
+ [95, 101]
]
);
})Diff for index.html
@@ -17,7 +17,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.ce858a7353648dcbd41d.js"
+ href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.5ec3e9ad1acca1028feb.js"
as="script"
/>
<link
@@ -62,7 +62,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.ce858a7353648dcbd41d.js"
+ src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.5ec3e9ad1acca1028feb.js"
async=""
></script>
<scriptDiff for link.html
@@ -17,7 +17,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.ce858a7353648dcbd41d.js"
+ href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.5ec3e9ad1acca1028feb.js"
as="script"
/>
<link
@@ -32,7 +32,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/pages/link-b1edcc58b3477620bce2.js"
+ href="/_next/static/chunks/pages/link-670e2914a4b319eea5ad.js"
as="script"
/>
</head>
@@ -67,7 +67,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.ce858a7353648dcbd41d.js"
+ src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.5ec3e9ad1acca1028feb.js"
async=""
></script>
<script
@@ -79,7 +79,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/pages/link-b1edcc58b3477620bce2.js"
+ src="/_next/static/chunks/pages/link-670e2914a4b319eea5ad.js"
async=""
></script>
<script src="/_next/static/BUILD_ID/_buildManifest.js" async=""></script>Diff for withRouter.html
@@ -17,7 +17,7 @@
/>
<link
rel="preload"
- href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.ce858a7353648dcbd41d.js"
+ href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.5ec3e9ad1acca1028feb.js"
as="script"
/>
<link
@@ -62,7 +62,7 @@
async=""
></script>
<script
- src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.ce858a7353648dcbd41d.js"
+ src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.5ec3e9ad1acca1028feb.js"
async=""
></script>
<script
flybayer
pushed a commit
to blitz-js/next.js
that referenced
this pull request
Jun 16, 2021
…#24888) ## Bug - [x] Related issues linked using `fixes #number` - [ ] Integration tests added fixes [vercel#21606](vercel#21606) ### Description When using shallow routing and wanting to scroll to top by setting the `scroll` option to `true` it didn't work. This PR fixes this issue.
2 tasks
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Bug
fixes #numberfixes #21606
Description
When using shallow routing and wanting to scroll to top by setting the
scrolloption totrueit didn't work. This PR fixes this issue.