From 858aa8f39ff6ef93c223994f7adbad00013865a5 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Fri, 28 Feb 2025 21:29:43 +0100 Subject: [PATCH 1/2] feat: allow async `reroute` closes #13176 --- .changeset/cool-donkeys-pump.md | 5 +++++ documentation/docs/30-advanced/20-hooks.md | 2 ++ packages/kit/src/exports/public.d.ts | 2 +- packages/kit/src/runtime/client/client.js | 12 ++++++------ packages/kit/src/runtime/server/respond.js | 2 +- packages/kit/test/apps/basics/src/hooks.js | 8 ++++++++ .../basics/src/routes/reroute/async/+page.svelte | 1 + .../basics/src/routes/reroute/async/a/+page.svelte | 1 + .../basics/src/routes/reroute/async/b/+page.svelte | 5 +++++ packages/kit/test/apps/basics/test/client.test.js | 8 ++++++++ packages/kit/test/apps/basics/test/server.test.js | 7 +++++++ packages/kit/types/index.d.ts | 2 +- 12 files changed, 46 insertions(+), 9 deletions(-) create mode 100644 .changeset/cool-donkeys-pump.md create mode 100644 packages/kit/test/apps/basics/src/routes/reroute/async/+page.svelte create mode 100644 packages/kit/test/apps/basics/src/routes/reroute/async/a/+page.svelte create mode 100644 packages/kit/test/apps/basics/src/routes/reroute/async/b/+page.svelte diff --git a/.changeset/cool-donkeys-pump.md b/.changeset/cool-donkeys-pump.md new file mode 100644 index 000000000000..1d3be96b65a2 --- /dev/null +++ b/.changeset/cool-donkeys-pump.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': minor +--- + +feat: allow async `reroute` diff --git a/documentation/docs/30-advanced/20-hooks.md b/documentation/docs/30-advanced/20-hooks.md index b35e66b73a09..ee459930c904 100644 --- a/documentation/docs/30-advanced/20-hooks.md +++ b/documentation/docs/30-advanced/20-hooks.md @@ -299,6 +299,8 @@ The `lang` parameter will be correctly derived from the returned pathname. Using `reroute` will _not_ change the contents of the browser's address bar, or the value of `event.url`. +Since version 2.18, the `reroute` hook is allowed to be asynchronous, to for example fetch data from your backend to decide where to reroute. Use this carefully and make sure it's fast, as this will delay navigations otherwise. + ### transport This is a collection of _transporters_, which allow you to pass custom types — returned from `load` and form actions — across the server/client boundary. Each transporter contains an `encode` function, which encodes values on the server (or returns `false` for anything that isn't an instance of the type) and a corresponding `decode` function: diff --git a/packages/kit/src/exports/public.d.ts b/packages/kit/src/exports/public.d.ts index f25cc225e194..1e07d3f79d7e 100644 --- a/packages/kit/src/exports/public.d.ts +++ b/packages/kit/src/exports/public.d.ts @@ -814,7 +814,7 @@ export type ClientInit = () => MaybePromise; * The [`reroute`](https://svelte.dev/docs/kit/hooks#Universal-hooks-reroute) hook allows you to modify the URL before it is used to determine which route to render. * @since 2.3.0 */ -export type Reroute = (event: { url: URL }) => void | string; +export type Reroute = (event: { url: URL }) => MaybePromise; /** * The [`transport`](https://svelte.dev/docs/kit/hooks#Universal-hooks-transport) hook allows you to transport custom types across the server/client boundary. diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js index 630f035754a1..809fc9875dcd 100644 --- a/packages/kit/src/runtime/client/client.js +++ b/packages/kit/src/runtime/client/client.js @@ -1198,13 +1198,13 @@ async function load_root_error_page({ status, error, url, route }) { /** * Resolve the relative rerouted URL for a client-side navigation * @param {URL} url - * @returns {URL | undefined} + * @returns {Promise} */ -function get_rerouted_url(url) { - // reroute could alter the given URL, so we pass a copy +async function get_rerouted_url(url) { let rerouted; try { - rerouted = app.hooks.reroute({ url: new URL(url) }) ?? url; + // reroute could alter the given URL, so we pass a copy + rerouted = (await app.hooks.reroute({ url: new URL(url) })) ?? url; if (typeof rerouted === 'string') { const tmp = new URL(url); // do not mutate the incoming URL @@ -1246,7 +1246,7 @@ async function get_navigation_intent(url, invalidating) { if (is_external_url(url, base, app.hash)) return; if (__SVELTEKIT_CLIENT_ROUTING__) { - const rerouted = get_rerouted_url(url); + const rerouted = await get_rerouted_url(url); if (!rerouted) return; const path = get_url_path(rerouted); @@ -1997,7 +1997,7 @@ export async function preloadCode(pathname) { } if (__SVELTEKIT_CLIENT_ROUTING__) { - const rerouted = get_rerouted_url(url); + const rerouted = await get_rerouted_url(url); if (!rerouted || !routes.find((route) => route.exec(get_url_path(rerouted)))) { throw new Error(`'${pathname}' did not match any routes`); } diff --git a/packages/kit/src/runtime/server/respond.js b/packages/kit/src/runtime/server/respond.js index 05b1934d0595..ee53d81c6c00 100644 --- a/packages/kit/src/runtime/server/respond.js +++ b/packages/kit/src/runtime/server/respond.js @@ -115,7 +115,7 @@ export async function respond(request, options, manifest, state) { try { // reroute could alter the given URL, so we pass a copy - resolved_path = options.hooks.reroute({ url: new URL(url) }) ?? url.pathname; + resolved_path = (await options.hooks.reroute({ url: new URL(url) })) ?? url.pathname; } catch { return text('Internal Server Error', { status: 500 diff --git a/packages/kit/test/apps/basics/src/hooks.js b/packages/kit/test/apps/basics/src/hooks.js index 3897bb949252..379788226c64 100644 --- a/packages/kit/test/apps/basics/src/hooks.js +++ b/packages/kit/test/apps/basics/src/hooks.js @@ -27,6 +27,14 @@ export const reroute = ({ url }) => { throw new Error('Server Error - Should trigger 500 response'); } + if (url.pathname === '/reroute/async/a') { + return new Promise((resolve) => { + setTimeout(() => { + resolve('/reroute/async/b'); + }, 100); + }); + } + if (url.pathname in mapping) { return mapping[url.pathname]; } diff --git a/packages/kit/test/apps/basics/src/routes/reroute/async/+page.svelte b/packages/kit/test/apps/basics/src/routes/reroute/async/+page.svelte new file mode 100644 index 000000000000..a7a995fcde0c --- /dev/null +++ b/packages/kit/test/apps/basics/src/routes/reroute/async/+page.svelte @@ -0,0 +1 @@ +Go to url that should be rewritten diff --git a/packages/kit/test/apps/basics/src/routes/reroute/async/a/+page.svelte b/packages/kit/test/apps/basics/src/routes/reroute/async/a/+page.svelte new file mode 100644 index 000000000000..9767ca488e13 --- /dev/null +++ b/packages/kit/test/apps/basics/src/routes/reroute/async/a/+page.svelte @@ -0,0 +1 @@ +

Should have been rewritten to /reroute/async/b

diff --git a/packages/kit/test/apps/basics/src/routes/reroute/async/b/+page.svelte b/packages/kit/test/apps/basics/src/routes/reroute/async/b/+page.svelte new file mode 100644 index 000000000000..e405729c9633 --- /dev/null +++ b/packages/kit/test/apps/basics/src/routes/reroute/async/b/+page.svelte @@ -0,0 +1,5 @@ + + +

Successfully rewritten, URL should still show a: {page.url.pathname}

diff --git a/packages/kit/test/apps/basics/test/client.test.js b/packages/kit/test/apps/basics/test/client.test.js index df67597356a2..8dd641e903a2 100644 --- a/packages/kit/test/apps/basics/test/client.test.js +++ b/packages/kit/test/apps/basics/test/client.test.js @@ -1402,6 +1402,14 @@ test.describe('reroute', () => { ); }); + test('Apply async reroute during client side navigation', async ({ page }) => { + await page.goto('/reroute/async'); + await page.click("a[href='/reroute/async/a']"); + expect(await page.textContent('h1')).toContain( + 'Successfully rewritten, URL should still show a: /reroute/async/a' + ); + }); + test('Apply reroute after client-only redirects', async ({ page }) => { await page.goto('/reroute/client-only-redirect'); expect(await page.textContent('h1')).toContain('Successfully rewritten'); diff --git a/packages/kit/test/apps/basics/test/server.test.js b/packages/kit/test/apps/basics/test/server.test.js index e56b8231fb46..56ea68fa80e7 100644 --- a/packages/kit/test/apps/basics/test/server.test.js +++ b/packages/kit/test/apps/basics/test/server.test.js @@ -668,6 +668,13 @@ test.describe('reroute', () => { ); }); + test('Apply async reroute when directly accessing a page', async ({ page }) => { + await page.goto('/reroute/async/a'); + expect(await page.textContent('h1')).toContain( + 'Successfully rewritten, URL should still show a: /reroute/async/a' + ); + }); + test('Returns a 500 response if reroute throws an error on the server', async ({ page }) => { const response = await page.goto('/reroute/error-handling/server-error'); expect(response?.status()).toBe(500); diff --git a/packages/kit/types/index.d.ts b/packages/kit/types/index.d.ts index f7ca3bce33f9..32926fa6428e 100644 --- a/packages/kit/types/index.d.ts +++ b/packages/kit/types/index.d.ts @@ -796,7 +796,7 @@ declare module '@sveltejs/kit' { * The [`reroute`](https://svelte.dev/docs/kit/hooks#Universal-hooks-reroute) hook allows you to modify the URL before it is used to determine which route to render. * @since 2.3.0 */ - export type Reroute = (event: { url: URL }) => void | string; + export type Reroute = (event: { url: URL }) => MaybePromise; /** * The [`transport`](https://svelte.dev/docs/kit/hooks#Universal-hooks-transport) hook allows you to transport custom types across the server/client boundary. From 1bece2f63e5dd288a954f506e04bb6849d41a0ba Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Tue, 4 Mar 2025 12:46:25 +0100 Subject: [PATCH 2/2] Update documentation/docs/30-advanced/20-hooks.md Co-authored-by: Rich Harris --- documentation/docs/30-advanced/20-hooks.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/30-advanced/20-hooks.md b/documentation/docs/30-advanced/20-hooks.md index ee459930c904..e68cc32a3e8e 100644 --- a/documentation/docs/30-advanced/20-hooks.md +++ b/documentation/docs/30-advanced/20-hooks.md @@ -299,7 +299,7 @@ The `lang` parameter will be correctly derived from the returned pathname. Using `reroute` will _not_ change the contents of the browser's address bar, or the value of `event.url`. -Since version 2.18, the `reroute` hook is allowed to be asynchronous, to for example fetch data from your backend to decide where to reroute. Use this carefully and make sure it's fast, as this will delay navigations otherwise. +Since version 2.18, the `reroute` hook can be asynchronous, allowing it to (for example) fetch data from your backend to decide where to reroute to. Use this carefully and make sure it's fast, as it will delay navigation otherwise. ### transport