From ab84aeef11d176a37d027a27ebabb9ec91cfa531 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 15 Apr 2019 12:29:02 -0400
Subject: [PATCH] update svelte:options tutorial chapter, remove example

---
 .../06-svelte-options/App.svelte              | 14 --------
 .../06-svelte-options/Square.svelte           | 15 --------
 .../06-svelte-options/meta.json               |  3 --
 .../02-immutable-data/App.svelte              | 10 ++----
 .../02-immutable-data/ImmutableTodo.svelte    | 21 ++++++++---
 .../02-immutable-data/MutableTodo.svelte      | 21 ++++++++---
 .../02-immutable-data/flash.js                | 18 +++++-----
 .../07-svelte-options/app-a/App.svelte        | 36 +++++++++++++------
 .../07-svelte-options/app-a/Square.svelte     | 13 -------
 .../07-svelte-options/app-a/Todo.svelte       | 26 ++++++++++++++
 .../07-svelte-options/app-a/flash.js          | 11 ++++++
 .../07-svelte-options/app-b/App.svelte        | 36 +++++++++++++------
 .../07-svelte-options/app-b/Square.svelte     | 15 --------
 .../07-svelte-options/app-b/Todo.svelte       | 28 +++++++++++++++
 .../07-svelte-options/app-b/flash.js          | 11 ++++++
 .../07-svelte-options/text.md                 | 12 +++++--
 16 files changed, 182 insertions(+), 108 deletions(-)
 delete mode 100644 site/content/examples/16-special-elements/06-svelte-options/App.svelte
 delete mode 100644 site/content/examples/16-special-elements/06-svelte-options/Square.svelte
 delete mode 100644 site/content/examples/16-special-elements/06-svelte-options/meta.json
 delete mode 100644 site/content/tutorial/16-special-elements/07-svelte-options/app-a/Square.svelte
 create mode 100644 site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte
 create mode 100644 site/content/tutorial/16-special-elements/07-svelte-options/app-a/flash.js
 delete mode 100644 site/content/tutorial/16-special-elements/07-svelte-options/app-b/Square.svelte
 create mode 100644 site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte
 create mode 100644 site/content/tutorial/16-special-elements/07-svelte-options/app-b/flash.js

diff --git a/site/content/examples/16-special-elements/06-svelte-options/App.svelte b/site/content/examples/16-special-elements/06-svelte-options/App.svelte
deleted file mode 100644
index e0051449ee..0000000000
--- a/site/content/examples/16-special-elements/06-svelte-options/App.svelte
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/06-svelte-options/Square.svelte b/site/content/examples/16-special-elements/06-svelte-options/Square.svelte
deleted file mode 100644
index 38f26d1dba..0000000000
--- a/site/content/examples/16-special-elements/06-svelte-options/Square.svelte
+++ /dev/null
@@ -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}/>
diff --git a/site/content/examples/16-special-elements/06-svelte-options/meta.json b/site/content/examples/16-special-elements/06-svelte-options/meta.json
deleted file mode 100644
index 242c006850..0000000000
--- a/site/content/examples/16-special-elements/06-svelte-options/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "<svelte:options>"
-}
\ No newline at end of file
diff --git a/site/content/examples/20-miscellaneous/02-immutable-data/App.svelte b/site/content/examples/20-miscellaneous/02-immutable-data/App.svelte
index e81d781677..a7ce32cc55 100644
--- a/site/content/examples/20-miscellaneous/02-immutable-data/App.svelte
+++ b/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)}">
-		<span>{todo.done ? "😎": "🙁"}</span>
-		<ImmutableTodo {todo}/>
-	</label>
+	<ImmutableTodo {todo} on:click="{() => toggle(todo.id)}"/>
 {/each}
 
 <h2>Mutable</h2>
 {#each todos as todo}
-	<label on:click="{() => toggle(todo.id)}">
-		<span>{todo.done ? "😎": "🙁"}</span>
-		<MutableTodo {todo}/>
-	</label>
+	<MutableTodo {todo} on:click="{() => toggle(todo.id)}"/>
 {/each}
diff --git a/site/content/examples/20-miscellaneous/02-immutable-data/ImmutableTodo.svelte b/site/content/examples/20-miscellaneous/02-immutable-data/ImmutableTodo.svelte
index 60992c61cb..fdf1ca7ce0 100644
--- a/site/content/examples/20-miscellaneous/02-immutable-data/ImmutableTodo.svelte
+++ b/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>
+		the `todo` object changes -->
+<div bind:this={div} on:click>
+	{todo.done ? '👍': ''} {todo.text}
+</div>
diff --git a/site/content/examples/20-miscellaneous/02-immutable-data/MutableTodo.svelte b/site/content/examples/20-miscellaneous/02-immutable-data/MutableTodo.svelte
index 948aaea805..801a6dcbd3 100644
--- a/site/content/examples/20-miscellaneous/02-immutable-data/MutableTodo.svelte
+++ b/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>
+		the `todo` object changes -->
+<div bind:this={div} on:click>
+	{todo.done ? '👍': ''} {todo.text}
+</div>
diff --git a/site/content/examples/20-miscellaneous/02-immutable-data/flash.js b/site/content/examples/20-miscellaneous/02-immutable-data/flash.js
index d8c251f32a..8dff9cbe2f 100644
--- a/site/content/examples/20-miscellaneous/02-immutable-data/flash.js
+++ b/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';
+	element.style.color = 'rgba(255,62,0,1)';
+	element.style.backgroundColor = 'rgba(255,62,0,0.2)';
 
-export default function flash(fn) {
-	afterUpdate(() => {
-		const span = fn();
-
-		span.style.color = 'red';
-
-		setTimeout(() => {
-			span.style.color = 'black';
-		}, 400);
+	setTimeout(() => {
+		element.style.transition = 'color 1s, background 1s';
+		element.style.color = '';
+		element.style.backgroundColor = '';
 	});
 }
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-a/App.svelte b/site/content/tutorial/16-special-elements/07-svelte-options/app-a/App.svelte
index e0051449ee..298526902d 100644
--- a/site/content/tutorial/16-special-elements/07-svelte-options/app-a/App.svelte
+++ b/site/content/tutorial/16-special-elements/07-svelte-options/app-a/App.svelte
@@ -1,14 +1,30 @@
 <script>
-	import Square from './Square.svelte';
-</script>
+	import Todo from './Todo.svelte';
+
+	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>
-	svg {
-		width: 100%;
-		height: 100%;
+	function toggle(toggled) {
+		todos = todos.map(todo => {
+			if (todo === toggled) {
+				// return a new object
+				return {
+					id: todo.id,
+					text: todo.text,
+					done: !todo.done
+				};
+			}
+
+			// return the same object
+			return todo;
+		});
 	}
-</style>
+</script>
 
-<svg viewBox="0 0 100 100">
-	<Square cx={50} cy={50} size={40} style="fill: #ff3e00"/>
-</svg>
\ No newline at end of file
+<h2>Todos</h2>
+{#each todos as todo}
+	<Todo {todo} on:click={() => toggle(todo)}/>
+{/each}
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Square.svelte b/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Square.svelte
deleted file mode 100644
index 3019ee9542..0000000000
--- a/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Square.svelte
+++ /dev/null
@@ -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}/>
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte b/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte
new file mode 100644
index 0000000000..dae595e7d0
--- /dev/null
+++ b/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>
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-a/flash.js b/site/content/tutorial/16-special-elements/07-svelte-options/app-a/flash.js
new file mode 100644
index 0000000000..8dff9cbe2f
--- /dev/null
+++ b/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 = '';
+	});
+}
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-b/App.svelte b/site/content/tutorial/16-special-elements/07-svelte-options/app-b/App.svelte
index e0051449ee..298526902d 100644
--- a/site/content/tutorial/16-special-elements/07-svelte-options/app-b/App.svelte
+++ b/site/content/tutorial/16-special-elements/07-svelte-options/app-b/App.svelte
@@ -1,14 +1,30 @@
 <script>
-	import Square from './Square.svelte';
-</script>
+	import Todo from './Todo.svelte';
+
+	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>
-	svg {
-		width: 100%;
-		height: 100%;
+	function toggle(toggled) {
+		todos = todos.map(todo => {
+			if (todo === toggled) {
+				// return a new object
+				return {
+					id: todo.id,
+					text: todo.text,
+					done: !todo.done
+				};
+			}
+
+			// return the same object
+			return todo;
+		});
 	}
-</style>
+</script>
 
-<svg viewBox="0 0 100 100">
-	<Square cx={50} cy={50} size={40} style="fill: #ff3e00"/>
-</svg>
\ No newline at end of file
+<h2>Todos</h2>
+{#each todos as todo}
+	<Todo {todo} on:click={() => toggle(todo)}/>
+{/each}
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Square.svelte b/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Square.svelte
deleted file mode 100644
index 38f26d1dba..0000000000
--- a/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Square.svelte
+++ /dev/null
@@ -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}/>
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte b/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte
new file mode 100644
index 0000000000..447ddc601c
--- /dev/null
+++ b/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>
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-b/flash.js b/site/content/tutorial/16-special-elements/07-svelte-options/app-b/flash.js
new file mode 100644
index 0000000000..8dff9cbe2f
--- /dev/null
+++ b/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 = '';
+	});
+}
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/text.md b/site/content/tutorial/16-special-elements/07-svelte-options/text.md
index 91f08ce959..60a9d3b0f8 100644
--- a/site/content/tutorial/16-special-elements/07-svelte-options/text.md
+++ b/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