ES decorator generated by ESBuild cannot be consumed by Babel

[ocavue]

Since currently ESBuild doesn't ES Stage-3 decorator yet, I'm trying to use @babel/plugin-proposal-decorators to process the decorator after ESBuild. However, I found a case that caused Babel to throw an error when processing the file from ESBuild. I'm not sure whether this is an ESBuild issue (i.e. ESBuild outputs invalid JavaScript file) or a Babel issue (i.e. Babel cannot handle some valid JavaScript syntax), but let me just post my case here so that we can discuss it.

I have created a minimal reproduction here: https://github.com/issueset/esbuild-19-3-decorator.

Step to reproduce:

git clone https://github.com/issueset/esbuild-19-3-decorator
cd esbuild-19-3-decorator
pnpm install 
cd packages/my-app
pnpm build

And you'll see the following error:

SyntaxError: /private/tmp/esbuild-19-3-decorator/packages/my-app/output-esbuild.cjs: Decorator arguments must be moved inside parentheses: use '@(decorator(args))' instead of '@(decorator)(args)'. (25:37)

  23 | module.exports = __toCommonJS(input_exports);
  24 | var import_my_lib = require("my-lib");
> 25 | @(0, import_my_lib.createMyDecorator)("PREFIX")

My source file (input.mjs) is shown below:

import { createMyDecorator, myDecorator } from "my-lib";

@createMyDecorator("PREFIX")
class MyClass1 {
  constructor() {}
}

@myDecorator
class MyClass2 {
  constructor() {}
}

ESBuild will transform it into:

var import_my_lib = require("my-lib");

@(0, import_my_lib.createMyDecorator)("PREFIX")
class MyClass1 {
  constructor() {
  }
}

@(import_my_lib.myDecorator)
class MyClass2 {
  constructor() {
  }
}

Babel doesn't like the @(0, import_my_lib.createMyDecorator) and throws the error. Also notice that Babel has no issue with another simpler line @(import_my_lib.myDecorator).

[ocavue]

@evanw Thank you for fixing this!

[whawker]

Thanks for looking into this! 😄 Just out of curiosity, do you know when the next esbuild release will be?