move all page info to app-level stores

test/apps/basics/src/routes/[slug].html

@@ -1 +1,5 @@
-<h1>{params.slug.toUpperCase()}</h1>
+<script>
+	import { page } from '@sapper/app';
+</script>
+
+<h1>{$page.params.slug.toUpperCase()}</h1>

test/apps/basics/src/routes/echo-query/index.html

@@ -1 +1,5 @@
-<h1>{JSON.stringify(query)}</h1>
+<script>
+	import { page } from '@sapper/app';
+</script>
+
+<h1>{JSON.stringify($page.query)}</h1>

test/apps/encoding/src/routes/echo/page/[slug].html

@@ -7,8 +7,8 @@
 </script>
 
 <script>
+	import { page } from '@sapper/app';
 	export let slug;
-	export let query;
 </script>
 
-<h1>{slug} {JSON.stringify(query)}</h1>
+<h1>{slug} {JSON.stringify($page.query)}</h1>

test/apps/layout/src/client.js

@@ -2,6 +2,11 @@ import * as sapper from '@sapper/app';
 
 window.start = () => sapper.start({
 	target: document.querySelector('#sapper')
+}).catch(err => {
+	console.error(`OH NO! ${err.message}`);
+	throw err;
+}).then(() => {
+	console.log(`STARTED`);
 });
 
 window.prefetchRoutes = () => sapper.prefetchRoutes();

test/apps/layout/src/routes/[x]/[y]/[z].html

@@ -9,10 +9,10 @@
 </script>
 
 <script>
-	export let params;
+	import { page } from '@sapper/app';
+
 	export let count;
-	export let segment = params.z;
 </script>
 
-<span>z: {segment} {count}</span>
+<span>z: {$page.params.z} {count}</span>
 <a href="foo/bar/qux">click me</a>

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

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

test/apps/layout/test.ts

@@ -26,10 +26,18 @@ describe('layout', function() {
 
 	it('only recreates components when necessary', async () => {
 		await page.goto(`${base}/foo/bar/baz`);
-		await start();
 
 		const text1 = String(await page.evaluate(() => document.querySelector('#sapper').textContent));
-		assert.deepEqual(text1.split('\n').filter(Boolean), [
+		assert.deepEqual(text1.split('\n').filter(Boolean).map(str => str.trim()), [
+			'y: bar 1',
+			'z: baz 1',
+			'click me',
+			'child segment: baz'
+		]);
+
+		await start();
+		const text2 = String(await page.evaluate(() => document.querySelector('#sapper').textContent));
+		assert.deepEqual(text2.split('\n').filter(Boolean).map(str => str.trim()), [
 			'y: bar 1',
 			'z: baz 1',
 			'click me',
@@ -39,8 +47,8 @@ describe('layout', function() {
 		await page.click('[href="foo/bar/qux"]');
 		await wait(50);
 
-		const text2 = String(await page.evaluate(() => document.querySelector('#sapper').textContent));
-		assert.deepEqual(text2.split('\n').filter(Boolean), [
+		const text3 = String(await page.evaluate(() => document.querySelector('#sapper').textContent));
+		assert.deepEqual(text3.split('\n').filter(Boolean).map(str => str.trim()), [
 			'y: bar 1',
 			'z: qux 2',
 			'click me',

test/apps/preloading/src/routes/prefetch/[slug]/index.html

@@ -1 +1,5 @@
-<h1>{params.slug}</h1>
+<script>
+	import { page } from '@sapper/app';
+</script>
+
+<h1>{$page.params.slug}</h1>