fix(nuxt): respect the scroll behavior set by scrollToTop
#31914
Conversation
|
|
@nuxt/kit
nuxt
@nuxt/schema
@nuxt/rspack-builder
@nuxt/vite-builder
@nuxt/webpack-builder
commit: |
CodSpeed Performance ReportMerging #31914 will not alter performanceComparing Summary
|
WalkthroughThe changes modify Nuxt's page transition and scroll behaviour handling. In the page runtime code, the 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
💤 Files with no reviewable changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (3)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
packages/nuxt/src/pages/runtime/page.ts (1)
157-166: Consider using undefined assignment instead of delete operator.The transition hooks implementation is good, adding proper lifecycle hooks to manage the transition state. However, at line 162, using the
deleteoperator can impact performance.- delete nuxtApp._runningTransition + nuxtApp._runningTransition = undefined🧰 Tools
🪛 Biome (1.9.4)
[error] 162-162: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
test/fixtures/basic/pages/route-scroll-behavior/scroll-to-top.vue (1)
1-7: Consider translating the console log message to English.The hook implementation is correct, but the console log message is in a non-English language which might make debugging harder for developers who don't understand it.
- console.log('動畫完成', Data) + console.log('Animation complete', Data)packages/nuxt/src/pages/runtime/router.options.ts (2)
30-33:scrollToTopmeta value should be normalised to a strict boolean
routeAllowsScrollToTopmay becomeundefined,null, a truthy string, etc. In that case the comparison=== falseworks, but the variable is later used only for an early return.
For clarity and to avoid subtle truthiness bugs, consider casting toBooleanfirst:-const routeAllowsScrollToTop = typeof to.meta.scrollToTop === 'function' - ? to.meta.scrollToTop(to, from) - : to.meta.scrollToTop +const routeAllowsScrollToTop = Boolean( + typeof to.meta.scrollToTop === 'function' + ? to.meta.scrollToTop(to, from) + : to.meta.scrollToTop, +) + +if (!routeAllowsScrollToTop) { return false }This also removes the redundant second
ifcheck.
43-43: Type-safety for the_runningTransitionflag
nuxtApp._runningTransitionis accessed without declaration. To aid IDEs and TS users, augmentNuxtApp’s type via module-augmentation so the property is no longerany.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
packages/nuxt/src/pages/runtime/page.ts(1 hunks)packages/nuxt/src/pages/runtime/router.options.ts(2 hunks)test/basic.test.ts(1 hunks)test/fixtures/basic/pages/route-scroll-behavior/scroll-to-top.vue(1 hunks)test/fixtures/basic/pages/route-scroll-behavior/scroll-to-top/[id].vue(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
packages/nuxt/src/pages/runtime/router.options.ts (1)
packages/nuxt/src/app/components/utils.ts (1)
isChangingPage(34-47)
test/basic.test.ts (1)
test/utils.ts (1)
renderPage(11-50)
🪛 Biome (1.9.4)
packages/nuxt/src/pages/runtime/page.ts
[error] 162-162: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
🔇 Additional comments (7)
test/fixtures/basic/pages/route-scroll-behavior/scroll-to-top/[id].vue (2)
1-9: Looks good - dynamic route with scrollToTop metadata defined correctly.The implementation correctly defines the page metadata with a dynamic
scrollToTopfunction that reads from the route query parameters. This pattern allows for conditional scroll behavior based on URL parameters.
11-15: Clean and straightforward template.The template simply renders the route parameter in an h2 element, which is appropriate for testing the scroll behavior functionality.
packages/nuxt/src/pages/runtime/page.ts (1)
144-148: Good improvement by wrapping in nextTick.Deferring the page loading end hook into the next tick ensures the DOM is updated before declaring the page as loaded, which helps with proper timing of scroll behavior.
test/basic.test.ts (1)
3020-3046: Well-written tests for scroll behavior verification.These tests properly verify the scroll behavior functionality:
- First test confirms that when
scrollToTopisfalse, the scroll position is preserved- Second test confirms that when
scrollToTopistrue, the page scrolls back to the topThe tests include proper scrolling of elements into view, waiting for scroll position changes, and verifying the final scroll position.
test/fixtures/basic/pages/route-scroll-behavior/scroll-to-top.vue (1)
9-43: Good test page setup with clear navigation options.The template effectively sets up a test environment for scroll behavior:
- Includes a large spacer div to enable scrolling
- Provides clearly labeled navigation links that test different scroll behaviors
- Sets appropriate IDs on the links for test selection
The links are properly configured with different route parameters and query parameters to test the various scroll behavior scenarios.
packages/nuxt/src/pages/runtime/router.options.ts (2)
1-1: Confirm compatibility ofSTART_LOCATIONimport with supported Vue-Router versions
START_LOCATIONis only exported in Vue-Router ≥ 4.2.0.
If Nuxt still allows installing an older minor (e.g. 4.1.x) the build will break at compile-time.
Please double-check thevue-routerpeer-dependency range or guard the import with a re-export/polyfill.
34-41:⚠️ Potential issueSaved position
0,0is currently discarded
let position: ScrollPosition = savedPosition || undefinedtreats{ left: 0, top: 0 }as falsy, so a browser back-navigation that legitimately stored (0,0) will be overwritten by the automatic “scroll-to-top on page change” block below.A safer guard:
-let position: ScrollPosition = savedPosition || undefined +let position: ScrollPosition = savedPosition ?? undefinedThe nullish coalescing operator preserves
{ left: 0, top: 0 }.Likely an incorrect or invalid review comment.
|
did you take a look at the test failure? |
|
Thanks for the PR! I believe that when changing routes without the need for a rerender, the default scroll behavior should not scroll to the top, which would be more reasonable. In the example I provided in the #31654, a page |
|
I agree with @serkodev that we also should know not to scroll to the top if there's no rerender (for example, when the page key is provided and does not change), so I've marked those issues as not (yet) resolved but this does give a workaround for them in the mean time. |
🔗 Linked issue
replaceroute when route key is defined #31654📚 Description
Fix an issue where setting
scrollToTop: falsedid not preserve the current scroll position when navigating within the same page component.After this PR, #31654, #31638 and #25241 can now be addressed by using the following approach to prevent scrolling to the top when navigating within the same page component:
Additionally, this PR also corrects the registration and invocation order of the
page:loading:endhook.In current, when navigating within the same page component, the first navigation triggers
nuxtApp.callHook('page:loading:end')insidepage.tsbeforenuxtApp.hooks.hookOnce('page:loading:end', () => { ... })is registered inrouter.options.ts.This explains why, in the provided minimal reproduction, the page does not scroll to the top on the first navigation but does on the second navigation.
https://stackblitz.com/edit/github-c5oaac3b-jwythaqo?file=pages/foo/%5Bid%5D.vue
Lastly, this PR also updates the
hookToWaitcondition inrouter.options.tsto ensure that any method of enabling<Transition>is properly recognized.Thank you very much for your time and review! If there’s anything I might have overlooked, please feel free to let me know.