jsondiffpatch (original) (raw)

0.7.3 • Public • Published 3 months ago

jsondiffpatch

jsondiffpatch.com
Diff & patch JavaScript objects

min+gzipped ~ 16KB
browser and server (ESM-only)
deep diff, use delta to patch
smart array diffing using LCS, IMPORTANT NOTE: to match objects inside an array you must provide an objectHash function (this is how objects are matched, otherwise a dumb match by position is used). For more details, check Array diff documentation
(optionally) text diffing of long strings powered by google-diff-match-patch (diff at character level)
reverse a delta, unpatch (eg. revert object to its original state using a delta)
multiple output formats:
- pure JSON, low footprint delta format
- visual diff (html), see demo
- annotated JSON (html), to help explain the delta format with annotations
- JSON Patch (RFC 6902), can generate patches, and also apply them
- console (colored), try running ./node_modules/.bin/jsondiffpatch left.json right.json
- write your own! check Formatters documentation
BONUS: jsondiffpatch.clone(obj) (deep clone)

Supported platforms

Any browser that supports ES6
Node.js 18, 20+

Usage

on your terminal:

or as a library:

// sample data const country = { name: 'Argentina', capital: 'Buenos Aires', independence: new Date(1816, 6, 9), };

// clone country, using dateReviver for Date objects const country2 = JSON.parse(JSON.stringify(country), jsondiffpatch.dateReviver);

// make some changes country2.name = 'Republica Argentina'; country2.population = 41324992; delete country2.capital;

const delta = jsondiffpatch.diff(country, country2);

assertSame(delta, { name: ['Argentina', 'Republica Argentina'], // old value, new value population: ['41324992'], // new value capital: ['Buenos Aires', 0, 0], // deleted });

// patch original jsondiffpatch.patch(country, delta);

// reverse diff const reverseDelta = jsondiffpatch.reverse(delta); // also country2 can be return to original value with: jsondiffpatch.unpatch(country2, delta);

const delta2 = jsondiffpatch.diff(country, country2); assert(delta2 === undefined); // undefined => no difference

Array diffing:

// sample data const country = { name: 'Argentina', cities: [ { name: 'Buenos Aires', population: 13028000, }, { name: 'Cordoba', population: 1430023, }, { name: 'Rosario', population: 1136286, }, { name: 'Mendoza', population: 901126, }, { name: 'San Miguel de Tucuman', population: 800000, }, ], };

// clone country const country2 = JSON.parse(JSON.stringify(country));

// delete Cordoba country.cities.splice(1, 1);

// add La Plata country.cities.splice(4, 0, { name: 'La Plata', });

// modify Rosario, and move it const rosario = country.cities.splice(1, 1)[0]; rosario.population += 1234; country.cities.push(rosario);

// create a configured instance, match objects by name const diffpatcher = jsondiffpatch.create({ objectHash: function (obj) { return obj.name; }, });

const delta = diffpatcher.diff(country, country2);

assertSame(delta, { cities: { _t: 'a', // indicates this node is an array (not an object) 1: [ // inserted at index 1 { name: 'Cordoba', population: 1430023, }, ], 2: { // population modified at index 2 (Rosario) population: [1137520, 1136286], }, _3: [ // removed from index 3 { name: 'La Plata', }, 0, 0, ], _4: [ // move from index 4 to index 2 '', 2, 3, ], }, });

For more example cases (nested objects or arrays, long text diffs) check packages/jsondiffpatch/test/examples/

If you want to understand deltas, see delta format documentation

Installing

NPM

This works for node, or in browsers if you already do bundling on your app

npm install jsondiffpatch

import {* as jsondiffpatch} from 'jsondiffpatch'; const jsondiffpatchInstance = jsondiffpatch.create(options);

browser

In a browser, you can load a bundle using a tool like esm.sh or Skypack.

Options

import * as jsondiffpatch from 'jsondiffpatch';

// Only import if you want text diffs using diff-match-patch import { diff_match_patch } from '@dmsnell/diff-match-patch';