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

satnav

v1.0.0

Published

A micro front-end router

Readme

#Satnav

##A micro (~1.5kb gzipped) JS routing library.

Author: Joe Harlow ([email protected])


Satnav provides functionality for Regex-like paths in JavaScript. It is library agnostic and has no dependencies.

###Browser Support

Satnav is built on the hashchange event but also includes support for HTML5 pushState.

Satnav provides a built-in hashchange polyfill for older versions of browsers, however it is currently untested.

Satnav will work in the following browsers, plus most mobile browsers.

  • Microsoft Internet Explorer 8+
  • Mozilla Firefox 3.6+
  • Google Chrome 5.0+
  • Apple Safari 5.0+
  • Opera 10.6+

###Installation

Satnav can be installed with bower, by running:

bower install satnav

###Usage

Satnav can be accessed using either Satnav or sN. From here on out, we will refer to it as Satnav.

####Satnav(config /* Object */)

Satnav itself is a function object. Calling Satnav(config) will set the global variables and return itself to enable chaining of functionality.

The config object can have the following properties:

  • #####html5 (boolean) Tells Satnav to use the HTML5 pushState method. Will only work if pushState is available.

    Default: false.

  • #####force (boolean) Should a hashchange be forced again if it is the same route. Useful if you have a Single Page Website where the user could scroll away from that routes content.

    Default: false.

  • #####poll (int) Interval in ms at which the hashchange polyfill should occur.

    Default: 25.

  • #####matchAll (boolean) In integrations where a change event should fire every time even if no routes are defined, set this value to true.

    Default: false.

#####Example

Satnav({
	html5: true, // use HTML5 pushState
	force: true, // force change event on same route
	poll: 100 // poll hash every 100ms if polyfilled
});

###Methods (chainable)

####navigate(route /* Object */)

Used to define a route that Satnav should respond to. The route object should contain a path and directions property.

  • #####path (String)

    A regex-like string containing the route. Parenthesised tokens in the string will become properties in the route's params object, and a value will be required for the route to be matched. Preceding a parenthesised token with a ? will make the token optional. For eg. 'some/path/{required}/?{optional}' will match #some/path/value1 and #some/path/value1/value2, but not #some/path.

  • #####directions (Function)

    A function callback for when the route is achieved. A params object will be passed into the function containing the token/values from the route.

  • #####title (String OR Function)

    A value which can either be returned from a function or string which will then be set as the documents title. The function receives the routes params object.

#####Example

Satnav.navigate({
	path: 'some/path/{required}/?{optional}',
	directions: function(params) {
		console.log(params.required); // log value of 'required' token  
		console.log(params.hasOwnProperty('optional')); // check if optional token exists      
	},
	title: function(params) {
		return 'My Awesome route: ' + params.required;
	}
});

####otherwise(route /* Object OR String * /)

Used to define the default route that Satnav should target if no matching route is found. route can either be a string or an object with a property of path.

#####Example

Satnav.otherwise('/'); // will route all unmatched paths to #/

or

Satnav.otherwise({
	path: '/some/path/value1'
});

####change(fn /* Function */)

A function callback fired on hashchange. This function will be fired before a routes directions are fired.

The function will receive the current hash, a params object containing the token/values of the new route and another object containing the previous hashchange token/values.

#####Example

Satnav.change(function(hash,params,old) {
	console.log(hash); // log current hash
	console.log(params); // log new route values
	console.log(old); // log previous route values
});

####go()

Called at the end of a chain, go() tells Satnav to resolve the current route. This is what makes deeplinking possible.

#####Example

Satnav({
		html5: false, // don't use pushState
		force: true, // force change event on same route
		poll: 100 // poll hash every 100ms if polyfilled
	})
	.navigate({
		path: 'some/path/{required}/?{optional}',
		directions: function(params) {
			console.log(params.required); // log value of 'required' token  
			console.log(params.hasOwnProperty('optional')); // check if optional token exists      
		}
	})
	.navigate({
		path: 'another/path/?{optional}',
		directions: function(params) {  
			console.log(params.hasOwnProperty('optional')); // check if optional token exists      
		}
	})
	.otherwise('/') // will route all unmatched paths to #/
	.change(function(hash,params,old) {
		console.log(hash); // log current hash
		console.log(params); // log new route values
		console.log(old); // log previous route values
	})
	.go()

###Deferring Hash Changes

Satnav includes the ability to defer a routes directions. This is extremely useful in builds where an animation off is required to happen before something else animates on for the new route.

####How-to

By returning Satnav.defer or this.defer in the change callback, Satnav will wait until the promise is resolved until continuing to the directions of the new route.

Satnav
	.navigate({
		path: 'some/path/{required}/?{optional}',
		directions: function(params) {
			console.log('Fires 4 seconds after change callback');
		}
	})
	.change(function(hash,params,old) {
		console.log('Change callback');
		setTimeout(function() {
			Satnav.resolve(); // we resolve Satnav 4 seconds after the change event is fired
		}, 4000)
		return this.defer; // return promise object
	})
	.go();
	

###License

Copyright (C) 2013 Joe Harlow (Fourth of 5 Limited)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.