Intro to Svelte

Basic Info for Using Svelte

Updated: 03 September 2023

Introduction to Svelte

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>