From 39e7540beebc439f35aa378a7ab50c2c6b68157d Mon Sep 17 00:00:00 2001
From: Bashu Naimi-Roy <bashunaimiroy@gmail.com>
Date: Sun, 23 May 2021 21:08:03 -0400
Subject: [PATCH] update Keyed Each Blocks tutorial with emojis

---
 .../05-keyed-each-blocks/app-a/App.svelte     | 12 ++++----
 .../05-keyed-each-blocks/app-a/Thing.svelte   | 29 ++++++++++++-------
 .../05-keyed-each-blocks/app-b/App.svelte     | 14 ++++-----
 .../05-keyed-each-blocks/app-b/Thing.svelte   | 29 ++++++++++++-------
 .../04-logic/05-keyed-each-blocks/text.md     | 10 ++++---
 5 files changed, 57 insertions(+), 37 deletions(-)

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
index 969114428a..36a97ea1ba 100644
--- 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
@@ -2,11 +2,11 @@
 	import Thing from './Thing.svelte';
 
 	let things = [
-		{ id: 1, color: 'darkblue' },
-		{ id: 2, color: 'indigo' },
-		{ id: 3, color: 'deeppink' },
-		{ id: 4, color: 'salmon' },
-		{ id: 5, color: 'gold' }
+		{ id: 1, name: 'apple' },
+		{ id: 2, name: 'banana' },
+		{ id: 3, name: 'carrot' },
+		{ id: 4, name: 'doughnut' },
+		{ id: 5, name: 'egg' },
 	];
 
 	function handleClick() {
@@ -19,5 +19,5 @@
 </button>
 
 {#each things as thing}
-	<Thing current={thing.color}/>
+	<Thing name={thing.name}/>
 {/each}
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
index 28c3c65d05..0c1fadcc76 100644
--- 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
@@ -1,24 +1,33 @@
 <script>
-	// `current` is updated whenever the prop value changes...
-	export let current;
+	let emojis = {
+        apple: "🍎",
+        banana: "🍌",
+        carrot: "🥕",
+        doughnut: "🍩",
+        egg: "🥚"
+	}
+
+	// the name is updated whenever the prop value changes...
+	export let name;
 
-	// ...but `initial` is fixed upon initialisation
-	const initial = current;
+	// ...but the "emoji" variable is fixed upon initialisation of the component
+	const emoji = emojis[name];
 </script>
 
 <p>
-	<span style="background-color: {initial}">initial</span>
-	<span style="background-color: {current}">current</span>
+	<span>The emoji for { name } is { emoji }</span>
 </p>
 
 <style>
+	p {
+		margin: 0.8em 0;
+	}
 	span {
 		display: inline-block;
-		padding: 0.2em 0.5em;
-		margin: 0 0.2em 0.2em 0;
-		width: 4em;
+		padding: 0.2em 1em 0.3em;
 		text-align: center;
 		border-radius: 0.2em;
-		color: white;
+		vertical-align: center;
+		background-color: #FFDFD3;
 	}
 </style>
\ 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
index 37a19a67a8..0939d58b8a 100644
--- 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
@@ -2,11 +2,11 @@
 	import Thing from './Thing.svelte';
 
 	let things = [
-		{ id: 1, color: 'darkblue' },
-		{ id: 2, color: 'indigo' },
-		{ id: 3, color: 'deeppink' },
-		{ id: 4, color: 'salmon' },
-		{ id: 5, color: 'gold' }
+		{ id: 1, name: 'apple' },
+		{ id: 2, name: 'banana' },
+		{ id: 3, name: 'carrot' },
+		{ id: 4, name: 'doughnut' },
+		{ id: 5, name: 'egg' },
 	];
 
 	function handleClick() {
@@ -18,6 +18,6 @@
 	Remove first thing
 </button>
 
-{#each things as thing (thing.id)}
-	<Thing current={thing.color}/>
+{#each things as thing (thing.id) }
+	<Thing name={thing.name}/>
 {/each}
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
index 28c3c65d05..0c1fadcc76 100644
--- 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
@@ -1,24 +1,33 @@
 <script>
-	// `current` is updated whenever the prop value changes...
-	export let current;
+	let emojis = {
+        apple: "🍎",
+        banana: "🍌",
+        carrot: "🥕",
+        doughnut: "🍩",
+        egg: "🥚"
+	}
+
+	// the name is updated whenever the prop value changes...
+	export let name;
 
-	// ...but `initial` is fixed upon initialisation
-	const initial = current;
+	// ...but the "emoji" variable is fixed upon initialisation of the component
+	const emoji = emojis[name];
 </script>
 
 <p>
-	<span style="background-color: {initial}">initial</span>
-	<span style="background-color: {current}">current</span>
+	<span>The emoji for { name } is { emoji }</span>
 </p>
 
 <style>
+	p {
+		margin: 0.8em 0;
+	}
 	span {
 		display: inline-block;
-		padding: 0.2em 0.5em;
-		margin: 0 0.2em 0.2em 0;
-		width: 4em;
+		padding: 0.2em 1em 0.3em;
 		text-align: center;
 		border-radius: 0.2em;
-		color: white;
+		vertical-align: center;
+		background-color: #FFDFD3;
 	}
 </style>
\ 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
index 4affb89cd6..41801db6e2 100644
--- a/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md
+++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md
@@ -4,16 +4,18 @@ 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 thing' button a few times, and notice that it's removing `<Thing>` components from the end and updating the `color` for those that remain. Instead, we'd like to remove the first `<Thing>` component and leave the rest unaffected.
+It's easier to show why than to explain. Click the 'Remove first thing' button a few times, and notice what happens: It removes the first `<Thing>` component, but the *last* DOM node. Then it updates the `name` value in the remaining DOM nodes, but not the emoji. 
 
-To do that, we specify a unique identifier for the `each` block:
+Instead, we'd like to remove only the first `<Thing>` component and its DOM node, and leave the rest unaffected.
+
+To do that, we specify a unique identifier (or "key") for the `each` block:
 
 ```html
 {#each things as thing (thing.id)}
-	<Thing current={thing.color}/>
+	<Thing name={thing.name}/>
 {/each}
 ```
 
-The `(thing.id)` tells Svelte how to figure out what changed.
+Here, `(thing.id)` is the key, which tells Svelte how to figure out which DOM node to change when the component changes.
 
 > You can use any object as the key, as Svelte uses a `Map` internally — in other words you could do `(thing)` instead of `(thing.id)`. Using a string or number is generally safer, however, since it means identity persists without referential equality, for example when updating with fresh data from an API server.