Add JSX Fragment syntax support #6552

clemmy · 2017-10-24T21:09:09Z

Q	A
Fixed Issues?	No
Patch: Bug Fix?	No
Major: Breaking Change?	No
Minor: New Feature?	Yes
Tests Added + Pass?	Yes
Documentation PR	Included
Any Dependency Changes?	No

This is the corresponding PR for babel/babylon#755 in order to support JSX fragment syntax (facebook/jsx#93).

hzoo · 2017-10-29T00:24:18Z

packages/babel-helper-builder-react-jsx/README.md

@@ -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


tagName: ? ^ too?

What exactly is compat again? If it's just in an older version of React maybe we should just drop it?

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)

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

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.

hzoo · 2017-10-29T00:25:04Z

packages/babel-helper-builder-react-jsx/src/index.js

+    exit(path, file) {
+      if (opts.compat) {
+        throw path.buildCodeFrameError(
+          "Fragment tags are only supported in React 16 and up.",


Should we do a peerDep on react @babel/react? (maybe for the preset)

I think Fragment name is also only exported in 16.1, even though it's technically supported in 16.0

What do you mean by a peerDep on react @babel/react?

I mean should @babel/preset-react have a peerDep on react or react-dom?

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.

Ah yeah they may just use the specific transform itself, not the preset

hzoo · 2017-10-29T00:26:31Z

packages/babel-plugin-transform-react-jsx/README.md

@@ -9,16 +9,16 @@
 **In**

 ```javascript
-var profile = <div>


So we are changing all the examples like this? May need to put somewhere that it's only in React 16, etc as well

Should I split it into a second example (showcasing fragments specifically and noting it's React 16)?

@clemmy yeah, let's split them up!

hzoo · 2017-10-29T00:28:57Z

packages/babel-generator/src/generators/jsx.js

@@ -92,3 +92,26 @@ export function JSXClosingElement(node: Object) {
 }

 export function JSXEmptyExpression() {}
+
+export function JSXFragment(node: Object) {


should have a test for printing too

Added printing test in this commit: eef5e94

Wondering why the test folders are prefixed with XJS instead of JSX. 🤔

funny, 😄 that used to be a thing, can ask the team - we should rename in another pr

https://github.com/facebook/jsx/pull/26/files

existentialism · 2017-10-30T14:16:14Z

@clemmy a rebase should get rid of the syntax-related errors since we updated Babylon in #6587

…gment

babel-bot · 2017-10-30T22:35:14Z

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/5556/

…eact-jsx

clemmy · 2017-11-02T02:46:26Z

@existentialism @hzoo @Kovensky Ready for review again. 🙂

Jessidhia · 2017-11-02T02:54:23Z

packages/babel-helper-builder-react-jsx/README.md

+    // function called with (state: ElementState) after building attribs
+  },
+
+  compat?: boolean // true if React is in compat mode


true if transforming in React < 0.12 compat mode?

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.

Jessidhia · 2017-11-02T02:56:06Z

packages/babel-plugin-transform-react-jsx/README.md

@@ -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


This probably just throws in React 15.4 🤔

Is that something to address in this PR?

Sorry, not really, was just thinking out loud 🤔

Jessidhia · 2017-11-02T03:47:04Z

packages/babel-plugin-transform-react-jsx/src/index.js

+      .split(".")
+      .map(name => t.identifier(name))
+      .reduce((object, property) => t.memberExpression(object, property));
+  };


This looks suspiciously like t.buildMatchMemberExpression

(we really need to document that in handbook 🤔)

Ah, nevermind, it's its inverse 😆

Jessidhia · 2017-11-02T03:59:45Z

packages/babel-types/README.md

@@ -1076,6 +1076,18 @@ Aliases: `JSX`, `Immutable`

 ---

+### jSXClosingFragment
+```javascript
+t.jSXClosingFragment()


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 😛

Separate issue 😛 , yeah whatever is doing that logic needs to handle TS/JSX..

existentialism

Great stuff @clemmy!

hzoo · 2017-11-03T14:37:45Z

packages/babel-generator/src/generators/jsx.js

+
+export function JSXFragment(node: Object) {
+  const open = node.openingFragment;
+  this.print(open, node);


Since open isn't used anywhere can inline (i'l fix it), same as closing

hzoo

amazing work, great first PR 😎

clemmy changed the title ~~Add jsx fragment syntax~~ Add JSX Fragment syntax support Oct 24, 2017

clemmy mentioned this pull request Oct 27, 2017

Add JSX fragment syntax support babel/babylon#755

Merged

hzoo mentioned this pull request Oct 28, 2017

Update to babylon v7 beta.30 #6587

Merged

hzoo reviewed Oct 29, 2017

View reviewed changes

existentialism added area: jsx PR: New Feature 🚀 A type of pull request used for our changelog categories labels Oct 30, 2017

Clement Hoang added 6 commits October 30, 2017 15:04

Add JSX Fragments to babel-types

bbf0de5

Support JSX fragments in the transform-react-jsx plugin

aad7721

Add tests JSX fragments

a9e52c5

Update helper-builder and transform plugin documentations for jsx fra…

c5b549a

…gment

Add generator for jsx fragments

18de9af

Add test for jsx fragment generator

eef5e94

clemmy force-pushed the add-jsx-fragment-syntax branch from 6519907 to eef5e94 Compare October 30, 2017 22:27

Clement Hoang added 2 commits October 30, 2017 16:11

Split jsx transform example into normal and fragment examples

8770a56

Remove unnecessary fields from ElementState in babel-helper-builder-r…

587649c

…eact-jsx

Jessidhia reviewed Nov 2, 2017

View reviewed changes

Jessidhia approved these changes Nov 2, 2017

View reviewed changes

existentialism approved these changes Nov 2, 2017

View reviewed changes

hzoo reviewed Nov 3, 2017

View reviewed changes

inline [skip ci]

b815338

hzoo approved these changes Nov 3, 2017

View reviewed changes

hzoo merged commit 1a7194a into babel:master Nov 3, 2017

clemmy mentioned this pull request Nov 12, 2017

Prefix XJS test directories with JSX instead #6801

Merged

sghoweri mentioned this pull request Jan 2, 2018

Upgrade Babel Config, Remove Plugins No Longer Needed boltdesignsystem/bolt#285

Closed

lock bot added the outdated A closed issue/PR that is archived due to age. Recommended to make a new issue label Oct 5, 2019

lock bot locked as resolved and limited conversation to collaborators Oct 5, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add JSX Fragment syntax support #6552

Add JSX Fragment syntax support #6552

clemmy commented Oct 24, 2017

hzoo Oct 29, 2017

hzoo Oct 29, 2017

Jessidhia Oct 29, 2017

Jessidhia Oct 29, 2017

clemmy Oct 30, 2017

hzoo Oct 29, 2017

Jessidhia Oct 29, 2017

clemmy Oct 29, 2017

hzoo Oct 29, 2017

clemmy Oct 30, 2017

hzoo Oct 30, 2017 •

edited

Loading

hzoo Oct 29, 2017

clemmy Oct 29, 2017

existentialism Oct 30, 2017

hzoo Oct 29, 2017

clemmy Oct 30, 2017

hzoo Oct 30, 2017 •

edited

Loading

existentialism commented Oct 30, 2017

babel-bot commented Oct 30, 2017 •

edited

Loading

clemmy commented Nov 2, 2017

Jessidhia Nov 2, 2017

clemmy Nov 2, 2017

Jessidhia Nov 2, 2017

clemmy Nov 2, 2017

Jessidhia Nov 2, 2017 •

edited

Loading

Jessidhia Nov 2, 2017

Jessidhia Nov 2, 2017

Jessidhia Nov 2, 2017

hzoo Nov 3, 2017

existentialism left a comment

hzoo Nov 3, 2017

hzoo left a comment

		@@ -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

Add JSX Fragment syntax support #6552

Add JSX Fragment syntax support #6552

Conversation

clemmy commented Oct 24, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hzoo Oct 30, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hzoo Oct 30, 2017 • edited Loading

Choose a reason for hiding this comment

existentialism commented Oct 30, 2017

babel-bot commented Oct 30, 2017 • edited Loading

clemmy commented Nov 2, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jessidhia Nov 2, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

existentialism left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hzoo left a comment

Choose a reason for hiding this comment

hzoo Oct 30, 2017 •

edited

Loading

hzoo Oct 30, 2017 •

edited

Loading

babel-bot commented Oct 30, 2017 •

edited

Loading

Jessidhia Nov 2, 2017 •

edited

Loading