Actualize is a very efficient and fast DOM patching algorithm. It's inspired by morphdom and nanomorph. It works with a real DOM, so a virtual DOM is not required.

npm install actualize

ES2015

import actualize from 'actualize'

CommonJS

const actualize = require('actualize')

Browser

<script src="https://unpkg.com/actualize@latest/dist/actualize.js"></script>

It injects actualize global into your environment.

import actualize from 'actualize'

const nodeA = document.createElement('button')
nodeA.textContent = 'Open'

const nodeB = document.createElement('button')
nodeB.className = 'pressed'
nodeB.textContent = 'Close'

nodeA.outerHTML === '<button>Open</button>' // true

actualize(nodeA, nodeB)

nodeA.outerHTML === '<button class="pressed">Close</button>' // true

Actualize can be used in combination with domb, a convenient tool for generating DOM trees. The above example can be rewriten using domb as follows:

import actualize from 'actualize'
import { button } from 'domb'

const nodeA = button({ children : 'Open '})
const nodeB = button({ children : 'Close', className : 'pressed' })

actualize(nodeA, nodeB)

It's common to work with lists of items in the DOM. Adding, removing or reordering items in a list can be quite expensive. To optimize this, you can add an id attribute to the DOM node. When changing the order of nodes, actualize will compare nodes with the same ID with each other, which will lead to a much smaller numbers of re-renders. The getKey option can be used to configure the key property for this purpose (see below).

actualize(treeA, treeB, options)

The actualize function supports the following arguments:

• treeA: Node — node for updating
• treeB: Node — node to which treeA should be updated
• options: object — see below supported options

The return value will usually be treeA. However, in situations where treeA is incompatible with treeB (either a different node type or a different tag name) then treeB will be returned.

Supported options (all optional):

⚠️ actualize will modify the treeB and it should be discarded after use.

The MIT License (MIT)