replace client_assets.json with build.json, include bundler name

src/api/build.ts

@@ -64,7 +64,10 @@ async function execute(emitter: EventEmitter, {
 		result: client_result
 	});
 
-	fs.writeFileSync(path.join(dest, 'client_assets.json'), JSON.stringify(client_result.assetsByChunkName));
+	fs.writeFileSync(path.join(dest, 'build.json'), JSON.stringify({
+		bundler,
+		assets: client_result.assetsByChunkName
+	}));
 
 	const server_stats = await server.compile();
 	emitter.emit('build', <events.BuildEvent>{

src/api/dev.ts

@@ -271,7 +271,10 @@ class Watcher extends EventEmitter {
 			},
 
 			handle_result: (result: CompileResult) => {
-				fs.writeFileSync(path.join(dest, 'client_assets.json'), JSON.stringify(result.assetsByChunkName, null, '  '));
+				fs.writeFileSync(path.join(dest, 'build.json'), JSON.stringify({
+					bundler: this.bundler,
+					assets: result.assetsByChunkName
+				}, null, '  '));
 				this.deferreds.client.fulfil();
 
 				const client_files = result.assets.map((file: string) => `client/${file}`);

src/cli.ts

@@ -20,7 +20,7 @@ prog.command('dev')
 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)', 'auto')
+	.option('--bundler', 'Specify a bundler (rollup or webpack, blank for auto)')
 	.example(`build custom-dir -p 4567`)
 	.action(async (dest = 'build', opts: { port: string, bundler?: string }) => {
 		console.log(`> Building...`);
@@ -68,7 +68,7 @@ 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('--bundler', 'Specify a bundler (rollup or webpack)', 'auto')
+	.option('--bundler', 'Specify a bundler (rollup or webpack, blank for auto)')
 	.action(async (dest = 'export', opts: {
 		build: boolean,
 		bundler?: string,

src/cli/build.ts

@@ -1,5 +1,5 @@
 import { build as _build } from '../api/build';
-import * as colors from 'kleur';
+import colors from 'kleur';
 import { locations } from '../config';
 import validate_bundler from './utils/validate_bundler';
 

src/cli/export.ts

@@ -1,5 +1,5 @@
 import { exporter as _exporter } from '../api/export';
-import * as colors from 'kleur';
+import colors from 'kleur';
 import prettyBytes from 'pretty-bytes';
 import { locations } from '../config';
 

src/middleware.ts

@@ -282,9 +282,9 @@ function get_page_handler(
 ) {
 	const output = locations.dest();
 
-	const get_chunks = dev()
-		? () => JSON.parse(fs.readFileSync(path.join(output, 'client_assets.json'), 'utf-8'))
-		: (assets => () => assets)(JSON.parse(fs.readFileSync(path.join(output, 'client_assets.json'), 'utf-8')));
+	const get_build_info = dev()
+		? () => JSON.parse(fs.readFileSync(path.join(output, 'build.json'), 'utf-8'))
+		: (assets => () => assets)(JSON.parse(fs.readFileSync(path.join(output, 'build.json'), 'utf-8')));
 
 	const template = dev()
 		? () => fs.readFileSync(`${locations.app()}/template.html`, 'utf-8')
@@ -303,19 +303,22 @@ function get_page_handler(
 	}
 
 	function handle_page(page: Page, req: Req, res: ServerResponse, status = 200, error: Error | string = null) {
-		const chunks: Record<string, string | string[]> = get_chunks();
+		const build_info: {
+			bundler: 'rollup' | 'webpack',
+			assets: Record<string, string | string[]>
+		 } = get_build_info();
 
 		res.setHeader('Content-Type', 'text/html');
 
 		// preload main.js and current route
 		// TODO detect other stuff we can preload? images, CSS, fonts?
-		let preloaded_chunks = Array.isArray(chunks.main) ? chunks.main : [chunks.main];
+		let preloaded_chunks = Array.isArray(build_info.assets.main) ? build_info.assets.main : [build_info.assets.main];
 		if (!error) {
 			page.parts.forEach(part => {
 				if (!part) return;
 
 				// using concat because it could be a string or an array. thanks webpack!
-				preloaded_chunks = preloaded_chunks.concat(chunks[part.name]);
+				preloaded_chunks = preloaded_chunks.concat(build_info.assets[part.name]);
 			});
 		}
 
@@ -481,11 +484,12 @@ function get_page_handler(
 				store
 			});
 
-			let scripts = []
-				.concat(chunks.main) // chunks main might be an array. it might not! thanks, webpack
-				.filter(file => !file.match(/\.map$/))
-				.map(file => `<script src='${req.baseUrl}/client/${file}'></script>`)
-				.join('');
+			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="client/shimport.js";s.setAttribute('data-main',"${main}");document.head.appendChild(s)}</script>`
+				: `<script src="${main}"></script>`;
 
 			let inline_script = `__SAPPER__={${[
 				error && `error:1`,
@@ -501,7 +505,7 @@ function get_page_handler(
 
 			const body = template()
 				.replace('%sapper.base%', () => `<base href="${req.baseUrl}/">`)
-				.replace('%sapper.scripts%', () => `<script>${inline_script}</script>${scripts}`)
+				.replace('%sapper.scripts%', () => `<script>${inline_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>` : ''));