Perhaps an alternative syntax to allow binding multiple attributes cleanly?

[radiantshaw]

Big fan of Stimulus and this is a very interesting project I came across in its ecosystem. And congratulations on the release! 🥳

I went through the docs and was thinking of providing an alternate syntax for the binding. One that will help bind more than one attributes in a clean way. I was thinking something like:

<div data-bind-class="..." data-bind-width="..."></div>

Basically, the format would be `data-bind-[attribute]="controller#property:modifier".

Or perhaps, if you're feeling adventurous, data-x-[attribute].

Again. Congratulations on the project. I hope this takes off. ❤️

[allmarkedup]

Hey @radiantshaw, thank you for the kind words 😊 It's good to know that other people see the value in bringing this sort of functionality to Stimulus too.

Funnily enough my first few early iterations of StimulusX did use the syntax you propose above - the less adventurous version though! However I switched to the current format for a number reasons:

1. It more closely aligns with the Stimulus action descriptor syntax that Stimulus users are already be familiar with, and how (I would imagine) it would look if this sort functionality was a core part of Stimulus itself.
2. It's easier to get all bound elements in the DOM when the attribute name doesn't have a 'dynamic' part to it (i.e. document.querySelectorAll("[data-bind-attr]") rather than having to fetch all elements in the document and then iterate over all attributes to see if their it's name starts with data-bind-).
3. It means StimulusX is 'takes over' a smaller, finite number of data attribute names, so it's (theoretically) less likely to cause conflicts with other libraries.

However to be honest I think that really only argument 1) has much real-world merit. And one of the things that bugs me about Stimulus itself is how verbose things like the data-action attribute syntax is, so I'm definitely up for adding a more concise syntax - at least as an optional alternative should people want to use it (and I suspect most people would).

If it is an optional alternative I guess it would probably make sense to then make that as concise as possible by default. Maybe even just sx-[attribute]? i.e.

<div sx-hidden="controller#status:is('complete')" sx-class="..."></div>

I'd probably want to offer a way for people to customise the attribute name prefix anyway, so people could always override the default if they didn't like it and/or just wanted to change it to a more standard 'data-[...]' attribute name.

What do you think?

[allmarkedup]

@radiantshaw I've opened a PR here that implements the style of syntax you proposed as an optional, alternative style of specifying bindings. I've had a play with it and I like it 🙂

If you have a chance to take a look at some point I'd be interested to know what you think.

[radiantshaw]

Thank you so much for considering this @allmarkedup. I'm taking a look at this PR. Will take some time though, as I have to understand the architecture first. Hopefully, I'll be able to review it this week. ✌🏼

[allmarkedup]

@radiantshaw no worries! But please don't feel like you need to review the code too thoroughly, there are lots of optimisations I need to make in this area anyway. It was really mostly to get your thoughts on the prefix/format etc from a potential end user point of view.

Of course any code review is always welcome but I certainly don't want to take up too much of you much of your time with this :)