Lit-element: Make decorators work with new decorator spec

[justinfagnani]

Babel 7 has an implementation of the new spec. We should be able to make decorators detect how they're being called to work with either TypeScript or Babel 7.

[aadamsx]

Yes, Babel7!!

[HitkoDev]

While we're at it, could we add TypeScript decorator metadata support, so we wouldn't have to define property types twice?

[justinfagnani]

@HitkoDev unlikely for now, as Reflect.metadata isn't a maintained proposal, and the polyfill is quite large.

[HitkoDev]

I believe #8 would solve that problem, as it will remove decorators from the code hence no need for reflection polyfill to be included in the production build.

[abraham]

I've been working on a much smaller implementation of Reflect.metadata you could try for a polyfill.

https://github.com/abraham/reflection

[blikblum]

I evaluated the possible compilers setup to support LitElement property decorator.

The source code can be found here and the live examples here.

Basically the property decorator works with typescript but does not work with Babel 6 and Babel 7 (legacy). It can make work with Babel 7 (current spec) with a few modifications.

The reason to typescript work and babel 6 / babel 7 (legacy) not work, all based in same spec ,is that the former initializes the value using a direct assignment while babel uses a Object.defineProperty call.

[43081j]

Something worth noting that i seem to recall from last i investigated this, too, is that babel's output of a decorated property with a default value results in it producing a descriptor with value set (e.g. value: () => 'the default value').

This means the default value never triggers an initial render.

TypeScript produces a this.myProp = 'the default value' in the constructor which does trigger the usual lifecycle.

I may be wrong or this may have changed since then, but its what i ran into at the time and worth testing when someone tackles this.

[justinfagnani]

@43081j I worked around that in #422 by inducing a fake property with an initializer that sets the decorated property.

@littledan, you might be interested in the need to work around this. It turns out that an "initializer" as a class element isn't sufficient for us, because we still must return some element descriptor, so we still needed the fake property descriptor.

[littledan]

Yeah, we are adding a separate standalone initializer which doesn't bother defining a property, since that's a pretty common need. Took us some time to bikeshedding the name (maybe it will be {kind: "hook", start() {}}), but it got consensus at the last TC39 meeting (slides). Would that solve the problem for you?

[trusktr]

related: https://github.com/Polymer/lit-element/issues/234#issuecomment-689811322