Feature request: controller name alias

1

Due to namespacing, some of my controller names are becoming quite long, and it would be nice to alias them in some way.

For example:

<div data-controller="pages--platform-admin--random-data">
  <button data-action="pages--platform-admin--random-data#showMessage">Click me!</button>
  <p data-target="pages--platform-admin--random-data.message" class="visually-hidden">You clicked me!</p>
</div>

I was hoping that a controller alias could be somehow set, maybe something like the following:

<div data-controller="pages--platform-admin--random-data" data-controller-alias="pard">
  <button data-action="pard#showMessage">Click me!</button>
  <p data-target="pard.message" class="visually-hidden">You clicked me!</p>
</div>

Multiple controllers could maybe be aliased by adding a space-delimited value for data-controller-alias, with the aliases being applied in the order that controllers are defined. E.g.

<div data-controller="base--event-emitter pages--platform-admin--page-1" data-controller-alias="ee pa1">
</div>

Loving stimulus so far!

1 Like
2

While I think there might be some problems with aliased controllers when it comes to maintaining a readable DOM, I thought it would be a fun challenge to create a Stimulus controller to handle this issue, without having to rewrite any of the framework internals.

You can get it here, and include it in your project if you wish.

It introduces a new data-alias descriptor with the following notation: data-alias="alias->original"

Note: It uses undocumented API’s in the Stimulus framework to dynamically create and manage controller, which might change in the future.

Usage
When you’ve included the controller in your project, you can add the alias controller identifier to your element and start defining your aliases like so:

<div data-controller="pard alias" data-alias="pard->pages--platform-admin--random-data">
  <button data-action="pard#showMessage">Click me!</button>
  <p data-target="pard.message" class="visually-hidden">You clicked me!</p>
</div>

You can define multiple aliases on an element if you want to:

<div data-alias="b-modal->ui--bootstrap--modal b-popover->ui--bootstrap--popover">
  <!-- ... -->
</div>

While it might have been simpler to define all the aliases up front, I kinda liked the idea of binding them directly to the elements in the markup. This improves clarity and makes it obvious that a controller has been aliased just by reading the DOM—and readable DOM is what Stimulus is all about.

Let me know what you think :slight_smile:

1 Like