Using the Library

[00:00:00]
>> Now, the only other things we really need to do to make this a real deal library is actually not Vite related, is basically put some additional information in package.json, being like, here's what the good stuff is. When we say import our fancy module, right, what file, right?

[00:00:20]
When we say import React, there's something in the package.json saying where do we start to get React? And like I said earlier, everything is hard because there's two module systems currently, right? There's still CommonJS, and there's also ES modules, and we've chosen to support both cuz we're good citizens.

[00:00:39]
So what we're gonna do is just make some changes to our package.json. And I'll do it all up here so it's easy to find. So old node with CommonJS, you would have a main. And that main would be kind of what we were saying before, the main file that you wanna pull in.

[00:00:59]
So we'd have that dist, and then we decided to call it, and now here's the tricky part. Old stuff, we need the CommonJS one. New stuff, we need the ES module. Try to hold that in your brain, cuz I'm gonna need help holding it in my brain. So I'm gonna put it in all your brains, it'll be easier.

[00:01:16]
So we've got that dist, and we call femds.umd.cjs. Everything's hard. And then the module for those ES modules will be the other file, that ./dist. If anyone sees me make a typo, don't assume that I'm doing some four-dimensional chess. With the file name, I'm probably just making a typo.

[00:01:44]
So we've got those two, and then the other one, and honestly, do I theoretically know why I have to do all this? Yes, do I really, truly? I know that I have to for various different bundlers. Some of these aren't even in the official spec for package.json, but you kind of need all of them to work.

[00:02:01]
So then again, we need to basically say, we'll go ahead and we'll say, import. And so the import is, again, our ES modules, and so that's going to be. So if they've used import to pull it in, we wanna give them the ES module. If they require as CommonJS, we will give them the common.js file, right?

[00:02:32]
And then, that should do the trick. There is one more thing we can add here if we wanna be good people. Does everyone wanna be good people? For the most part, mediocre. We're on the fence on whether or not we wanna be good people. We're trending, yes, right?

[00:02:47]
We can say that the types are located at dist/index.d.ts, right? So that way, we've pointed where the types are, and you see index.d.ts is actually pulling in these other two. So we'll get all the types as well. Even if they're not using TypeScript, we'll get the IntelliSense in there as well.

[00:03:11]
And yeah, that should give us most of our package, right? So lib mode, again, we give an entry point, we say what formats we want. If you are just doing regular JavaScript, or even just TypeScript files, if it's like library of utility functions or something that does not involve a component library, do you need to worry about injecting CSS?

[00:03:29]
No, right? Or if you do wanna include any of the third party libraries you happen to pull in, great. We're going to assume that they have React. We're going to assume that we wanna inject the CSS. So we did a little bit of extra work. We did just generate the types for free.

[00:03:46]
So that was pretty cool. And let's go ahead and let's see if it works, Dustin?
>> Does the CSS inject plugin work the same with SASS or LESS, and library mode work the same with the CSS pre-processor?
>> It should, I will couch that with, I mostly just use PostCSS these days, I don't use Sass that much anymore.

[00:04:11]
So it should asterisk, little cross thing, caret, every disclaimer around it, because it is just going through Vite the same way we saw before. Vite shouldn't care in terms of library mode, but I tend to, 99.9999, actually 100% of the time, if we count the last three years, tend to use PostCSS, mostly cuz it's already there.

[00:04:32]
Sass is great, that's not a dig on Sass, but for most of the things I need, especially worldwide predominantly use Tailwind these days. I haven't used Sass in a while. So I don't wanna say like, of course, it does. I believe it does. But that's a fun experiment at some point as well.

[00:04:49]
All right, so real quick. So it's in vite-components. I made that vite-react before. So, I think in here we can do, what is it, npm link, vite-components. And all npm link does is it installs it from another directory on your file system. If you use pmpm, you can do a whole manual repo setup and have a bunch of stuff in the same folder, that's beyond like the scope of our time together, we're just talking about Vite.

[00:05:23]
But pmpm link should do the trick for the most part. If we look in our package.json in here, you can see, where is it? Where'd it go? It might just be, I think maybe in this case, it's pmpm most of the time. Let's just look in node modules.

[00:05:51]
What did I call this library? In my package.json, that's important. Called it vite-components, okay, let's see. We did npm link, it looks like everything was fine. All right, before I over think it, we'll go into our vite-react. If I scroll down into my files. Yeah, it's here, we're good, we're great.

[00:06:25]
We're doing wonderful. I think pmpm will do it a little bit differently, but cool. So let's go in here and let's see. Let's not do it in this file. Let's do it in our app. That's not filling me with, Cool, it says we're not using it yet, sweet.

[00:07:08]
Let's go ahead, we'll just console.log it real fast and then, actually, you know what? We're gonna do it. We're gonna go all the way. It knows Input was one. My types must be working. All right, so in here, we're gonna just go, let's clear out most of this.

[00:07:33]
And we're just gonna see, hopefully, with any luck, cuz it's one of those things we code a little bit too much without looking. You gotta wonder where I'm feeling good. So we'll say Input, yeah, it's fine. And then we'll say Button, look, it knows it has a dangerous property, that's cool.

[00:07:54]
Cuz my types are included and yeah, we're not using that. So let's go ahead, Look at that, with the styles and everything built in, right? And some of those are a little bit tedious, right, you gotta put the DTS in there, you gotta inject the styles, but you set that up once, right?

[00:08:20]
And now I could just add more and more components to this library. They're gonna come with the styles, they're gonna come with everything, they're gonna come with the types, right? I can kinda build on that toolkit myself, and other than a little bit of an initial setup that we all did together, right?

[00:08:38]
We've got the boilerplate for producing this. So I could run npm publish at this point, and publish my components and you could npm install them, right? I do not wanna be on the hook for maintaining them. So I'm gonna be doing that right now because it's a button with a style on it, right?

[00:08:55]
But the process of making reusable code with Vite, and then consuming it in another Vite application is incredibly powerful, and an interesting way to do it. When I was preparing for this, there was a lot of people who using Webpack, like, Vite seems great, but I can't use it.

[00:09:11]
I'm like, why can't you use it? I'm like, I need module federation. You all know what module federation is? Good, cuz I had to learn that. It's basically the ability to remotely pull one in at runtime with a very fancy name. I'm like, that's a very simple concept with a very complicated name.

[00:09:25]
It turns out Vite can very easily support module federation. And so what we'll do next is we'll kinda look at that and we'll see how that process works. And we'll kinda have two applications that can kinda pull things in at runtime. We'll talk a little bit more about what that is and how it works as well, and how to set it up.