From 7e2efa3acfbea64010a2c04d9c512effc1f1005f Mon Sep 17 00:00:00 2001 From: Arek Bartnik Date: Sat, 22 Aug 2020 12:15:07 +0200 Subject: [PATCH 1/2] change rel= to sapper: for prefetch and external --- runtime/src/app/start/index.ts | 8 ++++---- site/content/docs/03-client-api.md | 2 +- site/content/docs/08-link-options.md | 14 ++++++-------- site/src/routes/faq/index.svelte | 2 +- test/apps/preloading/src/routes/index.svelte | 4 ++-- 5 files changed, 14 insertions(+), 16 deletions(-) diff --git a/runtime/src/app/start/index.ts b/runtime/src/app/start/index.ts index 220a4a329..9793c4954 100644 --- a/runtime/src/app/start/index.ts +++ b/runtime/src/app/start/index.ts @@ -20,7 +20,7 @@ export default function start(opts: { if ('scrollRestoration' in history) { history.scrollRestoration = 'manual'; } - + // Adopted from Nuxt.js // Reset scrollRestoration to auto when leaving page, allowing page reload // and back-navigation from other pages to use the browser to restore the @@ -68,7 +68,7 @@ function handle_mousemove(event: MouseEvent) { function trigger_prefetch(event: MouseEvent | TouchEvent) { const a: HTMLAnchorElement = find_anchor(event.target); - if (!a || a.rel !== 'prefetch') return; + if (!(a && a.hasAttribute('sapper:prefetch'))) return; prefetch(a.href); } @@ -97,8 +97,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..8a137b5e4 100644 --- a/site/src/routes/faq/index.svelte +++ b/site/src/routes/faq/index.svelte @@ -32,7 +32,7 @@

{@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.