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.
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.
var toJson = require('vdom-as-json/toJson'); // convert node/patch to JSON
var fromJson = require('vdom-as-json/fromJson'); // rehydrate node/patch from JSONvar 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);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);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));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;This library doesn't support thunks, hooks, etc., because it's not possible to serialize custom behavior.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent