Fix to not pass children for void elements

React warns when `children: []` is passed for a void element,
such as `hr` or `br`.
To solve that, we can pass `children: undefined` instead.

Author: wooorm

Diff for: lib/index.js

@@ -67,7 +67,7 @@
  * @typedef {JSX.Element | string | null | undefined} Child
  *   Child.
  *
- * @typedef {{children: Array<Child>, node?: Element | undefined, [prop: string]: Value | Element | undefined | Array<Child>}} Props
+ * @typedef {{children: Array<Child> | undefined, node?: Element | undefined, [prop: string]: Value | Element | undefined | Array<Child>}} Props
  *   Properties and children.
  *
  * @callback Create
@@ -260,7 +260,7 @@ export function toJsxRuntime(tree, options) {
   return state.create(
     tree,
     state.Fragment,
-    {children: result ? [result] : []},
+    {children: result ? [result] : undefined},
     undefined
   )
 }
@@ -296,7 +296,7 @@ function one(state, node, key) {
     let type = state.Fragment
 
     if (node.type === 'element') {
-      if (tableElements.has(node.tagName)) {
+      if (children && tableElements.has(node.tagName)) {
         children = children.filter((child) => !whitespace(child))
       }
 
@@ -340,7 +340,7 @@ function productionCreate(_, jsx, jsxs) {
   return create
   /** @type {Create} */
   function create(_, type, props, key) {
-    const isStaticChildren = props.children.length > 1
+    const isStaticChildren = props.children ? props.children.length > 1 : false
     const fn = isStaticChildren ? jsxs : jsx
     return fn(type, props, key)
   }
@@ -358,7 +358,7 @@ function developmentCreate(filePath, jsxDEV) {
   return create
   /** @type {Create} */
   function create(node, type, props, key) {
-    const isStaticChildren = props.children.length > 1
+    const isStaticChildren = props.children ? props.children.length > 1 : false
     const point = pointStart(node)
     return jsxDEV(
       type,
@@ -382,7 +382,7 @@ function developmentCreate(filePath, jsxDEV) {
  *   Info passed around.
  * @param {Parent} node
  *   Current element.
- * @returns {Array<Child>}
+ * @returns {Array<Child> | undefined}
  *   Children.
  */
 function createChildren(state, node) {
@@ -407,7 +407,7 @@ function createChildren(state, node) {
     if (result !== undefined) children.push(result)
   }
 
-  return children
+  return children.length > 0 ? children : undefined
 }
 
 /**

Diff for: test/index.js

@@ -292,6 +292,12 @@ test('children', () => {
     '<div class="article"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><circle cx="120" cy="120" r="100"></circle></svg></div>',
     'should support svg in html'
   )
+
+  assert.equal(
+    renderToStaticMarkup(toJsxRuntime(h('hr'), production)),
+    '<hr/>',
+    'should support a void element'
+  )
 })
 
 test('source', () => {