Add a test to make sure JSX fragment support won't be broken in the future

[frenzzy]

Looks like Hyperapp already support JSX Fragments, need to just add docs how to use them:

import { h, app } from 'hyperapp'
const Fragment = (_, children) => children

const view = () => (
  <main>
    <Fragment>
      <h1>A</h1>
      <h1>B</h1>
    </Fragment>
  </main>
)

app({}, {}, view, document.body)

console.log(document.body.innerHTML)
// => <main><h1>A</h1><h1>B</h1></main>

Demo: https://codepen.io/frenzzy/pen/WMZMVb?editors=0010

To use <></> syntax, use the following .babelrc config:

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", { "pragma": "h", "pragmaFrag": "Fragment" }]
  ]
}

and your view may look like this:

const view = () => (
  <main>
    <>
      <h1>A</h1>
      <h1>B</h1>
    </>
  </main>
)

After #591 we will be able to use fragments as a root node:

const view = () => (
  <>
    <h1>A</h1>
    <h1>B</h1>
  </>
)

refs:

• babel-plugin-transform-react-jsx#pragmaFrag
• Fragments in React.js

Closes #530

[codecov]

Codecov Report

Merging #596 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff          @@
##           master   #596   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           1      1           
  Lines         136    136           
  Branches       41     41           
=====================================
  Hits          136    136

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5ec9dc6...aacd5d2. Read the comment docs.

[jorgebucaran]

Fragments are about treating a tuple or array of elements/nodes as a single keyed item, this is just a clever way to fake it out. The big deal about fragments is, in my opinion, stuff like the following:

<Fragment key={key}><A/><B/></Fragment>

We may have this at some point in the future, but first I need to fix #499.

[sergey-shpak]

@frenzzy hey, looks like this approach doesn't work with lazy components
https://codepen.io/anon/pen/rKRxYd

[Swizz]

@sergey-shpak Lazy Components like the View root can't return an array. A root element is always required.

See #695

[sergey-shpak]

@Swizz thanks!