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

state-diff

v0.0.4

Published

Given two objects this module outputs a stream of paths to all changed properties

Downloads

9

Readme

Find differences between two objects.

This module will tell you the path to each difference, e.g. foo.bar.baz, but will not tell you anything about the type of difference (addition, change, deletion).

This is useful for quickly checking for state changes in a simple and backwards-compatible manner.

Streaming mode is not yet working in a properly async fashion so your process will still have to wait until the entire diff is complete.

Other ways

Modern browsers have the Proxy object which is great for watching for state changes. Older firefox browsers have Object.observe which could also be used but is now obsolete.

The problem is that Proxy only works for very modern browsers and a shim is impossible for most browsers without resorting to polling.

The other way to check for object changes is to dynamically re-build the object with every property replaced with setters and getters using Object.defineProperty({set: <function>, get: <function>}). This is the method used by mobx under the hood.

This method is backwards compatible and probably scales better than diffing but has some non-obvious drawbacks:

  • Adding and removing object properties cannot be detected since Object.defineProperty must specify the property (no catch-alls) and does not catch deletions
  • Adding and removing elements to an array cannot be detected unless it is done with .push and .pop since it is equivalent to adding and removing object properties
  • Arrays are re-implemented as generic objects in order to overwrite and intercept .push and .pop which causes problems with checks for instanceof Array (though this is a solvable problem, it seems it's just a problem with the mobx implementation)

These limitations could be easily managed as long as developers are aware of them, however if any module is used which acts on arrays or objects in any of the undetected ways then this could cause really annoying and hard-to-debug issues.

Also, unfortunately the mobx implementation is in TypeScript :/

This method likely scales better for very large objects where small changes happen often since no diffing needs to take place when the object changes, however every change to the object will need to be re-built using Object.defineProperty so it might actually scale worse for large changes.