Generating Declaration Files

[00:00:00]
>> We've got all that in place, we've got the CSS modules, what we don't have is any of the type annotations, right? And if you don't use TypeScript, that's great, but even if you don't use TypeScript, I think for a lot of, like VS Code will still like read the types even in regular JavaScript, at least give you hints.

[00:00:24]
So you saw it before we used to find config and vite, that it knew kind of the the answers, right? So, there is a fun plug in called vite-plugin-dts, which will basically for any TypeScript, scan through it, and go ahead and create the dts file for you in that library.

[00:00:50]
So npm installed as a development dependency, this vite-plugins.dts, and to no one's surprise, we can go pull it in, it's a default exports, I can call it. We'll say, import dts from 'vite-plugin-dts', great, we'll put that in there as well. And it takes some options, there's a whole bunch, what I really like is to, what's the one that I'm looking for?

[00:01:26]
Let's see, I'll start typing. I don't wanna roll, lets say PluginOptions, see, sometimes this type of stuff is neat. All right, so you've got route, I want all the same things in here as well. What I want, I think I want insert type entry roll up types. Which is declarationOnly, trying to remember which one I want.

[00:02:02]
Let's just run it and see what we get in the beginning, and we'll go from there. So, run build. So you can see at this point it did create really, everything at this point, right? And we could, we could deal with that a little bit, it's not really bothering we've got this main.dts, we've got actually, in our components, all the dts files for everything in this case.

[00:02:28]
My components aren't in there though which is kinda like a little bit squirrely, there is an option in roll up to do, I believe it goes in the output or we could say, PreserveModules is true, and you can kinda see how that changes it. I know it's conflicting with another option, but that's actually not the one that I care about so much.

[00:02:49]
So if I run it with nothing, we see that I get everything as if I was building a full app. I don't need the SVG from the React template in my library, unless you need it, but I don't, right? In this case, I've got, what I really wanna do is say, okay, we wanna put it all together, but we want to just say what's in source components.

[00:03:10]
If I run this, you'll see that I'm a little bit better, right? It didn't pull in all of the other stuff, like the application and everything that I'm running this code in. But it does include that SVG again, and so the way to handle this is pretty simple, which is we can go in here, and we can basically, in the build options, we can say, copyPublicDir false, right?

[00:03:38]
And this, yeah, if you didn't want the public directory in your regular app, that would do the trick too, but like in this case, we won't, we don't want anything from there. And so now we've got the style, we've got the various files, we've got the button.dts in here as well, and we've got a bunch of that in place.

[00:03:56]
Now, if you did wanna also build the app, you could have two vite configs and you can do a --config on the vite command and say, okay, for the library, we wanna build this. For the regular app, we just use the regular base one, you can have multiple vite configs, and it will totally work.

[00:04:12]
It was just like if you did npx vite --config, and in my case, I only have the one, button, it will run that configuration, that was for the, we do it for build. If I had a different configuration for the app versus the library, we would get those in place as well, so you could have multiple configurations at this point too.