From 3e7eafe9deba949c5644262824130782c213ccda Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Thu, 7 Mar 2019 22:24:29 -0500
Subject: [PATCH] chapters on <svelte:component> and <svelte:window>

---
 .../app-a/App.svelte                          |  0
 .../app-a/File.svelte                         |  0
 .../app-a/Folder.svelte                       |  0
 .../app-b/App.svelte                          |  0
 .../app-b/File.svelte                         |  0
 .../app-b/Folder.svelte                       |  0
 .../{01-self => 01-svelte-self}/text.md       |  0
 .../02-svelte-component/app-a/App.svelte      | 27 ++++++
 .../app-a/BlueThing.svelte                    |  5 ++
 .../app-a/GreenThing.svelte                   |  5 ++
 .../02-svelte-component/app-a/RedThing.svelte |  5 ++
 .../02-svelte-component/app-b/App.svelte      | 21 +++++
 .../app-b/BlueThing.svelte                    |  5 ++
 .../app-b/GreenThing.svelte                   |  5 ++
 .../02-svelte-component/app-b/RedThing.svelte |  5 ++
 .../02-svelte-component/text.md               | 23 +++++
 .../03-svelte-window/app-a/App.svelte         | 42 ++++++++++
 .../03-svelte-window/app-b/App.svelte         | 42 ++++++++++
 .../03-svelte-window/text.md                  | 11 +++
 .../app-a/App.svelte                          | 84 +++++++++++++++++++
 .../app-b/App.svelte                          | 84 +++++++++++++++++++
 .../04-svelte-window-bindings/text.md         | 21 +++++
 site/content/tutorial/99-todo/99-todo/text.md |  6 +-
 23 files changed, 388 insertions(+), 3 deletions(-)
 rename site/content/tutorial/16-special-elements/{01-self => 01-svelte-self}/app-a/App.svelte (100%)
 rename site/content/tutorial/16-special-elements/{01-self => 01-svelte-self}/app-a/File.svelte (100%)
 rename site/content/tutorial/16-special-elements/{01-self => 01-svelte-self}/app-a/Folder.svelte (100%)
 rename site/content/tutorial/16-special-elements/{01-self => 01-svelte-self}/app-b/App.svelte (100%)
 rename site/content/tutorial/16-special-elements/{01-self => 01-svelte-self}/app-b/File.svelte (100%)
 rename site/content/tutorial/16-special-elements/{01-self => 01-svelte-self}/app-b/Folder.svelte (100%)
 rename site/content/tutorial/16-special-elements/{01-self => 01-svelte-self}/text.md (100%)
 create mode 100644 site/content/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte
 create mode 100644 site/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte
 create mode 100644 site/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte
 create mode 100644 site/content/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte
 create mode 100644 site/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte
 create mode 100644 site/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte
 create mode 100644 site/content/tutorial/16-special-elements/02-svelte-component/text.md
 create mode 100644 site/content/tutorial/16-special-elements/03-svelte-window/app-a/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/03-svelte-window/app-b/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/03-svelte-window/text.md
 create mode 100644 site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-a/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-b/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/04-svelte-window-bindings/text.md

diff --git a/site/content/tutorial/16-special-elements/01-self/app-a/App.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/01-self/app-a/App.svelte
rename to site/content/tutorial/16-special-elements/01-svelte-self/app-a/App.svelte
diff --git a/site/content/tutorial/16-special-elements/01-self/app-a/File.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/01-self/app-a/File.svelte
rename to site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte
diff --git a/site/content/tutorial/16-special-elements/01-self/app-a/Folder.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/01-self/app-a/Folder.svelte
rename to site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
diff --git a/site/content/tutorial/16-special-elements/01-self/app-b/App.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/01-self/app-b/App.svelte
rename to site/content/tutorial/16-special-elements/01-svelte-self/app-b/App.svelte
diff --git a/site/content/tutorial/16-special-elements/01-self/app-b/File.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/01-self/app-b/File.svelte
rename to site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte
diff --git a/site/content/tutorial/16-special-elements/01-self/app-b/Folder.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
similarity index 100%
rename from site/content/tutorial/16-special-elements/01-self/app-b/Folder.svelte
rename to site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
diff --git a/site/content/tutorial/16-special-elements/01-self/text.md b/site/content/tutorial/16-special-elements/01-svelte-self/text.md
similarity index 100%
rename from site/content/tutorial/16-special-elements/01-self/text.md
rename to site/content/tutorial/16-special-elements/01-svelte-self/text.md
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
new file mode 100644
index 0000000000..9fbec68593
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
@@ -0,0 +1,27 @@
+<script>
+	import RedThing from './RedThing.svelte';
+	import GreenThing from './GreenThing.svelte';
+	import BlueThing from './BlueThing.svelte';
+
+	const options = [
+		{ color: 'red',   component: RedThing   },
+		{ color: 'green', component: GreenThing },
+		{ color: 'blue',  component: BlueThing  },
+	];
+
+	let selected = options[0];
+</script>
+
+<select bind:value={selected}>
+	{#each options as option}
+		<option value={option}>{option.color}</option>
+	{/each}
+</select>
+
+{#if selected.color === 'red'}
+	<RedThing/>
+{:else if selected.color === 'green'}
+	<GreenThing/>
+{:else if selected.color === 'blue'}
+	<BlueThing/>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte
new file mode 100644
index 0000000000..f9130d9d65
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte
@@ -0,0 +1,5 @@
+<style>
+	strong { color: blue; }
+</style>
+
+<strong>blue thing</strong>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte
new file mode 100644
index 0000000000..9cbee235d3
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte
@@ -0,0 +1,5 @@
+<style>
+	strong { color: green; }
+</style>
+
+<strong>green thing</strong>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte
new file mode 100644
index 0000000000..42f5e4c672
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte
@@ -0,0 +1,5 @@
+<style>
+	strong { color: red; }
+</style>
+
+<strong>red thing</strong>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
new file mode 100644
index 0000000000..a510fa8ad8
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
@@ -0,0 +1,21 @@
+<script>
+	import RedThing from './RedThing.svelte';
+	import GreenThing from './GreenThing.svelte';
+	import BlueThing from './BlueThing.svelte';
+
+	const options = [
+		{ color: 'red',   component: RedThing   },
+		{ color: 'green', component: GreenThing },
+		{ color: 'blue',  component: BlueThing  },
+	];
+
+	let selected = options[0];
+</script>
+
+<select bind:value={selected}>
+	{#each options as option}
+		<option value={option}>{option.color}</option>
+	{/each}
+</select>
+
+<svelte:component this={selected.component}/>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte
new file mode 100644
index 0000000000..f9130d9d65
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte
@@ -0,0 +1,5 @@
+<style>
+	strong { color: blue; }
+</style>
+
+<strong>blue thing</strong>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte
new file mode 100644
index 0000000000..9cbee235d3
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte
@@ -0,0 +1,5 @@
+<style>
+	strong { color: green; }
+</style>
+
+<strong>green thing</strong>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte
new file mode 100644
index 0000000000..42f5e4c672
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte
@@ -0,0 +1,5 @@
+<style>
+	strong { color: red; }
+</style>
+
+<strong>red thing</strong>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/text.md b/site/content/tutorial/16-special-elements/02-svelte-component/text.md
new file mode 100644
index 0000000000..57a6a3b531
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/text.md
@@ -0,0 +1,23 @@
+---
+title: <svelte:component>
+---
+
+A component can change its category altogether with `<svelte:component>`. Instead of a sequence of `if` blocks...
+
+```html
+{#if selected.color === 'red'}
+	<RedThing/>
+{:else if selected.color === 'green'}
+	<GreenThing/>
+{:else if selected.color === 'blue'}
+	<BlueThing/>
+{/if}
+```
+
+...we can have a single dynamic component:
+
+```html
+<svelte:component this={selected.component}/>
+```
+
+The `this` value can be any component constructor, or a falsy value — if it's falsy, no component is rendered.
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/03-svelte-window/app-a/App.svelte b/site/content/tutorial/16-special-elements/03-svelte-window/app-a/App.svelte
new file mode 100644
index 0000000000..9fe2bf526c
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/03-svelte-window/app-a/App.svelte
@@ -0,0 +1,42 @@
+<script>
+	let key;
+	let keyCode;
+
+	function handleKeydown(event) {
+		key = event.key;
+		keyCode = event.keyCode;
+	}
+</script>
+
+<style>
+	div {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+	}
+
+	kbd {
+		background-color: #eee;
+		border-radius: 4px;
+		font-size: 6em;
+		padding: 0.2em 0.5em;
+		border-top: 5px solid rgba(255,255,255,0.5);
+		border-left: 5px solid rgba(255,255,255,0.5);
+		border-right: 5px solid rgba(0,0,0,0.2);
+		border-bottom: 5px solid rgba(0,0,0,0.2);
+		color: #555;
+	}
+</style>
+
+<svelte:window/>
+
+<div style="text-align: center">
+	{#if key}
+		<kbd>{key === ' ' ? 'Space' : key}</kbd>
+		<p>{keyCode}</p>
+	{:else}
+		<p>Focus this window and press any key</p>
+	{/if}
+</div>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/03-svelte-window/app-b/App.svelte b/site/content/tutorial/16-special-elements/03-svelte-window/app-b/App.svelte
new file mode 100644
index 0000000000..845d666dff
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/03-svelte-window/app-b/App.svelte
@@ -0,0 +1,42 @@
+<script>
+	let key;
+	let keyCode;
+
+	function handleKeydown(event) {
+		key = event.key;
+		keyCode = event.keyCode;
+	}
+</script>
+
+<style>
+	div {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+	}
+
+	kbd {
+		background-color: #eee;
+		border-radius: 4px;
+		font-size: 6em;
+		padding: 0.2em 0.5em;
+		border-top: 5px solid rgba(255,255,255,0.5);
+		border-left: 5px solid rgba(255,255,255,0.5);
+		border-right: 5px solid rgba(0,0,0,0.2);
+		border-bottom: 5px solid rgba(0,0,0,0.2);
+		color: #555;
+	}
+</style>
+
+<svelte:window on:keydown={handleKeydown}/>
+
+<div style="text-align: center">
+	{#if key}
+		<kbd>{key === ' ' ? 'Space' : key}</kbd>
+		<p>{keyCode}</p>
+	{:else}
+		<p>Focus this window and press any key</p>
+	{/if}
+</div>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/03-svelte-window/text.md b/site/content/tutorial/16-special-elements/03-svelte-window/text.md
new file mode 100644
index 0000000000..2715da7260
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/03-svelte-window/text.md
@@ -0,0 +1,11 @@
+---
+title: <svelte:window>
+---
+
+Just as you can add event listeners to any DOM element, you can add event listeners to the `window` object with `<svelte:window>`.
+
+On line 33, add the `keydown` listener:
+
+```html
+<svelte:window on:keydown={handleKeydown}/>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-a/App.svelte b/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-a/App.svelte
new file mode 100644
index 0000000000..480ba4419e
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-a/App.svelte
@@ -0,0 +1,84 @@
+<script>
+	const layers = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+
+	let y;
+</script>
+
+<svelte:window/>
+
+<a class="parallax-container" href="https://www.firewatchgame.com">
+	{#each [0, 1, 2, 3, 4, 5, 6, 7, 8] as layer}
+		<img
+			style="transform: translate(0,{-y * layer / (layers.length - 1)}px)"
+			src="https://www.firewatchgame.com/images/parallax/parallax{layer}.png"
+			alt="parallax layer {layer}"
+		>
+	{/each}
+</a>
+
+<div class="text">
+	<span style="opacity: {1 - Math.max(0, y / 40)}">
+		scroll down
+	</span>
+
+	<div class="foreground">
+		You have scrolled {y} pixels
+	</div>
+</div>
+
+<style>
+	.parallax-container {
+		position: fixed;
+		width: 2400px;
+		height: 712px;
+		left: 50%;
+		transform: translate(-50%,0);
+	}
+
+	.parallax-container img {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		will-change: transform;
+	}
+
+	.parallax-container img:last-child::after {
+		content: '';
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		background: rgb(45,10,13);
+	}
+
+	.text {
+		position: relative;
+		width: 100%;
+		height: 300vh;
+		color: rgb(220,113,43);
+		text-align: center;
+		padding: 4em 0.5em 0.5em 0.5em;
+		box-sizing: border-box;
+		pointer-events: none;
+	}
+
+	span {
+		display: block;
+		font-size: 1em;
+		text-transform: uppercase;
+		will-change: transform, opacity;
+	}
+
+	.foreground {
+		position: absolute;
+		top: 711px;
+		left: 0;
+		width: 100%;
+		height: calc(100% - 712px);
+		background-color: rgb(32,0,1);
+		color: white;
+		padding: 50vh 0 0 0;
+	}
+
+	:global(body) { margin: 0; padding: 0; }
+</style>
diff --git a/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-b/App.svelte b/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-b/App.svelte
new file mode 100644
index 0000000000..a4b6f927b7
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-b/App.svelte
@@ -0,0 +1,84 @@
+<script>
+	const layers = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+
+	let y;
+</script>
+
+<svelte:window bind:scrollY={y}/>
+
+<a class="parallax-container" href="https://www.firewatchgame.com">
+	{#each [0, 1, 2, 3, 4, 5, 6, 7, 8] as layer}
+		<img
+			style="transform: translate(0,{-y * layer / (layers.length - 1)}px)"
+			src="https://www.firewatchgame.com/images/parallax/parallax{layer}.png"
+			alt="parallax layer {layer}"
+		>
+	{/each}
+</a>
+
+<div class="text">
+	<span style="opacity: {1 - Math.max(0, y / 40)}">
+		scroll down
+	</span>
+
+	<div class="foreground">
+		You have scrolled {y} pixels
+	</div>
+</div>
+
+<style>
+	.parallax-container {
+		position: fixed;
+		width: 2400px;
+		height: 712px;
+		left: 50%;
+		transform: translate(-50%,0);
+	}
+
+	.parallax-container img {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		will-change: transform;
+	}
+
+	.parallax-container img:last-child::after {
+		content: '';
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		background: rgb(45,10,13);
+	}
+
+	.text {
+		position: relative;
+		width: 100%;
+		height: 300vh;
+		color: rgb(220,113,43);
+		text-align: center;
+		padding: 4em 0.5em 0.5em 0.5em;
+		box-sizing: border-box;
+		pointer-events: none;
+	}
+
+	span {
+		display: block;
+		font-size: 1em;
+		text-transform: uppercase;
+		will-change: transform, opacity;
+	}
+
+	.foreground {
+		position: absolute;
+		top: 711px;
+		left: 0;
+		width: 100%;
+		height: calc(100% - 712px);
+		background-color: rgb(32,0,1);
+		color: white;
+		padding: 50vh 0 0 0;
+	}
+
+	:global(body) { margin: 0; padding: 0; }
+</style>
diff --git a/site/content/tutorial/16-special-elements/04-svelte-window-bindings/text.md b/site/content/tutorial/16-special-elements/04-svelte-window-bindings/text.md
new file mode 100644
index 0000000000..c4653e0948
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/04-svelte-window-bindings/text.md
@@ -0,0 +1,21 @@
+---
+title: <svelte:window> bindings
+---
+
+We can also bind to certain properties of `window`, such as `scrollY`. Update line 7:
+
+```html
+<svelte:window bind:scrollY={y}/>
+```
+
+The list of properties you can bind to is as follows:
+
+* `innerWidth`
+* `innerHeight`
+* `outerWidth`
+* `outerHeight`
+* `scrollX`
+* `scrollY`
+* `online` — an alias for `window.navigator.onLine`
+
+All except `scrollX` and `scrollY` are readonly.
\ 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 ce1eef5fe5..42eb753866 100644
--- a/site/content/tutorial/99-todo/99-todo/text.md
+++ b/site/content/tutorial/99-todo/99-todo/text.md
@@ -144,9 +144,9 @@ Maybe lifecycle should go first, since we're using `onMount` in the `this` demo?
 
 ## Special elements
 
-* [ ] `<svelte:self>`
-* [ ] `<svelte:component>`
-* [ ] `<svelte:window>`
+* [x] `<svelte:self>`
+* [x] `<svelte:component>`
+* [x] `<svelte:window>`
 * [ ] `<svelte:body>`
 * [ ] `<svelte:head>`