https://github.com/dy/swapdom
Fast & tiny DOM differ
https://github.com/dy/swapdom
Last synced: 9 months ago
JSON representation
Fast & tiny DOM differ
- Host: GitHub
- URL: https://github.com/dy/swapdom
- Owner: dy
- Created: 2022-01-14T20:14:39.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-14T22:57:19.000Z (over 2 years ago)
- Last Synced: 2024-12-29T00:12:21.445Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 88.9 KB
- Stars: 16
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# swapdom [](https://github.com/spectjs/swapdom/actions/workflows/test.yml) [](http://npmjs.org/swapdom)
> Fast & tiny DOM swapper.
```js
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:
```js
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](https://github.com/luwes/js-diff-benchmark) (it's called _spect_ there).
## Alternatives
* [list-difference objects](https://github.com/paldepind/list-difference/blob/master/index.js)
* [list-difference maps](https://github.com/luwes/js-diff-benchmark/blob/master/libs/list-difference.js)
ॐ