useDefineForClassFields in TS 3.7+ breaks class field decorators (@property, @query)

[mzeiher]

Description

new "useDefineForClassFields" feature in typesccript (which will be default in 3.8.0) breaks class field decorators

This is mainly a bug for visibility/reach, here is the corresponding bug entry in the typescript project:
microsoft/TypeScript#35081

Live Demo

Repository to reproduce:
https://github.com/mzeiher/litelement-decorator-ts-define-break

Steps to Reproduce

• yarn install
• yarn rollup -c
• npx http-static
• navigate to http://127.0.0.1:3333 -> property is beeing reflected, change detection triggers
• un-comment useDefineForClassFields in tsconfig.json
• yarn rollup -c
• navigate to http://127.0.0.1:3333 -> property is NOT being reflected, change detection does not trigger

Expected Results

change detection and reflection works with new [[Define]] TS semantic

Actual Results

TS [[Define]] breaks property augmentation by decorators. Babel works (they pass the propertyDescriptor of the class field into the decorator, TS just overwrites the property defined by the decorator)

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 11
• Safari 10
• IE 11

Versions

• lit-element: v2.2.1

[justinfagnani]

Thanks for bringing this up. I'll dig into it more.

cc @rictic

[sorvell]

Closing as dup of https://github.com/Polymer/lit-element/issues/1030.