TypeError when mixing Elements and strings

[saschanaz]

In hyperHTML 2.5.10:

// This is okay
hyperHTML.wire()`${[document.createElement("div")]}`

// This is also okay, the string becomes a text node automatically
hyperHTML.wire()`${[","]}`

// Auto concatenation
hyperHTML.wire()`${[",", ","]}`

// !! TypeError: cannot use 'in' operator to search for 'ELEMENT_NODE' in ','
hyperHTML.wire()`${[document.createElement("div"), ","]}`

Codepen: https://codepen.io/SaschaNaz/pen/aqwqdy

This happened when I'm trying progressive migration to hyperHTML, where elements are contained in an array.

[WebReflection]

where elements are contained in an array.

this should be stressed more in the documentation but hyperHTML accepts only homogeneous Arrays: all promises, all DOM nodes, all strings, all objects (with mixed identities).

Specially using strings as Array, is an explicit opt in for HTML injection: ugly, most of the time unnecessary, but injected all at once.

If you pass DOM nodes, hyperHTML treat the whole list as DOM nodes.

If you write document.createElement('div') you are also not using hyperHTML .... you're better off with hyperHTML()`<div/>`, see this blog post: https://medium.com/@WebReflection/vanilla-dom-vs-hyperhtml-27e3c866acb5

As summary, this won't be fixed or changed because it's not a common use case but it's on the critical performance path.

Don't pass random data to hyperHTML, you have many ways to avoid doing that.