Merge pull request #2199 from sveltejs/examples

Examples

Author: Rich-Harris

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

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

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/nested-components/App.svelte renamed to site/content/examples/02-props/01-default-values/App.svelte

@@ -2,5 +2,5 @@
 	import Nested from './Nested.svelte';
 </script>
 
-<p>This is a top-level element.</p>
+<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}