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

Lets dive into a high-level explainer on how you can use TypeScript to chat with a document. For this, we'll be employing two main tools: **OpenAI** and **Pinecone**.

We'll have 4 main steps that I'm going to walk you through:


1. **Document Setup**: I've got a social media study in PDF format, about 75 pages, stored in S3.
   
2. **Data Extraction**: We download this document and use a library called `PDF parse` to extract its data. This data is then split by paragraph or a set character limit. We also have logic to remove any chunk that's 10 words or less because, let's be real, there's not likely much meaningful information in such short snippets.

3. **Creating Embeddings**: We then iterate over these chunks to create embeddings. I'll deep dive into what embeddings are in a more detailed video soon. These embeddings are prepared and upserted as vectors into Pinecone.

4. **Interacting with the Document**: When a user poses a question, we craft a new embedding from that prompt. This is used to create a query request which is then sent to the Pinecone index. Pinecone returns the top five results. We construct a context prompt from these, feed it to OpenAI, and obtain a response to present to the user.

![process image](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698427862/tips/alejandro-roman/chat_with_doc_process.png)

I've set up two endpoints in Postman that will interact with this document AI:
- **Summary**: This endpoint processes the document, splits the text into chunks, and upserts the data into Pinecone.
- **Chat**: Using this, we can ask questions against our processed document. It grabs a user's query, makes an embedding, and fetches the top results from Pinecone to generate a relevant answer.

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

Chat with a Document Using TypeScript, OpenAI, and Pinecone

[00:00] Hey everyone, super excited to finally getting around to do this. I've been wanting to do some learning in public in video format. In the past I've created YouTube videos and tutorials in places such as Egghead and I'll probably do a longer format video for this but anyways just gonna dive right into it. This is a

[00:19] very high-level explainer of how you can use TypeScript to chat with a document. We're gonna use two tools to do that. We're gonna use OpenAI and we're gonna use Pinecone. I'll skip basically talking about or going in-depth in this

[00:35] video. I'm gonna probably create another video for YouTube which is a longer format and I'll dive deep into the code for that. But for this one we'll keep it short, high-level. We're gonna do three things. We're going to one is go through this chart of everything I have right now. I'm gonna explain what the two

[00:54] Postman endpoints that I've built and then kind of just dig a little bit through the code but very high-level. Right so I have this thing that I've kind of set up here and the first thing we're gonna do is by the way you can get the file however you want. I just already had a files in S3. I have some social

[01:13] media study that I found online PDF format about 75 pages long. I've put that in S3. Then what we're gonna do is we're gonna download that and we're gonna use a library called PDF parse to extract the data. Once we've extracted the data from this document we're gonna split it either by paragraph or character limit

[01:32] and I have some logic there to like remove things that are 10 words or less because what let's be honest there's probably nothing meaningful there. Also then we're gonna iterate over the chunks that we've created in this step and we're gonna create embeddings. Again I'll explain later in a longer format video what embeddings are if anyone wants to know. But then we'll prepare those

[01:51] embeddings and upsert them in as vectors into Pinecone. Then once the user comes around and ask the prompt or a question we're gonna create a new embedding from that prompt and we're gonna use that to create a query request and send it to the Pinecone index. Once it's in the Pinecone index, Pinecone is going to

[02:10] return us the five top results. We're gonna create an array of those top results. We're gonna join them and construct like a context prompt, feed it to OpenAI and generate a response for the user. Again it's basically chatting against the documents using the documents as a database. So quick

[02:27] explainer here, I've created two endpoints that I have in Postman. One is called summary and the other one's called chat. I've kind of built this question that we're gonna use. So the first question or the first step, the first endpoint here is gonna create the chunks and then create the

[02:44] embeddings and insert them into Pinecone. So we're gonna hit send and basically just quickly through the code what it's doing here is it's grabbing the file, the socialmedia.pdf from my S3, summarizing it. It's not really summarizing per se but it's creating chunks, splitting the text and

[03:03] upserting that into Pinecone. Then, please ignore this TS ignore, I'm just doing this very raw, we're gonna have a chat endpoint which is what's gonna be able to ask questions against this. And what this endpoint is gonna do is it's gonna grab that question that the user made, it's gonna create an embedding, then

[03:21] it's gonna basically write against everything that's in Pinecone to try to get a result, get the five top results and return them back, which we're gonna construct a prompt from that. We're going to basically give it a very high-level instruction prompt like answer the question sincerely, if you don't know

[03:38] the response just reply I don't know. We're gonna provide the chosen text that came back, we're gonna give that as context, then we're going to like add the prompt to the question and then give the answer. We're gonna then grab this constructive prompt that we have here and we're gonna feed it to OpenAI and

[03:56] then give the answer back to the user. So let's go back to Postman. The process should have been done, it's like super quick. Now we're gonna hit send here and we're gonna ask it a question. What is the impact of social media usage for high school students? So it can take like a couple seconds here, so just bear

[04:15] with me. Awesome! So the answer that it was or it's basically it went through all of Pinecone and said okay the impact of social media usage on high school students varies, the student found that social media is frequently used by high school students for both educational entertainment purposes etc etc and we

[04:34] can ask it pretty much any other question we want and if it doesn't know it's just gonna say I don't know. Alright thank you for tuning in, let me know what you think in the comments and if you do want me to provide like the github repo and stay tuned for a longer format video on YouTube. Thank you all!

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

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

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

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

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

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

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

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

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