Skip to content

Transform decorators to readable JS #1886

Closed
@aomarks

Description

@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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions