DEV Community

Julien Maury
Julien Maury

Posted on • Updated on • Originally published at blog.julien-maury.dev

Another Svelte3 cheat sheet

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Dynamic CSS

<script>
    export let color = "fuschia";
  </script>

  <style>
    p {
        color: {color}
    }
  </style>

  <p>I'm a FBI agent</p>
Enter fullscreen mode Exit fullscreen mode

Variables

Basics

<script>
    export let a = 'a';
</script>

<p>It's {a}</p>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Import

<script>
    import z from 'external';
</script>

<p>It's {z}</p>
Enter fullscreen mode Exit fullscreen mode

Loop, loop, loop...

<script>
    export let items = [
        'item1',
        'item2',
        'item3',
    ];
    </script>
    <ol>
    {#each items as item}
        <li>{item}</li>
    {/each}
    </ol>
Enter fullscreen mode Exit fullscreen mode

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}
Enter fullscreen mode Exit fullscreen mode

Conditions

{#if CONDITION1}
    <p>case 1</p>
{:else if CONDITION2}
    <p>case 2</p>
{:else}
    <p>everything else</p>
{/if}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
<script>
  import Button from './Button.svelte';
</script>
<Button on:fireStarter={() => console.log('fire starter')} />
Enter fullscreen mode Exit fullscreen mode

Passing props

// ChildComponent.svelte
<script>
  export let text = "no one" // default value
</script>
<h1>Cotton-eyed {text}</h1>
Enter fullscreen mode Exit fullscreen mode
// App.svelte
<script>
  import ChildComponent from './ChildComponent.svelte'
</script>

<ChildComponent text="joe" /> // <h1>Cotton-eyed joe</h1>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

bind:checked

<script>
    let show = false;
  </script>

  <label>
    <input type="checkbox" bind:checked="{show}" />
    Show
  </label>  
  {#if show}
  Hello
  {:else}
  Bye
  {/if} 
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
// 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>
Enter fullscreen mode Exit fullscreen mode

Debug

To inspect value, it’s best to use {@debug VAR}:

{@debug post}
<h1>{post.title}</h1>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Source: kit.svelte.dev

Plenti

What is Plenti?

Discussion (1)

Some comments have been hidden by the post's author - find out more