feat(site): preserve scroll position on framework switch (ClientRouter)#609
Closed
feat(site): preserve scroll position on framework switch (ClientRouter)#609
Conversation
…uter Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
8 tasks
Contributor
📦 Bundle Size Report
Total: 39.71 kB · 0 B · 0% Entry BreakdownSubpath sizes are the additional bytes on top of the root entry point, measured by bundling root + subpath together and subtracting the root-only size.
|
| Entry | Base | PR | Diff | % | |
|---|---|---|---|---|---|
. |
3.10 kB | 3.10 kB | 0 B | 0% | ✅ |
./dom |
2.58 kB | 2.58 kB | 0 B | 0% | ✅ |
| total | 5.68 kB | 5.68 kB | 0 B | 0% |
@videojs/element
| Entry | Base | PR | Diff | % | |
|---|---|---|---|---|---|
. |
817 B | 817 B | 0 B | 0% | ✅ |
./context |
823 B | 823 B | 0 B | 0% | ✅ |
| total | 1.60 kB | 1.60 kB | 0 B | 0% |
@videojs/icons
| Entry | Base | PR | Diff | % | |
|---|---|---|---|---|---|
./react |
2.10 kB | 2.10 kB | 0 B | 0% | ✅ |
./html |
1.37 kB | 1.37 kB | 0 B | 0% | ✅ |
| total | 3.46 kB | 3.46 kB | 0 B | 0% |
@videojs/react
| Entry | Base | PR | Diff | % | |
|---|---|---|---|---|---|
. |
7.69 kB | 7.69 kB | 0 B | 0% | ✅ |
./audio |
266 B | 266 B | 0 B | 0% | ✅ |
./background |
268 B | 268 B | 0 B | 0% | ✅ |
./video |
7.72 kB | 7.72 kB | 0 B | 0% | ✅ |
| total | 15.92 kB | 15.92 kB | 0 B | 0% |
@videojs/store
| Entry | Base | PR | Diff | % | |
|---|---|---|---|---|---|
. |
1.29 kB | 1.29 kB | 0 B | 0% | ✅ |
./html |
468 B | 468 B | 0 B | 0% | ✅ |
./react |
199 B | 199 B | 0 B | 0% | ✅ |
| total | 1.94 kB | 1.94 kB | 0 B | 0% |
@videojs/utils
| Entry | Base | PR | Diff | % | |
|---|---|---|---|---|---|
./array |
104 B | 104 B | 0 B | 0% | ✅ |
./dom |
684 B | 684 B | 0 B | 0% | ✅ |
./events |
227 B | 227 B | 0 B | 0% | ✅ |
./function |
197 B | 197 B | 0 B | 0% | ✅ |
./object |
119 B | 119 B | 0 B | 0% | ✅ |
./predicate |
265 B | 265 B | 0 B | 0% | ✅ |
./string |
110 B | 110 B | 0 B | 0% | ✅ |
./style |
185 B | 185 B | 0 B | 0% | ✅ |
./time |
478 B | 478 B | 0 B | 0% | ✅ |
./number |
158 B | 158 B | 0 B | 0% | ✅ |
| total | 2.47 kB | 2.47 kB | 0 B | 0% |
ℹ️ How to interpret
Sizes are minified + brotli, measured with esbuild.
Package totals are computed as root size + marginal subpath costs.
Subpath marginal cost = (root + subpath bundled together) − root alone.
| Icon | Meaning |
|---|---|
| ✅ | No change |
| 🔺 | Increased ≤ 10% |
| 🔴 | Increased > 10% |
| 🔽 | Decreased |
| 🆕 | New (no baseline) |
Run pnpm size locally to check current sizes.
Collaborator
Author
|
We have some scripts that run in head that assume a full page navigation. More work is required before we switch to a SPA app. For now, #608 will address this issue! |
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
Preserves scroll position when switching frameworks (React ↔ HTML) on docs pages where the slug stays the same. Converts the site to an SPA hybrid using Astro's
ClientRouter, which intercepts navigation and swaps DOM without a full page reload.navigate()fromastro:transitions/clientinstead ofwindow.locationassignmentscrollYbefore navigation, restores in.then()after DOM swapdata-astro-reruntoThemeInitandStyleInitso inline scripts re-execute after SPA swapDocsSidebarRestorationto listen for both native and Astro lifecycle eventsBake-off companion: #608 (pagereveal approach)
Closes #484
Approach: Why
ClientRouter?Astro's
ClientRouterturns navigation into DOM swaps — no full page reload means scroll position can be trivially captured and restored via a promise. Side benefits include faster navigation and smoother transitions across the entire site.Changes
Base.astro<ClientRouter />to<head>— enables SPA mode site-wideSelectors.tsxwindow.locationwithnavigate()+ scroll restoreJSPickerClient.tsxStyleInit.astrodata-astro-rerunsohtml[data-style]updates after SPA swapThemeInit.astrodata-astro-rerunso dark mode class persists after SPA swapDocsSidebarRestoration.astroastro:before-swap/astro:after-swaplisteners alongside native events; added initial load restoreRisks
is:inlinescripts not re-running after SPA navdata-astro-rerunon StyleInit + ThemeInitview-transition-name: noneon html/bodyTest plan
pnpm dev, navigate to a docs page, scroll to middle, switch framework via sidebar dropdown → scroll preserved, no flicker🤖 Generated with Claude Code