refactor: defer initial render until import() resolves

lukeed · Oct 19, 2020 · 410388e · 410388e
1 parent e9efb11
commit 410388e
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 46 deletions.
diff --git a/public/index.html b/public/index.html
@@ -9,9 +9,30 @@
 
 	<link rel="stylesheet" href="/global.css">
 	<link rel="stylesheet" href="/bundle.css">
+
+	<style>
+		.ssr-demo {
+			display: flex;
+			position: absolute;
+			transform: translate(-50%, -50%);
+			left: 50%;
+			top: 50%;
+			place-content: center;
+			place-items: center;
+			text-align: center;
+			background: rgb(170,30,30);
+			height: 250px;
+			width: 500px;
+			color: white;
+		}
+	</style>
 </head>
 
 <body>
+	<div class="ssr-demo">
+		<h1>I AM FAKE SSR CONTENT</h1>
+	</div>
+
 	<script type="module" src="https://unpkg.com/dimport?module" data-main="/index.js"></script>
 	<script nomodule src="https://unpkg.com/dimport/nomodule" data-main="/index.js"></script>
 </body>

diff --git a/rollup.config.js b/rollup.config.js
@@ -17,6 +17,8 @@ export default {
 	preserveEntrySignatures: false,
 	plugins: [
 		svelte({
+			// build for hydration
+			hydratable: true,
 			// enable run-time checks when not in production
 			dev: !production,
 			// we'll extract any component CSS out into

diff --git a/src/components/App.svelte b/src/components/App.svelte
@@ -5,52 +5,14 @@
 </main>
 
 <script>
-	import Navaid from 'navaid';
-	import { onDestroy } from 'svelte';
 	import Nav from './Nav.svelte';
 
-	let Route, params={}, active;
-	let uri = location.pathname;
-	$: active = uri.split('/')[1] || 'home';
+	export let Route;
+	export let params = {};
+	export let pathname = '';
 
-	function run(thunk, obj) {
-		const target = uri;
-
-		thunk.then(m => {
-			if (target !== uri) return;
-
-			params = obj || {};
-
-			if (m.preload) {
-				m.preload({ params }).then(() => {
-					if (target !== uri) return;
-					Route = m.default;
-					window.scrollTo(0, 0);
-				});
-			} else {
-				Route = m.default;
-				window.scrollTo(0, 0);
-			}
-		});
-	}
-
-	function track(obj) {
-		uri = obj.state || obj.uri || location.pathname;
-		if (window.ga) ga.send('pageview', { dp:uri });
-	}
-
-	addEventListener('replacestate', track);
-	addEventListener('pushstate', track);
-	addEventListener('popstate', track);
-
-	const router = Navaid('/')
-		.on('/', () => run(import('../routes/Home.svelte')))
-		.on('/about', () => run(import('../routes/About.svelte')))
-		.on('/blog', () => run(import('../routes/Blog.svelte')))
-		.on('/blog/:postid', obj => run(import('../routes/Article.svelte'), obj))
-		.listen();
-
-	onDestroy(router.unlisten);
+	$: if (Route) window.scrollTo(0, 0);
+	$: active = pathname.split('/')[1] || 'home';
 </script>
 
 <style>

diff --git a/src/index.js b/src/index.js
@@ -1,9 +1,69 @@
+import Navaid from 'navaid';
 import GAnalytics from 'ganalytics';
 import App from './components/App.svelte';
 
-new App({
-	target: document.body
-});
+var app, Route, params
+var pathname = location.pathname;
+function update(props) {
+	if (app) {
+		app.$set(props);
+	} else {
+		// init
+		app = new App({
+			hydrate: true,
+			target: document.body,
+			props,
+		});
+	}
+}
+
+function run(thunk, obj) {
+	const target = pathname;
+
+	thunk.then(m => {
+		if (target !== pathname) return;
+
+		params = obj || {};
+
+		if (m.preload) {
+			m.preload({ params }).then(() => {
+				if (target !== pathname) return;
+				Route = m.default;
+				update({ Route, params });
+				// window.scrollTo(0, 0);
+			});
+		} else {
+			Route = m.default;
+			update({ Route, params });
+			// window.scrollTo(0, 0);
+		}
+	});
+}
+
+function track(obj) {
+	pathname = location.pathname;
+	var dp = obj.state || obj.uri || pathname;
+	if (window.ga) ga.send('pageview', { dp });
+	if (app) update({ pathname });
+}
+
+addEventListener('replacestate', track);
+addEventListener('pushstate', track);
+addEventListener('popstate', track);
+
+
+	// let Route, params={}, active;
+	// let uri = location.pathname;
+	// $: active = uri.split('/')[1] || 'home';
+
+// Init
+Navaid('/')
+	.on('/', () => run(import('./routes/Home.svelte')))
+	.on('/about', () => run(import('./routes/About.svelte')))
+	.on('/blog', () => run(import('./routes/Blog.svelte')))
+	.on('/blog/:postid', obj => run(import('./routes/Article.svelte'), obj))
+	.listen(pathname);
+
 
 if (process.env.NODE_ENV === 'production') {
 	window.ga = new GAnalytics('UA-XXXXXXXX-X');