hyperscript-helpers icon indicating copy to clipboard operation
hyperscript-helpers copied to clipboard

Passing single node as children does not seem to work with preact-hyperscript

Open dmitriz opened this issue 7 years ago • 5 comments

The Doc seems to allow passing single nodes as children but when using with preact-hyperscript, it seem that a single node can only be passed inside array:

  // this works
  div({style:{border: 'solid thin'}}, [div('hello')])

  // but this does not:
  // div({style:{border: 'solid thin'}}, div('hello'))

See the pen here: http://codepen.io/dmitriz/pen/qmqYgY?editors=0011

Also referred in https://github.com/queckezz/preact-hyperscript/issues/7 in case it is a problem on their end.

It would be nice to provide this feature from the helpers even if the host library h does not (which is sadly often the case).

dmitriz avatar Apr 26 '17 04:04 dmitriz

This library aims to be a very thin layer of sugar on top of whichever hyperscript implementation you are using. Like @staltz mentioned in the snabbdom issue, it is not trivial to tell nodes and other objects apart. Even more so since I wouldn't know which hyperscript library you are using. Because of these concerns, I am very reluctant to "polyfill" this functionality.

ohanhi avatar Apr 26 '17 13:04 ohanhi

2 characters really cannot be so much bloat to type. React and (consequently) Preact did this "wrong" in my opinion from the beginning. It is much easier to distinguish (for both library code and some person reading code) what is props/data and what is children: the former is always an object, the latter always an array. I think React/Preact do this as some kind of optimization since their primary usage is through JSX. People using hyperscript (or non-JSX) wouldn't typically do this.

staltz avatar Apr 26 '17 16:04 staltz

Thank you @ohanhi and @staltz for your comments. I presume you mean the way React makes look the same both arrays and single element, which is normal in HTML but confusing in JS indeed.

So does it mean, this line in the Readme should be corrected?

  • children is a hyperscript node, an array of hyperscript nodes, a string or an array of strings.

dmitriz avatar Apr 27 '17 14:04 dmitriz

Yes, I think adding the notion of "depending on your hyperscript library" could be helpful.

ohanhi avatar Apr 28 '17 04:04 ohanhi

@ohanhi Is there any library doing that?

dmitriz avatar Apr 28 '17 06:04 dmitriz