update svelte:options tutorial chapter, remove example

site/content/examples/16-special-elements/06-svelte-options/App.svelte

@@ -1,14 +0,0 @@
-<script>
-	import Square from './Square.svelte';
-</script>
-
-<style>
-	svg {
-		width: 100%;
-		height: 100%;
-	}
-</style>
-
-<svg viewBox="0 0 100 100">
-	<Square cx={50} cy={50} size={40} style="fill: #ff3e00"/>
-</svg>

site/content/examples/16-special-elements/06-svelte-options/Square.svelte

@@ -1,15 +0,0 @@
-<svelte:options namespace="svg"/>
-
-<script>
-	export let cx;
-	export let cy;
-	export let size;
-	export let style;
-
-	$: x1 = cx - size / 2;
-	$: y1 = cy - size / 2;
-	$: x2 = x1 + size;
-	$: y2 = y1 + size;
-</script>
-
-<polygon points="{x1},{y1} {x2},{y1} {x2},{y2} {x1},{y2}" {style}/>

site/content/examples/16-special-elements/06-svelte-options/meta.json

@@ -1,3 +0,0 @@
-{
-	"title": "<svelte:options>"
-}

site/content/examples/20-miscellaneous/02-immutable-data/App.svelte

@@ -29,16 +29,10 @@
 
 <h2>Immutable</h2>
 {#each todos as todo}
-	<label on:click="{() => toggle(todo.id)}">
+	<ImmutableTodo {todo} on:click="{() => toggle(todo.id)}"/>
-		<span>{todo.done ? "😎": "🙁"}</span>
-		<ImmutableTodo {todo}/>
-	</label>
 {/each}
 
 <h2>Mutable</h2>
 {#each todos as todo}
-	<label on:click="{() => toggle(todo.id)}">
+	<MutableTodo {todo} on:click="{() => toggle(todo.id)}"/>
-		<span>{todo.done ? "😎": "🙁"}</span>
-		<MutableTodo {todo}/>
-	</label>
 {/each}

site/content/examples/20-miscellaneous/02-immutable-data/ImmutableTodo.svelte

@@ -5,11 +5,24 @@
 	import flash from './flash.js';
 
 	export let todo;
-	let span;
+	export let toggle;
 
-	flash(() => span);
+	let div;
+
+	afterUpdate(() => {
+		flash(div);
+	});
 </script>
 
+<style>
+	div {
+		cursor: pointer;
+		line-height: 1.5;
+	}
+</style>
+
 <!-- the text will flash red whenever
 		the `todo` object changes -->
-<span bind:this={span}>{todo.text}</span>
+<div bind:this={div} on:click>
+	{todo.done ? '👍': ''} {todo.text}
+</div>

site/content/examples/20-miscellaneous/02-immutable-data/MutableTodo.svelte

@@ -3,11 +3,24 @@
 	import flash from './flash.js';
 
 	export let todo;
-	let span;
+	export let toggle;
 
-	flash(() => span);
+	let div;
+
+	afterUpdate(() => {
+		flash(div);
+	});
 </script>
 
+<style>
+	div {
+		cursor: pointer;
+		line-height: 1.5;
+	}
+</style>
+
 <!-- the text will flash red whenever
 		the `todo` object changes -->
-<span bind:this={span}>{todo.text}</span>
+<div bind:this={div} on:click>
+	{todo.done ? '👍': ''} {todo.text}
+</div>

site/content/examples/20-miscellaneous/02-immutable-data/flash.js

@@ -1,13 +1,11 @@
-import { afterUpdate } from 'svelte';
+export default function flash(element) {
-
+	element.style.transition = 'none';
-export default function flash(fn) {
+	element.style.color = 'rgba(255,62,0,1)';
-	afterUpdate(() => {
+	element.style.backgroundColor = 'rgba(255,62,0,0.2)';
-		const span = fn();
-
-		span.style.color = 'red';
 
 	setTimeout(() => {
-			span.style.color = 'black';
+		element.style.transition = 'color 1s, background 1s';
-		}, 400);
+		element.style.color = '';
+		element.style.backgroundColor = '';
 	});
 }

site/content/tutorial/16-special-elements/07-svelte-options/app-a/App.svelte

@@ -1,14 +1,30 @@
 <script>
-	import Square from './Square.svelte';
+	import Todo from './Todo.svelte';
-</script>
+
+	let todos = [
+		{ id: 1, done: true, text: 'wash the car' },
+		{ id: 2, done: false, text: 'take the dog for a walk' },
+		{ id: 3, done: false, text: 'mow the lawn' }
+	];
 
-<style>
+	function toggle(toggled) {
-	svg {
+		todos = todos.map(todo => {
-		width: 100%;
+			if (todo === toggled) {
-		height: 100%;
+				// return a new object
+				return {
+					id: todo.id,
+					text: todo.text,
+					done: !todo.done
+				};
 			}
-</style>
 
-<svg viewBox="0 0 100 100">
+			// return the same object
-	<Square cx={50} cy={50} size={40} style="fill: #ff3e00"/>
+			return todo;
-</svg>
+		});
+	}
+</script>
+
+<h2>Todos</h2>
+{#each todos as todo}
+	<Todo {todo} on:click={() => toggle(todo)}/>
+{/each}

site/content/tutorial/16-special-elements/07-svelte-options/app-a/Square.svelte

@@ -1,13 +0,0 @@
-<script>
-	export let cx;
-	export let cy;
-	export let size;
-	export let style;
-
-	$: x1 = cx - size / 2;
-	$: y1 = cy - size / 2;
-	$: x2 = x1 + size;
-	$: y2 = y1 + size;
-</script>
-
-<polygon points="{x1},{y1} {x2},{y1} {x2},{y2} {x1},{y2}" {style}/>

site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte

@@ -0,0 +1,26 @@
+<script>
+	import { afterUpdate } from 'svelte';
+	import flash from './flash.js';
+
+	export let todo;
+	export let toggle;
+
+	let div;
+
+	afterUpdate(() => {
+		flash(div);
+	});
+</script>
+
+<style>
+	div {
+		cursor: pointer;
+		line-height: 1.5;
+	}
+</style>
+
+<!-- the text will flash red whenever
+     the `todo` object changes -->
+<div bind:this={div} on:click>
+	{todo.done ? '👍': ''} {todo.text}
+</div>

site/content/tutorial/16-special-elements/07-svelte-options/app-a/flash.js

@@ -0,0 +1,11 @@
+export default function flash(element) {
+	element.style.transition = 'none';
+	element.style.color = 'rgba(255,62,0,1)';
+	element.style.backgroundColor = 'rgba(255,62,0,0.2)';
+
+	setTimeout(() => {
+		element.style.transition = 'color 1s, background 1s';
+		element.style.color = '';
+		element.style.backgroundColor = '';
+	});
+}

site/content/tutorial/16-special-elements/07-svelte-options/app-b/App.svelte

@@ -1,14 +1,30 @@
 <script>
-	import Square from './Square.svelte';
+	import Todo from './Todo.svelte';
-</script>
+
+	let todos = [
+		{ id: 1, done: true, text: 'wash the car' },
+		{ id: 2, done: false, text: 'take the dog for a walk' },
+		{ id: 3, done: false, text: 'mow the lawn' }
+	];
 
-<style>
+	function toggle(toggled) {
-	svg {
+		todos = todos.map(todo => {
-		width: 100%;
+			if (todo === toggled) {
-		height: 100%;
+				// return a new object
+				return {
+					id: todo.id,
+					text: todo.text,
+					done: !todo.done
+				};
 			}
-</style>
 
-<svg viewBox="0 0 100 100">
+			// return the same object
-	<Square cx={50} cy={50} size={40} style="fill: #ff3e00"/>
+			return todo;
-</svg>
+		});
+	}
+</script>
+
+<h2>Todos</h2>
+{#each todos as todo}
+	<Todo {todo} on:click={() => toggle(todo)}/>
+{/each}

site/content/tutorial/16-special-elements/07-svelte-options/app-b/Square.svelte

@@ -1,15 +0,0 @@
-<svelte:options namespace="svg"/>
-
-<script>
-	export let cx;
-	export let cy;
-	export let size;
-	export let style;
-
-	$: x1 = cx - size / 2;
-	$: y1 = cy - size / 2;
-	$: x2 = x1 + size;
-	$: y2 = y1 + size;
-</script>
-
-<polygon points="{x1},{y1} {x2},{y1} {x2},{y2} {x1},{y2}" {style}/>

site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte

@@ -0,0 +1,28 @@
+<svelte:options immutable={true}/>
+
+<script>
+	import { afterUpdate } from 'svelte';
+	import flash from './flash.js';
+
+	export let todo;
+	export let toggle;
+
+	let div;
+
+	afterUpdate(() => {
+		flash(div);
+	});
+</script>
+
+<style>
+	div {
+		cursor: pointer;
+		line-height: 1.5;
+	}
+</style>
+
+<!-- the text will flash red whenever
+     the `todo` object changes -->
+<div bind:this={div} on:click>
+	{todo.done ? '👍': ''} {todo.text}
+</div>

site/content/tutorial/16-special-elements/07-svelte-options/app-b/flash.js

@@ -0,0 +1,11 @@
+export default function flash(element) {
+	element.style.transition = 'none';
+	element.style.color = 'rgba(255,62,0,1)';
+	element.style.backgroundColor = 'rgba(255,62,0,0.2)';
+
+	setTimeout(() => {
+		element.style.transition = 'color 1s, background 1s';
+		element.style.color = '';
+		element.style.backgroundColor = '';
+	});
+}

site/content/tutorial/16-special-elements/07-svelte-options/text.md

@@ -4,12 +4,20 @@ title: <svelte:options>
 
 Lastly, `<svelte:options>` allows you to specify compiler options.
 
-Here, we have a component inside an `<svg>` element. Unless we tell Svelte otherwise, it will compile `Square.svelte` to a module that generates HTML nodes instead of SVG nodes. We can correct that by adding this to the top of `Square.svelte`:
+We'll use the `immutable` option as an example. In this app, the `<Todo>` component flashes whenever it receives new data. Clicking on one of the items toggles its `done` state by creating an updated `todos` array. This causes the *other* `<Todo>` items to flash, even though they don't end up making any changes to the DOM.
+
+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:
 
 ```html
-<svelte:options namespace="svg"/>
+<svelte:options immutable={true}/>
 ```
 
+> You can shorten this to `<svelte:options immutable/>` if you prefer.
+
+Now, when you toggle todos by clicking on them, only the updated component flashes.
+
 The options that can be set here are:
 
 * `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed