-> v0.20.4

Enable debugging in Chrome and VS Code - fixes #435

CHANGELOG.md

@@ -1,5 +1,35 @@
 # sapper changelog
 
+## 0.20.4
+
+* Fix legacy build CSS ([#439](https://github.com/sveltejs/sapper/issues/439))
+* Enable debugging in Chrome and VSCode ([#435](https://github.com/sveltejs/sapper/issues/435))
+
+## 0.20.3
+
+* Inject `nonce` attribute if `res.locals.nonce` is present ([#424](https://github.com/sveltejs/sapper/pull/424))
+* Prevent service worker caching ([#428](https://github.com/sveltejs/sapper/pull/428))
+* Consistent caching for HTML responses ([#429](https://github.com/sveltejs/sapper/pull/429))
+
+## 0.20.2
+
+* Add `immutable` cache control header for hashed assets ([#425](https://github.com/sveltejs/sapper/pull/425))
+* Handle value-less query string params ([#426](https://github.com/sveltejs/sapper/issues/426))
+
+## 0.20.1
+
+* Update shimport
+
+## 0.20.0
+
+* Decode `req.params` and `req.query` ([#417](https://github.com/sveltejs/sapper/issues/417))
+* Decode URLs before writing files in `sapper export` ([#414](https://github.com/sveltejs/sapper/pull/414))
+* Generate server sourcemaps for Rollup apps in dev mode ([#418](https://github.com/sveltejs/sapper/pull/418))
+
+## 0.19.3
+
+* Better unicode route handling ([#347](https://github.com/sveltejs/sapper/issues/347))
+
 ## 0.19.2
 
 * Ignore editor tmp files ([#220](https://github.com/sveltejs/sapper/issues/220))

components/default-layout.html

@@ -1 +0,0 @@
-<svelte:component this={child.component} {...child.props}/>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -6287,9 +6287,9 @@
       }
     },
     "shimport": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/shimport/-/shimport-0.0.10.tgz",
-      "integrity": "sha512-3xPFDLmcLj87sx0OwA60qbloMQUsu6VGF97IG4RqxTf91sGeiaaXOPxM1PoQHbaTm4TOhH8zosokqLAZtuNGnA=="
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/shimport/-/shimport-0.0.11.tgz",
+      "integrity": "sha512-wRlG/wMuV/czrzJEWBUPjydU/Ve0kTrTH8wHLRjuY6S2BDB+qDDXkTY/WrNc/7t5jnd0LPVO1sRIE7Ga6uXTpw=="
     },
     "signal-exit": {
       "version": "3.0.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.19.2",
+  "version": "0.20.4",
   "description": "Military-grade apps, engineered by Svelte",
   "main": "dist/middleware.js",
   "bin": {
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "html-minifier": "^3.5.16",
-    "shimport": "^0.0.10",
+    "shimport": "0.0.11",
     "source-map-support": "^0.5.6",
     "sourcemap-codec": "^1.4.1",
     "string-hash": "^1.1.3",
@@ -74,6 +74,7 @@
     "test": "mocha --opts mocha.opts",
     "pretest": "npm run build",
     "build": "rm -rf dist && rollup -c",
+    "prepare": "npm run build",
     "dev": "rollup -cw",
     "prepublishOnly": "npm test",
     "update_mime_types": "curl http://svn.apache.org/repos/asf/httpd/httpd/trunk/docs/conf/mime.types | grep -e \"^[^#]\" > src/middleware/mime-types.md"

src/api/build.ts

@@ -79,7 +79,8 @@ async function execute(emitter: EventEmitter, opts: Opts, dirs: Dirs) {
 			// TODO duration/warnings
 			result: client_result
 		});
-
+		
+		client_result.to_json(manifest_data, dirs);
 		build_info.legacy_assets = client_result.assets;
 		delete process.env.SAPPER_LEGACY_BUILD;
 	}

src/api/dev.ts

@@ -36,6 +36,8 @@ class Watcher extends EventEmitter {
 	live: boolean;
 	hot: boolean;
 
+	devtools_port: number;
+
 	dev_server: DevServer;
 	proc: child_process.ChildProcess;
 	filewatchers: Array<{ close: () => void }>;
@@ -57,6 +59,7 @@ class Watcher extends EventEmitter {
 		'dev-port': dev_port,
 		live,
 		hot,
+		'devtools-port': devtools_port,
 		bundler,
 		webpack = 'webpack',
 		rollup = 'rollup',
@@ -68,6 +71,7 @@ class Watcher extends EventEmitter {
 		'dev-port': number,
 		live: boolean,
 		hot: boolean,
+		'devtools-port': number,
 		bundler?: string,
 		webpack: string,
 		rollup: string,
@@ -84,6 +88,8 @@ class Watcher extends EventEmitter {
 		this.live = live;
 		this.hot = hot;
 
+		this.devtools_port = devtools_port;
+
 		this.filewatchers = [];
 
 		this.current_build = {
@@ -129,6 +135,9 @@ class Watcher extends EventEmitter {
 
 		if (!this.dev_port) this.dev_port = await ports.find(10000);
 
+		// Chrome looks for debugging targets on ports 9222 and 9229 by default
+		if (!this.devtools_port) this.devtools_port = await ports.find(9222);
+
 		let manifest_data: ManifestData;
 
 		try {
@@ -238,12 +247,21 @@ class Watcher extends EventEmitter {
 						restart();
 					}
 
+					// we need to give the child process its own DevTools port,
+					// otherwise Node will try to use the parent's (and fail)
+					const debugArgRegex = /--inspect(?:-brk|-port)?|--debug-port/;
+					const execArgv = process.execArgv.slice();
+					if (execArgv.some((arg: string) => !!arg.match(debugArgRegex))) {
+						execArgv.push(`--inspect-port=${this.devtools_port}`);
+					}
+
 					this.proc = child_process.fork(`${dest}/server.js`, [], {
 						cwd: process.cwd(),
 						env: Object.assign({
 							PORT: this.port
 						}, process.env),
-						stdio: ['ipc']
+						stdio: ['ipc'],
+						execArgv
 					});
 
 					this.proc.stdout.on('data', chunk => {

src/api/export.ts

@@ -85,7 +85,7 @@ async function execute(emitter: EventEmitter, opts: Opts) {
 
 	function save(path: string, status: number, type: string, body: string) {
 		const { pathname } = resolve(origin, path);
-		let file = pathname.slice(1);
+		let file = decodeURIComponent(pathname.slice(1));
 
 		if (saved.has(file)) return;
 		saved.add(file);

src/core/create_compilers/extract_css.ts

@@ -170,6 +170,7 @@ export default function extract_css(client_result: CompileResult, components: Pa
 	}
 
 	const main = client_result.assets.main;
+	if (process.env.SAPPER_LEGACY_BUILD) main = `legacy/${main}`;
 	const entry = fs.readFileSync(`${dirs.dest}/client/${main}`, 'utf-8');
 
 	const replacements = new Map();

src/core/create_manifests.ts

@@ -63,6 +63,8 @@ function generate_client(
 		import root from '${get_file(path_to_routes, manifest_data.root)}';
 		import error from '${posixify(`${path_to_routes}/_error.html`)}';
 
+		const d = decodeURIComponent;
+
 		${manifest_data.components.map(component => {
 			const annotation = bundler === 'webpack'
 				? `/* webpackChunkName: "${component.name}" */ `
@@ -88,7 +90,7 @@ function generate_client(
 							if (part === null) return 'null';
 
 							if (part.params.length > 0) {
-								const props = part.params.map((param, i) => `${param}: match[${i + 1}]`);
+								const props = part.params.map((param, i) => `${param}: d(match[${i + 1}])`);
 								return `{ component: ${part.component.name}, params: match => ({ ${props.join(', ')} }) }`;
 							}
 
@@ -138,6 +140,8 @@ function generate_server(
 		// This file is generated by Sapper — do not edit it!
 		${imports.join('\n')}
 
+		const d = decodeURIComponent;
+
 		export const manifest = {
 			server_routes: [
 				${manifest_data.server_routes.map(route => `{
@@ -145,7 +149,7 @@ function generate_server(
 					pattern: ${route.pattern},
 					handlers: ${route.name},
 					params: ${route.params.length > 0
-						? `match => ({ ${route.params.map((param, i) => `${param}: match[${i + 1}]`).join(', ')} })`
+						? `match => ({ ${route.params.map((param, i) => `${param}: d(match[${i + 1}])`).join(', ')} })`
 						: `() => ({})`}
 				}`).join(',\n\n\t\t\t\t')}
 			],
@@ -165,7 +169,7 @@ function generate_server(
 							];
 
 							if (part.params.length > 0) {
-								const params = part.params.map((param, i) => `${param}: match[${i + 1}]`);
+								const params = part.params.map((param, i) => `${param}: d(match[${i + 1}])`);
 								props.push(`params: match => ({ ${params.join(', ')} })`);
 							}
 

src/middleware.ts

@@ -136,22 +136,22 @@ export default function middleware(opts: {
 
 		fs.existsSync(path.join(output, 'index.html')) && serve({
 			pathname: '/index.html',
-			cache_control: 'max-age=600'
+			cache_control: dev() ? 'no-cache' : 'max-age=600'
 		}),
 
 		fs.existsSync(path.join(output, 'service-worker.js')) && serve({
 			pathname: '/service-worker.js',
-			cache_control: 'max-age=600'
+			cache_control: 'no-cache, no-store, must-revalidate'
 		}),
 
 		fs.existsSync(path.join(output, 'service-worker.js.map')) && serve({
 			pathname: '/service-worker.js.map',
-			cache_control: 'max-age=600'
+			cache_control: 'no-cache, no-store, must-revalidate'
 		}),
 
 		serve({
 			prefix: '/client/',
-			cache_control: dev() ? 'no-cache' : 'max-age=31536000'
+			cache_control: dev() ? 'no-cache' : 'max-age=31536000, immutable'
 		}),
 
 		get_server_route_handler(manifest.server_routes),
@@ -185,7 +185,8 @@ function serve({ prefix, pathname, cache_control }: {
 			const type = lookup(req.path);
 
 			try {
-				const data = read(req.path.slice(1));
+				const file = decodeURIComponent(req.path.slice(1));
+				const data = read(file);
 
 				res.setHeader('Content-Type', type);
 				res.setHeader('Cache-Control', cache_control);
@@ -311,6 +312,7 @@ function get_page_handler(
 		 } = get_build_info();
 
 		res.setHeader('Content-Type', 'text/html');
+		res.setHeader('Cache-Control', dev() ? 'no-cache' : 'max-age=600');
 
 		// preload main.js and current route
 		// TODO detect other stuff we can preload? images, CSS, fonts?
@@ -523,9 +525,12 @@ function get_page_handler(
 				styles = (css && css.code ? `<style>${css.code}</style>` : '');
 			}
 
+			// users can set a CSP nonce using res.locals.nonce
+			const nonce_attr = (res.locals && res.locals.nonce) ? ` nonce="${res.locals.nonce}"` : '';
+
 			const body = template()
 				.replace('%sapper.base%', () => `<base href="${req.baseUrl}/">`)
-				.replace('%sapper.scripts%', () => `<script>${script}</script>`)
+				.replace('%sapper.scripts%', () => `<script${nonce_attr}>${script}</script>`)
 				.replace('%sapper.html%', () => html)
 				.replace('%sapper.head%', () => `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
 				.replace('%sapper.styles%', () => styles);

src/rollup.ts

@@ -30,7 +30,8 @@ export default {
 		output: () => {
 			return {
 				dir: locations.dest(),
-				format: 'cjs'
+				format: 'cjs',
+				sourcemap: dev()
 			};
 		}
 	},

src/runtime/index.ts

@@ -66,8 +66,8 @@ function select_route(url: URL): Target {
 			const query: Record<string, string | true> = {};
 			if (url.search.length > 0) {
 				url.search.slice(1).split('&').forEach(searchParam => {
-					const [, key, value] = /([^=]+)=(.*)/.exec(searchParam);
-					query[key] = value || true;
+					const [, key, value] = /([^=]+)(?:=(.*))?/.exec(searchParam);
+					query[key] = decodeURIComponent((value || '').replace(/\+/g, ' '));
 				});
 			}
 			return { url, path, page, match, query };

test/app/app/client.js

@@ -1,4 +1,4 @@
-import { init, prefetchRoutes } from '../../../runtime.js';
+import { init, goto, prefetchRoutes } from '../../../runtime.js';
 import { Store } from 'svelte/store.js';
 import { manifest } from './manifest/client.js';
 
@@ -10,4 +10,5 @@ window.init = () => {
 	});
 };
 
-window.prefetchRoutes = prefetchRoutes;
+window.prefetchRoutes = prefetchRoutes;
+window.goto = goto;

test/app/routes/blog/_posts.js

@@ -106,6 +106,14 @@ const posts = [
 			<p>If you didn't have adult onset diabetes, I wouldn't mind giving you a little sugar. Everybody dance NOW. And the soup of the day is bread. Great, now I'm gonna smell to high heaven like a tuna melt!</p>
 			<p>That's how Tony Wonder lost a nut. She calls it a Mayonegg. Go ahead, touch the Cornballer. There's a new daddy in town. A discipline daddy.</p>
 		`
+	},
+
+	{
+		title: 'Encödïng test',
+		slug: 'encödïng-test',
+		html: `
+			<p>It works</p>
+		`
 	}
 ];
 

test/app/routes/echo/page/[slug].html

@@ -0,0 +1,12 @@
+<h1>{slug} ({message})</h1>
+
+<script>
+	export default {
+		preload({ params, query }) {
+			return {
+				slug: params.slug,
+				message: query.message
+			};
+		}
+	};
+</script>

test/app/routes/echo/server-route/[slug].js

@@ -0,0 +1,15 @@
+export function get(req, res) {
+	res.writeHead(200, {
+		'Content-Type': 'text/html'
+	});
+
+	res.end(`
+		<!doctype html>
+		<html>
+			<head><meta charset="utf-8"></head>
+			<body>
+				<h1>${req.params.slug}</h1>
+			</body>
+		</html>
+	`);
+}

test/app/routes/fünke.html

@@ -1 +1,11 @@
-<h1>I'm afraid I just blue myself</h1>
+<h1>{phrase}</h1>
+
+<script>
+	export default {
+		preload() {
+			return this.fetch('fünke.json').then(r => r.json()).then(phrase => {
+				return { phrase };
+			});
+		}
+	};
+</script>

test/app/routes/fünke.json.js

@@ -0,0 +1,9 @@
+export function get(req, res) {
+	res.writeHead(200, {
+		'Content-Type': 'application/json'
+	});
+
+	res.end(JSON.stringify(
+		"I'm afraid I just blue myself"
+	));
+}

test/app/routes/index.html

@@ -15,6 +15,8 @@
 <a href='credentials?creds=include'>credentials</a>
 <a rel=prefetch class='{page === "blog"  ? "selected" : ""}' href='blog'>blog</a>
 <a href="const">const</a>
+<a href="echo/page/encöded?message=hëllö+wörld">echo/page/encöded?message=hëllö+wörld</a>
+<a href="echo/page/empty?message">echo/page/empty?message</a>
 
 <div class='hydrate-test'></div>
 

test/common/test.js

@@ -5,6 +5,7 @@ const Nightmare = require('nightmare');
 const walkSync = require('walk-sync');
 const rimraf = require('rimraf');
 const ports = require('port-authority');
+const fetch = require('node-fetch');
 
 Nightmare.action('page', {
 	title(done) {
@@ -93,6 +94,7 @@ function testExport({ basepath = '' }) {
 				'blog/how-to-use-sapper/index.html',
 				'blog/what-is-sapper/index.html',
 				'blog/why-the-name/index.html',
+				'blog/encödïng-test/index.html',
 
 				'blog.json',
 				'blog/a-very-long-post.json',
@@ -101,6 +103,7 @@ function testExport({ basepath = '' }) {
 				'blog/how-to-use-sapper.json',
 				'blog/what-is-sapper.json',
 				'blog/why-the-name.json',
+				'blog/encödïng-test.json',
 
 				'favicon.png',
 				'global.css',
@@ -746,23 +749,72 @@ function run({ mode, basepath = '' }) {
 
 			it('allows reserved words as route names', () => {
 				return nightmare.goto(`${base}/const`).init()
-					.then(() => nightmare.page.title())
+					.page.title()
 					.then(title => {
 						assert.equal(title, 'reserved words are okay as routes');
 					});
 			});
+
+			it('encodes req.params and req.query for server-rendered pages', () => {
+				return nightmare.goto(`${base}/echo/page/encöded?message=hëllö+wörld`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'encöded (hëllö wörld)');
+					});
+			});
+
+			it('encodes req.params and req.query for client-rendered pages', () => {
+				return nightmare.goto(base).init()
+					.click('a[href="echo/page/encöded?message=hëllö+wörld"]')
+					.wait(100)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'encöded (hëllö wörld)');
+					});
+			});
+
+			it('accepts value-less query string parameter on server', () => {
+				return nightmare.goto(`${base}/echo/page/empty?message`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'empty ()');
+					});
+			});
+
+			it('accepts value-less query string parameter on client', () => {
+				return nightmare.goto(base).init()
+					.click('a[href="echo/page/empty?message"]')
+					.wait(100)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'empty ()');
+					});
+			});
+
+			it('encodes req.params for server routes', () => {
+				return nightmare.goto(`${base}/echo/server-route/encöded`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'encöded');
+					});
+			});
 		});
 
 		describe('headers', () => {
-			it('sets Content-Type and Link...preload headers', () => {
-				return capture(() => nightmare.goto(base)).then(requests => {
-					const { headers } = requests[0];
+			it('sets Content-Type, Link...preload, and Cache-Control headers', () => {
+				return capture(() => fetch(base)).then(responses => {
+					const { headers } = responses[0];
 
 					assert.equal(
 						headers['content-type'],
 						'text/html'
 					);
 
+					assert.equal(
+						headers['cache-control'],
+						'max-age=600'
+					);
+
 					const str = ['main', '.+?\\.\\d+']
 						.map(file => {
 							return `<${basepath}/client/[^/]+/${file}\\.js>;rel="preload";as="script"`;