Update some content (sveltejs#70)

* add some more inline diffs

* update more content

* update more content

* simplify deferred transitions tutorial

* make filenames clickable in sidebar

* replace key block tutorial

* tweak styles

* update animate example

Author: Rich-Harris

content/tutorial/01-svelte/02-reactivity/01-reactive-assignments/README.md

@@ -4,7 +4,7 @@ title: Assignments
 
 At the heart of Svelte is a powerful system of _reactivity_ for keeping the DOM in sync with your application state — for example, in response to an event.
 
-To demonstrate it, we first need to wire up an event handler (we'll learn more about these [later](/tutorial/dom-events)). Replace line 9 with this:
+To demonstrate it, we first need to wire up an event handler (we'll learn more about these [later](/tutorial/dom-events)):
 
 ```svelte
 <button +++on:click={increment}+++>

content/tutorial/03-advanced-svelte/01-motion/01-tweens/README.md

@@ -10,9 +10,9 @@ Let's start by changing the `progress` store to a `tweened` value:
 
 ```svelte
 <script>
-	import { tweened } from 'svelte/motion';
+	import { +++tweened+++ } from 'svelte/+++motion+++';
 
-	const progress = tweened(0);
+	const progress = +++tweened+++(0);
 </script>
 ```
 
@@ -21,12 +21,12 @@ Clicking the buttons causes the progress bar to animate to its new value. It's a
 ```svelte
 <script>
 	import { tweened } from 'svelte/motion';
-	import { cubicOut } from 'svelte/easing';
+	+++import { cubicOut } from 'svelte/easing';+++
 
-	const progress = tweened(0, {
+	const progress = tweened(0, +++{
 		duration: 400,
 		easing: cubicOut
-	});
+	}+++);
 </script>
 ```
 

content/tutorial/03-advanced-svelte/01-motion/02-springs/README.md

@@ -8,23 +8,20 @@ In this example we have two stores — one representing the circle's coordinates
 
 ```svelte
 <script>
-	import { spring } from 'svelte/motion';
+	import { +++spring+++ } from 'svelte/+++motion+++';
 
-	let coords = spring({ x: 50, y: 50 });
-	let size = spring(10);
+	let coords = +++spring+++({ x: 50, y: 50 });
+	let size = +++spring+++(10);
 </script>
 ```
 
 Both springs have default `stiffness` and `damping` values, which control the spring's, well... springiness. We can specify our own initial values:
 
 ```js
-let coords = spring(
-	{ x: 50, y: 50 },
-	{
-		stiffness: 0.1,
-		damping: 0.25
-	}
-);
+let coords = spring({ x: 50, y: 50 }, +++{
+	stiffness: 0.1,
+	damping: 0.25
+}+++);
 ```
 
 Waggle your mouse around, and try dragging the sliders to get a feel for how they affect the spring's behaviour. Notice that you can adjust the values while the spring is still in motion.

content/tutorial/03-advanced-svelte/01-motion/02-springs/app-b/src/lib/App.svelte

@@ -1,13 +1,10 @@
 <script>
 	import { spring } from 'svelte/motion';
 
-	let coords = spring(
-		{ x: 50, y: 50 },
-		{
-			stiffness: 0.1,
-			damping: 0.25
-		}
-	);
+	let coords = spring({ x: 50, y: 50 }, {
+		stiffness: 0.1,
+		damping: 0.25
+	});
 
 	let size = spring(10);
 </script>

content/tutorial/03-advanced-svelte/02-transitions/01-transition/README.md

@@ -8,13 +8,13 @@ First, import the `fade` function from `svelte/transition`...
 
 ```svelte
 <script>
-	import { fade } from 'svelte/transition';
+	+++import { fade } from 'svelte/transition';+++
 	let visible = true;
 </script>
 ```
 
 ...then add it to the `<p>` element:
 
 ```svelte
-<p transition:fade>Fades in and out</p>
+<p +++transition:fade+++>Fades in and out</p>
 ```

content/tutorial/03-advanced-svelte/02-transitions/02-adding-parameters-to-transitions/README.md

@@ -6,16 +6,16 @@ Transition functions can accept parameters. Replace the `fade` transition with `
 
 ```svelte
 <script>
-	import { fly } from 'svelte/transition';
+	import { +++fly+++ } from 'svelte/transition';
 	let visible = true;
 </script>
 ```
 
 ...and apply it to the `<p>` along with some options:
 
 ```svelte
-<p transition:fly="{{ y: 200, duration: 2000 }}">
-	Flies in and out
+<p transition:+++fly={{ y: 200, duration: 2000 }}+++>
+	+++Flies+++ in and out
 </p>
 ```
 

content/tutorial/03-advanced-svelte/02-transitions/03-in-and-out/README.md

@@ -5,14 +5,14 @@ title: In and out
 Instead of the `transition` directive, an element can have an `in` or an `out` directive, or both together. Import `fade` alongside `fly`...
 
 ```js
-import { fade, fly } from 'svelte/transition';
+import { +++fade+++, fly } from 'svelte/transition';
 ```
 
 ...then replace the `transition` directive with separate `in` and `out` directives:
 
 ```svelte
-<p in:fly="{{ y: 200, duration: 2000 }}" out:fade>
-	Flies in, fades out
+<p +++in+++:fly={{ y: 200, duration: 2000 }} +++out:fade+++>
+	Flies in, +++fades out+++
 </p>
 ```
 

content/tutorial/03-advanced-svelte/02-transitions/04-custom-css-transitions/README.md

@@ -51,14 +51,14 @@ We can get a lot more creative though. Let's make something truly gratuitous:
 ```svelte
 <script>
 	import { fade } from 'svelte/transition';
-	import { elasticOut } from 'svelte/easing';
+	+++import { elasticOut } from 'svelte/easing';+++
 
 	let visible = true;
 
 	function spin(node, { duration }) {
 		return {
 			duration,
-			css: t => {
+			css: t => +++{
 				const eased = elasticOut(t);
 
 				return `
@@ -68,7 +68,7 @@ We can get a lot more creative though. Let's make something truly gratuitous:
 						${Math.min(100, 1000 - 1000 * t)}%,
 						${Math.min(50, 500 - 500 * t)}%
 					);`
-			}
+			}+++
 		};
 	}
 </script>

content/tutorial/03-advanced-svelte/02-transitions/04-custom-css-transitions/app-b/src/lib/App.svelte

@@ -11,9 +11,7 @@
 				const eased = elasticOut(t);
 
 				return `
-					transform: scale(${eased}) rotate(${
-					eased * 1080
-				}deg);
+					transform: scale(${eased}) rotate(${eased * 1080}deg);
 					color: hsl(
 						${Math.trunc(t * 360)},
 						${Math.min(100, 1000 - 1000 * t)}%,

content/tutorial/03-advanced-svelte/02-transitions/05-custom-js-transitions/README.md

@@ -12,7 +12,7 @@ function typewriter(node, { speed = 1 }) {
 		throw new Error(`This transition only works on elements with a single text node child`);
 	}
 
-	const text = node.textContent;
+	+++const text = node.textContent;
 	const duration = text.length / (speed * 0.01);
 
 	return {
@@ -21,6 +21,6 @@ function typewriter(node, { speed = 1 }) {
 			const i = Math.trunc(text.length * t);
 			node.textContent = text.slice(0, i);
 		}
-	};
+	};+++
 }
 ```

content/tutorial/03-advanced-svelte/02-transitions/05-custom-js-transitions/app-a/src/lib/App.svelte

@@ -1,8 +1,12 @@
 <script>
 	let visible = false;
 
-	function typewriter(node, { speed = 50 }) {
-		// implementation goes here
+	function typewriter(node, { speed = 1 }) {
+		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
+
+		if (!valid) {
+			throw new Error(`This transition only works on elements with a single text node child`);
+		}
 
 		return {};
 	}

content/tutorial/03-advanced-svelte/02-transitions/05-custom-js-transitions/app-b/src/lib/App.svelte

@@ -2,15 +2,10 @@
 	let visible = false;
 
 	function typewriter(node, { speed = 1 }) {
-		const valid =
-			node.childNodes.length === 1 &&
-			node.childNodes[0].nodeType ===
-				Node.TEXT_NODE;
+		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
 
 		if (!valid) {
-			throw new Error(
-				`This transition only works on elements with a single text node child`
-			);
+			throw new Error(`This transition only works on elements with a single text node child`);
 		}
 
 		const text = node.textContent;

content/tutorial/03-advanced-svelte/02-transitions/06-transition-events/README.md

@@ -6,11 +6,11 @@ It can be useful to know when transitions are beginning and ending. Svelte dispa
 
 ```svelte
 <p
-	transition:fly="{{ y: 200, duration: 2000 }}"
-	on:introstart="{() => status = 'intro started'}"
-	on:outrostart="{() => status = 'outro started'}"
-	on:introend="{() => status = 'intro ended'}"
-	on:outroend="{() => status = 'outro ended'}"
+	transition:fly={{ y: 200, duration: 2000 }}
+	+++on:introstart={() => status = 'intro started'}
+	on:outrostart={() => status = 'outro started'}
+	on:introend={() => status = 'intro ended'}
+	on:outroend={() => status = 'outro ended'}+++
 >
 	Flies in and out
 </p>

content/tutorial/03-advanced-svelte/02-transitions/07-local-transitions/README.md

@@ -9,7 +9,7 @@ Instead, we'd like transitions to play only when individual items are added and
 We can achieve this with a _local_ transition, which only plays when the block with the transition itself is added or removed:
 
 ```svelte
-<div transition:slide|local>
+<div transition:slide+++|local+++>
 	{item}
 </div>
 ```

content/tutorial/03-advanced-svelte/02-transitions/07-local-transitions/app-a/src/lib/App.svelte

@@ -3,25 +3,11 @@
 
 	let showItems = true;
 	let i = 5;
-	let items = [
-		'one',
-		'two',
-		'three',
-		'four',
-		'five',
-		'six',
-		'seven',
-		'eight',
-		'nine',
-		'ten'
-	];
+	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
 </script>
 
 <label>
-	<input
-		type="checkbox"
-		bind:checked={showItems}
-	/>
+	<input type="checkbox" bind:checked={showItems} />
 	show list
 </label>
 

content/tutorial/03-advanced-svelte/02-transitions/07-local-transitions/app-b/src/lib/App.svelte

@@ -3,25 +3,11 @@
 
 	let showItems = true;
 	let i = 5;
-	let items = [
-		'one',
-		'two',
-		'three',
-		'four',
-		'five',
-		'six',
-		'seven',
-		'eight',
-		'nine',
-		'ten'
-	];
+	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
 </script>
 
 <label>
-	<input
-		type="checkbox"
-		bind:checked={showItems}
-	/>
+	<input type="checkbox" bind:checked={showItems} />
 	show list
 </label>