From 383d441b833dafd724042042e0ba2d88771fd936 Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Fri, 16 Aug 2019 14:00:06 -0400
Subject: [PATCH] better keyed each example

---
 .../03-logic/04-keyed-each-blocks/App.svelte  | 14 +++++------
 .../04-keyed-each-blocks/Thing.svelte         | 25 +++++++++++++++----
 .../05-keyed-each-blocks/app-a/App.svelte     | 12 ++++-----
 .../05-keyed-each-blocks/app-a/Thing.svelte   | 25 +++++++++++++++----
 .../05-keyed-each-blocks/app-b/App.svelte     | 12 ++++-----
 .../05-keyed-each-blocks/app-b/Thing.svelte   | 25 +++++++++++++++----
 6 files changed, 79 insertions(+), 34 deletions(-)

diff --git a/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte b/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte
index 5cd279d7a7..cd12eed954 100644
--- a/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte
+++ b/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte
@@ -2,11 +2,11 @@
 	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' }
+		{ id: 1, color: '#0d0887' },
+		{ id: 2, color: '#6a00a8' },
+		{ id: 3, color: '#b12a90' },
+		{ id: 4, color: '#e16462' },
+		{ id: 5, color: '#fca636' }
 	];
 
 	function handleClick() {
@@ -22,14 +22,14 @@
 	<div>
 		<h2>Keyed</h2>
 		{#each things as thing (thing.id)}
-			<Thing value={thing.value}/>
+			<Thing current={thing.color}/>
 		{/each}
 	</div>
 
 	<div>
 		<h2>Unkeyed</h2>
 		{#each things as thing}
-			<Thing value={thing.value}/>
+			<Thing current={thing.color}/>
 		{/each}
 	</div>
 </div>
\ No newline at end of file
diff --git a/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte b/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte
index 4e86d32109..28c3c65d05 100644
--- a/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte
+++ b/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte
@@ -1,9 +1,24 @@
 <script>
-	// `value` is updated whenever the prop value changes...
-	export let value;
+	// `current` is updated whenever the prop value changes...
+	export let current;
 
-	// ...but `valueAtStart` is fixed upon initialisation
-	const valueAtStart = value;
+	// ...but `initial` is fixed upon initialisation
+	const initial = current;
 </script>
 
-<p>{valueAtStart} / {value}</p>
\ No newline at end of file
+<p>
+	<span style="background-color: {initial}">initial</span>
+	<span style="background-color: {current}">current</span>
+</p>
+
+<style>
+	span {
+		display: inline-block;
+		padding: 0.2em 0.5em;
+		margin: 0 0.2em 0.2em 0;
+		width: 4em;
+		text-align: center;
+		border-radius: 0.2em;
+		color: white;
+	}
+</style>
\ 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
index 3d4a2c801d..7cb18e2cda 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, value: 'a' },
-		{ id: 2, value: 'b' },
-		{ id: 3, value: 'c' },
-		{ id: 4, value: 'd' },
-		{ id: 5, value: 'e' }
+		{ id: 1, color: '#0d0887' },
+		{ id: 2, color: '#6a00a8' },
+		{ id: 3, color: '#b12a90' },
+		{ id: 4, color: '#e16462' },
+		{ id: 5, color: '#fca636' }
 	];
 
 	function handleClick() {
@@ -19,5 +19,5 @@
 </button>
 
 {#each things as thing}
-	<Thing value={thing.value}/>
+	<Thing current={thing.color}/>
 {/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
index 4e86d32109..28c3c65d05 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,9 +1,24 @@
 <script>
-	// `value` is updated whenever the prop value changes...
-	export let value;
+	// `current` is updated whenever the prop value changes...
+	export let current;
 
-	// ...but `valueAtStart` is fixed upon initialisation
-	const valueAtStart = value;
+	// ...but `initial` is fixed upon initialisation
+	const initial = current;
 </script>
 
-<p>{valueAtStart} / {value}</p>
\ No newline at end of file
+<p>
+	<span style="background-color: {initial}">initial</span>
+	<span style="background-color: {current}">current</span>
+</p>
+
+<style>
+	span {
+		display: inline-block;
+		padding: 0.2em 0.5em;
+		margin: 0 0.2em 0.2em 0;
+		width: 4em;
+		text-align: center;
+		border-radius: 0.2em;
+		color: white;
+	}
+</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 73a2dcc609..48a2151875 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, value: 'a' },
-		{ id: 2, value: 'b' },
-		{ id: 3, value: 'c' },
-		{ id: 4, value: 'd' },
-		{ id: 5, value: 'e' }
+		{ id: 1, color: '#0d0887' },
+		{ id: 2, color: '#6a00a8' },
+		{ id: 3, color: '#b12a90' },
+		{ id: 4, color: '#e16462' },
+		{ id: 5, color: '#fca636' }
 	];
 
 	function handleClick() {
@@ -19,5 +19,5 @@
 </button>
 
 {#each things as thing (thing.id)}
-	<Thing value={thing.value}/>
+	<Thing current={thing.color}/>
 {/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
index 4e86d32109..28c3c65d05 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,9 +1,24 @@
 <script>
-	// `value` is updated whenever the prop value changes...
-	export let value;
+	// `current` is updated whenever the prop value changes...
+	export let current;
 
-	// ...but `valueAtStart` is fixed upon initialisation
-	const valueAtStart = value;
+	// ...but `initial` is fixed upon initialisation
+	const initial = current;
 </script>
 
-<p>{valueAtStart} / {value}</p>
\ No newline at end of file
+<p>
+	<span style="background-color: {initial}">initial</span>
+	<span style="background-color: {current}">current</span>
+</p>
+
+<style>
+	span {
+		display: inline-block;
+		padding: 0.2em 0.5em;
+		margin: 0 0.2em 0.2em 0;
+		width: 4em;
+		text-align: center;
+		border-radius: 0.2em;
+		color: white;
+	}
+</style>
\ No newline at end of file