TS Decorator Support - Githubissues

e111077 commented 2 years ago

Heya, I see it's already documented as not working, but I'd like to still open an issue to request TS Decorator support to hopefully put it on the roadmap.

It's used quite often in Web Component-based libraries which have to use a JS class extend of HTMLElement.

Additionally, it's common to generate accessors in decorators on class fields, so also supporting useDefineForClassFields: "false" would be helpful as well.

Repro here:

bun add lit tslib
bun run dev

index.html

<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="./my-element.ts"></script>
  </head>
  <body>
    <my-element name="world"></my-element>
  </body>
</html>

my-element.ts

import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('my-element')
export class MyElement extends LitElement {
  @property({ type: String }) name = '';

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

tsconfig.json

{
  "compilerOptions": {
    "target": "es2022",
    "module": "es2022",
    "lib": ["es2020", "DOM", "DOM.Iterable"],
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "inlineSources": true,
    "outDir": ".",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "noImplicitOverride": true,
    "useDefineForClassFields": false
  },
  "include": ["**/*.ts"],
  "exclude": []
}

Jarred-Sumner commented 2 years ago

This isn't implemented yet, but it is necessary

Industrial commented 2 years ago

I also have need for decorators. Not in components but in the API side. I'm using https://typegraphql.com/.

Jarred-Sumner commented 1 year ago

@dylan-conway implemented this in #1445 and it will be available in Bun v0.2.3. To try it sooner, run this once the build completes:

bun upgrade --canary

e111077 commented 1 year ago

Wondering if this implementation will have consideration for the eventual migration to stage 3 decorators. I believe the TS team has a "way out" with the experimentalDecorators: false flag + target: 'es2023' (or whatever year) in tsconfig.json. AFAICT there is no way to toggle this in Bun, or if this has been discussed already on y'all's end

Jarred-Sumner commented 1 year ago

Wondering if this implementation will have consideration for the eventual migration to stage 3 decorators. I believe the TS team has a "way out" with the experimentalDecorators: false flag + target: 'es2023' (or whatever year) in tsconfig.json. AFAICT there is no way to toggle this in Bun, or if this has been discussed already on y'all's end

Bun will definitely support JS decorators in the future (likely before JSC implements it in the engine).

Right now TS decorators are only enabled if TypeScript is enabled. We could change that to follow the experimentalDecorators flag matching TypeScript's behavior. We do read tsconfg.json so it wouldn't be a huge thing. That being said, Bun wants to encourage a workflow where the developer doesn't need separate build & separate run steps. We might disable reading tsconfig.json for dependencies (it causes a few issues), which would break decorators support if decorators must be explicitly enabled.

I think we should visit this shortly before we implement JS decorators in Bun

alexmacarthur commented 5 months ago

I'm interested in using the stage 3 version as well. I haven't missed anything, have I? Is this still not possible in Bun?

oven-sh / bun

TS Decorator Support #303