Html var into html

Hi,

First I’ve updated my code with the 5.0.4 api version. Very good work!

Expected behavior

I want to include in my template string a HTML string from a var.

Actual behavior

The html output is a string so by example my img tag is literally outputted as string and no image is shown.

"coucou <img class="emojione" alt="🙂" src="//cdn.jsdelivr.net/emojione/assets/png/1f642.png?v=2.1.2"/>"

Steps to reproduce behavior

Example:

import html from 'choo/html';
import emojione from 'emojione_minimal';

emojione.ascii = true;

module.exports = (input, emit) => {
  return html`
    <div>${emojione.shortnameToImage(input.text)}</div>
  `;
};

I’ve tried with the html() function instead of html`` but bel send an error:

Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': 'emojione"' is not a valid attribute name.

I’ve tried to include my emojione return value into an another var but bel send always a setAttribute error.

Thanks for your help.

Yu.

[greggraf]

@yudao - I saw an error similar to yours when passing a string directly to html() .

It worked when I passed an array of strings as the first argument, which is what tagged templates literals do.

Does this work?

module.exports = (input, emit) => {
  return html(["<div>", emojione.shortnameToImage(input.text), "</div>"]);
};

[yudao]

@greggraf Sorry for the delay. Awesome tip ! it’s working like a charm !

Thanks all for your help!

Yu.