Skip to content
An in-place DOM diffing library
TypeScript JavaScript Python Other
Branch: master
Clone or download
Sepand Parhami and iteriani Add a publish target. (#437)
Add an explicit target for publishing, since it can be hard to find from
the bazel documentation.
Latest commit bd1415e Nov 5, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Use `npm ci` to install dependencies. (#425) Sep 4, 2019
conf Use headless Chrome for unit-dist target. Jul 21, 2018
demo Add a demo for animating items while reordering. Jul 13, 2018
perf Switch from travis to circleci, using a workflow that build and tests… Jul 19, 2019
release Switch from travis to circleci, using a workflow that build and tests… Jul 19, 2019
src
test Remove .DS_Store files [skip ci] (#428) Sep 28, 2019
.babelrc Add test for patching externally rendered DOM where a key moves up in… Apr 8, 2016
.bazelrc Switch from travis to circleci, using a workflow that build and tests… Jul 19, 2019
.eslintrc Add linting, which was removed when switching to Typescript. (#411) Jul 16, 2019
.gitignore Remove .DS_Store files [skip ci] (#428) Sep 28, 2019
AUTHORS
BUILD Preserve license header for min bundle (#433) Oct 29, 2019
CHANGELOG.md Updating version to 0.7.0 Oct 29, 2019
CONTRIBUTING Update CONTRIBUTORS Jul 11, 2015
CONTRIBUTORS
ECOSYSTEM.md Added Falak JS framework (#418) Aug 8, 2019
LICENSE Adding license headers to build files May 19, 2015
README.md Change ci badge to main repo. (#414) Jul 19, 2019
WORKSPACE fix Bazel build of sinon UMD bundle (#406) Jul 15, 2019
constants.bzl Switch from travis to circleci, using a workflow that build and tests… Jul 19, 2019
index.ts Switch from travis to circleci, using a workflow that build and tests… Jul 19, 2019
node_externs.js Fix type annotations in node_externs.js Apr 14, 2016
package-lock.json
package.json Add a publish target. (#437) Nov 5, 2019
rules_nodejs_pr915.patch fix Bazel build of sinon UMD bundle (#406) Jul 15, 2019
tsconfig.json

README.md

CircleCI

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:

./node_modules/.bin/bazel test ...

To run on change:

./node_modules/.bin/ibazel run ...

Building

To build once:

./node_modules/.bin/bazel build ...

To build on change:

./node_modules/.bin/ibazel ...
You can’t perform that action at this time.