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

jroute.js

v0.6.0

Published

Simple Route library for browser and node

Downloads

15

Readme

route.js

npm bower

Very small and simple routing library that can be use on the server or in the browser. It use dependency injection to inject arguments to your function.

It contain only a router so it can be use anywhere. It's only the API so you need to write your own code that will execute when ever you want (like on hashchange or using HTML5 History API).

Install

You can grab the file from repo or from npm:

npm install jroute.js

or from bower

bower install route.js

and inlcude the route.js and you're good to go.

Usage

var router = new route();

// from version 0.4.0 you can use arrow functions

router.match('/foo/bar/{{id}}/{{name}}', function(name, id) {
    // name and id will be in different order
    // names in url need to match names in function
    console.log(name + ' ' + id);
});

router.exec(location.hash.replace(/^#/, ''));

if you want to execute on change of the hash so hyperlinks work you can use this code:

window.addEventListener('hashchange', function() {
    router.exec(location.hash.replace(/^#/, ''));
});

the init exec will also be needed to get init route when you refresh the page

API

  • router::route_parser(open tag, close tag): return parser function that need to be called with route the function return object {re: sting: names: array}, if you want regex object you need to use new RegExp('^' + re + '$') to have exact match, name filed contain list of names extracted from route (between open and closing tag).

  • router::extract_names(fn): return parameters names from the function (from version 0.4.0 it work with arrow functions).

  • router::test(route, path): first argument is route that cane be parsed and second is actual path, it return true if path match the route.

  • router::match(path, fn[, data]): create route, first is parsable route path as string, second is a function that will be called when exec is executed and thrid is optional data that will be stored in route, you will be able to access it in router::exec if you use a function as second argument.

  • router::exec(url[, init]): method execute route added by router::match if found any. The init paramater is a function (optioanl) that allow to execute match function with different context. The function is called with two arguments: (data from match function and callback function that need to be called with different context).

  • router::map(pattern, url): return object with mapping names taken from url, eg. if you call it with:

router.map('/user/{{name}}', '/user/foo');

it will return {name: "foo"} if pattern don't have variables it will return empty object and if it don't match it will return undefined.

  • router::pick(array, url): select one or more routes from array that match url, it return array of objects:
[{
  "pattern": "/user/{{name}}",
  "data": {
    "name": "foo"
  }
}]

for url /user/foo, or empty array if not match found.

License

Licensed under MIT license

Copyright (c) 2014-2017 Jakub Jankiewicz