hotwired / stimulus

A modest JavaScript framework for the HTML you already have
https://stimulus.hotwired.dev/
MIT License
12.73k stars 426 forks source link

Match outlet by controller name instead of selector #794

Open tonekk opened 1 month ago

tonekk commented 1 month ago

Hi folks,

we recently added stimulus to our application and began using outlets shortly thereafter. We could not help but wonder why outlets are matched by selector instead of by controller name.

I assumed that you could add multiple batches of outlets using the same controller like so:

<!-- before -->
<div
  data-controller="users"
  data-users-user-outlet=".user"
>

<!-- after -->
<div
  data-controller="users"
  data-users-admin-outlet=".admin"
  data-users-moderator-outlet=".moderator"
>

(given that .admin and .moderator both use UserController).

I discovered today that this is not possible, because stimulus checks that the controller name matches the name of the outlet.

Now my question: Why did you choose to introduce a selector in the first place?

We ended up setting the selector to [data-controller="user"], because we don't want to introduce any none-style related classes into our html.

Matching by controller would allow for a much clearer syntax like:

<div
  data-controller="users"
  data-users-outlets="user"
>

which would not only be much easier to understand (I personally find the current example in the documentation confusing), but also grant the opportunity to supply multiple outlets in one attribute (just like we do in the data-controller attribute).

Please let me know if I'm missing something here. I'd be glad to work on this, should it be taken into consideration.