Fix await using declarations inside async generator functions

I forgot about the new await using declarations when implementing lowering for async generator functions in the previous release. This change fixes the transformation of await using declarations when they are inside lowered async generator functions:

// Original code
async function* foo() {
  await using x = await y
}

// Old output (with --supported:async-generator=false)
function foo() {
  return __asyncGenerator(this, null, function* () {
    await using x = yield new __await(y);
  });
}

// New output (with --supported:async-generator=false)
function foo() {
  return __asyncGenerator(this, null, function* () {
    var _stack = [];
    try {
      const x = __using(_stack, yield new __await(y), true);
    } catch (_) {
      var _error = _, _hasError = true;
    } finally {
      var _promise = __callDispose(_stack, _error, _hasError);
      _promise && (yield new __await(_promise));
    }
  });
}

Insert some prefixed CSS properties when appropriate (#3122)

With this release, esbuild will now insert prefixed CSS properties in certain cases when the target setting includes browsers that require a certain prefix. This is currently done for the following properties:

• appearance: *; => -webkit-appearance: *; -moz-appearance: *;
• backdrop-filter: *; => -webkit-backdrop-filter: *;
• background-clip: text => -webkit-background-clip: text;
• box-decoration-break: *; => -webkit-box-decoration-break: *;
• clip-path: *; => -webkit-clip-path: *;
• font-kerning: *; => -webkit-font-kerning: *;
• hyphens: *; => -webkit-hyphens: *;
• initial-letter: *; => -webkit-initial-letter: *;
• mask-image: *; => -webkit-mask-image: *;
• mask-origin: *; => -webkit-mask-origin: *;
• mask-position: *; => -webkit-mask-position: *;
• mask-repeat: *; => -webkit-mask-repeat: *;
• mask-size: *; => -webkit-mask-size: *;
• position: sticky; => position: -webkit-sticky;
• print-color-adjust: *; => -webkit-print-color-adjust: *;
• tab-size: *; => -moz-tab-size: *; -o-tab-size: *;
• text-decoration-color: *; => -webkit-text-decoration-color: *; -moz-text-decoration-color: *;
• text-decoration-line: *; => -webkit-text-decoration-line: *; -moz-text-decoration-line: *;
• text-decoration-skip: *; => -webkit-text-decoration-skip: *;
• text-emphasis-color: *; => -webkit-text-emphasis-color: *;
• text-emphasis-position: *; => -webkit-text-emphasis-position: *;
• text-emphasis-style: *; => -webkit-text-emphasis-style: *;
• text-orientation: *; => -webkit-text-orientation: *;
• text-size-adjust: *; => -webkit-text-size-adjust: *; -ms-text-size-adjust: *;
• user-select: *; => -webkit-user-select: *; -moz-user-select: *; -ms-user-select: *;

Here is an example:

/* Original code */
div {
  mask-image: url(x.png);
}

/* Old output (with --target=chrome99) */
div {
  mask-image: url(x.png);
}

/* New output (with --target=chrome99) */
div {
  -webkit-mask-image: url(x.png);
  mask-image: url(x.png);
}

Browser compatibility data was sourced from the tables on https://caniuse.com. Support for more CSS properties can be added in the future as appropriate.

Fix an obscure identifier minification bug (#2809)

Function declarations in nested scopes behave differently depending on whether or not "use strict" is present. To avoid generating code that behaves differently depending on whether strict mode is enabled or not, esbuild transforms nested function declarations into variable declarations. However, there was a bug where the generated variable name was not being recorded as declared internally, which meant that it wasn't being renamed correctly by the minifier and could cause a name collision. This bug has been fixed:

// Original code
const n = ''
for (let i of [0,1]) {
  function f () {}
}

// Old output (with --minify-identifiers --format=esm)
const f = "";
for (let o of [0, 1]) {
  let n = function() {
  };
  var f = n;
}

// New output (with --minify-identifiers --format=esm)
const f = "";
for (let o of [0, 1]) {
  let n = function() {
  };
  var t = n;
}

Fix a bug in esbuild's compatibility table script (#3179)

Setting esbuild's target to a specific JavaScript engine tells esbuild to use the JavaScript syntax feature compatibility data from https://kangax.github.io/compat-table/es6/ for that engine to determine which syntax features to allow. However, esbuild's script that builds this internal compatibility table had a bug that incorrectly ignores tests for engines that still have outstanding implementation bugs which were never fixed. This change fixes this bug with the script.

The only case where this changed the information in esbuild's internal compatibility table is that the hermes target is marked as no longer supporting destructuring. This is because there is a failing destructuring-related test for Hermes on https://kangax.github.io/compat-table/es6/. If you want to use destructuring with Hermes anyway, you can pass --supported:destructuring=true to esbuild to override the hermes target and force esbuild to accept this syntax.

This fix was contributed by @ArrayZoneYour.

Implement transforming async generator functions (#2780)

With this release, esbuild will now transform async generator functions into normal generator functions when the configured target environment doesn't support them. These functions behave similar to normal generator functions except that they use the Symbol.asyncIterator interface instead of the Symbol.iterator interface and the iteration methods return promises. Here's an example (helper functions are omitted):

// Original code
async function* foo() {
  yield Promise.resolve(1)
  await new Promise(r => setTimeout(r, 100))
  yield *[Promise.resolve(2)]
}
async function bar() {
  for await (const x of foo()) {
    console.log(x)
  }
}
bar()

// New output (with --target=es6)
function foo() {
  return __asyncGenerator(this, null, function* () {
    yield Promise.resolve(1);
    yield new __await(new Promise((r) => setTimeout(r, 100)));
    yield* __yieldStar([Promise.resolve(2)]);
  });
}
function bar() {
  return __async(this, null, function* () {
    try {
      for (var iter = __forAwait(foo()), more, temp, error; more = !(temp = yield iter.next()).done; more = false) {
        const x = temp.value;
        console.log(x);
      }
    } catch (temp) {
      error = [temp];
    } finally {
      try {
        more && (temp = iter.return) && (yield temp.call(iter));
      } finally {
        if (error)
          throw error[0];
      }
    }
  });
}
bar();

This is an older feature that was added to JavaScript in ES2018 but I didn't implement the transformation then because it's a rarely-used feature. Note that esbuild already added support for transforming for await loops (the other part of the asynchronous iteration proposal) a year ago, so support for asynchronous iteration should now be complete.

I have never used this feature myself and code that uses this feature is hard to come by, so this transformation has not yet been tested on real-world code. If you do write code that uses this feature, please let me know if esbuild's async generator transformation doesn't work with your code.

Implement auto accessors (#3009)

This release implements the new auto-accessor syntax from the upcoming JavaScript decorators proposal. The auto-accessor syntax looks like this:

class Foo {
  accessor foo;
  static accessor bar;
}
new Foo().foo = Foo.bar;

This syntax is not yet a part of JavaScript but it was added to TypeScript in version 4.9. More information about this feature can be found in microsoft/TypeScript#49705. Auto-accessors will be transformed if the target is set to something other than esnext:

// Output (with --target=esnext)
class Foo {
  accessor foo;
  static accessor bar;
}
new Foo().foo = Foo.bar;

// Output (with --target=es2022)
class Foo {
  #foo;
  get foo() {
    return this.#foo;
  }
  set foo(_) {
    this.#foo = _;
  }
  static #bar;
  static get bar() {
    return this.#bar;
  }
  static set bar(_) {
    this.#bar = _;
  }
}
new Foo().foo = Foo.bar;

// Output (with --target=es2021)
var _foo, _bar;
class Foo {
  constructor() {
    __privateAdd(this, _foo, void 0);
  }
  get foo() {
    return __privateGet(this, _foo);
  }
  set foo(_) {
    __privateSet(this, _foo, _);
  }
  static get bar() {
    return __privateGet(this, _bar);
  }
  static set bar(_) {
    __privateSet(this, _bar, _);
  }
}
_foo = new WeakMap();
_bar = new WeakMap();
__privateAdd(Foo, _bar, void 0);
new Foo().foo = Foo.bar;

You can also now use auto-accessors with esbuild's TypeScript experimental decorator transformation, which should behave the same as decorating the underlying getter/setter pair.

Please keep in mind that this syntax is not yet part of JavaScript. This release enables auto-accessors in .js files with the expectation that it will be a part of JavaScript soon. However, esbuild may change or remove this feature in the future if JavaScript ends up changing or removing this feature. Use this feature with caution for now.

Pass through JavaScript decorators (#104)

In this release, esbuild now parses decorators from the upcoming JavaScript decorators proposal and passes them through to the output unmodified (as long as the language target is set to esnext). Transforming JavaScript decorators to environments that don't support them has not been implemented yet. The only decorator transform that esbuild currently implements is still the TypeScript experimental decorator transform, which only works in .ts files and which requires "experimentalDecorators": true in your tsconfig.json file.

Static fields with assign semantics now use static blocks if possible

Setting useDefineForClassFields to false in TypeScript requires rewriting class fields to assignment statements. Previously this was done by removing the field from the class body and adding an assignment statement after the class declaration. However, this also caused any private fields to also be lowered by necessity (in case a field initializer uses a private symbol, either directly or indirectly). This release changes this transform to use an inline static block if it's supported, which avoids needing to lower private fields in this scenario:

// Original code
class Test {
  static #foo = 123
  static bar = this.#foo
}

// Old output (with useDefineForClassFields=false)
var _foo;
const _Test = class _Test {
};
_foo = new WeakMap();
__privateAdd(_Test, _foo, 123);
_Test.bar = __privateGet(_Test, _foo);
let Test = _Test;

// New output (with useDefineForClassFields=false)
class Test {
  static #foo = 123;
  static {
    this.bar = this.#foo;
  }
}

Fix TypeScript experimental decorators combined with --mangle-props (#3177)

Previously using TypeScript experimental decorators combined with the --mangle-props setting could result in a crash, as the experimental decorator transform was not expecting a mangled property as a class member. This release fixes the crash so you can now combine both of these features together safely.

Fix a panic due to empty static class blocks (#3161)

This release fixes a bug where an internal invariant that was introduced in the previous release was sometimes violated, which then caused a panic. It happened when bundling code containing an empty static class block with both minification and bundling enabled.