Repository navigation
svelte: Update SvelteKit to v3 - #14906
Merged
Merged
Conversation
The existing test only covers that the search input keeps focus after pressing Enter. This test additionally ensures that the search results are shown from the top of the page, even when the form is submitted from a scrolled page.
This updates `@sveltejs/kit` to v3, `@sveltejs/adapter-static` to v4 and `@sveltejs/enhanced-img` to v1.
SvelteKit 3 removes the `prerender.origin` option in favor of `paths.origin`, and fails to load the configuration while it is still set.
SvelteKit 3 expects `tsconfig.json` to extend `$app/tsconfig` instead of the generated `.svelte-kit/tsconfig.json`. The `include` list is now explicit, since `$app/tsconfig` does not provide one, and the compiler options that `$app/tsconfig` already sets are removed.
SvelteKit 3 combines the removed `keepFocus` and `noScroll` options of `goto()` into a single `reset` option.
SvelteKit 3 rejects `redirect()` calls to external URLs unless they pass the `external` option. The documentation, repository and install redirects all point to other sites, so they now pass `external: true`.
Storybook removes the SvelteKit plugin that defines this constant, which breaks `$app/paths` in `storybook build` with SvelteKit 3. The Storybook config defines the constant until Storybook supports SvelteKit 3.
SvelteKit 3 removes the `keepFocus` option of `goto()`. Its replacement `reset: false` keeps the focus in the search input, but also skips the scroll reset, so the submit handler now scrolls to the top after the navigation.
SvelteKit 3 can run the `afterNavigate()` callbacks of the initial navigation before the component has mounted, so the search input on the front page was no longer focused. Focusing it in `onMount()` works regardless of that order, because SvelteKit 3 no longer resets the focus once an element other than `<body>` is focused.
SvelteKit 3 runs the `afterNavigate()` callbacks of the initial navigation before its route announcer has mounted, so the announcer stays empty after the first client-side navigation. The search and support tests make only one client-side navigation before their snapshots, which therefore no longer contain the announced page title.
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
2 participants
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.
This updates SvelteKit to v3, together with
@sveltejs/adapter-staticv4 and@sveltejs/enhanced-imgv1. The first commit only bumps the dependencies, and each following commit adapts one part of the app to a breaking change. The intermediate commits therefore do not build, but the individual adjustments are easier to review this way.Most adjustments follow the migration guide:
paths.originreplacesprerender.origin,tsconfig.jsonextends$app/tsconfig, external redirects passexternal: true, andreset: falsereplaces the removedkeepFocusandnoScrolloptions ofgoto(). Sincereset: falsealso skips the scroll reset,SearchFormscrolls to the top manually after a search, which the new e2e test covers.SvelteKit 3 can apparently run the
afterNavigate()callbacks of the initial navigation before the components have mounted, soSearchFormnow focuses its input inonMount(). The same bug seems to affect the route announcer of SvelteKit too, which stays silent after the first client-side navigation. Two aria snapshots therefore no longer contain the announced page title.Storybook does not fully support SvelteKit 3 yet, so the Storybook config defines a workaround for now.
Related