Merge pull request sveltejs#2425 from sveltejs/sveltejsgh-2423

update svelte:options tutorial chapter, remove example

Author: Rich-Harris

site/content/examples/16-special-elements/06-svelte-options/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}

site/content/examples/16-special-elements/06-svelte-options/Square.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>

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

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

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

@@ -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 = '';
 	});
 }

site/content/examples/20-miscellaneous/02-immutable-data/ImmutableTodo.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>
+<h2>Todos</h2>
+{#each todos as todo}
+	<Todo {todo} on:click={() => toggle(todo)}/>
+{/each}

site/content/examples/20-miscellaneous/02-immutable-data/MutableTodo.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/examples/20-miscellaneous/02-immutable-data/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-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>
+<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

@@ -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-a/Todo.svelte

@@ -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-a/flash.js

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