Skip to content

Instantly share code, notes, and snippets.

@kaspermeyer
Created January 19, 2019 18:33
Show Gist options
  • Save kaspermeyer/0fcfb818e933769a81a54f445b93a01b to your computer and use it in GitHub Desktop.
Save kaspermeyer/0fcfb818e933769a81a54f445b93a01b to your computer and use it in GitHub Desktop.
Stimulus controller to alias other Stimulus controllers
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(/->/)))
}
}
@kaspermeyer
Copy link
Author

kaspermeyer commented Jan 19, 2019

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>

@Goddesen
Copy link

How does this work with nested or recursive aliased controllers?

@Goddesen
Copy link

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.

@kaspermeyer
Copy link
Author

kaspermeyer commented Mar 14, 2019

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.

@forelabs
Copy link

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

@kaspermeyer
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment