npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

deep-diff-patcher

v1.0.6

Published

Compare the differences between two objects and apply the patch

Downloads

604

Readme

deep-diff-patcher

deep-diff-patcher is a node.js module which provides utility functions to both compare the differences between two objects and apply the generated patch somewhere. The main reason this was written was to help compress state changes on the server side so that only the deltas/patches are sent across the wire and are applied properly to the client state at the other end.

In this library, a patch refers to a JSON object that defines an array of operations that you need to apply to the origin object to reach the target object. It is similar to other implementations out there but not the same. I have tried to keep the patch payload as small as possible.

A patch can be applied to an object so that it changes the original (mutates it), or it can be applied so that it reduces the original (returns a different object). Avoiding direct state mutation is crucial when working with immutable state like in React hooks.

Features

  • Create a patch object by working out the differences between two objects, an origin and a target.
  • Apply the patch to an object so that it mutates that object.
  • Apply the patch to an object to reduce it to another object. Useful for processing state, e.g. with React.js
  • No recursion! (see below)
  • Full array comparison works out if items have been removed, inserted or deleted as efficiently as possible.
  • Focus on avoiding patch bloat if objects are too dissimillar.
  • Unit tests using jest.
  • The special javascript Date object is automatically serialized and unserialized.
  • Note: Other special data types are not supported yet: Symbol, Undefined, BigInt

Note about recursion

Recursion is almost always a memory hog and should really be considered an antipattern for programmers. In this case, for example, comparing two very deep objects will use up exponential memory resources O(n*n) if using comparison code that recurses at each nesting level. By avoiding recursion, the code uses less memory O(n) in the same situation so is more memory efficient.

Install

npm install deep-diff-patcher

Example


import { compare } from 'deep-diff-patcher';

let origin = {
    one: 1,
    two: {
        three: 3,
    },
    four: {},
    $del: null,
    things: ["one", "two", "three", "four"],
}

let target = {
    one: 1,
    two: {
        three: 3,
        four: 4,
    },
    four: {
        a: 1,
        b: {},
    },
    things: ["one", "one and a half", "two", "three", "four"],
}

const patch = compare(origin, target);
console.log("Patch", JSON.stringify(patch, null, 4));

/*
Patch [
    {
        "t": "u",
        "p": [
            "$del"
        ]
    },
    {
        "t": "p",
        "i": 1,
        "r": 0,
        "v": [
            "one and a half"
        ],
        "p": [
            "things"
        ]
    },
    {
        "t": "s",
        "p": [
            "two",
            "four"
        ],
        "v": 4
    },
    {
        "t": "s",
        "p": [
            "four",
            "a"
        ],
        "v": 1
    },
    {
        "t": "s",
        "p": [
            "four",
            "b"
        ],
        "v": {}
    }
]
*/

Other notes

Object comparison

The idea is to create the smallest patch size to represent the data change. Sometimes an object (or some sub object deeper down the structure) has changed so much that it becomes more efficient to just set a new object with all its data in a single patch operation, rather than work out every single key difference. There is a cutoff used to determine if two objects are different enough and it won't bother comparing any deeper if this is the case. This would be a waste of CPU and could bloat the patch.

Array comparison

Array comparison is complicated. We want to detect the case where a 100 item array has had 1 item unshifted to index 0. Every item in that array will now change position since all items will be shifted, but we don't want 100 update operations within our patch, or to set the whole array again in 1 large patch operation. The array comparison library tries to work out the minimum number of differences as efficiently as possible with arrays that have only a few changes. As with object comparison (see above), if the array has had significant alterations that mean listing every change becomes less efficient than defining the whole array again, we don't bother to.