Transform decorators to readable JS

[aomarks]

E.g. transform from:

@customElement('my-element');
class MyElement extends LitElement {
  @property()
  foo = 'bar';
}

to:

class MyElement extends LitElement {
  static get properties() {
    return {
      foo: {}
    }
  }

  constructor() {
    super();
    this.foo = 'bar';
  }
}
customElements.define('my-element', MyElement);

Why?

• For lit.dev, we'd like to have a global TS/JS switch (JavaScript docs with TS/JS switch lit.dev#332), and one of the obstacles for that is converting and maintaining every code example in both TS and JS. We can't just run tsc on the examples, because compiled decorator code is not human readable. With this transform, though, the majority of examples could be automatically converted and maintained going forward.

• We're also planning a transform that compiles to a more optimized form, e.g. where reactive property getter/setters are defined directly instead of by the lit runtime. Previously we had planned to write this transform to directly transform decorators, but if we have the intermediate transform described here, this second transform could instead consume readable javascript, which would then allow the optimized transform to work on code that was directly written with javascript too.