bundle with ts decorators works fine with v0.17.19, not later

[mindon]

here's a ts example, which works fine with esbuild v0.17.19, but not any more with later esbuild v0.18.0 to v0.23.1

import { LitElement, html } from "https://cdn.skypack.dev/lit";
import { customElement, property } from "https://cdn.skypack.dev/lit/decorators";

@customElement("hello-world")
export class HelloWorld extends LitElement {

  @property({type: String})
  name = "";

  render() {
    return html`<p>Hello <strong>${this.name}</strong><p>`;
  }
}

the bundle js throw error Error: Unsupported decorator location: field

[hyrious]

I believe this was because esbuild 0.18.0 adds support for vanilla JavaScript decorators (different from the "experimental" one invented by TypeScript). You just need to add the tsconfig "experimentalDecorators": true to enable the old behavior.

---

On the other hand, lit/decorators seems do support the new behavior: https://lit.dev/docs/components/decorators/#decorator-versions. You just have to add the accessor modifier to enable that.

[mindon]

I believe this was because esbuild 0.18.0 adds support for vanilla JavaScript decorators (different from the "experimental" one invented by TypeScript). You just need to add the tsconfig "experimentalDecorators": true to enable the old behavior.

On the other hand, lit/decorators seems do support the new behavior: https://lit.dev/docs/components/decorators/#decorator-versions. You just have to add the accessor modifier to enable that.

"experimentalDecorators" is true, add the accessor modifier to make it works!

but here https://lit.dev/docs/components/properties/#accessors-custom it says

If your class does not define accessors for a property, Lit will generate them, even if a superclass has defined the property or accessors.