diff --git a/.changeset/neat-pots-flash.md b/.changeset/neat-pots-flash.md new file mode 100644 index 000000000000..80fa9c864876 --- /dev/null +++ b/.changeset/neat-pots-flash.md @@ -0,0 +1,6 @@ +--- +"create-svelte": patch +"@sveltejs/kit": patch +--- + +[breaking] Replace `sveltekit:*` with valid HTML attributes like `data-sveltekit-*` diff --git a/documentation/docs/09-a-options.md b/documentation/docs/09-a-options.md index ac5f6206ac8f..c5184f7793a9 100644 --- a/documentation/docs/09-a-options.md +++ b/documentation/docs/09-a-options.md @@ -2,16 +2,16 @@ title: Anchor options --- -### sveltekit:prefetch +### data-sveltekit-prefetch SvelteKit uses code splitting to break your app into small chunks (one per route), ensuring fast startup times. For _dynamic_ routes, such as our `src/routes/blog/[slug]/+page.svelte` example, that's not enough. In order to render the blog post, we need to fetch the data for it, and we can't do that until we know what `slug` is. In the worst case, that could cause lag as the browser waits for the data to come back from the server. -We can mitigate that by _prefetching_ the data. Adding a `sveltekit:prefetch` attribute to a link... +We can mitigate that by _prefetching_ the data. Adding a `data-sveltekit-prefetch` attribute to a link... ```html -What is SvelteKit? +What is SvelteKit? ``` ...will cause SvelteKit to run the page's `load` function as soon as the user hovers over the link (on a desktop) or touches it (on mobile), rather than waiting for the `click` event to trigger navigation. Typically, this buys us an extra couple of hundred milliseconds, which is the difference between a user interface that feels laggy, and one that feels snappy. @@ -20,28 +20,28 @@ Note that prefetching will not work if the [`router`](/docs/page-options#router) You can also programmatically invoke `prefetch` from `$app/navigation`. -### sveltekit:reload +### data-sveltekit-reload By default, the SvelteKit runtime intercepts clicks on `` elements and bypasses the normal browser navigation for relative (same-origin) URLs that match one of your page routes. We sometimes need to tell SvelteKit that certain links need to be handled by normal browser navigation. Examples of this might be linking to another page on your domain that's not part of your SvelteKit app or linking to an endpoint. -Adding a `sveltekit:reload` attribute to a link... +Adding a `data-sveltekit-reload` attribute to a link... ```html -Path +Path ``` ...will cause browser to navigate via a full page reload when the link is clicked. Links with a `rel="external"` attribute will receive the same treatment. In addition, they will be ignored during [prerendering](https://kit.svelte.dev/docs/page-options#prerender). -### sveltekit:noscroll +### data-sveltekit-noscroll When navigating to internal links, SvelteKit mirrors the browser's default navigation behaviour: it will change the scroll position to 0,0 so that the user is at the very top left of the page (unless the link includes a `#hash`, in which case it will scroll to the element with a matching ID). -In certain cases, you may wish to disable this behaviour. Adding a `sveltekit:noscroll` attribute to a link... +In certain cases, you may wish to disable this behaviour. Adding a `data-sveltekit-noscroll` attribute to a link... ```html -Path +Path ``` ...will prevent scrolling after the link is clicked. diff --git a/documentation/docs/80-migrating.md b/documentation/docs/80-migrating.md index 1ef080470946..69f7bdeaeaee 100644 --- a/documentation/docs/80-migrating.md +++ b/documentation/docs/80-migrating.md @@ -133,8 +133,8 @@ This caused problems and is no longer the case in SvelteKit. Instead, relative U #### <a> attributes -- `sapper:prefetch` is now `sveltekit:prefetch` -- `sapper:noscroll` is now `sveltekit:noscroll` +- `sapper:prefetch` is now `data-sveltekit-prefetch` +- `sapper:noscroll` is now `data-sveltekit-noscroll` ### Endpoints diff --git a/packages/create-svelte/templates/default/src/lib/header/Header.svelte b/packages/create-svelte/templates/default/src/lib/header/Header.svelte index 9d3120f3e6fd..a048e0eccf00 100644 --- a/packages/create-svelte/templates/default/src/lib/header/Header.svelte +++ b/packages/create-svelte/templates/default/src/lib/header/Header.svelte @@ -15,12 +15,14 @@ https://external.com /wheee - /wheee - /wheee + /wheee + /wheee /wheee diff --git a/packages/kit/src/exports/vite/index.js b/packages/kit/src/exports/vite/index.js index 7f56d9e46ad3..8394d64274bb 100644 --- a/packages/kit/src/exports/vite/index.js +++ b/packages/kit/src/exports/vite/index.js @@ -195,6 +195,7 @@ function kit() { async config(config, config_env) { vite_config_env = config_env; svelte_config = await load_config(); + env = get_env(svelte_config.kit.env, vite_config_env.mode); // The config is created in build_server for SSR mode and passed inline diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js index 64c470be62f6..7c78fb29f23e 100644 --- a/packages/kit/src/runtime/client/client.js +++ b/packages/kit/src/runtime/client/client.js @@ -44,6 +44,23 @@ function update_scroll_positions(index) { scroll_positions[index] = scroll_state(); } +/** @type {Record} */ +let warned_about_attributes = {}; + +function check_for_removed_attributes() { + const attrs = ['prefetch', 'noscroll', 'reload']; + for (const attr of attrs) { + if (document.querySelector(`[sveltekit\\:${attr}]`)) { + if (!warned_about_attributes[attr]) { + warned_about_attributes[attr] = true; + console.error( + `The sveltekit:${attr} attribute has been replaced with data-sveltekit-${attr}` + ); + } + } + } +} + /** * @param {{ * target: Element; @@ -271,6 +288,8 @@ export function create_client({ target, base, trailing_slash }) { }; root.$set(navigation_result.props); tick().then(() => (console.warn = warn)); + + check_for_removed_attributes(); } else { root.$set(navigation_result.props); } @@ -369,6 +388,8 @@ export function create_client({ target, base, trailing_slash }) { hydrate: true }); console.warn = warn; + + check_for_removed_attributes(); } else { root = new Root({ target, @@ -1138,7 +1159,7 @@ export function create_client({ target, base, trailing_slash }) { /** @param {Event} event */ const trigger_prefetch = (event) => { const a = find_anchor(event); - if (a && a.href && a.hasAttribute('sveltekit:prefetch')) { + if (a && a.href && a.hasAttribute('data-sveltekit-prefetch')) { prefetch(get_href(a)); } }; @@ -1195,7 +1216,7 @@ export function create_client({ target, base, trailing_slash }) { if ( a.hasAttribute('download') || rel.includes('external') || - a.hasAttribute('sveltekit:reload') + a.hasAttribute('data-sveltekit-reload') ) { return; } @@ -1222,7 +1243,7 @@ export function create_client({ target, base, trailing_slash }) { navigate({ url, - scroll: a.hasAttribute('sveltekit:noscroll') ? scroll_state() : null, + scroll: a.hasAttribute('data-sveltekit-noscroll') ? scroll_state() : null, keepfocus: false, redirect_chain: [], details: { diff --git a/packages/kit/test/apps/basics/src/routes/routing/+page.svelte b/packages/kit/test/apps/basics/src/routes/routing/+page.svelte index 81b4fef415f6..61f62ec6f5f5 100644 --- a/packages/kit/test/apps/basics/src/routes/routing/+page.svelte +++ b/packages/kit/test/apps/basics/src/routes/routing/+page.svelte @@ -9,6 +9,6 @@ elsewhere static.json -b +b
diff --git a/packages/kit/test/apps/basics/test/test.js b/packages/kit/test/apps/basics/test/test.js index c659740d2f98..d85d6ab3565b 100644 --- a/packages/kit/test/apps/basics/test/test.js +++ b/packages/kit/test/apps/basics/test/test.js @@ -1427,7 +1427,7 @@ test.describe('Routing', () => { expect(await page.textContent('body')).toBe('ok'); }); - test('does not attempt client-side navigation to links with sveltekit:reload', async ({ + test('does not attempt client-side navigation to links with data-sveltekit-reload', async ({ baseURL, page }) => { diff --git a/packages/kit/test/apps/options/source/pages/prefetching/+page.svelte b/packages/kit/test/apps/options/source/pages/prefetching/+page.svelte index 07b287bef1f4..4d55ffcdf64e 100644 --- a/packages/kit/test/apps/options/source/pages/prefetching/+page.svelte +++ b/packages/kit/test/apps/options/source/pages/prefetching/+page.svelte @@ -1 +1 @@ -click me +click me diff --git a/packages/kit/types/ambient.d.ts b/packages/kit/types/ambient.d.ts index 406ea05a016b..68b4da04c306 100644 --- a/packages/kit/types/ambient.d.ts +++ b/packages/kit/types/ambient.d.ts @@ -122,7 +122,7 @@ declare module '$app/navigation' { * 1. ensuring that the code for the page is loaded, and * 2. calling the page's load function with the appropriate options. * - * This is the same behaviour that SvelteKit triggers when the user taps or mouses over an `` element with `sveltekit:prefetch`. + * This is the same behaviour that SvelteKit triggers when the user taps or mouses over an `` element with `data-sveltekit-prefetch`. * If the next navigation is to `href`, the values returned from load will be used, making navigation instantaneous. * Returns a Promise that resolves when the prefetch is complete. * diff --git a/sites/kit.svelte.dev/src/lib/docs/Contents.svelte b/sites/kit.svelte.dev/src/lib/docs/Contents.svelte index 1b538565f360..dbed3dfcf5a5 100644 --- a/sites/kit.svelte.dev/src/lib/docs/Contents.svelte +++ b/sites/kit.svelte.dev/src/lib/docs/Contents.svelte @@ -82,7 +82,7 @@ {#each contents as section}
  • dispatch('select', { href: result.href })} data-has-node={result.node ? true : undefined} diff --git a/sites/kit.svelte.dev/src/routes/+page.svelte b/sites/kit.svelte.dev/src/routes/+page.svelte index 3aa00a0466a2..a18aa397b6dd 100644 --- a/sites/kit.svelte.dev/src/routes/+page.svelte +++ b/sites/kit.svelte.dev/src/routes/+page.svelte @@ -40,7 +40,7 @@ of an SPA

    -     read the docs + read the docs
    • @@ -50,7 +50,7 @@ support and more

    - read the docs + read the docs
    @@ -77,7 +77,7 @@ cd my-app npm install npm run dev -- --open - get started + get started