My Svelte 3 cheat sheet

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/else if/else
{#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.

Counter on click
<script>
let count = 1;
const increment = () => {
    count += 1
}
</script>

<p>counter: {count}</p>
<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

To pass props to the child component:

Simple prop
// 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>
Spread operator
// ChildComponent.svelte
<script>
export let title = "default title"
export let excerpt = "default excerpt"
export let url = "https://google.it"
</script>
<article>
  <h1>{title}</h1>
  <p>{excerpt}</p>
  <a href="{url}">Read more</a>
</article>
// App.svelte
<script>
  import ChildComponent from './ChildComponent.svelte'
  const post = {
title: "My Svelte 3 Cheat Sheet",
excerpt: "Svelte for the win.",
url: "https://blog.julien-maury.dev/en/cheat-sheets/svelte3/"
  };
</script>

<ChildComponent  {...post} />

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>
  <p>
    <slot name="excerpt">
      <span class="error">No excerpt</span>
    </slot>
  </p>
</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
Source: kit.svelte.dev
Plenti What is Plenti?