-> v0.0.21

connect.js

@@ -1,5 +1,3 @@
-require('svelte/ssr/register');
-const esm = require('@std/esm');
 const fs = require('fs');
 const path = require('path');
 const glob = require('glob');
@@ -8,14 +6,10 @@ const mkdirp = require('mkdirp');
 const create_routes = require('./lib/utils/create_routes.js');
 const templates = require('./lib/templates.js');
 const create_app = require('./lib/utils/create_app.js');
-const create_webpack_compiler = require('./lib/utils/create_webpack_compiler.js');
+const create_compiler = require('./lib/utils/create_compiler.js');
 const escape_html = require('escape-html');
 const { src, dest, dev } = require('./lib/config.js');
 
-const esmRequire = esm(module, {
-	esm: 'js'
-});
-
 module.exports = function connect(opts) {
 	mkdirp(dest);
 	rimraf.sync(path.join(dest, '**/*'));
@@ -26,7 +20,7 @@ module.exports = function connect(opts) {
 
 	create_app(src, dest, routes, opts);
 
-	const webpack_compiler = create_webpack_compiler(
+	const compiler = create_compiler(
 		dest,
 		routes,
 		dev
@@ -35,81 +29,102 @@ module.exports = function connect(opts) {
 	return async function(req, res, next) {
 		const url = req.url.replace(/\?.+/, '');
 
-		if (url === '/service-worker.js' || url === '/index.html' || url.startsWith('/client/')) {
+		if (url === '/service-worker.js') {
-			await webpack_compiler.ready;
+			await compiler.ready;
 			res.set({
-				'Content-Type': url === '/index.html' ? 'text/html' : 'application/javascript'
+				'Content-Type': 'application/javascript',
+				'Cache-Control': dev ? 'no-cache' : 'max-age=600'
 			});
-			fs.createReadStream(`${dest}${url}`).pipe(res);
+			res.end(compiler.service_worker);
-			return;
 		}
 
-		// whatever happens, we're going to serve some HTML
+		else if (url === '/index.html') {
-		res.set({
+			await compiler.ready;
-			'Content-Type': 'text/html'
+			res.set({
-		});
+				'Content-Type': 'text/html',
+				'Cache-Control': dev ? 'no-cache' : 'max-age=600'
+			});
+			res.end(compiler.shell);
+		}
 
-		try {
+		else if (url.startsWith('/client/')) {
-			for (const route of routes) {
+			await compiler.ready;
-				if (route.test(url)) {
+			res.set({
-					await webpack_compiler.ready;
+				'Content-Type': 'application/javascript',
+				'Cache-Control': 'max-age=31536000'
+			});
+			res.end(compiler.asset_cache[url]);
+		}
 
-					req.params = route.exec(url);
+		else {
+			// whatever happens, we're going to serve some HTML
+			res.set({
+				'Content-Type': 'text/html'
+			});
 
-					const chunk = webpack_compiler.chunks[route.id];
+			try {
-					const mod = require(path.resolve(dest, 'server', chunk));
+				for (const route of routes) {
+					if (route.test(url)) {
+						await compiler.ready;
 
-					if (route.type === 'page') {
+						req.params = route.exec(url);
-						let data = { params: req.params, query: req.query };
-						if (mod.default.preload) data = Object.assign(data, await mod.default.preload(data));
 
-						const { html, head, css } = mod.default.render(data);
+						const chunk = compiler.chunks[route.id];
+						const mod = require(path.resolve(dest, 'server', chunk));
 
-						const page = templates.render(200, {
+						if (route.type === 'page') {
-							main: webpack_compiler.client_main,
+							let data = { params: req.params, query: req.query };
-							html,
+							if (mod.default.preload) data = Object.assign(data, await mod.default.preload(data));
-							head: `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`,
-							styles: (css && css.code ? `<style>${css.code}</style>` : '')
-						});
 
-						res.status(200);
+							const { html, head, css } = mod.default.render(data);
-						res.end(page);
-					}
 
-					else {
+							const page = templates.render(200, {
-						const handler = mod[req.method.toLowerCase()];
+								main: compiler.client_main,
-						if (handler) {
+								html,
-							if (handler.length === 2) {
+								head: `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`,
-								handler(req, res);
+								styles: (css && css.code ? `<style>${css.code}</style>` : '')
-							} else {
+							});
-								const data = await handler(req);
 
-								// TODO headers, error handling
+							res.status(200);
-								if (typeof data === 'string') {
+							res.end(page);
-									res.end(data);
+						}
+
+						else {
+							const handler = mod[req.method.toLowerCase()];
+							if (handler) {
+								if (handler.length === 2) {
+									handler(req, res);
 								} else {
-									res.end(JSON.stringify(data));
+									const data = await handler(req);
+
+									// TODO headers, error handling
+									if (typeof data === 'string') {
+										res.end(data);
+									} else {
+										res.end(JSON.stringify(data));
+									}
 								}
 							}
 						}
+
+						return;
 					}
-
-					return;
 				}
-			}
 
-			res.status(404).end(templates.render(404, {
+				res.status(404).end(templates.render(404, {
-				title: 'Not found',
+					title: 'Not found',
-				status: 404,
+					status: 404,
-				method: req.method,
+					method: req.method,
-				url
+					url
-			}));
+				}));
-		} catch(err) {
+			} catch(err) {
-			res.status(500).end(templates.render(500, {
+				res.status(500).end(templates.render(500, {
-				title: err.name || 'Internal server error',
+					title: (err && err.name) || 'Internal server error',
-				url,
+					url,
-				error: escape_html(err.details || err.message || err || 'Unknown error')
+					error: escape_html(err && (err.details || err.message || err) || 'Unknown error'),
-			}));
+					stack: err && err.stack.split('\n').slice(1).join('\n')
+				}));
+			}
 		}
 	};
 };

lib/utils/create_app.js

@@ -13,7 +13,7 @@ module.exports = function create_app(src, dest, routes, options) {
 				'{}' :
 				`{ ${route.dynamic.map((part, i) => `${part}: match[${i + 1}]`).join(', ') } }`;
 
-			return `{ pattern: ${route.pattern}, params: match => (${params}), load: () => import('${src}/${route.file}') }`
+			return `{ pattern: ${route.pattern}, params: match => (${params}), load: () => import(/* webpackChunkName: "${route.id}" */ '${src}/${route.file}') }`
 		})
 		.join(',\n\t');
 

lib/utils/create_compiler.js

@@ -44,6 +44,11 @@ module.exports = function create_webpack_compiler(dest, routes, dev) {
 					compiler.client_main = `/client/${info.assetsByChunkName.main}`;
 					compiler.assets = info.assets.map(asset => `/client/${asset.name}`);
 
+					compiler.asset_cache = {};
+					compiler.assets.forEach(file => {
+						compiler.asset_cache[file] = fs.readFileSync(path.join(dest, file), 'utf-8');
+					});
+
 					fulfil();
 				});
 			}),
@@ -59,12 +64,11 @@ module.exports = function create_webpack_compiler(dest, routes, dev) {
 					}
 
 					compiler.chunks = info.assetsByChunkName;
-
 					fulfil();
 				});
 			})
 		]).then(() => {
-			const assets = glob.sync('**', { cwd: 'assets' });
+			const assets = glob.sync('**', { cwd: 'assets', nodir: true });
 
 			const route_code = `[${
 				routes
@@ -73,22 +77,22 @@ module.exports = function create_webpack_compiler(dest, routes, dev) {
 					.join(', ')
 			}]`;
 
-			const service_worker = fs.readFileSync('templates/service-worker.js', 'utf-8')
+			compiler.service_worker = fs.readFileSync('templates/service-worker.js', 'utf-8')
 				.replace('__timestamp__', Date.now())
 				.replace('__assets__', JSON.stringify(assets))
 				.replace('__shell__', JSON.stringify(compiler.assets.concat('/index.html')))
 				.replace('__routes__', route_code);
 
-			fs.writeFileSync(path.resolve(dest, 'service-worker.js'), service_worker);
+			compiler.shell = templates.render(200, {
-
-			const shell = templates.render(200, {
 				styles: '',
 				head: '',
-				html: '',
+				html: '<noscript>Please enable JavaScript!</noscript>',
 				main: compiler.client_main
 			});
 
-			fs.writeFileSync(path.resolve(dest, 'index.html'), shell);
+			// useful for debugging, but the files are served from memory
+			fs.writeFileSync(path.resolve(dest, 'service-worker.js'), compiler.service_worker);
+			fs.writeFileSync(path.resolve(dest, 'index.html'), compiler.shell);
 		});
 
 		compiler.get_chunk = async id => {

package-lock.json

@@ -1,14 +1,9 @@
 {
   "name": "sapper",
-  "version": "0.0.9",
+  "version": "0.0.20",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "@std/esm": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/@std/esm/-/esm-0.18.0.tgz",
-      "integrity": "sha512-oeHSSVp/WxC08ngpKgyYR4LcI0+EBwZiJcB58jvIqyJnOGxudSkxTgAQKsVfpNsMXfOoILgu9PWhuzIZ8GQEjw=="
-    },
     "acorn": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.2.1.tgz",
@@ -499,9 +494,9 @@
       }
     },
     "errno": {
-      "version": "0.1.5",
+      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.6.tgz",
-      "integrity": "sha512-tv2H+e3KBnMmNRuoVG24uorOj3XfYo+/nJJd07PUISRr0kaMKQKL5kyD+6ANXk1ZIIsvbORsjvHnCfC4KIc7uQ==",
+      "integrity": "sha512-IsORQDpaaSwcDP4ZZnHxgE85werpo34VYn1Ud3mq+eUsF593faR8oCZNXrROVkpFu2TsbrNhHin0aUrTsQ9vNw==",
       "requires": {
         "prr": "1.0.1"
       }
@@ -1879,7 +1874,7 @@
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
       "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
       "requires": {
-        "errno": "0.1.5",
+        "errno": "0.1.6",
         "readable-stream": "2.3.3"
       }
     },
@@ -2559,12 +2554,6 @@
         "has-flag": "2.0.0"
       }
     },
-    "svelte": {
-      "version": "1.47.1",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-1.47.1.tgz",
-      "integrity": "sha512-xRw4pjF19XKfeTxp+TOTE/MQmRS7tRzm0hhh0dr/nc3NuHBfCBXnfve0ZymF8tZ+J/WM0cqfZ83RxZid2zf7qA==",
-      "dev": true
-    },
     "tapable": {
       "version": "0.2.8",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.2.8.tgz",

package.json

@@ -1,24 +1,19 @@
 {
   "name": "sapper",
-  "version": "0.0.14",
+  "version": "0.0.21",
   "description": "Combat-ready apps, engineered by Svelte",
   "main": "connect.js",
   "directories": {
     "test": "test"
   },
   "dependencies": {
-    "@std/esm": "^0.18.0",
     "escape-html": "^1.0.3",
     "mkdirp": "^0.5.1",
     "rimraf": "^2.6.2",
     "webpack": "^3.10.0"
   },
   "devDependencies": {
-    "mocha": "^4.0.1",
+    "mocha": "^4.0.1"
-    "svelte": "^1.47.1"
-  },
-  "peerDependencies": {
-    "svelte": "^1.47.1"
   },
   "scripts": {
     "test": "mocha --opts mocha.opts"
@@ -36,8 +31,5 @@
   "bugs": {
     "url": "https://github.com/sveltejs/sapper/issues"
   },
-  "homepage": "https://github.com/sveltejs/sapper#readme",
+  "homepage": "https://github.com/sveltejs/sapper#readme"
-  "@std/esm": {
-    "esm": "js"
-  }
 }

runtime/app.js

@@ -4,6 +4,14 @@ const detach = node => {
 
 let component;
 
+const scroll_history = {};
+let uid = 1;
+let cid;
+
+if ('scrollRestoration' in history) {
+	history.scrollRestoration = 'manual'
+}
+
 const app = {
 	init(target, routes) {
 		function select_route(url) {
@@ -22,7 +30,7 @@ const app = {
 			}
 		}
 
-		function render(Component, data) {
+		function render(Component, data, scroll) {
 			Promise.resolve(
 				Component.preload ? Component.preload(data) : {}
 			).then(preloaded => {
@@ -48,32 +56,78 @@ const app = {
 					data: Object.assign(data, preloaded),
 					hydrate: !!component
 				});
+
+				if (scroll) {
+					window.scrollTo(scroll.x, scroll.y);
+				}
 			});
 		}
 
-		function navigate(url) {
+		function navigate(url, id) {
 			const selected = select_route(url);
 			if (selected) {
+				if (id) {
+					// popstate or initial navigation
+					cid = id;
+				} else {
+					// clicked on a link. preserve scroll state
+					scroll_history[cid] = scroll_state();
+
+					id = cid = ++uid;
+					scroll_history[cid] = { x: 0, y: 0 };
+
+					history.pushState({ id }, '', url.href);
+				}
+
 				selected.route.load().then(mod => {
-					render(mod.default, selected.data);
+					render(mod.default, selected.data, scroll_history[id]);
 				});
 
+				cid = id;
 				return true;
 			}
 		}
 
 		function findAnchor(node) {
-			while (node && node.nodeName !== 'A') node = node.parentNode;
+			while (node && node.nodeName.toUpperCase() !== 'A') node = node.parentNode; // SVG <a> elements have a lowercase name
 			return node;
 		}
 
 		window.addEventListener('click', event => {
+			// Adapted from https://github.com/visionmedia/page.js
+			// MIT license https://github.com/visionmedia/page.js#license
+			if (which(event) !== 1) return;
+			if (event.metaKey || event.ctrlKey || event.shiftKey) return;
+			if (event.defaultPrevented) return;
+
 			const a = findAnchor(event.target);
 			if (!a) return;
 
-			if (navigate(new URL(a.href))) {
+			// check if link is inside an svg
+			// in this case, both href and target are always inside an object
+			const svg = typeof a.href === 'object' && a.href.constructor.name === 'SVGAnimatedString';
+			const href = svg ? a.href.baseVal : a.href;
+
+			if (href === window.location.href) {
+				event.preventDefault();
+				return;
+			}
+
+			// Ignore if tag has
+			// 1. 'download' attribute
+			// 2. rel='external' attribute
+			if (a.hasAttribute('download') || a.getAttribute('rel') === 'external') return;
+
+			// Ignore if <a> has a target
+			if (svg ? a.target.baseVal : a.target) return;
+
+			const url = new URL(href);
+
+			// Don't handle hash changes
+			if (url.pathname === window.location.pathname && url.search === window.location.search) return;
+
+			if (navigate(url, null)) {
 				event.preventDefault();
-				history.pushState({}, '', a.href);
 			}
 		});
 
@@ -94,11 +148,34 @@ const app = {
 		window.addEventListener('mouseover', preload);
 
 		window.addEventListener('popstate', event => {
-			navigate(new URL(window.location));
+			scroll_history[cid] = scroll_state();
+
+			if (event.state) {
+				navigate(new URL(window.location), event.state.id);
+			} else {
+				// hashchange
+				cid = ++uid;
+				history.replaceState({ id: cid }, '', window.location.href);
+			}
 		});
 
-		navigate(new URL(window.location));
+		const scroll = scroll_history[uid] = scroll_state();
+
+		history.replaceState({ id: uid }, '', window.location.href);
+		navigate(new URL(window.location), uid);
 	}
 };
 
+function which(event) {
+	event = event || window.event;
+	return event.which === null ? event.button : event.which;
+}
+
+function scroll_state() {
+	return {
+		x: window.scrollX,
+		y: window.scrollY
+	};
+}
+
 export default app;

webpack/config.js

@@ -16,7 +16,7 @@ module.exports = {
 			return {
 				path: `${dest}/client`,
 				filename: '[name].[hash].js',
-				chunkFilename: '[name].[id].js',
+				chunkFilename: '[name].[id].[hash].js',
 				publicPath: '/client/'
 			};
 		}
@@ -35,7 +35,7 @@ module.exports = {
 			return {
 				path: `${dest}/server`,
 				filename: '[name].[hash].js',
-				chunkFilename: '[name].[id].js',
+				chunkFilename: '[name].[id].[hash].js',
 				libraryTarget: 'commonjs2'
 			};
 		}