What Is Svelte?

Svelte is an alternative to web frameworks like React, Vue, and Angular. Like its counterparts, Svelte can be used to build entire web apps. It can also be used to create custom elements that can be used in existing web apps implemented with other frameworks.

Svelte was developed by Rich Harris, who formerly worked atThe Guardianand is currently atThe New York Times. Harris previously created theRactive web framework, Which is used atThe Guardianand inspired parts of Vue. Harris also created theRollup module bundler, which is an alternative to Webpack and Parcel.

Svelte has not yet received the attention it deserves. When it is mentioned, the focus is typically on its ability to produce bundled code that is significantly smaller than the alternatives. However, Svelte makes many tasks easier, including defining components, managing component state, managing application state, and adding animation.

This article provides a thorough introduction to Svelte and walks you through the fundamentals necessary to start building web applications with it.

Why Consider Svelte?

Svelte apps have smaller bundle sizes than equivalent apps created with other web frameworks. This is achieved by compiling the application code to a single, optimized JavaScript file that includes a very small amount of framework code.

Svelte is a web application compiler implemented in TypeScript. It is not a runtime library.

For example, the Todo app presented later has a bundle size that is 13% of the size of an equivalent React app. These apps can be foundhereandhere.

This websitecatalogs statistics on building real-world web applications using many web frameworks. The reported gzipped app sizes in KBs for some popular choices include:

• Angular ngrx: 134
• React Redux: 193
• Vue: 41 .8
• Svelte: 9.7

Some web frameworks, including React and Vue, use a virtual DOM to optimize rendering changes. When components re-render, the framework builds a new version of the DOM in memory and then compares it to the previous version. Only the differences are applied to the actual DOM.

While this is faster than updating everything in the actual DOM, it does take time to build a virtual DOM and compare it to the previous one.

Svelte provides reactivity without using a virtual DOM. It does this by tracking changes to top-level component variables that affect what each component renders and only re-rendering those parts of the DOM when changes are detected. This contributes to good performance.

Svelte dramatically simplifies component and application state management. Contributing features include context, stores, and module context, each of which is covered in detail later.

Svelte provides runtime warnings for accessibility issues. For example,elements that have noaltattribute are flagged.

Svelte does not currently support using TypeScript, butwork to add this is underway.

Svelte Native supports developing mobile apps. It builds on NativeScript.

Does Svelte Disappear?

Some say that Svelte disappears once an app is built.

The Svelte library is mostly defined by. jsfiles in thenode_modules / sveltedirectory. The main functions are defined ininternal.js, which is currently around 1, 400 lines of code.

Other library files are used for specific features. These include:

• easing.js
• motion.js
• register.js
• store.js
• transition.js

Enteringnpm run buildproduces files in thepublicdirectory, includingbundle.js. Svelte library functions that are used by the app are copied to the top ofbundle.js. In the case of the Todo app shown later, this is approximately 500 lines of code.

So Svelte library code doesn’t disappear; it is just very small compared to other web frameworks.

Important Resources

Here is a list of important resources to check out when learning Svelte:

• Rethinking Reactivity
  This is a talk by Rich Harris atYou Gotta Love Frontend (YGLF) Code Camp 2019. It describes the motivations behind Svelte 3 and provides a brief introduction.
• Svelte home page –https://svelte.dev
• Svelte tutorial –https://svelte.dev/tutorial
• Svelte API –https://svelte.dev/docs
• Svelte examples –https://svelte.dev/examples
• Online Svelte REPL –https://svelte.dev/repl
  This is great for trying small amounts of Svelte code. It can also display generated code and save code for sharing and submitting issues.
• Svelte blog –https://svelte.dev/blog
• Discord chat room –https://discordapp.com/invite/yy 75 DKs
• Svelte GitHub repository –https://github.com/sveltejs/svelte

(Getting Started)

Let’s walk through the steps to create and run a Svelte application.

1. Install Node.js fromhttps://nodejs.org.

• This installs thenode,npm, and (NPX) Commands.

2.npx degit sveltejs / templateapp-name

• Rich Harris created thedegittool to simplify project scaffolding. It downloads a git repo, by default the master branch. In this case “sveltejs” is the user name and “template” is the repo. The second argument is the name of the directory to create.

3.cdapp-name

4.npm install

5.npm run dev

• This starts a local HTTP server and provides live reload, unlikenpm run start, which omits live reload. Syntax errors are reported in the window where this is running, not in the browser. This happens because Svelte doesn’t produce a new version of the app if there are errors.

6. Browse localhost: 5000

• This just outputs “Hello world!” in purple.

Now you are ready to start modifying the app.

A peek at thepackage.jsonfile reveals two things. The first is that Svelte uses Rollup by default for module bundling. If desired, it can be changed to use Webpack or Parcel. The second is that Svelte apps have no required runtime dependencies, only devDependencies.

The most important starting files are:

1. public / index.html
2. src / main.js
3. src / App.svelte

These files use tabs for indentation, but the tabs can be replaced by spaces if preferred.

1. The filepublic / index.htmlcontains the following:

head>
charset="utf8"/>
metaname=" viewport "content="width=device-width"/>
title>(Svelte app) /title>
linkrel="icon"type="image / png"(href)="favicon.png"/>
rel="stylesheet"HREF="global.css"/>
link(rel)="stylesheet"(href)="bundle.css"/>
/(head)>
body>
script(src)="bundle.js">/ (script)>
/body>
/html>

Note how this pulls in two CSS files and one JavaScript file.

• global.cssholds CSS that can affect any component.
• bundle.cssis generated from the CSS in each component.
• bundle.jsis generated from the JavaScript and HTML in each component and any other JavaScript in the app.

2. The filesrc / main.jscontains the following:

importApp from'./ App.svelte';constapp=(new) ***************************************************** (App)  ({  target:document.  (body),  Props:{    name:'world'  }});exportdefault  (app) ;

This renders theAppcomponent. Thetargetproperty specifies where the component should be rendered. For most apps this is the body of the document.

Thenameprop is passed to the (App) component.

Typically the topmost component does not need props and thepropsproperty here can be deleted.

3. The filesrc / App.sveltecontains the following:

script>  export let name;/script>Style>  h1 {     color: purple;   }/style>Hello {name}!/(H1)>

Exported variables can be set as props in files that use the component.

Curly braces are used to output the value of a JavaScript expression. This is referred to asinterpolation. As we will see later, curly braces are also used for dynamic attribute values.

Defining Components

Popular web frameworks use different kinds of JavaScript containers to define components.

• Angular uses classes.
• React uses functions or classes.
• Vue uses object literals.

Svelte doesn’t use any kind of JavaScript container.

A Svelte component is defined by a. sveltefile that contains JavaScript code, CSS, and HTML. These are combined to form the component definition, which automatically becomes the default export.

The.sveltefiles can be anywhere under theSRCdirectory. They contain the following three sections, all of which are optional.

script>  // Scoped JavaScript goes here./script>Style>  / * Scoped CSS rules go here. * //style>

Note the different comment syntax that can be used in each section.

Component Names

Svelte component definitions do not specify a component name. The component name is not provided inside a source file by a class name, function name, or property value like in other frameworks; it is associated when a. sveltefile is imported, and it must start with an uppercase letter.

Lowercase names are reserved for predefined elements like those provided by HTML and SVG.

For example:

// Somewhat confusingimportAnyNameIWant from'./ some-name.svelte';// Less confusingimportSameName from'./ SameName.svelte';

Sharing Data

There are four ways to share data between Svelte components.

1. Props

These pass data from parent components to child components.

2. Contexts

These allow ancestor components to make data available to descendant components.

3. Stores

These store data outside any component and make it available to all of them.

4. Module Scope

These store data in component modules and make it available to all instances of the component.

These built-in approaches are so useful that there is really no need for state management libraries.

Props

Components can accept input through props. They are specified as attributes on component elements rendered by parent components.

For example, a parent component can do this:

script>  import Hello from './Hello.svelte';/script>name="Mark"/>

In this case, the value of the (name) prop is a literal string.

Prop values ​​that are JavaScript expressions or non-string literals must be surrounded by curly braces instead of quotes.

The child component defined insrc / Hello.sveltecan do this:

script>  export let name='World';/script>div>  Hello, {name}!/div>

Props are declared in the  let score=0;   const inputAttrs={     type: 'number',     max: 10,     min: 0,     value: score   };

0}>{result}

Importing Components

Components can import others inside their  let count=0;   const increment=()=>count ;

myArr=myArr.concat(newValue);// Alternative trickmyArr.Push(newValue);myArr=myArr;

// The value of average is computed initially and// recomputed if the value of total or count changes.$:average=total/count;// The value of count is output in the devtools console// when this statement is executed and again every time it changes.// This is great for debugging!$:Console.  (log)('count=',  (count) );

$:{  // statements to be repeated go here}

$:(if)(someCondition){  // body statements}

{# if color==='yellow'}   
Nice color!
{: else if color==='orange'}   
That's okay too.
{: else}   
Questionable choice.
{/ if}

{#each colors as color}   
{color}
{/ each}{#each colors as color, index}   
{index   1}) {color}
{/ each}{#each people as {name, age}}   
{name} is {age} years old.
{: else}   
There are no people.
{/ each}

{# each people as person (person.id)}   
{person.name} is {person.age} years old.
{/ each}

{# await getData ()}   
Waiting for data ...
{: then result}   
result={result}
{: catch error}   
Error: {error.message}
{/ await}

{# await getData () then result}   
result={result}
{: catch error}   
Error: {error.message}
{/ await}

The receiving component can mark the spot where all child content is rendered with. This is called the (default slot) **********************************************

It can also provide default content to render for parent elements that do not provide content for the slot. For example,Thanks for nothing!.

  divslot="address">    123 Some Street,/>    Somewhere, Some State 12345   /div>  divslot="name">Mark Volkmann [type="checkbox"] /div>/ShippingLabel>

Style>  label {     display: block;     font-weight: bold;   }/style>div>  label>Ship To:/label>  name="name">unknown/slot>  name="address"/>/div>

Binding Form Elements

Form elements like,, andcan be bound to a variable. This simulates two-way data binding.

Forelements with the typenumberor (range) , two-way data binding automatically coerces values ​​from strings to numbers.

For example, consider the following HTML form:

  
    Name      
  
     (Happy?          
  
    Favorite Flavors    {#each flavors as flavor}                       {flavor}         {/ each}   
  
     (Favorite Season)      {#each seasons as season}                       {season}         {/ each}   
  
     (Favorite Color)                      {#each colors as color}       elements can have a "value" attribute             and its value can be a string, number, or object. ->      {color}      {/ each}       
  
     (Life Story)        
    {#if name}   
    {name} likes {favoriteColor}, {favoriteSeason},     and is {happy? 'happy': 'unhappy'}.   
  
{name} 's favorite flavors are {favoriteFlavors}.
  
Story: {story}
  {/ if}

pValue={pValue}

cValue={cValue}
(Double)

import{setContext}from'svelte';// Must be called during component instantiation.setContext('favorites',{color (***************************************************:'yellow',  (number) :19});

import{getContext}from'svelte';// Must be called during component instantiation.constfavorites=getContext('favorites');

script>  import {setContext} from 'svelte';   import B from './B.svelte';   setContext ('favorites', {color: 'yellow', number: 19});/script>div>  This is in A.   /(b)>/div>

script>  import C from './C.svelte';/script>div>  This is in B.   />/div>

script>  import {getContext} from 'svelte';   const {color, number}=getContext ('favorites');/script>div>  This is in C.   div>favorite color is {color}/div>  div>favorite number is {number}/div>/div>

This is in A. This is in B. This is in C. favorite color is yellow favorite number is 19

// In stores.jsimport{writable}from'svelte / store';// The initial value is an empty array.exportconstdogStore=writable([]);

// In stores.jsimport{writable}from'svelte / store';exportconstdogStore=writable(initialValue,  (Async)  set=>{  // Called when subscribe count goes from 0 to 1.  // Compute initial value and pass to set function.  constres=await fetch('/ dogs');  constDogs=await res.  (JSON)();  set( (Dogs) );  return()=>{    // Called when subscriber count goes to 0.  };});

import{readable}from'svelte / store';exportconstdogStore=readable(  [],// initial value  set=>{    constres=await fetch('/ dogs');    constDogs=await res.  (JSON)();    set( (Dogs) );    // Can return a cleanup function here.  });

script>  import {onDestroy} from 'svelte';   import {dogStore} from './stores.js';   let dogs;   const unsubscribe=dogStore.subscribe (value=>(dogs=value));   onDestroy (unsubscribe);/script>

script>  import {dogStore} from './stores.js';/script>

Store Demo
Change Dog

script>  import {dogStore} from './stores.js';/script>div>  {$ dogStore.name} is a {$ dogStore.breed} that is {$ dogStore.age} years old./div>

script>  import {dogStore} from './stores.js';    // Parens are needed here so it knows the   // open curly brace is not the the start of a block.   $: ({age, breed, name}=$ dogStore);/script>div>{name} is a {breed} that is {age} years old./(div)>

script  (context)="module">  .../script>

script>  import {tick} from 'svelte';   ...   // Make some state changes.    // The following prevents batching of updates   // that occur after call to tick.   await tick ();    // Make more state changes after the DOM updates.   .../script>

script>  import {fade} from 'svelte / transition';/script>litransition: fade>  /li>

Special Elements

Svelte supports several special elements that have the formname props>. These are summarized below.

expression}optionalProps>

 

This renders the component specified byexpression. Ifexpressionis falsy it renders nothing. The optional props are passed to the component that is rendered.

props>

This allows a component to render an instance of itself. It supports recursive components and is needed because a component cannot import itself.

eventName={handler}>

This registers a function to be called when a given event is dispatched by the DOMwindowobject. One example is theresize (event.)

propertyName={variable}>

 

This binds a variable to a window property. One example isinnerWidth.

This registers a function to be called when a given event is dispatched by the DOMbodyelement. Examples includemouseEnterandmouseLeave.

elements

This inserts elements in theheadelement of the DOM document. Examples include insertinglinkandscripttags.

option={value}/>

This is placed at the top of a. sveltefile, not inside ascripttag. It specifies compiler options including:

(immutable) ********************************

This means props will be treated as immutable, which provides an optimization.

The default value isfalse. Being immutable means parent components will create new objects for object props rather than modify properties of existing objects. This allows Svelte to determine whether a prop has changed by comparing object references rather than object properties.

When this option is set to (true) , if a parent component modifies object properties of a child component, the child will not detect the change and will not re-render.

accessors

This adds getter and setter methods for the component props. The default is false. These can be useful when Svelte components are compiled to custom elements that are used in non-Svelte apps.

namespace="value"

This specifies the namespace of the component. One use is for SVG components which use a namespace ofsvg.

tag="value"

This specifies a name to use when a Svelte component is compiled as a custom element. It allows Svelte components to be used as custom elements in non-Svelte apps.

Debugging

Use@ debugto break when given variables change and output their values ​​in the devtools console.

Place this at the top of the HTML section, not inside a,

, and HTML.

Add the following npm script topackage.json:

"format":"prettier --write '{public, src} / ** / *. {css, html, js, svelte } '',

importTodoList from'./ TodoList.svelte';constapp=(new)  TodoList({ (target) :document.body});exportdefault  (app) ;

script>  import {createEventDispatcher} from 'svelte';   const dispatch=createEventDispatcher ();   export let todo; // the only prop/script>Style>  / * This draws a line through the text      of todos that are marked as done. * /   .done-true {     color: gray;     text-decoration: line-through;   }   li {     margin-top: 5px;   }/style>li>  inputtype="checkbox"checked={todo.done}on: change={()=>dispatch ('toggleDone')}   />  spanclass={'done -' todo.done}>{todo.text}/(span)>  buttonon: click={()=>dispatch ('delete')}>Delete/button>/li>

  
To Do List
  
    {status}     Archive Completed  
  
    
              Add       
  
    {#each todos as todo}       deleteTodo (todo.id) }         on: toggleDone={()=>toggleDone (todo)}       />    {/ each}   

Module.exports={  Presets:[ [   '@babel/preset-env',   {       targets:{         node:'current'     }   } ]  ]};

Module.exports={  transform:{    '^.   $ .js':'babel-jest',    '^.   $ svelte':'jest-transform-svelte'  },  moduleFileExtensions:['js','svelte'],  bail:(false),  Verbose:(true)};

"test":"jest --watch src",

import{cleanup,render}from'@ testing-library / svelte ';importTodo from'./ Todo.svelte';describe('Todo',()=>{  consttext='buy milk';  consttodo={text};  // Unmounts any components mounted in the previous test.  afterEach(cleanup);  test('should render',()=>{    const{getByText}=render( (Todo) ,{props:{todo}});    constcheckbox=(document.)  querySelector('input [type="checkbox"] ');    expect(checkbox).not.toBeNull();// found checkbox    expect(getByText( (text) ));// found todo text    expect(getByText('Delete'));// found Delete button  });  // There is no easy way to test that events are fired  // when the checkbox state is changed  // or when the "Delete" button is pressed.  // These are covered by tests in TodoList.spec.js.});

import{tick}from'svelte';import{cleanup,fireEvent,render,  (wait) }from'@ testing-library / svelte';importTodoList from'./ TodoList.svelte';describe('TodoList',()=>{  constPREDEFINED_TODOS=(2);  afterEach(cleanup);  // This is used by many of the test functions below.  functionexpectTodoCount( (count) ){    returnwait(()=>{      // Each todo has an
root element.      constlis=(document.)  querySelectorAll('li');      expect(lis.  (length)).toBe(count);    });  }  test('should render',Async()=>{    const{getByText}=render( (TodoList) );    expect(getByText('To Do List'));    expect(getByText('1 of 2 remaining'));    expect(getByText('Archive Completed'));// button    await expectTodoCount(PREDEFINED_TODOS);  });  test('should add a todo',Async()=>{    const{getByTestId,getByText}=(render) *************************************************** (TodoList);    constinput=getByTestId('todo-input');    constvalue='buy milk';    fireEvent.input(input,{target (***************************************************:{value}});    fireEvent.click(getByText('Add'));    await expectTodoCount(PREDEFINED_TODOS(1));    expect(getByText(value));  });  test('should archive completed',Async()=>{    const{getByText}=render( (TodoList) );    fireEvent.click(getByText('Archive Completed'));    await expectTodoCount(PREDEFINED_TODOS-(1));    expect(getByText('1 of 1 remaining'));  });  test('should delete a todo',Async()=>{    const{getAllByText,getByText}=(render) *************************************************** (TodoList);    consttext='learn Svelte';// first todo    expect(getByText( (text) ));    constdeleteBtns=getAllByText('Delete');    fireEvent.click(deleteBtns[0]);// deletes first todo    await expectTodoCount(PREDEFINED_TODOS-(1));  });  test('should toggle a todo',Async()=>{    const{container,getByText}=(render) *************************************************** (TodoList);    constcheckboxes=(container.)  querySelectorAll('input [type="checkbox"] ');    fireEvent.click(checkboxes[1]);// second todo    await tick();    expect(getByText('0 of 2 remaining'));    fireEvent.click(checkboxes[0]);// first todo    await tick();    expect(getByText('1 of 2 remaining'));  });});

"cy: open":"cypress open","cy: run":"cypress run",

constbaseUrl='http: // localhost: 5000 / ';describe('Todo app',()=>{  it('should add todo',()=>{    visit(baseUrl);    contains('1 of 2 remaining');    // The "Add" button should be disabled until text is entered.    contains('Add')      .as('addBtn')      .should('be.disabled');    // Enter todo text.    consttodoText='buy milk';    get('[data-testid=todo-input]')      .as('todoInput')      .type(todoText);    get('@ addBtn').should('not.be.disabled');    get('@ addBtn').click();    get('@ todoInput').should('have.value','');    get('@ addBtn').should('be.disabled');    contains(todoText);    contains('2 of 3 remaining');  });  it('should toggle done',()=>{    visit(baseUrl);    contains('1 of 2 remaining');    // Find the first checkbox and toggle it.    get('input [type=checkbox]')      .first()      .as('cb1')      .click();    contains('2 of 2 remaining');    // Toggle the same checkbox again.    get('@ cb1').  (check)();    contains('1 of 2 remaining');  });  it('should delete todo',()=>{    visit(baseUrl);    contains('1 of 2 remaining');    consttodoText='learn Svelte';// first todo    contains('UL',todoText);    // Click the first "Delete" button.    contains('Delete').click();    contains('UL',todoText).should('not.exist');    contains('1 of 1 remaining');  });  it('should archive completed',()=>{    visit(baseUrl);    consttodoText='learn Svelte';// first todo    contains('UL',todoText);    // Click the "Archive Completed" button.    contains('Archive Completed').click();    contains('UL',todoText).should('not.exist');    contains('1 of 1 remaining');  });});