# udomdiff

**Repository Path**: mirrors_WebReflection/udomdiff

## Basic Information

- **Project Name**: udomdiff
- **Description**: An essential diffing algorithm for µhtml.
- **Primary Language**: Unknown
- **License**: ISC
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-19
- **Last Updated**: 2026-01-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# <em>µ</em>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)

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

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');` <sup><sub>( or `require('udomdiff/cjs')` )</sub></sup>
  * via bundlers/transpilers: `import udomdiff from 'udomdiff';` <sup><sub>( or `from 'udomdiff/esm'` )</sub></sup>