From d67accba98bce396c277a3f7d60fa8c0bad6ecfd Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sat, 22 Dec 2018 13:20:23 -0500
Subject: [PATCH] partial fix

---
 site/content/examples/hello-world/App.html         |  4 ++--
 site/content/examples/immutable/ImmutableTodo.html | 12 ++++--------
 site/content/examples/immutable/MutableTodo.html   | 12 ++++--------
 site/content/examples/immutable/flash.js           | 13 +++++++++++++
 4 files changed, 23 insertions(+), 18 deletions(-)
 create mode 100644 site/content/examples/immutable/flash.js

diff --git a/site/content/examples/hello-world/App.html b/site/content/examples/hello-world/App.html
index 93ba8a6fae..f6882abc09 100644
--- a/site/content/examples/hello-world/App.html
+++ b/site/content/examples/hello-world/App.html
@@ -7,8 +7,8 @@ below right to see the generated code.
 You can interact with this component via your
 browser's console - try running the following:
 
-    app.set({ name: 'everybody' });
+    app.name = 'everybody';
 
-You can also update the data via the JSON
+You can also update the data via the props
 editor on this page.
 -->
\ No newline at end of file
diff --git a/site/content/examples/immutable/ImmutableTodo.html b/site/content/examples/immutable/ImmutableTodo.html
index 2688ddad6b..bc2403f048 100644
--- a/site/content/examples/immutable/ImmutableTodo.html
+++ b/site/content/examples/immutable/ImmutableTodo.html
@@ -1,19 +1,15 @@
 <svelte:meta immutable/>
 
 <script>
-	import { afterRender } from 'svelte';
+	import { afterUpdate } from 'svelte';
+	import flash from './flash.js';
 
 	export let todo;
 	let span;
 
-	afterRender(() => {
-		span.style.color = 'red';
-		setTimeout(() => {
-			span.style.color = 'black';
-		}, 400);
-	});
+	flash(() => span);
 </script>
 
 <!-- the text will flash red whenever
      the `todo` object changes -->
-<span ref:span>{todo.text}</span>
+<span bind:this={span}>{todo.text}</span>
diff --git a/site/content/examples/immutable/MutableTodo.html b/site/content/examples/immutable/MutableTodo.html
index 266df5a046..948aaea805 100644
--- a/site/content/examples/immutable/MutableTodo.html
+++ b/site/content/examples/immutable/MutableTodo.html
@@ -1,17 +1,13 @@
 <script>
-	import { afterRender } from 'svelte';
+	import { afterUpdate } from 'svelte';
+	import flash from './flash.js';
 
 	export let todo;
 	let span;
 
-	afterRender(() => {
-		span.style.color = 'red';
-		setTimeout(() => {
-			span.style.color = 'black';
-		}, 400);
-	});
+	flash(() => span);
 </script>
 
 <!-- the text will flash red whenever
      the `todo` object changes -->
-<span ref:span>{todo.text}</span>
+<span bind:this={span}>{todo.text}</span>
diff --git a/site/content/examples/immutable/flash.js b/site/content/examples/immutable/flash.js
new file mode 100644
index 0000000000..d8c251f32a
--- /dev/null
+++ b/site/content/examples/immutable/flash.js
@@ -0,0 +1,13 @@
+import { afterUpdate } from 'svelte';
+
+export default function flash(fn) {
+	afterUpdate(() => {
+		const span = fn();
+
+		span.style.color = 'red';
+
+		setTimeout(() => {
+			span.style.color = 'black';
+		}, 400);
+	});
+}
\ No newline at end of file