feat: add link preloading (#20)

Author: colinlienard

.changeset/sharp-roses-look.md

@@ -0,0 +1,5 @@
+---
+'sv-router': patch
+---
+
+Add link preloading

examples/file-based/src/App.svelte

@@ -5,6 +5,6 @@
 
 <a href={path('/')}>Home</a>
 <a href={path('/about')}>About</a>
-<a href={path('/posts')}>Posts</a>
+<a href={path('/posts')} data-preload>Posts</a>
 <button onclick={() => goto('/posts/:id', { id: 'programmatic' })}>Programmatic</button>
 <Router />

examples/file-based/src/routes/posts/index.svelte

@@ -2,4 +2,4 @@
 
 <h1>Posts</h1>
 <a href="/posts/hello-world">Hello world</a>
-<a href="/posts/foobar">Foo bar</a>
+<a href="/posts/foobar" data-preload>Foo bar</a>

src/create-router.svelte.js

@@ -1,5 +1,6 @@
 import { BROWSER, DEV } from 'esm-env';
 import { matchRoute } from './helpers/match-route.js';
+import { preloadOnHover } from './helpers/preload-on-hover.js';
 import { constructPath, resolveRouteComponents } from './helpers/utils.js';
 
 /** @type {import('./index.d.ts').Routes} */
@@ -25,6 +26,8 @@ export function createRouter(r) {
 		});
 	}
 
+	preloadOnHover(routes);
+
 	return {
 		path: constructPath,
 		goto(...args) {

src/helpers/preload-on-hover.js

@@ -0,0 +1,28 @@
+import { matchRoute } from './match-route.js';
+import { resolveRouteComponents } from './utils.js';
+
+const linkSet = new Set();
+
+/** @param {import('../index.d.ts').Routes} routes */
+export function preloadOnHover(routes) {
+	const observer = new MutationObserver(() => {
+		const links = document.querySelectorAll('a[data-preload]');
+		for (const link of links) {
+			if (linkSet.has(link)) continue;
+			linkSet.add(link);
+
+			link.addEventListener('mouseenter', function callback() {
+				link.removeEventListener('mouseenter', callback);
+				const href = link.getAttribute('href');
+				if (!href) return;
+				const { match, layouts } = matchRoute(href, routes);
+				resolveRouteComponents(match ? [...layouts, match] : layouts);
+			});
+		}
+	});
+
+	observer.observe(document.body, {
+		subtree: true,
+		childList: true,
+	});
+}