From 5563b3781ecb02b3bbcae338cf079db004abaf90 Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Thu, 28 Feb 2019 09:35:11 -0500
Subject: [PATCH] more chapters

---
 .../01-text-inputs/app-a/App.svelte           |  9 ++++
 .../01-text-inputs/app-b/App.svelte           |  9 ++++
 .../06-bindings/01-text-inputs/text.md        | 15 ++++++
 .../02-numeric-inputs/app-a/App.svelte        | 16 ++++++
 .../02-numeric-inputs/app-b/App.svelte        | 16 ++++++
 .../06-bindings/02-numeric-inputs/text.md     | 12 +++++
 .../03-checkbox-inputs/app-a/App.svelte       | 18 +++++++
 .../03-checkbox-inputs/app-b/App.svelte       | 18 +++++++
 .../06-bindings/03-checkbox-inputs/text.md    |  9 ++++
 .../04-group-inputs/app-a/App.svelte          | 54 +++++++++++++++++++
 .../04-group-inputs/app-b/App.svelte          | 52 ++++++++++++++++++
 .../06-bindings/04-group-inputs/text.md       | 36 +++++++++++++
 .../05-textarea-inputs/app-a/App.svelte       | 14 +++++
 .../05-textarea-inputs/app-b/App.svelte       | 14 +++++
 .../06-bindings/05-textarea-inputs/text.md    |  9 ++++
 .../06-select-bindings/app-a/App.svelte       | 39 ++++++++++++++
 .../06-select-bindings/app-b/App.svelte       | 39 ++++++++++++++
 .../06-bindings/06-select-bindings/text.md    | 13 +++++
 site/content/tutorial/06-bindings/meta.json   |  3 ++
 site/content/tutorial/99-todo/99-todo/text.md |  3 +-
 20 files changed, 397 insertions(+), 1 deletion(-)
 create mode 100644 site/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/01-text-inputs/text.md
 create mode 100644 site/content/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/02-numeric-inputs/text.md
 create mode 100644 site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/03-checkbox-inputs/text.md
 create mode 100644 site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/04-group-inputs/text.md
 create mode 100644 site/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/05-textarea-inputs/text.md
 create mode 100644 site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/06-select-bindings/text.md
 create mode 100644 site/content/tutorial/06-bindings/meta.json

diff --git a/site/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte
new file mode 100644
index 0000000000..d3cf1a44ed
--- /dev/null
+++ b/site/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	let name = 'world';
+</script>
+
+<label>
+	<input value={name}>
+</label>
+
+<h1>Hello {name}!</h1>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
new file mode 100644
index 0000000000..662785bfce
--- /dev/null
+++ b/site/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	let name = 'world';
+</script>
+
+<label>
+	<input bind:value={name}>
+</label>
+
+<h1>Hello {name}!</h1>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/01-text-inputs/text.md b/site/content/tutorial/06-bindings/01-text-inputs/text.md
new file mode 100644
index 0000000000..0082586133
--- /dev/null
+++ b/site/content/tutorial/06-bindings/01-text-inputs/text.md
@@ -0,0 +1,15 @@
+---
+title: Text inputs
+---
+
+As a general rule, data flow in Svelte is *top down* — a parent component can set props on a child component, and a component can set attributes on an element, but not the other way around.
+
+Sometimes it's useful to break that rule. Take the case of the `<input>` element in this component — we *could* add an `on:input` event handler that set the value of `name` to `event.target.value`, but it's a bit... boilerplatey. It gets even worse with other kinds of form element, as we'll see.
+
+Instead, we can use the `bind:value` directive:
+
+```html
+<input bind:value={name}>
+```
+
+This means that not only will changes to the value of `name` update the input value, but changes to the input value will update `name`.
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte
new file mode 100644
index 0000000000..ac4fadf012
--- /dev/null
+++ b/site/content/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte
@@ -0,0 +1,16 @@
+<script>
+	let a = 1;
+	let b = 2;
+</script>
+
+<label>
+	<input type=number value={a} min=0 max=10>
+	<input type=range value={a} min=0 max=10>
+</label>
+
+<label>
+	<input type=number value={b} min=0 max=10>
+	<input type=range value={b} min=0 max=10>
+</label>
+
+<p>{a} + {b} = {a + b}</p>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
new file mode 100644
index 0000000000..798d57e021
--- /dev/null
+++ b/site/content/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
@@ -0,0 +1,16 @@
+<script>
+	let a = 1;
+	let b = 2;
+</script>
+
+<label>
+	<input type=number bind:value={a} min=0 max=10>
+	<input type=range bind:value={a} min=0 max=10>
+</label>
+
+<label>
+	<input type=number bind:value={b} min=0 max=10>
+	<input type=range bind:value={b} min=0 max=10>
+</label>
+
+<p>{a} + {b} = {a + b}</p>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/02-numeric-inputs/text.md b/site/content/tutorial/06-bindings/02-numeric-inputs/text.md
new file mode 100644
index 0000000000..1ede244301
--- /dev/null
+++ b/site/content/tutorial/06-bindings/02-numeric-inputs/text.md
@@ -0,0 +1,12 @@
+---
+title: Numeric inputs
+---
+
+In the DOM, everything is a string. That's unhelpful when you're dealing with numeric inputs — `type="number"` and `type="range"` — as it means you have to remember to coerce `input.value` before using it.
+
+With `bind:value`, Svelte takes care of it for you:
+
+```html
+<input type=number bind:value={a} min=0 max=10>
+<input type=range bind:value={a} min=0 max=10>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte
new file mode 100644
index 0000000000..2847dad485
--- /dev/null
+++ b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	let yes = false;
+</script>
+
+<label>
+	<input type=checkbox checked={yes}>
+	Yes! Send me regular email spam
+</label>
+
+{#if yes}
+	<p>Thank you. We will bombard your inbox and sell your personal details.</p>
+{:else}
+	<p>You must opt in to continue. If you're not paying, you're the product.</p>
+{/if}
+
+<button disabled={!yes}>
+	Subscribe
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
new file mode 100644
index 0000000000..b82d31e783
--- /dev/null
+++ b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	let yes = false;
+</script>
+
+<label>
+	<input type=checkbox bind:checked={yes}>
+	Yes! Send me regular email spam
+</label>
+
+{#if yes}
+	<p>Thank you. We will bombard your inbox and sell your personal details.</p>
+{:else}
+	<p>You must opt in to continue. If you're not paying, you're the product.</p>
+{/if}
+
+<button disabled={!yes}>
+	Subscribe
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/03-checkbox-inputs/text.md b/site/content/tutorial/06-bindings/03-checkbox-inputs/text.md
new file mode 100644
index 0000000000..621d9fbb7b
--- /dev/null
+++ b/site/content/tutorial/06-bindings/03-checkbox-inputs/text.md
@@ -0,0 +1,9 @@
+---
+title: Checkbox inputs
+---
+
+Checkboxes are used for toggling between states. Instead of binding to `input.value`, we bind to `input.checked`:
+
+```html
+<input type=checkbox bind:checked={yes}>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
new file mode 100644
index 0000000000..5ea04f4e95
--- /dev/null
+++ b/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
@@ -0,0 +1,54 @@
+<script>
+	let scoops = 1;
+	let flavours = ['Mint choc chip'];
+
+	function join(flavours) {
+		if (flavours.length === 1) return flavours[0];
+		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
+	}
+</script>
+
+<h2>Size</h2>
+
+<label>
+	<input type=radio group={scoops} value={1}>
+	One scoop
+</label>
+
+<label>
+	<input type=radio group={scoops} value={2}>
+	Two scoops
+</label>
+
+<label>
+	<input type=radio group={scoops} value={3}>
+	Three scoops
+</label>
+
+<h2>Flavours</h2>
+
+<label>
+	<input type=checkbox group={flavours} value="Cookies and cream">
+	Cookies and cream
+</label>
+
+<label>
+	<input type=checkbox group={flavours} value="Mint choc chip">
+	Mint choc chip
+</label>
+
+<label>
+	<input type=checkbox group={flavours} value="Raspberry ripple">
+	Raspberry ripple
+</label>
+
+{#if flavours.length === 0}
+	<p>Please select at least one flavour</p>
+{:else if flavours.length > scoops}
+	<p>Can't order more flavours than scoops!</p>
+{:else}
+	<p>
+		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
+		of {join(flavours)}
+	</p>
+{/if}
diff --git a/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
new file mode 100644
index 0000000000..a46c61c7e7
--- /dev/null
+++ b/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
@@ -0,0 +1,52 @@
+<script>
+	let scoops = 1;
+	let flavours = ['Mint choc chip'];
+
+	let menu = [
+		'Cookies and cream',
+		'Mint choc chip',
+		'Raspberry ripple'
+	];
+
+	function join(flavours) {
+		if (flavours.length === 1) return flavours[0];
+		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
+	}
+</script>
+
+<h2>Size</h2>
+
+<label>
+	<input type=radio bind:group={scoops} value={1}>
+	One scoop
+</label>
+
+<label>
+	<input type=radio bind:group={scoops} value={2}>
+	Two scoops
+</label>
+
+<label>
+	<input type=radio bind:group={scoops} value={3}>
+	Three scoops
+</label>
+
+<h2>Flavours</h2>
+
+{#each menu as flavour}
+	<label>
+		<input type=checkbox bind:group={flavours} value={flavour}>
+		{flavour}
+	</label>
+{/each}
+
+{#if flavours.length === 0}
+	<p>Please select at least one flavour</p>
+{:else if flavours.length > scoops}
+	<p>Can't order more flavours than scoops!</p>
+{:else}
+	<p>
+		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
+		of {join(flavours)}
+	</p>
+{/if}
diff --git a/site/content/tutorial/06-bindings/04-group-inputs/text.md b/site/content/tutorial/06-bindings/04-group-inputs/text.md
new file mode 100644
index 0000000000..97edb8db76
--- /dev/null
+++ b/site/content/tutorial/06-bindings/04-group-inputs/text.md
@@ -0,0 +1,36 @@
+---
+title: Group inputs
+---
+
+If you have multiple inputs relating to the same value, you can use `bind:group` along with the `value` attribute. Radio inputs in the same group are mutually exclusive; checkbox inputs in the same group form an array of selected values.
+
+Add `bind:group` to each input:
+
+```html
+<input type=radio bind:group={scoops} value={1}>
+```
+
+In this case, we could make the code simpler by moving the checkbox inputs into an `each` block. First, add a `menu` variable to the `<script>` block...
+
+```js
+let menu = [
+	'Cookies and cream',
+	'Mint choc chip',
+	'Raspberry ripple'
+];
+```
+
+...then replace the second section:
+
+```html
+<h2>Flavours</h2>
+
+{#each menu as flavour}
+	<label>
+		<input type=checkbox bind:group={flavours} value={flavour}>
+		{flavour}
+	</label>
+{/each}
+```
+
+It's now easy to expand our ice cream menu in new and exciting directions.
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte
new file mode 100644
index 0000000000..85513b3c5a
--- /dev/null
+++ b/site/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte
@@ -0,0 +1,14 @@
+<script>
+	import marked from 'marked';
+
+	let markdown = `Some words are *italic*, some are **bold**`;
+	$: rendered = marked(markdown);
+</script>
+
+<style>
+	textarea { width: 100%; height: 200px; }
+</style>
+
+<textarea value={markdown}></textarea>
+
+{@html rendered}
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte
new file mode 100644
index 0000000000..4081569dd1
--- /dev/null
+++ b/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte
@@ -0,0 +1,14 @@
+<script>
+	import marked from 'marked';
+
+	let markdown = `Some words are *italic*, some are **bold**`;
+	$: rendered = marked(markdown);
+</script>
+
+<style>
+	textarea { width: 100%; height: 200px; }
+</style>
+
+<textarea bind:value={markdown}></textarea>
+
+{@html rendered}
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/05-textarea-inputs/text.md b/site/content/tutorial/06-bindings/05-textarea-inputs/text.md
new file mode 100644
index 0000000000..a19d561719
--- /dev/null
+++ b/site/content/tutorial/06-bindings/05-textarea-inputs/text.md
@@ -0,0 +1,9 @@
+---
+title: Textarea inputs
+---
+
+The `<textarea>` element behaves similarly to a text input in Svelte — use `bind:value`:
+
+```html
+<textarea bind:value={markdown}></textarea
+```
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte b/site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
new file mode 100644
index 0000000000..b6f50b935e
--- /dev/null
+++ b/site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
@@ -0,0 +1,39 @@
+<script>
+	let questions = [
+		{ id: 1, text: `Where did you go to school?` },
+		{ id: 2, text: `What is your mother's name?` },
+		{ id: 3, text: `What is another personal fact that an attacker could easily find with Google?` }
+	];
+
+	let selected;
+
+	let answer = '';
+
+	function handleSubmit() {
+		alert(`answered question ${selected.id} (${selected.text}) with "${answer}"`);
+	}
+</script>
+
+<style>
+	input { display: block; width: 500px; max-width: 100%; }
+</style>
+
+<h2>Insecurity questions</h2>
+
+<form on:submit|preventDefault={handleSubmit}>
+	<select value={selected} on:change="{() => answer = ''}">
+		{#each questions as question}
+			<option value={question}>
+				{question.text}
+			</option>
+		{/each}
+	</select>
+
+	<input bind:value={answer}>
+
+	<button disabled={!answer} type=submit>
+		Submit
+	</button>
+</form>
+
+<p>selected question {selected ? selected.id : '[waiting...]'}</p>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte b/site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
new file mode 100644
index 0000000000..3f1e7fa7e1
--- /dev/null
+++ b/site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
@@ -0,0 +1,39 @@
+<script>
+	let questions = [
+		{ id: 1, text: `Where did you go to school?` },
+		{ id: 2, text: `What is your mother's name?` },
+		{ id: 3, text: `What is another personal fact that an attacker could easily find with Google?` }
+	];
+
+	let selected;
+
+	let answer = '';
+
+	function handleSubmit() {
+		alert(`answered question ${selected.id} (${selected.text}) with "${answer}"`);
+	}
+</script>
+
+<style>
+	input { display: block; width: 500px; max-width: 100%; }
+</style>
+
+<h2>Insecurity questions</h2>
+
+<form on:submit|preventDefault={handleSubmit}>
+	<select bind:value={selected} on:change="{() => answer = ''}">
+		{#each questions as question}
+			<option value={question}>
+				{question.text}
+			</option>
+		{/each}
+	</select>
+
+	<input bind:value={answer}>
+
+	<button disabled={!answer} type=submit>
+		Submit
+	</button>
+</form>
+
+<p>selected question {selected ? selected.id : '[waiting...]'}</p>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/06-select-bindings/text.md b/site/content/tutorial/06-bindings/06-select-bindings/text.md
new file mode 100644
index 0000000000..f4972557ab
--- /dev/null
+++ b/site/content/tutorial/06-bindings/06-select-bindings/text.md
@@ -0,0 +1,13 @@
+---
+title: Select bindings
+---
+
+We can also use `bind:value` with `<select>` elements. Update line 24:
+
+```html
+<select bind:value={selected} on:change="{() => answer = ''}">
+```
+
+Note that the `<option>` values are objects rather than strings. Svelte doesn't mind.
+
+> Because we haven't set an initial value of `selected`, the binding will set it to the default value (the first in the list) automatically. Be careful though — until the binding is initialised, `selected` remains undefined, so we can't blindly reference e.g. `selected.id` in the template.
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/meta.json b/site/content/tutorial/06-bindings/meta.json
new file mode 100644
index 0000000000..8bb0142ecc
--- /dev/null
+++ b/site/content/tutorial/06-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Bindings"
+}
\ 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 d2b8d10f40..f02078dccd 100644
--- a/site/content/tutorial/99-todo/99-todo/text.md
+++ b/site/content/tutorial/99-todo/99-todo/text.md
@@ -67,9 +67,10 @@ Another one should cover how to set up an editor for syntax highlighting.
 
 ## Bindings
 
-* [ ] Form bindings (input, textarea, select)
+* [ ] Form bindings (input, textarea, select, multiple select)
 * [ ] Dimensions
 * [ ] `this`
+* [ ] shorthand
 
 
 ## Stores