tidy up

Author: Rich Harris

content/tutorial/03-advanced-svelte/09-special-elements/09-svelte-options/README.md

@@ -8,11 +8,11 @@ We'll use the `immutable` option as an example. In this app, the `<Todo>` compon
 
 We can optimise this by telling the `<Todo>` component to expect _immutable_ data. This means that we're promising never to _mutate_ the `todo` prop, but will instead create new todo objects whenever things change.
 
-Add this to the top of the `Todo.svelte` file:
+Add this to the top of `Todo.svelte`:
 
 ```svelte
 /// file: Todo.svelte
-<svelte:options immutable={true}/>
+<svelte:options immutable={true} />
 ```
 
 > You can shorten this to `<svelte:options immutable/>` if you prefer.

content/tutorial/03-advanced-svelte/09-special-elements/09-svelte-options/app-a/src/lib/App.svelte

@@ -3,11 +3,7 @@
 
 	let todos = [
 		{ id: 1, done: true, text: 'wash the car' },
-		{
-			id: 2,
-			done: false,
-			text: 'take the dog for a walk'
-		},
+		{ id: 2, done: false, text: 'take the dog for a walk' },
 		{ id: 3, done: false, text: 'mow the lawn' }
 	];
 
@@ -29,6 +25,15 @@
 </script>
 
 <h2>Todos</h2>
-{#each todos as todo}
-	<Todo {todo} on:click={() => toggle(todo)} />
-{/each}
+<ul>
+	{#each todos as todo}
+		<li><Todo {todo} on:change={() => toggle(todo)} /></li>
+	{/each}
+</ul>
+
+<style>
+	ul {
+		list-style: none;
+		padding-left: 0.5em;
+	}
+</style>

content/tutorial/03-advanced-svelte/09-special-elements/09-svelte-options/app-a/src/lib/Todo.svelte

@@ -4,25 +4,16 @@
 
 	export let todo;
 
-	let button;
+	let label;
 
 	afterUpdate(() => {
-		flash(button);
+		flash(label);
 	});
 </script>
 
 <!-- the text will flash red whenever
      the `todo` object changes -->
-<button bind:this={button} type="button" on:click>
-	{todo.done ? '👍' : ''}
+<label bind:this={label}>
+	<input type="checkbox" checked={todo.done} on:change />
 	{todo.text}
-</button>
-
-<style>
-	button {
-		all: unset;
-		display: block;
-		cursor: pointer;
-		line-height: 1.5;
-	}
-</style>
+</label>

content/tutorial/03-advanced-svelte/09-special-elements/09-svelte-options/app-b/src/lib/Todo.svelte

@@ -1,30 +1,21 @@
-<svelte:options immutable={true} />
+<svelte:options immutable />
 
 <script>
 	import { afterUpdate } from 'svelte';
 	import flash from './flash.js';
 
 	export let todo;
 
-	let button;
+	let label;
 
 	afterUpdate(() => {
-		flash(button);
+		flash(label);
 	});
 </script>
 
 <!-- the text will flash red whenever
      the `todo` object changes -->
-<button bind:this={button} type="button" on:click>
-	{todo.done ? '👍' : ''}
+<label bind:this={label}>
+	<input type="checkbox" checked={todo.done} on:change />
 	{todo.text}
-</button>
-
-<style>
-	button {
-		all: unset;
-		display: block;
-		cursor: pointer;
-		line-height: 1.5;
-	}
-</style>
+</label>