Merge pull request #2199 from sveltejs/examples

Examples

site/content/examples/00-introduction/00-hello-world/App.svelte

@@ -0,0 +1,5 @@
+<script>
+	let name = 'world';
+</script>
+
+<h1>Hello {name}!</h1>

site/content/examples/00-introduction/00-hello-world/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Adding data"
+}

site/content/examples/00-introduction/01-dynamic-attributes/App.svelte

@@ -0,0 +1,7 @@
+<script>
+	let src = 'tutorial/image.gif';
+	let name = 'Rick Astley';
+</script>
+
+<!-- {src} is short for src={src} -->
+<img {src} alt="{name} dancing">

site/content/examples/00-introduction/01-dynamic-attributes/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Dynamic attributes"
+}

site/content/examples/00-introduction/02-styling/App.svelte

@@ -0,0 +1,9 @@
+<style>
+	p {
+		color: purple;
+		font-family: 'Comic Sans MS';
+		font-size: 2em;
+	}
+</style>
+
+<p>Styled!</p>

site/content/examples/00-introduction/02-styling/meta.json

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

site/content/examples/00-introduction/03-nested-components/App.svelte

@@ -0,0 +1,14 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<style>
+	p {
+		color: purple;
+		font-family: 'Comic Sans MS';
+		font-size: 2em;
+	}
+</style>
+
+<p>These styles...</p>
+<Nested/>

site/content/examples/00-introduction/03-nested-components/Nested.svelte

@@ -0,0 +1 @@
+<p>...don't affect this element</p>

site/content/examples/00-introduction/03-nested-components/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Nested components"
+}

site/content/examples/00-introduction/04-html-tags/App.svelte

@@ -0,0 +1,5 @@
+<script>
+	let string = `here's some <strong>HTML!!!</strong>`;
+</script>
+
+<p>{@html string}</p>

site/content/examples/00-introduction/04-html-tags/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "HTML tags"
+}

site/content/examples/00-introduction/meta.json

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

site/content/examples/01-reactivity/00-reactive-assignments/App.svelte

@@ -0,0 +1,11 @@
+<script>
+	let count = 0;
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	Clicked {count} {count === 1 ? 'time' : 'times'}
+</button>

site/content/examples/01-reactivity/00-reactive-assignments/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Reactive assignments"
+}

site/content/examples/01-reactivity/01-reactive-declarations/App.svelte

@@ -0,0 +1,18 @@
+<script>
+	let count = 1;
+
+	// the `$:` means 're-run whenever these values change'
+	$: doubled = count * 2;
+	$: quadrupled = doubled * 2;
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	Count: {count}
+</button>
+
+<p>{count} * 2 = {doubled}</p>
+<p>{doubled} * 2 = {quadrupled}</p>

site/content/examples/01-reactivity/01-reactive-declarations/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Reactive declarations"
+}

site/content/examples/01-reactivity/02-reactive-statements/App.svelte

@@ -0,0 +1,16 @@
+<script>
+	let count = 0;
+
+	$: if (count >= 10) {
+		alert(`count is dangerously high!`);
+		count = 9;
+	}
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	Clicked {count} {count === 1 ? 'time' : 'times'}
+</button>

site/content/examples/01-reactivity/02-reactive-statements/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Reactive statements"
+}

site/content/examples/01-reactivity/meta.json

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

site/content/examples/02-props/00-declaring-props/App.svelte

@@ -2,5 +2,4 @@
 	import Nested from './Nested.svelte';
 </script>
 
-<p>This is a top-level element.</p>
+<Nested answer={42}/>
-<Nested/>

site/content/examples/02-props/00-declaring-props/Nested.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let answer;
+</script>
+
+<p>The answer is {answer}</p>

site/content/examples/02-props/00-declaring-props/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Declaring props"
+}

site/content/examples/02-props/01-default-values/App.svelte

@@ -0,0 +1,6 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested answer={42}/>
+<Nested/>

site/content/examples/02-props/01-default-values/Nested.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let answer = 'a mystery';
+</script>
+
+<p>The answer is {answer}</p>

site/content/examples/02-props/01-default-values/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Default values"
+}

site/content/examples/02-props/02-spread-props/App.svelte

@@ -0,0 +1,12 @@
+<script>
+	import Info from './Info.svelte';
+
+	const pkg = {
+		name: 'svelte',
+		version: 3,
+		speed: 'blazing',
+		website: 'https://svelte.technology'
+	};
+</script>
+
+<Info {...pkg}/>

site/content/examples/02-props/02-spread-props/Info.svelte

@@ -0,0 +1,12 @@
+<script>
+	export let name;
+	export let version;
+	export let speed;
+	export let website;
+</script>
+
+<p>
+	The <code>{name}</code> package is {speed} fast.
+	Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
+	and <a href={website}>learn more here</a>
+</p>

site/content/examples/02-props/02-spread-props/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Spread props"
+}

site/content/examples/02-props/meta.json

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

site/content/examples/03-logic/00-if-blocks/App.svelte

@@ -0,0 +1,19 @@
+<script>
+	let user = { loggedIn: false };
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{/if}
+
+{#if !user.loggedIn}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}

site/content/examples/03-logic/00-if-blocks/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "If blocks"
+}

site/content/examples/03-logic/01-else-blocks/App.svelte

@@ -0,0 +1,17 @@
+<script>
+	let user = { loggedIn: false };
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{:else}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}

site/content/examples/03-logic/01-else-blocks/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Else blocks"
+}

site/content/examples/03-logic/02-else-if-blocks/App.svelte

@@ -0,0 +1,11 @@
+<script>
+	let x = 7;
+</script>
+
+{#if x > 10}
+	<p>{x} is greater than 10</p>
+{:else if 5 > x}
+	<p>{x} is less than 5</p>
+{:else}
+	<p>{x} is between 5 and 10</p>
+{/if}

site/content/examples/03-logic/02-else-if-blocks/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Else-if blocks"
+}

site/content/examples/03-logic/03-each-blocks/App.svelte

@@ -0,0 +1,17 @@
+<script>
+	let cats = [
+		{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
+		{ id: 'z_AbfPXTKms', name: 'Maru' },
+		{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
+	];
+</script>
+
+<h1>The Famous Cats of YouTube</h1>
+
+<ul>
+	{#each cats as { id, name }, i}
+		<li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
+			{i + 1}: {name}
+		</a></li>
+	{/each}
+</ul>

site/content/examples/03-logic/03-each-blocks/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Each blocks"
+}

site/content/examples/03-logic/04-keyed-each-blocks/App.svelte

@@ -0,0 +1,23 @@
+<script>
+	import Thing from './Thing.svelte';
+
+	let things = [
+		{ id: 1, value: 'a' },
+		{ id: 2, value: 'b' },
+		{ id: 3, value: 'c' },
+		{ id: 4, value: 'd' },
+		{ id: 5, value: 'e' }
+	];
+
+	function handleClick() {
+		things = things.slice(1);
+	}
+</script>
+
+<button on:click={handleClick}>
+	Remove first thing
+</button>
+
+{#each things as thing (thing.id)}
+	<Thing value={thing.value}/>
+{/each}

site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte

@@ -0,0 +1,9 @@
+<script>
+	// `value` is updated whenever the prop value changes...
+	export let value;
+
+	// ...but `valueAtStart` is fixed upon initialisation
+	const valueAtStart = value;
+</script>
+
+<p>{valueAtStart} / {value}</p>

site/content/examples/03-logic/04-keyed-each-blocks/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Keyed each blocks"
+}

site/content/examples/03-logic/05-await-blocks/App.svelte

@@ -0,0 +1,30 @@
+<script>
+	let promise = getRandomNumber();
+
+	async function getRandomNumber() {
+		const res = await fetch(`tutorial/random-number`);
+		const text = await res.text();
+
+		if (res.ok) {
+			return text;
+		} else {
+			throw new Error(text);
+		}
+	}
+
+	function handleClick() {
+		promise = getRandomNumber();
+	}
+</script>
+
+<button on:click={handleClick}>
+	generate random number
+</button>
+
+{#await promise}
+	<p>...waiting</p>
+{:then number}
+	<p>The number is {number}</p>
+{:catch error}
+	<p style="color: red">{error.message}</p>
+{/await}

site/content/examples/03-logic/05-await-blocks/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Await blocks"
+}

site/content/examples/03-logic/meta.json

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

site/content/examples/04-events/00-dom-events/App.svelte

@@ -0,0 +1,16 @@
+<script>
+	let m = { x: 0, y: 0 };
+
+	function handleMousemove(event) {
+		m.x = event.clientX;
+		m.y = event.clientY;
+	}
+</script>
+
+<style>
+	div { width: 100%; height: 100%; }
+</style>
+
+<div on:mousemove={handleMousemove}>
+	The mouse position is {m.x} x {m.y}
+</div>

site/content/examples/04-events/00-dom-events/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "DOM events"
+}

site/content/examples/04-events/01-inline-handlers/App.svelte

@@ -0,0 +1,11 @@
+<script>
+	let m = { x: 0, y: 0 };
+</script>
+
+<style>
+	div { width: 100%; height: 100%; }
+</style>
+
+<div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
+	The mouse position is {m.x} x {m.y}
+</div>

site/content/examples/04-events/01-inline-handlers/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Inline handlers"
+}

site/content/examples/04-events/02-event-modifiers/App.svelte

@@ -0,0 +1,9 @@
+<script>
+	function handleClick() {
+		alert('no more alerts')
+	}
+</script>
+
+<button on:click|once={handleClick}>
+	Click me
+</button>

site/content/examples/04-events/02-event-modifiers/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Event modifiers"
+}

site/content/examples/04-events/03-component-events/App.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Inner from './Inner.svelte';
+
+	function handleMessage(event) {
+		alert(event.detail.text);
+	}
+</script>
+
+<Inner on:message={handleMessage}/>

site/content/examples/04-events/03-component-events/Inner.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	function sayHello() {
+		dispatch('message', {
+			text: 'Hello!'
+		});
+	}
+</script>
+
+<button on:click={sayHello}>
+	Click to say hello
+</button>

site/content/examples/04-events/03-component-events/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Component events"
+}

site/content/examples/04-events/04-event-forwarding/App.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Outer from './Outer.svelte';
+
+	function handleMessage(event) {
+		alert(event.detail.text);
+	}
+</script>
+
+<Outer on:message={handleMessage}/>

site/content/examples/04-events/04-event-forwarding/Inner.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	function sayHello() {
+		dispatch('message', {
+			text: 'Hello!'
+		});
+	}
+</script>
+
+<button on:click={sayHello}>
+	Click to say hello
+</button>

site/content/examples/04-events/04-event-forwarding/Outer.svelte

@@ -0,0 +1,5 @@
+<script>
+	import Inner from './Inner.svelte';
+</script>
+
+<Inner on:message/>

site/content/examples/04-events/04-event-forwarding/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Event forwarding"
+}

site/content/examples/04-events/05-dom-event-forwarding/App.svelte

@@ -0,0 +1,9 @@
+<script>
+	import FancyButton from './FancyButton.svelte';
+
+	function handleClick() {
+		alert('clicked');
+	}
+</script>
+
+<FancyButton on:click={handleClick}/>

site/content/examples/04-events/05-dom-event-forwarding/FancyButton.svelte

@@ -0,0 +1,15 @@
+<style>
+	button {
+		font-family: 'Comic Sans MS';
+		font-size: 2em;
+		padding: 0.5em 1em;
+		color: royalblue;
+		background: gold;
+		border-radius: 1em;
+		box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+	}
+</style>
+
+<button on:click>
+	Click me
+</button>

site/content/examples/04-events/05-dom-event-forwarding/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "DOM event forwarding"
+}

site/content/examples/04-events/meta.json

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

site/content/examples/05-bindings/00-text-inputs/App.svelte

@@ -0,0 +1,6 @@
+<script>
+	let name = '';
+</script>
+
+<input bind:value={name} placeholder="enter your name">
+<p>Hello {name || 'stranger'}!</p>

site/content/examples/05-bindings/00-text-inputs/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Text inputs"
+}

site/content/examples/05-bindings/01-numeric-inputs/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>

site/content/examples/05-bindings/01-numeric-inputs/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Numeric inputs"
+}

site/content/examples/05-bindings/02-checkbox-inputs/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>

site/content/examples/05-bindings/02-checkbox-inputs/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Checkbox inputs"
+}

site/content/examples/05-bindings/03-group-inputs/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}

site/content/examples/05-bindings/03-group-inputs/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Group inputs"
+}

site/content/examples/05-bindings/04-textarea-inputs/App.svelte

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

site/content/examples/05-bindings/04-textarea-inputs/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Textarea inputs"
+}

site/content/examples/05-bindings/05-select-bindings/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>

site/content/examples/05-bindings/05-select-bindings/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Select bindings"
+}

site/content/examples/05-bindings/06-multiple-select-bindings/App.svelte

@@ -0,0 +1,53 @@
+<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>
+
+<select multiple bind:value={flavours}>
+	{#each menu as flavour}
+		<option value={flavour}>
+			{flavour}
+		</option>
+	{/each}
+</select>
+
+{#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}

site/content/examples/05-bindings/06-multiple-select-bindings/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Select multiple"
+}

site/content/examples/05-bindings/07-each-block-bindings/App.svelte

@@ -0,0 +1,39 @@
+<script>
+	let todos = [
+		{ done: false, text: 'finish Svelte tutorial' },
+		{ done: false, text: 'build an app' },
+		{ done: false, text: 'world domination' }
+	];
+
+	function add() {
+		todos = todos.concat({ done: false, text: '' });
+	}
+
+	function clear() {
+		todos = todos.filter(t => !t.done);
+	}
+</script>
+
+<h1>Todos</h1>
+
+{#each todos as todo}
+	<div>
+		<input
+			type=checkbox
+			bind:checked={todo.done}
+		>
+
+		<input
+			placeholder="What needs to be done?"
+			bind:value={todo.text}
+		>
+	</div>
+{/each}
+
+<button on:click={add}>
+	Add new
+</button>
+
+<button on:click={clear}>
+	Clear completed
+</button>

site/content/examples/05-bindings/07-each-block-bindings/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Each block bindings"
+}

site/content/examples/05-bindings/08-media-elements/App.svelte

@@ -0,0 +1,130 @@
+<script>
+	// These values are bound to properties of the video
+	let time = 0;
+	let duration;
+	let paused = true;
+
+	let showControls = true;
+	let showControlsTimeout;
+
+	function handleMousemove(e) {
+		// Make the controls visible, but fade out after
+		// 2.5 seconds of inactivity
+		clearTimeout(showControlsTimeout);
+		showControlsTimeout = setTimeout(() => showControls = false, 2500);
+		showControls = true;
+
+		if (e.which !== 1) return; // mouse not down
+		if (!duration) return; // video not loaded yet
+
+		const { left, right } = this.getBoundingClientRect();
+		time = duration * (e.clientX - left) / (right - left);
+	}
+
+	function handleMousedown(e) {
+		// we can't rely on the built-in click event, because it fires
+		// after a drag — we have to listen for clicks ourselves
+
+		function handleMouseup() {
+			if (paused) e.target.play();
+			else e.target.pause();
+			cancel();
+		}
+
+		function cancel() {
+			e.target.removeEventListener('mouseup', handleMouseup);
+		}
+
+		e.target.addEventListener('mouseup', handleMouseup);
+
+		setTimeout(cancel, 200);
+	}
+
+	function format(seconds) {
+		if (isNaN(seconds)) return '...';
+
+		const minutes = Math.floor(seconds / 60);
+		seconds = Math.floor(seconds % 60);
+		if (seconds < 10) seconds = '0' + seconds;
+
+		return `${minutes}:${seconds}`;
+	}
+</script>
+
+<style>
+	div {
+		position: relative;
+	}
+
+	.controls {
+		position: absolute;
+		top: 0;
+		width: 100%;
+		transition: opacity 1s;
+	}
+
+	.info {
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+	}
+
+	span {
+		padding: 0.2em 0.5em;
+		color: white;
+		text-shadow: 0 0 8px black;
+		font-size: 1.4em;
+		opacity: 0.7;
+	}
+
+	.time {
+		width: 3em;
+	}
+
+	.time:last-child { text-align: right }
+
+	progress {
+		display: block;
+		width: 100%;
+		height: 10px;
+		-webkit-appearance: none;
+		appearance: none;
+	}
+
+	progress::-webkit-progress-bar {
+		background-color: rgba(0,0,0,0.2);
+	}
+
+	progress::-webkit-progress-value {
+		background-color: rgba(255,255,255,0.6);
+	}
+
+	video {
+		width: 100%;
+	}
+</style>
+
+<h1>Caminandes: Llamigos</h1>
+<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
+
+<div>
+	<video
+		poster="http://svelte-assets.surge.sh/caminandes-llamigos.jpg"
+		src="http://svelte-assets.surge.sh/caminandes-llamigos.mp4"
+		on:mousemove={handleMousemove}
+		on:mousedown={handleMousedown}
+		bind:currentTime={time}
+		bind:duration
+		bind:paused
+	></video>
+
+	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
+		<progress value="{(time / duration) || 0}"/>
+
+		<div class="info">
+			<span class="time">{format(time)}</span>
+			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
+			<span class="time">{format(duration)}</span>
+		</div>
+	</div>
+</div>

site/content/examples/05-bindings/08-media-elements/meta.json

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

site/content/examples/05-bindings/09-dimensions/App.svelte

@@ -0,0 +1,20 @@
+<script>
+	let w;
+	let h;
+	let size = 42;
+	let text = 'edit me';
+</script>
+
+<style>
+	input { display: block; }
+	div { display: inline-block; }
+</style>
+
+<input type=range bind:value={size}>
+<input bind:value={text}>
+
+<p>size: {w}px x {h}px</p>
+
+<div bind:clientWidth={w} bind:clientHeight={h}>
+	<span style="font-size: {size}px">{text}</span>
+</div>

site/content/examples/05-bindings/09-dimensions/meta.json

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

site/content/examples/05-bindings/10-bind-this/App.svelte

@@ -0,0 +1,59 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let canvas;
+	let ctx;
+	let running = false;
+
+	const r = Math.random();
+
+	onMount(() => {
+		const ctx = canvas.getContext('2d');
+		let frame;
+
+		(function loop() {
+			frame = requestAnimationFrame(loop);
+
+			const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+			for (let p = 0; p < imageData.data.length; p += 4) {
+				const i = p / 4;
+				const x = i % canvas.width;
+				const y = i / canvas.height >>> 0;
+
+				const t = window.performance.now();
+
+				const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
+				const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1000));
+				const b = 128;
+
+				imageData.data[p + 0] = r;
+				imageData.data[p + 1] = g;
+				imageData.data[p + 2] = b;
+				imageData.data[p + 3] = 255;
+			}
+
+			ctx.putImageData(imageData, 0, 0);
+		}());
+
+		return () => {
+			cancelAnimationFrame(frame);
+		};
+	});
+</script>
+
+<style>
+	canvas {
+		width: 100%;
+		height: 100%;
+		background-color: #666;
+		-webkit-mask: url(logo-mask.svg) 50% 50% no-repeat;
+		mask: url(logo-mask.svg) 50% 50% no-repeat;
+	}
+</style>
+
+<canvas
+	bind:this={canvas}
+	width={32}
+	height={32}
+></canvas>

site/content/examples/05-bindings/10-bind-this/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "bind:this={canvas}"
+}

site/content/examples/05-bindings/11-component-bindings/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/examples/05-bindings/11-component-bindings/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/examples/05-bindings/11-component-bindings/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Component bindings"
+}

site/content/examples/05-bindings/meta.json

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

site/content/examples/06-lifecycle/00-onmount/App.svelte

@@ -0,0 +1,38 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let photos = [];
+
+	onMount(async () => {
+		const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);
+		photos = await res.json();
+	});
+</script>
+
+<style>
+	.photos {
+		width: 100%;
+		display: grid;
+		grid-template-columns: repeat(5, 1fr);
+		grid-gap: 8px;
+	}
+
+	figure, img {
+		width: 100%;
+		margin: 0;
+	}
+</style>
+
+<h1>Photo album</h1>
+
+<div class="photos">
+	{#each photos as photo}
+		<figure>
+			<img src={photo.thumbnailUrl} alt={photo.title}>
+			<figcaption>{photo.title}</figcaption>
+		</figure>
+	{:else}
+		<!-- this block renders when photos.length === 0 -->
+		<p>loading...</p>
+	{/each}
+</div>

site/content/examples/06-lifecycle/00-onmount/meta.json

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

site/content/examples/06-lifecycle/01-ondestroy/App.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { onInterval } from './utils.js';
+
+	let seconds = 0;
+	onInterval(() => seconds += 1, 1000);
+</script>
+
+<p>
+	The page has been open for
+	{seconds} {seconds === 1 ? 'second' : 'seconds'}
+</p>

site/content/examples/06-lifecycle/01-ondestroy/meta.json

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

site/content/examples/06-lifecycle/01-ondestroy/utils.js

@@ -0,0 +1,9 @@
+import { onDestroy } from 'svelte';
+
+export function onInterval(callback, milliseconds) {
+	const interval = setInterval(callback, milliseconds);
+
+	onDestroy(() => {
+		clearInterval(interval);
+	});
+}

site/content/examples/06-lifecycle/02-update/App.svelte

@@ -0,0 +1,106 @@
+<script>
+	import Eliza from 'elizanode';
+	import { beforeUpdate, afterUpdate } from 'svelte';
+
+	let div;
+	let autoscroll;
+
+	beforeUpdate(() => {
+		autoscroll = div && (div.offsetHeight + div.scrollTop) > (div.scrollHeight - 20);
+	});
+
+	afterUpdate(() => {
+		if (autoscroll) div.scrollTo(0, div.scrollHeight);
+	});
+
+	const eliza = new Eliza();
+
+	let comments = [
+		{ author: 'eliza', text: eliza.getInitial() }
+	];
+
+	function handleKeydown(event) {
+		if (event.which === 13) {
+			const text = event.target.value;
+			if (!text) return;
+
+			comments = comments.concat({
+				author: 'user',
+				text
+			});
+
+			event.target.value = '';
+
+			const reply = eliza.transform(text);
+
+			setTimeout(() => {
+				comments = comments.concat({
+					author: 'eliza',
+					text: '...',
+					placeholder: true
+				});
+
+				setTimeout(() => {
+					comments = comments.filter(comment => !comment.placeholder).concat({
+						author: 'eliza',
+						text: reply
+					});
+				}, 500 + Math.random() * 500);
+			}, 200 + Math.random() * 200);
+		}
+	}
+</script>
+
+<style>
+	.chat {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		max-width: 320px;
+	}
+
+	.scrollable {
+		flex: 1 1 auto;
+		border-top: 1px solid #eee;
+		margin: 0 0 0.5em 0;
+		overflow-y: auto;
+	}
+
+	article {
+		margin: 0.5em 0;
+	}
+
+	.user {
+		text-align: right;
+	}
+
+	span {
+		padding: 0.5em 1em;
+		display: inline-block;
+	}
+
+	.eliza span {
+		background-color: #eee;
+		border-radius: 1em 1em 1em 0;
+	}
+
+	.user span {
+		background-color: #0074D9;
+		color: white;
+		border-radius: 1em 1em 0 1em;
+	}
+</style>
+
+<div class="chat">
+	<h1>Eliza</h1>
+
+	<div class="scrollable" bind:this={div}>
+		{#each comments as comment}
+			<article class={comment.author}>
+				<span>{comment.text}</span>
+			</article>
+		{/each}
+	</div>
+
+	<input on:keydown={handleKeydown}>
+</div>

site/content/examples/06-lifecycle/02-update/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "beforeUpdate and afterUpdate"
+}

site/content/examples/06-lifecycle/03-tick/App.svelte

@@ -0,0 +1,37 @@
+<script>
+	import { tick } from 'svelte';
+
+	let text = `Select some text and hit the tab key to toggle uppercase`;
+
+	async function handleKeydown(event) {
+		if (event.which !== 9) return;
+
+		event.preventDefault();
+
+		const { selectionStart, selectionEnd, value } = this;
+		const selection = value.slice(selectionStart, selectionEnd);
+
+		const replacement = /[a-z]/.test(selection)
+			? selection.toUpperCase()
+			: selection.toLowerCase();
+
+		text = (
+			value.slice(0, selectionStart) +
+			replacement +
+			value.slice(selectionEnd)
+		);
+
+		await tick();
+		this.selectionStart = selectionStart;
+		this.selectionEnd = selectionEnd;
+	}
+</script>
+
+<style>
+	textarea {
+		width: 100%;
+		height: 200px;
+	}
+</style>
+
+<textarea value={text} on:keydown={handleKeydown}></textarea>

site/content/examples/06-lifecycle/03-tick/meta.json

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

site/content/examples/06-lifecycle/meta.json

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

site/content/examples/07-stores/00-writable-stores/App.svelte

@@ -0,0 +1,18 @@
+<script>
+	import { count } from './stores.js';
+	import Incrementer from './Incrementer.svelte';
+	import Decrementer from './Decrementer.svelte';
+	import Resetter from './Resetter.svelte';
+
+	let count_value;
+
+	const unsubscribe = count.subscribe(value => {
+		count_value = value;
+	});
+</script>
+
+<h1>The count is {count_value}</h1>
+
+<Incrementer/>
+<Decrementer/>
+<Resetter/>

site/content/examples/07-stores/00-writable-stores/Decrementer.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function decrement() {
+		count.update(n => n - 1);
+	}
+</script>
+
+<button on:click={decrement}>
+	-
+</button>

site/content/examples/07-stores/00-writable-stores/Incrementer.svelte

@@ -1,11 +1,11 @@
 <script>
-	let count = 0;
+	import { count } from './stores.js';
 
 	function increment() {
-		count += 1;
+		count.update(n => n + 1);
 	}
 </script>
 
 <button on:click={increment}>
-	clicks: {count}
+	+
 </button>

site/content/examples/07-stores/00-writable-stores/Resetter.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function reset() {
+		count.set(0);
+	}
+</script>
+
+<button on:click={reset}>
+	reset
+</button>