Add onNavigate lifecycle function, to enable view transitions
#9605
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@sveltejs/kit': minor | ||
| --- | ||
|
|
||
| feat: onNavigate lifecycle function |
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -89,6 +89,9 @@ export function create_client(app, target) { | |
| /** @type {Array<(navigation: import('@sveltejs/kit').BeforeNavigate) => void>} */ | ||
| before_navigate: [], | ||
|
|
||
| /** @type {Array<(navigation: import('@sveltejs/kit').OnNavigate) => import('types').MaybePromise<(() => void) | void>>} */ | ||
| on_navigate: [], | ||
|
|
||
| /** @type {Array<(navigation: import('@sveltejs/kit').AfterNavigate) => void>} */ | ||
| after_navigate: [] | ||
| }; | ||
|
|
@@ -299,7 +302,8 @@ export function create_client(app, target) { | |
| url: new URL(location.href) | ||
| }, | ||
| willUnload: false, | ||
| type: 'enter', | ||
| complete: Promise.resolve() | ||
| }; | ||
| callbacks.after_navigate.forEach((fn) => fn(navigation)); | ||
|
|
||
|
|
@@ -910,30 +914,17 @@ export function create_client(app, target) { | |
| function before_navigate({ url, type, intent, delta }) { | ||
| let should_block = false; | ||
|
|
||
| const nav = create_navigation(current, intent, url, type); | ||
|
|
||
| if (delta !== undefined) { | ||
| nav.navigation.delta = delta; | ||
| } | ||
|
|
||
| const cancellable = { | ||
| ...nav.navigation, | ||
| cancel: () => { | ||
| should_block = true; | ||
| nav.reject(new Error('navigation was cancelled')); | ||
| } | ||
| }; | ||
|
|
||
|
|
@@ -942,7 +933,7 @@ export function create_client(app, target) { | |
| callbacks.before_navigate.forEach((fn) => fn(cancellable)); | ||
| } | ||
|
|
||
| return should_block ? null : nav; | ||
| } | ||
|
|
||
| /** | ||
|
|
@@ -975,9 +966,9 @@ export function create_client(app, target) { | |
| blocked | ||
| }) { | ||
| const intent = get_navigation_intent(url, false); | ||
| const nav = before_navigate({ url, type, delta, intent }); | ||
|
|
||
| if (!nav) { | ||
| blocked(); | ||
| return; | ||
| } | ||
|
|
@@ -990,7 +981,7 @@ export function create_client(app, target) { | |
| navigating = true; | ||
|
|
||
| if (started) { | ||
| stores.navigating.set(nav.navigation); | ||
| } | ||
|
|
||
| token = nav_token; | ||
|
|
@@ -1017,7 +1008,10 @@ export function create_client(app, target) { | |
| url = intent?.url || url; | ||
|
|
||
| // abort if user navigated during update | ||
| if (token !== nav_token) { | ||
| nav.reject(new Error('navigation was aborted')); | ||
|
There was a problem hiding this comment. this is getting thrown when updating query params via There was a problem hiding this comment. I think you should open an issue with a reproduction. There was a problem hiding this comment. This should be fixed by 1.24.1 (tried to update ?) #10666 There was a problem hiding this comment. Just updated and no more error, thanks |
||
| return false; | ||
| } | ||
|
|
||
| if (navigation_result.type === 'redirect') { | ||
| if (redirect_chain.length > 10 || redirect_chain.includes(url.pathname)) { | ||
|
|
@@ -1093,6 +1087,28 @@ export function create_client(app, target) { | |
| navigation_result.props.page.url = url; | ||
| } | ||
|
|
||
| const after_navigate = ( | ||
| await Promise.all( | ||
| callbacks.on_navigate.map((fn) => | ||
| fn(/** @type {import('@sveltejs/kit').OnNavigate} */ (nav.navigation)) | ||
| ) | ||
| ) | ||
| ).filter((value) => typeof value === 'function'); | ||
|
|
||
| if (after_navigate.length > 0) { | ||
| function cleanup() { | ||
| callbacks.after_navigate = callbacks.after_navigate.filter( | ||
| // @ts-ignore | ||
| (fn) => !after_navigate.includes(fn) | ||
| ); | ||
| } | ||
|
|
||
| after_navigate.push(cleanup); | ||
|
|
||
| // @ts-ignore | ||
| callbacks.after_navigate.push(...after_navigate); | ||
| } | ||
|
|
||
| root.$set(navigation_result.props); | ||
| } else { | ||
| initialize(navigation_result); | ||
|
|
@@ -1142,8 +1158,10 @@ export function create_client(app, target) { | |
| restore_snapshot(current_history_index); | ||
| } | ||
|
|
||
| nav.fulfil(undefined); | ||
|
|
||
| callbacks.after_navigate.forEach((fn) => | ||
| fn(/** @type {import('@sveltejs/kit').AfterNavigate} */ (nav.navigation)) | ||
| ); | ||
| stores.navigating.set(null); | ||
|
|
||
|
|
@@ -1339,6 +1357,17 @@ export function create_client(app, target) { | |
| }); | ||
| }, | ||
|
|
||
| on_navigate: (fn) => { | ||
| onMount(() => { | ||
| callbacks.on_navigate.push(fn); | ||
|
|
||
| return () => { | ||
| const i = callbacks.on_navigate.indexOf(fn); | ||
| callbacks.on_navigate.splice(i, 1); | ||
| }; | ||
| }); | ||
| }, | ||
|
|
||
| disable_scroll_handling: () => { | ||
| if (DEV && started && !updating) { | ||
| throw new Error('Can only disable scroll handling during navigation'); | ||
|
|
@@ -1444,19 +1473,17 @@ export function create_client(app, target) { | |
| persist_state(); | ||
|
|
||
| if (!navigating) { | ||
| const nav = create_navigation(current, undefined, null, 'leave'); | ||
|
|
||
| // If we're navigating, beforeNavigate was already called. If we end up in here during navigation, | ||
| // it's due to an external or full-page-reload link, for which we don't want to call the hook again. | ||
| /** @type {import('@sveltejs/kit').BeforeNavigate} */ | ||
| const navigation = { | ||
| ...nav.navigation, | ||
| cancel: () => { | ||
| should_block = true; | ||
| nav.reject(new Error('navigation was cancelled')); | ||
| } | ||
| }; | ||
|
|
||
| callbacks.before_navigate.forEach((fn) => fn(navigation)); | ||
|
|
@@ -1990,6 +2017,50 @@ function reset_focus() { | |
| } | ||
| } | ||
|
|
||
| /** | ||
| * @param {import('./types').NavigationState} current | ||
| * @param {import('./types').NavigationIntent | undefined} intent | ||
| * @param {URL | null} url | ||
| * @param {Exclude<import('@sveltejs/kit').NavigationType, 'enter'>} type | ||
| */ | ||
| function create_navigation(current, intent, url, type) { | ||
| /** @type {(value: any) => void} */ | ||
| let fulfil; | ||
|
|
||
| /** @type {(error: any) => void} */ | ||
| let reject; | ||
|
|
||
| const complete = new Promise((f, r) => { | ||
| fulfil = f; | ||
| reject = r; | ||
| }); | ||
|
|
||
| /** @type {import('@sveltejs/kit').Navigation} */ | ||
| const navigation = { | ||
| from: { | ||
| params: current.params, | ||
| route: { id: current.route?.id ?? null }, | ||
| url: current.url | ||
| }, | ||
| to: url && { | ||
| params: intent?.params ?? null, | ||
| route: { id: intent?.route?.id ?? null }, | ||
| url | ||
| }, | ||
| willUnload: !intent, | ||
| type, | ||
| complete | ||
| }; | ||
|
|
||
| return { | ||
| navigation, | ||
| // @ts-expect-error | ||
| fulfil, | ||
| // @ts-expect-error | ||
| reject | ||
| }; | ||
| } | ||
|
|
||
| if (DEV) { | ||
| // Nasty hack to silence harmless warnings the user can do nothing about | ||
| const console_warn = console.warn; | ||
|
|
||
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
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
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
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
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
File renamed without changes.
File renamed without changes.
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Feels a bit loose to just return strings here. Should we declare a set of
consts that are reused? And should it just be "navigation was aborted" or a more techincal/stable-looking thing likeNAV_ABORTED?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are you saying the error message part of the public API and the user needs to check which error message is present?