From e030005dda93dc856759f51646258c366c16246c Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 15 Apr 2019 14:24:15 -0400
Subject: [PATCH] document store bindings and $foo += 1

---
 .../06-store-bindings/app-a/App.svelte        |  6 +++++
 .../06-store-bindings/app-a/stores.js         |  8 +++++++
 .../06-store-bindings/app-b/App.svelte        | 10 ++++++++
 .../06-store-bindings/app-b/stores.js         |  8 +++++++
 .../08-stores/06-store-bindings/text.md       | 23 +++++++++++++++++++
 5 files changed, 55 insertions(+)
 create mode 100644 site/content/tutorial/08-stores/06-store-bindings/app-a/App.svelte
 create mode 100644 site/content/tutorial/08-stores/06-store-bindings/app-a/stores.js
 create mode 100644 site/content/tutorial/08-stores/06-store-bindings/app-b/App.svelte
 create mode 100644 site/content/tutorial/08-stores/06-store-bindings/app-b/stores.js
 create mode 100644 site/content/tutorial/08-stores/06-store-bindings/text.md

diff --git a/site/content/tutorial/08-stores/06-store-bindings/app-a/App.svelte b/site/content/tutorial/08-stores/06-store-bindings/app-a/App.svelte
new file mode 100644
index 0000000000..3839224826
--- /dev/null
+++ b/site/content/tutorial/08-stores/06-store-bindings/app-a/App.svelte
@@ -0,0 +1,6 @@
+<script>
+	import { name, greeting } from './stores.js';
+</script>
+
+<h1>{$greeting}</h1>
+<input value={$name}>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/06-store-bindings/app-a/stores.js b/site/content/tutorial/08-stores/06-store-bindings/app-a/stores.js
new file mode 100644
index 0000000000..298598a412
--- /dev/null
+++ b/site/content/tutorial/08-stores/06-store-bindings/app-a/stores.js
@@ -0,0 +1,8 @@
+import { writable, derived } from 'svelte/store';
+
+export const name = writable('world');
+
+export const greeting = derived(
+	name,
+	$name => `Hello ${$name}!`
+);
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/06-store-bindings/app-b/App.svelte b/site/content/tutorial/08-stores/06-store-bindings/app-b/App.svelte
new file mode 100644
index 0000000000..52f04be957
--- /dev/null
+++ b/site/content/tutorial/08-stores/06-store-bindings/app-b/App.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { name, greeting } from './stores.js';
+</script>
+
+<h1>{$greeting}</h1>
+<input bind:value={$name}>
+
+<button on:click="{() => $name += '!'}">
+	Add exclamation mark!
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/06-store-bindings/app-b/stores.js b/site/content/tutorial/08-stores/06-store-bindings/app-b/stores.js
new file mode 100644
index 0000000000..298598a412
--- /dev/null
+++ b/site/content/tutorial/08-stores/06-store-bindings/app-b/stores.js
@@ -0,0 +1,8 @@
+import { writable, derived } from 'svelte/store';
+
+export const name = writable('world');
+
+export const greeting = derived(
+	name,
+	$name => `Hello ${$name}!`
+);
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/06-store-bindings/text.md b/site/content/tutorial/08-stores/06-store-bindings/text.md
new file mode 100644
index 0000000000..7034703f33
--- /dev/null
+++ b/site/content/tutorial/08-stores/06-store-bindings/text.md
@@ -0,0 +1,23 @@
+---
+title: Store bindings
+---
+
+If a store is writable — i.e. it has a `set` method — you can bind to its value, just as you can bind to local component state.
+
+In this example we have a writable store `name` and a derived store `greeting`. Update the `<input>` element:
+
+```html
+<input bind:value={$name}>
+```
+
+Changing the input value will now update `name` and all its dependents.
+
+We can also assign directly to store values inside a component. Add a `<button>` element:
+
+```html
+<button on:click="{() => $name += '!'}">
+	Add exclamation mark!
+</button>
+```
+
+The `$name += '!'` assignment is equivalent to `name.set($name + '!')`.
\ No newline at end of file