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

[dimgel]

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]

That's not htm's work, htm passes the arguments without escaping anything. What framework are you binding to?

When binding with vhtml, this:

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

const html = htm.bind(vhtml);

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

returns

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

edit: Something was wrong (in my computer) and this is apparently not right.

[dimgel]

No framework, I use htm.bind(vhtml) exactly as you've shown.

Example: http://dimgel.me/drop/vhtml/7-bug-undefined-tag.html
Result: http://dimgel.me/drop/vhtml/7-bug-undefined-tag.png

[dimgel]

Re-uploaded files to show case 2 (previously mistakingly uploaded case 3).

Actually, I came to realize that just pure JS string interpolation would be enough for me, I only have to explicitly escape plain texts, like <h1>${esc(title)}</h1><div>${bodyHtml}</div>.

[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

[dimgel]

That worked indeed, thank you! :)

[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.