How to use Alpine's plugin system with a custom Filament package?

[RVxLab]

I've been working on getting my colour picker package to work with Filament 2.x for the last couple of days but I'm currently stuck on getting my Blade component to make use of it.

Taking inspiration of the DateTimePicker component I attempt to create a custom plugin that registers my plugin in Alpine.data as such:

function colorPickerPlugin(Alpine) {
    console.log(Alpine);

    Alpine.data('rvxlabFilamentColorPickerComponent', () => ({
        init() {
            console.log('init');
        },
    }));
}

window.Alpine.plugin(colorPickerPlugin);

In this case I do get the Alpine object printed to console, so the JS is running.

However, Alpine does not seem to be able to find the rvxlabFilamentColorPickerComponent at all, giving an Alpine expression error.
I also tried to wrap this in an alpine:init listener, but that one is never called.

Could anyone tell me what I'm doing wrong here? I just can't seem to figure it out.

Thanks.

Commit: RVxLab/filament-colorpicker@877e5d2

[danharrin]

Hi, have you tried doing this in an external JS file? And then registering this in your plugin service provider? It may be a weird inconsistency between NPM & browser Alpine builds.

[danharrin]

Great, let me know when you publish v2 and I'll add it to our plugin list on Discord.

[RVxLab]

I just tagged v1.0.0 of the package.

Thanks again for your help!

[danharrin]

Great! Thanks for contributing to our community

[danharrin]

By the way - PluginServiceProvider extends PackageServiceProvider :D

[RVxLab]

Great! Thanks for contributing to our community

And thank you for making such an awesome project

By the way - PluginServiceProvider extends PackageServiceProvider :D

Nice! I'll merge the service providers soon then!