0.20.0

This release deliberately contains backwards-incompatible changes. To avoid automatically picking up releases like this, you should either be pinning the exact version of esbuild in your package.json file (recommended) or be using a version range syntax that only accepts patch upgrades such as ^0.19.0 or ~0.19.0. See npm's documentation about semver for more information.

This time there is only one breaking change, and it only matters for people using Deno. Deno tests that use esbuild will now fail unless you make the change described below.

• Work around API deprecations in Deno 1.40.x (#3609, #3611)

  Deno 1.40.0 was just released and introduced run-time warnings about certain APIs that esbuild uses. With this release, esbuild will work around these run-time warnings by using newer APIs if they are present and falling back to the original APIs otherwise. This should avoid the warnings without breaking compatibility with older versions of Deno.

  Unfortunately, doing this introduces a breaking change. The newer child process APIs lack a way to synchronously terminate esbuild's child process, so calling esbuild.stop() from within a Deno test is no longer sufficient to prevent Deno from failing a test that uses esbuild's API (Deno fails tests that create a child process without killing it before the test ends). To work around this, esbuild's stop() function has been changed to return a promise, and you now have to change esbuild.stop() to await esbuild.stop() in all of your Deno tests.

• Reorder implicit file extensions within node_modules (#3341, #3608)

  In version 0.18.0, esbuild changed the behavior of implicit file extensions within node_modules directories (i.e. in published packages) to prefer .js over .ts even when the --resolve-extensions= order prefers .ts over .js (which it does by default). However, doing that also accidentally made esbuild prefer .css over .ts, which caused problems for people that published packages containing both TypeScript and CSS in files with the same name.

  With this release, esbuild will reorder TypeScript file extensions immediately after the last JavaScript file extensions in the implicit file extension order instead of putting them at the end of the order. Specifically the default implicit file extension order is .tsx,.ts,.jsx,.js,.css,.json which used to become .jsx,.js,.css,.json,.tsx,.ts in node_modules directories. With this release it will now become .jsx,.js,.tsx,.ts,.css,.json instead.

  Why even rewrite the implicit file extension order at all? One reason is because the .js file is more likely to behave correctly than the .ts file. The behavior of the .ts file may depend on tsconfig.json and the tsconfig.json file may not even be published, or may use extends to refer to a base tsconfig.json file that wasn't published. People can get into this situation when they forget to add all .ts files to their .npmignore file before publishing to npm. Picking .js over .ts helps make it more likely that resulting bundle will behave correctly.

0.19.12

• The "preserve" JSX mode now preserves JSX text verbatim (#3605)

  The JSX specification deliberately doesn't specify how JSX text is supposed to be interpreted and there is no canonical way to interpret JSX text. Two most popular interpretations are Babel and TypeScript. Yes they are different (esbuild deliberately follows TypeScript by the way).

  Previously esbuild normalized text to the TypeScript interpretation when the "preserve" JSX mode is active. However, "preserve" should arguably reproduce the original JSX text verbatim so that whatever JSX transform runs after esbuild is free to interpret it however it wants. So with this release, esbuild will now pass JSX text through unmodified:

  // Original code
  let el =
    <a href={'/'} title='&apos;&quot;'> some text
      {foo}
        more text </a>
  
  // Old output (with --loader=jsx --jsx=preserve)
  let el = <a href="/" title={`'"`}>
    {" some text"}
    {foo}
    {"more text "}
  </a>;
  
  // New output (with --loader=jsx --jsx=preserve)
  let el = <a href={"/"} title='&apos;&quot;'> some text
      {foo}
        more text </a>;
  

• Allow JSX elements as JSX attribute values

  JSX has an obscure feature where you can use JSX elements in attribute position without surrounding them with {...}. It looks like this:

  let el = <div data-ab=<><a/><b/></>/>;
  

  I think I originally didn't implement it even though it's part of the JSX specification because it previously didn't work in TypeScript (and potentially also in Babel?). However, support for it was silently added in TypeScript 4.8 without me noticing and Babel has also since fixed their bugs regarding this feature. So I'm adding it to esbuild too now that I know it's widely supported.

  Keep in mind that there is some ongoing discussion about removing this feature from JSX. I agree that the syntax seems out of place (it does away with the elegance of "JSX is basically just XML with {...} escapes" for something arguably harder to read, which doesn't seem like a good trade-off), but it's in the specification and TypeScript and Babel both implement it so I'm going to have esbuild implement it too. However, I reserve the right to remove it from esbuild if it's ever removed from the specification in the future. So use it with caution.

• Fix a bug with TypeScript type parsing (#3574)

  This release fixes a bug with esbuild's TypeScript parser where a conditional type containing a union type that ends with an infer type that ends with a constraint could fail to parse. This was caused by the "don't parse a conditional type" flag not getting passed through the union type parser. Here's an example of valid TypeScript code that previously failed to parse correctly:

  type InferUnion<T> = T extends { a: infer U extends number } | infer U extends number ? U : never
  

0.19.7

• Add support for bundling code that uses import attributes (#3384)

  JavaScript is gaining new syntax for associating a map of string key-value pairs with individual ESM imports. The proposal is still a work in progress and is still undergoing significant changes before being finalized. However, the first iteration has already been shipping in Chromium-based browsers for a while, and the second iteration has landed in V8 and is now shipping in node, so it makes sense for esbuild to support it. Here are the two major iterations of this proposal (so far):

  1. Import assertions (deprecated, will not be standardized)

     • Uses the assert keyword
     • Does not affect module resolution
     • Causes an error if the assertion fails
     • Shipping in Chrome 91+ (and in esbuild 0.11.22+)

  2. Import attributes (currently set to become standardized)

     • Uses the with keyword
     • Affects module resolution
     • Unknown attributes cause an error
     • Shipping in node 21+

  You can already use esbuild to bundle code that uses import assertions (the first iteration). However, this feature is mostly useless for bundlers because import assertions are not allowed to affect module resolution. It's basically only useful as an annotation on external imports, which esbuild will then preserve in the output for use in a browser (which would otherwise refuse to load certain imports).

  With this release, esbuild now supports bundling code that uses import attributes (the second iteration). This is much more useful for bundlers because they are allowed to affect module resolution, which means the key-value pairs can be provided to plugins. Here's an example, which uses esbuild's built-in support for the upcoming JSON module standard:

  // On static imports
  import foo from './package.json' with { type: 'json' }
  console.log(foo)
  
  // On dynamic imports
  const bar = await import('./package.json', { with: { type: 'json' } })
  console.log(bar)
  

  One important consequence of the change in semantics between import assertions and import attributes is that two imports with identical paths but different import attributes are now considered to be different modules. This is because the import attributes are provided to the loader, which might then use those attributes during loading. For example, you could imagine an image loader that produces an image of a different size depending on the import attributes.

  Import attributes are now reported in the metafile and are now provided to on-load plugins as a map in the with property. For example, here's an esbuild plugin that turns all imports with a type import attribute equal to 'cheese' into a module that exports the cheese emoji:

  const cheesePlugin = {
    name: 'cheese',
    setup(build) {
      build.onLoad({ filter: /.*/ }, args => {
        if (args.with.type === 'cheese') return {
          contents: `export default "🧀"`,
        }
      })
    }
  }
  
  require('esbuild').build({
    bundle: true,
    write: false,
    stdin: {
      contents: `
        import foo from 'data:text/javascript,' with { type: 'cheese' }
        console.log(foo)
      `,
    },
    plugins: [cheesePlugin],
  }).then(result => {
    const code = new Function(result.outputFiles[0].text)
    code()
  })
  

  Warning: It's possible that the second iteration of this feature may change significantly again even though it's already shipping in real JavaScript VMs (since it has already happened once before). In that case, esbuild may end up adjusting its implementation to match the eventual standard behavior. So keep in mind that by using this, you are using an unstable upcoming JavaScript feature that may undergo breaking changes in the future.

• Adjust TypeScript experimental decorator behavior (#3230, #3326, #3394)

  With this release, esbuild will now allow TypeScript experimental decorators to access both static class properties and #private class names. For example:

  const check =
    <T,>(a: T, b: T): PropertyDecorator =>
      () => console.log(a === b)
  
  async function test() {
    class Foo {
      static #foo = 1
      static bar = 1 + Foo.#foo
      @check(Foo.#foo, 1) a: any
      @check(Foo.bar, await Promise.resolve(2)) b: any
    }
  }
  
  test().then(() => console.log('pass'))
  

  This will now print true true pass when compiled by esbuild. Previously esbuild evaluated TypeScript decorators outside of the class body, so it didn't allow decorators to access Foo or #foo. Now esbuild does something different, although it's hard to concisely explain exactly what esbuild is doing now (see the background section below for more information).

  Note that TypeScript's experimental decorator support is currently buggy: TypeScript's compiler passes this test if only the first @check is present or if only the second @check is present, but TypeScript's compiler fails this test if both checks are present together. I haven't changed esbuild to match TypeScript's behavior exactly here because I'm waiting for TypeScript to fix these bugs instead.

  Some background: TypeScript experimental decorators don't have consistent semantics regarding the context that the decorators are evaluated in. For example, TypeScript will let you use await within a decorator, which implies that the decorator runs outside the class body (since await isn't supported inside a class body), but TypeScript will also let you use #private names, which implies that the decorator runs inside the class body (since #private names are only supported inside a class body). The value of this in a decorator is also buggy (the run-time value of this changes if any decorator in the class uses a #private name but the type of this doesn't change, leading to the type checker no longer matching reality). These inconsistent semantics make it hard for esbuild to implement this feature as decorator evaluation happens in some superposition of both inside and outside the class body that is particular to the internal implementation details of the TypeScript compiler.

• Forbid --keep-names when targeting old browsers (#3477)

  The --keep-names setting needs to be able to assign to the name property on functions and classes. However, before ES6 this property was non-configurable, and attempting to assign to it would throw an error. So with this release, esbuild will no longer allow you to enable this setting while also targeting a really old browser.

0.19.4

• Fix printing of JavaScript decorators in tricky cases (#3396)

  This release fixes some bugs where esbuild's pretty-printing of JavaScript decorators could incorrectly produced code with a syntax error. The problem happened because esbuild sometimes substitutes identifiers for other expressions in the pretty-printer itself, but the decision about whether to wrap the expression or not didn't account for this. Here are some examples:

  // Original code
  import { constant } from './constants.js'
  import { imported } from 'external'
  import { undef } from './empty.js'
  class Foo {
    @constant()
    @imported()
    @undef()
    foo
  }
  
  // Old output (with --bundle --format=cjs --packages=external --minify-syntax)
  var import_external = require("external");
  var Foo = class {
    @123()
    @(0, import_external.imported)()
    @(void 0)()
    foo;
  };
  
  // New output (with --bundle --format=cjs --packages=external --minify-syntax)
  var import_external = require("external");
  var Foo = class {
    @(123())
    @((0, import_external.imported)())
    @((void 0)())
    foo;
  };
  

• Allow pre-release versions to be passed to target (#3388)

  People want to be able to pass version numbers for unreleased versions of node (which have extra stuff after the version numbers) to esbuild's target setting and have esbuild do something reasonable with them. These version strings are of course not present in esbuild's internal feature compatibility table because an unreleased version has not been released yet (by definition). With this release, esbuild will now attempt to accept these version strings passed to target and do something reasonable with them.