From a7aaf6e84125022d8a2b206015a670732d897afd Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Tue, 5 Mar 2019 21:40:20 -0500
Subject: [PATCH] slot props chapter

---
 .../04-slot-props/app-a/App.svelte            | 26 ++++++++++
 .../04-slot-props/app-a/Hoverable.svelte      | 15 ++++++
 .../04-slot-props/app-b/App.svelte            | 46 ++++++++++++++++++
 .../04-slot-props/app-b/Hoverable.svelte      | 15 ++++++
 .../14-composition/04-slot-props/text.md      | 47 +++++++++++++++++++
 site/content/tutorial/99-todo/99-todo/text.md |  5 +-
 6 files changed, 152 insertions(+), 2 deletions(-)
 create mode 100644 site/content/tutorial/14-composition/04-slot-props/app-a/App.svelte
 create mode 100644 site/content/tutorial/14-composition/04-slot-props/app-a/Hoverable.svelte
 create mode 100644 site/content/tutorial/14-composition/04-slot-props/app-b/App.svelte
 create mode 100644 site/content/tutorial/14-composition/04-slot-props/app-b/Hoverable.svelte
 create mode 100644 site/content/tutorial/14-composition/04-slot-props/text.md

diff --git a/site/content/tutorial/14-composition/04-slot-props/app-a/App.svelte b/site/content/tutorial/14-composition/04-slot-props/app-a/App.svelte
new file mode 100644
index 0000000000..65f714f2c5
--- /dev/null
+++ b/site/content/tutorial/14-composition/04-slot-props/app-a/App.svelte
@@ -0,0 +1,26 @@
+<script>
+	import Hoverable from './Hoverable.svelte';
+</script>
+
+<style>
+	div {
+		padding: 1em;
+		margin: 0 0 1em 0;
+		background-color: #eee;
+	}
+
+	.active {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
+
+<Hoverable>
+	<div class:active={hovering}>
+		{#if hovering}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/04-slot-props/app-a/Hoverable.svelte b/site/content/tutorial/14-composition/04-slot-props/app-a/Hoverable.svelte
new file mode 100644
index 0000000000..e02f788929
--- /dev/null
+++ b/site/content/tutorial/14-composition/04-slot-props/app-a/Hoverable.svelte
@@ -0,0 +1,15 @@
+<script>
+	let hovering;
+
+	function enter() {
+		hovering = true;
+	}
+
+	function leave() {
+		hovering = false;
+	}
+</script>
+
+<div on:mouseenter={enter} on:mouseleave={leave}>
+	<slot></slot>
+</div>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/04-slot-props/app-b/App.svelte b/site/content/tutorial/14-composition/04-slot-props/app-b/App.svelte
new file mode 100644
index 0000000000..36772a5077
--- /dev/null
+++ b/site/content/tutorial/14-composition/04-slot-props/app-b/App.svelte
@@ -0,0 +1,46 @@
+<script>
+	import Hoverable from './Hoverable.svelte';
+</script>
+
+<style>
+	div {
+		padding: 1em;
+		margin: 0 0 1em 0;
+		background-color: #eee;
+	}
+
+	.active {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
+
+<Hoverable let:hovering={active}>
+	<div class:active>
+		{#if active}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+
+<Hoverable let:hovering={active}>
+	<div class:active>
+		{#if active}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+
+<Hoverable let:hovering={active}>
+	<div class:active>
+		{#if active}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/04-slot-props/app-b/Hoverable.svelte b/site/content/tutorial/14-composition/04-slot-props/app-b/Hoverable.svelte
new file mode 100644
index 0000000000..69f2fc8ef6
--- /dev/null
+++ b/site/content/tutorial/14-composition/04-slot-props/app-b/Hoverable.svelte
@@ -0,0 +1,15 @@
+<script>
+	let hovering;
+
+	function enter() {
+		hovering = true;
+	}
+
+	function leave() {
+		hovering = false;
+	}
+</script>
+
+<div on:mouseenter={enter} on:mouseleave={leave}>
+	<slot hovering={hovering}></slot>
+</div>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/04-slot-props/text.md b/site/content/tutorial/14-composition/04-slot-props/text.md
new file mode 100644
index 0000000000..53f4e84590
--- /dev/null
+++ b/site/content/tutorial/14-composition/04-slot-props/text.md
@@ -0,0 +1,47 @@
+---
+title: Slot props
+---
+
+In this app, we have a `<Hoverable>` component that tracks whether the mouse is currently over it. It needs to pass that data *back* to the parent component, so that we can update the slotted contents.
+
+For this, we use *slot props*. In `Hoverable.svelte`, pass the `hovering` value into the slot:
+
+```html
+<div on:mouseenter={enter} on:mouseleave={leave}>
+	<slot hovering={hovering}></slot>
+</div>
+```
+
+> Remember you can also use the `{hovering}` shorthand, if you prefer.
+
+Then, to expose `hovering` to the contents of the `<Hoverable>` component, we use the `let` directive:
+
+```html
+<Hoverable let:hovering={hovering}>
+	<div class:active={hovering}>
+		{#if hovering}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+```
+
+You can rename the variable, if you want — let's call it `active` in the parent component:
+
+```html
+<Hoverable let:hovering={active}>
+	<div class:active>
+		{#if active}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+```
+
+You can have as many of these components you like, and the slotted props will remain local to the component where they're declared.
+
+> Named slots can also have props; use the `let` directive on an element with a `slot="..."` attribute, instead of on the component itself.
\ 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 2241e33245..8916aeeb00 100644
--- a/site/content/tutorial/99-todo/99-todo/text.md
+++ b/site/content/tutorial/99-todo/99-todo/text.md
@@ -72,6 +72,7 @@ Another one should cover how to set up an editor for syntax highlighting.
 * [x] Dimensions
 * [x] `this`
 * [ ] shorthand
+* [ ] component bindings
 
 Maybe lifecycle should go first, since we're using `onMount` in the `this` demo?
 
@@ -132,8 +133,8 @@ Maybe lifecycle should go first, since we're using `onMount` in the `this` demo?
 ## Composition
 
 * [x] `<slot>`
-* [ ] `<slot name="foo">`
-* [ ] `<slot bar={baz}>` and `let:bar`
+* [x] `<slot name="foo">`
+* [x] `<slot bar={baz}>` and `let:bar`
 
 
 ## Context