Using JavaScript Libraries With Svelte Is Easy

hey friends today we're going to talk about how to use third-party JavaScript libraries in soil unlike some other JavaScript Frameworks in soil you don't need special wrappers around turn-party JavaScript libraries because you don't have to think about re-renders and effects meaning you can take advantage of the entire JavaScript ecosystem and swelt makes this really easy in this video I'm going to cover how to use third-party JavaScript libraries in socket and ways to solve problems going to encounter along the way that being said of course you can swertify any JavaScript library and publish it as a package which I'm going to cover in another video alright so before we get started don't forget to like And subscribe because it helps me out a lot and you can also become a patron alright friends so before I get started and get into an actual example I want to show you how to fix some common problems you might encounter in circuit well not might you're probably going to encounter the 100 so silkit is the recommended way to build swelled apps and you don't have to use swellkit of course the kit part is basically a server and it uses well for the templating so basically swelkit is just the glory fi server right but it's a lot more you can check out my complete free course on Cell kit that being said you're going to run into some weird issues when you have like a server where your code runs first on the server and the client and then you get errors like window is not defined and Etc which are going to show you so this assumes that you're using Circle but if you're not using sweld kit then these problems don't apply to you but regardless I think you're going to learn a lot alright so to get started I just have a regular silky project here let me go to my editor I'm going to open the sidebar and nothing special here in the source I just have a single page so if I go to routes I go into open page12 and then inside of a library I'm just going to have a fake Library here where export some function so that's basically it nothing special and then I'm going to import it inside of my project here so it's going to be great so let's invoke it grid is going to Auto Import this for us which is really awesome so you might notice something I haven't saved yet but let's look at what happens so I'm here inside of my editor press save and then it just works and you're like okay what are you talking about server and Etc everything looks great right well yeah because we're in the browser context still but look what happens when you refresh the page your code is going to run on the server and which is going to cause an error so if you open the console this might be a little confusing to you right fail to load resource like this is some useless junk like who can decipher what's going on here but the thing is that this is happening on the server so this error is going to be inside your terminal here because it's the server reference error let me just zoom in so it says reference there a window is not defined and why is that well we have this Library here which uses window alert and that's what libraries do they might use some browser API whatever and Etc and then you're screwed alright so what is the first thing you can do well we can use on Mount so we can wait for the Dom to be loaded for the component to mount and then we can invoke the function so we can say all Mount if you start typing it press enter if you have really great Auto Import so we can also pass it a callback here like this and now we can say greet let's enroll with the function I'm going to place this here and now if we go here you see the previous one so let me just refresh for good measure and you can see it says hi and we don't have any problems anymore alright so this works great but sometimes a library does some really weird things in their initialization because they don't expect their code to be running on the server right so you might have a library that has something like window alerts so you have their initialization phase now you have a setup and now when you save it the problem you're going to see when your refreshes the import itself is going to cause an error because it's trying to use this browser API that doesn't exist on the server that is alright so how can you solve this problem if you run into something like this well you can use Dynamic Imports so I'm going to just comment this out and to use Dynamic Imports is simply saying cons so you can say cons module equals actually let's just say import so you can also use the Sleep Alias and let's console log module I'm going to console log it out so now we can see it's a promise pending so now we can go here let's say await and we could also make this async so now let's go here and now you can see module and you can see our function is going to look different if it is the default exports you can just the structure that or whatever so back in our code to use this we can just structure this function for this case so we can say grid and now you can invoke it so now you can say grid let me just save this and now you can see it works High let me just refresh and everything works great and that's basically how you solve that problem but let's say for example that you're working on a single page application you don't really care about server side rendering we can disable server side rendering and not only that but maybe just one part of your app doesn't use server side rendering so you can disable it for a specific page or across your entire app so let's see how we can do that so I'm going to open my sidebar and inside of here you can just create a plus page of Ts for the current page whatever route you currently own or if you want you can just rename this to layout like this you can reduce the layout and if you specify anything inside of here it is going to apply to your entire app but in this case maybe I just want to disable server-side rendering just for this specific route so I'm going to rename it back to page the S so how do we do that well it's really simple so we just open page DS you can go inside of here and then you can say export const SSR false all right sweet so now when we go here let's go back to our editor so now we can just import this and let me just remove all of this code we don't really need this to be async anymore so now first we don't get any errors right so if I go here let me just refresh everything awesome setup and Etc and now use a grid here it even works without on Mount right but you have to be careful if you're going to do some querying and Etc if you still place this inside of on Mount but right now server side rendering is disabled so this works as expected and how beautiful is this friends alright friend so let's look at using third-party JavaScript libraries I'm going to use the framework agnostic JavaScript library motion one so we can go to the motion one page like this so let me show you the thought process so here we are on this page and then we can just go to the quick start I already installed it if you want to follow along you can install it using npm install motion or pnpm whatever else you're using so we can look at the docs nothing special here but let's see how do we use it right so let's see creating an animation so you can see if I zoom in you can see it uses document query selector all and okay let's do the naive approach right so you can go here to our project and then let me just close all of these tabs which you don't need anymore so I'm also going to remove this import and let's remove this just so we start fresh alright so first thing we just look at the Docks import animate from motion and that's basically it and if you're wondering I just have here a simple sentence or word that I'm going to split into letters and I just Loop over them so we can do a cool animation and here are the Styles so I just have some letters here which I'm spacing out it's really important when you do something like this that you set the letter to be display block or in this case inline block if you want so basically that's that setup if you're curious alright so besides animate motion really makes it easy to use stagger so I'm going to also import that since we're going to use that and again let's just go from the start so we wait for the Dom to load so we can say on Mount we should get really great Auto completion so now we're going to do the same thing pass it a callback because we really need this we need to wait for the Dom to load right so the elements are on the page okay so we look at the docs right as I mentioned previously so you can say document query select or all in this case we want to select multiple elements we want to select the letters so we can worry the Dom right nothing special we can say cons letters and we can say document query selector all and I named it letter so you can do it like this let's log them out so you can say letters save this and go to our site we should see here we have all the letters how beautiful is this friends alright so now we can just use the API as normal so I can go here I'm going to say animate and then I'm going to pass some things so first we can pass the letters what I'm going to repeat on separate lines is more readable so this is going to be the first argument and now here we're going to delete what it needs to do so we're going to transition the color to orange red and then on the Y we can specify a keyframe so you can say 0 30 and it's going to go to -60 then back to zero again and I also want rotate so we can say 360 degrees and also now you can also pass it options so I can say duration one second so for the delay we're going to use that stagger 0.1 and for the repeat we can set Infinity awesome so let's save this and let's look at this cool effect how cool is this friends they look like happy little letters alright so now we can go back here and now as you can see everything works we just looked at the documentation for motion one right and we implemented it with all the problem and that's how simple things are using as well but of course this works but querying the Dom yourself is not a great idea and I advise against doing it outside swelled actions maybe because it's your app grows it's hard to reuse and this might cause problems so basically when you're using a JavaScript framework like swell you rarely want to touch the Dome yourself in these instances but as you can see doing something like this isn't bad all right so what is the sweld way of doing this well the spell toy of doing this is using the bind directives instead of querying the Dom yourself you can use the bind element directive together reference to a Dom node so for example here for this particular letter if you want to query this you can say bind this and then you bind it to a variable letter but this is more than one letter right these are letters wow so we can use an array actually okay so let's just go here and then I'm going to remove letters like this and let me just also remove this comment since you don't need it then I'm going to go here and then I can say let letters and I can even give it a type HTML span element which is optional if you're not using typescript just ignore it so you can say hey this is an array we can also initialize it to an empty array so now here where we have letters we can pass it the index from the each Loop so I'm going to use I and then I'm going to pass it like this so we can say letters so I'm going to make this mistake all right so let me just console log it out as you can see here we already query them so I'm going to say console log letters this is not going to be immediately queried we can give it a reactive declaration like this okay so let's save it and now we should see it works the same as before and now we're querying the same element since we binded them and how beautiful is this friends and this is the salt way how to do things but there's even a better way so instead of using the bind directive we can use one of my favorite soil features which are swelled actions a swelt action is just a reusable piece of code used to attach some Behavior to an element of course you can turn this into a component by instead of turning it to a component we can turn it into a simple reusable swelled action so let's see how we can do that I'm just going to cut the enemy part and now we don't even need on Mount because we don't use a swilled action which only runs when the component is mounted so we don't need this and now to create a cell action which is just a regular function so you can say function anime text you can name it whatever you want we also pass the element here or node so I can say HTML let's say development so you can do it like this and I'm just going to cut animate here and let me just comment this out for a second so I want to log out element so you can see console log element just to see what's going on so how do we use this well basically instead of binding this we can just use this section on the container and now you can do whatever you want to get access to the node and this is just another simple way to get a reference to the node so we can say use so this is how it knows the salt action used animate text now you can save this let's go here so now let me just clear everything so things are easier to read some of you can see we get a reference to the element itself no weird wrappers no weird effects right we just get access to the pure Dom how beautiful is that friends and basically instead of console log let's just say console there so you can see what's going on or console derp as I love to call it so now we can see here we have let me just see I'm going to do a fine and you can see what we have here oh what is this children oh and you have also child notes but you're going to use children so now we can go here and let me just remove this console log now I'm going to remove the comment from here so now instead of letters we can say guess what element killer if you're using typescript is going to complain about this type being a HTML collection so if you want to satisfy typescript we can just turn it into an array so it's happy this okay let me just save this and our animation works the same as before how beautiful is this friends and that's how simple it is to use a swelled action but we can take this a step further and encapsulate the entire logic inside the animate text swelled action because it's just JavaScript right we have a reference to the note we can use JavaScript however you want you can query things inside you can do all sorts of crazy things alright so let me show you how simple that is actually so I'm just going to go here and first we want to get the text from the null so we get the reference to the element right now we can say const text equals element so I want to get the inner text and let's also trim the white space just in case and now we can split it again the same as before again this is just JavaScript how beautiful it is so now we can remove whatever value inside of the element we have so you can say element in our HTML or text whatever you want to just set it to blank so now we can Loop over each letter and do something so now we can say for each letter and we can say element inner HTML we're just going to add to it so I'm going to use backdicks here and I'm just going to create the same thing I have here with the spans so I'm going to say span I'm going to give it a class of letter we'll just do this and I'm going to close the span and right inside of here is going to interpolate the letter so we get that and basically that's it we don't have to change anything look how simple this is friend we just encapsulated the entire logic here so how do we use this I can just even delete this entire thing with confidence and how we can use a H1 for example which is going to be swelled so now we don't even have to Loop over it right we can use an action use animate next let's give it a class letters and you can also have the Styles inside of here but I don't want to in this example so as you see we created this simple action we just get the text we set it to blank then we Loop over each letter we create the letters and then we just animate them as usual so look how beautiful these friends are going to save it and let's see if it works how beautiful is this friend look how simple this is and of course you can also pass parameters to the action so if we go here we can say for example color and then we can set some default value so we can say color orange red and then instead of setting the color here ourselves we can just pass the color so beautiful is going to be orange red but we can say it's something else so for example let's go here and then for anime text we can just do it like this we can set the color to something like red so let's see if it works and how beautiful is this friends so you can see how simple this is so salt actions are just another simple way to get a reference to an element and then inside your action you can do regular doll manipulation this is just JavaScript and of course we can go here and reuse this so let's just it over and since I'm using CS3 for the main layout ledgers use it inside of a div here and of course you're going to have more semantic markup than this right right so I'm going to do it like this and how beautiful is this friends right all right so if you like what you've seen don't forget to like And subscribe and you can support me by becoming a patron thank you for watching and catch you in the next one peace [Music] thank you

Channel: Joy of Code

Views: 10,185

Keywords: sveltekit, svelte

Id: N9OjaQ0XtKQ

Length: 17min 37sec (1057 seconds)

Published: Fri Sep 15 2023