(htm + vhtml) How do I insert unescaped HTML from variable?

Hello. Trying hml-2.2.1 mini + vhtml-2.1.0 min. Below are few use cases I tried, which demonstrate totally inconsistent behaviour.

Case 1 (good but useless):

let h = "<p>hello</p>";
document.body.innerHTML = html`${h}`;
// wanted: <p>hello</p>
// got:    <p>hello</p>

Case 2: wrapping ${h} into <div> (real use case):

let h = "<p>hello</p>";
document.body.innerHTML = html`<div>${h}</div>`;
// wanted: <div><p>hello</p></div>
// got:    <div>&lt;p&gt;hello&lt;/p&gt;</div>

Case 3: manually calling html() with wrapping <div> (real use case):

let h = "<p>hello</p>";
return html`<div>${html(h)}</div>`;
// wanted: <div><p>hello</p></div>
// got:    <div>hello<undefined></undefined></div>

Case 3a (real example I initially stuck into; it looses <p> around “text”):

let h = "<main><h1>title</h1><p>text</p></main>";
return html`<div>${html(h)}</div>`;
// wanted: <div><main><h1>title</h1><p>text</p></main></div>
// got:    <div><main><h1>title</h1>text</main><undefined></undefined></div>

Case 4: manually calling html() without wrapping <div>:

let h = "<p>hello</p>";
return html`${html(h)}`;
// wanted: <p>hello</p>
// got:    ,,,h,,e,,l,,l,,o,,<undefined></undefined>

Case 5: manually calling html() with wrapping <div> and variable containing multiple elements:

let h = "<p>hello</p><p>world</p>";
return html`<div>${html(h)}</div>`;
// wanted: <div><p>hello</p><p>world</p></div>
// got:    <div>world<undefined></undefined></div>

I suppose I do it wrong in case 5, I should wrap multiple <p> into some single element, like I do in case 3a. I could also ignore weird <undefined> elements if it worked correctly otherwise.

So, how do I do it correctly, then?

Thanks.

[goranmoomin]

Okay, maybe my computer was a little strange 😦

Template tag functions get arguments as arrays: so you might have more luck in calling html(['<p>Hello, World!</p>']).

This

import htm from "htm";
import vhtml from "vhtml";

const html = htm.bind(vhtml);

const frag = "<p>Hello, World!</p>"
console.log(html`<div>${html([frag])}</div>`);

produces:

<div><p>Hello, World!</p></div>

codesandbox

[ooling]

@goranmoomin I noticed it only worked if the value only contain valid html, when I add an preact component it doesn’t work, how to solve it?

Here’s an example :

import {htm,h,MyComponent} from 'my/local/host/path/...';
let jsx = htm.bind(h);
console.log(
  jsx([
  `<div><${MyComponent}/></div>`
  ])
);

Result :

Anyway the screenshot above is taken from Spck Editor on Android.