-> v0.21.0

Fix filenames

.gitignore

@@ -4,7 +4,7 @@ yarn-error.log
 node_modules
 cypress/screenshots
 test/app/.sapper
-test/app/app/manifest
+test/app/src/manifest
 test/app/export
 test/app/build
 sapper

CHANGELOG.md

@@ -1,5 +1,36 @@
 # sapper changelog
 
+## 0.21.0
+
+* Change project folder structure ([#432](https://github.com/sveltejs/sapper/issues/432))
+* Escape filenames ([#446](https://github.com/sveltejs/sapper/pull/446/))
+
+## 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))

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.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -6287,9 +6287,9 @@
       }
     },
     "shimport": {
-      "version": "0.0.10",
+      "version": "0.0.11",
-      "resolved": "https://registry.npmjs.org/shimport/-/shimport-0.0.10.tgz",
+      "resolved": "https://registry.npmjs.org/shimport/-/shimport-0.0.11.tgz",
-      "integrity": "sha512-3xPFDLmcLj87sx0OwA60qbloMQUsu6VGF97IG4RqxTf91sGeiaaXOPxM1PoQHbaTm4TOhH8zosokqLAZtuNGnA=="
+      "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.3",
+  "version": "0.21.0",
   "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

@@ -11,6 +11,7 @@ import * as events from './interfaces';
 import { copy_shimport } from './utils/copy_shimport';
 import { Dirs, PageComponent } from '../interfaces';
 import { CompileResult } from '../core/create_compilers/interfaces';
+import read_template from '../core/read_template';
 
 type Opts = {
 	legacy: boolean;
@@ -39,9 +40,9 @@ async function execute(emitter: EventEmitter, opts: Opts, dirs: Dirs) {
 	mkdirp.sync(`${dirs.dest}/client`);
 	copy_shimport(dirs.dest);
 
-	// minify app/template.html
+	// minify src/template.html
 	// TODO compile this to a function? could be quicker than str.replace(...).replace(...).replace(...)
-	const template = fs.readFileSync(`${dirs.app}/template.html`, 'utf-8');
+	const template = read_template();
 
 	// remove this in a future version
 	if (template.indexOf('%sapper.base%') === -1) {
@@ -54,10 +55,10 @@ async function execute(emitter: EventEmitter, opts: Opts, dirs: Dirs) {
 
 	const manifest_data = create_manifest_data();
 
-	// create app/manifest/client.js and app/manifest/server.js
+	// create src/manifest/client.js and src/manifest/server.js
 	create_main_manifests({ bundler: opts.bundler, manifest_data });
 
-	const { client, server, serviceworker } = create_compilers(opts.bundler, dirs);
+	const { client, server, serviceworker } = await create_compilers(opts.bundler, dirs);
 
 	const client_result = await client.compile();
 	emitter.emit('build', <events.BuildEvent>{
@@ -70,7 +71,7 @@ async function execute(emitter: EventEmitter, opts: Opts, dirs: Dirs) {
 
 	if (opts.legacy) {
 		process.env.SAPPER_LEGACY_BUILD = 'true';
-		const { client } = create_compilers(opts.bundler, dirs);
+		const { client } = await create_compilers(opts.bundler, dirs);
 
 		const client_result = await client.compile();
 
@@ -80,6 +81,7 @@ async function execute(emitter: EventEmitter, opts: Opts, dirs: Dirs) {
 			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

@@ -15,6 +15,7 @@ import * as events from './interfaces';
 import validate_bundler from '../cli/utils/validate_bundler';
 import { copy_shimport } from './utils/copy_shimport';
 import { ManifestData } from '../interfaces';
+import read_template from '../core/read_template';
 
 export function dev(opts) {
 	return new Watcher(opts);
@@ -23,7 +24,7 @@ export function dev(opts) {
 class Watcher extends EventEmitter {
 	bundler: string;
 	dirs: {
-		app: string;
+		src: string;
 		dest: string;
 		routes: string;
 		rollup: string;
@@ -36,6 +37,8 @@ class Watcher extends EventEmitter {
 	live: boolean;
 	hot: boolean;
 
+	devtools_port: number;
+
 	dev_server: DevServer;
 	proc: child_process.ChildProcess;
 	filewatchers: Array<{ close: () => void }>;
@@ -51,23 +54,25 @@ class Watcher extends EventEmitter {
 	}
 
 	constructor({
-		app = locations.app(),
+		src = locations.src(),
 		dest = locations.dest(),
 		routes = locations.routes(),
 		'dev-port': dev_port,
 		live,
 		hot,
+		'devtools-port': devtools_port,
 		bundler,
 		webpack = 'webpack',
 		rollup = 'rollup',
 		port = +process.env.PORT
 	}: {
-		app: string,
+		src: string,
 		dest: string,
 		routes: string,
 		'dev-port': number,
 		live: boolean,
 		hot: boolean,
+		'devtools-port': number,
 		bundler?: string,
 		webpack: string,
 		rollup: string,
@@ -76,7 +81,7 @@ class Watcher extends EventEmitter {
 		super();
 
 		this.bundler = validate_bundler(bundler);
-		this.dirs = { app, dest, routes, webpack, rollup };
+		this.dirs = { src, dest, routes, webpack, rollup };
 		this.port = port;
 		this.closed = false;
 
@@ -84,6 +89,8 @@ class Watcher extends EventEmitter {
 		this.live = live;
 		this.hot = hot;
 
+		this.devtools_port = devtools_port;
+
 		this.filewatchers = [];
 
 		this.current_build = {
@@ -94,7 +101,7 @@ class Watcher extends EventEmitter {
 		};
 
 		// remove this in a future version
-		const template = fs.readFileSync(path.join(app, 'template.html'), 'utf-8');
+		const template = read_template();
 		if (template.indexOf('%sapper.base%') === -1) {
 			const error = new Error(`As of Sapper v0.10, your template.html file must include %sapper.base% in the <head>`);
 			error.code = `missing-sapper-base`;
@@ -129,6 +136,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 {
@@ -166,7 +176,7 @@ class Watcher extends EventEmitter {
 				}
 			),
 
-			fs.watch(`${locations.app()}/template.html`, () => {
+			fs.watch(`${locations.src()}/template.html`, () => {
 				this.dev_server.send({
 					action: 'reload'
 				});
@@ -176,7 +186,7 @@ class Watcher extends EventEmitter {
 		let deferred = new Deferred();
 
 		// TODO watch the configs themselves?
-		const compilers: Compilers = create_compilers(this.bundler, this.dirs);
+		const compilers: Compilers = await create_compilers(this.bundler, this.dirs);
 
 		let log = '';
 
@@ -238,12 +248,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

@@ -13,6 +13,7 @@ import * as events from './interfaces';
 type Opts = {
 	build: string,
 	dest: string,
+	static: string,
 	basepath?: string,
 	timeout: number | false
 };
@@ -46,7 +47,7 @@ async function execute(emitter: EventEmitter, opts: Opts) {
 	// Prep output directory
 	sander.rimrafSync(export_dir);
 
-	sander.copydirSync('assets').to(export_dir);
+	sander.copydirSync(opts.static).to(export_dir);
 	sander.copydirSync(opts.build, 'client').to(export_dir, 'client');
 
 	if (sander.existsSync(opts.build, 'service-worker.js')) {
@@ -85,7 +86,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/api/interfaces.ts

@@ -1,5 +1,5 @@
 import * as child_process from 'child_process';
-import { CompileResult } from '../core/create_compilers';
+import { CompileResult } from '../core/create_compilers/interfaces';
 
 export type ReadyEvent = {
 	port: number;

src/cli/build.ts

@@ -18,7 +18,7 @@ export function build(opts: { bundler?: string, legacy?: boolean }) {
 				bundler
 			}, {
 				dest: locations.dest(),
-				app: locations.app(),
+				src: locations.src(),
 				routes: locations.routes(),
 				webpack: 'webpack',
 				rollup: 'rollup'

src/cli/export.ts

@@ -15,6 +15,7 @@ export function exporter(export_dir: string, {
 		try {
 			const emitter = _exporter({
 				build: locations.dest(),
+				static: locations.static(),
 				dest: export_dir,
 				basepath,
 				timeout

src/cli/utils/validate_bundler.ts

@@ -1,15 +1,19 @@
 import * as fs from 'fs';
 
-export default function validate_bundler(bundler?: string) {
+export default function validate_bundler(bundler?: 'rollup' | 'webpack') {
 	if (!bundler) {
 		bundler = (
-			fs.existsSync('rollup') ? 'rollup' :
+			fs.existsSync('rollup.config.js') ? 'rollup' :
-			fs.existsSync('webpack') ? 'webpack' :
+			fs.existsSync('webpack.config.js') ? 'webpack' :
 			null
 		);
 
 		if (!bundler) {
-			throw new Error(`Could not find a 'rollup' or 'webpack' directory`);
+			// TODO remove in a future version
+			deprecate_dir('rollup');
+			deprecate_dir('webpack');
+
+			throw new Error(`Could not find rollup.config.js or webpack.config.js`);
 		}
 	}
 
@@ -18,4 +22,17 @@ export default function validate_bundler(bundler?: string) {
 	}
 
 	return bundler;
+}
+
+function deprecate_dir(bundler: 'rollup' | 'webpack') {
+	try {
+		const stats = fs.statSync(bundler);
+		if (!stats.isDirectory()) return;
+	} catch (err) {
+		// do nothing
+		return;
+	}
+
+	// TODO link to docs, once those docs exist
+	throw new Error(`As of Sapper 0.21, build configuration should be placed in a single ${bundler}.config.js file`);
 }

src/config.ts

@@ -4,7 +4,8 @@ export const dev = () => process.env.NODE_ENV !== 'production';
 
 export const locations = {
 	base:   () => path.resolve(process.env.SAPPER_BASE || ''),
-	app:    () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_APP    || 'app'),
+	src:    () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_SRC    || 'src'),
-	routes: () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_ROUTES || 'routes'),
+	static: () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_STATIC || 'static'),
+	routes: () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_ROUTES || 'src/routes'),
 	dest:   () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_DEST   || `.sapper/${dev() ? 'dev' : 'prod'}`)
 };

src/core/create_compilers/RollupCompiler.ts

@@ -15,8 +15,8 @@ export default class RollupCompiler {
 	chunks: any[];
 	css_files: Array<{ id: string, code: string }>;
 
-	constructor(config: string) {
+	constructor(config: any) {
-		this._ = this.get_config(path.resolve(config));
+		this._ = this.get_config(config);
 		this.input = null;
 		this.warnings = [];
 		this.errors = [];
@@ -24,31 +24,8 @@ export default class RollupCompiler {
 		this.css_files = [];
 	}
 
-	async get_config(input: string) {
+	async get_config(mod: any) {
-		if (!rollup) rollup = relative('rollup', process.cwd());
+		// TODO this is hacky, and doesn't need to apply to all three compilers
-
-		const bundle = await rollup.rollup({
-			input,
-			external: (id: string) => {
-				return (id[0] !== '.' && !path.isAbsolute(id)) || id.slice(-5, id.length) === '.json';
-			}
-		});
-
-		const { code } = await bundle.generate({ format: 'cjs' });
-
-		// temporarily override require
-		const defaultLoader = require.extensions['.js'];
-		require.extensions['.js'] = (module: any, filename: string) => {
-			if (filename === input) {
-				module._compile(code, filename);
-			} else {
-				defaultLoader(module, filename);
-			}
-		};
-
-		const mod: any = require(input);
-		delete require.cache[input];
-
 		(mod.plugins || (mod.plugins = [])).push({
 			name: 'sapper-internal',
 			options: (opts: any) => {
@@ -157,4 +134,34 @@ export default class RollupCompiler {
 			}
 		});
 	}
+
+	static async load_config() {
+		if (!rollup) rollup = relative('rollup', process.cwd());
+
+		const input = path.resolve('rollup.config.js');
+
+		const bundle = await rollup.rollup({
+			input,
+			external: (id: string) => {
+				return (id[0] !== '.' && !path.isAbsolute(id)) || id.slice(-5, id.length) === '.json';
+			}
+		});
+
+		const { code } = await bundle.generate({ format: 'cjs' });
+
+		// temporarily override require
+		const defaultLoader = require.extensions['.js'];
+		require.extensions['.js'] = (module: any, filename: string) => {
+			if (filename === input) {
+				module._compile(code, filename);
+			} else {
+				defaultLoader(module, filename);
+			}
+		};
+
+		const config: any = require(input);
+		delete require.cache[input];
+
+		return config;
+	}
 }

src/core/create_compilers/WebpackCompiler.ts

@@ -1,4 +1,3 @@
-import * as path from 'path';
 import relative from 'require-relative';
 import { CompileResult } from './interfaces';
 import WebpackResult from './WebpackResult';
@@ -8,9 +7,9 @@ let webpack: any;
 export class WebpackCompiler {
 	_: any;
 
-	constructor(config: string) {
+	constructor(config: any) {
 		if (!webpack) webpack = relative('webpack', process.cwd());
-		this._ = webpack(require(path.resolve(config)));
+		this._ = webpack(config);
 	}
 
 	oninvalid(cb: (filename: string) => void) {

src/core/create_compilers/extract_css.ts

@@ -4,6 +4,7 @@ import hash from 'string-hash';
 import * as codec from 'sourcemap-codec';
 import { PageComponent, Dirs } from '../../interfaces';
 import { CompileResult } from './interfaces';
+import { posixify } from '../utils'
 
 const inline_sourcemap_header = 'data:application/json;charset=utf-8;base64,';
 
@@ -75,7 +76,7 @@ export default function extract_css(client_result: CompileResult, components: Pa
 	const component_owners = new Map();
 	client_result.chunks.forEach(chunk => {
 		chunk.modules.forEach(module => {
-			const component = path.relative(dirs.routes, module);
+			const component = posixify(path.relative(dirs.routes, module));
 			component_owners.set(component, chunk);
 		});
 	});
@@ -169,7 +170,8 @@ export default function extract_css(client_result: CompileResult, components: Pa
 		return null;
 	}
 
-	const main = client_result.assets.main;
+	let 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_compilers/index.ts

@@ -1,5 +1,4 @@
-import * as fs from 'fs';
+import * as path from 'path';
-import { Dirs } from '../../interfaces';
 import RollupCompiler from './RollupCompiler';
 import { WebpackCompiler } from './WebpackCompiler';
 
@@ -11,27 +10,35 @@ export type Compilers = {
 	serviceworker?: Compiler;
 }
 
-export default function create_compilers(bundler: string, dirs: Dirs): Compilers {
+export default async function create_compilers(bundler: 'rollup' | 'webpack'): Promise<Compilers> {
 	if (bundler === 'rollup') {
-		const sw = `${dirs.rollup}/service-worker.config.js`;
+		const config = await RollupCompiler.load_config();
+		validate_config(config, 'rollup');
 
 		return {
-			client: new RollupCompiler(`${dirs.rollup}/client.config.js`),
+			client: new RollupCompiler(config.client),
-			server: new RollupCompiler(`${dirs.rollup}/server.config.js`),
+			server: new RollupCompiler(config.server),
-			serviceworker: fs.existsSync(sw) && new RollupCompiler(sw)
+			serviceworker: config.serviceworker && new RollupCompiler(config.serviceworker)
 		};
 	}
 
 	if (bundler === 'webpack') {
-		const sw = `${dirs.webpack}/service-worker.config.js`;
+		const config = require(path.resolve('webpack.config.js'));
+		validate_config(config, 'webpack');
 
 		return {
-			client: new WebpackCompiler(`${dirs.webpack}/client.config.js`),
+			client: new WebpackCompiler(config.client),
-			server: new WebpackCompiler(`${dirs.webpack}/server.config.js`),
+			server: new WebpackCompiler(config.server),
-			serviceworker: fs.existsSync(sw) && new WebpackCompiler(sw)
+			serviceworker: config.serviceworker && new WebpackCompiler(config.serviceworker)
 		};
 	}
 
 	// this shouldn't be possible...
 	throw new Error(`Invalid bundler option '${bundler}'`);
+}
+
+function validate_config(config: any, bundler: 'rollup' | 'webpack') {
+	if (!config.client || !config.server) {
+		throw new Error(`${bundler}.config.js must export a { client, server, serviceworker? } object`);
+	}
 }

src/core/create_manifest_data.ts

@@ -5,6 +5,11 @@ import { Page, PageComponent, ServerRoute, ManifestData } from '../interfaces';
 import { posixify, reserved_words } from './utils';
 
 export default function create_manifest_data(cwd = locations.routes()): ManifestData {
+	// TODO remove in a future version
+	if (!fs.existsSync(cwd)) {
+		throw new Error(`As of Sapper 0.21, the routes/ directory should become src/routes/`);
+	}
+
 	const components: PageComponent[] = [];
 	const pages: Page[] = [];
 	const server_routes: ServerRoute[] = [];

src/core/create_manifests.ts

@@ -1,7 +1,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import glob from 'tiny-glob/sync.js';
-import { posixify, write_if_changed } from './utils';
+import { posixify, stringify, write_if_changed } from './utils';
 import { dev, locations } from '../config';
 import { Page, PageComponent, ServerRoute, ManifestData } from '../interfaces';
 
@@ -10,7 +10,7 @@ export function create_main_manifests({ bundler, manifest_data, dev_port }: {
 	manifest_data: ManifestData;
 	dev_port?: number;
 }) {
-	const manifest_dir = path.join(locations.app(), 'manifest');
+	const manifest_dir = path.join(locations.src(), 'manifest');
 	if (!fs.existsSync(manifest_dir)) fs.mkdirSync(manifest_dir);
 
 	const path_to_routes = path.relative(manifest_dir, locations.routes());
@@ -30,20 +30,32 @@ export function create_serviceworker_manifest({ manifest_data, client_files }: {
 	manifest_data: ManifestData;
 	client_files: string[];
 }) {
-	const assets = glob('**', { cwd: 'assets', filesOnly: true });
+	let files;
+
+	// TODO remove in a future version
+	if (fs.existsSync(locations.static())) {
+		files = glob('**', { cwd: locations.static(), filesOnly: true });
+	} else {
+		if (fs.existsSync('assets')) {
+			throw new Error(`As of Sapper 0.21, the assets/ directory should become static/`);
+		}
+
+		files = [];
+	}
 
 	let code = `
 		// This file is generated by Sapper — do not edit it!
 		export const timestamp = ${Date.now()};
 
-		export const assets = [\n\t${assets.map((x: string) => `"${x}"`).join(',\n\t')}\n];
+		export const files = [\n\t${files.map((x: string) => stringify(x)).join(',\n\t')}\n];
+		export { files as assets }; // legacy
 
-		export const shell = [\n\t${client_files.map((x: string) => `"${x}"`).join(',\n\t')}\n];
+		export const shell = [\n\t${client_files.map((x: string) => stringify(x)).join(',\n\t')}\n];
 
 		export const routes = [\n\t${manifest_data.pages.map((r: Page) => `{ pattern: ${r.pattern} }`).join(',\n\t')}\n];
 	`.replace(/^\t\t/gm, '').trim();
 
-	write_if_changed(`${locations.app()}/manifest/service-worker.js`, code);
+	write_if_changed(`${locations.src()}/manifest/service-worker.js`, code);
 }
 
 function generate_client(
@@ -60,8 +72,10 @@ function generate_client(
 
 	let code = `
 		// This file is generated by Sapper — do not edit it!
-		import root from '${get_file(path_to_routes, manifest_data.root)}';
+		import root from ${stringify(get_file(path_to_routes, manifest_data.root))};
-		import error from '${posixify(`${path_to_routes}/_error.html`)}';
+		import error from ${stringify(posixify(`${path_to_routes}/_error.html`))};
+
+		const d = decodeURIComponent;
 
 		${manifest_data.components.map(component => {
 			const annotation = bundler === 'webpack'
@@ -71,8 +85,8 @@ function generate_client(
 			const source = get_file(path_to_routes, component);
 
 			return `const ${component.name} = {
-			js: () => import(${annotation}'${source}'),
+			js: () => import(${annotation}${stringify(source)}),
-			css: "__SAPPER_CSS_PLACEHOLDER:${component.file}__"
+			css: "__SAPPER_CSS_PLACEHOLDER:${stringify(component.file, false)}__"
 		};`;
 		}).join('\n')}
 
@@ -88,7 +102,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(', ')} }) }`;
 							}
 
@@ -113,7 +127,7 @@ function generate_client(
 
 		code += `
 
-			import('${sapper_dev_client}').then(client => {
+			import(${stringify(sapper_dev_client)}).then(client => {
 				client.connect(${dev_port});
 			});`.replace(/^\t{3}/gm, '');
 	}
@@ -127,17 +141,19 @@ function generate_server(
 ) {
 	const imports = [].concat(
 		manifest_data.server_routes.map(route =>
-			`import * as ${route.name} from '${posixify(`${path_to_routes}/${route.file}`)}';`),
+			`import * as ${route.name} from ${stringify(posixify(`${path_to_routes}/${route.file}`))};`),
 		manifest_data.components.map(component =>
-			`import ${component.name} from '${get_file(path_to_routes, component)}';`),
+			`import ${component.name} from ${stringify(get_file(path_to_routes, component))};`),
-		`import root from '${get_file(path_to_routes, manifest_data.root)}';`,
+		`import root from ${stringify(get_file(path_to_routes, manifest_data.root))};`,
-		`import error from '${posixify(`${path_to_routes}/_error.html`)}';`
+		`import error from ${stringify(posixify(`${path_to_routes}/_error.html`))};`
 	);
 
 	let code = `
 		// 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 +161,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')}
 			],
@@ -160,12 +176,12 @@ function generate_server(
 
 							const props = [
 								`name: "${part.component.name}"`,
-								`file: "${part.component.file}"`,
+								`file: ${stringify(part.component.file)}`,
 								`component: ${part.component.name}`
 							];
 
 							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/core/read_template.ts

@@ -0,0 +1,17 @@
+import * as fs from 'fs';
+import { locations } from '../config';
+
+export default function read_template() {
+	try {
+		return fs.readFileSync(`${locations.src()}/template.html`, 'utf-8');
+	} catch (err) {
+		if (fs.existsSync(`app/template.html`)) {
+			throw new Error(`As of Sapper 0.21, the default folder structure has been changed:
+  app/    --> src/
+  routes/ --> src/routes/
+  assets/ --> static/`);
+		}
+
+		throw err;
+	}
+}

src/core/utils.ts

@@ -14,6 +14,11 @@ export function posixify(file: string) {
 	return file.replace(/[/\\]/g, '/');
 }
 
+export function stringify(string: string, includeQuotes: boolean = true) {
+	const quoted = JSON.stringify(string);
+	return includeQuotes ? quoted : quoted.slice(1, -1);
+}
+
 export function fudge_mtime(file: string) {
 	// need to fudge the mtime so that webpack doesn't go doolally
 	const { atime, mtime } = fs.statSync(file);

src/interfaces.ts

@@ -43,7 +43,7 @@ export type ServerRoute = {
 
 export type Dirs = {
 	dest: string,
-	app: string,
+	src: string,
 	routes: string,
 	webpack: string,
 	rollup: string

src/middleware.ts

@@ -8,6 +8,7 @@ import fetch from 'node-fetch';
 import { lookup } from './middleware/mime';
 import { locations, dev } from './config';
 import sourceMapSupport from 'source-map-support';
+import read_template from './core/read_template';
 
 sourceMapSupport.install();
 
@@ -136,22 +137,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),
@@ -288,8 +289,8 @@ function get_page_handler(
 		: (assets => () => assets)(JSON.parse(fs.readFileSync(path.join(output, 'build.json'), 'utf-8')));
 
 	const template = dev()
-		? () => fs.readFileSync(`${locations.app()}/template.html`, 'utf-8')
+		? () => read_template()
-		: (str => () => str)(fs.readFileSync(`${locations.dest()}/template.html`, 'utf-8'));
+		: (str => () => str)(read_template());
 
 	const { server_routes, pages } = manifest;
 	const error_route = manifest.error;
@@ -312,6 +313,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?
@@ -524,9 +526,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

@@ -5,7 +5,7 @@ export default {
 
 	client: {
 		input: () => {
-			return `${locations.app()}/client.js`
+			return `${locations.src()}/client.js`
 		},
 
 		output: () => {
@@ -24,20 +24,21 @@ export default {
 
 	server: {
 		input: () => {
-			return `${locations.app()}/server.js`
+			return `${locations.src()}/server.js`
 		},
 
 		output: () => {
 			return {
 				dir: locations.dest(),
-				format: 'cjs'
+				format: 'cjs',
+				sourcemap: dev()
 			};
 		}
 	},
 
 	serviceworker: {
 		input: () => {
-			return `${locations.app()}/service-worker.js`;
+			return `${locations.src()}/service-worker.js`;
 		},
 
 		output: () => {

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);
+					const [, key, value] = /([^=]+)(?:=(.*))?/.exec(searchParam);
-					query[key] = value || true;
+					query[key] = decodeURIComponent((value || '').replace(/\+/g, ' '));
 				});
 			}
 			return { url, path, page, match, query };

src/webpack.ts

@@ -6,7 +6,7 @@ export default {
 	client: {
 		entry: () => {
 			return {
-				main: `${locations.app()}/client`
+				main: `${locations.src()}/client`
 			};
 		},
 
@@ -23,7 +23,7 @@ export default {
 	server: {
 		entry: () => {
 			return {
-				server: `${locations.app()}/server`
+				server: `${locations.src()}/server`
 			};
 		},
 
@@ -40,7 +40,7 @@ export default {
 	serviceworker: {
 		entry: () => {
 			return {
-				'service-worker': `${locations.app()}/service-worker`
+				'service-worker': `${locations.src()}/service-worker`
 			};
 		},
 

test/app/src/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/src/routes/about.html

@@ -9,7 +9,7 @@
 <button class='prefetch' on:click='prefetch("blog/why-the-name")'>Why the name?</button>
 
 <script>
-	import { goto, prefetch } from '../../../runtime.js';
+	import { goto, prefetch } from '../../../../runtime.js';
 
 	export default {
 		oncreate() {

test/app/src/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/src/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/src/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/src/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/app/webpack.config.js

@@ -0,0 +1,77 @@
+const webpack = require('webpack');
+const config = require('../../config/webpack.js');
+const sapper_pkg = require('../../package.json');
+
+const mode = process.env.NODE_ENV;
+const isDev = mode === 'development';
+
+module.exports = {
+	client: {
+		entry: config.client.entry(),
+		output: config.client.output(),
+		resolve: {
+			extensions: ['.js', '.html']
+		},
+		module: {
+			rules: [
+				{
+					test: /\.html$/,
+					exclude: /node_modules/,
+					use: {
+						loader: 'svelte-loader',
+						options: {
+							hydratable: true,
+							cascade: false,
+							store: true
+						}
+					}
+				}
+			]
+		},
+		mode,
+		plugins: [
+			isDev && new webpack.HotModuleReplacementPlugin()
+		].filter(Boolean),
+		devtool: isDev && 'inline-source-map'
+	},
+
+	server: {
+		entry: config.server.entry(),
+		output: config.server.output(),
+		target: 'node',
+		resolve: {
+			extensions: ['.js', '.html']
+		},
+		externals: [].concat(
+			Object.keys(sapper_pkg.dependencies),
+			Object.keys(sapper_pkg.devDependencies)
+		),
+		module: {
+			rules: [
+				{
+					test: /\.html$/,
+					exclude: /node_modules/,
+					use: {
+						loader: 'svelte-loader',
+						options: {
+							css: false,
+							cascade: false,
+							store: true,
+							generate: 'ssr'
+						}
+					}
+				}
+			]
+		},
+		mode,
+		performance: {
+			hints: false // it doesn't matter if server.js is large
+		}
+	},
+
+	serviceworker: {
+		entry: config.serviceworker.entry(),
+		output: config.serviceworker.output(),
+		mode
+	}
+};

test/app/webpack/client.config.js

@@ -1,34 +0,0 @@
-const config = require('../../../config/webpack.js');
-const webpack = require('webpack');
-
-const mode = process.env.NODE_ENV;
-const isDev = mode === 'development';
-
-module.exports = {
-	entry: config.client.entry(),
-	output: config.client.output(),
-	resolve: {
-		extensions: ['.js', '.html']
-	},
-	module: {
-		rules: [
-			{
-				test: /\.html$/,
-				exclude: /node_modules/,
-				use: {
-					loader: 'svelte-loader',
-					options: {
-						hydratable: true,
-						cascade: false,
-						store: true
-					}
-				}
-			}
-		]
-	},
-	mode,
-	plugins: [
-		isDev && new webpack.HotModuleReplacementPlugin()
-	].filter(Boolean),
-	devtool: isDev && 'inline-source-map'
-};

test/app/webpack/server.config.js

@@ -1,36 +0,0 @@
-const config = require('../../../config/webpack.js');
-const sapper_pkg = require('../../../package.json');
-
-module.exports = {
-	entry: config.server.entry(),
-	output: config.server.output(),
-	target: 'node',
-	resolve: {
-		extensions: ['.js', '.html']
-	},
-	externals: [].concat(
-		Object.keys(sapper_pkg.dependencies),
-		Object.keys(sapper_pkg.devDependencies)
-	),
-	module: {
-		rules: [
-			{
-				test: /\.html$/,
-				exclude: /node_modules/,
-				use: {
-					loader: 'svelte-loader',
-					options: {
-						css: false,
-						cascade: false,
-						store: true,
-						generate: 'ssr'
-					}
-				}
-			}
-		]
-	},
-	mode: process.env.NODE_ENV,
-	performance: {
-		hints: false // it doesn't matter if server.js is large
-	}
-};

test/app/webpack/service-worker.config.js

@@ -1,7 +0,0 @@
-const config = require('../../../config/webpack.js');
-
-module.exports = {
-	entry: config.serviceworker.entry(),
-	output: config.serviceworker.output(),
-	mode: process.env.NODE_ENV
-};

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',
@@ -751,18 +754,67 @@ function run({ mode, basepath = '' }) {
 						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', () => {
+			it('sets Content-Type, Link...preload, and Cache-Control headers', () => {
-				return capture(() => nightmare.goto(base)).then(requests => {
+				return capture(() => fetch(base)).then(responses => {
-					const { headers } = requests[0];
+					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"`;