Web-components via <template> tags

[mindplay-dk]

I'd like to have reusable UI components, in some form. 🤔

I discovered this package, which attempts to leverage the <template> tag, as a means of generating reusable web-components - it was surprisingly simple, but sadly also defunct due to breaking changes in the Alpine API.

After a few attempts, here's a basic, reusable version of the dropdown from the tutorial:

https://jsfiddle.net/mindplay/vw86ebyo/

Just a very basic proof of concept at this point, but this already hints at how powerful this feature could be - having styles locally defined inside the component, using local selectors, and exposing options via CSS variables, it's already reminiscent of the ergonomics of CSS-in-JS and larger UI frameworks, but mostly just leveraging native web platform capabilities.

There is obviously a lot more to unpack here - I don't know what the idea with the attribute stuff in alpine-webcomponent was, there was no examples, tests or documentation. I'm not sure if web-components should communicate via attributes, or maybe property getter/setters, or directly via Alpine's data tree somehow... probably the latter?

I honestly don't know much about Alpine yet. I could just see this really simple HTML-based approach working just as well inside web-components, why not - so I gave it a shot, and I think it looks promising.

I like the rugged, pragmatic approach of Alpine. But if I'm building a complex, interactive UI, I think there are other considerations besides elements being visible on screen before they get bootstrapped for interactivity. The ergonomics of having to debug a page with 50 copies of custom UI elements with all their markup - it could get heavy. In terms of performance, I would be surprised if parsing the same markup 50 times is actually faster than native cloneNode from a <template> tag.

And sure, maybe Alpine isn't on a mission to replace the big frameworks. But wouldn't it be fun if it could? You already have most of what is needed - state, conditionals, loops, etc... all we need is some way to package a section of Alpine markup for reuse. 🙂

Is anything like this in the stars for Alpine?

[skurfuerst]

@mindplay-dk Hey, I've tried out your snippet and it works like a charm. Thanks so so much :) :)

[mindplay-dk]

Hopefully I was clear that this is not a full component implementation yet? 🙂

It's just a proof of concept to demonstrate how a component concept might be approached - it's probably not really useful yet, not without some means of communicating between components. At least, communicating into components would be a must, I think - some means of passing "props", at least - but probably also some means of communicating "state" back up the tree.

I honestly don't know enough about Alpine to figure that out. Only 3 public functions are officially documented at this time - there are lot of public functions, but most of the internals don't have documentation, so it's been mostly guesswork on my part. I don't even know how committed the author is to the public functions, whether releases are versioned correctly for breaking changes to undocumented public functions, etc.

I was kind of hoping the maintainer would offer some ideas or guidance... 😉

[skurfuerst]

@mindplay-dk Hm, there was one problem I have been seeing: Somehow, x-model.debounce does not seem to properly work:

See this minimal example: https://jsfiddle.net/ra15tbmv/

Do you have any idea what is going wrong here? :)

All the best,
Sebastian

[skurfuerst]

I've created a new topic on #2835 for this. Wanted to create a bug report, but seems this is locked to collaborators :)

[mindplay-dk]

No idea what's going on there, sorry. I don't know Alpine all that well - I haven't even used debounce.

I'm just curious if Alpine could become a full-grown framework. I haven't really used it myself, as I'm not to keen on investing in a UI framework that can't do reusable components. So I'm just superficially exploring that idea - because I like the rest of it.

I'm not sure where to take the idea from here. My hope with this post was the community would take an interest. 🙂