JSX refactor

[matthewp]

Changes

• Remove custom babel setup to support multiple JSX frameworks.
• Instead use each framework's own Vite plugins.
• To support multiple, new include/exclude objects lets you target only certain files.
• That's the only breaking change.

Testing

• We had an existing test fixture for this, so it's just updated.

Docs

• 3.0 migration guide

[changeset-bot]

🦋 Changeset detected

Latest commit: 7626af2

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[matthewp]

No longer added by default, only used by the mdx plugin.

[FredKSchott]

Amazing! This will be so huge for anyone building more complex interactive islands/SPAs with Astro!

What happens if a JSX file is unmatched/unclaimed by any integration? Is it possible that I could have one integration act as the "default"? This would map to a user who uses React for everything, except for a couple of Solid or Preact components that they have on the page.

// Example:
// src/components/preact/*.jsx (the special preact components)
// src/components/**/*.jsx     (the rest of your codebase)
export default defineConfig({
  integrations: [
    preact({include: 'src/components/preact/**/*.jsx'}),
    react(),
  ]
})

[matthewp]

I'm pretty sure this already works, if you don't use an include the Vite plugins don't filter anything out. So you need to put that integration last. I would expect your example to work as written. So i think this is a documentation thing.

[bluwy]

The example would work, but probably not ideal because the preact JSX file will be transformed twice by Preact and React plugins? It would be better to explicitly configure the includes.

[matthewp]

@bluwy You mean for the Preact plugin? The React pass will occur after the JSX is already compiled away. So it's just a noop. Is that what you mean?

Also, from my debugging, the React plugin (and possibly others) only run Babel when there's certain configuration to do so, otherwise it falls back to the esbuild plugin.

[bluwy]

Yeah it's the noop that I'm concerned, since there's still effort and perf cost there to process it.

[FredKSchott]

Cool, thanks for checking!

[matthewp]

This is ready for review. The lint error shown is wrong, eslint is drunk in CI (fine locally).

[natemoo-re]

Code looks great, super excited for this! Just a few small cleanup things.

[natemoo-re]

Any chance we can drop @babel/core if this is the only place we're using it?

[matthewp]

In favor of esbuild you mean?

[matthewp]

esbuild already runs. I'm not sure what implications there are if we remove this code to be honest.

[ematipico]

I think the issue is that we have this tagExportsPlugin that is probably built to use babel, and maybe we cannot convert it to an esbuild plugin. Maybe let's explore it in another PR

[natemoo-re]

Also could we add // eslint:disable @typescript-eslint/no-unused-vars to the astro/packages/astro/src/core/build/plugins/plugin-analyzer.ts:1:23 file to silence that lint error?

[matthewp]

I think I've addressed everything I can here, would appreciate another review when people are ready.

[bluwy]

Some minor nits, but looks good overall!