diff --git a/runtime/src/app/prefetch/index.ts b/runtime/src/app/prefetch/index.ts index 4b8f43672..9ba4b31b9 100644 --- a/runtime/src/app/prefetch/index.ts +++ b/runtime/src/app/prefetch/index.ts @@ -39,7 +39,7 @@ export function get_prefetched(target: Target): Promise { function trigger_prefetch(event: MouseEvent | TouchEvent) { const a: HTMLAnchorElement = find_anchor(event.target); - if (a && a.rel === 'prefetch') { + if (a && a.hasAttribute('sapper:prefetch')) { prefetch(a.href); } } diff --git a/runtime/src/app/router/index.ts b/runtime/src/app/router/index.ts index da5243bda..8a8e917cb 100644 --- a/runtime/src/app/router/index.ts +++ b/runtime/src/app/router/index.ts @@ -134,8 +134,8 @@ function handle_click(event: MouseEvent) { // Ignore if tag has // 1. 'download' attribute - // 2. rel='external' attribute - if (a.hasAttribute('download') || a.getAttribute('rel') === 'external') return; + // 2. 'sapper:external' attribute + if (a.hasAttribute('download') || a.hasAttribute('sapper:external')) return; // Ignore if has a target if (svg ? (a).target.baseVal : a.target) return; diff --git a/site/content/docs/03-client-api.md b/site/content/docs/03-client-api.md index e1401a128..c80f6c6a6 100644 --- a/site/content/docs/03-client-api.md +++ b/site/content/docs/03-client-api.md @@ -53,7 +53,7 @@ const saveItem = () => { * `href` — the page to prefetch -Programmatically prefetches the given page, which means a) ensuring that the code for the page is loaded, and b) calling the page's `preload` method with the appropriate options. This is the same behaviour that Sapper triggers when the user taps or mouses over an `` element with [rel=prefetch](docs#rel_prefetch). +Programmatically prefetches the given page, which means a) ensuring that the code for the page is loaded, and b) calling the page's `preload` method with the appropriate options. This is the same behaviour that Sapper triggers when the user taps or mouses over an `` element with [sapper:prefetch](docs#sapper_prefetch) attribute. Returns a `Promise` that resolves when the prefetch is complete. diff --git a/site/content/docs/08-link-options.md b/site/content/docs/08-link-options.md index f4c860cc3..77c662c8c 100644 --- a/site/content/docs/08-link-options.md +++ b/site/content/docs/08-link-options.md @@ -2,32 +2,30 @@ title: Link options --- -### rel=prefetch +### sapper:prefetch Sapper 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].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 `rel=prefetch` attribute to a link... +We can mitigate that by *prefetching* the data. Adding a `sapper:prefetch` attribute to a link... ```html -What is Sapper? +What is Sapper? ``` ...will cause Sapper to run the page's `preload` 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. -> `rel=prefetch` is a Sapper idiom, not a standard attribute for `` elements - -### rel=external +### sapper:external By default, the Sapper 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 Sapper that certain links need to be be handled by normal browser navigation. -Adding a `rel=external` attribute to a link... +Adding a `sapper:external` attribute to a link... ```html -Path +Path ``` ...will trigger a browser navigation when the link is clicked. diff --git a/site/src/routes/faq/index.svelte b/site/src/routes/faq/index.svelte index 6faffc34f..6d3fc5139 100644 --- a/site/src/routes/faq/index.svelte +++ b/site/src/routes/faq/index.svelte @@ -6,7 +6,7 @@ @@ -25,14 +25,14 @@

- -   - {faq.metadata.question} + +   + {faq.metadata.question}

{@html faq.answer}

{/each} -

See also the Svelte FAQ for questions relating to Svelte directly.

+

See also the Svelte FAQ for questions relating to Svelte directly.