Refactor to pass single child, not pass empty children

Babel compiles `<b/>` to `jsx('b', {})`, that is, no `children` prop,
but properties nonetheless.
And it compiled `<b>c</b>` to `jsx('b', {children: 'c'})`, which is,
the single child as the `children` value.

This commit matches that behavior, instead of always passing an (empty)
array.

Author: wooorm

lib/index.js

@@ -79,7 +79,7 @@
  * @typedef {JSX.Element | string | null | undefined} Child
  *   Child.
  *
- * @typedef {{children: Array<Child> | undefined, node?: Element | undefined, [prop: string]: Value | Element | undefined | Array<Child>}} Props
+ * @typedef {{children?: Array<Child> | Child, node?: Element | undefined, [prop: string]: Value | Element | undefined | Child | Array<Child>}} Props
  *   Properties and children.
  *
  * @callback Create
@@ -295,7 +295,7 @@ export function toJsxRuntime(tree, options) {
   return state.create(
     tree,
     state.Fragment,
-    {children: result ? [result] : undefined},
+    {children: result || undefined},
     undefined
   )
 }
@@ -348,7 +348,13 @@ function one(state, node, key) {
       }
     }
 
-    props.children = children
+    if (children.length > 0) {
+      const value = children.length > 1 ? children : children[0]
+
+      if (value) {
+        props.children = value
+      }
+    }
 
     // Restore parent schema.
     state.schema = parentSchema
@@ -375,7 +381,8 @@ function productionCreate(_, jsx, jsxs) {
   return create
   /** @type {Create} */
   function create(_, type, props, key) {
-    const isStaticChildren = props.children ? props.children.length > 1 : false
+    // Only an array when there are 2 or more children.
+    const isStaticChildren = Array.isArray(props.children)
     const fn = isStaticChildren ? jsxs : jsx
     return key ? fn(type, props, key) : fn(type, props)
   }
@@ -393,7 +400,8 @@ function developmentCreate(filePath, jsxDEV) {
   return create
   /** @type {Create} */
   function create(node, type, props, key) {
-    const isStaticChildren = props.children ? props.children.length > 1 : false
+    // Only an array when there are 2 or more children.
+    const isStaticChildren = Array.isArray(props.children)
     const point = pointStart(node)
     return jsxDEV(
       type,
@@ -417,7 +425,7 @@ function developmentCreate(filePath, jsxDEV) {
  *   Info passed around.
  * @param {Parent} node
  *   Current element.
- * @returns {Array<Child> | undefined}
+ * @returns {Array<Child>}
  *   Children.
  */
 function createChildren(state, node) {
@@ -444,7 +452,7 @@ function createChildren(state, node) {
     if (result !== undefined) children.push(result)
   }
 
-  return children.length > 0 ? children : undefined
+  return children
 }
 
 /**
@@ -459,7 +467,7 @@ function createChildren(state, node) {
  */
 function createProperties(state, node) {
   /** @type {Props} */
-  const props = {children: []}
+  const props = {}
   /** @type {string} */
   let prop
 

test/index.js

@@ -235,7 +235,7 @@ test('properties', () => {
           ...production,
           jsx(type, props) {
             foundProps = props
-            return production.jsx('div', {children: []}, undefined)
+            return production.jsx(type, {})
           },
           stylePropertyNameCase: 'css'
         }
@@ -248,7 +248,6 @@ test('properties', () => {
   assert.deepEqual(
     foundProps,
     {
-      children: undefined,
       style: {
         '-webkit-transform': 'rotate(0.01turn)',
         '--fg': '#0366d6',