Skip to content

[chore] Use new JSX Transform #7419

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

Draft
wants to merge 4 commits into
base: bp6
Choose a base branch
from

Conversation

ggdouglas
Copy link
Contributor

@ggdouglas ggdouglas commented Mar 29, 2025

Proposed changes

React 17 introduced a new JSX transform that has the following benefits:

  • With the new transform, you can use JSX without importing React.
  • Depending on your setup, its compiled output may slightly improve the bundle size.
  • It will enable future improvements that reduce the number of concepts you need to learn React.

This change switches Blueprint to use the new transform since it is now on React 18.

How was this PR created?

This change was made by first running update-react-imports from react-codemod. This transformed an initial set of files. The remainder of components that were not processed were edited manually through find and replace.

References:

@ggdouglas ggdouglas changed the title Use new JSX Transform [chore] Use new JSX Transform Mar 29, 2025
@svc-palantir-github
Copy link

Manually port other components not covered in codemod

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@ggdouglas ggdouglas force-pushed the gdouglas/jsx-update-react-imports branch from 3a932db to cacdb2c Compare March 29, 2025 01:46
@svc-palantir-github
Copy link

Manually port other components not covered in codemod

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@@ -1,7 +1,7 @@
{
"extends": "./tsconfig.base",
"compilerOptions": {
"jsx": "react",
"jsx": "react-jsx",
Copy link
Contributor Author

@ggdouglas ggdouglas Mar 31, 2025

Choose a reason for hiding this comment

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

@@ -179,7 +177,7 @@ export default {
legacyDecorator: true,
react: {
refresh: !IS_PRODUCTION,
runtime: "classic",
runtime: "automatic",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Setting this to "automatic" uses the new JSX runtime module

https://swc.rs/docs/configuration/compilation#jsctransformreactruntime

Use runtime: automatic to use a JSX runtime module (e.g. react/jsx-runtime introduced in React 17).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants