Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fast refresh without babel #278

Closed
4 tasks done
Artur- opened this issue Jan 15, 2024 · 3 comments
Closed
4 tasks done

Fast refresh without babel #278

Artur- opened this issue Jan 15, 2024 · 3 comments

Comments

@Artur-
Copy link

Artur- commented Jan 15, 2024

Description

For performance reasons, I would like to not use Babel at all but let esbuild handle everything while still having support for fast refresh. By looking at the code it seems like fast refresh is the only reason that babel is invoked by default.

As a side effect, this would avoid problems like the one mentioned in #266

Suggested solution

If I understand correctly, vite-plugin-react-swc has a pure JS implementation of react refresh. By integrating that into this repository, the babel plugin react-refresh/babel becomes unnecessary and babel can be skipped by default. Maybe there is a reason this cannot be done though?

Alternative

Using plugin-react-swc would be an alternative but has other drawbacks for existing (aka old aka legacy) projects, such as the requirement to have useDefineForClassFields: true and that writing custom plugins in Rust cumbersome to many compared to a few lines of JS

Additional context

No response

Validations

@Artur-
Copy link
Author

Artur- commented Jan 15, 2024

or is fast refresh actually implemented in swc core?

@ArnaudBarre
Copy link
Member

The philosophy of the projects:

  • If you need plugin in JS, you pay the cost a Babel, for now (SWC has support for JS plugins but it's incomplete and not guaranty to be performant if you hook into a lot o nodes)
  • If you need speed, use the SWC plugin (which uses a builtin implementation of Fast Refresh). If then you want to use it with legacy code, use a patch (see feat: enable custom transform vite-plugin-react-swc#178 (comment) for an explanation)
  • In an ideal world you could use esbuild already used by Vite: Add Fast Refresh support evanw/esbuild#3449 (I could update the PR to improve a few things, but I'm working on other things because of no feedback from the author)

@Artur-
Copy link
Author

Artur- commented Jan 16, 2024

Thanks for the info!

In our case we are trying to create a sensible configuration for our framework users which makes this a bit more tricky, as they might have a mix of old and new projects. What we really are trying to implement is a way for old projects to work and allow people to gradually migrate to (newer) standards.

The linked esbuild PR seems like exactly what we would be hoping for, let's see if that progresses.

@github-actions github-actions bot locked and limited conversation to collaborators Jan 31, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants