https://github.com/webreflection/udomdiff

An essential diffing algorithm for µhtml.
https://github.com/webreflection/udomdiff

Last synced: 9 months ago
JSON representation

An essential diffing algorithm for µhtml.

• Host: GitHub
• URL: https://github.com/webreflection/udomdiff
• Owner: WebReflection
• License: isc
• Created: 2020-02-27T09:52:31.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2024-11-28T13:32:04.000Z (about 1 year ago)
• Last Synced: 2025-04-01T14:14:50.515Z (10 months ago)
• Language: JavaScript
• Homepage: https://medium.com/@WebReflection/the-web-smallest-dom-diffing-library-5b69ac4d1f4d
• Size: 178 KB
• Stars: 155
• Watchers: 5
• Forks: 11
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# µdomdiff

[![Build Status](https://travis-ci.com/WebReflection/udomdiff.svg?branch=master)](https://travis-ci.com/WebReflection/udomdiff) [![Coverage Status](https://coveralls.io/repos/github/WebReflection/udomdiff/badge.svg?branch=master)](https://coveralls.io/github/WebReflection/udomdiff?branch=master)

![a different tree](./udomdiff-head.jpg)

**Social Media Photo by [Christopher Rusev](https://unsplash.com/@ralics) on [Unsplash](https://unsplash.com/)**

An essential diffing algorithm for [µhtml](https://github.com/WebReflection/uhtml#readme).

### Signature

```js

futureNodes = udomdiff(

  parentNode,           // where changes happen

  [...currentNodes],    // Array of current items/nodes

  [...futureNodes],     // Array of future items/nodes (returned)

  get(node, toDoWhat),  // a callback to retrieve the node

  before                // the anchored node to insertBefore

);

```

### What is `get` and how does it work?

You can find all info from [domdiff](https://github.com/WebReflection/domdiff#a-node-generic-info--node-callback-for-complex-data), as it's exactly the same concept:

  * `get(node, 1)` to retrieve the node that's being appended

  * `get(node, 0)` to get the node to use for an `insertBefore` operation

  * `get(node, -0)` to get the node to use for an `insertAfter` operation

  * `get(node, -1)` to retrieve the node that's being removed

If you don't care about any of those second arguments values, `const get = o => o;` is a valid get too.

### How to import it:

  * via **CDN**, as global variable: `https://unpkg.com/udomdiff`

  * via **ESM**, as external module: `import udomdiff from 'https://unpkg.com/udomdiff/esm/index.js'`

  * via **CJS**: `const udomdiff = require('udomdiff');` ( or `require('udomdiff/cjs')` )

  * via bundlers/transpilers: `import udomdiff from 'udomdiff';` ( or `from 'udomdiff/esm'` )