[Live] Improving child render handling: avoid removing element from DOM when possible

[weaverryan]

Q	A
Bug fix?	yes
New feature?	no
Issues	Fixes the timer on https://ux.symfony.com/demos/live-memory/ (which currently resets each time you select the first card)
License	MIT

Hi!

TODO

• Test case for child morphing when position is kept (prove that the element is never removed from the DOM)
• Test case for child morphing when child moves, but another element takes its place (prove that the final HTML is the expected).

Long explanation 😛

When handling child rendering - and data-live-preserve - the goal is to "preserve" the element on the page instead of morphing it from the matching id in the new HTML. This is especially challenging if the "id" element has changed position, requiring an algorithm where we store the "original" elements, clone them (to avoid morphing from mutating the originals) then swap them back in at the correct position after.

However, instead of doing this "replace and swap" in all situations, we now only do it when the matching elements change position. If they do not (if a data-live-preserve element's original element and new element are in the same position - which would happen 99% of the time), then avoid the "replace and swap" and simply tell Idiomorph to avoid morphing the element. This handles and edge case where the original element has a CSS transition. Removing it and re-adding it to the DOM - even for a moment - resets/restarts that CSS transition unnecessarily.

Cheers!