[bug?] Moving a Node to another parent Node causes DOMElement refresh (visible blink).

[trusktr]

When we move a child Node to another parent Node, the child Node's DOMElement's HTMLElement will be destroyed and a new one will be generated.

This forces us to reappend elements of other frameworks (f.e. a React component container) to the new HTMLElement of the DOMElement once it's ready.

The process of re-attaching a React component's HTMLElement container causes a visual blink as in this video: <placeholder for video>

The blink is janky. It'd be nice if a DOMElement's HTMLElement was re-used.

cc @alexanderGugel @michaelobriena

[michaelobriena]

@trusktr Yes this is totally the case. I would go about extending the ElementCache's to give the ability to swap with another ElementCache. That means you would have to create some sort of registry.

We will not be working on this internally.

[alexanderGugel]

• Use an ObjectPool to keep track of "removed" ElementCaches, grouped by tagName.
• Instead of doing document.createElement on insertEl, check if an unused ElementCache is available via the pool.
• ElementCaches would need to be cleaned up before being stored in the pool. This includes removing event listeners.

Could be tricky to implement.

[trusktr]

@alexanderGugel @michaelobriena I can see why perhaps the .famous-dom-element-content div might be remade, since it's rendering a new element based on the DOMElement's content, but perhaps the .famous-dom-element can be kept?

[trusktr]

What about using something like Matt Esch's virtual-dom on DOMElement content to avoid remaking DOM until necessary?

[alexanderGugel]

@alexanderGugel @michaelobriena I can see why perhaps the .famous-dom-element-content div might be remade, since it's rendering a new element based on the DOMElement's content, but perhaps the .famous-dom-element can be kept?

It is, but its content is being set using innerHTML. That's what's causing the "blink".

What about using something like Matt Esch's virtual-dom on DOMElement content to avoid remaking DOM until necessary?

This is a much bigger feature request. While I think this something that we'll be adding sooner or later, it is not an immediate priority.