Add support for passing children as arguments

Closes GH-8.

Reviewed-by: Titus Wormer <[email protected]>

Author: brechtcs

factory.js

@@ -12,12 +12,13 @@ function factory(schema, defaultTagName) {
   return h
 
   /* Hyperscript compatible DSL for creating virtual HAST trees. */
-  function h(selector, properties, children) {
+  function h(selector, properties) {
     var node = parseSelector(selector, defaultTagName)
+    var children = Array.prototype.slice.call(arguments, 2)
     var property
 
-    if (!children && properties && isChildren(properties, node)) {
-      children = properties
+    if (properties && isChildren(properties, node)) {
+      children.unshift(properties)
       properties = null
     }
 
@@ -113,10 +114,6 @@ function addChild(nodes, value) {
   var index
   var length
 
-  if (value === null || value === undefined) {
-    return
-  }
-
   if (typeof value === 'string' || typeof value === 'number') {
     nodes.push({type: 'text', value: String(value)})
     return

readme.md

@@ -17,6 +17,7 @@ npm install hastscript
 var h = require('hastscript')
 var s = require('hastscript/svg')
 
+// Child nodes as an array
 console.log(
   h('.foo#some-id', [
     h('span', 'some text'),
@@ -28,6 +29,17 @@ console.log(
   ])
 )
 
+// Child nodes as arguments
+console.log(
+  h(
+    'form',
+    {method: 'POST'},
+    h('input', {type: 'text', name: 'foo'}),
+    h('input', {type: 'text', name: 'bar'}),
+    h('input', {type: 'submit', value: 'send'})
+  )
+)
+
 console.log(
   s('svg', {xmlns: 'http://www.w3.org/2000/svg', viewbox: '0 0 500 500'}, [
     s('title', 'SVG `<circle>` element'),
@@ -57,6 +69,22 @@ Yields:
        children:
         [ { type: 'text', value: 'delta' },
           { type: 'text', value: 'echo' } ] } ] }
+{ type: 'element',
+  tagName: 'form',
+  properties: { method: 'POST' },
+  children:
+   [ { type: 'element',
+       tagName: 'input',
+       properties: { type: 'text', name: 'foo' },
+       children: [] },
+     { type: 'element',
+       tagName: 'input',
+       properties: { type: 'text', name: 'bar' },
+       children: [] },
+     { type: 'element',
+       tagName: 'input',
+       properties: { type: 'submit', value: 'send' },
+       children: [] } ] }
 { type: 'element',
   tagName: 'svg',
   properties: { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 500 500' },
@@ -73,9 +101,9 @@ Yields:
 
 ## API
 
-### `h(selector?[, properties][, children])`
+### `h(selector?[, properties][, ...children])`
 
-### `s(selector?[, properties][, children])`
+### `s(selector?[, properties][, ...children])`
 
 DSL to create virtual [HAST][] trees for HTML or SVG.
 
@@ -94,7 +122,7 @@ Map of properties (`Object.<*>`, optional).
 
 ###### `children`
 
-(List of) child nodes (`string`, `Node`, `Array.<string|Node>`, optional).
+(Lists of) child nodes (`string`, `Node`, `Array.<string|Node>`, optional).
 When strings are encountered, they are normalised to [`text`][text] nodes.
 
 ##### Returns

test.js

@@ -882,6 +882,54 @@ test('hastscript', function(t) {
       'should allow omitting `properties` when a button has an invalid type'
     )
 
+    st.deepEqual(
+      h('section', {id: 'test'}, h('p', 'first'), h('p', 'second')),
+      {
+        type: 'element',
+        tagName: 'section',
+        properties: {id: 'test'},
+        children: [
+          {
+            type: 'element',
+            tagName: 'p',
+            properties: {},
+            children: [{type: 'text', value: 'first'}]
+          },
+          {
+            type: 'element',
+            tagName: 'p',
+            properties: {},
+            children: [{type: 'text', value: 'second'}]
+          }
+        ]
+      },
+      'should allow passing multiple child nodes as arguments'
+    )
+
+    st.deepEqual(
+      h('section', h('p', 'first'), h('p', 'second')),
+      {
+        type: 'element',
+        tagName: 'section',
+        properties: {},
+        children: [
+          {
+            type: 'element',
+            tagName: 'p',
+            properties: {},
+            children: [{type: 'text', value: 'first'}]
+          },
+          {
+            type: 'element',
+            tagName: 'p',
+            properties: {},
+            children: [{type: 'text', value: 'second'}]
+          }
+        ]
+      },
+      'should allow passing multiple child nodes as arguments when there is no properties argument present'
+    )
+
     st.throws(
       function() {
         h('foo', {}, true)