-
-
Notifications
You must be signed in to change notification settings - Fork 5.6k
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
Add JSX Fragment syntax support #6552
Conversation
@@ -10,6 +10,7 @@ type ElementState = { | |||
call?: Object; // optional call property that can be set to override the call expression returned | |||
pre?: Function; // function called with (state: ElementState) before building attribs | |||
post?: Function; // function called with (state: ElementState) after building attribs | |||
compat?: boolean // true if React is in compat mode |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
tagName: ? ^ too?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What exactly is compat
again? If it's just in an older version of React maybe we should just drop it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
compat
is probably a bad name but it's an all lowercase tag name (it's how you write DOM tags in ReactDOM)
The check itself is !!tagName && /^[a-z]|-/.test(tagName)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, wait, this is actually unrelated to isCompatTag
; it's for the react-jsx-compat
transform 🤔
Turn JSX into React Pre-0.12 function calls
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm 👍 for dropping the compat
option. Re-visiting the README, I'm unsure of why pre
, post
, and compat
are inside the ElementState
type. These 3 are keys that should appear in options (which aren't typed). I'll reflect the changes in a commit.
exit(path, file) { | ||
if (opts.compat) { | ||
throw path.buildCodeFrameError( | ||
"Fragment tags are only supported in React 16 and up.", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we do a peerDep on react @babel/react? (maybe for the preset)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think Fragment
name is also only exported in 16.1
, even though it's technically supported in 16.0
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What do you mean by a peerDep on react @babel/react?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I mean should @babel/preset-react
have a peerDep on react or react-dom
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmm, good question. Would non-React library authors use @babel/preset-react
? It seems like enabling @babel/preset-react
and providing pragmas allows Babel to compile to alternative JSX rendering libraries.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah yeah they may just use the specific transform itself, not the preset
@@ -9,16 +9,16 @@ | |||
**In** | |||
|
|||
```javascript | |||
var profile = <div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So we are changing all the examples like this? May need to put somewhere that it's only in React 16, etc as well
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should I split it into a second example (showcasing fragments specifically and noting it's React 16)?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@clemmy yeah, let's split them up!
@@ -92,3 +92,26 @@ export function JSXClosingElement(node: Object) { | |||
} | |||
|
|||
export function JSXEmptyExpression() {} | |||
|
|||
export function JSXFragment(node: Object) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should have a test for printing too
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added printing test in this commit: eef5e94
Wondering why the test folders are prefixed with XJS instead of JSX. 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
funny, 😄 that used to be a thing, can ask the team - we should rename in another pr
6519907
to
eef5e94
Compare
Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/5556/ |
@existentialism @hzoo @Kovensky Ready for review again. 🙂 |
// function called with (state: ElementState) after building attribs | ||
}, | ||
|
||
compat?: boolean // true if React is in compat mode |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
true if transforming in React < 0.12 compat mode
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Correct. IIRC, I just stuck this in there so it would throw an error if you're trying to use fragments with the plugin-transform-react-jsx-compat
transform.
@@ -109,6 +174,12 @@ Replace the function used when compiling JSX expressions. | |||
|
|||
Note that the `@jsx React.DOM` pragma has been deprecated as of React v0.12 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This probably just throws in React 15.4 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is that something to address in this PR?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry, not really, was just thinking out loud 🤔
.split(".") | ||
.map(name => t.identifier(name)) | ||
.reduce((object, property) => t.memberExpression(object, property)); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks suspiciously like t.buildMatchMemberExpression
(we really need to document that in handbook 🤔)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, nevermind, it's its inverse 😆
@@ -1076,6 +1076,18 @@ Aliases: `JSX`, `Immutable` | |||
|
|||
--- | |||
|
|||
### jSXClosingFragment | |||
```javascript | |||
t.jSXClosingFragment() |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd actually prefer to name them jsxClosingFragment
, jsxElement
, etc, but the pre-existing stuff is already using the weird "SX" prefix so can't help it 😛
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Separate issue 😛 , yeah whatever is doing that logic needs to handle TS/JSX..
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great stuff @clemmy!
|
||
export function JSXFragment(node: Object) { | ||
const open = node.openingFragment; | ||
this.print(open, node); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since open
isn't used anywhere can inline (i'l fix it), same as closing
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
amazing work, great first PR 😎
This is the corresponding PR for babel/babylon#755 in order to support JSX fragment syntax (facebook/jsx#93).