event decorator for components

[muratcorlu]

@event decorator implementation.

Usage:

class EventCustomNameComp extends LitElement {
  @event('bl-test') test: EventDispatcher<string>;

  render() {
    return html`<button
      @click=${() => this.test('test event')}
    ></button>`;
  }
}

With a custom event data type:

class MyFile {
  constructor(public file: string, public size: number) {}
}

class EventCustomTypeComp extends LitElement {
  @event() uploadDone: EventDispatcher<MyFile>;

  render() {
    const file = new MyFile('abc.js', 21312312);
    return html`<button
      @click=${() => this.uploadDone(file)}
    ></button>`;
  }
}

[muratcorlu]

I'm considering changing EventDispatcher as a simpler function instead of a class. So I'm holding this for now.

[muratcorlu]

I changed EventDispatcher as a function so triggering an event is not just calling this function. Outcomes of this work:

• Less crowded event dispatching in components.
• Easy to read and notice event definitions.
• Setting and documenting types of event data.
• We are able to write event descriptions inline like we can for properties.

Also currently Storybook show a wrong event definition in next branch like below:

This PR fixes this too.

I simplified how we document our properties in our component classes by moving description comments to top of every property. Like:

  /**
   * Adds help text
   */
  @property({ type: String, attribute: 'help-text' })
  helpText?: string;

  /**
   * Fires when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.
   */
  @event('bl-change') private onChange: EventDispatcher<string>;

@leventozen Please have a look again if this is still good.

[leventozen]

Great job!

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

100.0% Coverage
0.0% Duplication

[github-actions]

🎉 This PR is included in version 2.0.0-beta.13 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀