Fragment node type to support <></> JSX syntax?

const view = <>
  <h1>{state.count}</h1>
  <button onclick={actions.down}>-</button>
  <button onclick={actions.up}>+</button>
</>

to avoid writing commas in jsx:

const view = [
  <h1>{state.count}</h1>,
  <button onclick={actions.down}>-</button>,
  <button onclick={actions.up}>+</button>,
];

refs:

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

by the way, returning an array of elements from root view leads to <undefined></undefined> in DOM but nested views are rendered as expected

[leeoniya]

i can’t get what’s the problem to just wrap it in sum tag, say <div>

the real problem is not clutter, but allowing isolated (redraw-optimized) components to consist of siblings where the DOM does not allow for arbitary <div> insertion. e.g. you can’t wrap several <tr> or <li> elements in a <div>. similarly, the way flexbox works relies on direct children of flex container elements, so one cannot easily wrap them because it prevents proper grouping/wrapping.

without fragment support, rather than redrawing several adjacent <tr>s in a large recordset, you have to redraw/diff the entire tbody or table.

[jorgebucaran]

Hyperapp already supports returning arrays from components. This issue is just incorrectly titled and I just fixed it.