Unmanaged VNodes (external dom-manipulation)

[cornerman]

In general working with third-party libs works quite good with Outwatch. You can use onDom* Hooks or managedElement(elem => Cancelable(() => ...)) and integrate with other libraries using the dom element. But there is a problem when these libraries do a lot of dom-manipulation themselves.

Example: When using ui frameworks like semantic-ui, you might end up with VNodes that are moved inside the dom by semantic-ui. So Outwatch cannot see those changes and the virtual dom will get out of sync with the actual dom. Succeeding patch calls with snabbdom will therefore most likely fail.

We can workaround some of the issues when wrapping such nodes with div.static(key)(<unmanaged vnode>). But this will still lead to errors when you want to remove this vnode again.

For proper handling, we could introduce an unmanaged vnode type. We just do the initial rendering of such VNodes and any updates coming from its observables. But like a thunk/static we would never rerender the node if it is already there and additionally will never remove the node. We would just call onDestroy and the user would need to handle that himself. For example, in semantic-ui, we could just destroy the element with jquery. We could even destroy it in Outwatch if an id is provided.

Any additional requirements or ideas?

[fdietze]

This could help: https://github.com/snabbdom/snabbdom/blob/master/README.md#snabbdomtovnode

Flag a dom node as dirty, to tell outwatch to re-read the dom into a vnode.

[cornerman]

We will also want an outwatch-react and/or outwatch-vue module that provides helpers to use these kind of unmanaged nodes to render react/vue components inside of outwatch.