diff --git a/factory.js b/factory.js index fbcf3d5..f41b5bb 100644 --- a/factory.js +++ b/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 diff --git a/readme.md b/readme.md index b519546..d1f0d15 100644 --- a/readme.md +++ b/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,15 @@ 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 `` element'), @@ -57,6 +67,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 +99,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. diff --git a/test.js b/test.js index e84f991..f612aa4 100644 --- a/test.js +++ b/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)