7 Svelte features that bring me joy
When you learn Svelte for the first time, there are lots of little things that put a smile on your face. Some of the little shortcuts are so elegant, they make things so much easier with cleaner, more succinct code. I recorded a video for YouTube with a demo of seven of my favourite features put together.
1. bind:property
In Svelte, you can very easily bind a property of a DOM element to a local variable. For example, you can bind a variable to the value of an input.
<script>
let name = '';
</script>
<input bind:value={name}/>2. Directive shortcuts
There's a bunch of really cool shortcuts in Svelte that make using directives and passing props even more succinct. If the property name and variable name are the same, you can write them like this:
<script>
let value = '';
let active = false;
</script>
<input bind:value class:active/>It's shortcuts like this that make Svelte a real pleasure to work with.
3. Scoped CSS
In your Svelte components, any CSS inside a <style> block will be scoped to that component. That means, a lot of the time you won't need to add classes or IDs for styling. You can often just use the tag name for styling, without any risk of messing up the CSS of the rest of the page.
<style>
/* No class needed! */
button {
font-size: 200%;
background: red;
}
</style>
<button>Click me</button>4. DOM Event Modifiers
If you've ever added a submit handler to a form, or a click handler to a link, and you wanted to handle the event without having the page refresh, you've had to call event.preventDefault() in the handler function. Svelte makes this super easy using a "modifier".
<script>
function handleSubmit() {
// don't need to call preventDefault in here anymore!
}
</script>
<form on:submit|preventDefault={handleSubmit}>
<input type="submit"/>
</form>5. Loop "else" clause
How many times have you written an if statement to check if an array is empty, so that you can display a special "nothing here" message? Svelte makes this very easy by providing an "else" clause to the {#each} block:
<script>
let results = [];
</script>
{#each results as result}
<p>{result}</p>
{:else}
<p>Sorry, no results found!</p>
{/each}6. Transitions
Whenever things appear and disappear on your page, it's really nice to use CSS transitions to have a bit of animation to make the state change feel more natural. Normally, you have to write a bunch of CSS and JavaScript to pull this off, but Svelte makes it super simple. All you have to do is import the effect you want and use the transition: directive on an element, and whenever the element appears or disappears, the transition will play.
<script>
import { fade } from 'svelte/transition';
</script>
<div transition:fade>
This will fade in and out.
</div>7. Slot props and the let:variable directive
My absolute favourite Svelte feature is the ability to pass data down from a component to its children. In React, the common way to achieve this is either with a function child or a render prop, and this often makes the code harder to read and understand.
Svelte builds this functionality right into the template syntax. You add a <slot/> element to the parent component, and pass props to it. Then, you receive the data using the let:prop directive:
<!-- ColorManager.svelte -->
<script>
let colors = ['red', 'green', 'blue'];
</script>
<slot {colors} /><!-- Colors.svelte -->
<script>
import ColorManager from './ColorManager.svelte';
</script>
<ColorManager let:colors>
<ul>
{#each colors as color}
<li>{color}</li>
{/each}
</ul>
</ColorManager>This makes it really easy to write components that are solely responsible for data fetching and management. This allows you to separate out your rendering logic from your state logic, and end up with much simpler code.
Conclusion
Svelte has a ton of really cool features and syntax that make your web components simpler than ever. I've outlined a few of my favourites here. If you're interested in learning more, check out The Joy of Svelte.
