-> v0.18.7

Implement differential bundling

CHANGELOG.md

@@ -1,5 +1,26 @@
 # sapper changelog
 
+## 0.18.7
+
+* Support differential bundling for Rollup apps via a `--legacy` flag ([#280](https://github.com/sveltejs/sapper/issues/280))
+
+## 0.18.6
+
+* Bundle missing dependency
+
+## 0.18.5
+
+* Bugfix
+
+## 0.18.4
+
+* Handle non-Sapper responses when exporting ([#382](https://github.com/sveltejs/sapper/issues/392))
+* Add `--dev-port` flag to `sapper dev` ([#381](https://github.com/sveltejs/sapper/issues/381))
+
+## 0.18.3
+
+* Fix service worker Rollup build config
+
 ## 0.18.2
 
 * Update `pkg.files`

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.17.1",
+  "version": "0.18.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -55,9 +55,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "10.9.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.9.3.tgz",
-      "integrity": "sha512-DOzWZKUnmFYG0KUOs+9HEBju2QhBU6oM2zeluunQNt0vnJvnkHvtDNlQPZDkTrkC5pZrNx1TPqeL137zciXZMQ==",
+      "version": "10.9.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.9.4.tgz",
+      "integrity": "sha512-fCHV45gS+m3hH17zgkgADUSi2RR1Vht6wOZ0jyHP8rjiQra9f+mIcgwPQHllmDocYOstIEbKlxbFDYlgrTPYqw==",
       "dev": true
     },
     "@types/rimraf": {
@@ -1154,7 +1154,7 @@
     },
     "buffer": {
       "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
+      "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
       "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
       "dev": true,
       "requires": {
@@ -1594,7 +1594,7 @@
     },
     "compare-versions": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-2.0.1.tgz",
+      "resolved": "http://registry.npmjs.org/compare-versions/-/compare-versions-2.0.1.tgz",
       "integrity": "sha1-Htwfk2h/2XoyXFn1XkWgfbEGrKY=",
       "dev": true
     },
@@ -2071,9 +2071,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "8.10.28",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-8.10.28.tgz",
-          "integrity": "sha512-iHsAzDg3OLH7JP+wipniUULHoDSWLgEDYOvsar6/mpAkTJd9/n23Ap8ikruMlvRTqMv/LXrflH9v/AfiEqaBGg==",
+          "version": "8.10.29",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-8.10.29.tgz",
+          "integrity": "sha512-zbteaWZ2mdduacm0byELwtRyhYE40aK+pAanQk415gr1eRuu67x7QGOLmn8jz5zI8LDK7d0WI/oT6r5Trz4rzQ==",
           "dev": true
         }
       }
@@ -2097,7 +2097,7 @@
       "dependencies": {
         "minimist": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         }
@@ -2538,7 +2538,7 @@
     },
     "external-editor": {
       "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz",
+      "resolved": "http://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz",
       "integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==",
       "dev": true,
       "requires": {
@@ -4270,9 +4270,9 @@
       }
     },
     "make-error": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.4.tgz",
-      "integrity": "sha512-0Dab5btKVPhibSalc9QGXb559ED7G7iLjFXBaj9Wq8O3vorueR5K5jaE3hkG6ZQINyhA/JgG6Qk4qdFQjsYV6g==",
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.5.tgz",
+      "integrity": "sha512-c3sIjNUow0+8swNwVpqoH4YCShKNFkMaw6oH1mNS2haDZQqkeZFlHS3dhoeEbKKmJB4vXpJucU6oH75aDYeE9g==",
       "dev": true
     },
     "mamacro": {
@@ -4397,7 +4397,7 @@
         },
         "minimist": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         },
@@ -4537,7 +4537,7 @@
     },
     "minimist": {
       "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+      "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
       "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
       "dev": true
     },
@@ -4991,7 +4991,7 @@
       "dependencies": {
         "minimist": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         },
@@ -5574,12 +5574,6 @@
       "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=",
       "dev": true
     },
-    "querystringify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.0.0.tgz",
-      "integrity": "sha512-eTPo5t/4bgaMNZxyjWx6N2a6AuE0mq51KWvpc7nU/MAqixcI6v6KrGUKES0HaomdnolQBBXU/++X6/QQ9KL4tw==",
-      "dev": true
-    },
     "randomatic": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.0.tgz",
@@ -5688,7 +5682,7 @@
       "dependencies": {
         "minimist": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         }
@@ -5872,12 +5866,6 @@
         "resolve-from": "^1.0.0"
       }
     },
-    "requires-port": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
-      "dev": true
-    },
     "resolve": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz",
@@ -6299,9 +6287,9 @@
       }
     },
     "shimport": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/shimport/-/shimport-0.0.9.tgz",
-      "integrity": "sha512-y0DHz5ffBuz+iXUQgkqjT3yJRuegeyhHeDdqVdDMVDCeuS0Ex6AFPLFNV228EfPQmkDumraLsN9HBcT1qyLxHw=="
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/shimport/-/shimport-0.0.10.tgz",
+      "integrity": "sha512-3xPFDLmcLj87sx0OwA60qbloMQUsu6VGF97IG4RqxTf91sGeiaaXOPxM1PoQHbaTm4TOhH8zosokqLAZtuNGnA=="
     },
     "signal-exit": {
       "version": "3.0.2",
@@ -7021,7 +7009,7 @@
       "dependencies": {
         "minimist": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         }
@@ -7086,9 +7074,9 @@
       "dev": true
     },
     "uglify-js": {
-      "version": "3.4.8",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.8.tgz",
-      "integrity": "sha512-WatYTD84gP/867bELqI2F/2xC9PQBETn/L+7RGq9MQOA/7yFBNvY1UwXqvtILeE6n0ITwBXxp34M0/o70dzj6A==",
+      "version": "3.4.9",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
+      "integrity": "sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==",
       "requires": {
         "commander": "~2.17.1",
         "source-map": "~0.6.1"
@@ -7285,16 +7273,6 @@
         }
       }
     },
-    "url-parse": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.3.tgz",
-      "integrity": "sha512-rh+KuAW36YKo0vClhQzLLveoj8FwPJNu65xLb7Mrt+eZht0IPT0IXgSv8gcMegZ6NvjJUALf6Mf25POlMwD1Fw==",
-      "dev": true,
-      "requires": {
-        "querystringify": "^2.0.0",
-        "requires-port": "^1.0.0"
-      }
-    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.18.2",
+  "version": "0.18.7",
   "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.9",
+    "shimport": "^0.0.10",
     "source-map-support": "^0.5.6",
     "tslib": "^1.9.1"
   },
@@ -63,7 +63,6 @@
     "tiny-glob": "^0.2.2",
     "ts-node": "^7.0.1",
     "typescript": "^2.8.3",
-    "url-parse": "^1.2.0",
     "walk-sync": "^0.3.2",
     "webpack": "^4.8.3",
     "webpack-format-messages": "^2.0.1"

src/api/build.ts

@@ -5,9 +5,7 @@ import rimraf from 'rimraf';
 import { EventEmitter } from 'events';
 import minify_html from './utils/minify_html';
 import { create_compilers, create_main_manifests, create_routes, create_serviceworker_manifest } from '../core';
-import { Compilers, Compiler } from '../core/create_compilers';
 import * as events from './interfaces';
-import validate_bundler from '../cli/utils/validate_bundler';
 import { copy_shimport } from './utils/copy_shimport';
 
 export function build(opts: {}) {
@@ -30,6 +28,7 @@ export function build(opts: {}) {
 async function execute(emitter: EventEmitter, {
 	dest = 'build',
 	app = 'app',
+	legacy,
 	bundler,
 	webpack = 'webpack',
 	rollup = 'rollup',
@@ -55,9 +54,9 @@ async function execute(emitter: EventEmitter, {
 	const route_objects = create_routes();
 
 	// create app/manifest/client.js and app/manifest/server.js
-	create_main_manifests({ routes: route_objects });
+	create_main_manifests({ bundler, routes: route_objects });
 
-	const { client, server, serviceworker } = create_compilers(validate_bundler(bundler), { webpack, rollup });
+	const { client, server, serviceworker } = create_compilers(bundler, { webpack, rollup });
 
 	const client_result = await client.compile();
 	emitter.emit('build', <events.BuildEvent>{
@@ -66,11 +65,34 @@ async function execute(emitter: EventEmitter, {
 		result: client_result
 	});
 
-	fs.writeFileSync(path.join(dest, 'build.json'), JSON.stringify({
+	const build_info: {
+		bundler: string;
+		shimport: string;
+		assets: Record<string, string>;
+		legacy_assets?: Record<string, string>;
+	} = {
 		bundler,
 		shimport: bundler === 'rollup' && require('shimport/package.json').version,
-		assets: client_result.assetsByChunkName
-	}));
+		assets: client_result.assets
+	};
+
+	if (legacy) {
+		process.env.SAPPER_LEGACY_BUILD = 'true';
+		const { client } = create_compilers(bundler, { webpack, rollup });
+
+		const client_result = await client.compile();
+
+		emitter.emit('build', <events.BuildEvent>{
+			type: 'client (legacy)',
+			// TODO duration/warnings
+			result: client_result
+		});
+
+		build_info.legacy_assets = client_result.assets;
+		delete process.env.SAPPER_LEGACY_BUILD;
+	}
+
+	fs.writeFileSync(path.join(dest, 'build.json'), JSON.stringify(build_info));
 
 	const server_stats = await server.compile();
 	emitter.emit('build', <events.BuildEvent>{
@@ -84,7 +106,7 @@ async function execute(emitter: EventEmitter, {
 	if (serviceworker) {
 		create_serviceworker_manifest({
 			routes: route_objects,
-			client_files: client_result.assets.map((file: string) => `client/${file}`)
+			client_files: client_result.chunks.map((file: string) => `client/${file}`)
 		});
 
 		serviceworker_stats = await serviceworker.compile();

src/api/dev.ts

@@ -29,6 +29,8 @@ class Watcher extends EventEmitter {
 	}
 	port: number;
 	closed: boolean;
+
+	dev_port: number;
 	live: boolean;
 	hot: boolean;
 
@@ -50,6 +52,7 @@ class Watcher extends EventEmitter {
 		app = locations.app(),
 		dest = locations.dest(),
 		routes = locations.routes(),
+		'dev-port': dev_port,
 		live,
 		hot,
 		bundler,
@@ -60,6 +63,7 @@ class Watcher extends EventEmitter {
 		app: string,
 		dest: string,
 		routes: string,
+		'dev-port': number,
 		live: boolean,
 		hot: boolean,
 		bundler?: string,
@@ -74,6 +78,7 @@ class Watcher extends EventEmitter {
 		this.port = port;
 		this.closed = false;
 
+		this.dev_port = dev_port;
 		this.live = live;
 		this.hot = hot;
 
@@ -120,11 +125,11 @@ class Watcher extends EventEmitter {
 		mkdirp.sync(`${dest}/client`);
 		if (this.bundler === 'rollup') copy_shimport(dest);
 
-		const dev_port = await ports.find(10000);
+		if (!this.dev_port) this.dev_port = await ports.find(10000);
 
 		try {
 			const routes = create_routes();
-			create_main_manifests({ routes, dev_port });
+			create_main_manifests({ bundler: this.bundler, routes, dev_port: this.dev_port });
 		} catch (err) {
 			this.emit('fatal', <events.FatalEvent>{
 				message: err.message
@@ -132,7 +137,7 @@ class Watcher extends EventEmitter {
 			return;
 		}
 
-		this.dev_server = new DevServer(dev_port);
+		this.dev_server = new DevServer(this.dev_port);
 
 		this.filewatchers.push(
 			watch_dir(
@@ -145,11 +150,11 @@ class Watcher extends EventEmitter {
 				},
 				() => {
 					const routes = create_routes();
-					create_main_manifests({ routes, dev_port });
+					create_main_manifests({ bundler: this.bundler, routes, dev_port: this.dev_port });
 
 					try {
 						const routes = create_routes();
-						create_main_manifests({ routes, dev_port });
+						create_main_manifests({ bundler: this.bundler, routes, dev_port: this.dev_port });
 					} catch (err) {
 						this.emit('error', <events.ErrorEvent>{
 							message: err.message
@@ -280,10 +285,10 @@ class Watcher extends EventEmitter {
 				fs.writeFileSync(path.join(dest, 'build.json'), JSON.stringify({
 					bundler: this.bundler,
 					shimport: this.bundler === 'rollup' && require('shimport/package.json').version,
-					assets: result.assetsByChunkName
+					assets: result.assets
 				}, null, '  '));
 
-				const client_files = result.assets.map((file: string) => `client/${file}`);
+				const client_files = result.chunks.map((file: string) => `client/${file}`);
 
 				create_serviceworker_manifest({
 					routes: create_routes(),

src/api/export.ts

@@ -1,7 +1,7 @@
 import * as child_process from 'child_process';
 import * as path from 'path';
 import * as sander from 'sander';
-import URL from 'url-parse';
+import * as url from 'url';
 import fetch from 'node-fetch';
 import * as ports from 'port-authority';
 import { EventEmitter } from 'events';
@@ -34,6 +34,12 @@ export function exporter(opts: Opts) {
 	return emitter;
 }
 
+function resolve(from: string, to: string) {
+	return url.parse(url.resolve(from, to));
+}
+
+type URL = url.UrlWithStringQuery;
+
 async function execute(emitter: EventEmitter, opts: Opts) {
 	const export_dir = path.join(opts.dest, opts.basepath);
 
@@ -53,8 +59,12 @@ async function execute(emitter: EventEmitter, opts: Opts) {
 
 	const port = await ports.find(3000);
 
-	const origin = `http://localhost:${port}`;
-	const root = new URL(opts.basepath || '', origin);
+	const protocol = 'http:';
+	const host = `localhost:${port}`;
+	const origin = `${protocol}//${host}`;
+
+	const root = resolve(origin, opts.basepath || '');
+	if (!root.href.endsWith('/')) root.href += '/';
 
 	emitter.emit('info', {
 		message: `Crawling ${root.href}`
@@ -72,29 +82,15 @@ async function execute(emitter: EventEmitter, opts: Opts) {
 
 	const seen = new Set();
 	const saved = new Set();
-	const deferreds = new Map();
 
-	function get_deferred(pathname: string) {
-		pathname = pathname.replace(root.pathname, '');
-
-		if (!deferreds.has(pathname)) {
-			deferreds.set(pathname, new Deferred());
-		}
-
-		return deferreds.get(pathname);
-	}
-
-	proc.on('message', message => {
-		if (!message.__sapper__ || message.event !== 'file') return;
-
-		const pathname = new URL(message.url, origin).pathname;
+	function save(path: string, status: number, type: string, body: string) {
+		const { pathname } = resolve(origin, path);
 		let file = pathname.slice(1);
-		let { body } = message;
 
 		if (saved.has(file)) return;
 		saved.add(file);
 
-		const is_html = message.type === 'text/html';
+		const is_html = type === 'text/html';
 
 		if (is_html) {
 			file = file === '' ? 'index.html' : `${file}/index.html`;
@@ -104,12 +100,15 @@ async function execute(emitter: EventEmitter, opts: Opts) {
 		emitter.emit('file', <events.FileEvent>{
 			file,
 			size: body.length,
-			status: message.status
+			status
 		});
 
 		sander.writeFileSync(export_dir, file, body);
+	}
 
-		get_deferred(pathname).fulfil();
+	proc.on('message', message => {
+		if (!message.__sapper__ || message.event !== 'file') return;
+		save(message.url, message.status, message.type, message.body);
 	});
 
 	async function handle(url: URL) {
@@ -118,32 +117,34 @@ async function execute(emitter: EventEmitter, opts: Opts) {
 		if (seen.has(pathname)) return;
 		seen.add(pathname);
 
-		const deferred = get_deferred(pathname);
-
 		const timeout_deferred = new Deferred();
 		const timeout = setTimeout(() => {
 			timeout_deferred.reject(new Error(`Timed out waiting for ${url.href}`));
 		}, opts.timeout);
 
 		const r = await Promise.race([
-			fetch(url.href),
+			fetch(url.href, {
+				redirect: 'manual'
+			}),
 			timeout_deferred.promise
 		]);
 
 		clearTimeout(timeout); // prevent it hanging at the end
 
+		let type = r.headers.get('Content-Type');
+		let body = await r.text();
+
 		const range = ~~(r.status / 100);
 
 		if (range === 2) {
-			if (r.headers.get('Content-Type') === 'text/html') {
-				const body = await r.text();
+			if (type === 'text/html') {
 				const urls: URL[] = [];
 
 				const cleaned = clean_html(body);
 
 				const base_match = /<base ([\s\S]+?)>/m.exec(cleaned);
 				const base_href = base_match && get_href(base_match[1]);
-				const base = new URL(base_href || '/', url.href);
+				const base = resolve(url.href, base_href);
 
 				let match;
 				let pattern = /<a ([\s\S]+?)>/gm;
@@ -153,8 +154,11 @@ async function execute(emitter: EventEmitter, opts: Opts) {
 					const href = get_href(attrs);
 
 					if (href) {
-						const url = new URL(href, base.href);
-						if (url.origin === origin) urls.push(url);
+						const url = resolve(base.href, href);
+
+						if (url.protocol === protocol && url.host === host) {
+							urls.push(url);
+						}
 					}
 				}
 
@@ -162,7 +166,16 @@ async function execute(emitter: EventEmitter, opts: Opts) {
 			}
 		}
 
-		await deferred.promise;
+		if (range === 3) {
+			const location = r.headers.get('Location');
+
+			type = 'text/html';
+			body = `<script>window.location.href = "${location}"</script>`;
+
+			await handle(resolve(root.href, location));
+		}
+
+		save(pathname, r.status, type, body);
 	}
 
 	return ports.wait(port)

src/cli.ts

@@ -11,12 +11,14 @@ prog.command('dev')
 	.describe('Start a development server')
 	.option('-p, --port', 'Specify a port')
 	.option('-o, --open', 'Open a browser window')
+	.option('--dev-port', 'Specify a port for development server')
 	.option('--hot', 'Use hot module replacement (requires webpack)', true)
-	.option('-l --live', 'Reload on changes if not using --hot', true)
+	.option('--live', 'Reload on changes if not using --hot', true)
 	.option('--bundler', 'Specify a bundler (rollup or webpack)')
 	.action(async (opts: {
 		port: number,
 		open: boolean,
+		'dev-port': number,
 		live: boolean,
 		hot: boolean,
 		bundler?: string
@@ -29,8 +31,13 @@ prog.command('build [dest]')
 	.describe('Create a production-ready version of your app')
 	.option('-p, --port', 'Default of process.env.PORT', '3000')
 	.option('--bundler', 'Specify a bundler (rollup or webpack, blank for auto)')
+	.option('--legacy', 'Create separate legacy build')
 	.example(`build custom-dir -p 4567`)
-	.action(async (dest = 'build', opts: { port: string, bundler?: string }) => {
+	.action(async (dest = 'build', opts: {
+		port: string,
+		legacy: boolean,
+		bundler?: string
+	}) => {
 		console.log(`> Building...`);
 
 		process.env.NODE_ENV = process.env.NODE_ENV || 'production';
@@ -76,9 +83,11 @@ prog.command('export [dest]')
 	.option('--build-dir', 'Specify a custom temporary build directory', '.sapper/prod')
 	.option('--basepath', 'Specify a base path')
 	.option('--timeout', 'Milliseconds to wait for a page (--no-timeout to disable)', 5000)
+	.option('--legacy', 'Create separate legacy build')
 	.option('--bundler', 'Specify a bundler (rollup or webpack, blank for auto)')
 	.action(async (dest = 'export', opts: {
 		build: boolean,
+		legacy: boolean,
 		bundler?: string,
 		'build-dir': string,
 		basepath?: string,

src/cli/build.ts

@@ -4,15 +4,20 @@ import { locations } from '../config';
 import validate_bundler from './utils/validate_bundler';
 import { repeat } from '../utils';
 
-export function build(opts: { bundler?: string }) {
+export function build(opts: { bundler?: string, legacy?: boolean }) {
 	const bundler = validate_bundler(opts.bundler);
 
+	if (opts.legacy && bundler === 'webpack') {
+		throw new Error(`Legacy builds are not supported for projects using webpack`);
+	}
+
 	return new Promise((fulfil, reject) => {
 		try {
 			const emitter = _build({
 				dest: locations.dest(),
 				app: locations.app(),
 				routes: locations.routes(),
+				legacy: opts.legacy,
 				bundler,
 				webpack: 'webpack',
 				rollup: 'rollup'

src/core/create_compilers.ts

@@ -3,6 +3,7 @@ import * as path from 'path';
 import colors from 'kleur';
 import pb from 'pretty-bytes';
 import relative from 'require-relative';
+import format_messages from 'webpack-format-messages';
 import { left_pad } from '../utils';
 
 let r: any;
@@ -17,8 +18,8 @@ export class CompileResult {
 	duration: number;
 	errors: CompileError[];
 	warnings: CompileError[];
-	assets: string[];
-	assetsByChunkName: Record<string, string>;
+	chunks: string[];
+	assets: Record<string, string>;
 }
 
 class RollupResult extends CompileResult {
@@ -32,15 +33,15 @@ class RollupResult extends CompileResult {
 		this.errors = compiler.errors.map(munge_rollup_warning_or_error);
 		this.warnings = compiler.warnings.map(munge_rollup_warning_or_error); // TODO emit this as they happen
 
-		this.assets = compiler.chunks.map(chunk => chunk.fileName);
+		this.chunks = compiler.chunks.map(chunk => chunk.fileName);
 
 		// TODO populate this properly. We don't have namedcompiler. chunks, as in
 		// webpack, but we can have a route -> [chunk] map or something
-		this.assetsByChunkName = {};
+		this.assets = {};
 
 		compiler.chunks.forEach(chunk => {
 			if (compiler.input in chunk.modules) {
-				this.assetsByChunkName.main = chunk.fileName;
+				this.assets.main = chunk.fileName;
 			}
 		});
 
@@ -101,8 +102,6 @@ class WebpackResult extends CompileResult {
 
 		const info = stats.toJson();
 
-		// TODO use import()
-		const format_messages = require('webpack-format-messages');
 		const messages = format_messages(stats);
 
 		this.errors = messages.errors.map(munge_webpack_warning_or_error);
@@ -110,8 +109,8 @@ class WebpackResult extends CompileResult {
 
 		this.duration = info.time;
 
-		this.assets = info.assets.map((chunk: { name: string }) => chunk.name);
-		this.assetsByChunkName = info.assetsByChunkName;
+		this.chunks = info.assets.map((chunk: { name: string }) => chunk.name);
+		this.assets = info.assetsByChunkName;
 	}
 
 	print() {

src/core/create_manifests.ts

@@ -5,7 +5,8 @@ import { posixify, write_if_changed } from './utils';
 import { dev, locations } from '../config';
 import { Page, PageComponent, ServerRoute } from '../interfaces';
 
-export function create_main_manifests({ routes, dev_port }: {
+export function create_main_manifests({ bundler, routes, dev_port }: {
+	bundler: string,
 	routes: { components: PageComponent[], pages: Page[], server_routes: ServerRoute[] };
 	dev_port?: number;
 }) {
@@ -14,7 +15,7 @@ export function create_main_manifests({ routes, dev_port }: {
 
 	const path_to_routes = path.relative(manifest_dir, locations.routes());
 
-	const client_manifest = generate_client(routes, path_to_routes, dev_port);
+	const client_manifest = generate_client(routes, path_to_routes, bundler, dev_port);
 	const server_manifest = generate_server(routes, path_to_routes);
 
 	write_if_changed(
@@ -48,6 +49,7 @@ export function create_serviceworker_manifest({ routes, client_files }: {
 function generate_client(
 	routes: { root: PageComponent, components: PageComponent[], pages: Page[], server_routes: ServerRoute[] },
 	path_to_routes: string,
+	bundler: string,
 	dev_port?: number
 ) {
 	const page_ids = new Set(routes.pages.map(page =>
@@ -61,10 +63,15 @@ function generate_client(
 		import root from '${get_file(path_to_routes, routes.root)}';
 		import error from '${posixify(`${path_to_routes}/_error.html`)}';
 
-		${routes.components.map(component =>
-		`const ${component.name} = () =>
-			import(/* webpackChunkName: "${component.name}" */ '${get_file(path_to_routes, component)}');`)
-		.join('\n')}
+		${routes.components.map(component => {
+			const annotation = bundler === 'webpack'
+				? `/* webpackChunkName: "${component.name}" */ `
+				: '';
+
+			const source = get_file(path_to_routes, component);
+
+			return `const ${component.name} = () => import(${annotation}'${source}');`;
+		}).join('\n')}
 
 		export const manifest = {
 			ignore: [${server_routes_to_ignore.map(route => route.pattern).join(', ')}],

src/core/create_routes.ts

@@ -128,12 +128,12 @@ export default function create_routes(cwd = locations.routes()) {
 				components.push(component);
 				if (item.basename === 'index.html') {
 					pages.push({
-						pattern: get_pattern(parent_segments),
+						pattern: get_pattern(parent_segments, true),
 						parts
 					});
 				} else {
 					pages.push({
-						pattern: get_pattern(segments),
+						pattern: get_pattern(segments, true),
 						parts
 					});
 				}
@@ -142,7 +142,7 @@ export default function create_routes(cwd = locations.routes()) {
 			else {
 				server_routes.push({
 					name: `route_${get_slug(item.file)}`,
-					pattern: get_pattern(segments),
+					pattern: get_pattern(segments, false),
 					file: item.file,
 					params: params
 				});
@@ -276,7 +276,7 @@ function get_slug(file: string) {
 		});
 }
 
-function get_pattern(segments: Part[][]) {
+function get_pattern(segments: Part[][], add_trailing_slash: boolean) {
 	return new RegExp(
 		`^` +
 		segments.map(segment => {
@@ -290,6 +290,6 @@ function get_pattern(segments: Part[][]) {
 						.replace(/%5D/g, ']');
 			}).join('');
 		}).join('') +
-		'\\\/?$'
+		(add_trailing_slash ? '\\\/?$' : '$')
 	);
 }

src/middleware.ts

@@ -306,7 +306,8 @@ function get_page_handler(
 		const build_info: {
 			bundler: 'rollup' | 'webpack',
 			shimport: string | null,
-			assets: Record<string, string | string[]>
+			assets: Record<string, string | string[]>,
+			legacy_assets?: Record<string, string>
 		 } = get_build_info();
 
 		res.setHeader('Content-Type', 'text/html');
@@ -414,18 +415,6 @@ function get_page_handler(
 				res.setHeader('Location', location);
 				res.end();
 
-				if (process.send) {
-					process.send({
-						__sapper__: true,
-						event: 'file',
-						url: req.url,
-						method: req.method,
-						status: redirect.statusCode,
-						type: 'text/html',
-						body: `<script>window.location.href = "${location}"</script>`
-					});
-				}
-
 				return;
 			}
 
@@ -484,14 +473,7 @@ function get_page_handler(
 				store
 			});
 
-			const file = [].concat(build_info.assets.main).filter(file => file && /\.js$/.test(file))[0];
-			const main = `${req.baseUrl}/client/${file}`;
-
-			const script = build_info.bundler === 'rollup'
-				? `<script>try{new Function("import('${main}')")();}catch(e){var s=document.createElement("script");s.src="${req.baseUrl}/client/shimport@${build_info.shimport}.js";s.setAttribute("data-main","${main}");document.head.appendChild(s);}</script>`
-				: `<script src="${main}"></script>`;
-
-			let inline_script = `__SAPPER__={${[
+			let script = `__SAPPER__={${[
 				error && `error:1`,
 				`baseUrl:"${req.baseUrl}"`,
 				serialized.preloaded && `preloaded:${serialized.preloaded}`,
@@ -500,30 +482,32 @@ function get_page_handler(
 
 			const has_service_worker = fs.existsSync(path.join(locations.dest(), 'service-worker.js'));
 			if (has_service_worker) {
-				inline_script += `if ('serviceWorker' in navigator) navigator.serviceWorker.register('${req.baseUrl}/service-worker.js');`;
+				script += `if('serviceWorker' in navigator)navigator.serviceWorker.register('${req.baseUrl}/service-worker.js');`;
+			}
+
+			const file = [].concat(build_info.assets.main).filter(file => file && /\.js$/.test(file))[0];
+			const main = `${req.baseUrl}/client/${file}`;
+
+			if (build_info.bundler === 'rollup') {
+				if (build_info.legacy_assets) {
+					const legacy_main = `${req.baseUrl}/client/legacy/${build_info.legacy_assets.main}`;
+					script += `(function(){try{eval("async function x(){}");var main="${main}"}catch(e){main="${legacy_main}"};try{new Function("import('"+main+"')")();}catch(e){var s=document.createElement("script");s.src="${req.baseUrl}/client/shimport@${build_info.shimport}.js";s.setAttribute("data-main",main);document.head.appendChild(s);}}());`;
+				} else {
+					script += `try{new Function("import('${main}')")();}catch(e){var s=document.createElement("script");s.src="${req.baseUrl}/client/shimport@${build_info.shimport}.js";s.setAttribute("data-main","${main}");document.head.appendChild(s);}`;
+				}
+			} else {
+				script += `</script><script src="${main}">`;
 			}
 
 			const body = template()
 				.replace('%sapper.base%', () => `<base href="${req.baseUrl}/">`)
-				.replace('%sapper.scripts%', () => `<script>${inline_script}</script>${script}`)
+				.replace('%sapper.scripts%', () => `<script>${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%', () => (css && css.code ? `<style>${css.code}</style>` : ''));
 
 			res.statusCode = status;
 			res.end(body);
-
-			if (process.send) {
-				process.send({
-					__sapper__: true,
-					event: 'file',
-					url: req.url,
-					method: req.method,
-					status,
-					type: 'text/html',
-					body
-				});
-			}
 		}).catch(err => {
 			if (error) {
 				// we encountered an error while rendering the error page — oops

src/rollup.ts

@@ -9,8 +9,11 @@ export default {
 		},
 
 		output: () => {
+			let dir = `${locations.dest()}/client`;
+			if (process.env.SAPPER_LEGACY_BUILD) dir += `/legacy`;
+
 			return {
-				dir: `${locations.dest()}/client`,
+				dir,
 				entryFileNames: '[name].[hash].js',
 				chunkFileNames: '[name].[hash].js',
 				format: 'esm'
@@ -38,7 +41,7 @@ export default {
 
 		output: () => {
 			return {
-				dir: locations.dest(),
+				file: `${locations.dest()}/service-worker.js`,
 				format: 'iife'
 			}
 		}

test/app/app/server.js

@@ -108,6 +108,13 @@ const middlewares = [
 	}),
 ];
 
+app.get(`${BASEPATH}/non-sapper-redirect-from`, (req, res) => {
+	res.writeHead(301, {
+		Location: `${BASEPATH}/non-sapper-redirect-to`
+	});
+	res.end();
+});
+
 if (BASEPATH) {
 	app.use(BASEPATH, ...middlewares);
 } else {

test/app/routes/index.html

@@ -7,6 +7,7 @@
 <a href='.'>home</a>
 <a href='about'>about</a>
 <a href='slow-preload'>slow preload</a>
+<a href='non-sapper-redirect-from'>redirect</a>
 <a href='redirect-from'>redirect</a>
 <a href='redirect-root'>redirect (root)</a>
 <a href='blog/nope'>broken link</a>

test/app/routes/non-sapper-redirect-to.html

@@ -0,0 +1 @@
+<h1>redirected</h1>

test/common/test.js

@@ -2,9 +2,7 @@ const fs = require('fs');
 const path = require('path');
 const assert = require('assert');
 const Nightmare = require('nightmare');
-const serve = require('serve-static');
 const walkSync = require('walk-sync');
-const fetch = require('node-fetch');
 const rimraf = require('rimraf');
 const ports = require('port-authority');
 
@@ -83,6 +81,11 @@ function testExport({ basepath = '' }) {
 				'about/index.html',
 				'slow-preload/index.html',
 
+				'redirect-from/index.html',
+				'redirect-to/index.html',
+				'non-sapper-redirect-from/index.html',
+				'non-sapper-redirect-to/index.html',
+
 				'blog/index.html',
 				'blog/a-very-long-post/index.html',
 				'blog/how-can-i-get-involved/index.html',

test/unit/create_routes/index.ts

@@ -53,14 +53,14 @@ describe('create_routes', () => {
 		assert.deepEqual(server_routes, [
 			{
 				name: 'route_blog_json',
-				pattern: /^\/blog.json\/?$/,
+				pattern: /^\/blog.json$/,
 				file: 'blog/index.json.js',
 				params: []
 			},
 
 			{
 				name: 'route_blog_$slug_json',
-				pattern: /^\/blog\/([^\/]+?).json\/?$/,
+				pattern: /^\/blog\/([^\/]+?).json$/,
 				file: 'blog/[slug].json.js',
 				params: ['slug']
 			}