tidy up

.gitignore

@@ -12,5 +12,5 @@ sapper
 runtime.js
 dist
 !rollup.config.js
-templates/app.mjs
+/runtime/app.mjs
-templates/server.mjs
+/runtime/server.mjs

package.json

@@ -11,8 +11,8 @@
     "config",
     "sapper",
     "dist/*.js",
-    "templates/*.js",
+    "runtime/*.js",
-    "templates/*.html"
+    "runtime/*.html"
   ],
   "directories": {
     "test": "test"
@@ -79,7 +79,7 @@
     "prepare": "npm run build",
     "dev": "rollup -cw",
     "prepublishOnly": "npm test",
-    "update_mime_types": "curl http://svn.apache.org/repos/asf/httpd/httpd/trunk/docs/conf/mime.types | grep -e \"^[^#]\" > templates/src/server/middleware/mime-types.md"
+    "update_mime_types": "curl http://svn.apache.org/repos/asf/httpd/httpd/trunk/docs/conf/mime.types | grep -e \"^[^#]\" > runtime/src/server/middleware/mime-types.md"
   },
   "repository": "https://github.com/sveltejs/sapper",
   "keywords": [

rollup.config.js

@@ -14,16 +14,16 @@ const external = [].concat(
 
 function template(kind, external) {
 	return {
-		input: `templates/src/${kind}/index.ts`,
+		input: `runtime/src/${kind}/index.ts`,
 		output: {
-			file: `templates/${kind}.mjs`,
+			file: `runtime/${kind}.mjs`,
 			format: 'es',
 			paths: id => id.replace('@sapper', '.')
 		},
 		external,
 		plugins: [
 			resolve({
-				extensions: ['.js', '.ts']
+				extensions: ['.mjs', '.js', '.ts']
 			}),
 			commonjs(),
 			string({
@@ -37,8 +37,8 @@ function template(kind, external) {
 }
 
 export default [
-	template('app', ['__ROOT__', '__ERROR__', 'svelte', '@sapper/App.html']),
+	template('app', id => /^(svelte\/?|@sapper\/)/.test(id)),
-	template('server', builtinModules),
+	template('server', id => builtinModules.includes(id)),
 
 	{
 		input: [
@@ -57,7 +57,7 @@ export default [
 		plugins: [
 			json(),
 			resolve({
-				extensions: ['.js', '.ts']
+				extensions: ['.mjs', '.js', '.ts']
 			}),
 			commonjs(),
 			sucrase({

runtime/internal/Sapper.html

@@ -1,6 +1,6 @@
 <script>
 	import { setContext } from 'svelte';
-	import { CONTEXT_KEY } from './internal';
+	import { CONTEXT_KEY } from './shared';
 
 	export let Root;
 	export let props;

runtime/src/app/app.ts

@@ -1,9 +1,7 @@
-import App from '@sapper/App.html';
-import { stores } from '@sapper/internal';
-import Root from '__ROOT__';
-import { preload as root_preload } from '__ROOT_PRELOAD__';
-import ErrorComponent from '__ERROR__';
 import { writable } from 'svelte/store.mjs';
+import Sapper from '@sapper/internal/Sapper.html';
+import { stores } from '@sapper/internal/shared';
+import { Root, root_preload, ErrorComponent, ignore, components, routes } from '@sapper/internal/manifest-client';
 import {
 	Target,
 	ScrollPosition,
@@ -16,15 +14,9 @@ import {
 } from './types';
 import goto from './goto';
 
-// injected at build time
+declare const __SAPPER__;
-declare const __IGNORE__, __COMPONENTS__, __PAGES__, __SAPPER__;
-
 export const initial_data = typeof __SAPPER__ !== 'undefined' && __SAPPER__;
 
-const ignore = __IGNORE__;
-export const components: ComponentLoader[] = __COMPONENTS__;
-export const routes: Route[] = __PAGES__;
-
 let ready = false;
 let root_component: Component;
 let current_token: {};
@@ -200,7 +192,7 @@ async function render(redirect: Redirect, branch: any[], props: any, page: Page)
 			detach(end);
 		}
 
-		root_component = new App({
+		root_component = new Sapper({
 			target,
 			props: {
 				Root,

runtime/src/app/index.ts

@@ -1,5 +1,5 @@
 import { getContext } from 'svelte';
-import { CONTEXT_KEY, stores } from '@sapper/internal';
+import { CONTEXT_KEY, stores } from '@sapper/internal/shared';
 
 export const preloading = { subscribe: stores.preloading.subscribe };
 export const page = { subscribe: stores.page.subscribe };

runtime/src/app/prefetchRoutes/index.ts

@@ -1,4 +1,5 @@
-import { components, routes, load_component } from "../app";
+import { components, routes } from '@sapper/internal/manifest-client';
+import { load_component } from '../app';
 
 export default function prefetchRoutes(pathnames: string[]) {
 	return routes

runtime/src/app/types.ts

@@ -9,7 +9,7 @@ type Child = {
 };
 
 export interface ComponentConstructor {
-	new (options: { target: Node, props: any, store: Store, hydrate: boolean }): Component;
+	new (options: { target: Node, props: any, hydrate: boolean }): Component;
 	preload: (props: { params: Params, query: Query }) => Promise<any>;
 };
 
@@ -55,10 +55,6 @@ export type Redirect = {
 	location: string;
 };
 
-export type Store = {
-	get: () => any;
-}
-
 export type Page = {
 	path: string;
 	params: Record<string, string>;

runtime/src/server/constants.js

@@ -0,0 +1 @@
+export const IGNORE = '__SAPPER__IGNORE__';

runtime/src/server/middleware/get_page_handler.ts

@@ -5,10 +5,11 @@ import cookie from 'cookie';
 import devalue from 'devalue';
 import fetch from 'node-fetch';
 import URL from 'url';
-import { build_dir, dev, src_dir, IGNORE } from '../placeholders';
+import { IGNORE } from '../constants';
 import { Manifest, Page, Props, Req, Res } from './types';
-import { stores } from '@sapper/internal';
+import { build_dir, dev, src_dir } from '@sapper/internal/manifest-server';
-import App from '@sapper/App.html';
+import { stores } from '@sapper/internal/shared';
+import Sapper from '@sapper/internal/Sapper.html';
 
 export function get_page_handler(
 	manifest: Manifest,
@@ -229,7 +230,7 @@ export function get_page_handler(
 				params: params
 			});
 
-			const { html, head, css } = App.render({
+			const { html, head, css } = Sapper.render({
 				Root: manifest.root,
 				props: props,
 				session: writable(session)

runtime/src/server/middleware/get_server_route_handler.ts

@@ -1,4 +1,4 @@
-import { IGNORE } from '../placeholders';
+import { IGNORE } from '../constants';
 import { Req, Res, ServerRoute } from './types';
 
 export function get_server_route_handler(routes: ServerRoute[]) {

runtime/src/server/middleware/index.ts

@@ -1,10 +1,11 @@
 import fs from 'fs';
 import path from 'path';
-import { build_dir, dev, manifest, IGNORE } from '../placeholders';
+import { build_dir, dev, manifest } from '@sapper/internal/manifest-server';
-import { Handler, Req, Res, Store } from './types';
+import { Handler, Req, Res } from './types';
 import { get_server_route_handler } from './get_server_route_handler';
 import { get_page_handler } from './get_page_handler';
 import { lookup } from './mime';
+import { IGNORE } from '../constants';
 
 export default function middleware(opts: {
 	session?: (req: Req, res: Res) => any,

runtime/src/server/middleware/types.ts

@@ -26,10 +26,6 @@ export type Manifest = {
 
 export type Handler = (req: Req, res: Res, next: () => void) => void;
 
-export type Store = {
-	get: () => any
-};
-
 export type Props = {
 	error?: { message: string };
 	status?: number;
@@ -59,7 +55,7 @@ export interface Res extends ServerResponse {
 export { ServerResponse };
 
 interface Component {
-	render: (data: any, opts: { store: Store }) => {
+	render: (data: any) => {
 		head: string;
 		css: { code: string, map: any };
 		html: string

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 client_manifest = generate_client_manifest(manifest_data, path_to_routes, bundler, dev, dev_port);
-	const server_manifest = generate_server(manifest_data, path_to_routes, cwd, src, dest, dev);
+	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/manifest-client.mjs`, client_manifest);
-	write_if_changed(`${output}/internal.mjs`, internal);
+	write_if_changed(`${output}/internal/manifest-server.mjs`, server_manifest);
-	write_if_changed(`${output}/App.html`, app);
-	write_if_changed(`${output}/app.mjs`, client_manifest);
-	write_if_changed(`${output}/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)}),
+					js: () => import(${annotation}${stringify(source)}),
-			css: "__SAPPER_CSS_PLACEHOLDER:${stringify(component.file, false)}__"
+					css: "__SAPPER_CSS_PLACEHOLDER:${stringify(component.file, false)}__"
-		}`;
+				}`;
-		}).join(',\n\t\t')}
+		}).join(',\n\t\t\t\t')}
-	]`.replace(/^\t/gm, '').trim();
+	]`.replace(/^\t/gm, '');
 
 	let needs_decode = false;
 
-	let pages = `[
+	let routes = `[
-		${manifest_data.pages.map(page => `{
+				${manifest_data.pages.map(page => `{
-			// ${page.parts[page.parts.length - 1].component.file}
+					// ${page.parts[page.parts.length - 1].component.file}
-			pattern: ${page.pattern},
+					pattern: ${page.pattern},
-			parts: [
+					parts: [
-				${page.parts.map(part => {
+						${page.parts.map(part => {
-					if (part === null) return 'null';
+							if (part === null) return 'null';
 
-					if (part.params.length > 0) {
+							if (part.params.length > 0) {
-						needs_decode = true;
+								needs_decode = true;
-						const props = part.params.map((param, i) => `${param}: d(match[${i + 1}])`);
+								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]}, params: match => ({ ${props.join(', ')} }) }`;
-					}
+							}
 
-					return `{ i: ${component_indexes[part.component.name]} }`;
+							return `{ i: ${component_indexes[part.component.name]} }`;
-				}).join(',\n\t\t\t\t')}
+						}).join(',\n\t\t\t\t\t\t')}
-			]
+					]
-		}`).join(',\n\n\t\t')}
+				}`).join(',\n\n\t\t\t\t')}
-	]`.replace(/^\t/gm, '').trim();
+	]`.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) {
+		export const ignore = [${server_routes_to_ignore.map(route => route.pattern).join(', ')}];
-		const sapper_dev_client = posixify(
-			path.resolve(__dirname, '../sapper-dev-client.js')
-		);
 
-		footer = `
+		export const components = ${components};
 
-			if (typeof window !== 'undefined') {
+		export const routes = ${routes};
-				import(${stringify(sapper_dev_client)}).then(client => {
-					client.connect(${dev_port});
-				});
-			}`.replace(/^\t{3}/gm, '');
-	}
 
-	return `// This file is generated by Sapper — do not edit it!\n` + template
+		${dev ? `if (typeof window !== 'undefined') {
-		.replace(/__ROOT__/g, stringify(get_file(path_to_routes, manifest_data.root), false))
+			import(${stringify(posixify(path.resolve(__dirname, '../sapper-dev-client.js')))}).then(client => {
-		.replace(/__ROOT_PRELOAD__/g, manifest_data.root.has_preload ? stringify(get_file(path_to_routes, manifest_data.root), false) : './internal')
+				client.connect(${dev_port});
-		.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(/^\t{2}/gm, '').trim();
-		.replace(/__PAGES__/g, pages) +
-		footer;
 }
 
-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 =>
+		manifest_data.server_routes.map((route, i) =>
-			`import * as __${route.name} from ${stringify(posixify(`${path_to_routes}/${route.file}`))};`),
+			`import * as route_${i} from ${stringify(posixify(`${path_to_routes}/${route.file}`))};`),
-		manifest_data.components.map(component =>
+		manifest_data.components.map((component, i) =>
-			`import __${component.name}${component.has_preload ? `, { preload as __${component.name}_preload }` : ''} from ${stringify(get_file(path_to_routes, component))};`),
+			`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}`,
+								`component: component_${component_lookup[part.component.name]}`,
-								part.component.has_preload && `preload: __${part.component.name}_preload`
+								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));
+		export const build_dir = ${JSON.stringify(build_dir)};
-	const src_dir = posixify(path.relative(cwd, src));
+
+		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) {
+	if (component.default) return `./layout.html`;
-		return `./_layout.html`;
-	}
-
 	return posixify(`${path_to_routes}/${component.file}`);
 }

templates/src/server/placeholders.ts

@@ -1,11 +0,0 @@
-import { Manifest } from './types';
-
-export const manifest: Manifest = __MANIFEST__;
-
-export const build_dir = __BUILD__DIR__;
-
-export const src_dir = __SRC__DIR__;
-
-export const dev = __DEV__;
-
-export const IGNORE = '__SAPPER__IGNORE__';