Merge pull request #3416 from sveltejs/better-keyed-each-example

better keyed each example

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>

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>
+<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>

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}

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>
+<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>

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}

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>
+<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>