# vdom-as-json

> Convert virtual-dom objects to and from JSON objects

Latest version **1.0.11** (published 2017-02-02) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install vdom-as-json
pnpm add vdom-as-json
yarn add vdom-as-json
bun add vdom-as-json
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.11 |
| Published | 2017-02-02 |
| First published | 2015-10-24 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 64 |
| Author | Nolan Lawson |
| Maintainers | nolanlawson |
| Keywords | virtual, dom, json, virtual-dom, vdom |

## Links

- npm: https://www.npmjs.com/package/vdom-as-json
- Repository: https://github.com/nolanlawson/vdom-as-json
- Homepage: https://github.com/nolanlawson/vdom-as-json#readme
- Issues: https://github.com/nolanlawson/vdom-as-json/issues
- npm.io page: https://npm.io/package/vdom-as-json

## Dependencies (1)

- [virtual-dom](https://npm.io/package/virtual-dom.md) ^2.1.1

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.11 (latest) — 2017-02-02
- 1.0.10 — 2017-01-01
- 1.0.9 — 2016-06-08
- 1.0.8 — 2015-11-03
- 1.0.7 — 2015-11-03
- 1.0.6 — 2015-11-01
- 1.0.5 — 2015-10-30
- 1.0.4 — 2015-10-29
- 1.0.3 — 2015-10-25
- 1.0.2 — 2015-10-25
- 1.0.1 — 2015-10-25
- 1.0.0 — 2015-10-24

## README

vdom-as-json [![Build Status](https://travis-ci.org/nolanlawson/vdom-as-json.svg)](https://travis-ci.org/nolanlawson/vdom-as-json) [![Coverage Status](https://coveralls.io/repos/nolanlawson/vdom-as-json/badge.svg?branch=master&service=github)](https://coveralls.io/github/nolanlawson/vdom-as-json?branch=master)
----

Convert [virtual-dom](https://github.com/Matt-Esch/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](https://github.com/nolanlawson/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](https://wzrd.in/standalone/vdom-as-json@latest). It will give you a global `vdomAsJson` object.

Usage
---

```js
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

```js
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

```js
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()`:

```js
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:

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

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

```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.

---
_Source: https://npm.io/package/vdom-as-json · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._