Convert virtual-dom objects to and from JSON (UNMAINTAINED)
JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
test
.gitignore
.jshintrc
.npmignore
.travis.yml
LICENSE
README.md
fromJson.js
package.json
toJson.js

README.md

vdom-as-json Build Status Coverage Status No Maintenance Intended

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.