Skip to content

fix(plugin-react): apply babel.plugins to project files only#5255

Merged
patak-cat merged 5 commits intovitejs:mainfrom
aleclarson:fix/react-1
Nov 9, 2021
Merged

fix(plugin-react): apply babel.plugins to project files only#5255
patak-cat merged 5 commits intovitejs:mainfrom
aleclarson:fix/react-1

Conversation

@aleclarson
Copy link
Copy Markdown
Contributor

@aleclarson aleclarson commented Oct 11, 2021

The idea here is to avoid parsing node_modules whenever possible, since that can be expensive in larger projects.

Here's the heuristic I'm using to skip parsing:

 const isNodeModules = id.includes('/node_modules/')
 const isProjectFile = id.startsWith(projectRoot + '/') && !isNodeModules
 const shouldSkip =
   !plugins.length &&
   !opts.babel?.configFile &&
   !(isProjectFile && opts.babel?.babelrc)

For global plugins, set babel.configFile to true and create a babel.config.js file in your project root.

Future

We could detect a babel.config.js file in your project root and enable babel.configFile option automatically.

// By reverse-compiling "React.createElement" calls into JSX,
// React elements provided by dependencies will also use the
// automatic runtime!
const [restoredAst, isCommonJS] = isNodeModules
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A slight difference in behavior here:

  • Linked packages will now have their React.createElement calls reverse-compiled into JSX, so they will also use the automatic JSX runtime.

@aleclarson aleclarson added the p2-nice-to-have Not breaking anything but nice to have (priority) label Oct 12, 2021
@benmccann
Copy link
Copy Markdown
Collaborator

Just a heads up - this one will need a rebase

@aleclarson aleclarson force-pushed the fix/react-1 branch 2 times, most recently from 1894895 to b4b69cf Compare November 8, 2021 15:55
const isJSX = extension.endsWith('x')
const isNodeModules = id.includes('/node_modules/')
const isProjectFile =
!isNodeModules && (id[0] === '\0' || id.startsWith(projectRoot + '/'))
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If a virtual module wants to avoid being transformed by Babel, it can include /node_modules/ in its module ID.

patak-cat
patak-cat previously approved these changes Nov 8, 2021
@patak-cat patak-cat added p4-important Violate documented behavior or significantly improves performance (priority) and removed p2-nice-to-have Not breaking anything but nice to have (priority) needs rebase labels Nov 8, 2021
Copy link
Copy Markdown
Contributor

@jplhomer jplhomer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Working well in Hydrogen! Thank you!

@patak-cat
Copy link
Copy Markdown
Member

Thanks for checking this out @jplhomer! Let's release a patch for vite 2.6 and plugin-react with these changes then

@patak-cat patak-cat merged commit 377d0be into vitejs:main Nov 9, 2021
aleclarson added a commit to aleclarson/vite that referenced this pull request Feb 3, 2022
@aleclarson aleclarson deleted the fix/react-1 branch February 25, 2022 20:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

p4-important Violate documented behavior or significantly improves performance (priority)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants