Linked Target Properties

[javan]

Define a controller's target names and Stimulus automatically creates properties for accessing them:

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "source", "slide" ]

  initialize() {
    this.sourceTarget  // this.targets.find("source")
    this.sourceTargets // this.targets.findAll("source")

    this.slideTarget  // this.targets.find("slide")
    this.slideTargets // this.targets.findAll("slide")
  }
}

[sstephenson]

https://github.com/stimulusjs/stimulus/blob/ca4f4dcd2de7d9905c7864d52d2497670e15e69a/handbook/02_hello_stimulus.md#L150-L165

Let’s take this change all the way. No need to start by explaining this.targets—we can reserve that API for special cases. We should revise the whole section to introduce targets as properties right off the bat.

[javan]

Good call. Made some revisions in af233fe

[sstephenson]

Much better! Probably need to revisit the title and intro, too:

https://github.com/stimulusjs/stimulus/blob/af233fe50df6b7c799c28c372319ec7ef4554213/handbook/02_hello_stimulus.md#L129-L135

“Locate” now seems to describe the implementation rather than the concept. And we aren’t really “referencing” elements “by name” anymore, either. I would prefer to describe it more along the lines of linking targets to controller properties.

[sstephenson]

I’m happy with chapter 2 of the handbook now. The last thing we should do is update the installation guide to mention the necessary Babel static properties plugin.

[javan]

It turns out that the Babel plugin for class properties is either going to work great or not work at all with our implementation.

👍

Add the transform-class-properties plugin to your .babelrc file:

{
  "plugins": ["transform-class-properties"]
}

And classes with static properties like:

class A {
  static targets = […]
}

Are compiled to:

var A = function() {}
A.targets = […]

👎

Use the plugin's spec: true option like webpacker does:

{
  "plugins": ["transform-class-properties", { "spec": true }]
}

And the same class compiles to:

var A = function() {}
Object.defineProperty(A, "targets", { value: […] })

Thus bypassing our setter:
https://github.com/stimulusjs/stimulus/blob/1fcfa4f1567b9d918d9163c662dc67f364f3b296/packages/%40stimulus/core/src/controller.ts#L11-L14

In Babel 7, this is going to be the default behavior unless you use the loose: true option.

[dixpac]

Thinking out loud...is it possible to get target properties without specifying them explicitly inside the controller?

// src/controllers/hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  //static targets = [ "name" ]       without this line

  greet() {
    const element = this.nameTarget
    const name = element.value
    console.log(`Hello, ${name}!`)
  }
}

[javan]

@dixpac we could with Proxy, but it's unsupported in IE and can't be polyfilled.

[javan]

Possible solution to the Babel situation: c8e7696