Merge pull request #132 from sveltejs/v3

Update for v3

.travis.yml

@@ -8,4 +8,5 @@ env:
 branches:
   only:
     - master
+    - v3
 script: _template/build.sh

package_template.json

@@ -13,13 +13,13 @@
   },
   "dependencies": {
     "compression": "^1.7.1",
-    "polka": "^0.4.0",
+    "polka": "^0.5.0",
     "sirv": "^0.4.0"
   },
   "devDependencies": {
     "npm-run-all": "^4.1.5",
-    "sapper": "^0.24.2",
+    "sapper": "alpha",
-    "svelte": "^2.0.0"
+    "svelte": "^3.0.0"
   },
   "merge-configs": {
     "rollup": {
@@ -40,7 +40,7 @@
         "rollup-plugin-node-resolve": "^4.0.0",
         "rollup-plugin-replace": "^2.0.0",
         "rollup-plugin-svelte": "^5.0.1",
-        "rollup-plugin-terser": "^1.0.1"
+        "rollup-plugin-terser": "^4.0.4"
       }
     },
     "webpack": {

rollup.config.js

@@ -29,7 +29,7 @@ export default {
 			commonjs(),
 
 			legacy && babel({
-				extensions: ['.js', '.html'],
+				extensions: ['.js', '.mjs', '.html', '.svelte'],
 				runtimeHelpers: true,
 				exclude: ['node_modules/@babel/**'],
 				presets: [

src/client.js

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

src/components/Nav.svelte

@@ -1,13 +1,6 @@
-<nav>
+<script>
-	<ul>
+	export let segment;
-		<li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li>
+</script>
-		<li><a class='{segment === "about" ? "selected" : ""}' href='about'>about</a></li>
-
-		<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
-		     the blog data when we hover over the link or tap it on a touchscreen -->
-		<li><a rel=prefetch class='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li>
-	</ul>
-</nav>
 
 <style>
 	nav {
@@ -54,3 +47,14 @@
 		display: block;
 	}
 </style>
+
+<nav>
+	<ul>
+		<li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li>
+		<li><a class='{segment === "about" ? "selected" : ""}' href='about'>about</a></li>
+
+		<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
+		     the blog data when we hover over the link or tap it on a touchscreen -->
+		<li><a rel=prefetch class='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li>
+	</ul>
+</nav>

src/routes/_error.svelte

@@ -1,14 +1,9 @@
-<svelte:head>
+<script>
-	<title>{status}</title>
+	export let status;
-</svelte:head>
+	export let error;
 
-<h1>{status}</h1>
+	const dev = process.env.NODE_ENV === 'development';
-
+</script>
-<p>{error.message}</p>
-
-{#if dev && error.stack}
-	<pre>{error.stack}</pre>
-{/if}
 
 <style>
 	h1, p {
@@ -32,10 +27,14 @@
 	}
 </style>
 
-<script>
+<svelte:head>
-	export default {
+	<title>{status}</title>
-		helpers: {
+</svelte:head>
-			dev: process.env.NODE_ENV === 'development'
+
-		}
+<h1>{status}</h1>
-	};
+
-</script>
+<p>{error.message}</p>
+
+{#if dev && error.stack}
+	<pre>{error.stack}</pre>
+{/if}

src/routes/_layout.html

@@ -1,24 +0,0 @@
-<Nav segment={child.segment}/>
-
-<main>
-	<svelte:component this={child.component} {...child.props}/>
-</main>
-
-<style>
-	main {
-		position: relative;
-		max-width: 56em;
-		background-color: white;
-		padding: 2em;
-		margin: 0 auto;
-		box-sizing: border-box;
-	}
-</style>
-
-<script>
-	export default {
-		components: {
-			Nav: '../components/Nav.html'
-		}
-	};
-</script>

src/routes/_layout.svelte

@@ -0,0 +1,22 @@
+<script>
+	import Nav from '../components/Nav.svelte';
+
+	export let segment;
+</script>
+
+<style>
+	main {
+		position: relative;
+		max-width: 56em;
+		background-color: white;
+		padding: 2em;
+		margin: 0 auto;
+		box-sizing: border-box;
+	}
+</style>
+
+<Nav {segment}/>
+
+<main>
+	<slot></slot>
+</main>

src/routes/blog/[slug].svelte

@@ -1,12 +1,21 @@
-<svelte:head>
+<script context="module">
-	<title>{post.title}</title>
+	export async function preload({ params, query }) {
-</svelte:head>
+		// the `slug` parameter is available because
+		// this file is called [slug].html
+		const res = await this.fetch(`blog/${params.slug}.json`);
+		const data = await res.json();
 
-<h1>{post.title}</h1>
+		if (res.status === 200) {
+			return { post: data };
+		} else {
+			this.error(res.status, data.message);
+		}
+	}
+</script>
 
-<div class='content'>
+<script>
-	{@html post.html}
+	export let post;
-</div>
+</script>
 
 <style>
 	/*
@@ -44,19 +53,12 @@
 	}
 </style>
 
-<script>
+<svelte:head>
-	export default {
+	<title>{post.title}</title>
-		async preload({ params, query }) {
+</svelte:head>
-			// the `slug` parameter is available because
-			// this file is called [slug].html
-			const res = await this.fetch(`blog/${params.slug}.json`);
-			const data = await res.json();
 
-			if (res.status === 200) {
+<h1>{post.title}</h1>
-				return { post: data };
+
-			} else {
+<div class='content'>
-				this.error(res.status, data.message);
+	{@html post.html}
-			}
+</div>
-		}
-	};
-</script>

src/routes/blog/index.svelte

@@ -1,3 +1,22 @@
+<script context="module">
+	export function preload({ params, query }) {
+		return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
+			return { posts };
+		});
+	}
+</script>
+
+<script>
+	export let posts;
+</script>
+
+<style>
+	ul {
+		margin: 0 0 1em 0;
+		line-height: 1.5;
+	}
+</style>
+
 <svelte:head>
 	<title>Blog</title>
 </svelte:head>
@@ -13,20 +32,3 @@
 		<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
 	{/each}
 </ul>
-
-<style>
-	ul {
-		margin: 0 0 1em 0;
-		line-height: 1.5;
-	}
-</style>
-
-<script>
-	export default {
-		preload({ params, query }) {
-			return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
-				return { posts };
-			});
-		}
-	};
-</script>

src/routes/index.svelte

@@ -1,16 +1,3 @@
-<svelte:head>
-	<title>Sapper project template</title>
-</svelte:head>
-
-<h1>Great success!</h1>
-
-<figure>
-	<img alt='Borat' src='great-success.png'>
-	<figcaption>HIGH FIVE!</figcaption>
-</figure>
-
-<p><strong>Try editing this file (routes/index.html) to test live reloading.</strong></p>
-
 <style>
 	h1, figure, p {
 		text-align: center;
@@ -44,3 +31,16 @@
 		}
 	}
 </style>
+
+<svelte:head>
+	<title>Sapper project template</title>
+</svelte:head>
+
+<h1>Great success!</h1>
+
+<figure>
+	<img alt='Borat' src='great-success.png'>
+	<figcaption>HIGH FIVE!</figcaption>
+</figure>
+
+<p><strong>Try editing this file (routes/index.html) to test live reloading.</strong></p>

src/server.js

@@ -1,7 +1,7 @@
 import sirv from 'sirv';
 import polka from 'polka';
 import compression from 'compression';
-import * as sapper from '../__sapper__/server.js';
+import * as sapper from '@sapper/server';
 
 const { PORT, NODE_ENV } = process.env;
 const dev = NODE_ENV === 'development';

src/service-worker.js

@@ -1,4 +1,4 @@
-import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
+import { timestamp, files, shell, routes } from '@sapper/service-worker';
 
 const ASSETS = `cache${timestamp}`;
 

webpack.config.js

@@ -5,18 +5,18 @@ const pkg = require('./package.json');
 const mode = process.env.NODE_ENV;
 const dev = mode === 'development';
 
+const extensions = ['.mjs', '.js', '.json', '.svelte', '.html'];
+const mainFields = ['svelte', 'module', 'browser', 'main'];
+
 module.exports = {
 	client: {
 		entry: config.client.entry(),
 		output: config.client.output(),
-		resolve: {
+		resolve: { extensions, mainFields },
-			extensions: ['.js', '.json', '.html'],
-			mainFields: ['svelte', 'module', 'browser', 'main']
-		},
 		module: {
 			rules: [
 				{
-					test: /\.html$/,
+					test: /\.(svelte|html)$/,
 					use: {
 						loader: 'svelte-loader',
 						options: {
@@ -43,15 +43,12 @@ module.exports = {
 		entry: config.server.entry(),
 		output: config.server.output(),
 		target: 'node',
-		resolve: {
+		resolve: { extensions, mainFields },
-			extensions: ['.js', '.json', '.html'],
-			mainFields: ['svelte', 'module', 'browser', 'main']
-		},
 		externals: Object.keys(pkg.dependencies).concat('encoding'),
 		module: {
 			rules: [
 				{
-					test: /\.html$/,
+					test: /\.(svelte|html)$/,
 					use: {
 						loader: 'svelte-loader',
 						options: {