Glob Imports

[00:00:00]
>> The other really kinda powerful one that I actually use a lot is, and this is again a Vite specific one, is this idea of a glob import. Is everyone familiar with the term glob means? It's yeah you give it some pattern and it'll match all the files that match that.

[00:00:18]
So for instance, let's try let's kind of explore it together in this case. Let's go back into my index actually. So that will give me just the name. After it all tree shakes out. But let's say I have a whole directory of files, right? And I wanna get all of them, right?

[00:00:39]
I have files in my code base where it's, especially the ones that don't use Vite. On our marketing site, we have a carousel of logos, right? That is a lot of import lines, or a lot of file paths over and over and over again. And the other places in our application, a lot of times, I will grab the API responses that are JSON for bugs and things that broke.

[00:01:11]
And I wanna run tests against all of them, right? But, so the product works and has workflows, right? Import a failing workflow, import a completed workflow, import it, yada, yada. I've got to import 10 files, and then I will iterate over them and run all the tests, right?

[00:01:28]
And now every time I add a new file in there, I've got to add another import, so on and so forth. Import.glob gives us the ability to give it a pattern and it will go basically search whatever that file path is and give you an object of all the files that matched, right?

[00:01:46]
An earlier version of the course website used this because I think I showed you I have that directory full of markdown files. I can basically say okay cool pull in all the markdown files from this folder and now as I add new files they would just be in that glob.

[00:02:04]
So let's kinda explore it together, and I'll give you a little challenge to play around with it in a second. So I've got my folder full of characters. I've also got this folder full of logos, which are basically, I just went to the Vite repo and grabbed the folder with all the templates and each one of them has a logo of one of the templates.

[00:02:25]
So I just grabbed all of those. And let's say that I don't wanna have to know what's in this folder, I just wanna say grabbing all of the SVGs out of this folder, right? So what would that look like? So let's see, we could, let's go back into it's a little playground, I like it.

[00:02:42]
We could do import.meta.glob which is just for us mentioned so it had to say Vite today. I don't get to say glob outside loud enough so I'm pretty stoked about that we'll say dot logos and you could say star dot SVG. If you wanted to also have it traverse down, any subdirectory, you can do star, star, slash, star, which is, okay, logos and all of its subdirectories.

[00:03:11]
Keep going, right? Find me all of them. And let's go take a look. And let's say, this is we know that import. Usually returns a promise, right? So, what we'll do, we'll just start with, then console.log, right? Just to see what we get, right? And we'll go in there, and you can kinda actually.

[00:03:40]
In the index.js we kinda get to see it which is under the hood it actually did in the translation level. Where it's like it found all the files and gave us an object where it's all the file paths that matched and then an import statement with that. Those are all promises that then also need to resolve in this sense.

[00:04:01]
But basically, we'll find all of them. So, if I add or remove a different SVG, I don't have to change my code anymore, right. I can add new, if it's the carousel, I can add new logos. They're all gonna get globbed in there. I don't have to sit there and okay, we put the logo for this company in there.

[00:04:19]
Now let me go also import that file and add it to the array, so on and so forth, right? This will effectively do it for me. Now let's go ahead and let's just, let's do something with this, just to kinda show the full piece of it. And so we'll say.

[00:04:38]
I don't think I can call it module. I think in, yeah, I can't in common JS because it's a reserved word, but if I'm in an ES module file, I can. So we'll say, so the module is going, let's do that, console.log(module), and we'll go into the console at this point.

[00:05:00]
Because that's the entire object. So I can do the Path. Path module. Path and module. Angry at me, do I need to work now? And the parentheses in there? One more parenthesis, there we go. So now you can see it's going through all of them and they are still promises in this case, right?

[00:05:54]
But what I could do at this point is I could say I really only need the module I could say. Let's do. And we'll just do one more console.log real quick just to kind of see as you can see as I work through the object itself. Gotta call it, so they are lazily loaded as you need them, right?

[00:06:26]
So that's why it's not fetching them all it's like as you go and refer to any given one of them, it will then go ahead and begin to load it. So we've got all that in place. And if you do know that you need all of them. You don't necessarily have to go through all of this.

[00:06:41]
You can for instance, so the image was what do we got in there now? So in module, you've got the default, right? And because they're not named in this case is just SVGs. Remember when I said before, it's to use export.const cuz I get it as a property otherwise it's called default.

[00:07:08]
And those are going to be the URLs that Vite uses, right? In this case, it is mostly the same as the path to. But, what we can do is we could say with that image, what we're gonna do is We'll say, again, if you have a framework, this becomes a little bit easier, but we can do it.

[00:07:35]
Create element, image, say image source, equal, call it URL. Image source is URL of that and we'll say content equals. Now we should be able to do content.appendChild with that image. I will explain to you I hate this in a second. Okay, cool, now we've got a bunch of images for reasons I don't understand.

[00:08:15]
The Vite logo in all the repos is phenomenally larger than the rest of the SVGs. One could find some tooling that with resize it. But there are also SVGs you can scale into whatever you want. So we could say something. Image height is, I don't know, 200? Now they're all the same.

[00:08:40]
But anything we added, if I can go ahead and, you know what, let's take the Vite one out. I don't wanna deal with that anymore. It's gone, I didn't have to change any code, whatever goes in that directory is there. This is great if I have a whole bunch of fixture data that wanna run my test suite through.

[00:08:57]
Cool as I add new fixture data, I don't have to then pull it in, import it, put it in an array. It's gonna go in there, it's gonna pull it all in. But who enjoyed watching me unwrap all those promises? Felt good about that. Everyone like watching that that felt like I wanna do that later.

[00:09:15]
Nobody wants to do that later. So, and they know that because this is all fake. Vite is reading the file system and interpolating in those values is not happening at runtime. And it gave me those promises that I could pull in there and that's cool because then for any given one of those files, I have to use it before it's included in the bundle.

[00:09:36]
So it's looking out for me, but I don't wanna be looked out for I just wanna put images on the page without having to dot then all over the place, right? And that is not an uncommon pattern, right? So the other thing that we could do is paste this in here.

[00:09:57]
And we can say. Eager is true, let's just console.log that. Now if you look, it has already resolved all the promises for me, right? So now I don't have to go and resolve each one is saying get get all of them and give me their actual data. If we use the JSON files, you wouldn't have to, you'd get the default but you'd get all the properties as well.

[00:10:31]
But at this point, it will go read the directory and automatically just pull in all the files immediately, right? Now there are all gonna be loaded in. I don't have to import each one or resolve the promise, it's all good to go. And I can then render them on the page and again there are a bunch of is it one that you use every day?

[00:10:49]
No, is it one that when you use it it saves you a ton of work? Yes, right and that's what we're here for