Fix to remove initial/final whitespace inside root

Author: wooorm

index.js

@@ -3,6 +3,7 @@
 module.exports = toEstree
 
 var commas = require('comma-separated-tokens')
+var whitespace = require('hast-util-whitespace')
 var find = require('property-information/find')
 var hastToReact = require('property-information/hast-to-react.json')
 var html = require('property-information/html')
@@ -269,7 +270,29 @@ function mdxJsxElement(node, context) {
 }
 
 function root(node, context) {
-  return createJsxFragment(node, all(node, context))
+  var children = all(node, context)
+  var cleanChildren = []
+  var index = -1
+  var queue
+
+  // Remove surrounding whitespace nodes from the fragment.
+  while (++index < children.length) {
+    if (
+      children[index].type === 'JSXExpressionContainer' &&
+      children[index].expression.type === 'Literal' &&
+      whitespace(children[index].expression.value)
+    ) {
+      if (queue) {
+        queue.push(children[index])
+      }
+    } else {
+      push.apply(cleanChildren, queue)
+      cleanChildren.push(children[index])
+      queue = []
+    }
+  }
+
+  return createJsxFragment(node, cleanChildren)
 }
 
 function text(node) {

package.json

@@ -35,6 +35,7 @@
   ],
   "dependencies": {
     "comma-separated-tokens": "^1.0.0",
+    "hast-util-whitespace": "^1.0.0",
     "property-information": "^5.0.0",
     "space-separated-tokens": "^1.0.0",
     "style-to-object": "^0.3.0",

test.js

@@ -480,6 +480,25 @@ test('integration (babel)', function (t) {
     'should format a root'
   )
 
+  t.deepEqual(
+    generate(
+      toBabel(
+        toEstree({
+          type: 'root',
+          children: [
+            {type: 'text', value: ' '},
+            {type: 'text', value: 'x'},
+            {type: 'text', value: ' '},
+            {type: 'text', value: 'y'},
+            {type: 'text', value: ' '}
+          ]
+        })
+      )
+    ).code,
+    '<>{"x"}{" "}{"y"}</>;',
+    'should ignore initial and trailing whitespace in a root'
+  )
+
   t.deepEqual(
     generate(toBabel(toEstree(s('svg', {viewBox: '0 0 1 1'})))).code,
     '<svg viewBox="0 0 1 1" />;',
@@ -584,7 +603,7 @@ test('integration (micromark-extension-mdxjs, mdast-util-mdx)', function (t) {
     transform(
       'import x from "y"\nexport const name = "World"\n\n## Hello, {name}!'
     ),
-    'import x from "y";\nexport const name = "World";\n<>{"\\n"}<h2>{"Hello, "}{name}{"!"}</h2></>;',
+    'import x from "y";\nexport const name = "World";\n<><h2>{"Hello, "}{name}{"!"}</h2></>;',
     'should transform MDX.js ESM'
   )
 
@@ -599,7 +618,7 @@ test('integration (micromark-extension-mdxjs, mdast-util-mdx)', function (t) {
       'import x from "y"\nexport const name = "World"\n\n## Hello, {name}!',
       true
     ),
-    '<>{"\\n"}<h2>{"Hello, "}{}{"!"}</h2></>;',
+    '<><h2>{"Hello, "}{}{"!"}</h2></>;',
     'should transform ESM w/o estrees'
   )
 
@@ -697,7 +716,7 @@ test('integration (@babel/plugin-transform-react-jsx, react)', function (t) {
       'export const name = "World";',
       '',
       '/*#__PURE__*/',
-      'React.createElement(React.Fragment, null, "\\n", /*#__PURE__*/React.createElement("h2", null, "Hello, ", name, "!"));'
+      'React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h2", null, "Hello, ", name, "!"));'
     ].join('\n'),
     'should integrate w/ `@babel/plugin-transform-react-jsx` (MDX.js ESM)'
   )
@@ -800,7 +819,7 @@ test('integration (@vue/babel-plugin-jsx, Vue 3)', function (t) {
       'import x from "y";',
       'export const name = "World";',
       '',
-      '_createVNode(_Fragment, null, ["\\n", _createVNode("h2", null, ["Hello, ", name, "!"])]);'
+      '_createVNode(_Fragment, null, [_createVNode("h2", null, ["Hello, ", name, "!"])]);'
     ].join('\n'),
     'should integrate w/ `@vue/babel-plugin-jsx` (MDX.js ESM)'
   )