The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

JavaScript community has been shaken recently by a release of Svelte 3 and for a good reason - it's a completely different approach than React or Vue. To quote the docs:

"[Svelte](https://svelte.dev/) is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app."

**The best part?** If you have 26 spare minutes you can learn the basics of Svelte 3 and start building your own apps with it!

Enjoy!



Kamil Khadeyev

Svelte is a tool for building fast web applications.

In this lesson we're going to learn what is Svelte and what's the difference between Svelte and other frameworks such as React or Vue.

WTF is Svelte?

Svelte is a new approach to building user interfaces. 

Instead of doing the vast majority of work at the runtime as other frameworks do, Svelte shifts that work into the _compile_ step which happens when you build your app. As such, you're shipping heavily optimized code to your users.

In this quick lesson we are going to learn how to create a brand new project with Svelte 3 from scratch.

Create a new project with Svelte 3

In most Web applications we want to be able to render different HTML markup depending on values passed in from JavaScript code.

In this lesson we are going to learn how to render JavaScript variable in HTML markup when using Svelte 3.

Add data to HTML markup using Svelte 3

In Svelte 3, the same as in regular HTML we can add CSS styles to a component and this is what we're going to learn in this lesson.

Important note - styles are _scoped to the component_ which means that if we style a `h1` tag in component A, it won't automatically affect `h1` tags in component B.

Add styles to Svelte 3 component

It's highly unlikely that we'd like to have an entire app in a single file. Instead, what we'd like to do is to spread our code across multiple components and render them in one another.

In this lesson we are going to learn how to create a `<Surname />` Svelte 3 component which we're going to use in our main `App.svelte` file to display a user's surname.

Create a new Svelte 3 component to render it inside of another component

One of the key advantages of having a component system is the ability to render the component differently based on what kind of properties (shortened to 'props' in Svelte) were passed in to the component.

In this lesson we are going to learn how to declare properties inside of a Svelte component and how to pass in data to be rendered inside of a `<UserInfo />` component. We're also going to learn how to use default props which are used if a value for a property was not passed in.

Declare and pass in properties to a Svelte 3 component

When creating an app out of components we tend to compose them inside of one another. Svelte allows us to create slots using a `<slot />` component so the components we create can accept any children and render those.

In this lesson we are going to see an example of a slot being used to create a generic `box` component which can accept any children as a prop, along with handling a case where no children were provided.

Compose components with slots in Svelte 3

Slots in Svelte 3 allow us to compose components within one another.

Sometimes we'd like to have a component which can accept multiple children and for us to be able to control where each child gets rendered.

In this lesson we're going to learn how to use named slots in Svelte 3 to render content inside of a header, body and footer of an app.

Use named slots to compose multiple components in Svelte 3

Disclaimer: please use this feature carefully.

Sometimes we need to render HTML (that comes from a source that we trust!) directly into a component, for instance when we're using a WYSIWYG editor that we control.

In this quick lesson we're going to learn how to use `@html` in order to render HTML markup from a `textarea` into a `div` element.

Render HTML directly into a component in Svelte 3

Most websites are quite static and adding some animations/transitions can improve the user experience by a lot.

In this lesson we're going to learn how to use Svelte 3 transitions such as `slide`, `fade` and `blur` in order to show/hide a 'thank you' message in a form

Use Svelte 3 transitions to gracefully show and hide DOM elements

Svelte automatically updates the DOM when your component's state changes. Often, some parts of a component's state need to be computed from other parts. This is where _reactive declarations_ come in.

In this lesson we are going to learn how to use reactive declarations to re-compute (and render) square of a counter value in a simple counter example whenever user clicks on a button.

Use reactive declarations to compute component state in Svelte 3

Quite often we need to be able to loop over and render a list of data that (for example) is returned from the backend. 

In this lesson we are going to learn how to use `each` block from Svelte to iterate over a list of data and render a list of European cities. We're also going to learn how to get the current `index` while iterating over a list, as well as how to destructure a currently iterated over element of the array.

Loop over and render a list of data using an `each` block in Svelte 3

Most web applications have to deal with asynchronous data at some point.

Svelte 3 apps are no different, luckily Svelte allows us to await the value of a promise directly in markup using `await` block.

In this lesson we're going to learn how to use the `await` block to fetch the data from a Star Wars API and both display the data and handle loading state.

Use await block to wait for a promise and handle loading state in Svelte 3

The whole magic of webapps is that users can interact with our code via various DOM events and Svelte is no exception in that regard.

In this quick lesson we're going to learn how to use DOM events in Svelte 3 as well as how to use event _modifiers_ to alter DOM event behaviour (such as `once` and `preventDefault`)

Use DOM events and event modifiers in Svelte 3

Every Svelte component has a lifecycle that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle.

The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM. 

In this lesson we're going to learn how to use `onMount` to fetch and render data from Star Wars API.

Use an onMount lifecycle method to fetch and render data in Svelte 3

Not all application state belongs inside your application's component hierarchy. Sometimes, you'll have values that need to be accessed by multiple unrelated components, or by a regular JavaScript module.

In Svelte, we do this with _stores_. In this lesson we're going to learn how to create a `writable` store and how to use it to allow `Incrementer` and `Decrementer` components modify the value of the store

Use Svelte 3 stores to share data between multiple unrelated components

Sometimes we don't want to have a complicated `update` function to change a value of our store. We know exactly what we want to change the value to - we can just use the `store.set` function to do that.

In this lesson we're going to learn how to set a value to a Svelte 3 store by using the `store.set` function to set the value of a counter without having to increment/decrement it one by one.

Set a value to a Svelte 3 store

It's important to avoid memory leaks, and Svelte 3 is no exception. When we're using the `subscribe` method from Svelte store in a component, it's important to clean ofter ourselves (especially if we're going to instantiate and destroy this component many times over).

In this lesson we're going to learn how to use `unsubscribe` to stop subscribing to the store change in a component's `onDestroy` call, as well how to use auto-subscriptions to refer to the store value and let Svelte take care of cleaning after us to avoid memory leaks.

Use auto-subscriptions in Svelte 3 to avoid memory leaks when using Stores

If our app needs to display values that are dynamically changing, it's better to animate that to deliver a more engaging user experience.

In this lesson we're going to learn how to use a `tweened` value to dynamically update the value of a progress bar in Svelte 3.

Tween a value and dynamically update the DOM with Svelte 3

🎉🎉🎉

Svelte has added [TypeScript support](https://svelte.dev/blog/svelte-and-typescript)!

This has been one of most (if not **the** most) requested additions to Svelte and it's finally here - Svelte now comes with a TypeScript support out of the box!

In this quick lesson we're going to learn how to create a new Svelte project with TypeScript support, how to use `<script lang="ts">` tags to use TypeScript in Svelte components and how to check the entire codebase for type-related issues with `npx svelte-check`

Create a new Svelte project with TypeScript support

First create a form with vanilla Svelte features then learn how Svelte Forms Lib simplifies managing forms.

Create forms in Svelte with Svelte Forms Lib

Up and running with Svelte 3

https://app.egghead.io/api/v1/lessons/svelte-wtf-is-svelte/subtitles

Instructor: [0:00] Svelte is a tool for building fast web applications. In that regard, it's a bit similar to frameworks such React and Vue, which also share the same goal of building fast web interfaces.

[0:09] There's one major difference. The difference is that Svelte converts your app to optimize JavaScript code at the build time rather than interpreting your application code at the run time. What that means is that if we have this Hello World header over here, after I switch the JS output, this is actually the code that is going to be run by our users.

[0:27] There's also going to be a CSS output if you're going to have any styles in our Svelte application. If I were to switch to a bit more complicated example, so this is a simple app that allows me to see my mouse position, and here we have the script object, here we have the styles, and this is the markup with the onMouseMove handle.

[0:45] Here in the JS output, we do can see optimized JavaScript code built by Svelte, so we can ship that to our users and also Svelte takes care of the performance.

[0:53] We, as Svelte developers, don't have to optimize so much for performance because all this work is being done by the compiler. If we have any styles in our Svelte application, we're going to get the CSS output as well. We've pre-generated class names. We don't have to worry about that either.

https://app.egghead.io/api/v1/lessons/svelte-wtf-is-svelte/transcript

https://app.egghead.io/api/v1/lessons/svelte-create-a-new-project-with-svelte-3/subtitles

Tomasz: [0:00] First, use npx degit to create a new Svelte project. We're going to call it MySvelteProject. Once this is done, go to your new project directory and run npm install. Next, run npm run dev.

[0:17] Now, our Svelte app is ready for development. We can see it on the localhost:5000. To check if your project has been set up correctly, go to App.svelte. We're going to add another tag. We're going to say, "Hello, Egghead." After we save, the app is going to be refreshed, and we're going to see the text over here.

https://app.egghead.io/api/v1/lessons/svelte-create-a-new-project-with-svelte-3/transcript

https://app.egghead.io/api/v1/lessons/svelte-add-data-to-html-markup-using-svelte-3/subtitles

Tomasz: [0:00] First, create a variable for storing our name. I'm going to have a name = "Tomasz," which is my name. Now, we would like to render it inside of this <h1> tag. What we need to do is to wrap name inside of curly braces. After we save that, we're going to see it over here.

[0:15] Whatever we decide to put inside of those curly braces is actually valid JavaScript. If you would like to, we can for instance do toUpperCase like this. It's going to shout, "Hello Tomasz." If we decide to change this value to something, we're going to see the effect immediately after we save it.

https://app.egghead.io/api/v1/lessons/svelte-add-data-to-html-markup-using-svelte-3/transcript

https://app.egghead.io/api/v1/lessons/svelte-add-styles-to-svelte-3-component/subtitles

Instructor: [0:00] Like a regular HTML, we can add styles to our component. If I were to add a style tag, we can go ahead and style this header over here. I can do h1. We can set it this, a color. We can, for instance, set in font family. We're going to do the best font of them all, which is Comic Sans MS.

[0:21] After we save, we're going to see our changes applied over here. Of course, we don't to have to style by tag. If you would like to, we can have a class of headerText over here and I can just edit like this, headerText.

[0:35] After I save, we're going to see that this change is applied, although styles are going to be applied inside of this component. If we have another component with a header text class, those changes are not going to be applied there.

https://app.egghead.io/api/v1/lessons/svelte-add-styles-to-svelte-3-component/transcript

https://app.egghead.io/api/v1/lessons/svelte-create-a-new-svelte-3-component-to-render-it-inside-of-another-component/subtitles

Tomasz: [0:00] We probably don't want to have an entire app inside of a single file. Let's create a new component that we're going to use to display our surname. Over here, I'm going to create a new file. I'm going to call it surname.svelte.

[0:15] Over here, I'm going to have a script tag. I'm going to create a variable for surname, Doe. We're going to render this surname inside of an <h1> tag. MySurname is surname.

[0:28] This text is not visible because we need to render this component. After we go back to our app Svelte component, we're going to remove the surname from here. We're going to import surname from surname.svelte.

[0:45] Now we need to render this component, so we're going to use it like this. We can see the text over here. Bear in mind that even though over here I'm styling the <h1> to be of this blue color, it's not applied to the surname component because the surname component does not have those styles over here.

[1:02] If I were to add a style tag and I would set the <h1> styles to be of color red, this change would be applied only for the surname component, not to this app component which currently is displaying our name.

https://app.egghead.io/api/v1/lessons/svelte-create-a-new-svelte-3-component-to-render-it-inside-of-another-component/transcript

https://app.egghead.io/api/v1/lessons/svelte-declare-and-pass-in-properties-to-a-svelte-3-component/subtitles

Tomasz: [0:00] Right now, our app is displaying this user info component. If we take a look inside of this component, we're going to see that we specify name and a surname. We are displaying those over here.

[0:10] Right now, this component is not really generating because those two values are hardcoded within this component. Instead, we would like to be able to provide props. What I would like to have is name Tomasz and, for instance, surname Kowalski, like this.

[0:27] We would like to make it work. In order for that to happen, we need to go inside of this user info component. Instead of setting those values to John and Doe, we're going to remove those. Instead, we're going to export those two variables.

[0:42] We can see the result over here. This is how a Svelte component can expose its API. Basically, we export variables that we would like to be able to pass in as props from other components.

[0:53] We can also set default values to our props. If I were to set name to be John by default, go inside of this App.svelte component, and remove this name prop -- we are not going to pass in any prop for name -- after I save, we're going to see that this change has been applied.

[1:10] I am not passing a name prop, but even though I'm not passing anything, Svelte is going to use the default value for the name prop specified over here.

https://app.egghead.io/api/v1/lessons/svelte-declare-and-pass-in-properties-to-a-svelte-3-component/transcript

https://app.egghead.io/api/v1/lessons/svelte-compose-components-with-slots-in-svelte-3/transcript

https://app.egghead.io/api/v1/lessons/svelte-use-named-slots-to-compose-multiple-components-in-svelte-3/transcript

https://app.egghead.io/api/v1/lessons/svelte-render-html-directly-into-a-component-in-svelte-3/subtitles

Instructor: [00:00] We have this simple app with a text area component. Whatever we are going to type in, inside of this text area, we would like to render inside of this diff over here. To do that, we need to bind the value of this text area to this stringToRender variable.

[00:12] In order to do that, bind value = stringToRender. Right now, if I type "Hello Egghead," this text is going to appear over here. I would like to be able to paste in some HTML, and have it rendered inside of this diff. In order to do that, we need to add the @html syntax in front of this string to render variable.

[00:32] If I save, and paste this HTML again, we're going to see it rendered over here. Bear in mind that if you decide to use this feature, Svelte is not going to sanitize any string that you decide to render using @html, so you have to be careful not to expose your users to an attack.

https://app.egghead.io/api/v1/lessons/svelte-render-html-directly-into-a-component-in-svelte-3/transcript

https://app.egghead.io/api/v1/lessons/svelte-use-svelte-3-transitions-to-gracefully-show-and-hide-dom-elements/subtitles

Instructor: [0:00] We have a form where users can type in their name, surname, and also decide whether they want to give me a million dollars. If they do, we are going to use this display info message variable to display a thank-you message like this. We would like to make this a bit more flashy. After all, we're talking about a million dollars.

[0:15] In order to do that, we're going to use Svelte transitions. First, import slide from Svelte transition. Next in this h1 header, we are going to transition slide. Now, if we click on the checkbox, we are going to see this thank-you message that is going to slide up and down.

[0:32] Slide also takes a couple of parameters which allows us to control the animation. We would like to ensure that the duration of this animation is exactly five seconds. In order to do that, pass in an object and specify duration of 5,000 milliseconds. Now, if I click on this checkbox, we're going to see it's going to slide down very slowly over the course of five seconds.

[0:51] We can also delay the animation. For instance, I would like to delay this animation by two seconds after I click on the checkbox. Right now, we have the desired effect. I'm going to click on that. Now it's going to slowly appear.

[1:03] Slide isn't the only type of a transition available in Svelte. For instance, we can import fade. It's going to behave in a very similar way. I can just pass in as a transition to this header. Now, if I click on that checkbox, it's going to fade in and fade out.

[1:18] Similar to slide, we can also control the delay and the duration of the animation, like this. Fade works by changing the opacity from zero to one. If, instead, we would like to achieve a blur effect, we need to import blur from svelte-transition, and I'm going to pass as a transition to this header. Right now, if I click on this, we're going to see the blur in and blur out of the view.

https://app.egghead.io/api/v1/lessons/svelte-use-svelte-3-transitions-to-gracefully-show-and-hide-dom-elements/transcript

https://app.egghead.io/api/v1/lessons/svelte-use-reactive-declarations-to-compute-component-state-in-svelte-3/subtitles

Instructor: [0:00] We have an example of a simple counter app. Basically, whenever I click the button, the handleClick handler is going to trigger, and I am going to increment the current value by 1. We can see the result over here. If I click on the button, we're going to see the counter updated.

[0:13] We would like to be able to create a squared value. Basically, whenever the count is updated, I'd like to have the squared value to be equal to the square of the count current value.

[0:25] We'd like to be able to display it in the DOM like this. The square of the counter is squared, like this. In order to achieve this effect, Svelte has a concept of reactive declarations. In order to create a reactive declaration, we need to use a $ and squared is going to be equal to the count squared, like this.

[0:46] This might be a bit unfamiliar, but this is actually a JavaScript. Right now, if I click on the counter, we're going to see that the counter updates and the square of 10 is exactly 100. Square of 11 is of course 121.

[1:00] Right now, we have the desired effect. We can also have reactive declarations based off other reactive declarations. If I were to do squared - 1 and to have it equal to squared - 1, I can do it like this. Let me just go ahead and display that.

[1:15] Square of the counter - 1 is squared - 1. After I saved, we're going to see the result over here. Right now, the square of the counter is 36 and the square of the counter - 1 is 35.

https://app.egghead.io/api/v1/lessons/svelte-use-reactive-declarations-to-compute-component-state-in-svelte-3/transcript

https://app.egghead.io/api/v1/lessons/svelte-loop-over-and-render-a-list-of-data-using-an-each-block-in-svelte-3/subtitles

Instructor: [0:00] We have a list of cities that we would like to render over here. To do that, create an each block. We're going to iterate over cities and as a city. Let me just go ahead and close the block, as well.

[0:12] Inside of this each block, we're going to render a list element with the city.name. This is going to render all the free cities that we have defined over here.

[0:23] If we would like to use the index, each block gets the index as its second argument. I can do index. I can go ahead and render the index like this. Index, save, refresh. We can see the index over here. Let me add plus one to the index. There you go.

[0:40] We don't have to use the city object because right now each city has an ID and a name. If you wanted to, we can destructure those properties from the city object like this. ID, name. Let me factor that. We're going to use ID equal ID, like this.

[0:59] If we decide to add another city, let me create a custom ID. We're going to have Lisbon. After I save this, it's going to be automatically applied because each block is going to iterate over all cities. We're going to render as many cities as we have in the cities array.

https://app.egghead.io/api/v1/lessons/svelte-loop-over-and-render-a-list-of-data-using-an-each-block-in-svelte-3/transcript

https://app.egghead.io/api/v1/lessons/svelte-use-await-block-to-wait-for-a-promise-and-handle-loading-state-in-svelte-3/subtitles

Instructor: [00:00] We have a function which is using the Star Wars API in order to fetch our unknown Star Wars character. We would like to be able to use this function to display the character name over here. One way to do that would be to use this function. Then, whenever there is a response, assign the character variable to this response.

[00:18] Now we have to handle the loading state manually. With Svelte, there's a different solution to this problem. First, let me move that, and next, assign the promise return from this function to a variable which I'm going to call promise. I'm going to remove this character a bit. Command that for a second.

[00:33] Next, we would like to use the await block. Let me close that as well. Await block instead allows you to await for a promise to resolve and then display content inside of this block based on this promise. I'm going to await our promise. Whenever we have a response, I'm going assign it to a character variable. I'm going to use the h1 header to display this character's name.

[00:54] As we mentioned before, we would like to be able to handle this loading state. Right now, if I refresh this, while we are waiting for the server to respond, there's a blank space. In order to do that, we need to modify the await block in order to handle this loading state. I'm going to do when character. Whenever we have our character, we're going to display this character's name.

[01:11] If you are still waiting for the character, I'm going to display a header which is going to say, "loading." Now we have the desired effect. If you are still waiting for the response from the server, we have the loading text. Whenever there's a response, we are going to get the name of the Star Wars character.

https://app.egghead.io/api/v1/lessons/svelte-use-await-block-to-wait-for-a-promise-and-handle-loading-state-in-svelte-3/transcript

https://app.egghead.io/api/v1/lessons/svelte-use-dom-events-and-event-modifiers-in-svelte-3/subtitles

Instructor: [0:00] We would like to build a simple app that whenever I type a name in this input field, after I click the button, I am going to see an alert saying Hello Name.

[0:08] In order to do that, attach input handlers to both input and the button. What we're going to do right now, I am going to do on:change, that is going to be equal to handleInput function. I am going to do something similar to the button, but I am going to use the on:click event and I am going to call on the handleClick function.

[0:24] Let me create a variable first on the name. Inside those handleInput, I am going to use the event in order to override the name value. I am going to do name equals event.target.value.

[0:35] In this handle click function, we're going to do alert("Hello " + name). Now we have the desired effect. If I type in Mike and click on the button, I am going to see an alert, Hello Mike.

[0:45] In Svelte, DOM events have modifiers that can alter their behavior. For instance, we would like to be able to only introduce ourselves once. To do that, we can pass in an once modifier to this on:click handler.

[0:57] Right now, if I type in another name, such as John and click on the button, I am going to be able to introduce myself. This can happen only once. I am no longer able to introduce myself because this event handler is going to trigger only once. We can also do other things such as preventDefault and we can also change those modifiers.

[1:15] If I did preventDefault and once, this event default behavior is going to be prevented and this event is going to be trigger only once.

https://app.egghead.io/api/v1/lessons/svelte-use-dom-events-and-event-modifiers-in-svelte-3/transcript

https://app.egghead.io/api/v1/lessons/svelte-use-an-onmount-lifecycle-method-to-fetch-and-render-data-in-svelte-3/subtitles

Instructor: [0:00] We would like to use the Star Wars API to fetch the data of our Star Wars characters. We would like to display this data using this each loop over here.

[0:07] Currently, we're displaying only loading over here because the characters aura is currently empty. In order to fetch this data, we're going to import onmount from salt. Onmount basically triggers whenever a component is being mounted to the dome.

[0:20] We're going to use this onmount like this. I'm going to create an async function. This function is going to fetch the API response from the Star Wars API. I'm going to do fetch from Star Wars API/people.

[0:33] Next up, I'm going to get the JSON response from this API. From this response, I'm going to get the character's data and store it within the character's array. Now, if I save in the first dot, we're going to see the desired effect.

[0:46] In this list, we have the searcher and the name, the height, and the birth here of each Star Wars character. We are displaying those over here.

[0:53] Important thing to know about the onmount is that whenever a function passed in as an argument is going to return another function, this function is going to actually get called whenever the component is being destroyed.

https://app.egghead.io/api/v1/lessons/svelte-use-an-onmount-lifecycle-method-to-fetch-and-render-data-in-svelte-3/transcript

https://app.egghead.io/api/v1/lessons/svelte-use-svelte-3-stores-to-share-data-between-multiple-unrelated-components/subtitles

Instructor: [0:00] Not all of the applications state belongs in the component hierarchy. Sometimes, you want to be able to share data between multiple unrelated components.

[0:07] In this example, we're going to have this countValue and we would like to be able to share this countValue between this incrementer and decrementer component to respectively increment and decrement their countValue.

[0:18] The way to achieve this effect in Svelte is to use store. First, create a new file and call it store.js. Over here, import {writable} from 'svelte/store.' We're going to create a new store, so export const store equals writable, because we would like to be able to write to the store and we're going to set the default value to zero.

[0:37] Next in the App.svelte, we're going to import the store. Import { store } from "./store" and next we need to subscribe to the store, so store.subscribe.

[0:47] Whenever the value of the store is going to change, I would like to set this countValue to be equal to the new value of the store. Let's see if it works.

[0:55] I am going to reset this default countValue. I am going to set default value of the store to be equal to five. Now, we can see that this countValue displayed over here is taken from the store.

[1:05] Now, let's move on to incrementic and decrementic value. Go to increment.svelte, and we're going to import store as well. Import { store } from "/store."

[1:14] Store also has an update function. We're going to do store.update. We're going to set the updater function, so whatever it was provided, we'd like to increment it by one. This increment function is going to be triggered whenever we click the button.

[1:25] Let's see if it works. There we go. We have the desired effect. I am going to copy and paste that into the decrementer. I am going to call this function decrement, and I am going to decrement the value by one.

[1:37] Now, both increment and decrement components are able to modify the variable store within the store without this value being passed in as a prop.

https://app.egghead.io/api/v1/lessons/svelte-use-svelte-3-stores-to-share-data-between-multiple-unrelated-components/transcript

https://app.egghead.io/api/v1/lessons/svelte-set-a-value-to-a-svelte-3-store/subtitles

Instructor: [0:00] We have an app with incrementer and decrementer components connected to the store. Whenever I click the button, the countValue is going to be updated.

[0:07] What we'd like to achieve is that instead of being clicking 10 times to get the number 15, I would like to input the number 15 over here and just update the count to 15.

[0:16] In order to do that, let's go to this Setter.svelte component. Here, import store from store. Store has a set method. With that, we can use to achieve this effect.

[0:29] What I am going to do now is that I am going to run store.set(event.target.value). If I save that, we have the desired effect. If I type in the number 20 over here, I can always set the count to 20. Of course, both decrementic and incrementic value still works.

https://app.egghead.io/api/v1/lessons/svelte-set-a-value-to-a-svelte-3-store/transcript

https://app.egghead.io/api/v1/lessons/svelte-use-auto-subscriptions-in-svelte-3-to-avoid-memory-leaks-when-using-stores/subtitles

Instructor: [0:00] We have a working counter app. I can increment, decrement, and set the value of the counter.

[0:04] If I want to destroy and create this component many times over, I would have a memory leak. Memory leak will happen because I am only subscribing to the store method and we are not unsubscribing from this store method in any place.

[0:16] We can fix that. Whenever we subscribe to the store, it's actually going to return a function. This function, it would be unsubscribed. Now, we need to figure out when is the correct moment to use it.

[0:27] One way to fix that issue, it will be to import onDestroy from Svelte. Whenever this component is being destroyed, we would call the unsubscribe function. This pattern of subscribing and unsubscribing get a bit boilerplate if we were to use multiple stores.

[0:45] Luckily, there's another way to do it with Svelte. We can delete all of that. Instead, we're going to attach a $ to our store value imported from the store.

[0:55] Basically, if you have a $ and the variable name imported from the store, Svelte is going to assume that we want to refer to the value stored within the store. Right now, if I increment, decrement, and send the counter value, it's going to work as intended with much less boilerplate.

[1:11] This value is going to be unsubscribed by default whenever we destroy the component. As such, we won't have any memory leaks.

https://app.egghead.io/api/v1/lessons/svelte-use-auto-subscriptions-in-svelte-3-to-avoid-memory-leaks-when-using-stores/transcript

https://app.egghead.io/api/v1/lessons/svelte-tween-a-value-and-dynamically-update-the-dom-with-svelte-3/subtitles

Instructor: [0:00] We have a simple website in which we get to enjoy the experience of historic Windows 95 back in the day. We have a couple of buttons. When I click on any of those buttons, I'm going to change the state of this progress bar. If it's going to hit 100 percent, I'm going to get a message, "Windows 95 installed, hooray!"

[0:14] In order to make that happen, we import a new writable store from Svelte. Here, we are using the store that sets function in order to set the store value to an appropriate value, depending on the button that was pressed.

[0:25] We would like to make this app a bit more dynamic. If I go from  percent to 75 percent, I would like to see this progress bar slowly filling in. As we can see here, two weeks remaining.

[0:34] In order to animate this progress value, first import { tweened } from "svelte/motion." We're going to change this writable to tweened. We need to provide the default value, which is going to be . Here, I'm going to specify the duration to two seconds.

[0:49] If I refresh the app and click on 75 percent, we're going to see that this progress bar is going to slowly fill in. If we go from  to 100, we're going to see that this message, "Windows 95 installed," is going to appear only when the progress bar is going to actually hit 100 percent.

[1:03] We can also provide a different easing function to change exactly how this progress value is going to change over the course of those two seconds. In order to do that, import { bounceInOut} from "svelte/easing." We're going to provide an easing function equal to bounceInOut. Of course, it's only one of the easing functions provided by Svelte.

[1:21] If I make this animation a bit longer and then click on 100 percent button, we're going to see that this progress bar is going to go up and down and slowly go all the way to 100. Now we can enjoy Windows 95.

https://app.egghead.io/api/v1/lessons/svelte-tween-a-value-and-dynamically-update-the-dom-with-svelte-3/transcript

https://app.egghead.io/api/v1/lessons/svelte-create-a-new-svelte-project-with-typescript-support/subtitles

Tomasz Łakomy: [0:00] Svelte has added support for TypeScript. In order to create a new project with TypeScript enabled, go ahead and run npx degit sveltejs/template and pass in the name of our project. I'm going to do my-svelte-plus-typescript-project.

[0:15] Next, go to the project directory and we can see that the entire Svelte project has been created for us. In order to have a TypeScript set up in this project, run node scripts/setupTypeScript.js. That's it. Now our project has been successfully converted to TypeScript.

[0:30] Let's open up Visual Studio Code to see what we got. As soon as we launch, we can see that this workplace has some extension recommendations. If I click over here, we're going to see the new official Svelte language support for Visual Studio Code. Let me go ahead and install it.

[0:43] Also, open up the terminal and run yarn or npm install in order to install all the dependencies of this project. After we have our node_modules in place, let's go ahead and run yarn dev in order to start up our project. This is the default Hello World Svelte application with the difference that now, it supports TypeScript.

[1:02] We do get a tsconfig.json, which extends a default svelte/tsconfig. After we open our App.svelte file, we're going to notice that right now, the script tag has a lang = "ts," which means that this script is written in TypeScript.

[1:18] After I collapsed those styles for better visibility, we can see that if I hover over this name is going to tell us that this name is of type string because this is exactly what we have defined over here. If I change it to number, this is going to tell us that name is supposed to be a number, which doesn't make sense. I'm going to revert it back.

[1:34] In order to highlight some other features of TypeScript support instead, I'm going to create a new component. I'm going to call it UserData.svelte and I'm going to start by creating a new script tag. I'm going to set the lang = "ts." Inside of it, I'm going to export let name, which is going to be of type string and I'm going to export let surname, which is also going to be a string.

[1:55] Right now, it's complaining that I'm not using them, so let me render some markup. I'm going to do section. Inside of it, I'm going to have an h1 with a text "My name is {name}." Same for the surname, so I'm going to do "My surname is {surname}.

[2:08] Let me quickly add some style, so I'm going to do style, h1 { color: blue; } Now, we can use this component. If I go back to the original App.svelte, I can import UserData from "./UserData.svelte."

[2:22] Let me add that over here. I'm going to do UserData. I'm going to set the name to be equal to Tomasz and I'm going to also set the surname to be equal to my surname. We can also see that TypeScript is telling us that the surname is supposed to be of type string, so I can just do it like this, Łakomy.

[2:38] We can see the results over here. The TypeScript code has been successfully transpired to JavaScript. As soon as we introduce some issue with our types, so for instance, if I were to go to UserData.svelte and change the surname to be of type number, after I go back to our App.svelte, I will be informed that we have a problem because the surname is a string, which cannot be assigned to a number.

[3:01] Going through the entire codebase file by file, looking for TypeScript issues would be incredibly time-consuming. Luckily, that's about the work. In our terminal, we can run npx svelte-check in order to check the code base for any type-related issues. It is going to detect this issue that we have over here. That string cannot be assigned to a number.

[3:20] Let me go back to UserData.svelte and fix it. Surname is going to be of type string. After I go back and run this command again, I will be informed that svelte-check has found no issues with this code when it comes to types. I can go ahead and push this to production.

https://app.egghead.io/api/v1/lessons/svelte-create-a-new-svelte-project-with-typescript-support/transcript

Up and running with Svelte 3

Tomasz Łakomy

You might also like these resources:

Create forms in Svelte with Svelte Forms Lib

Credits

Course Content

You might also like these resources:

Create forms in Svelte with Svelte Forms Lib