Outlets array expects kebab-cased names instead of camel-cased ones (like targets do)

[wynksaiddestroy]

If you have a target name which consists of multiple words, you'll define your targets as follows:

static targets = [ "errorMessage" ]

An outlet name with multiple words, has to be defined the following way:

static outlets = [ "error-message" ]

If this is the intended behaviour, it would be nice to add a small notice to the documentation. Thanks!

[marcoroth]

Hey @wynksaiddestroy, thanks for opening this issue!

This is a good point, and I think I agree with you that it's kinda unexpected if you look at how targets are defined.

I'm wondering why I did it that way. I guess because controller identifiers are also being written in kebab-case, and since outlets reference controller identifiers I probably went with that.

I guess you could expect both ways, depending on how you look at it.

Not sure how we should proceed here. I'd be fine with changing it. But that would probably also mean it's a breaking change.

[wynksaiddestroy]

The Naming Conventions section of the Values reference page also says:

Write value names as camelCase in JavaScript and kebab-case in HTML.

So I guess, using camel-case for outlet names would keep everything more consistent than using kebab-case. But I would be satisfied with an updated documentation as well. Mabye someone else has an opinion on this issue?

[marcoroth]

Good point! I'd be happy to change it, but would also love to hear feedback from others.

Agree it should be changed for consistency. Might as well be now while the feature is new.

[xmas7]

Totally agreed! Outlets better to use kebab-case!
Not sure if its a MUST but assuming that most folks like to use that one and its gonna be a Good practice or something.

[dhh]

Would be happy to ship a quick 3.2.2 that addresses this. If there was a way to detect kebab case, still have it work with a warning of depreciation, and then document and recommend camel going forward, that would be great.

[minimul]

I like kabab-case and wish targets worked as outlets do it that regard – but yeah consistency overrules.

[NakajimaTakuya]

I generally agree with the alignment with the targets api.
However, I have one concern.
If outlets are written in CamelCase, there is no way to distinguish between -- and -.

before:

// in html
data-controller="hoge"
data-hoge-xxx-yyy-outlet="#zzz"
data-hoge-xxx--yyy-outlet="#ppp"

// in controller
static outlets = ['xxx-yyy', 'xxx--yyy']

after

// in html
data-controller="hoge"
data-hoge-xxx-yyy-outlet="#zzz"
data-hoge-xxx--yyy-outlet="#ppp"

// in controller
static outlets = ['xxxYyy', 'xxxYyy'] // I do not know which of these refers to which.

Originally, outlet getter had this problem.
However, it used to be discernible at the time of definition and it was predictable that the two would be mixed.

Wouldn't it be difficult to work backwards from the outlets static property to the controller name, given the existence of -- and - in the first place?

[drjayvee]

This may be unrelated, but the docs leave me wondering whether you need to use the outlet controller name verbatim, or whether you're allowed to alias it.

<div class="stuff" data-controller="awesome-stuff"></div>

<!-- according to the docs: -->
<div
  data-controller="search"
  data-search-awesome-stuff-outlet=".stuff"
>

<!-- is the following allowed as well? -->
<div
  data-controller="search"
  data-search-stuff-outlet=".stuff"
>

Would the 2nd then be allowed to use

class extends Controller {
  static outlets = ['stuff']
  declare readonly stuffOutlet: AwesomeStuffController
}

[rupasix]

Originally, outlet getter had this problem.
However, it used to be discernible at the time of definition and it was predictable that the two would be mixed.

Concerning is, if you use controllers in directory, your outlet controller names in camelcase are simplified, eg: search--form and search-form will be this.searchFormOutlet.

[minimul]

@drjayvee

I tested this and it seems like the outlet name needs to be verbatim (to the controller you want to "outlet" to) and an alias doesn't work.

Is that what you found?

[drjayvee]

@drjayvee

I tested this and it seems like the outlet name needs to be verbatim (to the controller you want "outlet" to) and an alias doesn't work.

Is that what you found?

@minimul yes, that's what I found as well.

[adiakritos]

I want to add to this that if you want to reference an outlet whose file name is something like:

foo/bar-controller

Then the html kebab case is needed when setting the outlet inside the controller like so:

static outlets = [ "foo--bar"].

Whether it's changed to match the pattern used by targets or not, I think the docs should speak to this since it's the current way newcomers will expect things to be given the pattern established by targets.