change rel=prefetch to sapper:prefetch (#1566)

runtime/src/app/prefetch/index.ts

@@ -39,7 +39,7 @@ export function get_prefetched(target: Target): Promise<HydratedTarget> {
 function trigger_prefetch(event: MouseEvent | TouchEvent) {
 	const a: HTMLAnchorElement = <HTMLAnchorElement>find_anchor(<Node>event.target);
 
-	if (a && a.rel === 'prefetch') {
+	if (a && a.hasAttribute('sapper:prefetch')) {
 		prefetch(a.href);
 	}
 }

site/content/docs/08-link-options.md

@@ -2,22 +2,20 @@
 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
-<a rel=prefetch href='blog/what-is-sapper'>What is Sapper?</a>
+<a sapper:prefetch href='blog/what-is-sapper'>What is Sapper?</a>
 ```
 
 ...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 `<a>` elements
-
 <!-- TODO add a function to prefetch programmatically -->
 
 ### rel=external

site/src/routes/faq/index.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <script>
-	const description = "Frequently Asked Questions about Sapper"
+	const description = "Frequently Asked Questions about Sapper";
 
 	export let faqs;
 </script>
@@ -26,7 +26,7 @@
 		<article class='faq'>
 			<h2>
 			<span id={faq.fragment} class="offset-anchor"></span>
-			<a class="anchor" rel='prefetch' href='faq#{faq.fragment}' title='{faq.question}'>&nbsp;</a>
+			<a class="anchor" sapper:prefetch href='faq#{faq.fragment}' title='{faq.question}'>&nbsp;</a>
 			{faq.metadata.question}
 			</h2>
 			<p>{@html faq.answer}</p>

test/apps/preloading/src/routes/index.svelte

@@ -2,5 +2,5 @@
 
 <a href="slow-preload">slow preload</a>
 <a href="foo">foo</a>
-<a href="prefetch/qwe" rel=prefetch>prefetch qwe</a>
-<a href="prefetch/xyz" rel=prefetch>prefetch xyz</a>
+<a href="prefetch/qwe" sapper:prefetch>prefetch qwe</a>
+<a href="prefetch/xyz" sapper:prefetch>prefetch xyz</a>