From ffb5c16094f397f32725443a471c6ab5e925775f Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Sat, 9 Mar 2019 09:09:43 -0500
Subject: [PATCH] swap order of logic and props, add keyed each blocks chapter

---
 .../01-declaring-props/app-a/App.svelte       |  0
 .../01-declaring-props/app-a/Nested.svelte    |  0
 .../01-declaring-props/app-b/App.svelte       |  0
 .../01-declaring-props/app-b/Nested.svelte    |  0
 .../01-declaring-props/text.md                |  0
 .../02-default-values/app-a/App.svelte        |  0
 .../02-default-values/app-a/Nested.svelte     |  0
 .../02-default-values/app-b/App.svelte        |  0
 .../02-default-values/app-b/Nested.svelte     |  0
 .../02-default-values/text.md                 |  0
 .../tutorial/{04-props => 03-props}/meta.json |  0
 .../01-if-blocks/app-a/App.svelte             |  0
 .../01-if-blocks/app-b/App.svelte             |  0
 .../01-if-blocks/text.md                      |  0
 .../02-else-blocks/app-a/App.svelte           |  0
 .../02-else-blocks/app-b/App.svelte           |  0
 .../02-else-blocks/text.md                    |  0
 .../03-else-if-blocks/app-a/App.svelte        |  0
 .../03-else-if-blocks/app-b/App.svelte        |  0
 .../03-else-if-blocks/text.md                 |  0
 .../04-each-blocks/app-a/App.svelte           |  4 +++-
 .../04-each-blocks/app-b/App.svelte           |  6 +++--
 .../04-each-blocks/text.md                    | 16 ++++++++++---
 .../05-keyed-each-blocks/app-a/App.svelte     | 23 +++++++++++++++++++
 .../05-keyed-each-blocks/app-a/Thing.svelte   |  9 ++++++++
 .../05-keyed-each-blocks/app-b/App.svelte     | 23 +++++++++++++++++++
 .../05-keyed-each-blocks/app-b/Thing.svelte   |  9 ++++++++
 .../04-logic/05-keyed-each-blocks/text.md     | 17 ++++++++++++++
 .../tutorial/{03-logic => 04-logic}/meta.json |  0
 .../tutorial/05-events/01-dom-events/text.md  |  2 +-
 site/content/tutorial/99-todo/99-todo/text.md |  5 +---
 31 files changed, 103 insertions(+), 11 deletions(-)
 rename site/content/tutorial/{04-props => 03-props}/01-declaring-props/app-a/App.svelte (100%)
 rename site/content/tutorial/{04-props => 03-props}/01-declaring-props/app-a/Nested.svelte (100%)
 rename site/content/tutorial/{04-props => 03-props}/01-declaring-props/app-b/App.svelte (100%)
 rename site/content/tutorial/{04-props => 03-props}/01-declaring-props/app-b/Nested.svelte (100%)
 rename site/content/tutorial/{04-props => 03-props}/01-declaring-props/text.md (100%)
 rename site/content/tutorial/{04-props => 03-props}/02-default-values/app-a/App.svelte (100%)
 rename site/content/tutorial/{04-props => 03-props}/02-default-values/app-a/Nested.svelte (100%)
 rename site/content/tutorial/{04-props => 03-props}/02-default-values/app-b/App.svelte (100%)
 rename site/content/tutorial/{04-props => 03-props}/02-default-values/app-b/Nested.svelte (100%)
 rename site/content/tutorial/{04-props => 03-props}/02-default-values/text.md (100%)
 rename site/content/tutorial/{04-props => 03-props}/meta.json (100%)
 rename site/content/tutorial/{03-logic => 04-logic}/01-if-blocks/app-a/App.svelte (100%)
 rename site/content/tutorial/{03-logic => 04-logic}/01-if-blocks/app-b/App.svelte (100%)
 rename site/content/tutorial/{03-logic => 04-logic}/01-if-blocks/text.md (100%)
 rename site/content/tutorial/{03-logic => 04-logic}/02-else-blocks/app-a/App.svelte (100%)
 rename site/content/tutorial/{03-logic => 04-logic}/02-else-blocks/app-b/App.svelte (100%)
 rename site/content/tutorial/{03-logic => 04-logic}/02-else-blocks/text.md (100%)
 rename site/content/tutorial/{03-logic => 04-logic}/03-else-if-blocks/app-a/App.svelte (100%)
 rename site/content/tutorial/{03-logic => 04-logic}/03-else-if-blocks/app-b/App.svelte (100%)
 rename site/content/tutorial/{03-logic => 04-logic}/03-else-if-blocks/text.md (100%)
 rename site/content/tutorial/{03-logic => 04-logic}/04-each-blocks/app-a/App.svelte (89%)
 rename site/content/tutorial/{03-logic => 04-logic}/04-each-blocks/app-b/App.svelte (79%)
 rename site/content/tutorial/{03-logic => 04-logic}/04-each-blocks/text.md (66%)
 create mode 100644 site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte
 create mode 100644 site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte
 create mode 100644 site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte
 create mode 100644 site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte
 create mode 100644 site/content/tutorial/04-logic/05-keyed-each-blocks/text.md
 rename site/content/tutorial/{03-logic => 04-logic}/meta.json (100%)

diff --git a/site/content/tutorial/04-props/01-declaring-props/app-a/App.svelte b/site/content/tutorial/03-props/01-declaring-props/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/04-props/01-declaring-props/app-a/App.svelte
rename to site/content/tutorial/03-props/01-declaring-props/app-a/App.svelte
diff --git a/site/content/tutorial/04-props/01-declaring-props/app-a/Nested.svelte b/site/content/tutorial/03-props/01-declaring-props/app-a/Nested.svelte
similarity index 100%
rename from site/content/tutorial/04-props/01-declaring-props/app-a/Nested.svelte
rename to site/content/tutorial/03-props/01-declaring-props/app-a/Nested.svelte
diff --git a/site/content/tutorial/04-props/01-declaring-props/app-b/App.svelte b/site/content/tutorial/03-props/01-declaring-props/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/04-props/01-declaring-props/app-b/App.svelte
rename to site/content/tutorial/03-props/01-declaring-props/app-b/App.svelte
diff --git a/site/content/tutorial/04-props/01-declaring-props/app-b/Nested.svelte b/site/content/tutorial/03-props/01-declaring-props/app-b/Nested.svelte
similarity index 100%
rename from site/content/tutorial/04-props/01-declaring-props/app-b/Nested.svelte
rename to site/content/tutorial/03-props/01-declaring-props/app-b/Nested.svelte
diff --git a/site/content/tutorial/04-props/01-declaring-props/text.md b/site/content/tutorial/03-props/01-declaring-props/text.md
similarity index 100%
rename from site/content/tutorial/04-props/01-declaring-props/text.md
rename to site/content/tutorial/03-props/01-declaring-props/text.md
diff --git a/site/content/tutorial/04-props/02-default-values/app-a/App.svelte b/site/content/tutorial/03-props/02-default-values/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/04-props/02-default-values/app-a/App.svelte
rename to site/content/tutorial/03-props/02-default-values/app-a/App.svelte
diff --git a/site/content/tutorial/04-props/02-default-values/app-a/Nested.svelte b/site/content/tutorial/03-props/02-default-values/app-a/Nested.svelte
similarity index 100%
rename from site/content/tutorial/04-props/02-default-values/app-a/Nested.svelte
rename to site/content/tutorial/03-props/02-default-values/app-a/Nested.svelte
diff --git a/site/content/tutorial/04-props/02-default-values/app-b/App.svelte b/site/content/tutorial/03-props/02-default-values/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/04-props/02-default-values/app-b/App.svelte
rename to site/content/tutorial/03-props/02-default-values/app-b/App.svelte
diff --git a/site/content/tutorial/04-props/02-default-values/app-b/Nested.svelte b/site/content/tutorial/03-props/02-default-values/app-b/Nested.svelte
similarity index 100%
rename from site/content/tutorial/04-props/02-default-values/app-b/Nested.svelte
rename to site/content/tutorial/03-props/02-default-values/app-b/Nested.svelte
diff --git a/site/content/tutorial/04-props/02-default-values/text.md b/site/content/tutorial/03-props/02-default-values/text.md
similarity index 100%
rename from site/content/tutorial/04-props/02-default-values/text.md
rename to site/content/tutorial/03-props/02-default-values/text.md
diff --git a/site/content/tutorial/04-props/meta.json b/site/content/tutorial/03-props/meta.json
similarity index 100%
rename from site/content/tutorial/04-props/meta.json
rename to site/content/tutorial/03-props/meta.json
diff --git a/site/content/tutorial/03-logic/01-if-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/01-if-blocks/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/03-logic/01-if-blocks/app-a/App.svelte
rename to site/content/tutorial/04-logic/01-if-blocks/app-a/App.svelte
diff --git a/site/content/tutorial/03-logic/01-if-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/01-if-blocks/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/03-logic/01-if-blocks/app-b/App.svelte
rename to site/content/tutorial/04-logic/01-if-blocks/app-b/App.svelte
diff --git a/site/content/tutorial/03-logic/01-if-blocks/text.md b/site/content/tutorial/04-logic/01-if-blocks/text.md
similarity index 100%
rename from site/content/tutorial/03-logic/01-if-blocks/text.md
rename to site/content/tutorial/04-logic/01-if-blocks/text.md
diff --git a/site/content/tutorial/03-logic/02-else-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/02-else-blocks/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/03-logic/02-else-blocks/app-a/App.svelte
rename to site/content/tutorial/04-logic/02-else-blocks/app-a/App.svelte
diff --git a/site/content/tutorial/03-logic/02-else-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/02-else-blocks/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/03-logic/02-else-blocks/app-b/App.svelte
rename to site/content/tutorial/04-logic/02-else-blocks/app-b/App.svelte
diff --git a/site/content/tutorial/03-logic/02-else-blocks/text.md b/site/content/tutorial/04-logic/02-else-blocks/text.md
similarity index 100%
rename from site/content/tutorial/03-logic/02-else-blocks/text.md
rename to site/content/tutorial/04-logic/02-else-blocks/text.md
diff --git a/site/content/tutorial/03-logic/03-else-if-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/03-logic/03-else-if-blocks/app-a/App.svelte
rename to site/content/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte
diff --git a/site/content/tutorial/03-logic/03-else-if-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/03-logic/03-else-if-blocks/app-b/App.svelte
rename to site/content/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte
diff --git a/site/content/tutorial/03-logic/03-else-if-blocks/text.md b/site/content/tutorial/04-logic/03-else-if-blocks/text.md
similarity index 100%
rename from site/content/tutorial/03-logic/03-else-if-blocks/text.md
rename to site/content/tutorial/04-logic/03-else-if-blocks/text.md
diff --git a/site/content/tutorial/03-logic/04-each-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte
similarity index 89%
rename from site/content/tutorial/03-logic/04-each-blocks/app-a/App.svelte
rename to site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte
index ff625c899f..34fb2cebfc 100644
--- a/site/content/tutorial/03-logic/04-each-blocks/app-a/App.svelte
+++ b/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte
@@ -10,6 +10,8 @@
 
 <ul>
 	<!-- open each block -->
-		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">{cat.name}</a></li>
+		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
+			{cat.name}
+		</a></li>
 	<!-- close each block -->
 </ul>
\ No newline at end of file
diff --git a/site/content/tutorial/03-logic/04-each-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte
similarity index 79%
rename from site/content/tutorial/03-logic/04-each-blocks/app-b/App.svelte
rename to site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte
index 61dda5f5a8..6ea5097be2 100644
--- a/site/content/tutorial/03-logic/04-each-blocks/app-b/App.svelte
+++ b/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte
@@ -9,7 +9,9 @@
 <h1>The Famous Cats of YouTube</h1>
 
 <ul>
-	{#each cats as { id, name }}
-		<li><a target="_blank" href="https://www.youtube.com/watch?v={id}">{name}</a></li>
+	{#each cats as { id, name }, i}
+		<li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
+			{i + 1}: {name}
+		</a></li>
 	{/each}
 </ul>
\ No newline at end of file
diff --git a/site/content/tutorial/03-logic/04-each-blocks/text.md b/site/content/tutorial/04-logic/04-each-blocks/text.md
similarity index 66%
rename from site/content/tutorial/03-logic/04-each-blocks/text.md
rename to site/content/tutorial/04-logic/04-each-blocks/text.md
index e5aa9b16db..886990f5a0 100644
--- a/site/content/tutorial/03-logic/04-each-blocks/text.md
+++ b/site/content/tutorial/04-logic/04-each-blocks/text.md
@@ -7,13 +7,23 @@ If you need to loop over lists of data, use an `each` block:
 ```html
 <ul>
 	{#each cats as cat}
-		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">{cat.name}</a></li>
+		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
+			{cat.name}
+		</a></li>
 	{/each}
 </ul>
 ```
 
 > The expression (`cats`, in this case) can be any array or array-like object (i.e. it has a `length` property). You can loop over generic iterables with `each [...iterable]`.
 
-If you prefer, you can use destructuring — `each cats as { id, name }` — and replace `cat.id` and `cat.name` with `id` and `name`.
+You can get the current *index* as a second argument, like so:
 
-> In some cases, you will need to use *keyed each blocks*. We'll learn about those [later](tutorial/keyed-each-blocks).
\ No newline at end of file
+```html
+{#each cats as cat, i}
+	<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
+		{i + 1}: {cat.name}
+	</a></li>
+{/each}
+```
+
+If you prefer, you can use destructuring — `each cats as { id, name }` — and replace `cat.id` and `cat.name` with `id` and `name`.
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte
new file mode 100644
index 0000000000..3d4a2c801d
--- /dev/null
+++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte
@@ -0,0 +1,23 @@
+<script>
+	import Thing from './Thing.svelte';
+
+	let things = [
+		{ id: 1, value: 'a' },
+		{ id: 2, value: 'b' },
+		{ id: 3, value: 'c' },
+		{ id: 4, value: 'd' },
+		{ id: 5, value: 'e' }
+	];
+
+	function handleClick() {
+		things = things.slice(1);
+	}
+</script>
+
+<button on:click={handleClick}>
+	Remove first thing
+</button>
+
+{#each things as thing}
+	<Thing value={thing.value}/>
+{/each}
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte
new file mode 100644
index 0000000000..4e86d32109
--- /dev/null
+++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte
@@ -0,0 +1,9 @@
+<script>
+	// `value` is updated whenever the prop value changes...
+	export let value;
+
+	// ...but `valueAtStart` is fixed upon initialisation
+	const valueAtStart = value;
+</script>
+
+<p>{valueAtStart} / {value}</p>
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte
new file mode 100644
index 0000000000..73a2dcc609
--- /dev/null
+++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte
@@ -0,0 +1,23 @@
+<script>
+	import Thing from './Thing.svelte';
+
+	let things = [
+		{ id: 1, value: 'a' },
+		{ id: 2, value: 'b' },
+		{ id: 3, value: 'c' },
+		{ id: 4, value: 'd' },
+		{ id: 5, value: 'e' }
+	];
+
+	function handleClick() {
+		things = things.slice(1);
+	}
+</script>
+
+<button on:click={handleClick}>
+	Remove first thing
+</button>
+
+{#each things as thing (thing.id)}
+	<Thing value={thing.value}/>
+{/each}
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte
new file mode 100644
index 0000000000..4e86d32109
--- /dev/null
+++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte
@@ -0,0 +1,9 @@
+<script>
+	// `value` is updated whenever the prop value changes...
+	export let value;
+
+	// ...but `valueAtStart` is fixed upon initialisation
+	const valueAtStart = value;
+</script>
+
+<p>{valueAtStart} / {value}</p>
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md b/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md
new file mode 100644
index 0000000000..d0dec628b6
--- /dev/null
+++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md
@@ -0,0 +1,17 @@
+---
+title: Keyed each blocks
+---
+
+By default, when you modify the value of an `each` block, it will add and remove items at the *end* of the block, and update any values that have changed. That might not be what you want.
+
+It's easier to show why than to explain. Click the 'Remove first item' button a few times, and notice that it's removing `<Thing>` components from the end and updating the `value` for those that remain. Instead, we'd like to remove the first `<Thing>` component and leave the rest unaffected.
+
+To do that, we specify a unique identifier for the `each` block:
+
+```html
+{#each things as thing (thing.id)}
+	<Thing value={thing.value}/>
+{/each}
+```
+
+The `(thing.id)` tells Svelte how to figure out what changed.
\ No newline at end of file
diff --git a/site/content/tutorial/03-logic/meta.json b/site/content/tutorial/04-logic/meta.json
similarity index 100%
rename from site/content/tutorial/03-logic/meta.json
rename to site/content/tutorial/04-logic/meta.json
diff --git a/site/content/tutorial/05-events/01-dom-events/text.md b/site/content/tutorial/05-events/01-dom-events/text.md
index b8a4cf0332..1c08c9159a 100644
--- a/site/content/tutorial/05-events/01-dom-events/text.md
+++ b/site/content/tutorial/05-events/01-dom-events/text.md
@@ -2,7 +2,7 @@
 title: DOM events
 ---
 
-As we briefly saw in an [earlier chapter](tutorial/reactive-assignments), you can listen to any event on an element with the `on:` directive:
+As we've briefly seen already, you can listen to any event on an element with the `on:` directive:
 
 ```html
 <div on:mousemove={handleMousemove}>
diff --git a/site/content/tutorial/99-todo/99-todo/text.md b/site/content/tutorial/99-todo/99-todo/text.md
index b7c65bb034..31baf93c8c 100644
--- a/site/content/tutorial/99-todo/99-todo/text.md
+++ b/site/content/tutorial/99-todo/99-todo/text.md
@@ -42,12 +42,10 @@ Another one should cover how to set up an editor for syntax highlighting.
 * [x] If blocks
 * [x] Else/elseif blocks
 * [x] Each blocks
+* [x] Keyed each blocks
 * [ ] Await blocks
 
 
-* [ ] Keyed each blocks (maybe? kind of need to cover transitions before we can make this obvious)
-
-
 ## Props
 
 * [x] `export let foo`
@@ -153,7 +151,6 @@ Maybe lifecycle should go first, since we're using `onMount` in the `this` demo?
 
 ## Miscellaneous
 
-* [ ] Keyed each blocks
 * [ ] Debug tags
 * [ ] `context="module"`
 * [ ] `tick`