Ability to pass just a single object

[balupton]

It could be nice if we could just pass one object, that contains a tag and children properties, like so:

h({
	tag: 'a',
	class: 'prev',
	href: prev.url,
	children: [
		h('span.icon'),
		h('span.title', prev.title)
	]
})

I'm doing a gist now to test this assumption.

[reqshark]

i agree, both ways are good, ought to be supported:
• array children as an arg or
• more declarative children props

[balupton]

so I did up a gist over at: https://gist.github.com/balupton/c807a9be215723f0e849697097b99a50

I'm not actually sure this suggestion results in better code, it sure makes understanding the hierarchy easier, but it does double the lines of code

[reqshark]

that gist makes things look more readable using the children style in my opinion

[dominictarr]

I could tolerate (what this will do to the implementation internals) if this only applies when the object is the first arg (if the tag name is not the string) and if all fields are under properties.

h({tag: ..., classes: ..., attributes: {...}, events: {...}, children: [...] })

with only a fixed number of accepted properties on the top object. then the code for handling any of those things can be refactored into a function and just called on the object.

I disagree that it's more "readable" but that is very subjective.

[reqshark]

yes of course, so it may not be more "readable"

but there is something less subjective here if we believe in the following premise:

• a function that accepts fewer arguments is simpler

[reqshark]

also if we do tag and children, let's also do a textNode prop like

h({tag: ..., classes: ..., attributes: {...}, text: ... })

[dominictarr]

@ahdinosaur I am looking for the issue that you opened regards consolidating the hyperscript api, but can't find it.

[ahdinosaur]

@dominictarr thanks for the ping: #66

[dmitriz]

Passing objects is also easier from the Functional Programming perspective, if you want to compose h with some pure functions:

var link = {tag: 'a', href: 'http://check.it', text: 'Check my link!'}
var applyStyle = style => elm => {...elm, style}
var styledNode = h(applyStyle(link)) 
  //=> h({tag: 'a', href: 'http://check.it', style: style, text: 'Check my link!'})

would be easier than

var textInput = {tag: 'input, href: 'http://check.it', text:'Check my link!'}
var applyStyle = style => elm => {...elm, style}
var removeProps = props => obj => {
   ... // write function removing the props from the object
}
var toArray = obj => [obj.tag, obj, obj.text]
var styledNode = h.apply(h, toArray(removeProps(['tag', 'text'])(applyStyle(link))))
  //=> h('a', {href: 'http://check.it', style: style}, 'Check my link!')

that you need now with the current implementation of h.