Recursive Svelte Components - Weekly Svelte

hey what's up this is scott with level up tutorials and in this weekly svelte video we're going to be diving into a really neat feature and svelte that you may or may not have seen before now i've been recently hammering out some some mono repost stuff over here so some of the packages that i've been working on have not been moving forward as much as i'd like because i've been doing so much organization you can even see i have comments and underlines and squigglies and trust me we'll we'll take a look at some code that's not as rough and rugged as this is but what we're going to be doing in this video is talking about a really neat feature in svelt which allows you to do recursive components like what does that mean so let's take a look at a good example here and this example comes straight from the svelt tutorial which let me tell you is one of the best things about svelt not the language obviously but the documentation nobody figured out documentation likes felt did because there's a built-in tutorial with a rebel that allows you to hammer out some concepts in the rebel while they walk you through it and it's incredible this thing is the best so what's what's the idea here the idea here is that you can recursively call a component now people do this in react because react components are functions and you can call the function just like you would a recursive function in normal javascript right and you might be thinking well how do i do that in svelt if they're not functions well there's this really neat component called the svelt colon self or the self component that allows you to recursively call the same component now this comes in handy let's say if you have a data structure like this you have an array and then maybe you have some nested information in here and you might maybe you're not sure how many levels deep this goes you know how deep does this go right you can see it's a varying degrees so this kind of structure you might be thinking well how do i how do i do that if i can't account for how deeply nested the structure of data is that's a perfect use case for a recursive rendering of a function right recursive functions in javascript typically it's a function that calls itself as in uh i have this thing and i'm going to call myself and i'm going to do this thing and the reason why this works for deeply nested data where you're not sure how many levels there are or how many levels of quote can be or maybe you just want to keep the code really nice and neat and not have like four nested uh each statements if you don't have to well this is just super cool because we can render a component from inside of itself very easily using svelt colon itself okay so let's go ahead and first what we're going to do is we're going to run down this example here and we're going to uh do the tutorial here just very briefly and then i'm going to show you how i'm using this in the level of tutorials felt toy component that i'm making and then i'll talk just very briefly about svelta toy and what it hopes to accomplish okay so here we have a folder or an app and the app imports a folder and if you scroll down we have this nested data structure which is a file system and then we say hey call this folder okay and in this folder is going to live a file now the folder component itself is nothing crazy here we just simply have a span you can expand or you know changes the icon there and then when you expand it it toggles the state and when that toggles the state that toggles the files below it okay now a folder may contain another folder but we don't know that in the nested data structure if you look we have here's the root all right and then we have a name for the folder and then the files okay and this is just a file right but what happens if we in this example have a folder with some files and a name well well this has a name right but it it's not a it's not a file how do we how do we know this is a folder and not a file specifically besides the fact that there's no extension on it but that's that's not something that you'd want to rely on right the reason being is that there's another property in this object that has files with an array so we can say if files contains or we can loop over files and say if the individual file here contains another object named files then we should actually render the file component itself again or the folder component i should say not the file component so if the folder contains another folder indicated by the fact that there is a files array then we should render the same component that will then check to see hey do i have a file or do i have another folder and this can go deep so let's go ahead and head to the folder component here where we're saying okay if this is expanded so we can see here that we'll have a to do dot md and we'll tweak this and say each file as file okay so we're iterating over the files and then if file.files exist so if there is a nested folder inside of this folder then we should show the folder to do that all we need to do is reference the same component that we're in right now and again i'll show you this in another context that way we can hammer it in a little bit we'll say svelte colon self um not selfie emoji just self and then we will say brackets like this and we can spread all of the files into here we can do that via dot dot dot file okay and then we can do it like this now you can see instantly and this is the brilliance of having a spell repo rebel like this is that we can have this instantly work right before our eyes and you can see a nested folder structure automatically works and this is great because folder.felt it's not unlocking a new component here all it's saying is this home component right is the same component as important work stuff it's the same component as this one as the same component as dogs but these can be contained within itself it's really super neat now with anything with anything recursive you got to kind of be prepared for the potential of an infinite loop in some regard but here we're doing that by checking to see if file.files then we render the self okay if there is not a file that files inside of here we're not going to render the self because if you render the self here it could just recursively render itself forever and ever and ever so let's uh not worry about that because this is now working and you can see if we even modify the data so inside of here if we wanted to just copy and have some nested more data in here this is just going to work instantly you can see now inside of important work stuff is now another folder and this new folder is called quarterly results and inside of that is a quarterly results file and again quick and dirty just copy and paste in here this will work as much as you want it to as long as the data structure follows that pattern that we talked about throughout this video look at that it's awesome um and again you could do this in react you could do this in view this is not like anything revolutionary or anything like that but it's a feature you might not have known about and it's a feature you might not have used before and it's incredibly easy just to call yourself to say svelte colon self pass in the props just like we would anything else now how are we using this in a different context so this is felt toy my name is not john this is just some demo data and sveltoy is a little tool that i'm building here that pops up in a window and again this is it's undergoing a lot of changes right now so this is not the this is not the ui but let me tell you what this thing is is it's a way to modify your entire state it's a development tool to modify the entire state in your entire application um in one single one single place right you can toggle whatever and so like if i were to say hey my name is scott like this you can see it updates in the site recursive or reactively without a whole lot of work right i want to click toggle is active you can see i'm active pop in there so this is really neat and you can see here what we're doing is starting to get into recursively calling this component for nested data because this is a problem that you would have if you have a state tree and you're not quite sure how deep that state tree goes or what it includes now we have a lot of work to do here to make this thing really full-featured to accommodate for any different type of data types as you can see it's currently out outputting an array um as an object here which is why you see this zero here but let's go ahead and i'll show you how i'm using this in context here and you can ignore some of these red squiggly lines in this commented out stuff i'm still deciding on what the ui should look like for this thing again this is in very much flux but what we're doing here is we have a row component that row component is for our data so this is the up-to-date row here my apologies here i have i'm working with some duplicate stuff here again like i said i'm really shuffling this mono repo around right now very much in flux but you can see here one thing that we're doing here is this is the row component the first thing we're doing is we're checking to make sure the value isn't null because sometimes this data is coming in as null um that's something that we just have to worry about next we're checking to see if the type of the value is an object and now right now we're just saying hey if it's an object yeah i realize the pitfalls of checking to see if this thing is just an object but this is where we take into account the recursiveness because if this thing is an object you know an array is an object if it's an object that means that there's some nested data inside of here and it's not just its own primitive you can see we're doing further checks like if it's a type of string down here just show the input and if it's a type of boolean to show a checkbox right that way we can have if at your if at any level it's a if if at any level it's a string we're going to get this input box or if at any level it's a boolean we're going to get a checkbox but if it's an object what we're going to do is we're going to iterate over it now we will be checking to see if this is an array but right now we're just assuming these are objects again rough and rugged what we're doing here is we're going to iterate over each of the values we're going to grab the nested key and the nested value and we're going to pass it into itself using svelt.self passing in the key as the nested key and the value as the nested value and then we're wrapping that whole thing in a div now you can tell this is being wrapped in a div nested div because we have a slight margin left on here now if we want to make this more obvious we can give this a margin left to something like 15 pixels and we can give it a background of something fun here if you don't know about these i don't typically use these by the way but this is easier to type we can do black and then do something like cc to give it some transparency i don't often use hex values with transparency but you can do it now in some browsers you can see it looks a little bit like that in fact i don't know if cc was a good choice um let's say what is like something like nine nine does that give us something more transparent there we go there we go see this is why i don't do this often um but as you can see here now you can see exactly where the nested data comes into play because each time it calls itself it is going to do a recursive self component so test is at the root level it sees itself and then it sees another one and if we want to see this thing in further action we can look at the data that we're even passing into this toy input and again this whole thing is um there's going to be a lot of re renaming at one point i was calling it statement which is a terrible name um i i'm very aware of that and uh wait where is the state being defined here for our demo where is the state being defined oh it is in the routes folder routes if you don't know about this you can actually develop packages in spell kit and have it bundle it for you which is really neat so you can see we have a test array which has an object inside of it has another property hi um hello like this okay here's some more and if we wanted to we could have a world oh wow look at that code whatever this thing is and let's have a object inside of here what is up okay there we go so i just added some more nested recursive data and you're going to be able to see increasingly levels of less transparent black but we're getting more and more hi hello hello world is an object it's recursive once more it calls itself once more and his pin has now indented that further level okay so again this tool this looks this looks very different than the version and that it's on the npm right now and it's going to continue to look different i'm going to update this pretty heavily because i'm actually using this thing in our development process a lot right now so i have a lot of needs for this um but i do want to give proper credit where credit's due this the name of this and the look and feel of this was inspired by meteor tools which is a tool that i really loved and i'm going to be doing quite a bit to make this a little bit more like this but i'm not going to be doing everything that meteor toy did it's going to be a little bit different it's going to meet the needs of my svelte components in my my design system and everything a little bit better um but this this thing was really neat and i liked having it in meteor so i'm building it in uh svelte so this is available at level up tuts svelten toy do not use it yet you can see there's some stars and stuff on it people i mean pikachu says it's under construction so um he's he's very accurate but at the end of the day you're just passing in writables as an array inside of the toy and that thing is going to just output this lovely little interface that will continue to be improved upon and i'll do another video once this thing is a little bit more usable and say hey everybody go use it but i just wanted to give you an update on something that i'm working on and uh at the same time show off a feature in svelte that you might not be using recursive components or a component that calls itself so as always this is scott with level up tutorials if you would like to learn all about svelt spelt kits and more head on over to leveluptutorials.com you can sign up to become a pro you get a new tutorial course every single month including our course on svelkit animating spelt components buildings felt components and a whole lot of other cool stuff including a new uh like i said a new course every single month we just had a great course from ryan lineska on prisma uh and i'm super excited to have um ryan do a course for us we have all these great guest uh content creators colby fayok did a course on next js brian douglas did a course on github and we have a lot of really exciting new courses to announce coming soon so sign up for the year and you will save 25 and you will get a new tutorial course every single month again we teach all kinds of stuff so if spell's not your thing uh just check it out we can we can teach any of these things and if svelte is your thing or you want it to be your thing this is the perfect place to pick up some new skills so as always this is scott with level up tutorials thank you so much for watching and i will see you in the next one

Channel: LevelUpTuts

Views: 2,957

Keywords: tutorials, cms, html, css, html5, css3, education, free, lessons, tuts, tutorial, learn, software, web development, web developer, developer, web, website

Id: PJth7lchnJk

Length: 16min 11sec (971 seconds)

Published: Fri Oct 08 2021