vdom-as-json

Convert virtual-dom objects to and from JSON. Designed for generating virtual nodes on the server or in a web worker and then sending that to the client.

This lib can serialize both nodes and patches, but the patch JSON is a bit big due to the underlying VirtualPatch structure. For a more efficient patch serialization algorithm, check out vdom-serialized-patch.

Install

npm install vdom-as-json

If you need an AMD or browser-ready version, please use dist/vdom-as-json.js when you npm install, or download from wzrd.in. It will give you a global vdomAsJson object.

Usage

var toJson = require('vdom-as-json/toJson'); // convert node/patch to JSON

var fromJson = require('vdom-as-json/fromJson'); // rehydrate node/patch from JSON

Examples

Convert a virtual node to and from JSON

var h = require('virtual-dom/h');
var toJson = require('vdom-as-json/toJson');
var fromJson = require('vdom-as-json/fromJson');

var node = h("div", "hello");

// convert the node to json
var json = toJson(node);

// re-hydrate the node from json
var rehydratedNode = fromJson(json);

Convert a virtual patch to and from JSON

var h = require('virtual-dom/h');
var diff = require('virtual-dom/diff');
var toJson = require('vdom-as-json/toJson');
var fromJson = require('vdom-as-json/fromJson');

var node1 = h("div", "hello");
var node2 = h("div", "goodbye");
var patch = diff(node1, node2);

// convert the patch to json
var json = toJson(patch);

// re-hydrate the patch from json
var rehydratedPatch = fromJson(json);

Stringify and parse

The API returns pure JSON objects. So if you need strings, then use JSON.parse() and JSON.stringify():

var h = require('virtual-dom/h');
var diff = require('virtual-dom/diff');
var toJson = require('vdom-as-json/toJson');
var fromJson = require('vdom-as-json/fromJson');

var node1 = h("div", "hello");
var node2 = h("div", "goodbye");
var patch = diff(node1, node2);

// convert the patch to a string
var jsonString = JSON.stringify(toJson(patch));

// re-hydrate the patch from a string
var rehydratedPatch = fromJson(JSON.parse(jsonString));

Standalone

Using browserify/webpack:

var toJson = require('vdom-as-json').toJson;
var fromJson = require('vdom-as-json').fromJson;

Using the standalone browser bundle (dist/vdom-as-json.js):

var toJson = vdomAsJson.toJson;
var fromJson = vdomAsJson.fromJson;

Limitations

This library doesn't support thunks, hooks, etc., because it's not possible to serialize custom behavior.