Decorator Transpilation

[kamal]

I'm trying out this package against an Ember Octane app. Looks like esbuild trips up on decorators with an error like error: Expected identifier but found "@"

The class definition itself looks like

import { inject as service } from '@ember/service';
import { Ability } from 'ember-can';

export default class extends Ability {
  @service state;
}

I saw that esbuild added initial support for Typescript decorators in 0.4.10 but I'm guessing it doesn't perform the transformation for ES6 files?

[alexlafroscia]

Huh! Good question -- I honestly have no idea 😅 I don't know much about esbuild honestly. Since this package uses 0.8.X of esbuild I would assume that if it should work, it would...

[alexlafroscia]

The only mention of decorators on their docs site refers to them like this:

TypeScript-only syntax extensions are supported, and are always converted to JavaScript (a non-exhaustive list):
Experimental decorators

So... I don't think that esbuild can handle decorators in JS files. TIL!

[alexlafroscia]

There might be some kind of way to trick/force esbuild to process the JS files as TS files and then do whatever it needs to with decorators... but I'm not sure if there are other impacts that that would also have.

[alexlafroscia]

I was hoping that the esbuild-plugin-babel package mentioned here would be a resolution to this, but I'm not sure that's going to be the answer here. I tried to use it, only to realize that plugins are only support for the build API that it provides, not the transform API.

We might be able to take the same approach, though, just running the Babel plugin on the code and then passing it along to esbuild but without that plugin being involved.

I'm not sure how much that ends up making sense, because now we just have Babel involved again... 🤷‍♂️