SvelteKit and TypeScript Course - Build A Type-Safe SvelteKit 1.0 App

what's going on guys it's Cooper codes and welcome to the complete spelled kit 1.0 and typescript course in this video we are going to be building this fully typed project that allows us to have a bunch of code Snippets locally that we can save for example we'll have a snippet title then we can choose a programming language here and then we can also add in a code snippet once we have all these input parameters you can press create snippet and it's going to be added to our local state here this is a fantastic tutorial for learning typescript because everything here has types the inputs here are typed the components of these little code cards are also typed and we even have a local writable so a local store and svelte kit that has types as well and that allows us to have things like other properties associated with the code Snippets for example you can favorite or unfavorite a specific snippet and of course we can also delete Snippets and one last thing is if we reload the page here we're actually doing a mock API request that sets us up with two of these initial code Snippets this allows us to Showcase some kind of like backend to front-end type safety as well so as you guys can see with all that functionality this is a great tutorial for learning the inner workings of both sveld kit and typescript if you're looking to use typescript when you're developing this felt kit this is the video for you let's get started by creating our application in this video I'm going to be using a UI toolkit called skeleton skeleton is nice because it does a lot of default styling for us and makes our application look great we can build a felt good application by saying npm create skeleton Dash app at latest and then the name of the application which I'll just call app what this command does is it instantly sets up a felt good application with all these skeleton UI stuff already created so it makes our lives way easier so now we can just press enter we can press yes to this and there's going to be a good amount of steps here to get us set up first of all we want to say yes to using typescript so just press enter when it's green like this I'm going to say yes to eslint yes to prettier I'm going to say no to playwright and no to vidt test so I'm going to install both code block and pop-ups and so to make these highlighted you can press the space bar and then the space bar here once they're both green you can then press enter and I'm also going to press the spacebar on all these different Tailwind plugins I'm going to choose the Crimson theme but you guys can choose whatever theme you want but I think Crimson looks the best so I'm going to go to the Crimson here and press enter and then I'm going to choose the Bare Bones application template and it's going to install the application alright so that might take a second for you guys it took a second for me for some reason we can then go into the app directory by saying CD app and then we can see what our application currently looks like by saying npm run Dev it's very Bare Bones as it told us and so now let's go in and create a default to layout for application we can open up the app folder over here and I know it's a lot of code here but the majority of the logic for this video is going to be inside these Source folders so just pay attention to that part in the source folder we have the routes folder routing and spelled kit is folder based and so the first files inside of this route are going to be serving local host you know just the base route right here for example and so we can look at the page dots felt which is just this very simple container and we can also look at the layout dotsfelt let's get started by building a basic layout for our page because we are using skeleton UI for our application here we're given access to a handful of things to make this initial user interface really simple and so we are going to import a couple things from skeleton UI I'm going to import the app bar and then the app shell from at skeletonlabs skeleton and so inside this layout the slots is where our page is going to go and so we're going to make a very simple layout here where you have the app shell this allows us to contain our entire application so we're going to make sure to put the slot inside of there and then the app bar is just like a nav bar for example so inside of our nav bar we can just do a simple H3 call holder code share this is what I'm going to call this website I'm also going to give it a class of text Dash left this this comes from Tailwind CSS and allows us to left align the text to our navbar this is recommended in the documentation but I'm going to do a svelte fragment for the header slot so I'm going to say slot is equal to header and we can wrap this around our entire app bar and so that's all we need for the layout you can imagine we have an entire app shell we have a nav bar at the top and then this slot is where all of our page data is going to go and so if we go back to our website we can see the nav bars here which is great news and we have this very simple let's get cracking bones which we're going to change into our new components so we can go over to plus page dots felt this is the route file showing the page for this specific route in our sveltecode application I'm going to make a relatively simple one grid layout for our application so we can delete everything here as they kind of mention and let's get started creating our one grid layout the first thing I'm going to do is I'm going to make a div this div is going to wrap everything and it's going to be a class of flex this allows us to justify everything to the center of a page so we can use the justify Center property from flex and so it keeps things aligned to the middle of the page we can then create another div which is going to be our very simple grid so it's just going to be one single column so we can make it a Class B of grid initially from Tailwind then we can say grid Dash calls dash one so making it a one column per row grit is how you can view that I'm going to give a gap of 4 for some styling around our grid components a minimum width of full but when we go to a medium screen I want the minimum width to be 750 pixels I'm then going to have an initial header so an H3 here with the class of text Dash Center and then py-6 so there's going to be padding in the y direction for this header and we're going to create a code snippet because we're going to have that little like input box right under this and so I'm actually going to have the screen like this so we can see the styling as I build it and then the output on the right so now we can make a div that has all the different to inputs that we're going to have when we want to create a code snippet so this div is going to look like this and we are going to use a class equal to card which is going to give it some nice like card styling we're going to give it a p-4 so some general padding a width of full a text Dash token and then a space Dash y-4 when we build our inputs they're all going to have a very similar structure I'm going to initially have a label here which is going to be class is equal to label which gives it some styling to be a label and then a spin here which is a snippet title so the name or input because the span is going to be right above the actual input so now we can say input class is equal to input then its type is going to be equal to text so a text input and now we can also have a placeholder which is going to be equal to enter Title Here dot dot and we can close off that input here and boom as you guys can see a nice Simple Text input and so to make things simple we can copy over what we just made with that label make another one but instead this is going to be for our programming language and instead of an input we can just boom delete that input we are going to have a select so we can say class is equal to select so a select kind of gives us a drop down in some default styling and inside of the select we can have all the different options so to create an option for HTML we can say option value is equal to HTML and then HTML right here and now you can see we have a drop down with just one HTML and so we can do two other options here I'm going to have have CSS and then also typescript and so we can change the value to CSS here and also the value to typescript here and so again let's copy that first label here bring it down this is instead going to be where the person pastes their code so I'm just going to say the actual code snippet itself and so now we can do a text area because it's going to be multi-aligned text so you can do that by saying text area like this give it a class of text area I'm going to give it four rows initially like this then I'm going to have its placeholder be equal to enter your snippet code here dot dot and then I'm just going to close off the text area and so there we go we have our initial code snippet and so I can show you guys like this here it also stays at a smaller size when you make the screen larger so pretty cool I'm then going to make a very simple div here that's going to hold our H2 for my code Snippets as you'll see nothing's here yet I kind of like how everything looks just aligned so I'm going to say class is equal to text Dash Center and then py-6 giving it some padding all right so now we actually need that card that's going to show our code snippet data so I'm going to make the code snippet cards their owns felt components so we can go back into our file browser here at the top level of our source folder I'm going to create a code snippet card dots felt so for now I'm not going to worry about any typing or properties we're going to get into that later in the video I'm just going to make a simple card for us to use so firstly I'm going to say div class is equal to card giving it that card styling like we saw with the inputs it's then going to have a header which is going to be class is equal to card Dash header then we have our title of snippet this is eventually going to be a property but don't worry about that for now and we're also going to have a simple div class is equal to float Dash right this allows us to have some buttons that just go to the right of the text so for example the first button is going to be favorite and and his favorite button is going to be a type of button and its class is going to be equal to button button Dash small then variant Dash filled Dash secondary and so filled is the variant and a secondary is the color we can copy this button again put it in here and this one's just going to say x because it's going to be like a delete button and so now we can say variant Dash filled Dash error to make it you know look all red so we can press it to delete so under our header we are going to have a section for our card which is going to have a class of p dash four and now we want to use something called the code block so at the top of the Spells component we can add in a script specifically with typescript by saying laying is equal to TS like this and we can say import code block from skeleton lab skeleton this code block component is incredibly important because it allows it to have some really cool styling and show off code in our application we can add it to our application by just saying code blah block like this and it's looking for a language so I'm just going to say HTML is going to be the default language and the code is going to be equal to we can just write some HTML code real quick so H1 hello it's Cooper codes slash H1 and again Guys these will eventually be variables so we can go back over to our routes folder and go into Plus page.spel at the top of our page we can make another script so we can say script laying is equal to TS and now because we want to use this component within our page we can then import the component by saying import code snippet card from its location and so now we can add in code Snippets here by just using the components so we can say code snippet card like this and right now it has no properties which is completely fine and so if we go over to our code Snippets here we're going to see okay hello it's Cooper codes so it's kind of cool it's showing up one thing we need to do is we need to turn on the highlighting for the actual code itself we can do that by going over to our Plus layout dot svelte importing this function called store highlight.js and then we're going to go into our console and then say npm install highlight.js this allows us to get code highlighting in our field ticket application and so now we can import the highlighter by saying import hljs from highlight.js we then want the skeleton UI to be aware of this highlighter by saying store highlight.js.set then hljs like this this means that if we ever use a code block component it's going to be using the highlighting that is determined right here we can then also import the specific CSS of a specific kind of code highlighter that we like or a code theme for example we can say import highlight.js slash Styles slash GitHub dark dot CSS and so now we can reload our application here and you'll see we actually have you know it's a pretty Bare Bones piece of HTML but we actually have some highlighting that's going on here which is great news alright so we've now built the underlying user interface we're used throughout this tutorial let's get started by using typescript to type the inputs that we have right here so we can go into our plus page.svelts and we can see all of our different inputs here so our inputs have a title which is a text input a programming language which is eventually going to be a string and then a code snippet which is also going to be a string so we can go into a very special folder here called app.d.ts this stores all the different types of your svelte application and so if we create a type here it is recognized throughout our entire application which is a super important point so if we ever want to type something what you can do is you can go over to this file and then make an interface so like a class and typescript of the type you want to make for example I'm going to say interface is going to be code snippet input this is so we can make an object that has all the different inputs that we want so we can send it over to our back end or send it to where we create something so we have a title in our input which is going to be a string we have a language so the actual codeing language which is going to be a string then we have the code itself which is going to be a string as well and so although this is a bunch of strings in our inputs if you had a number if you had a you know even a different object type for example you can type it right here so let's go back to our page dots felt and use this code snippet input to create an object for all of our different inputs so we can go to the top here and say let form data for example be typed to code snippet input and so if we leave it just like this it's actually going to give us an error because this variable is expecting all the different properties from the code snippet input type and so if you guys want to cheat a little bit you can go over to your app.d.ts you can copy these three properties and then paste them in here it's not going to be perfect but it's going to give us a place to start so title should be an empty string code is going to be an empty string initially and for this select thing specifically I'm going to set the default value equal to whatever is going to be selected by default in our case it's going to always be the top value you so we can go up and set that equal to HTML and boom now we have a form data that's typed specifically to our input and so I'm just going to leave a comment here for kind of learning if we ever make something like a create snippet which we are going to make in this video we can have the parameters for example the input parameter be typed to code snippet input as well and so that's really powerful because it allows us to have the same type in this component and also that same type showing up in the other area of our application and so for example if we ever wanted to add more things to our input it would also add more things to how it's treated in the other snippet and we're actually going to do this in this tutorial so look forward to that so sveldkit is pretty interesting for one reason we can use the bind property on all of our different inputs by saying bind and then the value so we can bind the value of a certain input to a certain property for example we can say form data dot title so whatever the input of this type equals text here that has our title it's going to be bound to the form data.title so if this input ever changes that means that this property right here is also going to change and that's going to be true for all of our different inputs so we can even copy this bind value right here bring it over to our select for example and we can instead say dot language here and then we even have this text area down here we can say form data.code and so that's pretty cool that means that we can sync up all of our different values here to one kind of central object that is typed which is pretty interesting all right guys so now the tutorial is going to get a little bit interesting so I'm going to make some comments here to kind of show you guys what to expect next first things first we are going to make a snippet store which is going to be a local writable that allows us to store code Snippets we are then going to add the ability to create slash delete Snippets and then we're also going to be able to favorite Snippets and then finally super interesting we are going to make a plus page.ts to initially load in some example Snippets so it's kind of like mocking a database request and so this snippet store right here is super important we can get started by creating the local store by going into our source folder and then make a file called snippetstore.ts so anywhere in our sveldskit application we can make typescript files just to house certain Logic for example we're going to have logic here that I'm going to comment out real quick we are going to have a snippet store which allows us to store code Snippets and so you'll see a code snippet is going to have four different properties a title the code itself the language of the code and then also if it's been favorited or not so I'm just going to call that favorite we are going to have the ability to add a snippet delete a snippet and then toggle if the snippet is favorited or not and that's the basic idea of the logic here and so I say all that firstly because look at this this code snippet here is probably something could turn into a type and we wanted to have these four things the top title the language and if it's favorited or not so we can go into our app.d.ts and make an interface under our snippet input here and we can say interface code snippet we can cheat a little bit by copying all these different things and then adding on the favorite is a Boolean so I kind of made this fourth property to have something that wasn't just a bunch of strings but it also adds some cool functionality to your project and it shows you that just because this code snippet input and this code snippet are similar does not mean that they are the same thing you could imagine if your interface code snippet is coming from a database you might have things stored in there like you know this is just for example we're not going to do this in this tutorial but you know the user who created it might be a user type might have a created on which might be a date type or something along those lines or usually just store data strings but you know this is giving you guys an example of how this code snippet is different than How We Do typing two inputs for example all right but now we have our code snippet created so we can go back over to our snippet store the first thing we're going to do is we are going to import a writable from svelte store so this writable store is how we can make a kind of like local state if you're to think from like a react background of a specific type and we're also going to get access to the get here which allows us to get the value of a store and so this snippet store we can say export const which means the rest of our application can get access to it is what that export means and we can make the name of our store called snippet store like this is going to be equal to a writable and so we could just do a writable of an empty array like this but this is an example of not using typescript if we want to use typescript we can use our little code snippet type that we just made we can say inside of like HTML brackets here code snippet like this and then we want to make it an array of code Snippets boom there you go this allows a writable to have logic that's like code snippet one code snippet two along those lines right and it's important because that means that every single item in this array has to be typed to a code snippet you can randomly delete stuff you can't like clear it out you know it's that's a big essence of typescript is as we you know add Snippets or delete Snippets or toggle favorite they still have to adhere to the code snippet type at the end of the day or else it's going to give us errors and so now we can make functions to adjust our writable or add things or delete things to our writable so we can say exports function add snippet and it's going to have an input this input is going to be in a little add snippet button in our front end and what can we get access to in our front end let's go look at plus page.spouts we can get access to this form data which is a code snippet input type so what can we do over here make the input be code snippet input yeah I know it's pretty cool it's pretty cool and so now if we say input dot what we can actually get access to the properties that are from our front end in like kind of like different logic which is and so in order to get the current array of what our Snippets looks like for example like this we can say let Snippets be equal to get snippet store which gives us access to the value of our snippet store if you guys are unfamiliar with writables the main concept here is that a writable is this big kind of overarching object that kind of manages your data it is not the data itself it's the huge important point if you want to get the data of a store you have to use the get function here and do Snippets store like this I will mention for like the typescript Nerds you're about to yell at me for this you can do other things which we're going to do in this tutorial like dollar sign snippet store this is going to listen to changes to the value of snippet store and so now we want to update the value of the store itself we can do that by saying snippetstore dot update this is going to have a callback function which is expecting a new code snippet array so I'm just going to put this here A new code snippet array to replace it and you'll even see in the error here void is not assignable to type code snippet array so we are going to give it a new array with our new code snippet input here so I'm going to say a return a new array this new array is going to contain all these Snippets so far so dot dot dot Snippets this is called the spread operator if you guys want to look that up but it's pretty much taking all the different objects right here for example and adding them to the end of this array that we just made in the front of the array which is going to be at the top of our website we can add in our new code snippet and we are learning a lot about the spread operator today because we're going to say dot dot dot input this dot dot input is a code snippet input right and we know if we look at our types code snippet input has title language and code and so when we do dot dot dot code snippet input it's going to put the title language and code and so the last property we need to add to our newly created object is this favorite right here so we can go in here and set the favorite equal to false initially and so that's a super simple way of just adding a new object from input data and then adding all of our old objects to the end of it as well and so that's all we need to do for adding Snippets alright so now we can take a look at how do we do delete Snippets well we can say export function delete snippet and this time it's going to take an index that we want to delete so an index is going to be of what type it's going to be number it's going to be it's going to be like 0 1 2 something along those lines right I mainly just decided to delete by index to make this tutorial simple if you have a database for example you might want to delete by ID it's a better choice but because we're just using a local store here I'm going to delete by index and so similar thing here we can copy this let Snippets from above paste it in and we can even copy this snippetstore.update but the return statement is going to be way more simple it's just going to be Snippets that's it because you could imagine when we delete something we are just going to do a very simple array delete in JavaScript or typescript in this case so we can just say Snippets dot splice this is going to adjust the actual value of Snippets so we don't even have to say like you know new Snippets is equal to nope don't have to do that and we can just say go to a certain index and then chop one off from there is this like very common way to delete something from an array in JavaScript and I'm kind of using JavaScript and typescript interchangeably there because you know typescript is just JavaScript with types but this removes one item from index index if that makes sense so if the index number was like zero one or two so it may be like you know index two and so there you go a very simple adding and deleting to our store and so I really like that we have this toggle favorite because it allows us to do something that isn't as simple as up here so we can go down here paste the code in and I'm just going to say toggle favorite and so I'm just modifying this code that we got from above we don't want to do the splicing so make sure to delete that or else you're going to start seeing random stuff get deleted and inside of this updater we are going to do something that's very kind of common JavaScript logic where we are going to return a Snippets dot map this means we are going to go through every single value in an array and then return something based off that value and so let me explain that inside of here we're going to have a Snippets and then a snippet index is where we get access to when we use map and so you can imagine if we have an array for example and at its most basic form we just have a bunch of objects with a favorite property which is going to be true or a favorite property which is going to be false and you can imagine we have all the other data in here too but just for basic example just only favorite for now if we wanted to kind of like favorite this second thing what would happen well the second thing in the array is going to be of index one and so when we map over our array here going from one item to the next item just going through them like that we're eventually going to say if the Snippets index is equal to the index that is from up here so up here is actually where one is going to come from it's the index they want to favorite or unfavored and so when these two indexes are equal we are at the object we want to toggle favorite so we can return an object like this where it's going to have all the properties of these snippet that we're currently at so it's going to have the same title same code same everything right that's what dot dot snippet does it gives all those different properties and then we want to make the favorite property be equal to the opposite so we can say opposite with an exclamation point snip it the current snippet we're at and then dot favorite and you'll see it's actually showing the dot favorite kind of autocomplete because snippet here is typed to a code snippet pretty cool and so if it's false it's going to become true and if it's true it's going to become false and so if the snippet that we're on isn't the snippet that we want to toggle favorite we can just return all of that Snippets data so return snippet like this because this is a very basic way of looking at it but this snippet style map is slowly building up an array of different objects right we have the first object we have the second object we have the third object it's going to keep building it up like that eventually it's going to find an object that's different for example it reaches this if case and so then we are going to add in the changed object and then at the end of the day Maps going to create something like this this is obviously like pseudo code right but this change object is going to be favorited or unfavorited and then this array is going to get sent to the snippet store and updated that's why this return statement right here is so important is it's saying return this entire thing which is going to build an array like this it's kind of how you should think about it alright guys pat yourself on the back this store stuff is not simple but if you kind of stay with me along the whole way you guys are honestly ready to be working with stores yourselves so hopefully this is a great introduction and something that was subtle happening during this whole store part is everything here is typed the snippet here is a code snippet the snippet index here is a number we can even look at his favorite and it knows that this favorite is a code snippet dot favorite so everything here is typed including Snippets nose is a code snippet array and so just to clarify this I've said this before in the tutorial so if you're like I already heard you bro sorry but these exports throughout this entire file are incredibly important because that means that anywhere inside of our felt good application we can grab these things and I'm talking about that again because we're about to do just that so we are going to go over to our plus page.svelt and we can initially set a value of our snippet store so we can say snippet Store It Auto completed that but you can go and import things from your snippet store like this at line three and then we can get access to the dot set of the writable we can set its value so initially I'm going to set the snippet store equal to an array that I'm just going to make right here this is eventually going to be data from an API call but we're going to get into that in a second so we can make an array it's going to have one object and guys what do we know about this object it has to be a code snipper so I'm just going to say title is equal to Cooper codes snippet you can say your own name if you want language is going to be HTML the code property is going to be equal to a div I'm going to say this is a div I know I'm pretty creative and then its favorite property is going to be equal to false initially and then boom once you're the right type the errors go away and then we're going to do some cool stuff here okay this is like a crazy typescript for if you're just starting with this but we can scroll down here and you see where it has code snippet card right here we can then make in each Loop so we can say for each thing inside of R here's the crazy part dollar sign snippet store this is giving us access to the value of the snippet store and it's also listening to the value of the snippet store so if we ever add anything or remove anything it's going to re-render and show different code snippet cards and so from this snippet store you can get access to the snippet itself so as snippet and also get access to the index we're currently on and we can end our each statement by going down here and saying slash each and so we should expect to have one thing inside of our snippet store and so it's going to show only one code card I'll make a comment here we need properties so we can do that in a second but let's go look at our application and see this running all right pretty sick you'll see we have one code snippet and just to test things out we can go up here copy this object and make two different objects and so now we would expect to see two different cards alright guys things are working and look at that we can even scroll a little bit now one thing we want to do is we want to look at how do we do properties inside of typescript and so boom we're going to get started on proper produce right here and so now we're going to look into sveldskit properties and how they work with typescript we are going to add in some properties to the code snippet card that allows us to get the code snippet data and make it typed data as well so I think one of the best ways to teach this is to get a bunch of errors and then fix a bunch of Errors so we can do is we can say snippet property is equal to the code snippet That We're looping through and so remember the snippet store is an array of code Snippets and so this snippet right here is a code snippet which is pretty cool then we also want the index of where it is in the array and so we're going to make an index property be equal to index and so now we've got a bunch of Errors we can fix these errors by creating some properties in our code snippet card component so let's go and do that so we can go over to code snippet card right here and we can say export let snippet be equal to code snippet like this this means that we are creating a property called snippet and want it to be type to code snippet if we try to set it equal to an empty object what's going to happen you're gonna get messed up we can also set some default values to this code snippet just to kind of like protect ourselves in our code so we can just do a bunch of regular values like title is equal to an empty string language an empty string code is equal to an empty string and then favorite is equal to an empty string just kidding my favorite should not be equal to an empty string remember favorite is a Boolean so it should be equal to false it's going to give us this weird yellow error because we never use this property so it's like why do you have a unused property but we are going to use it in a second so just ignore those for now and we can go back and look at our plus page.s Felts we'll see we also have the index here which is a number so we can go back to the code component and say export let index is going to be equal to a number pretty cool there you go and so now something really interesting gets to happen is we can go to our text there'll be hard coded down here and start to fill it up with values that are legitimate for example we can say snippet dot title saying okay we have the snippet here here we're going to use the title this is some cool little shorthand syntax but because favorite is a true or a false we can do a little block here and say snippet dot favorite and do a ternary statement so we can do question mark if it is favorited we're going to show them the unfavorite because they're going to have the option to unfavorite it if it is not favorited we are going to be like here is the option to favorite it so that's like the logic there if you also want to like make it change colors by changing this class here by doing the same thing giving it different classes based on if it's favorited or not but I'm just keeping this tutorial simple and we can also make the language down here be equal to the snippet dot language and the code is going to be equal to the snippet dot code so boom we are chilling now we have a fully typed component which is pretty legit so let's go back to our application and see this working so as you guys saw before my objects for the two code Snippets I put in are completely identical but they're actually looking at the object itself which is really great news now we can actually add in some function personality from our snippet store by allowing us to delete Snippets and favorite Snippets so let's go check that out so we can go to the top of our code snippet card and import logic from our snippet store for example delete snippet and also toggle favorite it might seem like magic to you guys but what we can do is we can trigger the functionality of our snippet stores by having the on click event on our buttons then have an arrow function which points to the logic of our snippet store where you're going to say toggle favorite and so we can look at toggle favorite and say what is it expecting it's expecting an index which is a number so you can toss in the index that we have access to our properties here that's also typed as a number I know the typescript stuff is pretty cool and so now for this button it's like the Red X to delete it we can say on click same exact thing pass the arrow function and it said point it to the delete snippet and what is delete snippet expecting the index number so boom there we go so now in our application we should be able to toggle the favorite and also delete Snippets let's go check it out alright make sure to refresh your application you can say favorite and unfavorite which is great news and then boom we can also delete Snippets okay so something that I'm going to do now is that we have these code Snippets here that are just manually loaded in through an array but I'm going to make a call in our page.ts that's kind of going to simulate if you wanted to get code Snippets from a back end so just to clarify we can go over to plus page.svelt scroll to the top and you'll see we have a snippet store right here and so we can get this data right here specifically from an external Source by using plus page.ts so let's go over to our routes and make that plus page.ts file this is going to give us access to a very important type we can say import type of page load and that's going to be from dot slash dollar sign types which are pretty much a bunch of generic spell kit types for us to use we can then make a load function so when our page loads for example we want to get new data we're going to say export const load and it has to be called load just so you guys know that's going to be equal to a function that we can return data with this load function is going to do something called satisfies page load and so why do we have to say satisfies page load it's because page load is going to pass in this slow data into our page data which is something that we can get access to later and that page 8 is going to be in our front end the load itself is going to be pretty simple we're just going to return an object and inside this object we can have a bunch of different loaded data I'm just going to have a Snippets property which is going to be equal to an array and so we can go back over to our page.s felt and then grab the objects from over here and then paste them in here and just to make the website look cooler I'm going to say cool code snippet is going to be the other one and I'm going to make it a language of typescript and I'm going to say console.log subscribe so that's like a virus or something you shouldn't run that but if you want to subscribe to my channel feel free to and so a huge emphasis of this part of tutorial is that you can get this data from any source so you can do a fetch call here to fetch data you can do a graphql client you could just you know you could just manually change this object here whenever you want that is an option and so I'm just showing you guys that this is hard coded but it doesn't have to be and so if we go over to our page.svelt how we get access to the data that this page.ts is giving us is we can say export let data be equal to the type of page data which is going to import it here if it didn't automatically and so now we can see data Dot and it's showing data.s Snippets which is pretty crazy we have code that can run on the server or do API calls on the client that is still typed and it's giving us access to these Snippets here instead of setting a snippet store equal to this huge array we can set it equal to the data from our backend by going in here and just pasting in the data.s Snippets and we can just make that one line it's pretty simple and so now if you run our application again we're gonna see it's actually getting that data from our plus page.ts pretty legit and so now we can add a button to our create code snippet that's going to allow us to add a new code snippet to our store here and so this is where everything kind of comes into place so let's check it out so we can make a button after all those different labels and say button type is equal to button and it will give us some classes by saying class is equal to BTN BTN Dash small and then a variant Dash filled Dash primary and I'm just going to have it say create snippet and then when we do an on click of this specific snippet what do we want to have happen well we wanted to call the add snippet code and so we can go to the top of our code here and from the snippet store we also want to get access to add snippet because if we go to snippet store we can see it's going to call this add snippet code right here and so let's scroll back down and make the on click point to add snippet and what is it expecting it's expecting an input that is typed to to code snippet input huh I wonder where we have an input this type of code snippet input let's check right here we have the form data which is Type to code snippet input so we can copy this bring it down and paste it in here and we're good to go alright guys this is the kind of like finale here so let's go and add this snippet I'm going to select typescript I'm going to say snippetstore.ts example and guys I'm the most Shameless developer you've ever seen to get some typescript code I'm just going to copy all the code here and then I'm just going to paste it into the code snippet like this and so boom now we can see that when we add the code snippet it's going to be shown inside of our code right here and so guys this is no joke when it comes to how much you guys have learned about selkit and typescript in this video so thank you so much for watching I genuinely appreciate it and I kind of found it difficult to understand how the different typings work together in sales kit so hopefully this video helped you this video is just an introduction to what you can do with spell kit there are some things I didn't cover in this video for example the store doesn't get saved to local storage for example so if we ever refresh the page all of our progress is gone and I kind of made that decision not to use local storage because I wanted to show you guys how you can load in this data from like an API call for example alright guys hopefully this project was a bunch of fun to make and again thank you for watching

Channel: Cooper Codes

Views: 11,204

Keywords: sveltekit, svelte, sveltekit tutorial, sveltekit 1.0 tutorial, sveltekit 1.0, sveltekit beginner project, sveltekit 1.0 typescript, typescript sveltekit, sveltekit project, sveltekit typescript tutorial, sveltekit 1.0 typescript tutorial, skeleton ui, sveltekit stripe api, stripe sveltekit, sveltekit 1.0 stripe, stripe api sveltekit, sveltekit api, sveltekit routing, stripe api, sveltekit 1.0 routing, svelte writable, skeleton 1.0, skeleton ui 1.0, sveltekit course

Id: 4soqks5zBLI

Length: 38min 57sec (2337 seconds)

Published: Thu Mar 16 2023