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

@hyrious/npm-diff

v0.1.3

Published

libnpmdiff, but detects renames and works on browser

Downloads

3

Readme

@hyrious/npm-diff

libnpmdiff, but detects renames and works on browser

Usage

CLI

Use npm diff please.

API

In Node.js or with bundlers:

import { diff } from '@hyrious/npm-diff'

console.log(await diff(['[email protected]', '[email protected]']))

In browser:

<script src="https://cdn.jsdelivr.net/npm/pako"></script>
<script src="https://cdn.jsdelivr.net/npm/diff"></script>
<script src="https://cdn.jsdelivr.net/npm/@hyrious/npm-diff"></script>
<script>
  const { diff } = npmdiff
  console.log(await diff(...))
</script>

Or:

<script type="module">
  import { diff } from 'https://esm.sh/@hyrious/npm-diff'
  console.log(await diff(...))
</script>

diff([ a, b ], opts?) → Promise<String>

Fetches the registry tarballs and compare files between a spec a and spec b. The spec is usually described in <pkg-name>@<version>.

Options
  • tagVersionPrefix {String} Prefix used to define version numbers. Defaults to v.
  • diffUnified {Number} How many lines to print around each hunk. Defaults to 3.
  • diffIgnoreAllSpace {Boolean} Whether or not should ignore changes in whitespace (very useful to avoid indentation changes extra diff lines). Defaults to false.
  • diffFiles {Array<String>} If set only prints patches for the files listed in this array (also accepts globs). Defaults to undefined.
  • diffNameOnly {Boolean} Prints only file names and no patch diffs. Defaults to false.
  • diffNoPrefix {Boolean} If true then skips printing any prefixes in filenames. Defaults to false.
  • diffSrcPrefix {String} Prefix to be used in the filenames from a. Defaults to a/.
  • diffDstPrefix {String} Prefix to be used in the filenames from b. Defaults to b/.
  • diffText {Boolean} Should treat all files as text and try to print diff for binary files. Defaults to false.
  • cache_get {Function} User-defined cache getter before fetching tarballs, it takes an object { name, version } and returns a Promise that fullfils with a Uint8Array containing the tarball. Defaults to undefined, which means each tarball will be fetched without cache.
  • cache_set {Function} User-defined cache setter after fetching tarballs, it takes an object { name, version } and a Uint8Array which is the tarball content. Defaults to undefined.
  • signal {AbortSignal} Abort signal to cancel all the progress. Defaults to undefined.

Returns a Promise that fullfils with a String containing the resulting patch diffs.

Throws an error if either a or b are missing or if trying to diff more than two specs.

More Examples

Store packages in indexedDB, see idb-keyval

import * as idb from 'idb-keyval'

const patch = await diff(['[email protected]', '[email protected]'], {
  cache_get: ({ name, version }) => idb.get(`${name}@${version}`),
  cache_set: ({ name, version }, tarball) => idb.set(`${name}@${version}`, tarball),
})

Render patch to html, see diff2html

const patch = await diff(['[email protected]', '[email protected]'])
const ui = new Diff2HtmlUI($('#diff'), patch, {
  drawFileList: true,
  outputFormat: 'line-by-line',
})
ui.draw()
ui.highlightCode()

License

MIT © hyrious