Intro to Svelte

Basic Info for Using Svelte

Updated: 03 September 2023

Introduction to Svelte

Notes from this video

It’s a compiler.

Creating a new Project

To create a new project you can make use of degit which will allow you to create a project from a template. You can run this with npx:

1
npm degit sveltejs/template my-project-name

Then simply cd into your project directory and install dev-dependencies

1
cd my-project-name
2
npm i

You can then run the application with:

1
npm run dev

And view the application on your browser on http://localhost:5000

The project consists of the following:

  • package.json for dependencies and scripts
  • public for where any code that needs to go directly to the build output will live
  • src folder contains the primary code files

In the src/main.js file there is an import which imports the App component and it states that the App component should be rendered into document.body with the props: { name: 'world }

main.js

1
import App from './App.svelte'
2
3
const app = new App({
4
target: document.body,
5
props: {
6
name: 'world',
7
},
8
})
9
10
export default app

App.svelte

1
<script>
2
export let name
3
</script>
4
5
<style>
6
h1 {
7
color: purple;
8
}
9
</style>
10
11
<h1>Hello {name}!</h1>

In the above component the js and css are scoped, the {name} is used to include expressions that we want to be evaluated

Create a Component

Create a new componen by simply creating a ComponentName.svelte

Card.svelte

1
<h2>Hey there</h2>

This can then be imported and used another component as follows:

1
<script>
2
import Card from './Card.svelte`
3
</script>
4
5
<Card />

We can get a component to retrieve inputs using the export keyword

1
<script>
2
export let text = 'Placeholder'
3
</script>
4
5
<h2>{text}</h2>

And we can pass this in from our App component with:

1
<Card />
2
3
<Card text="Hello Jam" />

Reactive Display

If we need to create computed property values we need to prefix that with the $: it will be automatically recalculated and updated in the template

1
<script>
2
export let text = 'Placeholder'
3
4
$: newText = text + '!'
5
</script>
6
7
<h2>{newText}</h2>

If we would like to create some functionality that will enable a component to do some reactive stuff, or display based on the value of a specific component

1
<script>
2
let user = { loggedIn: false }
3
4
function toggle() {
5
user.loggedIn = !user.loggedIn
6
}
7
</script>
8
9
{#if user.loggedIn}
10
<button on:click="{toggle}">Log In</button>
11
{/if} {#if !user.loggedIn}
12
<button on:click="{toggle}">Log Out</button>
13
{/if}

Clicking the button will then toggle the loggedIn state due to the on:click event and the toggle handler

You can create a component that iterates over a list of items using something like the following

1
<script>
2
let myList = [
3
{ id: 0, name: 'John' },
4
{ id: 1, name: 'Jenny' },
5
{ id: 2, name: 'James' },
6
]
7
</script>
8
9
<h1>My List</h1>
10
11
<ul>
12
{#each myList as {id, name}}
13
<li id="{id}">{name}</li>
14
{/each}
15
</ul>

We can then just import and use the same as the above elements

Input Binding

We can make use of input binding using the following method:

1
<script>
2
let name = 'John'
3
</script>
4
5
<input bind:value="{name}" />
6
7
<h1>Name is {name}</h1>