add client-side preloading logic, move router into runtime module

runtime/router.js

@@ -0,0 +1,25 @@
+const router = {
+	init(callback) {
+		console.log('initing');
+		window.addEventListener('click', event => {
+			let a = event.target;
+			while (a && a.nodeName !== 'A') a = a.parentNode;
+			if (!a) return;
+
+			if (callback(new URL(a.href))) {
+				event.preventDefault();
+				history.pushState({}, '', a.href);
+			}
+		});
+
+		window.addEventListener('popstate', event => {
+			callback(window.location);
+		});
+
+		callback(window.location);
+	}
+};
+
+window.router = router;
+
+export default router;

templates/main.js

@@ -1,22 +1,9 @@
-window.addEventListener('click', event => {
+import router from 'sapper/runtime/router.js';
-	let a = event.target;
-	while (a && a.nodeName !== 'A') a = a.parentNode;
-	if (!a) return;
-
-	if (navigate(new URL(a.href))) {
-		event.preventDefault();
-		history.pushState({}, '', a.href);
-	}
-});
-
-window.addEventListener('popstate', event => {
-	navigate(window.location);
-});
 
 const target = document.querySelector('__selector__');
 let component;
 
-function navigate(url) {
+router.init(url => {
 	if (url.origin !== window.location.origin) return;
 
 	let match;
@@ -24,22 +11,26 @@ function navigate(url) {
 	const query = {};
 
 	function render(mod) {
-		if (component) {
+		const route = { query, params };
-			component.destroy();
-		} else {
-			target.innerHTML = '';
-		}
 
-		component = new mod.default({
+		Promise.resolve(
-			target,
+			mod.default.preload ? mod.default.preload(route) : {}
-			data: { query, params },
+		).then(preloaded => {
-			hydrate: !!component
+			if (component) {
+				component.destroy();
+			} else {
+				target.innerHTML = '';
+			}
+
+			component = new mod.default({
+				target,
+				data: Object.assign(route, preloaded),
+				hydrate: !!component
+			});
 		});
 	}
 
 	// ROUTES
 
 	return true;
-}
+});
-
-navigate(window.location);