Support Svelte 3

fixes #546, #551, #552, #554

test/apps/layout/rollup.config.js

@@ -22,10 +22,7 @@ export default {
 				emitCss: true
 			}),
 			resolve()
-		],
-
-		// temporary, pending Rollup 1.0
-		experimentalCodeSplitting: true
+		]
 	},
 
 	server: {
@@ -44,10 +41,7 @@ export default {
 				preferBuiltins: true
 			})
 		],
-		external: ['sirv', 'polka'],
-
-		// temporary, pending Rollup 1.0
-		experimentalCodeSplitting: true
+		external: ['sirv', 'polka']
 	},
 
 	serviceworker: {

test/apps/layout/src/client.js

@@ -1,4 +1,4 @@
-import * as sapper from '../__sapper__/client.js';
+import * as sapper from '@sapper/app';
 
 window.start = () => sapper.start({
 	target: document.querySelector('#sapper')

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

@@ -1,20 +1,18 @@
-<span>z: {segment} {count}</span>
-<a href="foo/bar/qux">click me</a>
-
-<script>
+<script context="module">
 	import counts from '../_counts.js';
 
-	export default {
-		preload() {
-			return {
-				count: counts.z += 1
-			};
-		},
+	export function preload() {
+		return {
+			count: counts.z += 1
+		};
+	}
+</script>
 
-		oncreate() {
-			this.set({
-				segment: this.get().params.z
-			});
-		}
-	};
-</script>
+<script>
+	import { page } from '@sapper/app';
+
+	export let count;
+</script>
+
+<span>z: {$page.params.z} {count}</span>
+<a href="foo/bar/qux">click me</a>

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

@@ -1,22 +1,21 @@
-<span>y: {segment} {count}</span>
-<svelte:component this={child.component} {...child.props}/>
-
-<span>child segment: {child.segment}</span>
-
-<script>
+<script context="module">
 	import counts from '../_counts.js';
 
-	export default {
-		preload() {
-			return {
-				count: counts.y += 1
-			};
-		},
+	export function preload() {
+		return {
+			count: counts.y += 1
+		};
+	}
+</script>
 
-		oncreate() {
-			this.set({
-				segment: this.get().params.y
-			});
-		}
-	};
-</script>
+<script>
+	import { page } from '@sapper/app';
+
+	export let count;
+	export let child;
+</script>
+
+<span>y: {$page.params.y} {count}</span>
+<svelte:component this={child.component} {...child.props}/>
+
+<span>child segment: {child.segment}</span>

test/apps/layout/src/server.js

@@ -1,5 +1,5 @@
 import polka from 'polka';
-import * as sapper from '../__sapper__/server.js';
+import * as sapper from '@sapper/server';
 
 const { PORT } = process.env;
 

test/apps/layout/src/service-worker.js

@@ -1,10 +1,10 @@
-import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
+import * as sapper from '@sapper/service-worker';
 
-const ASSETS = `cache${timestamp}`;
+const ASSETS = `cache${sapper.timestamp}`;
 
 // `shell` is an array of all the files generated by webpack,
 // `files` is an array of everything in the `static` directory
-const to_cache = shell.concat(ASSETS);
+const to_cache = sapper.shell.concat(sapper.files);
 const cached = new Set(to_cache);
 
 self.addEventListener('install', event => {
@@ -65,7 +65,7 @@ self.addEventListener('fetch', event => {
 	// might prefer a cache-first approach to a network-first one.)
 	event.respondWith(
 		caches
-			.open(`offline${timestamp}`)
+			.open(`offline${sapper.timestamp}`)
 			.then(async cache => {
 				try {
 					const response = await fetch(event.request);

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 = await page.evaluate(() => document.querySelector('#sapper').textContent);
-		assert.deepEqual(text1.split('\n').filter(Boolean), [
+		const text1 = String(await page.evaluate(() => document.querySelector('#sapper').textContent));
+		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 = 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',