Set the lit-html event context to this and add a @eventOptions decorator

[justinfagnani]

Fixes #236 and #237

This lets users add methods as declarative event handlers without having to bind the method or use an arrow function. The decorator allows options to be set on the method for capture, passing and once.

class MyElement extends LitElement {
  render() {
    return html`<button @click=${this.onClick}>Click Me</button>`;
  }

  @eventOptions({capture: true})
  onClick(e) {
    console.log('clicked');
  }
}

This PR relies on lit/lit#531 and tests will fail till that is merged and released, though tests pass locally.

[justinfagnani]

cc @katejeffreys and @arthurevans for docs.

[kevinpschaaf]

Code LGTM, but:

• Consider README updates above
• Fix tslint error, confirm CI
• Add to CHANGELOG

[kevinpschaaf]

Worth mentioning (here or elsewhere) that listener is bound to element (since that's not standard lit-html)?

Also, worth showing a non-decorator pattern for options?

[aadamsx]

Please show/add as many explanations and examples as possible on things like this! :)

[justinfagnani]

The README is about to be replaced with real docs.... It already didn't say how to set up event handlers correctly, so I think this at least isn't any worse.

[thepassle]

Seconded (Edit: This was in reply to adams post in regard to examples/explanations)

[justinfagnani]

@kevinpschaaf PTAL.

I didn't update the README yet because honestly I'm not sure where to put it, the README's far too long already, and it's about to be replaced.

[justinfagnani]

Oh, you already approved @kevinpschaaf :)

[kevinpschaaf]

Hah, oh well. I was going to suggest to modify the "declarative rendering" section along these lines:

• event handler: html`<button @click="${this._clickHandler}"></button>`, where the value is either
  • a function (to be called with the element as context), or
  • an object with a handleEvent property (called with the element as context), and
  • in either case, any additional addEventListener options such as capture: true may be included on the function or object to control the event listener