From 80a393cdb21fa5b0d1ac9f6688e806db43d3c61d Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Sat, 9 Mar 2019 13:57:18 -0500
Subject: [PATCH] tick chapter

---
 .../07-lifecycle/04-tick/app-a/App.svelte     | 35 ++++++++++++++++++
 .../07-lifecycle/04-tick/app-b/App.svelte     | 37 +++++++++++++++++++
 .../tutorial/07-lifecycle/04-tick/text.md     | 21 +++++++++++
 site/content/tutorial/99-todo/99-todo/text.md |  5 +--
 site/src/routes/tutorial/[slug]/index.svelte  |  2 +-
 5 files changed, 96 insertions(+), 4 deletions(-)
 create mode 100644 site/content/tutorial/07-lifecycle/04-tick/app-a/App.svelte
 create mode 100644 site/content/tutorial/07-lifecycle/04-tick/app-b/App.svelte
 create mode 100644 site/content/tutorial/07-lifecycle/04-tick/text.md

diff --git a/site/content/tutorial/07-lifecycle/04-tick/app-a/App.svelte b/site/content/tutorial/07-lifecycle/04-tick/app-a/App.svelte
new file mode 100644
index 0000000000..3386ff93df
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/04-tick/app-a/App.svelte
@@ -0,0 +1,35 @@
+<script>
+	let text = `Select some text and hit the tab key to toggle uppercase`;
+
+	async function handleKeydown(event) {
+		if (event.which !== 9) return;
+
+		event.preventDefault();
+
+		const { selectionStart, selectionEnd, value } = this;
+		const selection = value.slice(selectionStart, selectionEnd);
+
+		const replacement = /[a-z]/.test(selection)
+			? selection.toUpperCase()
+			: selection.toLowerCase();
+
+		text = (
+			value.slice(0, selectionStart) +
+			replacement +
+			value.slice(selectionEnd)
+		);
+
+		// this has no effect, because the DOM hasn't updated yet
+		this.selectionStart = selectionStart;
+		this.selectionEnd = selectionEnd;
+	}
+</script>
+
+<style>
+	textarea {
+		width: 100%;
+		height: 200px;
+	}
+</style>
+
+<textarea value={text} on:keydown={handleKeydown}></textarea>
\ No newline at end of file
diff --git a/site/content/tutorial/07-lifecycle/04-tick/app-b/App.svelte b/site/content/tutorial/07-lifecycle/04-tick/app-b/App.svelte
new file mode 100644
index 0000000000..c9cb6de420
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/04-tick/app-b/App.svelte
@@ -0,0 +1,37 @@
+<script>
+	import { tick } from 'svelte';
+
+	let text = `Select some text and hit the tab key to toggle uppercase`;
+
+	async function handleKeydown(event) {
+		if (event.which !== 9) return;
+
+		event.preventDefault();
+
+		const { selectionStart, selectionEnd, value } = this;
+		const selection = value.slice(selectionStart, selectionEnd);
+
+		const replacement = /[a-z]/.test(selection)
+			? selection.toUpperCase()
+			: selection.toLowerCase();
+
+		text = (
+			value.slice(0, selectionStart) +
+			replacement +
+			value.slice(selectionEnd)
+		);
+
+		await tick();
+		this.selectionStart = selectionStart;
+		this.selectionEnd = selectionEnd;
+	}
+</script>
+
+<style>
+	textarea {
+		width: 100%;
+		height: 200px;
+	}
+</style>
+
+<textarea value={text} on:keydown={handleKeydown}></textarea>
\ No newline at end of file
diff --git a/site/content/tutorial/07-lifecycle/04-tick/text.md b/site/content/tutorial/07-lifecycle/04-tick/text.md
new file mode 100644
index 0000000000..b58b024ad6
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/04-tick/text.md
@@ -0,0 +1,21 @@
+---
+title: tick
+---
+
+The `tick` function is unlike other lifecycle functions in that you can call it any time, not just when the component first initialises. It returns a promise that resolves as soon as any pending state changes have been applied to the DOM (or immediately, if there are no pending state changes).
+
+When you invalidate component state in Svelte, it doesn't update the DOM immediately. Instead, it waits until the next *microtask* to see if there are any other changes that need to be applied, including in other components. Doing so avoids unnecessary work and allows the browser to batch things more effectively.
+
+You can see that behaviour in this example. Select a range of text and hit the tab key. Because the `<textarea>` value changes, the current selection is cleared and the cursor jumps, annoyingly, to the end. We can fix this by importing `tick`...
+
+```js
+import { tick } from 'svelte';
+```
+
+...and running it immediately before we set `this.selectionStart` and `this.selectionEnd` at the end of `handleKeydown`:
+
+```js
+await tick();
+this.selectionStart = selectionStart;
+this.selectionEnd = selectionEnd;
+```
\ No newline at end of file
diff --git a/site/content/tutorial/99-todo/99-todo/text.md b/site/content/tutorial/99-todo/99-todo/text.md
index d0eddbaa1f..fd654cbacc 100644
--- a/site/content/tutorial/99-todo/99-todo/text.md
+++ b/site/content/tutorial/99-todo/99-todo/text.md
@@ -98,6 +98,7 @@ Maybe lifecycle should go first, since we're using `onMount` in the `this` demo?
 * [x] `onDestroy`
 * [x] `beforeUpdate`
 * [x] `afterUpdate`
+* [x] `tick`
 * [x] how lifecycle functions behave in SSR mode?
 
 
@@ -158,6 +159,4 @@ Maybe lifecycle should go first, since we're using `onMount` in the `this` demo?
 
 ## Miscellaneous
 
-* [ ] Debug tags
-* [ ] `tick`
-
+* [ ] Debug tags
\ No newline at end of file
diff --git a/site/src/routes/tutorial/[slug]/index.svelte b/site/src/routes/tutorial/[slug]/index.svelte
index 23222045d2..46c6b548f0 100644
--- a/site/src/routes/tutorial/[slug]/index.svelte
+++ b/site/src/routes/tutorial/[slug]/index.svelte
@@ -92,7 +92,7 @@
 			return expected && (
 				file.name === expected.name &&
 				file.type === expected.type &&
-				file.source === expected.source
+				file.source.trim().replace(/\s+$/gm, '') === expected.source.trim().replace(/\s+$/gm, '')
 			);
 		});
 	}