refactor some stuff

2026-01-18 13:35:08 +00:00 · 2017-12-14 07:53:17 -05:00
parent 608fdb7533
commit a87cac2481
3 changed files with 68 additions and 74 deletions
--- a/runtime/app.js
+++ b/runtime/app.js
@@ -1,21 +1,76 @@
+const detach = node => {
+	node.parentNode.removeChild(node);
+};
+
+let component;
+
 const app = {
-	init(callback) {
+	init(target, routes) {
+		function navigate(url) {
+			if (url.origin !== window.location.origin) return;
+
+			let match;
+			let params = {};
+			const query = {};
+
+			function render(mod) {
+				const route = { query, params };
+
+				Promise.resolve(
+					mod.default.preload ? mod.default.preload(route) : {}
+				).then(preloaded => {
+					if (component) {
+						component.destroy();
+					} else {
+						// first load — remove SSR'd <head> contents
+						const start = document.querySelector('#sapper-head-start');
+						let end = document.querySelector('#sapper-head-end');
+
+						if (start && end) {
+							while (start.nextSibling !== end) detach(start.nextSibling);
+							detach(start);
+							detach(end);
+						}
+
+						// preload additional routes
+						routes.reduce((promise, route) => promise.then(route.load), Promise.resolve());
+					}
+
+					component = new mod.default({
+						target,
+						data: Object.assign(route, preloaded),
+						hydrate: !!component
+					});
+				});
+			}
+
+			for (let i = 0; i < routes.length; i += 1) {
+				const route = routes[i];
+				const match = route.pattern.exec(url.pathname);
+				if (match) {
+					params = route.params(match);
+					route.load().then(render);
+					return true;
+				}
+			}
+		}
+
 		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))) {
+			if (navigate(new URL(a.href))) {
 				event.preventDefault();
 				history.pushState({}, '', a.href);
 			}
 		});

 		window.addEventListener('popstate', event => {
-			callback(window.location);
+			navigate(window.location);
 		});

-		callback(window.location);
+		navigate(window.location);
 	}
 };