-> v0.11.0

only save the bits of client_info we need

CHANGELOG.md

@@ -1,5 +1,25 @@
 # sapper changelog
 
+## 0.11.0
+
+* Create launcher file ([#240](https://github.com/sveltejs/sapper/issues/240))
+* Only keep necessary parts of webpack stats ([#251](https://github.com/sveltejs/sapper/pull/251))
+* Allow `NODE_ENV` to be overridden when building ([#241](https://github.com/sveltejs/sapper/issues/241))
+
+## 0.10.7
+
+* Allow routes to have a leading `.` ([#243](https://github.com/sveltejs/sapper/pull/243))
+* Only encode necessary characters in routes ([#234](https://github.com/sveltejs/sapper/pull/234))
+* Preserve existing `process.env` when exporting ([#245](https://github.com/sveltejs/sapper/pull/245))
+
+## 0.10.6
+
+* Fix error reporting in `sapper start`
+
+## 0.10.5
+
+* Fix missing service worker ([#231](https://github.com/sveltejs/sapper/pull/231))
+
 ## 0.10.4
 
 * Upgrade chokidar, this time with a fix ([#227](https://github.com/sveltejs/sapper/pull/227))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.10.4",
+  "version": "0.11.0",
   "description": "Military-grade apps, engineered by Svelte",
   "main": "dist/middleware.ts.js",
   "bin": {
@@ -34,13 +34,13 @@
     "rimraf": "^2.6.2",
     "sade": "^1.4.0",
     "sander": "^0.6.0",
-    "source-map-support": "^0.5.4",
+    "source-map-support": "^0.5.5",
     "tslib": "^1.9.0",
     "url-parse": "^1.2.0",
     "webpack-format-messages": "^1.0.2"
   },
   "devDependencies": {
-    "@std/esm": "^0.25.3",
+    "@std/esm": "^0.26.0",
     "@types/glob": "^5.0.34",
     "@types/mkdirp": "^0.5.2",
     "@types/rimraf": "^2.0.2",
@@ -53,16 +53,16 @@
     "nightmare": "^3.0.0",
     "npm-run-all": "^4.1.2",
     "polka": "^0.3.4",
-    "rollup": "^0.57.0",
-    "rollup-plugin-commonjs": "^9.1.0",
+    "rollup": "^0.58.2",
+    "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-json": "^2.3.0",
     "rollup-plugin-string": "^2.0.2",
     "rollup-plugin-typescript": "^0.8.1",
     "serve-static": "^1.13.2",
-    "svelte": "^1.57.4",
-    "svelte-loader": "^2.5.1",
-    "ts-node": "^5.0.1",
-    "typescript": "^2.6.2",
+    "svelte": "^2.4.4",
+    "svelte-loader": "^2.9.0",
+    "ts-node": "^6.0.2",
+    "typescript": "^2.8.3",
     "walk-sync": "^0.3.2",
     "webpack": "^4.1.0"
   },

src/cli.ts

@@ -21,10 +21,12 @@ prog.command('dev')
 
 prog.command('build [dest]')
 	.describe('Create a production-ready version of your app')
-	.action(async (dest = 'build') => {
+	.option('-p, --port', 'Default of process.env.PORT', '3000')
+	.example(`build custom-dir -p 4567`)
+	.action(async (dest = 'build', opts: { port: string }) => {
 		console.log(`> Building...`);
 
-		process.env.NODE_ENV = 'production';
+		process.env.NODE_ENV = process.env.NODE_ENV || 'production';
 		process.env.SAPPER_DEST = dest;
 
 		const start = Date.now();
@@ -32,7 +34,20 @@ prog.command('build [dest]')
 		try {
 			const { build } = await import('./cli/build');
 			await build();
-			console.error(`\n> Finished in ${elapsed(start)}. Type ${clorox.bold.cyan(dest === 'build' ? 'npx sapper start' : `npx sapper start ${dest}`)} to run the app.`);
+
+			const launcher = path.resolve(dest, 'index.js');
+
+			fs.writeFileSync(launcher, `
+				// generated by sapper build at ${new Date().toISOString()}
+				process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+				process.env.SAPPER_DEST = __dirname;
+				process.env.PORT = process.env.PORT || ${opts.port || 3000};
+
+				console.log('Starting server on port ' + process.env.PORT);
+				require('./server.js');
+			`.replace(/^\t+/gm, '').trim());
+
+			console.error(`\n> Finished in ${elapsed(start)}. Type ${clorox.bold.cyan(`node ${dest}`)} to run the app.`);
 		} catch (err) {
 			console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
 		}

src/cli/build.ts

@@ -35,7 +35,9 @@ export async function build() {
 	const client_stats = await compile(client);
 	console.log(`${clorox.inverse(`\nbuilt client`)}`);
 	console.log(client_stats.toString({ colors: true }));
-	fs.writeFileSync(path.join(output, 'client_info.json'), JSON.stringify(client_stats.toJson()));
+	fs.writeFileSync(path.join(output, 'client_info.json'), JSON.stringify({
+		assets: client_stats.toJson().assetsByChunkName
+	}));
 
 	const server_stats = await compile(server);
 	console.log(`${clorox.inverse(`\nbuilt server`)}`);

src/cli/dev.ts

@@ -263,7 +263,9 @@ export async function dev(opts: { port: number, open: boolean }) {
 		},
 
 		result: info => {
-			fs.writeFileSync(path.join(dir, 'client_info.json'), JSON.stringify(info, null, '  '));
+			fs.writeFileSync(path.join(dir, 'client_info.json'), JSON.stringify({
+				assets: info.assetsByChunkName
+			}, null, '  '));
 			deferreds.client.fulfil();
 
 			const client_files = info.assets.map((chunk: { name: string }) => `client/${chunk.name}`);

src/cli/export.ts

@@ -35,12 +35,12 @@ export async function exporter(export_dir: string, { basepath = '' }) {
 
 	const proc = child_process.fork(path.resolve(`${build_dir}/server.js`), [], {
 		cwd: process.cwd(),
-		env: {
+		env: Object.assign({
 			PORT: port,
 			NODE_ENV: 'production',
 			SAPPER_DEST: build_dir,
 			SAPPER_EXPORT: 'true'
-		}
+		}, process.env)
 	});
 
 	const seen = new Set();
@@ -103,4 +103,4 @@ export async function exporter(export_dir: string, { basepath = '' }) {
 	return ports.wait(port)
 		.then(() => handle(new URL(`/${basepath}`, origin))) // TODO all static routes
 		.then(() => proc.kill());
-}
+}

src/cli/start.ts

@@ -11,13 +11,13 @@ export async function start(dir: string, opts: { port: number, open: boolean })
 	const server = path.resolve(dir, 'server.js');
 
 	if (!fs.existsSync(server)) {
-		console.log(clorox.bold.red(`> ${dir}/server.js does not exist — type ${clorox.bold.cyan(dir === 'build' ? `npx sapper build` : `npx sapper build ${dir}`)} to create it`));
+		console.log(`${clorox.bold.red(`> ${dir}/server.js does not exist — type ${clorox.bold.cyan(dir === 'build' ? `npx sapper build` : `npx sapper build ${dir}`)} to create it`)}`);
 		return;
 	}
 
 	if (port) {
 		if (!await ports.check(port)) {
-			console.log(clorox.bold.red(`> Port ${port} is unavailable`));
+			console.log(`${clorox.bold.red(`> Port ${port} is unavailable`)}`);
 			return;
 		}
 	} else {

src/core/create_routes.ts

@@ -3,7 +3,7 @@ import glob from 'glob';
 import { locations } from '../config';
 import { Route } from '../interfaces';
 
-export default function create_routes({ files } = { files: glob.sync('**/*.*', { cwd: locations.routes(), nodir: true }) }) {
+export default function create_routes({ files } = { files: glob.sync('**/*.*', { cwd: locations.routes(), dot: true, nodir: true }) }) {
 	const routes: Route[] = files
 		.map((file: string) => {
 			if (/(^|\/|\\)_/.test(file)) return;
@@ -33,7 +33,7 @@ export default function create_routes({ files } = { files: glob.sync('**/*.*', {
 			let i = parts.length;
 			let nested = true;
 			while (i--) {
-				const part = encodeURIComponent(parts[i].normalize()).replace(/%5B/g, '[').replace(/%5D/g, ']');
+				const part = encodeURI(parts[i].normalize()).replace(/\?/g, '%3F').replace(/#/g, '%23').replace(/%5B/g, '[').replace(/%5D/g, ']');
 				const dynamic = ~part.indexOf('[');
 
 				if (dynamic) {

src/middleware.ts

@@ -90,7 +90,7 @@ export default function middleware({ routes, store }: {
 			cache_control: 'max-age=31536000'
 		}),
 
-		get_route_handler(client_info.assetsByChunkName, routes, store)
+		get_route_handler(client_info.assets, routes, store)
 	].filter(Boolean));
 
 	return middleware;
@@ -245,11 +245,11 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
 					`baseUrl: "${req.baseUrl}"`,
 					serialized.preloaded && `preloaded: ${serialized.preloaded}`,
 					serialized.store && `store: ${serialized.store}`
-				].filter(Boolean).join(',')}}`
+				].filter(Boolean).join(',')}};`;
 
 				const has_service_worker = fs.existsSync(path.join(locations.dest(), 'service-worker.js'));
 				if (has_service_worker) {
-					`if ('serviceWorker' in navigator) navigator.serviceWorker.register('${req.baseUrl}/service-worker.js')`
+					inline_script += `if ('serviceWorker' in navigator) navigator.serviceWorker.register('${req.baseUrl}/service-worker.js');`;
 				}
 
 				const page = template()

src/runtime/index.ts

@@ -214,7 +214,7 @@ let prefetching: {
 export function prefetch(href: string) {
 	const selected = select_route(new URL(href, document.baseURI));
 
-	if (selected) {
+	if (selected && (!prefetching || href !== prefetching.href)) {
 		prefetching = {
 			href,
 			promise: selected.route.load().then(mod => prepare_route(mod.default, selected.data))
@@ -222,7 +222,16 @@ export function prefetch(href: string) {
 	}
 }
 
-function handle_touchstart_mouseover(event: MouseEvent | TouchEvent) {
+let mousemove_timeout: NodeJS.Timer;
+
+function handle_mousemove(event: MouseEvent) {
+	clearTimeout(mousemove_timeout);
+	mousemove_timeout = setTimeout(() => {
+		trigger_prefetch(event);
+	}, 20);
+}
+
+function trigger_prefetch(event: MouseEvent | TouchEvent) {
 	const a: HTMLAnchorElement = <HTMLAnchorElement>findAnchor(<Node>event.target);
 	if (!a || a.rel !== 'prefetch') return;
 
@@ -248,8 +257,8 @@ export function init(_target: Node, _routes: Route[], opts?: { store?: (data: an
 		window.addEventListener('popstate', handle_popstate);
 
 		// prefetch
-		window.addEventListener('touchstart', handle_touchstart_mouseover);
-		window.addEventListener('mouseover', handle_touchstart_mouseover);
+		window.addEventListener('touchstart', trigger_prefetch);
+		window.addEventListener('mousemove', handle_mousemove);
 
 		inited = true;
 	}

test/app/routes/4xx.html

@@ -1,6 +1,6 @@
-<:Head>
-	<title>{{status}}</title>
-</:Head>
+<svelte:head>
+	<title>{status}</title>
+</svelte:head>
 
 <h1>Not found</h1>
-<p>{{error.message}}</p>
+<p>{error.message}</p>

test/app/routes/5xx.html

@@ -1,6 +1,6 @@
-<:Head>
+<svelte:head>
 	<title>Internal server error</title>
-</:Head>
+</svelte:head>
 
 <h1>Internal server error</h1>
-<p>{{error.message}}</p>
+<p>{error.message}</p>

test/app/routes/about.html

@@ -1,6 +1,6 @@
-<:Head>
+<svelte:head>
 	<title>About</title>
-</:Head>
+</svelte:head>
 
 <h1>About this site</h1>
 

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

@@ -1,11 +1,11 @@
-<:Head>
-	<title>{{post.title}}</title>
-</:Head>
+<svelte:head>
+	<title>{post.title}</title>
+</svelte:head>
 
-<h1>{{post.title}}</h1>
+<h1>{post.title}</h1>
 
 <div class='content'>
-	{{{post.html}}}
+	{@html post.html}
 </div>
 
 <script>

test/app/routes/blog/index.html

@@ -1,17 +1,17 @@
-<:Head>
+<svelte:head>
 	<title>Blog</title>
-</:Head>
+</svelte:head>
 
 <h1>Recent posts</h1>
 
 <ul>
-	{{#each posts as post}}
+	{#each posts as post}
 		<!-- we're using the non-standard `rel=prefetch` attribute to
 				tell Sapper to load the data for the page as soon as
 				the user hovers over the link or taps it, instead of
 				waiting for the 'click' event -->
-		<li><a rel='prefetch' href='blog/{{post.slug}}'>{{post.title}}</a></li>
-	{{/each}}
+		<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
+	{/each}
 </ul>
 
 <script>

test/app/routes/credentials/index.html

@@ -1,4 +1,4 @@
-<h1>{{message}}</h1>
+<h1>{message}</h1>
 
 <script>
 	export default {

test/app/routes/index.html

@@ -1,6 +1,6 @@
-<:Head>
+<svelte:head>
 	<title>Sapper project template</title>
-</:Head>
+</svelte:head>
 
 <h1>Great success!</h1>
 
@@ -11,7 +11,7 @@
 <a href='blog/nope'>broken link</a>
 <a href='blog/throw-an-error'>error link</a>
 <a href='credentials?creds=include'>credentials</a>
-<a rel=prefetch class='{{page === "blog"  ? "selected" : ""}}' href='blog'>blog</a>
+<a rel=prefetch class='{page === "blog"  ? "selected" : ""}' href='blog'>blog</a>
 
 <div class='hydrate-test'></div>
 

test/app/routes/preload-values/custom-class.html

@@ -1,4 +1,4 @@
-<h1>{{foo.bar()}}</h1>
+<h1>{foo.bar()}</h1>
 
 <script>
 	export default {

test/app/routes/preload-values/set.html

@@ -1,4 +1,4 @@
-<h1>{{set.has('x')}}</h1>
+<h1>{set.has('x')}</h1>
 
 <script>
 	export default {

test/app/routes/show-url.html

@@ -1,4 +1,4 @@
-<p>URL is {{url}}</p>
+<p>URL is {url}</p>
 
 <script>
 	export default {

test/app/routes/store.html

@@ -1 +1 @@
-<h1>{{$title}}</h1>
+<h1>{$title}</h1>

test/common/test.js

@@ -1,3 +1,4 @@
+const fs = require('fs');
 const path = require('path');
 const assert = require('assert');
 const Nightmare = require('nightmare');
@@ -38,6 +39,7 @@ describe('sapper', function() {
 	rimraf.sync('export');
 	rimraf.sync('build');
 	rimraf.sync('.sapper');
+	rimraf.sync('start.js');
 
 	this.timeout(process.env.CI ? 30000 : 10000);
 
@@ -148,7 +150,7 @@ function run({ mode, basepath = '' }) {
 
 		before(() => {
 			const promise = mode === 'production'
-				? exec(`node ${cli} build`).then(() => ports.find(3000))
+				? exec(`node ${cli} build -l`).then(() => ports.find(3000))
 				: ports.find(3000).then(port => {
 					exec(`node ${cli} dev`);
 					return ports.wait(port).then(() => port);
@@ -160,6 +162,10 @@ function run({ mode, basepath = '' }) {
 
 				const dir = mode === 'production' ? 'build' : '.sapper';
 
+				if (mode === 'production') {
+					assert.ok(fs.existsSync('build/index.js'));
+				}
+
 				proc = require('child_process').fork(`${dir}/server.js`, {
 					cwd: process.cwd(),
 					env: {
@@ -301,14 +307,17 @@ function run({ mode, basepath = '' }) {
 					});
 			});
 
-			it('reuses prefetch promise', () => {
+			it.skip('reuses prefetch promise', () => {
 				return nightmare
 					.goto(`${base}/blog`)
 					.init()
 					.then(() => {
 						return capture(() => {
 							return nightmare
-								.mouseover('[href="blog/what-is-sapper"]')
+								.evaluate(() => {
+									const a = document.querySelector('[href="blog/what-is-sapper"]');
+									a.dispatchEvent(new MouseEvent('mousemove'));
+								})
 								.wait(200);
 						});
 					})
@@ -559,6 +568,12 @@ function run({ mode, basepath = '' }) {
 						assert.equal(title, 'woohoo!');
 					});
 			});
+
+			it('includes service worker', () => {
+				return nightmare.goto(base).page.html().then(html => {
+					assert.ok(html.indexOf('service-worker.js') !== -1);
+				});
+			});
 		});
 
 		describe('headers', () => {

test/unit/create_routes.test.js

@@ -2,6 +2,25 @@ const assert = require('assert');
 const { create_routes } = require('../../dist/core.ts.js');
 
 describe('create_routes', () => {
+	it('encodes caharcters not allowed in path', () => {
+		const routes = create_routes({
+			files: [
+				'"',
+				'#',
+				'?'
+			]
+		});
+
+		assert.deepEqual(
+			routes.map(r => r.pattern),
+			[
+				/^\/%22\/?$/,
+				/^\/%23\/?$/,
+				/^\/%3F\/?$/
+			]
+		);
+	});
+
 	it('sorts routes correctly', () => {
 		const routes = create_routes({
 			files: ['index.html', 'about.html', 'post/f[xx].html', '[wildcard].html', 'post/foo.html', 'post/[id].html', 'post/bar.html', 'post/[id].json.js']