spO0q 🐒🎃Be aware it's not an exhaustive list.
Basic Concepts
Svelte is a phenomenal JavaScript compiler that generates blazing fast and highly interactive apps.
Reactivity
It measures how the DOM syncs with the current state’s updates. Most Javascript frameworks, such as React, adds an intermediary layer for that. In React, it’s the virtual DOM. In Svelte, it’s the build time.
Looks familiar?
Svelte is pretty close to pure HTML, CSS, and Js. However, it adds a few extensions to save time and generate an ultra-optimized vanilla JavaScript bundle.
.svelte files
Components are .svelte files that use a superset of HTML.
Typical structure
project
│
├── .gitignore
├── node_modules/
├── src/
│ ├── App.svelte
│ └── main.js
│
├── scripts/
│ └── special-script.js (optional)
│
├── public/
│ ├── global-styles.css
│ ├── index.html
│ └── favicon.png
│
├── LICENSE
├── README.md
├── rollup.config.js
└── package.json
No virtual DOM
Virtual DOM is pure overhead for Svelte lovers, but I don't think you should focus on that point. Instead, the coolest thing is that you can get the same model and features provided by React and other frameworks without any diff algorithm and its limitation.
Source: virtual DOM is pure overhead
Svelte compilation
Read the compiler handbook
(pretty hard to find better explanation!)
Svelte styles
Scoped styles
Don't be confused by the typical structure. While you can have global styles, each component has its own automatically scoped styles:
// section.svelte
<style>
section {
background-color: limegreen;
color: black;
}
</style>
<section>
<slot/>
</section>
Svelte auto-generates classes, for example, svelte-1kxxubc, which is a hash of your component styles.
Custom CSS classes
// paragraph.svelte
<style>
.para {
background-color: limegreen;
color: black;
}
.graph {
letter-spacing: -.1em;
}
</style>
<p class:para class:graph>
<slot/>
</p>
Dynamic CSS
<script>
export let color = "fuschia";
</script>
<style>
p {
color: {color}
}
</style>
<p>I'm a FBI agent</p>
Variables
Basics
<script>
export let a = 'a';
</script>
<p>It's {a}</p>
Destructuring
$: (dollar label) is Svelte magic to make things reactive automatically:
<script>
export let article;
$: ({ title, excerpt, url } = article);
</script>
<article>
<h2><a href="{url}">{title}</a></h2>
<p>{excerpt}</p>
</article>
Import
<script>
import z from 'external';
</script>
<p>It's {z}</p>
Loop, loop, loop...
<script>
export let items = [
'item1',
'item2',
'item3',
];
</script>
<ol>
{#each items as item}
<li>{item}</li>
{/each}
</ol>
Destructuring and loop
<script>
export let articles;
</script>
{#each articles as {title, url, excerpt }}
<article>
<h2><a href="{url}">{title}</a></h2>
<p>{excerpt}</p>
</article>
{/each}
Conditions
{#if CONDITION1}
<p>case 1</p>
{:else if CONDITION2}
<p>case 2</p>
{:else}
<p>everything else</p>
{/if}
Events
You can use on:EVENT, for example, on:click or on:mouseup.
<script>
let count = 1;
const increment = () => {
count += 1
}
</script>
<p>counter: {count}
<button on:click={increment}>Increment</button>
Lifecycle onmount
After the first render:
<script>
import { onMount } from 'svelte';
let data = [];
onMount(async () => {
const res = await fetch(`https://myapi.com/endpoint`);
data = await res.json();
});
</script>
Dispatcher
Dispatcher is meant for custom events (not like classic DOM events). Svelte provides createEventDispatcher for that:
// Button.svelte
<button on:click={fireStarter}>
Custom click event
</button>
<script>
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
export let fireStarter = () => dispatch("fireStarter");
</script>
<script>
import Button from './Button.svelte';
</script>
<Button on:fireStarter={() => console.log('fire starter')} />
Passing props
// ChildComponent.svelte
<script>
export let text = "no one" // default value
</script>
<h1>Cotton-eyed {text}</h1>
// App.svelte
<script>
import ChildComponent from './ChildComponent.svelte'
</script>
<ChildComponent text="joe" /> // <h1>Cotton-eyed joe</h1>
Bindings
Svelte allows you to attach event handlers to elements with a very convenient and readable syntax.
bind:value
<script>
let guy = "cotton-eyed joe"
</script>
<input bind:value={guy}>
<p>Where did you come from? Where did you go? {guy}</p>
bind:checked
<script>
let show = false;
</script>
<label>
<input type="checkbox" bind:checked="{show}" />
Show
</label>
{#if show}
Hello
{:else}
Bye
{/if}
bind:group
A practical use is for radio inputs
bind:this
<script>
import { onMount } from 'svelte';
let canvasElement;
onMount(() => {
const ctx = canvasElement.getContext('2d');
drawStuff(ctx);
});
</script>
Stores
Stores help passing data between components when you don’t have only parent-child relationships in your component hierarchy.
You can read this Introduction.
Transitions
Svelte handles transitions natively. You can even pass parameters.
Slots
slot elements allow for nesting one or several components inside another. You can also pass data from children to the parent.
<script>
import Article from "./Article.svelte";
</script>
<Article>
<span slot="title">Title1</span>
<span slot="excerpt">excerpt1</span>
</Article>
// Article.svelte
<article>
<h2>
<slot name="title">
<span class="error">No title</span>
</slot>
</h2>
<slot name="excerpt">
<span class="error">No excerpt</span>
</slot>
</article>
Debug
To inspect value, it’s best to use {@debug VAR}:
{@debug post}
<h1>{post.title}</h1>
It inspects the variable and pause the execution.
Svelte frameworks
There are helpful resources to ease your dev:
Sveltekit
npm init svelte@next my-app
cd my-app
npm install
npm run dev -- --open
