implement dangerouslySetInnerHTML

[queckezz]

Hey @ashaffer!

I implemented React's dangerouslySetInnerHTML function for svg contents since these awkward namespaces (xlink:href) explode the JSX compiler:

const req = `<use xlink:href='${glyph}'></use>`
<svg
  width={width}
  height={height ? height : width}
  dangerouslySetInnerHTML={req}
>
</svg>

Right now the implementation is based on dom and cannot be used for say virtex-string.

import h from 'virtex-element'

const key = 'dangerouslySetInnerHTML'

const sugar = html => node => {
  node.innerHTML = html
  node.removeAttribute(key)
}

const element = (tag, attrs, ...children) => {
  if (attrs && attrs.hasOwnProperty(key)) {
    return h(
      tag,
      { ...attrs, [key]: sugar(attrs[key]) },
      children
    )
  }

   return h(tag, attrs, children)
}

Can you give me some directions of where to implement something like this, but not based on raw dom operations? Is this something that needs to be implemented in core? I'm happy to open a PR.

[ashaffer]

Hmmm...I think actually just setting innerHTML as a an attribute on an element should work at the moment (it's implemented in virtex-dom. I haven't really tested it much, so its possible you will run into issues with the diffing process, but it should at least kind of work.

So you'd just do:

const req = `<use xlink:href='${glyph}'></use>`
<svg
  width={width}
  height={height ? height : width}
  innerHTML={req}
>
</svg>

The core doesn't have any special knowledge of this raw dom that's been inserted. I can't think of anything in particular that would go wrong as a result of that, but it's just not a case i've thought hard about yet or tested much.

Want to try it out and let me know?

EDIT: That is annoying though that it blows up the jsx compiler. I had just gotten a PR on virtex-dom to properly support those attributes. I wonder if babel has any plans to support that in the future.

[queckezz]

Nice! innerHTML works just fine, thanks. Haven't tested with virtex-string yet though. I'll report back when I tried.

The core doesn't have any special knowledge of this raw dom that's been inserted. I can't think of anything in particular that would go wrong as a result of that, but it's just not a case i've thought hard about yet or tested much.

Ah right, I'm not sure if this has an impact, but atm I'm just returning false from shouldUpdate to opt-out of the rendering cycle after initial render:

const shouldUpdate = () => false

const render = (...)  

export {
  shouldUpdate,
  render
}

EDIT: That is annoying though that it blows up the jsx compiler. I had just gotten a PR on virtex-dom to properly support those attributes. I wonder if babel has any plans to support that in the future.

React <0.14 implemented xlinkHref to workaround that. I haven't dug into this much though.