Inferno: Converting from HTML string to vNodes

[Silviu-Marian]

Hello

What's the best way to convert from an HTML string to vNodes? Do we have any utilities to facilitate this?

Thank you

[Havunen]

Hi @Silviu-Marian

Can you explain what is the use-case for this? You can render HTML string inside node using dangerouslySetHtml (it internally uses innerHTML method) NOTE: It is possible security hole and slow.

https://infernojs.org/docs/guides/components See Inject HTML Helper - section

I dont think there is any string to vNode util available

[LukeSheard]

While this is extremely dangerous. It is possible if you were to port something like Preact Markup to Inferno. https://github.com/developit/preact-markup

[Silviu-Marian]

Wow that's a fast reply :D

My use case is a collaborative contentEditable. An existing (prod) database has all the content saved as HTML strings, and the problem is that setting innerHTML on each external event is too slow for real-time collaborative editing

I was thinking
- receive HTML, strip comments, convert to vNodes
- MyEditor accepts and mounts vNodes instead of HTML
- when new vNodes are received (onComponentWillUpdate), diff with existing and apply patch to existing mouting point

I can cook something up using virtual-dom but inferno has a much better diffing strategy, and is still being maintained

As for the dangerous parts, I'd be filtering out some tags like iframes, form inputs, event attributes...

What about converting an existing DOM structure to vNodes?

[LukeSheard]

@Silviu-Marian We do not have a package for converting DOM structures to VNodes apart from Hydration from server side rendering. I don't imagine that we will ever support something from Inferno code but you're welcome to look at our hydration code and use it to create an OSS package yourself. There are plans to make for a slightly more open API that might allow something like this more easily down the line, but nothing soon that I'm aware of.

[Silviu-Marian]

I've read through the hydration code. It was a good read and I realized that contentEditable would be the only use case if I push for this.

The other problem I noticed is that it would only work if the altering part doesn't modify EventListeners

I'll go with diffDOM for now. Thank you very much for your input. Support around this project is amazing