spO0q

Posted on Jan 27, 2022 • Edited on Jan 28, 2023

Another Svelte3 cheat sheet

#svelte #javascript

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