Today I came across Julian Gruber's package npm-diff, which solves a problem that I regularly have.

You probably know the situation: you update one dependency in your Node.js project, and everything breaks. Even though this update was supposed to be a backward-compatible patch release, things went down. How can you now create a diff of the two npm packages quickly? Go to GitHub and make a diff there? I always found this process to be cumbersome.

This situation is where the npm-diff command comes into play. 🎉

You can install the package globally or use it via npx. The usage is straightforward. Define the package name paired with two release version numbers, and you can access a diff of the two package versions.

npm-diff <package-name> <release-1> <release-2>

npm-diff web-vitals-element 1.0.0 1.0.1

The bare-bones command creates an "uncolored diff" of the two package versions. As Julian describes in the package documentation, you can pipe the npm-diff output into colordiff (which you probably have to install first) and less to see a nicely colored diff.

npm-diff web-vitals-element 1.0.0 1.0.1 | colordiff | less

That's much better already! I took it one step further.

delta is a diff tool with syntax highlighting

A while ago, I started using delta for git diffs on the command line. It's fantastic! It shows line numbers, supports syntax highlighting, and is highly configurable. It even supports side-by-side diffing in the terminal!

npm-diff web-vitals-element 1.0.0 1.0.1 | delta | less

That looks pretty great if you ask me!

And as a last step, because I don't see myself using npm-diff without the colorful output, I added an npm-diff shell function to my environment.

function npm-diff() {
  command npm-diff $1 $2 $3 | delta --width $(tput cols) | less
}

If you wonder what the tput makes in there, I have delta configured to show always the side-by-side view. This view requires a width definition and tput allows me to span the diff over the full terminal width.

Happy diffing! 👋