Let's Learn Svelte.js in 60 Minutes (fun speed run).

how does my gorgeous friends on the internet today we're gonna do a speed Speed Run of the svelt docs for fun I don't know I thought it would be a cool idea like um I held a Twitter poll recently and I asked you guys oh let's just cover like a framework and go through it and see kind of how it compares to react and you know like because it's a totally different Paradigm right uh so I thought it'd be fun if we just head in and explore and kind of see the differences and maybe make a series out of it who knows maybe we'll do quick mix solid next uh maybe we can live stream it as well who knows let me know down in the comments we'll do another one of these if it gets let's say a thousand a thousand likes I think that's a thousand likes I'll do a spelled kit version of it and then whatever you guys want to why is this open sorry I haven't had my nap okay so let's give it a go shall We alright so I'm just gonna switch over to BS code because this is quite hard to read and I cannot zoom it it's Rich fix this I need a way to make this font bigger okay so let's start with our first component this belt oh this is exciting okay so inswell an application that's composed from one or more components a component is a reusable self-contained block of code alright so if you've done any other Frameworks before and know how components are basically you have all your logic and your markup and this one component that can be potentially reusable in different parts of your application or customizable and to tailor your own needs as well there's loads of things you can do with components but the way react defines components for example is completely a different Paradigm to houseveld defines its components right so right then and react you'd have to do like a like an export function function default whatever counter right and then you'd have this there we go you tap this and you return some jsx here right like cool uh whereas so it's like all JavaScript here whereas spell takes a different approach um where it's more focused on markup and HTML so let's doesn't let me copy base okay so I just installed it with veed here we'll just do a Hello as well and see so it's just one component in the app I deleted everything else and that should already work so if we check that out hello asvelt awesome so we got our first component now we can add a script tag above if we want to run any any JavaScript and the nice thing here is that it is like just JavaScript uh which is quite nice actually you know you the thing with react is that you'd have to you know create your packages on npm specifically for it to work in and react with here since it's only JavaScript and the script tag I could import packages down are not necessarily optimized for as well for anything and I can just implement it in my own code so that's really nice I do like that um okay so we can define a variable here which is kind of like a piece of state right this is kind of the equivalent of doing a use State and react so let's just do like develop by at if I'm wrong about anything correctly because again I haven't touched this in years but we'll try to get through it hopefully it'll be fine okay so we have a name so if we want to use this name in our markup here we can just do name like that cool have a look awesome and then let's see what it says here okay so yeah we can just do normal JavaScript and these curly brackets so I can do two upper case like that and hit save and if we have a look yay it's all uppercased nice okay let's move on to the next one uh this looks like it's it's just the same it's just adding the image source here yeah I guess we could do it here quickly so you can do source equals to SRC like that and boom done all right and we got the image back all right now if the name is equal here the prop name is equal to the source name here we could just get rid of it so you can simplify it like that cool okay it just needs an ALT attribute but that still works as you can see okay cool whatever we'll go next uh looks like you can just do a CSS as well so you just add your style let's try that style right and then you do H1 I haven't done me I haven't done CSS in years uh tail and just changed our lives doesn't it okay let's do a little color of light blue nice Okay cool so that works and just so you know think I read somewhere that it's scoped yeah so it says it's scoped which means that if I make another component um and I have a H1 in there it's not gonna affect that H1 all right so it's gonna keep it separate it's gonna scope it to only this file so that's nice lovely let's keep going okay so what is this about okay so how do we import another component because we don't want to write all of our code in one single file um yep so we can just make let's go in the lip here let's make a new file we'll call this or something I don't know a lot of H1 here pointer like that cool so the way we import it yeah pretty much the same as you do in react you do Imports pointer from pointer all right cool nice let's move that to the top okay let's have a look oh we need to also render it out here so let's just do that we'll do pointer okay let's have a look and there we go as and as you can see since this is a H1 as well this is a H1 it doesn't mean that it's gonna affect it awesome all right so that's how you can do that let's have a look uh what else we can do okay so strings are inserted as plain text meaning that characters like uh the smaller than and the bigger than sign have no special meaning which is great because that kind of stops you from doing any cross-site scripting so you cannot just go here and uh what would I use yeah let's change this developer out here we'll get rid of the two uppercase here we'll just keep name and here we'll do hello there button Blue Button here we go save all right so if you add something like that it'll still just render it out as a string but you could use this HTML uh that's it's just gonna run around the HTML for you like that but again I don't think they yes like it's it's your own risk pretty much if you want to do this so just be wary of that let's finally look at reactivity because that's that's kind of a big portion of how we create these applications right so um so the syntax is going to be a tad bit different here rather than doing on click like you do in react seeds go down here let me just show you quickly so let's say like you have a div you can do it on here actually let's get rid of this let's get rid of this okay so you do like on click right and then you'd run like a function here uh here we're using the syntax on click like that all right cool and then we just it looks like we're just passing in the increment and our increment function is literally just count plus equals to one so that's how you can update your state so yeah let's let's recreate that counter pretty much here so let's counter equals to set the default to zero like that okay so we just add let's counter up here and I'll just make another let's go down here and again look it's just literally JavaScript so function call this increments cool and this is gonna just take counter plus equals to one it's that simple and here we can pass in a reference to that function and that's that and this is erroring out because that doesn't exist but we can do increase my counter can you didn't see that um counter yeah cool does that work it works awesome what's the squiggly visible non-interactive elements with an on-click event must be accompanied by key up or key then yeah okay cool that's fine uh but yeah look at that super simple isn't it let's let's make a better example here we'll just add two buttons button and we'll just duplicate that increment and then deceased oh decrement decrement okay cool so yeah let's just remove that we'll just keep H1 here with counter like that what am I doing here H1 counter awesome and then we'll just add an on was a click we'll do increments and then we can just make a new one here on decram decrement on talk like jeez this is that sounds weird to me in my head we'll keep decrement you know we don't even need this I mean we could just do on click right we could still run an arrow function in here and we can do counter plus equals to one that should be fine right yeah it is cool so I'm gonna just run that but again you can Define your functions up there as well counter minus equals to one save awesome D2 super super easy nice okay so let's take a look at this so spelled automatically uploads the Dom weary component State changes so basically every time you click on increment here or decrement uh this components I believe it's just gonna be fully re-rendered uh okay uh oftentimes there's parts of your state that needs to be computed all right so basically you might have something like let's like counter X to you right or double counter like that which is going to be derived from this original piece of State here uh so you'd be doing something like that right so let's see if that works we'll do H1 and we'll do double counter double save that's it save and I believe if we increase as you can see that's now gonna work so what you need to do is add this dollar sign which might look a bit strange but I mean it's still valid JavaScript um in front of of doubled here like that okay so let's just convert that and say dollar sign and we'll do doubled equals to so we'll just do counter times two for example and hit save all right let's replace that with doubled like that let's have a look and yeah look at that so that's cool so this is going to react basically to any changes when counter gets updated so counter turns into 11 this is going to rerun and it's gonna update accordingly all right cool that's nice I like that um okay looks like that's that's about it here let's go let's keep going we're not limited to declaring reactive values we can also run arbitrary statements reactively for example we can log the value of count whenever it changes oh that's cool see that's really cool so it's kind of like a see it looks like you can just do an if if statement as well so you can do count is bigger than 10 then you can alert something oh it's like a cool cool version of use effect okay let's try it let's try it so we'll go here so it means that we can not only just do it like that right we could also do like yeah I can run like a function here right that should be valid as well I can do console log do I need brackets or anything let's see oh yeah okay it looks like I need brackets my bad console log counter let's see if that works pop this sucker open lovely yeah it does work uh let's try an if statement as well so we can do if let's say counter is bigger than 10. and then we can just do an alert big boy like that let's see that is cool that is really cool you have to admit they're doing right stuff over there and ends welt oh that's lovely that's lovely okay let's keep on going okay let's have a look at reactivity when it comes to erase an object so it basically says that so it's well the reactivity is triggered by assignments so if you did something like a radar push uh that's not gonna work so let's just start this from scratch here just make a script I'll do like a to-do's right uh okay and then we'll do okay cool that's it all right so we have a list of to-do's all right so if we do something like let's create a function here function add to do right this is going to take in the parameter here let's do a to do and there we go and then to these uh push and then here we can push in the new to do like that all right so this is uh kind of what they say here so if I go down here we'll do a what's it called oh let's try out the reactivity as well so we can do dollar sign right and I'll just do a console log of console log off to Do's like that does that work that should be fine cool okay H1 will say we don't need a H1 actually let's just do a button and I'll do add a new to do cool and don't have an input yet let's just push in a random value here like that cool okay on click like that set that equal to and we'll add the reference add to do okay cool let's see let's head over here so array We have tree fantastic if we click again click click click click click no new to this get added alright so this is not gonna work unless you do something like this where you say numbers equals to numbers or in this case we'll do to Do's equals to to-do's right oh it's uh yeah I have a cons here so that's why it's stopping me you can turn that into let and do that and then let's see Boop four five okay so that would work uh alternatively what you can do is just do a soprano operator right if this is probably more common if you've done react before so we could just take the to do's and set that equal to and we'll spread everything that is in the to-do's and then we can just pop in a new value like that right and then you can pretty much apply your supplies your push all of those uh just using this right so let's have a look now cool so it works the same way and that's fantastic okay so let's have a look at the clearing prop so basically and in my app here right I want to pass down something to the pointer here right we have this pointer tracker cool oops I think pointer pointer like that safe nice okay let's get rid of it let's say I want to track the mouse position of that pointer so I could go here and say x equals to let's see the default is going to be zero and then we'll pass down y as well of zero like that cool so what you do is you head over to the pointer and we'll add the script tag here and it looks like you need to add this export let uh that's a bit strange but let's give it a go export let and then yeah we'll just call X and Y X and Export let y like that so that should make it available in this component right here okay let's give it a go cool cool [Music] so yeah we'll do a P tag here and we'll do the mouse position is at and then we'll do X x y why oops like that cool save see does that work yeah at zero zero cool so that works nice okay so that's how you do props you can also do default values if you just pass and yeah you can just pass in some data and that's going to be the default value in case no values get passed down so I can see export let wa X this by default is going to be set at zero and that's going to be set at zero so in case I have another point there here and I don't Define any of these variables of these props then look we still get the same so that's cool okay so we can just get rid of that and we'll keep that like that cool and I guess since we are I guess we don't need to pass anything down here then we can just get rid of the export I guess that is quite nice I do like that because you can quickly glance I guess like if I look at this I can be like oh okay so these are props that are probably being passed in from pointer but if I don't have these then I know these are local used only in this pointer file is that correct hopefully I'm liking it though that's pretty cool okay uh okay it looks like we can spread props if you're familiar with react uh just JavaScript not even react why do I keep saying oh if you're familiar with react just just learn JavaScript uh yeah we can spread the rest of the props cool if statements all right so this is where people are gonna be like oh funny okay that that's so funny that you say that sveltec that looks funny what have you been doing the react for the past couple of years weird shite that's what I'm telling you look all these Frameworks have their own weird things associated to them okay so you can't say we're not writing the little JavaScript here okay we're making a function that exports jsx that that is quite quite something so we need some sort of weird syntax in all these Frameworks unfortunately uh but yeah svelt's approach is using this syntax here so we can do a let's have a look here okay so you do hashtag if and then you do your account bigger than 10 or whatever and then you close up that if statement like that okay why not let's give it a go I don't have my counter anymore but let's just solve it and try it here click click click like like like like like like like like like there we go all right so that works that's fantastic I do want to try it okay so I want to hashtag if like that and do we have a we don't have any data let's make one call let counter equals to let's do the default to zero so I can say if counter is bigger than five let's just do like if like if you have a user right and let's say it's null right now so it doesn't exist so if if user right okay and then you close it up down here like that F cool so if the user is null then you can do something like oh please sign in and hit save let's see well where is it oh sorry I need to do the opposite if there's no user right because it's null yeah okay so then you have the please sign in nice let's see else block okay so for the else block you add the colon here like that is that colon colon so you do come on else like that yeah and that's it and then you can just do uh welcome developed by it or something fire Emoji save cool so please sign in but we could also add like a sign in button right sign in and this could have like an on click on it on click when you click it all it's gonna do is it's gonna take the user and it's gonna set it to the opposite of it like that sign in Boop signed in and then you can do the same I guess for the button as well anyway nice let's keep going so you can do else if as well all right nice here we go so again I don't think this takes long to learn to be honest it's just a couple of syntaxes that you need to pick up once you have like even if statement right well it kind of is the same so you do each with a hashtag Mark at the end as color and then you close up the loop uh oh that's cool that's pretty nice I kind of want to do this myself to be honest okay we'll just skip Trio because there's nothing too crazy or special here to know okay let's see what else by default when you modify the value of each block it will add or uh and remove items at the end of the block and update any values that have changed this might not be what you want it's easier to show uh why then to explain click the remove first thing but a few times and notice what happens it removes the first thing component but the last Dom node then it updates the name okay so it's it's one of those key issues right um we we need to pass an ID Associated to all the different elements in our array and that's going to further optimize like how this velt is going to render these out rather than just re-rendering out the whole um array for you right I'm guessing that's that's what it is so yeah let's I mean let's give it a little script all right we can have const uh yeah users send that equal to Bob Joe picking these mistakes um Terry that's my car's name my wife's car's name letter as well Maxine and then we'll add develop I add just by just add Okay cool so we have our users so if we want to Loop over this we can do a each and then we'll do users as user yeah and then here you could pass in the like user.id right which I mean we don't have but I'm forced to make it that look what you made me do I have to delete this name and okay and then an ID um let's do crypto the get a random uuid cool okay so let's have the comma here we'll just dupe this twice beep up oops well that's not about what I wanted to do I wanted to copy I wanted to play Space paste okay wahoo Coco that's that's what I'm gonna name my child Kaku okay cool is that um Last of Us okay save cool okay so We're looping over this sucker and then we need to close this up I assume it's like that each yeah okay cool and then here yeah you could just render out like a component I'll just do a diff here I won't make a new one for now so user.id that should be fine now and then here we can just do H1 and say yeah user dot name like that oh typescript nice lovely save let's see add Last of Us nice okay next up we have a wait so how do you actually fetch stuff so yeah it looks like you do the same kind of blocks again you do a weight hashtag wait and then you have your promise and then you can display a message while that promise is expected to be resolved so you can do waiting or whatever and then then once you get the actual result you can display it here and then if you can also catch an error like that and then you can display that I do like that syntax looks quite nice I do like that okay so let's see what we have here so it looks like we are importing that asynchronous function and it looks like it's just doing a fetch fetch somewhere right a weight Fetch and then if res is is okay then return the value and if it's not okay then throw an error cool and then here so we're importing it we're adding it to This Promise here and basically when we're clicking on this button it's going to try to fetch it for us right okay so let's let's refactor the code then so it's quite easy we'll just do so wait right and then we'll await that promise that needs to be solved promise like that and then here we'll do a p of data is coming in like that and then down here we'll get the value with DOT then and then we'll do resolve right results nice and then here let me close the door really quickly there we go we'll do a P tag again and then we'll do the number not the number the date the data is result like that okay and then let's close this up a weight like that data is coming in and look at that 59 that's also and the error catching here so we can do catch any errors and if we do we'll render out a P tag down here and you can again add your styling and whatever to it I'm just gonna do that really quickly there we go poof requests failed yeah that's nice I love that that's really cool okay cool anything to worry about the only the most recent promise is considered meaning you don't need to worry about race conditions wow awesome if you know that your promise can reject you can emit the catch okay you can also in the first block if you don't want to show anything until the promise resolves so if you don't want to see this like data coming in just just get rid of it and then click and then it's just either gonna fail or it's gonna display the the correct result for you okay anyway um oh here we go the pointer events okay so we did on click on point remove yeah let's do this why not do we have it yeah look we have our pointer here so we have a let X let y let's just do like one here let's Point uh Mouse position we'll do X zero y zero and then we'll have to refactor the sabiba here so it's gonna be Mouse position Mouse position the X and then Mouse position the Y okay I'll just add like a div here like that and I'll just copy that paste that and I'll just add a Wii style to it just to make it full screen so we can do position fixed oops I need to select something let's select that div we'll do position fixed oh my God I'm so slow at writing she has this is taking forever man height let's just make this full screen width of a hundred percent and then I'll just do a left of zero top of zero doesn't matter too much just so I can have this full screen up cool okay so we have this and then let's just go on here and say on um pointer move cool so on pointer move what do we want to do well we want to update the X and Y value here right okay where did that go then let's see why this code's not working I know I added that as a like a z index thing Z index put a 10 there where you at where you had and oh am I not rendering this out no I'm not import ant don't scrape at import pointer there we go all right let's pop this down here we'll do it at the top here there we go pointer like that nice okay so yeah let's go here on pointer move then I wonder if I can just have the nice thing about uh and react I can just have the type automatically from this I wonder oh there we go okay we do have everything that we need nice um okay so Mouse position right we'll set that equal to and we'll just pretty much there's no point of spreading anything here because we if we're updating both the values right so yeah Mouse position equals to X and we'll do e dot was a client this is the client X client X and then we can do y is Eda client y nice let's hit save okay let's have a look does that work yay look at that super cool okay so this is nice because it's like fully its own component and doesn't rely on anything and we can just import it and boom we have a working we component that tracks the mouse movement okay nice okay we saw on click anyway and there's stuff like that so let's go oh okay see you can do inline as well which is what we did fantastic in some Frameworks you may see recommendations to avoid online event handlers for performance reasons particularly inside Loops that advice doesn't apply to sveld the compiler will always do the right thing um so yeah I mean it doesn't really matter because the compiler at the end of the day is going to optimize and it's just going to spit out for you like a full-on vanilla imperative JavaScript bundle for you um the cool thing is I do remember this you can also add um what are these called uh you can alter the behavior modifiers right of of these events so if you want to stop like prevent default or you know event bubbling or propagation or if you would just want to run it once right Boop you can add this here like that all right and there's a couple more nice let's see component events components can also dispatch events to do so they must create an event dispatcher okay so let's see what this is so we're importing this create event dispatcher and the inner component where is that okay here so we just Define the function that we dispatch and okay I think I know what it means essentially what it means is we have a function right in our app right here which is gonna just alert us something but we want to run it from inside enter from here so what we can do is basically call this dispatch here with a key it looks like so message for example right um and once this key gets recognized by zvelt it's just gonna trigger that function for us I think so let's see let's see so let's go here right at the top and we'll do Imports create event dispatcher from where does that come from svelte just felt okay cool so let's make a dispatch so we'll just set that equal to that right nothing needs to be passed down into it okay so we're calling this patch and we're passing down this key of message and then kind of the data Associated to it right okay I see what that means now so basically let me just recap this quickly so we have a function right that we want to run uh somewhere else so in this case in the inner component right so we Define our function that's perfectly fine that's totally cool and then in our enter we can import this dispatch and dispatch um yeah dispatch something with a key and then with a value and then when we're clicking on the button we're calling this dispatcher right so I'm going to click say hello it's gonna dispatch message now in our app we can just call on message or on let's do alert right so you can do alerts and then here you say on alert so whenever our inner component dispatches and alerts uh with an alert key make sure you run this handle message for us so there we go all right that's cool okay cool okay let's keep going we have more events uh there we go text inputs this is quite quite important to know so okay so we have Val so we have a variable here right let's name World cool and then we are hard coding the value here right so the value should be world uh cool so if you try to change this as you can see you can however we're not getting any update here down below so basically what we need to do is um is just buying this so we'll add this bind prefix like that and then when we type look at that it's all nicely hooked up so it's just as simple as just adding a bind here so you don't have to do like in you know react you'd have to that's equal to and you can capture the event here like that and then you have a set set input right over to um whatever was in the previous one actually we can just set it to eat like eat Target value right cool so you do something like that right whereas here you just bind it directly to the value like that which is nice because it's Simple and Clean okay and looks like yeah I mean you can do this with everything here right with sliders range okay let's see what it says so in the Dom everything is a string uh that's unhelpful when you're dealing with numeric inputs like numbers and ranges as it means you have to remember to course input the value before using it but with bind as well takes care of it so you don't need to worry uh yeah what kind of data you're dealing with here if it's a string or if it's a number because belt is just going to magically do it for you so yeah we could just literally bind everything to the value like that I think so let's see bind bind bind bind does that work yeah look at that that is super cool all right let's keep going um okay so check boxes as well again you can do bind uh oh instead of binding to input the value you can just bind to input.checked okay let's have a look at that where's our input here we go so checked yeah so you could just bind that so let yes is by default it's going to be false but since it's binded to the checked it's gonna look at that go from false to true to false to True nice okay let's skip we're not going to spend on these damn inputs uh because it should be pretty much the same here we go life cycle methods okay so let's see how they do it compared to you know the use effects that we all know and love we love it don't we okay um let's see let's see okay so we have the on Mount um okay so this looks like it only runs once when the component mounts cool Oh weird it's just doing a normal query selector here that's strange and a later exercise we'll learn how to get an element reference without using yeah I assume so that we're gonna do some kind of ref passing a ref to an element and doing it that way but yeah this looks like it's just like an all Mount and yeah your code is okay let's let's try it why not so basically I can go here and import uh on unmount oops oops I need to do it in the script tag that's weird and for it on Mount from where is this coming from just felt on its own let's see it's belt on its own okay on Mount I assume this is gonna run like a callback function like that let's have a look again yeah a callback function and that's it so if I want to do a oops console log users and hit save all right so initially when the component amounts it's gonna run that for us what did I do no I messed something up here with the Imports cancel save save oh gosh should be fine though there we go cool so there we go so when the component initially mounts we get that okay so yeah we added this unmount here so this will only run once right when the component initially renders out so if we make any changes to this let's give that a go um yeah okay so let's do a let's go down here and see let's new user we'll just set an empty pair of strings like that we'll call a function as well and say function add user right set the equal to and we'll say if uh well the users we'll grab that array right so we'll spread everything there users and then we can have our new one name of a new username right like that but they're that new user there we go new user and then we can add an ID I'll just call crypto here dot random uuid okay cool nice uh so we add that and then we can just reset it right so use new user is equal to nothing again cool okay nice so we can just do this on an input somewhere so let's do it here input type text that's fine it's gonna be this value here of new user and then we can just bind it to it like that is that correct hope so and then we'll add a button as well let's add a button and then we'll say add a new user this is going to have an on click cool and then we'll just add the user okay so quite simple really simple okay so let's see if that works as you can see that doesn't run again now see it just won't run only when our component initially gets rendered now of course this is gonna jump back to four because when we refresh we lose we lose that state that we just did here because it's not persisting anywhere but yeah it works so that's cool okay so next up we have the tech what's the tech you don't want to have a tech maybe in spell but in real life the tech function is unlike any other life cycle functions you can that you can call it anytime basically not just when the component first initializes it returns a promise that resolves as soon as any pending State changes have been applied to the Dom Okay so basically yeah you can run this yeah anytime so in this case right I can grab select and if I hit tab boom it's going to uppercase all of that and when you update component State as well it doesn't update the Dom immediately okay so it does like a scheduling as well where it um what's it called uh where it batches right all the changes that need to happen so I assume like it waits for like if there's a state change and another component that needs to be done that does that and everything and that there's like and when we actually run this thick right I assume it schedules another change uh it probably waits for the other important ones to finish and then once that's done this is gonna run I hope I'm right on that I'm not completely sure but yeah okay so it looks like you can run basically a side effect um yeah whenever so that's cool okay writable stores let's see not all application States belong inside your application hierarchy so basically right you might have a component that has a state and that's perfectly fine or you might have an app that has smaller components that you can pass to State down to Via props which is fine but sometimes you have a structure that is um quite nested so you'd have to pass down props quite a bit from component to component to component until you get to the component that actually meets the data so as a store or the state manager allows you to essentially um kind of extract that and just have your your State separate and then you can inject that state into the components that actually need it does that make any sense hope so not all your application blah blah okay sounds well we do this with stores this store is simple simply an object with a subscribe method that allows interest to parties to be notified when the store value changes okay so let's have a look so in our app here we have a count which is coming from the store.js okay so the way you do it is you create a writeable like that so import writeable from svelt store and in here you export that and you just add the value here so if you want the default to be zero to zero if you do five that's going to be the default and then we're importing it here which is fine um and then let's see what's happening okay so we can call this subscribe uh that allows our component to basically be notified when the value changes and it looks like what what we're doing here is we're just assigning this count value to the value from um from the store so here we are just displaying it and now let's see in decrement an increment okay so in the increment and decrements here we're just modifying it right so let's see how we can do that so we can run this update that looks like so I can run count Dot update okay so I'm guessing this n here is going to be like the previous value that we had so we can call M plus 1 which should increment it yes correct uh let me constantly log out the value here console log value assume this is the value that's coming from the actual store right as a so I have a Wii console here can I not see any updates here well that's a bit annoying well let's do a dollar sign right dollar sign console log count Valley okay cool come on man why is the terminal not giving it to me anyway let me have a look here oh geez okay anyway uh yeah correct me if I'm wrong on this one but I assume we're just getting the value right we're subscribing uh to this value which is going to keep track of any changes uh so when it changes we're just updating this piece of state right okay hopefully anyway plus plus that works so we can do the same with the decrement as well so we can do calendar updates again and we'll get access to n and minus one right does that work did you cool cool and then for reset we can we can do set as well and that just like hearts that's it zero cool reset boom Oh I'm loving this this is good stuff okay Auto subscriptions in the previous example uh works but there's a subtle bug the store is subscribed to but never unsubscribed ah okay yeah if the component was instantiated and destroyed many times so you can imagine like we're navigating over to another page and then going back to this component leaving going back to this component we're essentially uh yeah we're never destroying that subscription uh which can lead to yeah not good things to be honest uh you know how I can use effect you can like set a timer or like a set of time out and then if I go to another component that set timeout is still running in the background uh which sucks because you don't even need that component doesn't even exist so you're gonna have memory leaks uh so in the use effect at the end you can run a um a return function and then in there you can unsubscribe from it but here we can just do you just like add unsubscribe oh okay cool okay con okay so you you add it to a variable like that right so rather than the account subscribe like that we'll set it equal to why won't you let me copy paste that's not illegal it is not illegal you son of a gun come on come on let me copy paste there we go okay cool okay so you assign it to like an unsubscribe right so this should still be fine but what we can do here is we can import this on Destroy from svelte I assume it yeah okay like that let's copy paste that and cool there we go and then on Destroy so when this component gets destroyed we can get rid of this store subscription that we have there lovely nice okay oh what is this it starts to get a bit boilerplated though you haven't seen react my friend um especially if you your component subscribes to multiple stores fine okay fair enough if if you have multiple stores this can be a bit funny and it's gonna look a bit yeah I I see what he means uh so okay so you can just prefix this dollar sign and then it is it's just gonna hide that magic for you oh okay cool oh why did we do this for the beginning okay so you don't even need any of these then you can just do dollar sign count the basically the uh the thing that's coming in from the store right so then you don't need to do any of these subscriptions and unsubscriptions anymore so if we head over so we Define our writable and then here we just import it and literally just say count and that's it damn that's cool okay uh Auto subscription only works with store value valuables that are declared or imported at the top level scope of the component here okay cool you're not limited to using counts inside the markup either you can use it anywhere in the script as well nice okay I love that um not all stores are writable by Whoever has a reference to them for example you might have a store representing the mouse position or geolocation or time yeah so you wouldn't want this to be uh mutable right oh okay so that's cool you can just add this readable here on top uh import readable from svelt's store nice okay so you have writeable and a readable as well cool that makes sense that's clear that's concise uh okay what else do we have here derived you can create a store whose values based on the value on one or more other stores so kind of like what we've seen at the beginning with the what example did we use uh let's let me do this keep forgetting the script tag still so you have like let's count right and that's zero and then we saw that we could do like that double count um sorry like that right doubled counts times two okay so we saw something like this so you could basically do the same thing with uh with stores as well so you can use this derived here so time right you pass time and then you do dollar side time and then you can do your changes right here so let's solve this and see how it looks like import so let's look at our store so we have a readable and derived and we Define a const time here which is we set it as a readable and it takes in two parameters here which is going to be a new date um which is going to be basically whenever this component rendered all right so the date then and a start as well oh okay so we just we're essentially tracking how how long it passed since the page has been opened and that's a great example actually that you you can do with this derived so what are we doing here we're returning a function stop that's just going to clear out the interval we have a starting position which does a new date and then here we're exporting and elapsed which is gonna again take and derived time and then here we're just dividing it by sorry we're building time minus start to get the uh the duration of the page that has been open okay cool oh what did I click on okay we can do custom stores as well this kind of reminds me of he has a standalone a little bit kind of has that same kind of look to it I guess yeah Joe Tai as well right um okay yeah nice I love this this looks fantastic I think that's kind of the core of it let's see if we missed anything important oh look at that that's that's pretty much it and we finished the whole basic section here let me know yeah we can do the advanced and this weld kit for a next video if you want me to I'd happily do it this is fun um yeah let me know what you think let me know what you think of spelled do you like it do you not drop a subscribe and again if this video gets like a thousand thumbs UPS likes then we'll do more okay awesome subscribe check out my courses as well and get out of here

Channel: developedbyed

Views: 38,840

Keywords: web development, speedrun, svelte, sveltekit, learn svelte in 60 minutes, svelte crash course, svelte docs, react, dev ed, developedbyed

Id: 0FCbd1XVYWo

Length: 58min 17sec (3497 seconds)

Published: Wed May 10 2023