Wrap non-JSX children by jSXContainer (#74)

So now we wrap all non-jsx statements by React.Fragment. Now the following code works well.

```jsx
pug`
  - console.log('Hello')
  p I'm sibling
`
```

Author: ezhlobo

src/__tests__/__snapshots__/react-fragment.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JavaScript output: transformed source code 1`] = `
+exports[`basic JavaScript output: transformed source code 1`] = `
 "module.exports = (
   <React.Fragment>
     <div />
@@ -10,11 +10,98 @@ exports[`JavaScript output: transformed source code 1`] = `
 "
 `;
 
-exports[`html output: generated html 1`] = `
+exports[`basic html output: generated html 1`] = `
 Array [
   <div />,
   <div />,
 ]
 `;
 
-exports[`static html output: static html 1`] = `"<div></div><div></div>"`;
+exports[`basic static html output: static html 1`] = `"<div></div><div></div>"`;
+
+exports[`with each JavaScript output: transformed source code 1`] = `
+"module.exports = (
+  <React.Fragment>
+    {((_pug_nodes, _pug_arr) => {
+      if (!(_pug_arr == null || Array.isArray(_pug_arr)))
+        throw new Error(
+          'Expected \\"[1, 2, 3]\\" to be an array because it is passed to each.'
+        );
+      if (_pug_arr == null || _pug_arr.length === 0) return undefined;
+
+      for (let _pug_index = 0; _pug_index < _pug_arr.length; _pug_index++) {
+        const item = _pug_arr[_pug_index];
+        _pug_nodes[_pug_nodes.length] = (
+          <div key={\\"pug\\" + item + \\":0\\"}>{item}</div>
+        );
+      }
+
+      return _pug_nodes;
+    })([], [1, 2, 3])}
+    <div>Next item</div>
+  </React.Fragment>
+);
+"
+`;
+
+exports[`with each html output: generated html 1`] = `
+Array [
+  <div>
+    1
+  </div>,
+  <div>
+    2
+  </div>,
+  <div>
+    3
+  </div>,
+  <div>
+    Next item
+  </div>,
+]
+`;
+
+exports[`with each static html output: static html 1`] = `"<div>1</div><div>2</div><div>3</div><div>Next item</div>"`;
+
+exports[`with if JavaScript output: transformed source code 1`] = `
+"module.exports = (
+  <React.Fragment>
+    {true ? <div key=\\"pug:0:0\\">Truthy</div> : undefined}
+    <div>Next item</div>
+  </React.Fragment>
+);
+"
+`;
+
+exports[`with if html output: generated html 1`] = `
+Array [
+  <div>
+    Truthy
+  </div>,
+  <div>
+    Next item
+  </div>,
+]
+`;
+
+exports[`with if static html output: static html 1`] = `"<div>Truthy</div><div>Next item</div>"`;
+
+exports[`with inline javascript JavaScript output: transformed source code 1`] = `
+"let _i;
+
+module.exports = (
+  <React.Fragment>
+    {((_i = 100), undefined)}
+    <div>{_i}</div>
+  </React.Fragment>
+);
+"
+`;
+
+exports[`with inline javascript html output: generated html 1`] = `
+<div>
+  100
+</div>
+`;
+
+exports[`with inline javascript static html output: static html 1`] = `"<div>100</div>"`;

src/__tests__/react-fragment-each.input.js

@@ -0,0 +1,7 @@
+module.exports = pug`
+  each item in [1, 2, 3]
+    div(key=item)
+      = item
+
+  div Next item
+`;

src/__tests__/react-fragment-if.input.js

@@ -0,0 +1,6 @@
+module.exports = pug`
+  if true
+    div Truthy
+
+  div Next item
+`;

src/__tests__/react-fragment-inline-js.input.js

@@ -0,0 +1,4 @@
+module.exports = pug`
+  - const i = 100
+  div= i
+`;

src/__tests__/react-fragment.test.js

@@ -1,3 +1,17 @@
 import testHelper from './test-helper';
 
-testHelper(__dirname + '/react-fragment.input.js');
+describe('with each', () => {
+  testHelper(__dirname + '/react-fragment-each.input.js');
+});
+
+describe('with if', () => {
+  testHelper(__dirname + '/react-fragment-if.input.js');
+});
+
+describe('with inline javascript', () => {
+  testHelper(__dirname + '/react-fragment-inline-js.input.js');
+});
+
+describe('basic', () => {
+  testHelper(__dirname + '/react-fragment.input.js');
+});

src/utils/jsx.js

@@ -20,12 +20,28 @@ export function buildJSXElement(
   return t.jSXElement(open, close, children, noChildren);
 }
 
+const isAllowedChild = item =>
+  [
+    'JSXText',
+    'JSXExpressionContainer',
+    'JSXSpreadChild',
+    'JSXElement',
+  ].includes(item.type);
+
 // TODO: This can be replaced when migrating to Babel 7 as JSXFragment
 // has been added in v7.0.0-beta.30.
-export function buildJSXFragment(children: JSXChildren): JSXElement {
+export function buildJSXFragment(children: Array<any>): JSXElement {
   const fragmentExpression = t.jSXMemberExpression(
     t.jSXIdentifier('React'),
     t.jSXIdentifier('Fragment'),
   );
-  return buildJSXElement(fragmentExpression, [], children);
+
+  const jSXChildren = children.map(item => {
+    if (!isAllowedChild(item)) {
+      return t.jSXExpressionContainer(item);
+    }
+    return item;
+  });
+
+  return buildJSXElement(fragmentExpression, [], jSXChildren);
 }