Serialize virtual-dom patches into a very efficient JSON format, and then patch the DOM directly from that object.
Designed for generating patches on the server or in a web worker and then sending that to the client. Basically this a more efficient and specialized version of vdom-as-json.
The virtual-dom
library is great, but the problem is that the VirtualPatch
object structure is:
- huge โ containing the entire source node as well as the patch object and the object to be patched โ and
- unserializable, since it uses custom classes like
VirtualPatch
andVirtualText
.
This library solves both those problems, although to do so it has to implement its own version of virtual-dom/patch
. So you'll have to use this library's patch
method.
npm install vdom-serialized-patch
var h = require('virtual-dom/h');
var diff = require('virtual-dom/diff');
var serializePatch = require('vdom-serialized-patch/serialize');
var applyPatch = require('vdom-serialized-patch/patch');
var node1 = h('span', 'hello');
var node2 = h('span.heavy', {style: {'font-weight': 'bold'}}, 'hello world');
var patch = diff(node1, node2);
var serializedPatch = serializePatch(patch);
applyPatch(document.querySelector('#my-element'), serializedPatch);
In this case, the serialized patch will look like this:
{
"0": [
[
4,
{
"style": {
"font-weight": "bold"
},
"className": "heavy"
},
{
"p": {}
}
]
],
"1": [
[
1,
{
"t": 1,
"x": "hello world"
}
]
],
"a": [
[
null
],
1
]
}
(This structure is not designed to be human-readable; it's designed to be efficient when doing JSON.stringify
/JSON.parse
).
This library, like vdom-as-json
, doesn't support thunks or hooks or any of that stuff, because it's not possible to serialize custom behavior.
Test in node using JSDom:
npm test
Test in the browser using Zuul and PhantomJS:
npm run test-phantom
Test locally in your browser of choice:
npm run test-local
Test for code coverage:
npm run coverage