swapdom

Fast & tiny DOM swapper.

import swap from 'swapdom'

swap(parentNode, oldNodes, newNodes, endNode)

deflate.js strategy is smaller (248b), but a bit slower on some cases and doesn't support live collections.
inflate.js strategy is bigger (318b), but faster and supports live collections.

Provide custom mutators as:

swap.same = (a,b) => a?.isSameNode(b)
swap.replace = (a,b, parent) => a.replaceWith(b)
swap.insert = (a,b, parent) => a ? a.before(b) : parent.append(b)
swap.remove = (a, parent) => a.remove()

See benchmark (it's called spect there).

Alternatives

• list-difference objects
• list-difference maps

ॐ