Support transforming async generators like @babel/plugin-proposal-async-generator-functions does

[segevfiner]

It would be nice to be able to have esbuild transform async generators like the babel plugin @babel/plugin-proposal-async-generator-functions does when native async support is disabled, that is:

   esbuild: {
     supported: {
       "async-await": false,
     }
  }

Currently using async generator functions with async await disabled results in an error.

This is used as a stopgap by Angular's Zone.JS so they can track async generator functions as they have no way to track native async await in the browser ATM, so they rely on down transpiling them to generators.

See: https://github.com/angular/angular-cli/blob/67ffa8b40be04b0e671429063810fe5f52b2043a/packages/angular_devkit/build_angular/src/babel/presets/application.ts#L232-L239

If esbuild supported this natively, babel wouldn't be needed here.

[evanw]

It's interesting to hear that someone actually uses this feature for something. This JavaScript feature is so obscure that I haven't yet found any code that uses it, which is why I haven't implemented this transform yet.

I tried bundling the npm package zone.js with a target of es6 but it works fine, as that package doesn't appear to contain any async generator functions.

What is your use case for this feature? Can you provide an example of real published code that makes use of this feature?

[segevfiner]

The idea is that the zone will propagate across the async generator call, zone.js can't handle native async await because that's hard coded to use the native browser promise and it can't be monkey patched by it.

[evanw]

Is this just a hypothetical concern? Can you provide an example of production code that uses this language feature?

[segevfiner]

You can see an MWE of this here, checkout the main.ts file and the vite config.

[evanw]

You can see an MWE of this here, checkout the main.ts file and the vite config.

Did you mean to post a link? I'm not sure where "here" is, sorry.

[segevfiner]

You can see an MWE of this here, checkout the main.ts file and the vite config.

Did you mean to post a link? I'm not sure where "here" is, sorry.

Oops. Yeah, here is the link: https://stackblitz.com/edit/vitejs-vite-k5ghhm?file=src/main.ts

[segevfiner]

Also, you can see the hack used in angular cli to workaround this: https://github.com/angular/angular-cli/blob/67ffa8b40be04b0e671429063810fe5f52b2043a/packages/angular_devkit/build_angular/src/babel/presets/application.ts#L232-L239

[evanw]

It looks like you posted a link to some code you just wrote to demonstrate the feature instead of posting a link to real code. So I'm guessing that means that this is just a hypothetical concern. I can try to implement this at some point, but I should also say that the priority of this still seems low given the information in this thread.

[segevfiner]

Some real code would be Angular projects, the link I posted shows where angular-cli had to use Babel instead of just esbuild due to this.

The real code I tried using Zone.js in, is properitery, which is why I posted a MWE to show the issue instead.

I have actually been trying to use Zone.js to propagate async context for logging outside of Angular, with Vite & Vue instead, which is where I stumbled upon this issue. And Zone.js appears to be rather heavyweight so I'm not sure we will actually end up using it in the end. Priority is really up to you, this is just a feature request and there is a workaround using Babel.

Thanks for looking into this anyhow 👍

[hiebj]

For what it's worth, I just arrived here from a real-world use case. I was trying to switch from ts-loader to esbuild-loader to speed up my webpack build, but I use an async generator to create an asynchronous stream of progress outputs culminating in a response body during a file upload operation using XMLHttpRequest.

In many apps something like this would be achieved with the local Observable implementation, but this project does not currently use or need Observable for anything else, and async generators are a native language feature which accomplishes the same thing when combined with my view engine's reactive state in this case. I am generally resistant to library bloat and prefer to use language features as much as possible.

[axelthat]

withastro/astro#5870

I wanted to target older browser for my Astro project. Esbuild fails while trying to transform the generator functions @evanw.

[segevfiner]

Workaround for Vite users:

    // https://github.com/evanw/esbuild/issues/2780
    {
      ...babel({
        babelConfig: {
          babelrc: false,
          configFile: false,
          plugins: [
            "@babel/plugin-transform-async-to-generator",
            "@babel/plugin-proposal-async-generator-functions"
          ]
        },
        filter: /\.(?:jsx?|tsx?|vue)$/,
      }),
      enforce: "post",
    },

[fijiwebdesign]

I'm trying to bundle https://www.npmjs.com/package/streamx with a build.

esbuild errors on https://github.com/mafintosh/streamx/blob/49bf57d5b9833736b72a733e92958e0e41225f42/test/async-iterator.js#L84

bypass transforming async iterators?