npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details


  • User packages



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.


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 🙏

© 2023 – Pkg Stats / Ryan Hefner




Another router library, yet the simplest one.




UrlHub: Yet another router library, but the simplest one

Build Status npm version

Is another new routing library needed? Probably not, UrlHub is a router that make the work like any other javascript routing library. The difference is that UrlHub is SIMPLE, it's made to be understood completely just by reading this file.


npm install urlhub

Translating URLs to other things

Think of UrlHub as a library to translate URLs into something else (that's a nice definition for a router). Let's create a test router.

var urlhub = require('urlhub');
var pushStrategy = require('urlhub/pushStrategy');

var routes = [
  {path: '/home', cb: 'Sweet Home'},
  {path: '/users', cb: 'Users screen', children: [
    {path: '/:userId', cb: 'SingleUser'}

var router = urlhub.create( {strategy: pushStrategy} );
router.setRoutes( routes );

The router has been defined with 3 routes:

  • /home
  • /users
  • /users/:userId (Child of /users)

The cb (named after callback) attribute is what the router returns when a url matches one of the defined routes. With the example above we are translate URLs into strings.

location = router.match('/home');
// location.matches will be ["Sweet Home"]

location = router.match('/users/937264923');
// location matches will be ["Users screen", "SingleUser"]

The matches attribute is the translation of the URL. Since we defined the "/home" route with the string "Sweet home" as its cb, we get that same string back when there is a match on that route. Nested routes will match all the parent routes, that's why the matches attribute is an array.

router.match returns much more useful information from the url:

location = router.match('/users/937264923?foo=bar#my_hash');
/* location value will be:
  hash: "#my_hash",
  matches: ["Users screen", "SingleUser"],
  matchIds: ["/users/", "/users/:userId], 
  params: {userId: "937264923"},
  pathname: "/users/937264923",
  query: {foo: 'bar'},
  route: "/users/:userId",
  search: "?foo=bar"

As you can see, UrlHub does nothing else than parsing and translating URLs. If we give it a string as cb it will be returned on a URL match, but you'd probably want to pass a function as cb to be executed after the match, or a React component in order to display it after routing.

Detecting URL changes

The second nice feature that any router must have is detecting changes in browser's location to react properly to them. That's why we need a routing strategy: the mechanism to define what is a URL change, and how to navigate without a page refresh.

There are 2 routing strategies shipped with UrlHub, the HTML5's pushState strategy, and the Hash strategy, that updates the URL's hash to navigate. Both strategies are used in the same way by urlhub:

We create our router like this:

var urlhub = require('urlhub');
var hashStrategy = require('urlhub/hashStrategy');

var router = urlhub.create( {strategy: hashStrategy} );

router.setRoutes( routes );
router.onChange( function( location ){
  // The location object is the same returned by the `match` method.
  // This will be triggered by any change in the browser's URL.
  // We can load our content here depending on the route match.

// Start listening to URL changes

We can also create a router, to get the instance and set the strategy afterwards:

var router = urlhub.create({})
// ... later ...
router.setStrategy( hashStrategy );


UrlHub come with some useful methods to let the developers navigate programmatically without hassle.

// Go to the `/users` path

// Replace current location in history by `/users/874922`

// It's possible to use partial location objects to update the route
router.push({query: {foo: 'anotherBar'}})

Intercepting route changes

A nice feature in urlhub is the ability of preventing route changes by using the onBeforeChange hook. Imagine that our app has some route '/restricted' that can only be accessed for users that are logged in, we can add this restriction easily:

// The hook function receives the next route as a location object
router.onBeforeChange( function(location){
  if( location.pathname === '/restricted' && !userIsLoggedIn() ){
    // In this case we go to the login screen
    return '/login';

  // In any other case, don't intercept the route
  return location;

What else?

That's basically all the functionality. This is still a work in progress, still need:

  • Document the API and options.
  • There is a Link React component shipped. Document it.
  • How to use in node.js without a browser.
  • Write an article to make clear all the advantages.


MIT licensed