esbuild 0.14.30

v0.14.30

on Node.js NPM

Change the context of TypeScript parameter decorators (#2147)

While TypeScript parameter decorators are expressions, they are not evaluated where they exist in the code. They are moved to after the class declaration and evaluated there instead. Specifically this TypeScript code:

class Class {
  method(@decorator() arg) {}
}

becomes this JavaScript code:

class Class {
  method(arg) {}
}
__decorate([
  __param(0, decorator())
], Class.prototype, "method", null);

This has several consequences:

• Whether await is allowed inside a decorator expression or not depends on whether the class declaration itself is in an async context or not. With this release, you can now use await inside a decorator expression when the class declaration is either inside an async function or is at the top-level of an ES module and top-level await is supported. Note that the TypeScript compiler currently has a bug regarding this edge case: microsoft/TypeScript#48509.

  // Using "await" inside a decorator expression is now allowed
  async function fn(foo: Promise<any>) {
    class Class {
      method(@decorator(await foo) arg) {}
    }
    return Class
  }

  Also while TypeScript currently allows await to be used like this in async functions, it doesn't currently allow yield to be used like this in generator functions. It's not yet clear whether this behavior with yield is a bug or by design, so I haven't made any changes to esbuild's handling of yield inside decorator expressions in this release.

• Since the scope of a decorator expression is the scope enclosing the class declaration, they cannot access private identifiers. Previously this was incorrectly allowed but with this release, esbuild no longer allows this. Note that the TypeScript compiler currently has a bug regarding this edge case: microsoft/TypeScript#48515.

  // Using private names inside a decorator expression is no longer allowed
  class Class {
    static #priv = 123
    method(@decorator(Class.#priv) arg) {}
  }

• Since the scope of a decorator expression is the scope enclosing the class declaration, identifiers inside parameter decorator expressions should never be resolved to a parameter of the enclosing method. Previously this could happen, which was a bug with esbuild. This bug no longer happens in this release.

  // Name collisions now resolve to the outer name instead of the inner name
  let arg = 1
  class Class {
    method(@decorator(arg) arg = 2) {}
  }

  Specifically previous versions of esbuild generated the following incorrect JavaScript (notice the use of arg2):

  let arg = 1;
  class Class {
    method(arg2 = 2) {
    }
  }
  __decorateClass([
    __decorateParam(0, decorator(arg2))
  ], Class.prototype, "method", 1);

  This release now generates the following correct JavaScript (notice the use of arg):

  let arg = 1;
  class Class {
    method(arg2 = 2) {
    }
  }
  __decorateClass([
    __decorateParam(0, decorator(arg))
  ], Class.prototype, "method", 1);

Fix some obscure edge cases with super property access

This release fixes the following obscure problems with super when targeting an older JavaScript environment such as --target=es6:

1. The compiler could previously crash when a lowered async arrow function contained a class with a field initializer that used a super property access:

   let foo = async () => class extends Object {
     bar = super.toString
   }

2. The compiler could previously generate incorrect code when a lowered async method of a derived class contained a nested class with a computed class member involving a super property access on the derived class:

   class Base {
     foo() { return 'bar' }
   }
   class Derived extends Base {
     async foo() {
       return new class { [super.foo()] = 'success' }
     }
   }
   new Derived().foo().then(obj => console.log(obj.bar))

3. The compiler could previously generate incorrect code when a default-exported class contained a super property access inside a lowered static private class field:

   class Foo {
     static foo = 123
   }
   export default class extends Foo {
     static #foo = super.foo
     static bar = this.#foo
   }