When we first built this custom color picker form field, I mentioned that importing assets through a CDN like this is not exactly the most ideal solution. As you can see, the CDN link is actually included multiple times on the page, and while the browser is able to see this and only actually load it once, it's still not very efficient for Livewire to have to render this HTML after every request. This is why Filament has an asset system, and the asset system is able to register CSS and JavaScript files to then be loaded on every page. Let's add the CDN link inside the Filament asset system. So in our color picker, we can grab the CDN link and remove it from the script, and we can remove the script itself. Now in the service provider of our plugin, we can register assets. So in the ToolkitServiceProvider, we can define a new package booted method, and the Sparty

script itself. Now in the service provider of our plugin, we can register assets. So in the ToolkitServiceProvider, we can define a new package booted method, and the Sparty package tools will call this method after it's safely registered all of its resources. So inside this method, we can use the Filament asset facade, and the Filament asset facade has a register method, which accepts some objects, and each object configures one asset. So for instance, we can define a CSS object, pass in some unique ID, and then a path to the CSS file, and Filament will handle that. In our case, we want to define a JS asset, and this JS asset is going to be called Iroh. Now, this ID just needs to be unique for all assets inside this package, and since this is only going to be handling Iroh, we can just give it the ID of Iroh. The second parameter of the make method is actually the URL or

assets inside this package, and since this is only going to be handling Iroh, we can just give it the ID of Iroh. The second parameter of the make method is actually the URL or the local path to this JavaScript file. So let's find a string and paste in the CDN link. The second parameter to this register method here is actually a string of package. Now, we can just give it the name of our package here, and this ensures that assets from different packages don't conflict. Now let's reload the browser and see what's happened. So for each of these color pickers, there is now no CDN link. However, they are still working. So how does this work? In the layout file that we have when we installed Filament, there is a Filament scripts directive, and this is also present inside the panel builder. Now, the Filament scripts directive is able to output any JavaScript that Filament needs,

is a Filament scripts directive, and this is also present inside the panel builder. Now, the Filament scripts directive is able to output any JavaScript that Filament needs, as well as any that you register. So in this case, we're registering the Iroh CDN, and that's output here at the bottom of the body tag. It's only been output once for all of these fields. Now we do use a CDN here, and that isn't ideal for some people. So let's actually refactor this to using a local JavaScript file instead. You see how all the other Filament assets are using local files that can be found on the current domain. Let's do the same for this Iroh file. Now one option could be downloading the Iroh file from the CDN once, putting it somewhere in our package, and then forgetting about it. That is an option. However, a lot of you will want to keep it up to date with NPM. Now we can't just go ahead and put in

somewhere in our package, and then forgetting about it. That is an option. However, a lot of you will want to keep it up to date with NPM. Now we can't just go ahead and put in an NPM path in here, because users of your plugin will probably not have this package installed via NPM. To solve this, we need to initialize NPM inside the package itself, and then compile this down into our own file. Since the source is then contained within node_modules, it's automatically kept up to date as soon as you recompile your package. And also your users don't have to have that module installed. Today we're going to be using ESBuild to compile this file. It's going to take Iroh, the NPM version, and then compile it into a static JavaScript file that we can then distribute. The full ESBuild API can be found on their website. We're just going to run through a tiny part of it, just enough

it into a static JavaScript file that we can then distribute. The full ESBuild API can be found on their website. We're just going to run through a tiny part of it, just enough for us to be able to compile our JavaScript file. So let's initialize NPM within our package. That's cd into it. So cd packages/filament-toolkit. And we can run NPM in it. Just run through these. Don't need to change anything. And now NPM's been initialized. We have this package.json. First thing I'm going to do is change the type to be module. So we can use ESM imports. And now we can NPM install our dependencies. So again, let's cd into our packages/filament-toolkit. And NPM install esbuild and also iroh. And the iroh package is James Iroh. And we're going to save these to dev. Now while that's installing, we can actually add the node_modules to our .gitignore to make sure they're not going to be committed.

is James Iroh. And we're going to save these to dev. Now while that's installing, we can actually add the node_modules to our .gitignore to make sure they're not going to be committed to git. So node_modules. And it looks like we've finished installing now. To actually set up ESBuild, we need a file to tell ESBuild what to compile, how to compile it, and to where. So let's create a new file inside the filament-toolkit called bin/build. And I like to put scripts like this into that directory. Inside here, we can import everything as ESBuild from the ESBuild package. And now we can define a build. So ESBuild.build. And this is going to accept an object of options. The first is going to be the entry points. So the entry points here are going to be the files that we're compiling. So we haven't created one yet, but I'm going to create a file that's similar to like ./resources.

So the entry points here are going to be the files that we're compiling. So we haven't created one yet, but I'm going to create a file that's similar to like ./resources/js, and then maybe iro.js. And we can import iro in this file. Now the out file is where we're going to compile to. So out file. And this is going to be compiled to something like dist/iro.js file. Now we also need to set bundle to true, so that iro is bundled into this file and not just referenced. We want to set the main fields to be module and main. Since we're compiling for the browser, we need platform browser. We should also enable tree shaking. And the flavor of JavaScript we're going to be using is ES2020. And finally we should probably minify this. So set that option to true. Now we've got ESBuild configured, we can see that we're going to be compiling this resources/js/iro.js file. So let's create

we should probably minify this. So set that option to true. Now we've got ESBuild configured, we can see that we're going to be compiling this resources/js/iro.js file. So let's create that in resources. Let's create a new file. So js/iro.js. Go into the iro documentation. This is how to import iro. So import iro from 'james/iro'; And in the CDN, you can see that it tells us that when you include it, iro.js will be made globally available on window.iro. So let's do exactly the same. Let's set window.iro to be iro. Now we can try and actually build this script. So if we run bin/build with node, it hasn't given us any output, but we can see that this new dist directory here has now got an iro.js file in it. And the bundle licensing information is here. So I assume that everything's worked correctly. Everything looks like it's there. So let's now go into our service provider.

file in it. And the bundle licensing information is here. So I assume that everything's worked correctly. Everything looks like it's there. So let's now go into our service provider and register this instead of the CDN. Since this is a local path, we can use php's DIR constant like that. We can then concatenate on ../dist/iro.js because this is relative to the current file. And we're currently in the source directory. So we have to go out and then into the dist directory. Finally, we actually need to run the php artisan filament:assets command inside our app. And this is then going to copy over the iro.js file from the vendor directory into the public directory because vendor directory files aren't publicly accessible inside the browser. Let's call php artisan filament:assets. And it looks like there's a problem here. So no such file or directory. I think we actually need to

accessible inside the browser. Let's call php artisan filament:assets. And it looks like there's a problem here. So no such file or directory. I think we actually need to add in a slash here as we're using source/../ directly. Let's call that again. And it looks like it's finished. And we can see that this has actually copied a file to public/js/dan_haran_filament_toolkit_iro.js. So that's actually now accessible in our browser. And since we've registered it with the FilamentAsset facade, it should be loaded on every page. So let's go back on. And again, our color pickers are still working. But now we're using the iro.js locally.