Lit-element: Add TypeScript decorators

[justinfagnani]

Decorators similar to those in https://github.com/Polymer/polymer-decorators should work well with this base class. They can transform fields into accessors as described in #6.

[kenchris]

Do you mind if I take this one?

[justinfagnani]

@kenchris sounds great!

[sorvell]

@kenchris still interested in tackling this?

[kenchris]

Yeah, sure

[justinfagnani]

I have some decorators adapted from the Polymer 2 decorators here: https://stackblitz.com/edit/lit-element-typescript

[pshihn]

I know you guys are working on this. If it's any help, I have most of this in a base class (extended from LitElement) - I've been using in some projects. I was using it often enough to carve it out into a separate package: https://github.com/pshihn/alit-element

It doesn't match the exact spec of polymer's decorators, but is very close:

@element('alit-card')
export class AlitCard extends AlitElement {
  @property() name?: string;
  @property() age: number = 30;
  @property() description: string = 'This is the default description';

  @query('.card')
  card?: HTMLDivElement;

  @listen('click', '#toggleButton')
  toggleBorder() {
    this.borderShowing = !this.borderShowing;
    this.card.style.border = this.borderShowing ? '2px solid' : 'none';
  }

  @observe('age', 'description')
  ageChanged(records: ChangeRecord[]) {
    // do stuff when age or description changes
  }
}

Decorator source

[kenchris]

@property has been added in the latest API refactor - I don't know if we want to add more for now @sorvell ?

[MaKleSoft]

I've been using a customized version of @pshihn's decorators and I have to say, I find the @listen and @query decorators tremendously helpful, @listen because it removes a lot of boilerplate and @query because it allows for type safety when used with Typescript. @element and @observe, while not as important for me personally, do have their uses as well. Overall, these decorators along with a couple of helper functions have made my code a lot cleaner and more readable. Maybe these don't need to be part of the core but I do recommend fully embracing decorators since they simply make for a much more pleasant dev experience.

[aadamsx]

@property has been added in the latest API refactor

That's great @kenchris, is Babel7 support on the horizon too? I ran into an issue with Bable7 and decorators here: https://github.com/Polymer/lit-html/issues/478#issuecomment-419746818

[aadamsx]

I don't know if we want to add more [decorators]

Also, @kenchris which decorators are being considered? Will they be close to what @pshihn has posted above? This syntax looks great by the way.

[Christian24]

@aadamsx As I see it now the following decorators are currently available:

• @customElement
• @property
• @query
• @queryAll
• @eventOptions

However, I would love to see @listen too. @kenchris what do you think? Would you be open to a pull request?

[sorvell]

Closing this as a set of decorators has been added. We'll accept separate, new issues for discussion of any new decorators.