delete App.html

src/middleware.ts

@@ -45,15 +45,10 @@ interface Component {
 	preload: (data: any) => any | Promise<any>
 }
 
-export default function middleware({ App, routes, store }: {
+export default function middleware({ routes, store }: {
-	App: Component,
 	routes: RouteObject[],
 	store: (req: Req) => Store
 }) {
-	if (!App) {
-		throw new Error(`As of 0.12, you must supply an App component to Sapper — see https://sapper.svelte.technology/guide#0-11-to-0-12 for more information`);
-	}
-
 	const output = locations.dest();
 
 	let emitted_basepath = false;
@@ -109,7 +104,7 @@ export default function middleware({ App, routes, store }: {
 		}),
 
 		get_server_route_handler(routes.server_routes),
-		get_page_handler(App, routes, store)
+		get_page_handler(routes, store)
 	].filter(Boolean));
 
 	return middleware;
@@ -227,7 +222,7 @@ function get_server_route_handler(routes: RouteObject[]) {
 	};
 }
 
-function get_page_handler(App: Component, routes: RouteObject[], store_getter: (req: Req) => Store) {
+function get_page_handler(routes: RouteObject[], store_getter: (req: Req) => Store) {
 	const output = locations.dest();
 
 	const get_chunks = dev()

src/runtime/index.ts

@@ -3,7 +3,6 @@ import { Component, ComponentConstructor, Params, Query, Route, RouteData, Scrol
 
 const manifest = typeof window !== 'undefined' && window.__SAPPER__;
 
-export let App: ComponentConstructor;
 export let component: Component;
 let target: Node;
 let store: Store;

test/app/app/App.html

@@ -1,6 +0,0 @@
-{#if preloading}
-	<progress class='preloading-progress' value=0.5/>
-{/if}
-
-<svelte:component this={Page} {...props}/>
-

test/app/app/client.js

@@ -1,12 +1,10 @@
 import { init, prefetchRoutes } from '../../../runtime.js';
 import { Store } from 'svelte/store.js';
 import { routes } from './manifest/client.js';
-import App from './App.html';
 
 window.init = () => {
 	return init({
 		target: document.querySelector('#sapper'),
-		App,
 		routes,
 		store: data => new Store(data)
 	});

test/app/app/server.js

@@ -5,7 +5,6 @@ import serve from 'serve-static';
 import sapper from '../../../dist/middleware.ts.js';
 import { Store } from 'svelte/store.js';
 import { routes } from './manifest/server.js';
-import App from './App.html'
 
 let pending;
 let ended;
@@ -87,7 +86,6 @@ const middlewares = [
 	},
 
 	sapper({
-		App,
 		routes,
 		store: () => {
 			return new Store({

test/app/routes/_default.html

@@ -0,0 +1,26 @@
+<svelte:head>
+	<title>Sapper project template</title>
+</svelte:head>
+
+<h1>Great success!</h1>
+
+<a href='.'>home</a>
+<a href='about'>about</a>
+<a href='slow-preload'>slow preload</a>
+<a href='redirect-from'>redirect</a>
+<a href='blog/nope'>broken link</a>
+<a href='blog/throw-an-error'>error link</a>
+<a href='credentials?creds=include'>credentials</a>
+<a rel=prefetch class='{page === "blog"  ? "selected" : ""}' href='blog'>blog</a>
+
+<div class='hydrate-test'></div>
+
+<style>
+	h1 {
+		text-align: center;
+		font-size: 2.8em;
+		text-transform: uppercase;
+		font-weight: 700;
+		margin: 0 0 0.5em 0;
+	}
+</style>

test/app/routes/blog/_default.html

@@ -0,0 +1,25 @@
+<svelte:head>
+	<title>Blog</title>
+</svelte:head>
+
+<h1>Recent posts</h1>
+
+<ul>
+	{#each posts as post}
+		<!-- we're using the non-standard `rel=prefetch` attribute to
+				tell Sapper to load the data for the page as soon as
+				the user hovers over the link or taps it, instead of
+				waiting for the 'click' event -->
+		<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
+	{/each}
+</ul>
+
+<script>
+	export default {
+		preload({ params, query }) {
+			return fetch(`blog.json`).then(r => r.json()).then(posts => {
+				return { posts };
+			});
+		}
+	};
+</script>

test/app/routes/blog/index.html

@@ -1,25 +1 @@
-<svelte:head>
+<svelte:component this={child.component} {...child.props}/>
-	<title>Blog</title>
-</svelte:head>
-
-<h1>Recent posts</h1>
-
-<ul>
-	{#each posts as post}
-		<!-- we're using the non-standard `rel=prefetch` attribute to
-				tell Sapper to load the data for the page as soon as
-				the user hovers over the link or taps it, instead of
-				waiting for the 'click' event -->
-		<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
-	{/each}
-</ul>
-
-<script>
-	export default {
-		preload({ params, query }) {
-			return fetch(`blog.json`).then(r => r.json()).then(posts => {
-				return { posts };
-			});
-		}
-	};
-</script>

test/app/routes/index.html

@@ -1,26 +1,6 @@
-<svelte:head>
+{#if preloading}
-	<title>Sapper project template</title>
+	<progress class='preloading-progress' value=0.5/>
-</svelte:head>
+{/if}
 
-<h1>Great success!</h1>
+<svelte:component this={child.component} {...child.props}/>
 
-<a href='.'>home</a>
-<a href='about'>about</a>
-<a href='slow-preload'>slow preload</a>
-<a href='redirect-from'>redirect</a>
-<a href='blog/nope'>broken link</a>
-<a href='blog/throw-an-error'>error link</a>
-<a href='credentials?creds=include'>credentials</a>
-<a rel=prefetch class='{page === "blog"  ? "selected" : ""}' href='blog'>blog</a>
-
-<div class='hydrate-test'></div>
-
-<style>
-	h1 {
-		text-align: center;
-		font-size: 2.8em;
-		text-transform: uppercase;
-		font-weight: 700;
-		margin: 0 0 0.5em 0;
-	}
-</style>

test/app/routes/preload-values/index.html

@@ -0,0 +1 @@
+<svelte:component this={child.component} {...child.props}/>