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(/->/)))
  }
}

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.