<svelte:self> chapter

site/content/tutorial/16-special-elements/01-self/app-a/App.svelte

@@ -0,0 +1,41 @@
+<script>
+	import Folder from './Folder.svelte';
+
+	let root = [
+		{
+			type: 'folder',
+			name: 'Important work stuff',
+			files: [
+				{ type: 'file', name: 'quarterly-results.xlsx' }
+			]
+		},
+		{
+			type: 'folder',
+			name: 'Animal GIFs',
+			files: [
+				{
+					type: 'folder',
+					name: 'Dogs',
+					files: [
+						{ type: 'file', name: 'treadmill.gif' },
+						{ type: 'file', name: 'rope-jumping.gif' }
+					]
+				},
+				{
+					type: 'folder',
+					name: 'Goats',
+					files: [
+						{ type: 'file', name: 'parkour.gif' },
+						{ type: 'file', name: 'rampage.gif' }
+					]
+				},
+				{ type: 'file', name: 'cat-roomba.gif' },
+				{ type: 'file', name: 'duck-shuffle.gif' },
+				{ type: 'file', name: 'monkey-on-a-pig.gif' }
+			]
+		},
+		{ type: 'file', name: 'TODO.md' }
+	];
+</script>
+
+<Folder name="Home" files={root} expanded/>

site/content/tutorial/16-special-elements/01-self/app-a/File.svelte

@@ -0,0 +1,14 @@
+<script>
+	export let name;
+	$: type = name.slice(name.lastIndexOf('.') + 1);
+</script>
+
+<style>
+	span {
+		padding: 0 0 0 1.5em;
+		background: 0 0.1em no-repeat;
+		background-size: 1em 1em;
+	}
+</style>
+
+<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>

site/content/tutorial/16-special-elements/01-self/app-a/Folder.svelte

@@ -0,0 +1,52 @@
+<script>
+	import File from './File.svelte';
+
+	export let expanded = false;
+	export let name;
+	export let files;
+
+	function toggle() {
+		expanded = !expanded;
+	}
+</script>
+
+<style>
+	span {
+		padding: 0 0 0 1.5em;
+		background: url(tutorial/icons/folder.svg) 0 0.1em no-repeat;
+		background-size: 1em 1em;
+		font-weight: bold;
+		cursor: pointer;
+	}
+
+	.expanded {
+		background-image: url(tutorial/icons/folder-open.svg);
+	}
+
+	ul {
+		padding: 0.2em 0 0 0.5em;
+		margin: 0 0 0 0.5em;
+		list-style: none;
+		border-left: 1px solid #eee;
+	}
+
+	li {
+		padding: 0.2em 0;
+	}
+</style>
+
+<span class:expanded on:click={toggle}>{name}</span>
+
+{#if expanded}
+	<ul>
+		{#each files as file}
+			<li>
+				{#if file.type === 'folder'}
+					<!-- show folder -->
+				{:else}
+					<File {...file}/>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{/if}

site/content/tutorial/16-special-elements/01-self/app-b/App.svelte

@@ -0,0 +1,41 @@
+<script>
+	import Folder from './Folder.svelte';
+
+	let root = [
+		{
+			type: 'folder',
+			name: 'Important work stuff',
+			files: [
+				{ type: 'file', name: 'quarterly-results.xlsx' }
+			]
+		},
+		{
+			type: 'folder',
+			name: 'Animal GIFs',
+			files: [
+				{
+					type: 'folder',
+					name: 'Dogs',
+					files: [
+						{ type: 'file', name: 'treadmill.gif' },
+						{ type: 'file', name: 'rope-jumping.gif' }
+					]
+				},
+				{
+					type: 'folder',
+					name: 'Goats',
+					files: [
+						{ type: 'file', name: 'parkour.gif' },
+						{ type: 'file', name: 'rampage.gif' }
+					]
+				},
+				{ type: 'file', name: 'cat-roomba.gif' },
+				{ type: 'file', name: 'duck-shuffle.gif' },
+				{ type: 'file', name: 'monkey-on-a-pig.gif' }
+			]
+		},
+		{ type: 'file', name: 'TODO.md' }
+	];
+</script>
+
+<Folder name="Home" files={root} expanded/>

site/content/tutorial/16-special-elements/01-self/app-b/File.svelte

@@ -0,0 +1,14 @@
+<script>
+	export let name;
+	$: type = name.slice(name.lastIndexOf('.') + 1);
+</script>
+
+<style>
+	span {
+		padding: 0 0 0 1.5em;
+		background: 0 0.1em no-repeat;
+		background-size: 1em 1em;
+	}
+</style>
+
+<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>

site/content/tutorial/16-special-elements/01-self/app-b/Folder.svelte

@@ -0,0 +1,52 @@
+<script>
+	import File from './File.svelte';
+
+	export let expanded = false;
+	export let name;
+	export let files;
+
+	function toggle() {
+		expanded = !expanded;
+	}
+</script>
+
+<style>
+	span {
+		padding: 0 0 0 1.5em;
+		background: url(tutorial/icons/folder.svg) 0 0.1em no-repeat;
+		background-size: 1em 1em;
+		font-weight: bold;
+		cursor: pointer;
+	}
+
+	.expanded {
+		background-image: url(tutorial/icons/folder-open.svg);
+	}
+
+	ul {
+		padding: 0.2em 0 0 0.5em;
+		margin: 0 0 0 0.5em;
+		list-style: none;
+		border-left: 1px solid #eee;
+	}
+
+	li {
+		padding: 0.2em 0;
+	}
+</style>
+
+<span class:expanded on:click={toggle}>{name}</span>
+
+{#if expanded}
+	<ul>
+		{#each files as file}
+			<li>
+				{#if file.type === 'folder'}
+					<svelte:self {...file}/>
+				{:else}
+					<File {...file}/>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{/if}

site/content/tutorial/16-special-elements/01-self/text.md

@@ -0,0 +1,25 @@
+---
+title: <svelte:self>
+---
+
+Svelte provides a variety of built-in elements. The first, `<svelte:self>`, allows a component to contain itself recursively.
+
+It's useful for things like this folder tree view, where folders can contain *other* folders. In `Folder.svelte` we want to be able to do this...
+
+```html
+{#if file.type === 'folder'}
+	<Folder {...file}/>
+{:else}
+	<File {...file}/>
+{/if}
+```
+
+...but that's impossible, because a file can't import itself. Instead, we use `<svelte:self>`:
+
+```html
+{#if file.type === 'folder'}
+	<svelte:self {...file}/>
+{:else}
+	<File {...file}/>
+{/if}
+```

site/content/tutorial/16-special-elements/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Special elements"
+}

site/content/tutorial/99-todo/99-todo/text.md

@@ -52,8 +52,7 @@ Another one should cover how to set up an editor for syntax highlighting.
 
 * [x] `export let foo`
 * [x] `export let foo = 1`
-
+* [ ] spread props
-
 * [ ] `export function foo(){...}`
 
 
@@ -140,7 +139,7 @@ Maybe lifecycle should go first, since we're using `onMount` in the `this` demo?
 
 ## Context
 
-* [ ] `setContext` and `getContext`
+* [x] `setContext` and `getContext`
 
 
 ## Special elements

site/static/tutorial/icons/folder-open.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
+	<path fill="#ff3e00" d="M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z" />
+</svg>

site/static/tutorial/icons/folder.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
+	<path fill="#ff3e00" d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z" />
+</svg>

site/static/tutorial/icons/gif.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
+	<path fill="#ff3e00" d="M11,8H13V16H11V8M7.67,8H4.33C3.53,8 3,8.67 3,9.33V14.67C3,15.33 3.53,16 4.33,16H7.67C8.47,16 9,15.33 9,14.67V12H7V14H5V10H9V9.33C9,8.67 8.47,8 7.67,8M21,10V8H15V16H17V14H19.5V12H17V10H21Z" />
+</svg>

site/static/tutorial/icons/md.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
+	<path fill="#ff3e00" d="M2,16V8H4L7,11L10,8H12V16H10V10.83L7,13.83L4,10.83V16H2M16,8H19V12H21.5L17.5,16.5L13.5,12H16V8Z" />
+</svg>

site/static/tutorial/icons/xlsx.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
+	<path fill="#ff3e00" d="M14,17H7V15H14M17,13H7V11H17M17,9H7V7H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" />
+</svg>