# vdom-serialized-patch

> Serialize and apply patches from virtual-dom

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

## Install

```sh
npm install vdom-serialized-patch
pnpm add vdom-serialized-patch
yarn add vdom-serialized-patch
bun add vdom-serialized-patch
```

## 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.8 |
| Published | 2017-02-20 |
| First published | 2015-11-12 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 56 |
| Author | Nolan Lawson |
| Maintainers | nolanlawson |
| Keywords | virtual, dom, serialized, web worker |

## Links

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

## Dependencies (1)

- [vdom-as-json](https://npm.io/package/vdom-as-json.md) 1.0.9

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2017-02-20
- 1.0.7 — 2016-06-08
- 1.0.6 — 2016-03-24
- 1.0.5 — 2016-02-05
- 1.0.4 — 2016-01-30
- 1.0.3 — 2016-01-10
- 1.0.2 — 2015-11-12
- 1.0.1 — 2015-11-12
- 1.0.0 — 2015-11-12

## README

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

Serialize [virtual-dom](https://github.com/Matt-Esch/virtual-dom) patches into a very efficient JSON format, and then patch the DOM directly from that object.

Designed for generating patches on the server or in a web worker and then sending that to the client. Basically this a more efficient and specialized version of [vdom-as-json](https://github.com/nolanlawson/vdom-as-json).

Motivation
----

The `virtual-dom` library is great, but the problem is that the `VirtualPatch` object structure is:

1. huge – containing the entire source node as well as the patch object and the object to be patched – and
2. unserializable, since it uses custom classes like `VirtualPatch` and `VirtualText`.

This library solves both those problems, although to do so it has to implement its own version of `virtual-dom/patch`. So you'll have to use this library's `patch` method.

Install
----

    npm install vdom-serialized-patch
    

Usage
---

```js
var h = require('virtual-dom/h');
var diff = require('virtual-dom/diff');
var serializePatch = require('vdom-serialized-patch/serialize');
var applyPatch = require('vdom-serialized-patch/patch');

var node1 = h('span', 'hello');
var node2 = h('span.heavy', {style: {'font-weight': 'bold'}}, 'hello world');

var patch = diff(node1, node2);
var serializedPatch = serializePatch(patch);

applyPatch(document.querySelector('#my-element'), serializedPatch);
```

In this case, the serialized patch will look like this:

```json
{
  "0": [
    [
      4,
      {
        "style": {
          "font-weight": "bold"
        },
        "className": "heavy"
      },
      {
        "p": {}
      }
    ]
  ],
  "1": [
    [
      1,
      {
        "t": 1,
        "x": "hello world"
      }
    ]
  ],
  "a": [
    [
      null
    ],
    1
  ]
}
```

(This structure is not designed to be human-readable; it's designed to be efficient when doing `JSON.stringify`/`JSON.parse`).

Limitations
---

This library, like `vdom-as-json`, doesn't support thunks or hooks or any of that stuff, because it's not possible to serialize custom behavior.

Testing this library
---

Test in node using JSDom:

    npm test

Test in the browser using Zuul and PhantomJS:

    npm run test-phantom

Test locally in your browser of choice:

    npm run test-local

Test for code coverage:

    npm run coverage

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