tidy up

src/api/build.ts

@@ -9,6 +9,7 @@ import read_template from '../core/read_template';
 import { CompileResult } from '../core/create_compilers/interfaces';
 import { noop } from './utils/noop';
 import validate_bundler from './utils/validate_bundler';
+import { copy_runtime } from './utils/copy_runtime';
 
 type Opts = {
 	cwd?: string;
@@ -49,6 +50,7 @@ export async function build({
 
 	rimraf.sync(path.join(output, '**/*'));
 	mkdirp.sync(output);
+	copy_runtime(output);
 
 	rimraf.sync(path.join(dest, '**/*'));
 	mkdirp.sync(`${dest}/client`);

src/api/dev.ts

@@ -15,6 +15,7 @@ import { copy_shimport } from './utils/copy_shimport';
 import { ManifestData, FatalEvent, ErrorEvent, ReadyEvent, InvalidEvent } from '../interfaces';
 import read_template from '../core/read_template';
 import { noop } from './utils/noop';
+import { copy_runtime } from './utils/copy_runtime';
 
 type Opts = {
 	cwd?: string,
@@ -147,6 +148,7 @@ class Watcher extends EventEmitter {
 
 		rimraf.sync(path.join(output, '**/*'));
 		mkdirp.sync(output);
+		copy_runtime(output);
 
 		rimraf.sync(dest);
 		mkdirp.sync(`${dest}/client`);

src/api/utils/copy_runtime.ts

@@ -0,0 +1,21 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import mkdirp from 'mkdirp';
+
+const runtime = [
+	'app.mjs',
+	'server.mjs',
+	'internal/shared.mjs',
+	'internal/Sapper.html',
+	'internal/layout.html'
+].map(file => ({
+	file,
+	source: fs.readFileSync(path.join(__dirname, `../runtime/${file}`), 'utf-8')
+}));
+
+export function copy_runtime(output: string) {
+	runtime.forEach(({ file, source }) => {
+		mkdirp.sync(path.dirname(`${output}/${file}`));
+		fs.writeFileSync(`${output}/${file}`, source);
+	});
+}

src/core/create_manifests.ts

@@ -3,10 +3,6 @@ import * as path from 'path';
 import { posixify, stringify, walk, write_if_changed } from '../utils';
 import { Page, PageComponent, ManifestData } from '../interfaces';
 
-const app = fs.readFileSync(path.resolve(__dirname, '../templates/App.html'), 'utf-8');
-const internal = fs.readFileSync(path.resolve(__dirname, '../templates/internal.mjs'), 'utf-8');
-const layout = fs.readFileSync(path.resolve(__dirname, '../templates/layout.html'), 'utf-8');
-
 export function create_main_manifests({
 	bundler,
 	manifest_data,
@@ -30,16 +26,13 @@ export function create_main_manifests({
 }) {
 	if (!fs.existsSync(output)) fs.mkdirSync(output);
 
-	const path_to_routes = path.relative(output, routes);
+	const path_to_routes = path.relative(`${output}/internal`, routes);
 
-	const client_manifest = generate_client(manifest_data, path_to_routes, bundler, dev, dev_port);
-	const server_manifest = generate_server(manifest_data, path_to_routes, cwd, src, dest, dev);
+	const client_manifest = generate_client_manifest(manifest_data, path_to_routes, bundler, dev, dev_port);
+	const server_manifest = generate_server_manifest(manifest_data, path_to_routes, cwd, src, dest, dev);
 
-	write_if_changed(`${output}/_layout.html`, layout);
-	write_if_changed(`${output}/internal.mjs`, internal);
-	write_if_changed(`${output}/App.html`, app);
-	write_if_changed(`${output}/app.mjs`, client_manifest);
-	write_if_changed(`${output}/server.mjs`, server_manifest);
+	write_if_changed(`${output}/internal/manifest-client.mjs`, client_manifest);
+	write_if_changed(`${output}/internal/manifest-server.mjs`, server_manifest);
 }
 
 export function create_serviceworker_manifest({ manifest_data, output, client_files, static_files }: {
@@ -74,16 +67,13 @@ export function create_serviceworker_manifest({ manifest_data, output, client_fi
 	write_if_changed(`${output}/service-worker.js`, code);
 }
 
-function generate_client(
+function generate_client_manifest(
 	manifest_data: ManifestData,
 	path_to_routes: string,
 	bundler: string,
 	dev: boolean,
 	dev_port?: number
 ) {
-	const template_file = path.resolve(__dirname, '../templates/app.mjs');
-	const template = fs.readFileSync(template_file, 'utf-8');
-
 	const page_ids = new Set(manifest_data.pages.map(page =>
 		page.pattern.toString()));
 
@@ -103,65 +93,59 @@ function generate_client(
 			component_indexes[component.name] = i;
 
 			return `{
-			js: () => import(${annotation}${stringify(source)}),
-			css: "__SAPPER_CSS_PLACEHOLDER:${stringify(component.file, false)}__"
-		}`;
-		}).join(',\n\t\t')}
-	]`.replace(/^\t/gm, '').trim();
+					js: () => import(${annotation}${stringify(source)}),
+					css: "__SAPPER_CSS_PLACEHOLDER:${stringify(component.file, false)}__"
+				}`;
+		}).join(',\n\t\t\t\t')}
+	]`.replace(/^\t/gm, '');
 
 	let needs_decode = false;
 
-	let pages = `[
-		${manifest_data.pages.map(page => `{
-			// ${page.parts[page.parts.length - 1].component.file}
-			pattern: ${page.pattern},
-			parts: [
-				${page.parts.map(part => {
-					if (part === null) return 'null';
+	let routes = `[
+				${manifest_data.pages.map(page => `{
+					// ${page.parts[page.parts.length - 1].component.file}
+					pattern: ${page.pattern},
+					parts: [
+						${page.parts.map(part => {
+							if (part === null) return 'null';
 
-					if (part.params.length > 0) {
-						needs_decode = true;
-						const props = part.params.map((param, i) => `${param}: d(match[${i + 1}])`);
-						return `{ i: ${component_indexes[part.component.name]}, params: match => ({ ${props.join(', ')} }) }`;
-					}
+							if (part.params.length > 0) {
+								needs_decode = true;
+								const props = part.params.map((param, i) => `${param}: d(match[${i + 1}])`);
+								return `{ i: ${component_indexes[part.component.name]}, params: match => ({ ${props.join(', ')} }) }`;
+							}
 
-					return `{ i: ${component_indexes[part.component.name]} }`;
-				}).join(',\n\t\t\t\t')}
-			]
-		}`).join(',\n\n\t\t')}
-	]`.replace(/^\t/gm, '').trim();
+							return `{ i: ${component_indexes[part.component.name]} }`;
+						}).join(',\n\t\t\t\t\t\t')}
+					]
+				}`).join(',\n\n\t\t\t\t')}
+	]`.replace(/^\t/gm, '');
 
 	if (needs_decode) {
-		pages = `(d => ${pages})(decodeURIComponent)`
+		routes = `(d => ${routes})(decodeURIComponent)`
 	}
 
-	let footer = '';
+	return `
+		// This file is generated by Sapper — do not edit it!
+		export { default as Root } from '${stringify(get_file(path_to_routes, manifest_data.root), false)}';
+		export { preload as root_preload } from '${manifest_data.root.has_preload ? stringify(get_file(path_to_routes, manifest_data.root), false) : './shared'}';
+		export { default as ErrorComponent } from '${stringify(posixify(`${path_to_routes}/_error.html`), false)}';
 
-	if (dev) {
-		const sapper_dev_client = posixify(
-			path.resolve(__dirname, '../sapper-dev-client.js')
-		);
+		export const ignore = [${server_routes_to_ignore.map(route => route.pattern).join(', ')}];
 
-		footer = `
+		export const components = ${components};
 
-			if (typeof window !== 'undefined') {
-				import(${stringify(sapper_dev_client)}).then(client => {
-					client.connect(${dev_port});
-				});
-			}`.replace(/^\t{3}/gm, '');
-	}
+		export const routes = ${routes};
 
-	return `// This file is generated by Sapper — do not edit it!\n` + template
-		.replace(/__ROOT__/g, stringify(get_file(path_to_routes, manifest_data.root), false))
-		.replace(/__ROOT_PRELOAD__/g, manifest_data.root.has_preload ? stringify(get_file(path_to_routes, manifest_data.root), false) : './internal')
-		.replace(/__ERROR__/g, stringify(posixify(`${path_to_routes}/_error.html`), false))
-		.replace(/__IGNORE__/g, `[${server_routes_to_ignore.map(route => route.pattern).join(', ')}]`)
-		.replace(/__COMPONENTS__/g, components)
-		.replace(/__PAGES__/g, pages) +
-		footer;
+		${dev ? `if (typeof window !== 'undefined') {
+			import(${stringify(posixify(path.resolve(__dirname, '../sapper-dev-client.js')))}).then(client => {
+				client.connect(${dev_port});
+			});
+		}` : ''}
+	`.replace(/^\t{2}/gm, '').trim();
 }
 
-function generate_server(
+function generate_server_manifest(
 	manifest_data: ManifestData,
 	path_to_routes: string,
 	cwd: string,
@@ -169,29 +153,38 @@ function generate_server(
 	dest: string,
 	dev: boolean
 ) {
-	const template_file = path.resolve(__dirname, '../templates/server.mjs');
-	const template = fs.readFileSync(template_file, 'utf-8');
-
 	const imports = [].concat(
-		manifest_data.server_routes.map(route =>
-			`import * as __${route.name} from ${stringify(posixify(`${path_to_routes}/${route.file}`))};`),
-		manifest_data.components.map(component =>
-			`import __${component.name}${component.has_preload ? `, { preload as __${component.name}_preload }` : ''} from ${stringify(get_file(path_to_routes, component))};`),
+		manifest_data.server_routes.map((route, i) =>
+			`import * as route_${i} from ${stringify(posixify(`${path_to_routes}/${route.file}`))};`),
+		manifest_data.components.map((component, i) =>
+			`import component_${i}${component.has_preload ? `, { preload as preload_${i} }` : ''} from ${stringify(get_file(path_to_routes, component))};`),
 		`import root${manifest_data.root.has_preload ? `, { preload as root_preload }` : ''} from ${stringify(get_file(path_to_routes, manifest_data.root))};`,
 		`import error from ${stringify(posixify(`${path_to_routes}/_error.html`))};`
 	);
 
+	const component_lookup: Record<string, number> = {};
+	manifest_data.components.forEach((component, i) => {
+		component_lookup[component.name] = i;
+	});
+
 	let code = `
-		${imports.join('\n')}${manifest_data.root.has_preload ? '' : `\n\nconst root_preload = () => {};`}
+		`.replace(/^\t\t/gm, '').trim();
+
+	const build_dir = posixify(path.relative(cwd, dest));
+	const src_dir = posixify(path.relative(cwd, src));
+
+	return `
+		// 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 => `{
+				${manifest_data.server_routes.map((route, i) => `{
 					// ${route.file}
 					pattern: ${route.pattern},
-					handlers: __${route.name},
+					handlers: route_${i},
 					params: ${route.params.length > 0
 						? `match => ({ ${route.params.map((param, i) => `${param}: d(match[${i + 1}])`).join(', ')} })`
 						: `() => ({})`}
@@ -209,8 +202,8 @@ function generate_server(
 							const props = [
 								`name: "${part.component.name}"`,
 								`file: ${stringify(part.component.file)}`,
-								`component: __${part.component.name}`,
-								part.component.has_preload && `preload: __${part.component.name}_preload`
+								`component: component_${component_lookup[part.component.name]}`,
+								part.component.has_preload && `preload: preload_${component_lookup[part.component.name]}`
 							].filter(Boolean);
 
 							if (part.params.length > 0) {
@@ -225,12 +218,16 @@ function generate_server(
 			],
 
 			root,
-			root_preload,
+			root_preload${manifest_data.root.has_preload ? '' : `: () => {}`},
 			error
-		};`.replace(/^\t\t/gm, '').trim();
+		};
 
-	const build_dir = posixify(path.relative(cwd, dest));
-	const src_dir = posixify(path.relative(cwd, src));
+		export const build_dir = ${JSON.stringify(build_dir)};
+
+		export const src_dir = ${JSON.stringify(src_dir)};
+
+		export const dev = ${dev ? 'true' : 'false'};
+	`.replace(/^\t{2}/gm, '').trim();
 
 	return `// This file is generated by Sapper — do not edit it!\n` + template
 		.replace('__BUILD__DIR__', JSON.stringify(build_dir))
@@ -240,9 +237,6 @@ function generate_server(
 }
 
 function get_file(path_to_routes: string, component: PageComponent) {
-	if (component.default) {
-		return `./_layout.html`;
-	}
-
+	if (component.default) return `./layout.html`;
 	return posixify(`${path_to_routes}/${component.file}`);
 }