Can You Solve The Switch Problem In Svelte?

hey friends today I have a brain teaser for you and if you're really not interested in puzzle you're going to learn a lot regardless so here I have this switch component so as you know in a framework like soil you have all your logic Styles and HTML in one file so they shouldn't share state right when I'm going to toggle this one is going to turn on we're going to toggle this one is going to turn on and we can see there is nothing special here it just toggles this active Boolean but here's my challenge to you let's say that this is a video player or audio player and you only want one active at a time so for example if I toggle this one on all of the others should turn off and same is true if I toggle this on then all of the others should have a shared state right so how do you do this and one condition I have is you really can't change this file right here so you can't put a loop inside of here and track the active ID you can only change this one here so I'm curious if you can figure it out if you want to pause the video otherwise I'm going to share the solution with you alright so we can solve this problem by using the context module from soil and this isn't to be confused with the context API for sale this is different this is the script context module But first you need to understand how components work in sales right basically a component installed at the end of the day is a class so let's see what is that behavior I'm just going to create a new file I'm going to name it component TS you don't have to do this so for example let's pretend that this is a cell component so export class component and then we're going to give it a Constructor and we can say console log hello so every instance that you make of your component is going to log this Hello message right so if you go here you can say const component one new component I'll adjust copied over a couple of times basically this is as well component right and now if you were to log in you would get hello four times right but what is actually a module a module is this file right so basically this is all that context module is installed it's going to be console log if we type it here we can just say hi and now I'm going to open the terminal I'm going to create a new one so I'm in this folder I'm just going to use Dino to run this so I'm going to say Dino Run component DS and now we should see hello I'll put it four times right but High just once and awesome network is expected so let's see how this works in swelt right and now I'm going to close the terminal let me just close this file because I don't need it anymore so how can we use this in swell well we can go to the top where you can start typing script context module and we can even add language typescript which is optional you don't have to do this all right but how is this helpful right well basically what I want to do I want to track the ID of the component and then based on what the active component is I'm going to toggle this switch on or off so it's really simple you might be thinking we're going to declare an active ID and ID variable but you're going to see in a second why that doesn't work and felt is even going to give us a warning so let's do this we can say let active ID we can set it to zero and then we're going to have an ID that we can increment right and now we can even remove this code I just remove this and now I can say const component ID so each time we instantiate this component we can increment the ID right and then we can use our reactive variable we can say active instead of using the constant right so we can say hey if active ID equals the component ID and this is all great and you're going to see we already have a warning and then we can also make a simple function set active and now inside of here we can say hey active ID should be equal to the component ID and this is what you're going to replace the toggle with set active alright so let's save this and this is the naive solution right so I'd be thinking okay nothing is working what is going on and why is that let's just hover over it active ID is declared in a module script and will not be reactive ah so this isn't reactive but how do we make it reactive well you can use a swell store of course so let's use a cell store I'm going to go to the top I'm going to say import writable from soil store and now instead of using 0 here we can say writable and you can initialize this with zero but you don't have to I'm just going to do it like this and you can even use cons here if you want it's really not important and now you need to use the store so you're not confused this is really a reactive declaration so this isn't a store this is what people get confused frequently and I don't blame them because this can be confused it's just a reactive declaration this is a computed value it says okay anything on the right that changes update this value right but to use a store is just a dollar sign and this is basically syntactic sugar so it subscribes and unsubscribes to the store for you which is really convenient so we can say active ID as a store right and then we also need to update it here because we're using a store and now let me save this file and this should work so let's toggle this one ah you can see now it has a shared state and how awesome is that all right but I also want to show you how this is useful in other ways but before I do that I want to show you once again how context module works so again here we have this component we instantiate it four times right so it's going to Output this component with a title of component four times right and we're going to see because we're using context module which is basically shared State we can see it outputs high but let's see how the compiled cell core looks like which results JavaScript at the end of the day and this really isn't anything intimidating here are a couple things we aren't concerned about as you can see as I showed you here is the class that gets generated at the end of the day and you can find here in the module our message that says hi so basically this entire file this component X output is a module but let's see how this is useful right so if you want to learn more about module contacts go to the swell tutorial I'm going to link it in the description and you can see how this is used here so I can start playing this right at the same time but now for example if you want to stop Paul audio it's not going to work so you can go here we can say show me so as you can see here is the context module so it pushes all of these audio elements into this set you can use an array doesn't matter and then it exports a function stop all then it's going to Loop over all of the elements and it's going to pause them so again if I start the playback here and then I can stop all the audio so this is maybe more esoteric but it's really interesting and it's really something useful to have in your pocket as you can see now you can also use that export anywhere else alright friends don't forget to like And subscribe you can find my patreon in the description and join the Discord if you want thank you for watching and catch you in the next one peace [Music] thank you

Channel: Joy of Code

Views: 12,851

Keywords: svelte, sveltekit, module context

Id: 5aGcAmVlO0E

Length: 7min 13sec (433 seconds)

Published: Tue Apr 11 2023