-> v0.20.1

Enable source maps by default in dev mode when using rollup

CHANGELOG.md

@@ -1,5 +1,15 @@
 # sapper changelog
 
+## 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))

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.19.3",
+  "version": "0.20.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -10,15 +10,6 @@
       "integrity": "sha1-MU+BaPUK5IoDLP2tX9tDb0ZKl6w=",
       "dev": true
     },
-    "@types/blessed": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/@types/blessed/-/blessed-0.1.10.tgz",
-      "integrity": "sha512-lCpkGnCq2lj9RBPwh/RH/ZJegYV6JdyyRHmURIW1DwMdtNhRRxYeHllqaMu8K6bDf6zhO7PpHsmEqlYMDPlmhw==",
-      "requires": {
-        "@types/events": "*",
-        "@types/node": "*"
-      }
-    },
     "@types/estree": {
       "version": "0.0.39",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
@@ -28,7 +19,8 @@
     "@types/events": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@types/events/-/events-1.2.0.tgz",
-      "integrity": "sha512-KEIlhXnIutzKwRbQkGWb/I4HFqBuUykAdHgDED6xqwXJfONCjF5VoE0cXEiurh3XauygxzeDzgtXUqvLkxFzzA=="
+      "integrity": "sha512-KEIlhXnIutzKwRbQkGWb/I4HFqBuUykAdHgDED6xqwXJfONCjF5VoE0cXEiurh3XauygxzeDzgtXUqvLkxFzzA==",
+      "dev": true
     },
     "@types/glob": {
       "version": "5.0.35",
@@ -65,7 +57,8 @@
     "@types/node": {
       "version": "10.9.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-10.9.4.tgz",
-      "integrity": "sha512-fCHV45gS+m3hH17zgkgADUSi2RR1Vht6wOZ0jyHP8rjiQra9f+mIcgwPQHllmDocYOstIEbKlxbFDYlgrTPYqw=="
+      "integrity": "sha512-fCHV45gS+m3hH17zgkgADUSi2RR1Vht6wOZ0jyHP8rjiQra9f+mIcgwPQHllmDocYOstIEbKlxbFDYlgrTPYqw==",
+      "dev": true
     },
     "@types/rimraf": {
       "version": "2.0.2",
@@ -1017,11 +1010,6 @@
       "integrity": "sha1-RqoXUftqL5PuXmibsQh9SxTGwgU=",
       "dev": true
     },
-    "blessed": {
-      "version": "0.1.81",
-      "resolved": "https://registry.npmjs.org/blessed/-/blessed-0.1.81.tgz",
-      "integrity": "sha1-+WLWh+wsNpVwrnGvhDJW5tDKESk="
-    },
     "bluebird": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.1.tgz",
@@ -6299,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.3",
+  "version": "0.20.1",
   "description": "Military-grade apps, engineered by Svelte",
   "main": "dist/middleware.js",
   "bin": {
@@ -19,10 +19,8 @@
     "test": "test"
   },
   "dependencies": {
-    "@types/blessed": "^0.1.10",
-    "blessed": "^0.1.81",
     "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",

src/api/dev.ts

@@ -200,8 +200,6 @@ class Watcher extends EventEmitter {
 			handle_result: (result: CompileResult) => {
 				deferred.promise.then(() => {
 					const restart = () => {
-						this.emit('restart');
-
 						log = '';
 						this.crashed = false;
 

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/cli.ts

@@ -15,15 +15,13 @@ prog.command('dev')
 	.option('--hot', 'Use hot module replacement (requires webpack)', true)
 	.option('--live', 'Reload on changes if not using --hot', true)
 	.option('--bundler', 'Specify a bundler (rollup or webpack)')
-	.option('--stream', 'Stream logs, instead of boxing them', false)
 	.action(async (opts: {
 		port: number,
 		open: boolean,
 		'dev-port': number,
 		live: boolean,
 		hot: boolean,
-		bundler?: string,
-		stream: boolean
+		bundler?: string
 	}) => {
 		const { dev } = await import('./cli/dev');
 		dev(opts);

src/cli/dev.ts

@@ -1,263 +1,80 @@
 import * as path from 'path';
 import colors from 'kleur';
 import * as child_process from 'child_process';
-import * as blessed from 'blessed';
 import prettyMs from 'pretty-ms';
 import { dev as _dev } from '../api/dev';
 import * as events from '../api/interfaces';
 
-function boxed_output() {
-	const screen = blessed.screen({
-		smartCSR: true
-	});
-
-	function box(opts) {
-		opts = Object.assign({
-			width: '100%',
-			height: '50%',
-			scrollable: true,
-			style: {
-				scrollbar: {
-					bg: 'black'
-				}
-			},
-			scrollbar: {},
-			input: true,
-			mouse: true,
-			keys: true,
-			scrollOnInput: false
-		}, opts);
-
-		return blessed.box(opts);
-	}
-
-	const status_box = box({});
-	const log_box = box({
-		bottom: '0'
-	});
-
-	let mouse_is_down = false;
-	let dragging = false;
-	let did_drag = false;
-
-	let divider_is_horizontal = true;
-
-	function update_split(x: number, y: number) {
-		if (divider_is_horizontal) {
-			horizontal_divider.top = y;
-			status_box.width = log_box.width = '100%';
-			status_box.height = y;
-			log_box.height = screen.height - (y + 1);
-			log_box.top = y + 1;
-			log_box.left = 0;
-		} else {
-			vertical_divider.left = x;
-			status_box.height = log_box.height = '100%';
-			status_box.width = x;
-			log_box.width = screen.width - (x + 1);
-			log_box.left = x + 1;
-			log_box.top = 0;
-		}
-
-		screen.render();
-	}
-
-	screen.on('mousedown', data => {
-		if (mouse_is_down) {
-			if (dragging) {
-				update_split(data.x, data.y);
-				did_drag = true;
-			}
-		} else {
-			if (data.y === horizontal_divider.top) {
-				dragging = true;
-			}
-
-			mouse_is_down = true;
-		}
-	});
-
-	screen.on('mouseup', data => {
-		mouse_is_down = false;
-		dragging = false;
-		did_drag = false;
-	});
-
-	const horizontal_divider = blessed.line({
-		top: '50%',
-		orientation: 'horizontal'
-	});
-
-	const vertical_divider = blessed.line({
-		left: '50%',
-		orientation: 'vertical'
-	});
-
-	horizontal_divider.on('click', event => {
-		if (!did_drag) {
-			horizontal_divider.hide();
-			vertical_divider.show();
-			divider_is_horizontal = false;
-			update_split(event.x, event.y);
-		}
-	});
-
-	vertical_divider.on('click', event => {
-		if (!did_drag) {
-			vertical_divider.hide();
-			horizontal_divider.show();
-			divider_is_horizontal = true;
-			update_split(event.x, event.y);
-		}
-	});
-
-	vertical_divider.hide();
-
-	screen.append(status_box);
-	screen.append(log_box);
-	screen.append(horizontal_divider);
-	screen.append(vertical_divider);
-
-	update_split(process.stdout.columns >> 1, process.stdout.rows >> 1);
-
-	screen.key(['escape', 'q', 'C-c'], function(ch, key) {
-		return process.exit(0);
-	});
-
-	const append_log = (data: Buffer | string) => {
-		log_box.setContent(log_box.content + data);
-		screen.render();
-	};
-
-	const append_status = (data: Buffer | string) => {
-		status_box.setContent(status_box.content + data);
-		screen.render();
-	};
-
-	let first = true;
-
-	return {
-		stdout: append_log,
-
-		stderr: append_log,
-
-		clear_logs: () => {
-			let content = `${colors.inverse(` server log • ${new Date().toISOString()}\n`)} \n`;
-			if (first) {
-				content += colors.gray(`> Click/drag the divider to adjust the split\n\n`);
-				first = false;
-			}
-
-			log_box.setContent(content);
-			screen.render();
-		},
-
-		log: (line: string) => {
-			append_status(line + '\n');
-		},
-
-		append: append_status,
-
-		clear: () => {
-			status_box.setContent(`${colors.inverse(` build log • ${new Date().toISOString()}\n`)} \n`);
-			screen.render();
-		}
-	};
-}
-
-function streamed_output() {
-	return {
-		stdout: process.stdout.write.bind(process.stdout),
-
-		stderr: process.stderr.write.bind(process.stderr),
-
-		clear_logs: () => {},
-
-		log: (line: string) => {
-			console.log(line);
-		},
-
-		append: (data: Buffer | string) => {
-			process.stdout.write(data);
-		},
-
-		clear: () => {}
-	};
-}
-
-export function dev(opts: { port: number, open: boolean, bundler?: string, stream: boolean }) {
-	const output = opts.stream
-		? streamed_output()
-		: boxed_output();
-
-	output.clear();
-
+export function dev(opts: { port: number, open: boolean, bundler?: string }) {
 	try {
 		const watcher = _dev(opts);
 
 		let first = true;
 
 		watcher.on('ready', (event: events.ReadyEvent) => {
-			output.log(colors.bold.cyan(`> Listening on http://localhost:${event.port}`));
-
 			if (first) {
+				console.log(colors.bold.cyan(`> Listening on http://localhost:${event.port}`));
 				if (opts.open) child_process.exec(`open http://localhost:${event.port}`);
 				first = false;
 			}
-		});
 
-		watcher.on('restart', output.clear_logs);
-		watcher.on('stdout', output.stdout);
-		watcher.on('stderr', output.stderr);
+			// TODO clear screen?
+
+			event.process.stdout.on('data', data => {
+				process.stdout.write(data);
+			});
+
+			event.process.stderr.on('data', data => {
+				process.stderr.write(data);
+			});
+		});
 
 		watcher.on('invalid', (event: events.InvalidEvent) => {
 			const changed = event.changed.map(filename => path.relative(process.cwd(), filename)).join(', ');
-
-			output.clear();
-			output.log(`${colors.bold.cyan(changed)} changed. rebuilding...`);
+			console.log(`\n${colors.bold.cyan(changed)} changed. rebuilding...`);
 		});
 
 		watcher.on('error', (event: events.ErrorEvent) => {
-			output.log(colors.red(`✗ ${event.type}`));
-			output.log(colors.red(event.message));
+			console.log(colors.red(`✗ ${event.type}`));
+			console.log(colors.red(event.message));
 		});
 
 		watcher.on('fatal', (event: events.FatalEvent) => {
-			output.log(colors.bold.red(`> ${event.message}`));
-			if (event.log) output.log(event.log);
+			console.log(colors.bold.red(`> ${event.message}`));
+			if (event.log) console.log(event.log);
 		});
 
 		watcher.on('build', (event: events.BuildEvent) => {
 			if (event.errors.length) {
-				output.log(colors.bold.red(`✗ ${event.type}`));
+				console.log(colors.bold.red(`✗ ${event.type}`));
 
 				event.errors.filter(e => !e.duplicate).forEach(error => {
-					if (error.file) output.log(colors.bold(error.file));
-					output.log(error.message);
+					if (error.file) console.log(colors.bold(error.file));
+					console.log(error.message);
 				});
 
 				const hidden = event.errors.filter(e => e.duplicate).length;
 				if (hidden > 0) {
-					output.log(`${hidden} duplicate ${hidden === 1 ? 'error' : 'errors'} hidden\n`);
+					console.log(`${hidden} duplicate ${hidden === 1 ? 'error' : 'errors'} hidden\n`);
 				}
 			} else if (event.warnings.length) {
-				output.log(colors.bold.yellow(`• ${event.type}`));
+				console.log(colors.bold.yellow(`• ${event.type}`));
 
 				event.warnings.filter(e => !e.duplicate).forEach(warning => {
-					if (warning.file) output.log(colors.bold(warning.file));
-					output.log(warning.message);
+					if (warning.file) console.log(colors.bold(warning.file));
+					console.log(warning.message);
 				});
 
 				const hidden = event.warnings.filter(e => e.duplicate).length;
 				if (hidden > 0) {
-					output.log(`${hidden} duplicate ${hidden === 1 ? 'warning' : 'warnings'} hidden\n`);
+					console.log(`${hidden} duplicate ${hidden === 1 ? 'warning' : 'warnings'} hidden\n`);
 				}
 			} else {
-				output.log(`${colors.bold.green(`✔ ${event.type}`)} ${colors.gray(`(${prettyMs(event.duration)})`)}`);
+				console.log(`${colors.bold.green(`✔ ${event.type}`)} ${colors.gray(`(${prettyMs(event.duration)})`)}`);
 			}
 		});
 	} catch (err) {
-		output.log(colors.bold.red(`> ${err.message}`));
+		console.log(colors.bold.red(`> ${err.message}`));
 		process.exit(1);
 	}
 }

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/rollup.ts

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

src/runtime/index.ts

@@ -67,7 +67,7 @@ function select_route(url: URL): Target {
 			if (url.search.length > 0) {
 				url.search.slice(1).split('&').forEach(searchParam => {
 					const [, key, value] = /([^=]+)=(.*)/.exec(searchParam);
-					query[key] = value || true;
+					query[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : true;
 				});
 			}
 			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/index.html

@@ -15,6 +15,7 @@
 <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>
 
 <div class='hydrate-test'></div>
 

test/common/test.js

@@ -93,6 +93,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 +102,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,6 +753,32 @@ 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('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', () => {