CSS extraction and code-splitting

closes #388

src/api/build.ts

@@ -3,15 +3,24 @@ import * as path from 'path';
 import mkdirp from 'mkdirp';
 import rimraf from 'rimraf';
 import { EventEmitter } from 'events';
+import * as codec from 'sourcemap-codec';
+import hash from 'string-hash';
 import minify_html from './utils/minify_html';
-import { create_compilers, create_main_manifests, create_routes, create_serviceworker_manifest } from '../core';
+import { create_compilers, create_main_manifests, create_manifest_data, create_serviceworker_manifest } from '../core';
 import * as events from './interfaces';
 import { copy_shimport } from './utils/copy_shimport';
+import { Dirs, PageComponent } from '../interfaces';
+import { CompileResult } from '../core/create_compilers/interfaces';
 
-export function build(opts: {}) {
+type Opts = {
+	legacy: boolean;
+	bundler: string;
+};
+
+export function build(opts: Opts, dirs: Dirs) {
 	const emitter = new EventEmitter();
 
-	execute(emitter, opts).then(
+	execute(emitter, opts, dirs).then(
 		() => {
 			emitter.emit('done', <events.DoneEvent>{}); // TODO do we need to pass back any info?
 		},
@@ -25,22 +34,14 @@ export function build(opts: {}) {
 	return emitter;
 }
 
-async function execute(emitter: EventEmitter, {
-	dest = 'build',
-	app = 'app',
-	legacy,
-	bundler,
-	webpack = 'webpack',
-	rollup = 'rollup',
-	routes = 'routes'
-} = {}) {
-	rimraf.sync(path.join(dest, '**/*'));
-	mkdirp.sync(`${dest}/client`);
-	copy_shimport(dest);
+async function execute(emitter: EventEmitter, opts: Opts, dirs: Dirs) {
+	rimraf.sync(path.join(dirs.dest, '**/*'));
+	mkdirp.sync(`${dirs.dest}/client`);
+	copy_shimport(dirs.dest);
 
 	// minify app/template.html
 	// TODO compile this to a function? could be quicker than str.replace(...).replace(...).replace(...)
-	const template = fs.readFileSync(`${app}/template.html`, 'utf-8');
+	const template = fs.readFileSync(`${dirs.app}/template.html`, 'utf-8');
 
 	// remove this in a future version
 	if (template.indexOf('%sapper.base%') === -1) {
@@ -49,14 +50,14 @@ async function execute(emitter: EventEmitter, {
 		throw error;
 	}
 
-	fs.writeFileSync(`${dest}/template.html`, minify_html(template));
+	fs.writeFileSync(`${dirs.dest}/template.html`, minify_html(template));
 
-	const route_objects = create_routes();
+	const manifest_data = create_manifest_data();
 
 	// create app/manifest/client.js and app/manifest/server.js
-	create_main_manifests({ bundler, routes: route_objects });
+	create_main_manifests({ bundler: opts.bundler, manifest_data });
 
-	const { client, server, serviceworker } = create_compilers(bundler, { webpack, rollup });
+	const { client, server, serviceworker } = create_compilers(opts.bundler, dirs);
 
 	const client_result = await client.compile();
 	emitter.emit('build', <events.BuildEvent>{
@@ -65,20 +66,11 @@ async function execute(emitter: EventEmitter, {
 		result: client_result
 	});
 
-	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.assets
-	};
+	const build_info = client_result.to_json(manifest_data, dirs);
 
-	if (legacy) {
+	if (opts.legacy) {
 		process.env.SAPPER_LEGACY_BUILD = 'true';
-		const { client } = create_compilers(bundler, { webpack, rollup });
+		const { client } = create_compilers(opts.bundler, dirs);
 
 		const client_result = await client.compile();
 
@@ -92,7 +84,7 @@ async function execute(emitter: EventEmitter, {
 		delete process.env.SAPPER_LEGACY_BUILD;
 	}
 
-	fs.writeFileSync(path.join(dest, 'build.json'), JSON.stringify(build_info));
+	fs.writeFileSync(path.join(dirs.dest, 'build.json'), JSON.stringify(build_info));
 
 	const server_stats = await server.compile();
 	emitter.emit('build', <events.BuildEvent>{
@@ -105,8 +97,8 @@ async function execute(emitter: EventEmitter, {
 
 	if (serviceworker) {
 		create_serviceworker_manifest({
-			routes: route_objects,
-			client_files: client_result.chunks.map((file: string) => `client/${file}`)
+			manifest_data,
+			client_files: client_result.chunks.map(chunk => `client/${chunk.file}`)
 		});
 
 		serviceworker_stats = await serviceworker.compile();

src/api/dev.ts

@@ -7,12 +7,14 @@ import mkdirp from 'mkdirp';
 import rimraf from 'rimraf';
 import { locations } from '../config';
 import { EventEmitter } from 'events';
-import { create_routes, create_main_manifests, create_compilers, create_serviceworker_manifest } from '../core';
-import { Compiler, Compilers, CompileResult, CompileError } from '../core/create_compilers';
+import { create_manifest_data, create_main_manifests, create_compilers, create_serviceworker_manifest } from '../core';
+import { Compiler, Compilers } from '../core/create_compilers';
+import { CompileResult, CompileError } from '../core/create_compilers/interfaces';
 import Deferred from './utils/Deferred';
 import * as events from './interfaces';
 import validate_bundler from '../cli/utils/validate_bundler';
 import { copy_shimport } from './utils/copy_shimport';
+import { ManifestData } from '../interfaces';
 
 export function dev(opts) {
 	return new Watcher(opts);
@@ -127,9 +129,11 @@ class Watcher extends EventEmitter {
 
 		if (!this.dev_port) this.dev_port = await ports.find(10000);
 
+		let manifest_data: ManifestData;
+
 		try {
-			const routes = create_routes();
-			create_main_manifests({ bundler: this.bundler, routes, dev_port: this.dev_port });
+			manifest_data = create_manifest_data();
+			create_main_manifests({ bundler: this.bundler, manifest_data, dev_port: this.dev_port });
 		} catch (err) {
 			this.emit('fatal', <events.FatalEvent>{
 				message: err.message
@@ -149,12 +153,11 @@ class Watcher extends EventEmitter {
 					return true;
 				},
 				() => {
-					const routes = create_routes();
-					create_main_manifests({ bundler: this.bundler, routes, dev_port: this.dev_port });
-
 					try {
-						const routes = create_routes();
-						create_main_manifests({ bundler: this.bundler, routes, dev_port: this.dev_port });
+						const new_manifest_data = create_manifest_data();
+						create_main_manifests({ bundler: this.bundler, manifest_data, dev_port: this.dev_port });
+
+						manifest_data = new_manifest_data;
 					} catch (err) {
 						this.emit('error', <events.ErrorEvent>{
 							message: err.message
@@ -173,10 +176,7 @@ class Watcher extends EventEmitter {
 		let deferred = new Deferred();
 
 		// TODO watch the configs themselves?
-		const compilers: Compilers = create_compilers(this.bundler, {
-			webpack: this.dirs.webpack,
-			rollup: this.dirs.rollup
-		});
+		const compilers: Compilers = create_compilers(this.bundler, this.dirs);
 
 		let log = '';
 
@@ -282,16 +282,17 @@ class Watcher extends EventEmitter {
 			},
 
 			handle_result: (result: CompileResult) => {
-				fs.writeFileSync(path.join(dest, 'build.json'), JSON.stringify({
-					bundler: this.bundler,
-					shimport: this.bundler === 'rollup' && require('shimport/package.json').version,
-					assets: result.assets
-				}, null, '  '));
+				fs.writeFileSync(
+					path.join(dest, 'build.json'),
 
-				const client_files = result.chunks.map((file: string) => `client/${file}`);
+					// TODO should be more explicit that to_json has effects
+					JSON.stringify(result.to_json(manifest_data, this.dirs), null, '  ')
+				);
+
+				const client_files = result.chunks.map(chunk => `client/${chunk.file}`);
 
 				create_serviceworker_manifest({
-					routes: create_routes(),
+					manifest_data,
 					client_files
 				});
 

src/api/find_page.ts

@@ -1,8 +1,8 @@
 import { locations } from '../config';
-import { create_routes } from '../core';
+import { create_manifest_data } from '../core';
 
 export function find_page(pathname: string, cwd = locations.routes()) {
-	const { pages } = create_routes(cwd);
+	const { pages } = create_manifest_data(cwd);
 
 	for (let i = 0; i < pages.length; i += 1) {
 		const page = pages[i];

src/api/interfaces.ts

@@ -42,4 +42,4 @@ export type FailureEvent = {
 
 }
 
-export type DoneEvent = {}
+export type DoneEvent = {};