Skip to content

Commit

Permalink
Babel Transform JSX to React.jsx/React.jsxDEV Plugin (#16432)
Browse files Browse the repository at this point in the history
This babel transform is a fork of the @babel/plugin-transform-react-jsx transform and is for experimentation purposes only. We don't plan to own this code in the future, and we will upstream this to Babel at some point once we've proven out the concept.

As per the RFC to simplify element creation, we want to change the JSX transform from targeting React.createElement(type, props, children) to React.jsx(type, props, key). This modifies the existing @babel/plugin-transform-react-jsx (and helper) babel plugin to support React.jsx and React.jsxDEV.

The main differences between React.jsx/React.jsxDEV and React.createElement are:
1.) key is now passed as an explicit argument rather than through props
3.) children are now passed through props rather than as an explicit argument
4.) props must always be an object
5.) __source and and __self are now passed as separate arguments into React.jsxDEV rather than through props

Part of the rationale for this change is that we want to deprecate key spread through props because this is an expensive dynamic comparison operation. We want users instead always explicitly pass key as a prop. However, in the interim, we need a way to distinguish between <div {...props} key={foo} /> and <div key={foo} {...props} />. Therefore, until we completely deprecate key spreading, we will use React.createElement to transform <div {...props} key="Hi" /> and React.jsx to transform everything else.
  • Loading branch information
lunaruan authored Aug 27, 2019
1 parent cb15f18 commit f512537
Show file tree
Hide file tree
Showing 13 changed files with 2,162 additions and 19 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"packages/*"
],
"devDependencies": {
"@babel/plugin-syntax-jsx": "^7.2.0",
"@babel/cli": "^7.0.0",
"@babel/code-frame": "^7.0.0",
"@babel/core": "^7.0.0",
Expand Down
5 changes: 5 additions & 0 deletions packages/babel-plugin-react-jsx/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
This package is intended to eventually replace the current `@babel/plugin-transform-react-jsx`, changing the JSX transform from targeting `React.createElement(type, props, children)` to `React.jsx(types, props, key)`.

https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md

**This is experimental and not intended to be used directly.**
Loading

0 comments on commit f512537

Please sign in to comment.