diff --git a/.changeset/strange-roses-sell.md b/.changeset/strange-roses-sell.md new file mode 100644 index 000000000000..563e74485b85 --- /dev/null +++ b/.changeset/strange-roses-sell.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': patch +--- + +[breaking] Make client-side router ignore links outside %sveltekit.body% diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js index 2096b1836cef..7d05d6490976 100644 --- a/packages/kit/src/runtime/client/client.js +++ b/packages/kit/src/runtime/client/client.js @@ -75,7 +75,7 @@ function check_for_removed_attributes() { /** * @param {{ - * target: Element; + * target: HTMLElement; * base: string; * }} opts * @returns {import('./types').Client} @@ -1385,12 +1385,12 @@ export function create_client({ target, base }) { }, 20); }; - addEventListener('touchstart', trigger_prefetch); - addEventListener('mousemove', handle_mousemove); - addEventListener('sveltekit:trigger_prefetch', trigger_prefetch); + target.addEventListener('touchstart', trigger_prefetch); + target.addEventListener('mousemove', handle_mousemove); + target.addEventListener('sveltekit:trigger_prefetch', trigger_prefetch); /** @param {MouseEvent} event */ - addEventListener('click', (event) => { + target.addEventListener('click', (event) => { // Adapted from https://github.com/visionmedia/page.js // MIT license https://github.com/visionmedia/page.js#license if (event.button || event.which !== 1) return; diff --git a/packages/kit/test/apps/basics/src/app.html b/packages/kit/test/apps/basics/src/app.html index dd9910661cc3..4f4316bd9ff4 100644 --- a/packages/kit/test/apps/basics/src/app.html +++ b/packages/kit/test/apps/basics/src/app.html @@ -8,6 +8,7 @@ %sveltekit.head% - %sveltekit.body% +
%sveltekit.body%
+ outside app target diff --git a/packages/kit/test/apps/basics/src/routes/routing/link-outside-app-target/source/+page.svelte b/packages/kit/test/apps/basics/src/routes/routing/link-outside-app-target/source/+page.svelte new file mode 100644 index 000000000000..f30d440fe4a2 --- /dev/null +++ b/packages/kit/test/apps/basics/src/routes/routing/link-outside-app-target/source/+page.svelte @@ -0,0 +1,8 @@ + + +

source: {count}

diff --git a/packages/kit/test/apps/basics/src/routes/routing/link-outside-app-target/state.js b/packages/kit/test/apps/basics/src/routes/routing/link-outside-app-target/state.js new file mode 100644 index 000000000000..ab2ad88ec9e6 --- /dev/null +++ b/packages/kit/test/apps/basics/src/routes/routing/link-outside-app-target/state.js @@ -0,0 +1,5 @@ +export let count = 0; + +export function increment() { + count += 1; +} diff --git a/packages/kit/test/apps/basics/src/routes/routing/link-outside-app-target/target/+page.svelte b/packages/kit/test/apps/basics/src/routes/routing/link-outside-app-target/target/+page.svelte new file mode 100644 index 000000000000..13dfee7b0d89 --- /dev/null +++ b/packages/kit/test/apps/basics/src/routes/routing/link-outside-app-target/target/+page.svelte @@ -0,0 +1,5 @@ + + +

target: {count}

diff --git a/packages/kit/test/apps/basics/test/client.test.js b/packages/kit/test/apps/basics/test/client.test.js index 7531f81ffae9..65aa6cdc7821 100644 --- a/packages/kit/test/apps/basics/test/client.test.js +++ b/packages/kit/test/apps/basics/test/client.test.js @@ -805,6 +805,13 @@ test.describe('Routing', () => { await page.goForward(); expect(await page.textContent('h1')).toBe('hello'); }); + + test('ignores clicks outside the app target', async ({ page }) => { + await page.goto('/routing/link-outside-app-target/source'); + + await page.click('[href="/routing/link-outside-app-target/target"]'); + expect(await page.textContent('h1')).toBe('target: 0'); + }); }); test.describe('Shadow DOM', () => {