Merge pull request #127 from sveltejs/gh-83

implement this.redirect in preload

package.json

@@ -36,6 +36,7 @@
     "sander": "^0.6.0",
     "serialize-javascript": "^1.4.0",
     "url-parse": "^1.2.0",
+    "wait-port": "^0.2.2",
     "walk-sync": "^0.3.2",
     "webpack": "^3.10.0"
   },

src/cli/utils.ts

@@ -1,18 +1,24 @@
-import * as net from 'net';
+import waitPort from 'wait-port';
 
 export function wait_for_port(port: number, cb: () => void) {
-	const socket = net.createConnection({ port }, () => {
+	waitPort({ port }).then(cb);
-		cb();
+}
-		socket.destroy();
-	});
 
-	socket.on('error', err => {
+// import * as net from 'net';
-		setTimeout(() => {
-			wait_for_port(port, cb);
-		}, 100);
-	});
 
-	setTimeout(() => {
+// export function wait_for_port(port: number, cb: () => void) {
-		socket.destroy();
+// 	const socket = net.createConnection(port, 'localhost', () => {
-	}, 100);
+// 		cb();
-}
+// 		socket.destroy();
+// 	});
+
+// 	socket.on('error', err => {
+// 		setTimeout(() => {
+// 			wait_for_port(port, cb);
+// 		}, 100);
+// 	});
+
+// 	setTimeout(() => {
+// 		socket.destroy();
+// 	}, 100);
+// }

src/core/create_template.ts

@@ -34,59 +34,6 @@ export default function create_templates() {
 			return template.replace(/%sapper\.(\w+)%/g, (match, key) => {
 				return key in data ? data[key] : '';
 			});
-		},
-		stream: (req: any, res: any, data: Record<string, string | Promise<string>>) => {
-			let i = 0;
-
-			let body = '';
-
-			function stream_inner(): Promise<void> {
-				if (i >= template.length) {
-					return;
-				}
-
-				const start = template.indexOf('%sapper', i);
-
-				if (start === -1) {
-					const chunk = template.slice(i);
-					body += chunk;
-					res.end(chunk);
-
-					if (process.send) {
-						process.send({
-							__sapper__: true,
-							url: req.url,
-							method: req.method,
-							type: 'text/html',
-							body
-						});
-					}
-
-					return;
-				}
-
-				const chunk = template.slice(i, start);
-				body += chunk;
-				res.write(chunk);
-
-				const end = template.indexOf('%', start + 1);
-				if (end === -1) {
-					throw new Error(`Bad template`); // TODO validate ahead of time
-				}
-
-				const tag = template.slice(start + 1, end);
-				const match = /sapper\.(\w+)/.exec(tag);
-				if (!match || !(match[1] in data)) throw new Error(`Bad template`); // TODO ditto
-
-				return Promise.resolve(data[match[1]]).then(chunk => {
-					body += chunk;
-					res.write(chunk);
-					i = end + 1;
-					return stream_inner();
-				});
-			}
-
-			return Promise.resolve().then(stream_inner);
 		}
 	};
 }

src/middleware/index.ts

@@ -19,6 +19,7 @@ type Assets = {
 }
 
 type RouteObject = {
+	id: string;
 	type: 'page' | 'route';
 	pattern: RegExp;
 	params: (match: RegExpMatchArray) => Record<string, string>;
@@ -93,9 +94,7 @@ export default function middleware({ routes }: {
 			}
 		},
 
-		get_route_handler(client_info.assetsByChunkName, routes, template),
+		get_route_handler(client_info.assetsByChunkName, routes, template)
-
-		get_not_found_handler(client_info.assetsByChunkName, routes, template)
 	].filter(Boolean));
 
 	return middleware;
@@ -119,13 +118,12 @@ function get_asset_handler({ pathname, type, cache, body }: {
 const resolved = Promise.resolve();
 
 function get_route_handler(chunks: Record<string, string>, routes: RouteObject[], template: Template) {
-	function handle_route(route: RouteObject, req: Req, res: ServerResponse, next: () => void) {
+	function handle_route(route: RouteObject, req: Req, res: ServerResponse) {
 		req.params = route.params(route.pattern.exec(req.pathname));
 
 		const mod = route.module;
 
 		if (route.type === 'page') {
-			// for page routes, we're going to serve some HTML
 			res.setHeader('Content-Type', 'text/html');
 
 			// preload main.js and current route
@@ -134,33 +132,44 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
 
 			const data = { params: req.params, query: req.query };
 
-			if (mod.preload) {
+			let redirect: { statusCode: number, location: string };
-				const promise = Promise.resolve(mod.preload(req)).then(preloaded => {
+			let error: { statusCode: number, message: Error | string };
-					const serialized = try_serialize(preloaded);
-					Object.assign(data, preloaded);
 
-					return { rendered: mod.render(data), serialized };
+			Promise.resolve(
-				});
+				mod.preload ? mod.preload.call({
+					redirect: (statusCode: number, location: string) => {
+						redirect = { statusCode, location };
+					},
+					error: (statusCode: number, message: Error | string) => {
+						error = { statusCode, message };
+					}
+				}, req) : {}
+			).catch(err => {
+				error = { statusCode: 500, message: err };
+			}).then(preloaded => {
+				if (redirect) {
+					res.statusCode = redirect.statusCode;
+					res.setHeader('Location', redirect.location);
+					res.end();
 
-				return template.stream(req, res, {
+					return;
-					scripts: promise.then(({ serialized }) => {
+				}
-						const main = `<script src='/client/${chunks.main}'></script>`;
 
-						if (serialized) {
+				if (error) {
-							return `<script>__SAPPER__ = { preloaded: ${serialized} };</script>${main}`;
+					handle_error(req, res, error.statusCode, error.message);
-						}
+					return;
+				}
+
+				const serialized = try_serialize(preloaded); // TODO bail on non-POJOs
+				Object.assign(data, preloaded);
 
-						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);
 
+				let scripts = `<script src='/client/${chunks.main}'></script>`;
+				scripts = `<script>__SAPPER__ = { preloaded: ${serialized} };</script>${scripts}`;
+
 				const page = template.render({
-					scripts: `<script src='/client/${chunks.main}'></script>`,
+					scripts,
 					html,
 					head: `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`,
 					styles: (css && css.code ? `<style>${css.code}</style>` : '')
@@ -178,7 +187,7 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
 						body: page
 					});
 				}
-			}
+			});
 		}
 
 		else {
@@ -219,60 +228,28 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
 					};
 				}
 
-				handler(req, res, next);
+				handler(req, res, () => {
+					handle_not_found(req, res, 404, 'Not found');
+				});
 			} else {
 				// no matching handler for method — 404
-				next();
+				handle_not_found(req, res, 404, 'Not found');
 			}
 		}
 	}
 
-	const error_route = routes.find((route: RouteObject) => route.error === '5xx')
+	const not_found_route = routes.find((route: RouteObject) => route.error === '4xx');
 
-	return function find_route(req: Req, res: ServerResponse, next: () => void) {
+	function handle_not_found(req: Req, res: ServerResponse, statusCode: number, message: Error | string) {
-		const url = req.pathname;
+		res.statusCode = statusCode;
-
-		try {
-			for (const route of routes) {
-				if (!route.error && route.pattern.test(url)) return handle_route(route, req, res, next);
-			}
-
-			// no matching route — 404
-			next();
-		} catch (error) {
-			console.error(error);
-
-			res.statusCode = 500;
-			res.setHeader('Content-Type', 'text/html');
-
-			const rendered = error_route ? error_route.module.render({
-				status: 500,
-				error
-			}) : { head: '', css: null, html: 'Not found' };
-
-			const { head, css, html } = rendered;
-
-			res.end(template.render({
-				scripts: `<script src='/client/${chunks.main}'></script>`,
-				html,
-				head: `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`,
-				styles: (css && css.code ? `<style>${css.code}</style>` : '')
-			}));
-		}
-	};
-}
-
-function get_not_found_handler(chunks: Record<string, string>, routes: RouteObject[], template: Template) {
-	const route = routes.find((route: RouteObject) => route.error === '4xx');
-
-	return function handle_not_found(req: Req, res: ServerResponse) {
-		res.statusCode = 404;
 		res.setHeader('Content-Type', 'text/html');
 
-		const rendered = route ? route.module.render({
+		const error = message instanceof Error ? message : new Error(message);
+
+		const rendered = not_found_route ? not_found_route.module.render({
 			status: 404,
-			message: 'Not found'
+			error
-		}) : { head: '', css: null, html: 'Not found' };
+		}) : { head: '', css: null, html: error.message };
 
 		const { head, css, html } = rendered;
 
@@ -282,6 +259,47 @@ function get_not_found_handler(chunks: Record<string, string>, routes: RouteObje
 			head: `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`,
 			styles: (css && css.code ? `<style>${css.code}</style>` : '')
 		}));
+	}
+
+	const error_route = routes.find((route: RouteObject) => route.error === '5xx');
+
+	function handle_error(req: Req, res: ServerResponse, statusCode: number, message: Error | string) {
+		if (statusCode >= 400 && statusCode < 500) {
+			return handle_not_found(req, res, statusCode, message);
+		}
+
+		res.statusCode = statusCode;
+		res.setHeader('Content-Type', 'text/html');
+
+		const error = message instanceof Error ? message : new Error(message);
+
+		const rendered = error_route ? error_route.module.render({
+			status: 500,
+			error
+		}) : { head: '', css: null, html: `Internal server error: ${error.message}` };
+
+		const { head, css, html } = rendered;
+
+		res.end(template.render({
+			scripts: `<script src='/client/${chunks.main}'></script>`,
+			html,
+			head: `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`,
+			styles: (css && css.code ? `<style>${css.code}</style>` : '')
+		}));
+	}
+
+	return function find_route(req: Req, res: ServerResponse, next: () => void) {
+		const url = req.pathname;
+
+		try {
+			for (const route of routes) {
+				if (!route.error && route.pattern.test(url)) return handle_route(route, req, res);
+			}
+
+			handle_not_found(req, res, 404, 'Not found');
+		} catch (error) {
+			handle_error(req, res, 500, error);
+		}
 	};
 }
 

src/runtime/index.ts

@@ -74,17 +74,41 @@ function render(Component: ComponentConstructor, data: any, scroll: ScrollPositi
 }
 
 function prepare_route(Component: ComponentConstructor, data: RouteData) {
+	let redirect: { statusCode: number, location: string } = null;
+	let error: { statusCode: number, message: Error | string } = null;
+
 	if (!Component.preload) {
-		return { Component, data };
+		return { Component, data, redirect, error };
 	}
 
 	if (!component && window.__SAPPER__ && window.__SAPPER__.preloaded) {
-		return { Component, data: Object.assign(data, window.__SAPPER__.preloaded) };
+		return { Component, data: Object.assign(data, window.__SAPPER__.preloaded), redirect, error };
 	}
 
-	return Promise.resolve(Component.preload(data)).then(preloaded => {
+	return Promise.resolve(Component.preload.call({
+		redirect: (statusCode: number, location: string) => {
+			redirect = { statusCode, location };
+		},
+		error: (statusCode: number, message: Error | string) => {
+			error = { statusCode, message };
+		}
+	}, data)).catch(err => {
+		error = { statusCode: 500, message: err };
+	}).then(preloaded => {
+		if (error) {
+			const route = error.statusCode >= 400 && error.statusCode < 500
+				? errors['4xx']
+				: errors['5xx'];
+
+			return route.load().then(({ default: Component }: { default: ComponentConstructor }) => {
+				const err = error.message instanceof Error ? error.message : new Error(error.message);
+				Object.assign(data, { status: error.statusCode, error: err });
+				return { Component, data, redirect: null };
+			});
+		}
+
 		Object.assign(data, preloaded)
-		return { Component, data };
+		return { Component, data, redirect };
 	});
 }
 
@@ -110,7 +134,11 @@ function navigate(target: Target, id: number) {
 
 	const token = current_token = {};
 
-	return loaded.then(({ Component, data }) => {
+	return loaded.then(({ Component, data, redirect }) => {
+		if (redirect) {
+			return goto(redirect.location, { replaceState: true });
+		}
+
 		render(Component, data, scroll_history[id], token);
 	});
 }

test/app/routes/4xx.html

@@ -3,8 +3,8 @@
 </:Head>
 
 <Layout page='home'>
-	<h1>{{status}}</h1>
+	<h1>Not found</h1>
-	<p>{{message}}</p>
+	<p>{{error.message}}</p>
 </Layout>
 
 <script>

test/app/routes/5xx.html

@@ -1,9 +1,9 @@
 <:Head>
-	<title>{{status}}</title>
+	<title>Internal server error</title>
 </:Head>
 
 <Layout page='home'>
-	<h1>{{status}}</h1>
+	<h1>Internal server error</h1>
 	<p>{{error.message}}</p>
 </Layout>
 

test/app/routes/_components/Nav.html

@@ -3,6 +3,9 @@
 		<li><a href='/'>home</a></li>
 		<li><a href='/about'>about</a></li>
 		<li><a href='/slow-preload'>slow preload</a></li>
+		<li><a href='/redirect-from'>redirect</a></li>
+		<li><a href='/blog/nope'>broken link</a></li>
+		<li><a href='/blog/throw-an-error'>error link</a></li>
 		<li><a rel=prefetch class='{{page === "blog"  ? "selected" : ""}}' href='/blog'>blog</a></li>
 	</ul>
 </nav>

test/app/routes/blog/[slug].html

@@ -59,8 +59,21 @@
 			// is called [slug].html
 			const { slug } = params;
 
-			return fetch(`/api/blog/${slug}`).then(r => r.json()).then(post => {
+			if (slug === 'throw-an-error') {
-				return { post };
+				return this.error(500, 'something went wrong');
+			}
+
+			return fetch(`/api/blog/${slug}`).then(r => {
+				if (r.status === 200) {
+					return r.json().then(post => ({ post }));
+					this.error(r.status, '')
+				}
+
+				if (r.status === 404) {
+					this.error(404, 'Not found');
+				} else {
+					throw new Error('Something went wrong');
+				}
 			});
 		}
 	};

test/app/routes/redirect-from.html

@@ -0,0 +1,7 @@
+<script>
+	export default {
+		preload() {
+			this.redirect(301, '/redirect-to');
+		}
+	};
+</script>

test/app/routes/redirect-to.html

@@ -0,0 +1 @@
+<h1>redirected</h1>

test/common/test.js

@@ -219,9 +219,7 @@ function run(env) {
 						});
 					})
 					.then(mouseover_requests => {
-						assert.deepEqual(mouseover_requests.map(r => r.url), [
+						assert.ok(mouseover_requests.findIndex(r => r.url === '/api/blog/what-is-sapper') !== -1);
-							'/api/blog/what-is-sapper'
-						]);
 
 						return capture(() => {
 							return nightmare
@@ -230,7 +228,7 @@ function run(env) {
 						});
 					})
 					.then(click_requests => {
-						assert.deepEqual(click_requests.map(r => r.url), []);
+						assert.ok(click_requests.findIndex(r => r.url === '/api/blog/what-is-sapper') === -1);
 					});
 			});
 
@@ -297,6 +295,87 @@ function run(env) {
 						assert.ok(matches);
 					});
 			});
+
+			it('redirects on server', () => {
+				return nightmare.goto(`${base}/redirect-from`)
+					.path()
+					.then(path => {
+						assert.equal(path, '/redirect-to');
+					})
+					.then(() => nightmare.page.title())
+					.then(title => {
+						assert.equal(title, 'redirected');
+					});
+			});
+
+			it('redirects in client', () => {
+				return nightmare.goto(base)
+					.wait('[href="/redirect-from"]')
+					.click('[href="/redirect-from"]')
+					.wait(200)
+					.path()
+					.then(path => {
+						assert.equal(path, '/redirect-to');
+					})
+					.then(() => nightmare.page.title())
+					.then(title => {
+						assert.equal(title, 'redirected');
+					});
+			});
+
+			it('handles 4xx error on server', () => {
+				return nightmare.goto(`${base}/blog/nope`)
+					.path()
+					.then(path => {
+						assert.equal(path, '/blog/nope');
+					})
+					.then(() => nightmare.page.title())
+					.then(title => {
+						assert.equal(title, 'Not found')
+					});
+			});
+
+			it('handles 4xx error in client', () => {
+				return nightmare.goto(base)
+					.init()
+					.click('[href="/blog/nope"]')
+					.wait(200)
+					.path()
+					.then(path => {
+						assert.equal(path, '/blog/nope');
+					})
+					.then(() => nightmare.page.title())
+					.then(title => {
+						assert.equal(title, 'Not found');
+					});
+			});
+
+			it('handles non-4xx error on server', () => {
+				return nightmare.goto(`${base}/blog/throw-an-error`)
+					.path()
+					.then(path => {
+						assert.equal(path, '/blog/throw-an-error');
+					})
+					.then(() => nightmare.page.title())
+					.then(title => {
+						assert.equal(title, 'Internal server error')
+					});
+			});
+
+			it('handles non-4xx error in client', () => {
+				return nightmare.goto(base)
+					.init()
+					.click('[href="/blog/throw-an-error"]')
+					.wait(200)
+					.path()
+					.then(path => {
+						assert.equal(path, '/blog/throw-an-error');
+					})
+					.then(() => nightmare.page.title())
+					.then(title => {
+						assert.equal(title, 'Internal server error');
+					});
+			});
 		});
 
 		describe('headers', () => {