update to Svelte v2

Author: Rich-Harris

package.json

@@ -24,10 +24,10 @@
     "marked": "^0.3.7",
     "node-fetch": "^2.0.0",
     "npm-run-all": "^4.1.2",
-    "sapper": "^0.10.2",
+    "sapper": "^0.11.1",
     "serve": "^6.4.10",
     "serve-static": "^1.13.1",
-    "svelte": "^1.57.1",
+    "svelte": "^2.4.4",
     "svelte-loader": "^2.3.1",
     "webpack": "^4.1.0"
   },
@@ -36,6 +36,6 @@
   },
   "devDependencies": {
     "git-branch-is": "^0.1.0",
-    "now": "^10.2.2"
+    "now": "^11.1.7"
   }
 }

routes/4xx.html

@@ -1,10 +1,10 @@
-<:Head>
+<svelte:head>
 	<title>Sapper • Military-grade progressive web apps, powered by Svelte</title>
-</:Head>
+</svelte:head>
 
 <Layout>
-	<h1>{{error.message}}</h1>
-	<p>Error code {{status}}</p>
+	<h1>{error.message}</h1>
+	<p>Error code {status}</p>
 </Layout>
 
 <style>

routes/5xx.html

@@ -1,10 +1,10 @@
-<:Head>
+<svelte:head>
 	<title>Sapper • Military-grade progressive web apps, powered by Svelte</title>
-</:Head>
+</svelte:head>
 
 <Layout>
 	<h1>Internal server error</h1>
-	<p>{{error.message}}</p>
+	<p>{error.message}</p>
 </Layout>
 
 <style>

routes/_components/GuideContents.html

@@ -1,12 +1,12 @@
 <ul class='guide-toc'>
-	{{#each $guide_contents as section}}
+	{#each $guide_contents as section}
 		<li>
-			<a class='section {{section.slug === $activeGuideSection ? "active": ""}}' href='guide#{{section.slug}}'>{{section.metadata.title}}</a>
-			{{#each section.subsections as subsection}}
-				<a class='subsection {{subsection.slug === $activeGuideSection ? "active": ""}}' href='guide#{{subsection.slug}}'>{{subsection.title}}</a>
-			{{/each}}
+			<a class='section {section.slug === $activeGuideSection ? "active": ""}' href='guide#{section.slug}'>{section.metadata.title}</a>
+			{#each section.subsections as subsection}
+				<a class='subsection {subsection.slug === $activeGuideSection ? "active": ""}' href='guide#{subsection.slug}'>{subsection.title}</a>
+			{/each}
 		</li>
-	{{/each}}
+	{/each}
 </ul>
 
 <style>

routes/_components/Layout.html

@@ -1,4 +1,4 @@
-<Nav :page/>
+<Nav {page}/>
 
 <div>
 	<slot></slot>

routes/_components/Nav.html

@@ -1,13 +1,13 @@
-<div class='{{open ? "open": "closed"}} mousecatcher' on:click='set({ open: false })'></div>
+<div class='{open ? "open": "closed"} mousecatcher' on:click='set({ open: false })'></div>
 
 <div class='container'>
-	<span class="menu-link" on:click='toggleOpen()'>{{open ? 'Close' : 'Menu'}}</span>
+	<span class="menu-link" on:click='toggleOpen()'>{open ? 'Close' : 'Menu'}</span>
 	<a href='.' class='logo'>Sapper</a>
 </div>
 
-<nav ref:nav class='{{open ? "open": "closed"}}' on:click='set({ open: false })'>
+<nav ref:nav class='{open ? "open": "closed"}' on:click='set({ open: false })'>
 	<ul class='primary'>
-		<li><a rel='prefetch' class='{{page === "guide" ? "active": ""}}' href='guide'>Guide</a></li>
+		<li><a rel='prefetch' class='{page === "guide" ? "active": ""}' href='guide'>Guide</a></li>
 		<li><a href='https://gitter.im/sveltejs/svelte'>Chat</a></li>
 		<li><a href='https://svelte.technology'>Svelte</a></li>
 		<li><a href='https://github.com/sveltejs/sapper'>GitHub</a></li>

routes/guide.html

@@ -1,19 +1,19 @@
-<:Head>
+<svelte:head>
 	<title>Learn Sapper</title>
-</:Head>
+</svelte:head>
 
 <Layout page='guide'>
 	<div ref:container class='content'>
-		{{#each sections as section}}
-			<section id='{{section.slug}}'>
+		{#each sections as section}
+			<section id='{section.slug}'>
 				<h2>
-					{{section.metadata.title}}
-					<small><a href='https://github.com/sveltejs/sapper.svelte.technology/edit/master/content/guide/{{section.file}}'>edit this section</a></small>
+					{section.metadata.title}
+					<small><a href='https://github.com/sveltejs/sapper.svelte.technology/edit/master/content/guide/{section.file}'>edit this section</a></small>
 				</h2>
 
-				{{{section.html}}}
+				{@html section.html}
 			</section>
-		{{/each}}
+		{/each}
 	</div>
 
 	<div class='sidebar'>

routes/index.html

@@ -1,6 +1,6 @@
-<:Head>
+<svelte:head>
 	<title>Sapper • Military-grade progressive web apps, powered by Svelte</title>
-</:Head>
+</svelte:head>
 
 <Layout>
 	<div class='hero'>

webpack/client.config.js

@@ -19,8 +19,6 @@ module.exports = {
 					loader: 'svelte-loader',
 					options: {
 						hydratable: true,
-						cascade: false,
-						store: true,
 						hotReload: true
 					}
 				}

webpack/server.config.js

@@ -20,8 +20,6 @@ module.exports = {
 					loader: 'svelte-loader',
 					options: {
 						css: false,
-						cascade: false,
-						store: true,
 						generate: 'ssr'
 					}
 				}