Stimulus controller to alias other Stimulus controllers

alias_controller.js

import { Controller } from "stimulus";

export default class extends Controller {
  initialize() {
    this.registerAliasedControllers()
  }

  registerAliasedControllers() {
    for (let [alias, original] of this.controllerIdentifiersByAlias) {
      if (!this.moduleForIdentifier(alias)) {
        this.application.register(alias, this.constructorForIdentifier(original))
      }
    }
  }

  constructorForIdentifier(identifier) {
    return this.moduleForIdentifier(identifier).definition.controllerConstructor;
  }

  moduleForIdentifier(identifier) {
    return this.application.router.modulesByIdentifier.get(identifier)
  }

  get aliasDescriptors() {
    return this.element.dataset.alias.split(/\s/);
  }

  get controllerIdentifiersByAlias() {
    return new Map(this.aliasDescriptors.map(descriptor => descriptor.split(/->/)))
  }
}

Usage

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

Example

<div data-controller="b-modal alias" data-alias="b-modal->frameworks--ui--bootstrap--modal">
  <button data-action="b-modal#open">
    Open modal
  </button>
</div>

How does this work with nested or recursive aliased controllers?

After actually reading the code it would seem that the alias is registered as a new identifier for the target aliased controller. Meaning the alias b-modal in the example above can never point to different controllers. This doesn't seem more helpful than just manually registering additional aliases on initialization.

This doesn't seem more helpful than just manually registering additional aliases on initialization.

I agree, I created the gist as an attempt to solve the proposed problem in https://discourse.stimulusjs.org/t/feature-request-controller-name-alias/621

I would be more clear to just register the controllers in the initialization process if you know which aliases you'll need up front. Automagically creating aliases when they are referenced adds some flexibility, but as you mentioned, it also takes up that controller name for the duration of the running JavaScript process which might not be obvious.

Thanks, tried it out and worked for me for my use case, but having this alias globally defined in the process is probably a problem for future stuff. I hope it is free to use and I am allowed to improve, if needed.

import { Controller } from "stimulus";

export default class extends Controller {
    initialize() {
        this.registerAliasedControllers();
    }

    private registerAliasedControllers() {
        for (let [alias, original] of this.controllerIdentifiersByAlias) {
            if (!this.moduleForIdentifier(alias)) {
                this.application.register(alias, this.constructorForIdentifier(original));
            }
        }
    }

    private constructorForIdentifier(identifier) {
        return this.moduleForIdentifier(identifier).definition.controllerConstructor;
    }

    private moduleForIdentifier(identifier) {
        return (<any>this.application.router).modulesByIdentifier.get(identifier);
    }

    private get aliasDescriptors() {
        return (<HTMLElement>this.element).dataset.alias.split(/\s/);
    }

    private get controllerIdentifiersByAlias(): any {
        return this.aliasDescriptors.map(descriptor => descriptor.split(/->/));
    }
}

@forelabs, glad it worked for you! You're welcome to use however you like.