serialized preloaded data and send to client as initial payload - fixes #3

Author: Rich-Harris

lib/index.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const serialize = require('serialize-javascript');
 const route_manager = require('./route_manager.js');
 const templates = require('./templates.js');
 const create_app = require('./utils/create_app.js');
@@ -144,15 +145,25 @@ function get_route_handler(fn) {
 
 			if (mod.preload) {
 				const promise = Promise.resolve(mod.preload(req)).then(preloaded => {
+					const serialized = try_serialize(preloaded);
 					Object.assign(data, preloaded);
-					return mod.render(data);
+
+					return { rendered: mod.render(data), serialized };
 				});
 
 				return templates.stream(res, 200, {
-					scripts: `<script src='${client.main_file}'></script>`,
-					html: promise.then(rendered => rendered.html),
-					head: promise.then(({ head }) => `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`),
-					styles: promise.then(({ css }) => (css && css.code ? `<style>${css.code}</style>` : ''))
+					scripts: promise.then(({ serialized }) => {
+						const main = `<script src='${client.main_file}'></script>`;
+
+						if (serialized) {
+							return `<script>__SAPPER__ = { preloaded: ${serialized} };</script>${main}`;
+						}
+
+						return main;
+					}),
+					html: promise.then(({ rendered }) => rendered.html),
+					head: promise.then(({ rendered }) => `<noscript id='sapper-head-start'></noscript>${rendered.head}<noscript id='sapper-head-end'></noscript>`),
+					styles: promise.then(({ rendered }) => (rendered.css && rendered.css.code ? `<style>${rendered.css.code}</style>` : ''))
 				});
 			} else {
 				const { html, head, css } = mod.render(data);
@@ -249,4 +260,12 @@ function compose_handlers(handlers) {
 
 function read_json(file) {
 	return JSON.parse(fs.readFileSync(file, 'utf-8'));
+}
+
+function try_serialize(data) {
+	try {
+		return serialize(data);
+	} catch (err) {
+		return null;
+	}
 }

package.json

@@ -26,6 +26,7 @@
     "relative": "^3.0.2",
     "require-relative": "^0.8.7",
     "rimraf": "^2.6.2",
+    "serialize-javascript": "^1.4.0",
     "webpack": "^3.10.0",
     "webpack-hot-middleware": "^2.21.0"
   },

src/runtime/index.ts

@@ -68,10 +68,16 @@ function render(Component: ComponentConstructor, data: any, scroll: ScrollPositi
 	}
 }
 
-function prepare_route(Component, data) {
-	return Promise.resolve(
-		Component.preload ? Component.preload(data) : {}
-	).then(preloaded => {
+function prepare_route(Component: ComponentConstructor, data: RouteData) {
+	if (!Component.preload) {
+		return { Component, data };
+	}
+
+	if (!component && window.__SAPPER__ && window.__SAPPER__.preloaded) {
+		return { Component, data: Object.assign(data, window.__SAPPER__.preloaded) };
+	}
+
+	return Promise.resolve(Component.preload(data)).then(preloaded => {
 		Object.assign(data, preloaded)
 		return { Component, data };
 	});
@@ -176,10 +182,10 @@ export function prefetch(href: string) {
 }
 
 function handle_touchstart_mouseover(event: MouseEvent | TouchEvent) {
-        const a: HTMLAnchorElement = <HTMLAnchorElement>findAnchor(<Node>event.target);
-        if (!a || a.rel !== 'prefetch') return;
+	const a: HTMLAnchorElement = <HTMLAnchorElement>findAnchor(<Node>event.target);
+	if (!a || a.rel !== 'prefetch') return;
 
-        prefetch(a.href);
+	prefetch(a.href);
 }
 
 let inited: boolean;

yarn.lock

@@ -3628,6 +3628,10 @@ [email protected]:
     range-parser "~1.2.0"
     statuses "~1.3.1"
 
+serialize-javascript@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.4.0.tgz#7c958514db6ac2443a8abc062dc9f7886a7f6005"
+
 [email protected]:
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.1.tgz#4c57d53404a761d8f2e7c1e8a18a47dbf278a719"