Svelte

svelte.md

1. Basics

<script>
	let name = 'world';
</script>

<h1>Hello {name}!</h1>

2. Component scoped styles

<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

<p>This is a paragraph.</p>

3. Imports

<script>
	import Nested from './Nested.svelte';
</script>

<Nested/>

4. Module bundlers

https://github.com/sveltejs/integrations#bundler-plugins

5. Handlers and reactivity

<script>
	let count = 0;
	function handleClick() {count++;}
</script>
<button on:click={handleClick}>Clicked {count}</button>

6. Reactive declarations

let count = 0;
$: doubled = count * 2;

7. Triggering reactivity

function addNumber() {
	numbers.push(numbers.length + 1);
	numbers = numbers; // assignment
}

8.1 Define prop

<script>
	export let answer;
</script>

<p>The answer is {answer}</p>

8.2 use prop

<script>
	import Nested from './Nested.svelte';
</script>

<Nested answer={42}/>

9. Spreading props

<Info {...pkg}/>

10. Logic in HTML

{#if user.loggedIn}
	<button on:click={toggle}>
		Log out
	</button>
{:else}
	<button on:click={toggle}>
		Log in
	</button>
{/if}

11. Loops

	{#each cats as cat}
		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
			{cat.name}
		</a></li>
	{/each}

12. Svelte's version of key

{#each things as thing (thing.id)}
	<Thing current={thing.color}/>
{/each}

13. Async

{#await promise}
	<p>...waiting</p>
{:then number}
	<p>The number is {number}</p>
{:catch error}
	<p style="color: red">{error.message}</p>
{/await}

14. Accessing event attributes

<script>
	let m = { x: 0, y: 0 };
	function handleMousemove(event) {
		m.x = event.clientX;
		m.y = event.clientY;
	}
</script>

<div on:mousemove={handleMousemove}>
	The mouse position is {m.x} x {m.y}
</div>

15. Event handler modifiers

<button on:click|once={handleClick}>
	Click me
</button>

16.1 Define a component event

<script>
	import {createEventDispatcher} from 'svelte';
	const dispatch = createEventDispatcher();
	function sayHello() {
		dispatch('message', {
			text: 'Hello...'
		});
	}
</script>
<button on:click={sayHello}>Hello</button>

16.2 Handle a component event

<script>
	import Inner from './Inner.svelte';
	function handleMessage(event) {
		alert(event.detail.text);
	}
</script>
<Inner on:message={handleMessage}/>

16.3 Event forwarding

<Inner on:message/> // we need to especially do this for HTML elements that need to send events outside

https://svelte.dev/tutorial/dom-event-forwarding

17. Binding values to inputs

<input bind:value={name}>

18. Type coerce inputs

<input type=number bind:value={a} min=0 max=10>