Babel options for ESNext

[prajaybasu]

Babel does not allow top level await (unlike esbuild) by default.

As a Vite user, I don't really care about transpilation or support for older browsers, so I would like to use top level await. It seems like @babel/plugin-syntax-top-level-await is required to parse these properly.

For example, I would want this in index.tsx to compile without errors:

const MyFont = new FontFace("MyFont ", `url("MyFont.woff2")`);
document.fonts.add(MyFont);

await MyFont .load(); <--- babel fails here

The plugin just overrides a parser option so instead of a using dependency, the supportsTopLevelAwait option should either be set to true by default in the transform options (since it's Vite) or be exposed as an option for the vite plugin.

Also, Vite is ignoring the esm build and just using cjs - I think it's because of require instead of dynamic imports. Has dynamic imports been experimented with?

[amoutonbrady]

Hey @prajaybasu , sorry for the delayed answer.

This is interesting stuff that needs to seperate answers.

Regarding the first issue about top level await, this is an option I could see myself adding (or more generally, giving the opportunity to add your own config to babel and have them merged). I actually used to do that in the vite 1 plugin. I've never seen a use case for it and decided against it for the v2. You just gave a good one.

As per the second issue, I was wondering why vite would pick the CJS instead of the ESM build and mostly copied what Evan You (creator or Vite) has done for his own plugins. I'll experiment a bit with that and see if it changes anyhing.

Thanks for bringing it up to my attention!

[amoutonbrady]

After some investigations, it looks like top level await in ESBuild is a blocker for Vite and was only released in 0.10.0 which vite still didn't update to : evanw/esbuild#253 (comment) | https:/vitejs/vite/blob/main/packages/vite/package.json#L48.

I'll release a first version that supports custom babel options via a function or object, see if that can help you do what you trying to achieve. I couldn't do it locally.

[prajaybasu]

Thank you for the updates. I will check on top level await support when Vite adds support for it - Babel shouldn't be a blocker anymore.

[amoutonbrady]

@prajaybasu I just tested something I had left off for testing once Vite integrated esbuild 0.10 + and it looks like this totally works now! See the ./playground/index.tsx file. Here's what this code snippets logs:

const json = await fetch('https://jsonplaceholder.typicode.com/todos/1').then((response) =>
  response.json(),
);

console.log({ json });

// This should log Hello World
console.log(test);