Slot-based routing (#573)

src/api/build.ts

@@ -1,7 +1,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import minify_html from './utils/minify_html';
-import { create_compilers, create_main_manifests, create_manifest_data, create_serviceworker_manifest } from '../core';
+import { create_compilers, create_app, create_manifest_data, create_serviceworker_manifest } from '../core';
 import { copy_shimport } from './utils/copy_shimport';
 import read_template from '../core/read_template';
 import { CompileResult } from '../core/create_compilers/interfaces';
@@ -71,7 +71,7 @@ export async function build({
 	const manifest_data = create_manifest_data(routes);
 
 	// create src/node_modules/@sapper/app.mjs and server.mjs
-	create_main_manifests({
+	create_app({
 		bundler,
 		manifest_data,
 		cwd,

src/api/dev.ts

@@ -4,7 +4,7 @@ import * as http from 'http';
 import * as child_process from 'child_process';
 import * as ports from 'port-authority';
 import { EventEmitter } from 'events';
-import { create_manifest_data, create_main_manifests, create_compilers, create_serviceworker_manifest } from '../core';
+import { create_manifest_data, create_app, create_compilers, create_serviceworker_manifest } from '../core';
 import { Compiler, Compilers } from '../core/create_compilers';
 import { CompileResult } from '../core/create_compilers/interfaces';
 import Deferred from './utils/Deferred';
@@ -162,7 +162,7 @@ class Watcher extends EventEmitter {
 
 		try {
 			manifest_data = create_manifest_data(routes);
-			create_main_manifests({
+			create_app({
 				bundler: this.bundler,
 				manifest_data,
 				dev: true,
@@ -190,7 +190,7 @@ class Watcher extends EventEmitter {
 				() => {
 					try {
 						const new_manifest_data = create_manifest_data(routes);
-						create_main_manifests({
+						create_app({
 							bundler: this.bundler,
 							manifest_data, // TODO is this right? not new_manifest_data?
 							dev: true,

src/api/utils/copy_runtime.ts

@@ -6,7 +6,6 @@ const runtime = [
 	'app.mjs',
 	'server.mjs',
 	'internal/shared.mjs',
-	'internal/Sapper.svelte',
 	'internal/layout.svelte',
 	'internal/error.svelte'
 ].map(file => ({

src/core.ts

@@ -1,3 +1,3 @@
-export * from './core/create_manifests';
+export * from './core/create_app';
 export { default as create_compilers } from './core/create_compilers/index';
 export { default as create_manifest_data } from './core/create_manifest_data';

src/core/create_app.ts

@@ -3,7 +3,7 @@ import * as path from 'path';
 import { posixify, stringify, walk, write_if_changed } from '../utils';
 import { Page, PageComponent, ManifestData } from '../interfaces';
 
-export function create_main_manifests({
+export function create_app({
 	bundler,
 	manifest_data,
 	dev_port,
@@ -31,8 +31,11 @@ export function create_main_manifests({
 	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);
 
+	const app = generate_app(manifest_data, path_to_routes);
+
 	write_if_changed(`${output}/internal/manifest-client.mjs`, client_manifest);
 	write_if_changed(`${output}/internal/manifest-server.mjs`, server_manifest);
+	write_if_changed(`${output}/internal/App.svelte`, app);
 }
 
 export function create_serviceworker_manifest({ manifest_data, output, client_files, static_files }: {
@@ -230,6 +233,58 @@ function generate_server_manifest(
 	`.replace(/^\t{2}/gm, '').trim();
 }
 
+function generate_app(manifest_data: ManifestData, path_to_routes: string) {
+	// TODO remove default layout altogether
+
+	const max_depth = Math.max(...manifest_data.pages.map(page => page.parts.filter(Boolean).length));
+
+	const levels = [];
+	for (let i = 0; i < max_depth; i += 1) {
+		levels.push(i + 1);
+	}
+
+	let l = max_depth;
+
+	let pyramid = `<svelte:component this={level${l}.component} {...level${l}.props}/>`;
+
+	while (l-- > 1) {
+		pyramid = `
+			<svelte:component this={level${l}.component} segment={segments[${l}]} {...level${l}.props}>
+				{#if level${l + 1}}
+					${pyramid.replace(/\n/g, '\n\t\t\t\t\t')}
+				{/if}
+			</svelte:component>
+		`.replace(/^\t\t\t/gm, '').trim();
+	}
+
+	return `
+		<!-- This file is generated by Sapper — do not edit it! -->
+		<script>
+			import { setContext } from 'svelte';
+			import { CONTEXT_KEY } from './shared';
+			import Layout from '${get_file(path_to_routes, manifest_data.root)}';
+			import Error from '${get_file(path_to_routes, manifest_data.error)}';
+
+			export let session;
+			export let error;
+			export let status;
+			export let segments;
+			export let level0;
+			${levels.map(l => `export let level${l} = null;`).join('\n\t\t\t')}
+
+			setContext(CONTEXT_KEY, session);
+		</script>
+
+		<Layout segment={segments[0]} {...level0.props}>
+			{#if error}
+				<Error {error} {status}/>
+			{:else}
+				${pyramid.replace(/\n/g, '\n\t\t\t\t')}
+			{/if}
+		</Layout>
+	`.replace(/^\t\t/gm, '').trim();
+}
+
 function get_file(path_to_routes: string, component: PageComponent) {
 	if (component.default) return `./${component.type}.svelte`;
 	return posixify(`${path_to_routes}/${component.file}`);