shorthand bindings

site/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte

@@ -1,12 +1,12 @@
 <script>
 	import marked from 'marked';
-	let markdown = `Some words are *italic*, some are **bold**`;
+	let value = `Some words are *italic*, some are **bold**`;
 </script>
 
 <style>
 	textarea { width: 100%; height: 200px; }
 </style>
 
-<textarea value={markdown}></textarea>
+<textarea value={value}></textarea>
 
-{@html marked(markdown)}
+{@html marked(value)}

site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte

@@ -1,12 +1,12 @@
 <script>
 	import marked from 'marked';
-	let markdown = `Some words are *italic*, some are **bold**`;
+	let value = `Some words are *italic*, some are **bold**`;
 </script>
 
 <style>
 	textarea { width: 100%; height: 200px; }
 </style>
 
-<textarea bind:value={markdown}></textarea>
+<textarea bind:value></textarea>
 
-{@html marked(markdown)}
+{@html marked(value)}

site/content/tutorial/06-bindings/05-textarea-inputs/text.md

@@ -5,5 +5,13 @@ title: Textarea inputs
 The `<textarea>` element behaves similarly to a text input in Svelte — use `bind:value`:
 
 ```html
-<textarea bind:value={markdown}></textarea>
+<textarea bind:value={value}></textarea>
 ```
+
+In cases like these, where the names match, we can also use a shorthand form:
+
+```html
+<textarea bind:value></textarea>
+```
+
+This applies to all bindings, not just textareas.

site/content/tutorial/06-bindings/12-component-bindings/app-a/App.svelte

@@ -0,0 +1,14 @@
+<script>
+	import Keypad from './Keypad.svelte';
+
+	let pin;
+	$: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'enter your pin';
+
+	function handleSubmit() {
+		alert(`submitted ${pin}`);
+	}
+</script>
+
+<h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>
+
+<Keypad on:submit={handleSubmit}/>

site/content/tutorial/06-bindings/12-component-bindings/app-a/Keypad.svelte

@@ -0,0 +1,40 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	export let value = '';
+
+	const dispatch = createEventDispatcher();
+
+	const select = num => () => value += num;
+	const clear  = () => value = '';
+	const submit = () => dispatch('submit');
+</script>
+
+<style>
+	.keypad {
+		display: grid;
+		grid-template-columns: repeat(3, 5em);
+		grid-template-rows: repeat(4, 3em);
+		grid-gap: 0.5em
+	}
+
+	button {
+		margin: 0
+	}
+</style>
+
+<div class="keypad">
+	<button on:click={select(1)}>1</button>
+	<button on:click={select(2)}>2</button>
+	<button on:click={select(3)}>3</button>
+	<button on:click={select(4)}>4</button>
+	<button on:click={select(5)}>5</button>
+	<button on:click={select(6)}>6</button>
+	<button on:click={select(7)}>7</button>
+	<button on:click={select(8)}>8</button>
+	<button on:click={select(9)}>9</button>
+
+	<button disabled={!value} on:click={clear}>clear</button>
+	<button on:click={select(0)}>0</button>
+	<button disabled={!value} on:click={submit}>submit</button>
+</div>

site/content/tutorial/06-bindings/12-component-bindings/app-b/App.svelte

@@ -0,0 +1,14 @@
+<script>
+	import Keypad from './Keypad.svelte';
+
+	let pin;
+	$: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'enter your pin';
+
+	function handleSubmit() {
+		alert(`submitted ${pin}`);
+	}
+</script>
+
+<h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>
+
+<Keypad bind:value={pin} on:submit={handleSubmit}/>

site/content/tutorial/06-bindings/12-component-bindings/app-b/Keypad.svelte

@@ -0,0 +1,40 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	export let value = '';
+
+	const dispatch = createEventDispatcher();
+
+	const select = num => () => value += num;
+	const clear  = () => value = '';
+	const submit = () => dispatch('submit');
+</script>
+
+<style>
+	.keypad {
+		display: grid;
+		grid-template-columns: repeat(3, 5em);
+		grid-template-rows: repeat(4, 3em);
+		grid-gap: 0.5em
+	}
+
+	button {
+		margin: 0
+	}
+</style>
+
+<div class="keypad">
+	<button on:click={select(1)}>1</button>
+	<button on:click={select(2)}>2</button>
+	<button on:click={select(3)}>3</button>
+	<button on:click={select(4)}>4</button>
+	<button on:click={select(5)}>5</button>
+	<button on:click={select(6)}>6</button>
+	<button on:click={select(7)}>7</button>
+	<button on:click={select(8)}>8</button>
+	<button on:click={select(9)}>9</button>
+
+	<button disabled={!value} on:click={clear}>clear</button>
+	<button on:click={select(0)}>0</button>
+	<button disabled={!value} on:click={submit}>submit</button>
+</div>

site/content/tutorial/06-bindings/12-component-bindings/text.md

@@ -0,0 +1,13 @@
+---
+title: Component bindings
+---
+
+Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `<Keypad>` component as though it were a form element:
+
+```html
+<Keypad bind:value={pin} on:submit={handleSubmit}/>
+```
+
+Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated.
+
+> Use component bindings sparingly. It can be difficult to track the flow of data around your application if you have too many of them, especially if there is no 'single source of truth'.