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

feat(gatsby): Support React 17's new JSX Transform #26652

Merged
merged 17 commits into from
Aug 28, 2020

Conversation

blainekasten
Copy link
Contributor

@blainekasten blainekasten commented Aug 27, 2020

Description

React has a new JSX transformation setup. See the blog post here.

Dan Abramov and Luna Ruan from the React core team reached out and asked if we could add support for it and that is what this PR does!

To test it out you can install gatsby@jsx-transform

From initial tests, if you have React 17 installed in your gatsby project, you are able to omit the classic import React from 'react' statement with this new transform. And if you use React 16, the old functionality of requiring that import is still in place.

Future:

  • Eventually this feature will be backported and most of this code will be removable and we can just set the babel option to runtime: automatic all the time

Documentation

This really shouldn't matter for the end user. It's just a code transformation optimization.

Related Issues

@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Aug 27, 2020
@gatsby-cloud
Copy link

gatsby-cloud bot commented Aug 27, 2020

Gatsby Cloud Build Report

using-reach-skip-nav

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 21s

Performance

Lighthouse report

Metric Score
Performance 💚 100
Accessibility 💚 100
Best Practices 💚 100
SEO 🔶 82

🔗 View full report

@gatsby-cloud
Copy link

gatsby-cloud bot commented Aug 27, 2020

Gatsby Cloud Build Report

client-only-paths

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 18s

Performance

Lighthouse report

Metric Score
Performance 💚 100
Accessibility 🔶 85
Best Practices 💚 100
SEO 🔶 70

🔗 View full report

@gatsby-cloud
Copy link

gatsby-cloud bot commented Aug 27, 2020

Gatsby Cloud Build Report

using-styled-components

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 20s

Performance

Lighthouse report

Metric Score
Performance 💚 100
Accessibility 💚 90
Best Practices 💚 100
SEO 💚 90

🔗 View full report

@gatsby-cloud
Copy link

gatsby-cloud bot commented Aug 27, 2020

Gatsby Cloud Build Report

gatsby

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 22m

@wardpeet wardpeet changed the title feat(gatsby) Support React 17's new JSX Transform feat(gatsby): Support React 17's new JSX Transform Aug 27, 2020
Copy link
Contributor

@wardpeet wardpeet left a comment

Choose a reason for hiding this comment

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

Cool, thanks Blaine! Left a few comments

packages/gatsby-cli/package.json Outdated Show resolved Hide resolved
packages/gatsby/src/utils/webpack-utils.ts Outdated Show resolved Hide resolved
packages/babel-preset-gatsby/src/index.js Outdated Show resolved Hide resolved
packages/gatsby/src/utils/webpack-utils.ts Outdated Show resolved Hide resolved
@wardpeet wardpeet added topic: frontend Relates to frontend issues (e.g. reach/router, gatsby-link, page-loading, asset-loading, navigation) status: awaiting author response Additional information has been requested from the author and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Aug 27, 2020
@blainekasten blainekasten removed the status: awaiting author response Additional information has been requested from the author label Aug 27, 2020
Copy link
Contributor

@wardpeet wardpeet left a comment

Choose a reason for hiding this comment

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

Neat! Nice work, I fixed some review things myself to get it merged.

@wardpeet wardpeet added the bot: merge on green Gatsbot will merge these PRs automatically when all tests passes label Aug 28, 2020
@gatsbybot gatsbybot merged commit 6ba68f8 into master Aug 28, 2020
@delete-merged-branch delete-merged-branch bot deleted the react/jsx-transform-v17 branch August 28, 2020 08:22
@marcobiedermann
Copy link
Contributor

Great work!
I just tested this in my Gatsby project using TypeScript but it looks like this feature is missing there: gatsby-plugin-typescript

@italodeandra
Copy link

@marcobiedermann I noticed the same thing.

@blainekasten Do you have any suggestion? We might be able to contribute.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bot: merge on green Gatsbot will merge these PRs automatically when all tests passes topic: frontend Relates to frontend issues (e.g. reach/router, gatsby-link, page-loading, asset-loading, navigation)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants