Add a way to render html strings inside element in jsx components

[mairatma]

It's currently possible to render html strings via Metal.js soy components, but not via jsx components.

This was requested by @mthadley and @bryceosterhaus. Today they're going around this by using incremental dom directly, like this.

[mthadley]

For ease of reference:

render() {
  IncrementalDOM.elementOpen('div', null, null, 'class', 'my-html-string-container');
  const node = IncrementalDOM.elementClose('div');
  node.innerHTML = '<div class="my-html-string">Hello World!</div>';
  return node;
}

[mairatma]

This issue was moved to #9

[mairatma]

This issue was moved back.

[bryceosterhaus]

Looks like the easiest way is to make that change in incremental-dom, but that would also affect soy. Should we do that, or find a way to make this change specifically on the JSX side of metal?

[eduardolundgren]

@bryceosterhaus We might be able to to that for both JSX and Soy. If you have more details about how this can be achieved let me know.

[mairatma]

Just FYI, at the time I remember I was thinking of just making a jsx component that could handle this, not of changing anything in metal.js itself. The component could even use html2incdom to turn the inner html into incremental dom calls, or in the simplest case just do the same thing @mthadley posted here in its render function.

Not sure that's what you really need right now, just wanted to explain in case it might be of help :)

[bryceosterhaus]

I was trying to avoid just creating a component for it because its just an additional thing to import. So I was hoping to implement it in babel-plugin-transform-incremental-dom since its just the jsx side so i asked there and it was recommended to add it to our iDOM configuration but after testing that with our specific metal implementation there were issues with updates and patching. I tried testing an implementation it in iDOM by itself and seems to be that trying to set 'innerHTML' just doesn't work for our case.

So in the end, looks like the best route is to just create a component for this. I'll go ahead and create one and send a pr.