Slot-based routing (#573)

test/apps/layout/src/routes/[slug].svelte

@@ -1 +0,0 @@
-<h1>{params.slug.toUpperCase()}</h1>

test/apps/layout/src/routes/[x]/[y]/_layout.svelte

@@ -12,10 +12,10 @@
 	import { page } from '@sapper/app';
 
 	export let count;
-	export let child;
+	export let segment;
 </script>
 
 <span>y: {$page.params.y} {count}</span>
-<svelte:component this={child.component} {...child.props}/>
+<slot></slot>
 
-<span>child segment: {child.segment}</span>
+<span>child segment: {segment}</span>

test/apps/layout/test.ts

@@ -28,7 +28,7 @@ describe('layout', function() {
 		await page.goto(`${base}/foo/bar/baz`);
 
 		const text1 = String(await page.evaluate(() => document.querySelector('#sapper').textContent));
-		assert.deepEqual(text1.split('\n').filter(Boolean).map(str => str.trim()), [
+		assert.deepEqual(text1.split('\n').map(str => str.trim()).filter(Boolean), [
 			'y: bar 1',
 			'z: baz 1',
 			'click me',
@@ -37,7 +37,7 @@ describe('layout', function() {
 
 		await start();
 		const text2 = String(await page.evaluate(() => document.querySelector('#sapper').textContent));
-		assert.deepEqual(text2.split('\n').filter(Boolean).map(str => str.trim()), [
+		assert.deepEqual(text2.split('\n').map(str => str.trim()).filter(Boolean), [
 			'y: bar 1',
 			'z: baz 1',
 			'click me',
@@ -48,7 +48,7 @@ describe('layout', function() {
 		await wait(50);
 
 		const text3 = String(await page.evaluate(() => document.querySelector('#sapper').textContent));
-		assert.deepEqual(text3.split('\n').filter(Boolean).map(str => str.trim()), [
+		assert.deepEqual(text3.split('\n').map(str => str.trim()).filter(Boolean), [
 			'y: bar 1',
 			'z: qux 2',
 			'click me',

test/apps/preloading/src/routes/_layout.svelte

@@ -8,13 +8,16 @@
 
 <script>
 	import { preloading } from '@sapper/app';
+	import { setContext } from 'svelte';
 
 	export let child;
 	export let rootPreloadFunctionRan;
+
+	setContext('x', { rootPreloadFunctionRan });
 </script>
 
 {#if $preloading}
 	<progress class='preloading-progress' value=0.5/>
 {/if}
 
-<svelte:component this={child.component} {rootPreloadFunctionRan} {...child.props}/>
+<slot></slot>

test/apps/preloading/src/routes/prefetch/_layout.html

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

test/apps/preloading/src/routes/preload-root/index.html

@@ -1 +0,0 @@
-<h1>root preload function ran: {rootPreloadFunctionRan}</h1>

test/apps/preloading/src/routes/preload-root/index.svelte

@@ -0,0 +1,6 @@
+<script>
+	import { getContext } from 'svelte';
+	const { rootPreloadFunctionRan } = getContext('x');
+</script>
+
+<h1>root preload function ran: {rootPreloadFunctionRan}</h1>

test/apps/preloading/src/routes/preload-values/index.html

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