An in-place DOM diffing library
Clone or download
Permalink
Failed to load latest commit information.
conf Use headless Chrome for unit-dist target. Jul 21, 2018
demo Add a demo for animating items while reordering. Jul 13, 2018
perf Add tests for checking perf adding to / removing from the start of a … Jul 12, 2018
src Added Node | ChildNode type to avoid errors caused by update to Types… ( Oct 17, 2018
test Add getKey method with tests (#384) Oct 11, 2018
.babelrc Add test for patching externally rendered DOM where a key moves up in… Apr 8, 2016
.eslintrc Some fixes for goog.module output. Oct 14, 2017
.gitignore Add a Closure Compiler output, make it part of dist. (#381) Sep 12, 2018
.travis.yml Initial TypeScript migration Jun 1, 2018
AUTHORS Initial commit Apr 23, 2015
CHANGELOG.md Updating version to 0.5.0 Aug 25, 2016
CONTRIBUTING Update CONTRIBUTORS Jul 11, 2015
CONTRIBUTORS Added Node | ChildNode type to avoid errors caused by update to Types… ( Oct 17, 2018
ECOSYSTEM.md fix typo in ECOSYSTEM Jul 4, 2018
LICENSE Adding license headers to build files May 19, 2015
README.md Update CDN version in README Sep 26, 2016
gulpfile.js Add a Closure Compiler output, make it part of dist. (#381) Sep 12, 2018
index.ts Add getKey method with tests (#384) Oct 11, 2018
node_externs.js Fix type annotations in node_externs.js Apr 14, 2016
package-lock.json Add a Closure Compiler output, make it part of dist. (#381) Sep 12, 2018
package.json Add a Closure Compiler output, make it part of dist. (#381) Sep 12, 2018
tsconfig.json Unwind getMatchingNode recursion into while loop Jul 18, 2018

README.md

Build Status

Incremental DOM

Overview

Incremental DOM is a library for building up DOM trees and updating them in-place when data changes. It differs from the established virtual DOM approach in that no intermediate tree is created (the existing tree is mutated in-place). This approach significantly reduces memory allocation and GC thrashing for incremental updates to the DOM tree therefore increasing performance significantly in some cases.

Incremental DOM is primarily intended as a compilation target for templating languages. It could be used to implement a higher level API for human consumption. The API was carefully designed to minimize heap allocations and where unavoidable ensure that as many objects as possible can be de-allocated by incremental GC. One unique feature of its API is that it separates opening and closing of tags so that it is suitable as a compilation target for templating languages that allow (temporarily) unbalanced HTML in templates (e.g. tags that are opened and closed in separate templates) and arbitrary logic for creating HTML attributes. Think of it as ASM.dom.

Supported Browsers

Incremental DOM supports IE9 and above.

Usage

HTML is expressed in Incremental DOM using the elementOpen, elementClose, elementVoid and text methods. Consider the following example:

var IncrementalDOM = require('incremental-dom'),
    elementOpen = IncrementalDOM.elementOpen,
    elementClose = IncrementalDOM.elementClose,
    elementVoid = IncrementalDOM.elementVoid,
    text = IncrementalDOM.text;

function render(data) {
  elementVoid('input', '', [ 'type', 'text' ]);
  elementOpen('div', '', null);
    if (data.someCondition) {
      text(data.text);
    }
  elementClose('div');
}

To render or update an existing DOM node, the patch function is used:

var patch = require('incremental-dom').patch;

var data = {
  text: 'Hello World!',
  someCondition: true
};

patch(myElement, function() {
  render(data);
});

data.text = 'Hello World!';

patch(myElement, function() {
  render(data);
});

Templating Languages and Libraries

Check out what others having been doing with Incremental DOM.

Docs

Getting Incremental DOM

Via CDN

https://ajax.googleapis.com/ajax/libs/incrementaldom/0.5.1/incremental-dom.js https://ajax.googleapis.com/ajax/libs/incrementaldom/0.5.1/incremental-dom-min.js

Using npm

npm install incremental-dom

Development

To install the required development packages, run the following command:

npm i

Running tests

To run once:

gulp unit

To run on change:

gulp unit-watch

Building

To build once:

gulp js

To build on change:

gulp js-watch