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 🙏

© 2026 – Pkg Stats / Ryan Hefner

varsnap

v1.11.3

Published

Varsnap Client

Readme

varsnap.js

Build Status install size

Javascript Varsnap Client. For use in both browser and node.js

Installation

Install from NPM - npm install --save varsnap

Configuration

The varsnap decorator needs to be configured with a config object with these variables:

  • varsnap - Should be either true or false. Varsnap will be disabled if the variable is anything other than true.
  • env - If set to development, the client will receive events from production. If set to production, the client will emit events.
  • branch - Used for labeling test runs by (git) branch. Test runs on the master branch will update your varsnap badge
  • producerToken - Only clients with this token may emit production snapshots. Copied from https://www.varsnap.com/user/
  • consumerToken - Only clients with this token may emit development snapshots. Copied from https://www.varsnap.com/user/

If you're deploying varsnap to a browser, note that Varsnap needs unmangled code in production to work correctly.

Usage

Wrap your functions with the varsnap decorator for any function you'd like to make better:

// Node.js
// var varsnap = require('varsnap');
import varsnap from 'varsnap';

// Browser
var varsnap = window.varsnap;

// Configuration
varsnap.updateConfig({
  varsnap: true,
  env: 'production',
  branch: 'master',
  producerToken: 'producer-abcd'
});

// Integration
function example(x, y, z) {
  // ...
}
example = varsnap(example);

example(1, 2, 3);

See example/example.js for example usage.

Typescript

If you are using typescript, make sure your tsconfig.json has a "target" to "es2015", "es6", or later. This is needed to persist function names after compiling to javascript. See https://github.com/microsoft/TypeScript/issues/5611 for details.

Testing

Use the varsnap.runTests() function.

function test() {
  const status = varsnap.runTests().then(function(status) => {
    console.assert(status);
  });;
}

If you are using mocha and chai, you can include this test script:

import { expect } from 'chai';
import varsnap from 'varsnap';

// Load the modules where varsnap is being used
import './example.js';

context('Varsnap', function() {
  this.timeout(30 * 1000);
  it('runs with production', function() {
    return varsnap.runTests().then(status => {
      expect(status).to.be.true;
    });
  });
});

See example/test.js for example usage.

Minification/Obfuscation

This client currently does not work with minification/obfuscation libraries that change class, function, and argument names. Disable any code processors that change these names. If you are using the terser package, use these configuration options to allow the varsnap client to match production and development Snaps together:

import { minify } from 'terser';

const options = {
  mangle: false,
  keep_fnames: true,
  keep_classnames: true,
}
minify(code, options);

Git Branch

Providing a git branch to the client allows Varsnap to categorize test runs. Tests on the master branch will also be reflected in your Varsnap badge image.

Client Development

Release

  1. Update Changelog with new version
  2. Update const version in varsnap/core.ts
  3. Update webpack.config.js version and run npm run package
  4. Update package.json version and run npm install
  5. Git commit, tag, and push
  6. Upload dist/* to https://github.com/albertyw/varsnap.js/releases