JSPM – vdom-as-json@1.0.11

Package Exports

vdom-as-json
vdom-as-json/fromJson
vdom-as-json/toJson

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vdom-as-json) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.