-> v0.7.6

don't serve error page for unhandled server route errors

CHANGELOG.md

@@ -1,5 +1,29 @@
 # sapper changelog
 
+## 0.7.6
+
+* Prevent client-side navigation to server route ([#145](https://github.com/sveltejs/sapper/issues/145))
+* Don't serve error page for server route errors ([#138](https://github.com/sveltejs/sapper/issues/138))
+
+## 0.7.5
+
+* Allow dynamic parameters inside route parts ([#139](https://github.com/sveltejs/sapper/issues/139))
+
+## 0.7.4
+
+* Force `NODE_ENV='production'` when running `build` or `export` ([#141](https://github.com/sveltejs/sapper/issues/141))
+* Use source-map-support ([#134](https://github.com/sveltejs/sapper/pull/134))
+
+## 0.7.3
+
+* Handle webpack assets that are arrays instead of strings ([#131](https://github.com/sveltejs/sapper/pull/131))
+* Wait for new server to start before broadcasting HMR update ([#129](https://github.com/sveltejs/sapper/pull/129))
+
+## 0.7.2
+
+* Add `hmr-client.js` to package
+* Wait until first successful client build before creating service-worker.js
+
 ## 0.7.1
 
 * Add missing `tslib` dependency

hmr-client.js

@@ -1,7 +1,5 @@
 let source;
 
-console.log('!!!! hmr client');
-
 function check() {
 	if (module.hot.status() === 'idle') {
 		module.hot.check(true).then(modules => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.7.1",
+  "version": "0.7.6",
   "description": "Military-grade apps, engineered by Svelte",
   "main": "middleware.js",
   "bin": {
@@ -12,6 +12,7 @@
     "middleware.js",
     "runtime",
     "runtime.js",
+    "hmr-client.js",
     "webpack"
   ],
   "directories": {
@@ -24,6 +25,7 @@
     "code-frame": "^5.0.0",
     "escape-html": "^1.0.3",
     "express": "^4.16.2",
+    "get-port": "^3.2.0",
     "glob": "^7.1.2",
     "locate-character": "^2.0.5",
     "mime": "^2.2.0",
@@ -35,6 +37,7 @@
     "rimraf": "^2.6.2",
     "sander": "^0.6.0",
     "serialize-javascript": "^1.4.0",
+    "source-map-support": "^0.5.3",
     "tslib": "^1.8.1",
     "url-parse": "^1.2.0",
     "wait-port": "^0.2.2",
@@ -51,7 +54,6 @@
     "electron": "^1.8.2",
     "eslint": "^4.13.1",
     "eslint-plugin-import": "^2.8.0",
-    "get-port": "^3.2.0",
     "mocha": "^4.0.1",
     "nightmare": "^2.10.0",
     "npm-run-all": "^4.1.2",
@@ -59,7 +61,6 @@
     "rollup-plugin-json": "^2.3.0",
     "rollup-plugin-string": "^2.0.2",
     "rollup-plugin-typescript": "^0.8.1",
-    "source-map-support": "^0.5.2",
     "style-loader": "^0.19.1",
     "svelte": "^1.49.1",
     "svelte-loader": "^2.3.2",

src/cli/dev.ts

@@ -137,14 +137,21 @@ export default async function dev(src: string, dir: string) {
 			fs.writeFileSync(path.join(dir, 'server_info.json'), JSON.stringify(server_info, null, '  '));
 
 			deferreds.client.promise.then(() => {
-				if (proc) proc.kill();
+				function restart() {
+					wait_for_port(3000, deferreds.server.fulfil); // TODO control port
+				}
+
+				if (proc) {
+					proc.kill();
+					proc.on('exit', restart);
+				} else {
+					restart();
+				}
 
 				proc = child_process.fork(`${dir}/server.js`, [], {
 					cwd: process.cwd(),
 					env: Object.assign({}, process.env)
 				});
-
-				wait_for_port(3000, deferreds.server.fulfil); // TODO control port
 			});
 		}
 	});
@@ -182,33 +189,41 @@ export default async function dev(src: string, dir: string) {
 				});
 			});
 
-			return create_serviceworker({
+			create_serviceworker({
 				routes: create_routes({ src }),
 				client_files,
 				src
 			});
+
+			watch_serviceworker();
 		}
 	});
 
-	if (compilers.serviceworker) {
-		compilers.serviceworker.plugin('invalid', (filename: string) => {
-			times.serviceworker_start = Date.now();
-		});
+	let watch_serviceworker = compilers.serviceworker
+		? function() {
+			watch_serviceworker = noop;
 
-		compilers.serviceworker.watch({}, (err: Error, stats: any) => {
-			if (err) {
-				// TODO notify client
-			} else if (stats.hasErrors()) {
-				// print errors. TODO notify client
-				stats.toJson().errors.forEach((error: Error) => {
-					console.error(error); // TODO make this look nice
-				});
-			} else {
-				console.log(`built service worker in ${Date.now() - times.serviceworker_start}ms`); // TODO prettify
+			compilers.serviceworker.plugin('invalid', (filename: string) => {
+				times.serviceworker_start = Date.now();
+			});
 
-				const serviceworker_info = stats.toJson();
-				fs.writeFileSync(path.join(dir, 'serviceworker_info.json'), JSON.stringify(serviceworker_info, null, '  '));
-			}
-		});
-	}
-}
+			compilers.serviceworker.watch({}, (err: Error, stats: any) => {
+				if (err) {
+					// TODO notify client
+				} else if (stats.hasErrors()) {
+					// print errors. TODO notify client
+					stats.toJson().errors.forEach((error: Error) => {
+						console.error(error); // TODO make this look nice
+					});
+				} else {
+					console.log(`built service worker in ${Date.now() - times.serviceworker_start}ms`); // TODO prettify
+
+					const serviceworker_info = stats.toJson();
+					fs.writeFileSync(path.join(dir, 'serviceworker_info.json'), JSON.stringify(serviceworker_info, null, '  '));
+				}
+			});
+		}
+		: noop;
+}
+
+function noop() {}

src/cli/index.ts

@@ -30,6 +30,8 @@ const [cmd] = opts._;
 const start = Date.now();
 
 if (cmd === 'build') {
+	process.env.NODE_ENV = 'production';
+
 	build({ dest, dev: false, entry, src })
 		.then(() => {
 			const elapsed = Date.now() - start;
@@ -39,6 +41,8 @@ if (cmd === 'build') {
 			console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
 		});
 } else if (cmd === 'export') {
+	process.env.NODE_ENV = 'production';
+
 	build({ dest, dev: false, entry, src })
 		.then(() => exporter(dest))
 		.then(() => {

src/core/create_app.ts

@@ -22,26 +22,29 @@ function generate_client(routes: Route[], src: string, dev: boolean, dev_port?:
 		// This file is generated by Sapper — do not edit it!
 		export const routes = [
 			${routes
-				.filter(route => route.type === 'page')
 				.map(route => {
+					if (route.type !== 'page') {
+						return `{ pattern: ${route.pattern}, ignore: true }`;
+					}
+
 					const file = posixify(`../../routes/${route.file}`);
 
 					if (route.id === '_4xx' || route.id === '_5xx') {
 						return `{ error: '${route.id.slice(1)}', load: () => import(/* webpackChunkName: "${route.id}" */ '${file}') }`;
 					}
 
-					const params = route.dynamic.length === 0
+					const params = route.params.length === 0
 						? '{}'
-						: `{ ${route.dynamic.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;
+						: `{ ${route.params.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;
 
-					return `{ pattern: ${route.pattern}, params: ${route.dynamic.length > 0 ? `match` : `()`} => (${params}), load: () => import(/* webpackChunkName: "${route.id}" */ '${file}') }`;
+					return `{ pattern: ${route.pattern}, params: ${route.params.length > 0 ? `match` : `()`} => (${params}), load: () => import(/* webpackChunkName: "${route.id}" */ '${file}') }`;
 				})
 				.join(',\n\t')}
 		];`.replace(/^\t\t/gm, '').trim();
 
 	if (dev) {
 		const hmr_client = posixify(
-			path.resolve(__dirname, 'src/hmr-client.js')
+			path.resolve(__dirname, 'hmr-client.js')
 		);
 
 		code += `
@@ -77,11 +80,11 @@ function generate_server(routes: Route[], src: string) {
 						return `{ error: '${route.id.slice(1)}', module: ${route.id} }`;
 					}
 
-					const params = route.dynamic.length === 0
+					const params = route.params.length === 0
 						? '{}'
-						: `{ ${route.dynamic.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;
+						: `{ ${route.params.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;
 
-					return `{ id: '${route.id}', type: '${route.type}', pattern: ${route.pattern}, params: ${route.dynamic.length > 0 ? `match` : `()`} => (${params}), module: ${route.id} }`;
+					return `{ id: '${route.id}', type: '${route.type}', pattern: ${route.pattern}, params: ${route.params.length > 0 ? `match` : `()`} => (${params}), module: ${route.id} }`;
 				})
 				.join(',\n\t')
 			}

src/core/create_routes.ts

@@ -10,17 +10,27 @@ export default function create_routes({ src, files = glob.sync('**/*.+(html|js|m
 		.map((file: string) => {
 			if (/(^|\/|\\)_/.test(file)) return;
 
-			const parts = file.replace(/\.(html|js|mjs)$/, '').split('/'); // glob output is always posix-style
+			if (/]\[/.test(file)) {
+				throw new Error(`Invalid route ${file} — parameters must be separated`);
+			}
+
+			const base = file.replace(/\.[^/.]+$/, '');
+			const parts = base.split('/'); // glob output is always posix-style
 			if (parts[parts.length - 1] === 'index') parts.pop();
 
 			const id = (
 				parts.join('_').replace(/[[\]]/g, '$').replace(/^\d/, '_$&').replace(/[^a-zA-Z0-9_$]/g, '_')
 			 ) || '_';
 
-			const dynamic = parts
-				.filter(part => part[0] === '[')
-				.map(part => part.slice(1, -1));
+			const params: string[] = [];
+			const param_pattern = /\[([^\]]+)\]/g;
+			let match;
+			while (match = param_pattern.exec(base)) {
+				params.push(match[1]);
+			}
 
+			// TODO can we do all this with sub-parts? or does
+			// nesting make that impossible?
 			let pattern_string = '';
 			let i = parts.length;
 			let nested = true;
@@ -29,7 +39,8 @@ export default function create_routes({ src, files = glob.sync('**/*.+(html|js|m
 				const dynamic = part[0] === '[';
 
 				if (dynamic) {
-					pattern_string = nested ? `(?:\\/([^/]+)${pattern_string})?` : `\\/([^/]+)${pattern_string}`;
+					const matcher = part.replace(param_pattern, `([^\/]+?)`);
+					pattern_string = nested ? `(?:\\/${matcher}${pattern_string})?` : `\\/${matcher}${pattern_string}`;
 				} else {
 					nested = false;
 					pattern_string = `\\/${part}${pattern_string}`;
@@ -44,12 +55,12 @@ export default function create_routes({ src, files = glob.sync('**/*.+(html|js|m
 				const match = pattern.exec(url);
 				if (!match) return;
 
-				const params: Record<string, string> = {};
-				dynamic.forEach((param, i) => {
-					params[param] = match[i + 1];
+				const result: Record<string, string> = {};
+				params.forEach((param, i) => {
+					result[param] = match[i + 1];
 				});
 
-				return params;
+				return result;
 			};
 
 			return {
@@ -60,7 +71,7 @@ export default function create_routes({ src, files = glob.sync('**/*.+(html|js|m
 				test,
 				exec,
 				parts,
-				dynamic
+				params
 			};
 		})
 		.filter(Boolean)
@@ -79,17 +90,40 @@ export default function create_routes({ src, files = glob.sync('**/*.+(html|js|m
 				if (!a_part) return -1;
 				if (!b_part) return 1;
 
-				const a_is_dynamic = a_part[0] === '[';
-				const b_is_dynamic = b_part[0] === '[';
+				const a_sub_parts = get_sub_parts(a_part);
+				const b_sub_parts = get_sub_parts(b_part);
 
-				if (a_is_dynamic === b_is_dynamic) {
-					if (!a_is_dynamic && a_part !== b_part) same = false;
-					continue;
+				for (let i = 0; true; i += 1) {
+					const a_sub_part = a_sub_parts[i];
+					const b_sub_part = b_sub_parts[i];
+
+					if (!a_sub_part && !b_sub_part) break;
+
+					if (!a_sub_part) return 1; // note this is reversed from above — match [foo].json before [foo]
+					if (!b_sub_part) return -1;
+
+					if (a_sub_part.dynamic !== b_sub_part.dynamic) {
+						return a_sub_part.dynamic ? 1 : -1;
+					}
+
+					if (!a_sub_part.dynamic && a_sub_part.content !== b_sub_part.content) {
+						return b_sub_part.content.length - a_sub_part.content.length;
+					}
 				}
-
-				return a_is_dynamic ? 1 : -1;
 			}
 		});
 
 	return routes;
+}
+
+function get_sub_parts(part: string) {
+	return part.split(/[\[\]]/)
+		.map((content, i) => {
+			if (!content) return null;
+			return {
+				content,
+				dynamic: i % 2 === 1
+			};
+		})
+		.filter(Boolean);
 }

src/interfaces.ts

@@ -6,7 +6,7 @@ export type Route = {
 	test: (url: string) => boolean;
 	exec: (url: string) => Record<string, string>;
 	parts: string[];
-	dynamic: string[];
+	params: string[];
 };
 
 export type Template = {

src/middleware/index.ts

@@ -9,6 +9,9 @@ import escape_html from 'escape-html';
 import { create_routes, templates, create_compilers, create_template } from 'sapper/core.js';
 import { dest, entry, isDev, src } from '../config';
 import { Route, Template } from '../interfaces';
+import sourceMapSupport from 'source-map-support';
+
+sourceMapSupport.install();
 
 const dev = isDev();
 
@@ -122,7 +125,12 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
 
 			// preload main.js and current route
 			// TODO detect other stuff we can preload? images, CSS, fonts?
-			res.setHeader('Link', `</client/${chunks.main}>;rel="preload";as="script", </client/${chunks[route.id]}>;rel="preload";as="script"`);
+			const link = []
+				.concat(chunks.main, chunks[route.id])
+				.map(file => `</client/${file}>;rel="preload";as="script"`)
+				.join(', ');
+
+			res.setHeader('Link', link);
 
 			const data = { params: req.params, query: req.query };
 
@@ -159,7 +167,11 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
 
 				const { html, head, css } = mod.render(data);
 
-				let scripts = `<script src='/client/${chunks.main}'></script>`;
+				let scripts = []
+					.concat(chunks.main) // chunks main might be an array. it might not! thanks, webpack
+					.map(file => `<script src='/client/${file}'></script>`)
+					.join('');
+
 				scripts = `<script>__SAPPER__ = { preloaded: ${serialized} };</script>${scripts}`;
 
 				const page = template.render({
@@ -222,9 +234,21 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
 					};
 				}
 
-				handler(req, res, () => {
-					handle_not_found(req, res, 404, 'Not found');
-				});
+				const handle_error = (err?: Error) => {
+					if (err) {
+						console.error(err.stack);
+						res.statusCode = 500;
+						res.end(err.message);
+					} else {
+						handle_not_found(req, res, 404, 'Not found');
+					}
+				};
+
+				try {
+					handler(req, res, handle_error);
+				} catch (err) {
+					handle_error(err);
+				}
 			} else {
 				// no matching handler for method — 404
 				handle_not_found(req, res, 404, 'Not found');
@@ -282,7 +306,7 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
 		}));
 	}
 
-	return function find_route(req: Req, res: ServerResponse, next: () => void) {
+	return function find_route(req: Req, res: ServerResponse) {
 		const url = req.pathname;
 
 		try {

src/runtime/index.ts

@@ -26,6 +26,8 @@ function select_route(url: URL): Target {
 	for (const route of routes) {
 		const match = route.pattern.exec(url.pathname);
 		if (match) {
+			if (route.ignore) return null;
+
 			const params = route.params(match);
 
 			const query: Record<string, string | true> = {};

src/runtime/interfaces.ts

@@ -14,7 +14,8 @@ export interface Component {
 export type Route = {
 	pattern: RegExp;
 	params: (match: RegExpExecArray) => Record<string, string>;
-	load: () => Promise<{ default: ComponentConstructor }>
+	load: () => Promise<{ default: ComponentConstructor }>;
+	ignore?: boolean;
 };
 
 export type ScrollPosition = {

test/app/routes/blog.json.js

@@ -1,4 +1,4 @@
-import posts from './_posts.js';
+import posts from './blog/_posts.js';
 
 const contents = JSON.stringify(posts.map(post => {
 	return {

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

@@ -63,7 +63,7 @@
 				return this.error(500, 'something went wrong');
 			}
 
-			return fetch(`/api/blog/${slug}`).then(r => {
+			return fetch(`/blog/${slug}.json`).then(r => {
 				if (r.status === 200) {
 					return r.json().then(post => ({ post }));
 					this.error(r.status, '')

test/app/routes/blog/_posts.js

@@ -70,7 +70,7 @@ const posts = [
 			<ul>
 				<li>It's powered by <a href='https://svelte.technology'>Svelte</a> instead of React, so it's faster and your apps are smaller</li>
 				<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>routes/blog/[slug].html</code></li>
-				<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one powering this very page (look in <code>routes/api/blog</code>)</li>
+				<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='/blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
 				<li>Links are just <code>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='/blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
 			</ul>
 		`

test/app/routes/blog/index.html

@@ -32,7 +32,7 @@
 		},
 
 		preload({ params, query }) {
-			return fetch(`/api/blog/contents`).then(r => r.json()).then(posts => {
+			return fetch(`/blog.json`).then(r => r.json()).then(posts => {
 				return { posts };
 			});
 		}

test/app/routes/throw-an-error.js

@@ -0,0 +1,3 @@
+export function get() {
+	throw new Error('nope');
+}

test/common/test.js

@@ -12,6 +12,10 @@ run('development');
 Nightmare.action('page', {
 	title(done) {
 		this.evaluate_now(() => document.querySelector('h1').textContent, done);
+	},
+
+	text(done) {
+		this.evaluate_now(() => document.body.textContent, done);
 	}
 });
 
@@ -193,7 +197,7 @@ function run(env) {
 						});
 					})
 					.then(requests => {
-						assert.ok(!!requests.find(r => r.url === '/api/blog/why-the-name'));
+						assert.ok(!!requests.find(r => r.url === '/blog/why-the-name.json'));
 					});
 			});
 
@@ -219,7 +223,7 @@ function run(env) {
 						});
 					})
 					.then(mouseover_requests => {
-						assert.ok(mouseover_requests.findIndex(r => r.url === '/api/blog/what-is-sapper') !== -1);
+						assert.ok(mouseover_requests.findIndex(r => r.url === '/blog/what-is-sapper.json') !== -1);
 
 						return capture(() => {
 							return nightmare
@@ -228,7 +232,7 @@ function run(env) {
 						});
 					})
 					.then(click_requests => {
-						assert.ok(click_requests.findIndex(r => r.url === '/api/blog/what-is-sapper') === -1);
+						assert.ok(click_requests.findIndex(r => r.url === '/blog/what-is-sapper.json') === -1);
 					});
 			});
 
@@ -376,6 +380,25 @@ function run(env) {
 						assert.equal(title, 'Internal server error');
 					});
 			});
+
+			it('does not attempt client-side navigation to server routes', () => {
+				return nightmare.goto(`${base}/blog/how-is-sapper-different-from-next`)
+					.init()
+					.click(`[href="/blog/how-is-sapper-different-from-next.json"]`)
+					.wait(200)
+					.page.text()
+					.then(text => {
+						JSON.parse(text);
+					});
+			});
+
+			it('does not serve error page for non-page errors', () => {
+				return nightmare.goto(`${base}/throw-an-error`)
+					.page.text()
+					.then(text => {
+						assert.equal(text, 'nope');
+					});
+			});
 		});
 
 		describe('headers', () => {
@@ -389,7 +412,7 @@ function run(env) {
 					);
 
 					assert.ok(
-						/<\/client\/[^/]+\/main\.js>;rel="preload";as="script", <\/client\/[^/]+\/_\.0\.js>;rel="preload";as="script"/.test(headers['link']),
+						/<\/client\/[^/]+\/main\.js>;rel="preload";as="script", <\/client\/[^/]+\/_\.\d+\.js>;rel="preload";as="script"/.test(headers['link']),
 						headers['link']
 					);
 				});
@@ -415,13 +438,13 @@ function run(env) {
 						'blog/what-is-sapper/index.html',
 						'blog/why-the-name/index.html',
 
-						'api/blog/contents',
-						'api/blog/a-very-long-post',
-						'api/blog/how-can-i-get-involved',
-						'api/blog/how-is-sapper-different-from-next',
-						'api/blog/how-to-use-sapper',
-						'api/blog/what-is-sapper',
-						'api/blog/why-the-name',
+						'blog.json',
+						'blog/a-very-long-post.json',
+						'blog/how-can-i-get-involved.json',
+						'blog/how-is-sapper-different-from-next.json',
+						'blog/how-to-use-sapper.json',
+						'blog/what-is-sapper.json',
+						'blog/why-the-name.json',
 
 						'favicon.png',
 						'global.css',

test/unit/create_routes.test.js

@@ -4,7 +4,7 @@ const { create_routes } = require('../../core.js');
 describe('create_routes', () => {
 	it('sorts routes correctly', () => {
 		const routes = create_routes({
-			files: ['index.html', 'about.html', '[wildcard].html', 'post/foo.html', 'post/[id].html', 'post/bar.html']
+			files: ['index.html', 'about.html', 'post/f[xx].html', '[wildcard].html', 'post/foo.html', 'post/[id].html', 'post/bar.html', 'post/[id].json.js']
 		});
 
 		assert.deepEqual(
@@ -14,6 +14,8 @@ describe('create_routes', () => {
 				'about.html',
 				'post/foo.html',
 				'post/bar.html',
+				'post/f[xx].html',
+				'post/[id].json.js',
 				'post/[id].html',
 				'[wildcard].html'
 			]
@@ -133,4 +135,33 @@ describe('create_routes', () => {
 			b: null
 		});
 	});
+
+	it('matches a dynamic part within a part', () => {
+		const route = create_routes({
+			files: ['things/[slug].json.js']
+		})[0];
+
+		assert.deepEqual(route.exec('/things/foo.json'), {
+			slug: 'foo'
+		});
+	});
+
+	it('matches multiple dynamic parts within a part', () => {
+		const route = create_routes({
+			files: ['things/[id]_[slug].json.js']
+		})[0];
+
+		assert.deepEqual(route.exec('/things/someid_someslug.json'), {
+			id: 'someid',
+			slug: 'someslug'
+		});
+	});
+
+	it('fails if dynamic params are not separated', () => {
+		assert.throws(() => {
+			create_routes({
+				files: ['[foo][bar].js']
+			});
+		}, /Invalid route \[foo\]\[bar\]\.js — parameters must be separated/);
+	});
 });