Stimulus Suggestion: Controller Aliases

1

I would love the ability to alias a controller name in Stimulus. Here’s a possible interface.

<div data-controller="loader->product-loader" data-product-loader-url-value="https://...">
  <div data-product-loader-target="spinner">...</div>
  <div data-product-loader-target="result">...</div>
</div>

There are several reasons for doing this.

Conflicting Controllers

There are times you need multiple versions of the same controller. Perhaps a product-loader and a category-loader in the same area that are both loader controllers. Aliases would allow two versions of the same controller to overlap without conflict.

Self-Documenting

I usually keep controllers generic, however it can be difficult to determine what each controller does in a sea of generic controller names. What is this loader for? It’s loading a product.

Shorten Controller Names

There are times generic controllers won’t work and you need something specific to the domain. I like to use namespaces (folders) to keep this organized, however that quickly becomes unwiedly.

For example, if you have a controller name store--products--category-loader you could alias it to category-loader and reference it easier throughout the rest of the HTML.

For the record, there was an earlier discussion on this topic, but it didn’t get much activity.

Would anyone else find aliasing controllers useful?

7 Likes
2

Not something we need, but not to say others don’t. We don’t experience any of the issues listed above.

3

Agree on the namespaced controllers like admin--toogle that I would alias as toggle

4

Perahps @ would be a better separator. It stands out more when you have a lot of dashes.

<div data-controller="store--products--category-loader@loader"></div>
5

In the past, when I tried to create a counter with a recursive structure, it did not work because of the scope.
At that time I wanted a little alias functionality.

However, 3.2 was released.
I think I would use outlets to solve this problem these days.

7

I came across a need for something like this just this week - there’s no way to isolate specific targets for specific controllers when there are multiple of the same controller within the same hierarchy.

Either aliases or being able to specify the target designator for each controller perhaps ?

8

No idea if that helps with anything but i just stumbled upon another use case for this. I was trying to use stimulus-sortable in a nested manner - there are sortable elements that has a sortable sub elements inside of them. Not possible with current setup, only option would be to manually create a sub-sortable component that does the same thing as sortable but has a different name. Or just registering it twice with different name.

9

For what it’s worth, I’d love this feature too. I have the need for nested sorting controllers like @mxb . I also have multiple different sidebars that can pop out from the same parent div. It is possible to register the same controller multiple times like this:

import Sortable from "stimulus-sortable"
application.register("sortable", Sortable)
application.register("nested-sortable", Sortable)
application.register("deeply-nested-sortable", Sortable)

But doing this means I’m hard coding details of a particular view into my controller config and it feels very awkward.

The other option that sometimes works is having controllers that emit events and other controllers using the details of the event to distinguish whether the event is meant for them (and not another instance of the same controller). But this is also messy and more complex than aliases would be.