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

@peter.naydenov/route-emitter

v2.2.0

Published

Changes in URL are converted in events according routes definition list

Downloads

42

Readme

Route-emitter (@peter.naydenov/route-emitter)

version license GitHub issues npm bundle size

Provide an list of "application addresses"(in brief: 'address list') and route-emitter can take control over change of the URL, page titles and browser history records.

What route-emitter can do?

  • Every external change of the URL will be measured against the address list. Router will generate one of the 3 possible signals(change,refresh,error) and will execute a callback function if any provided;
  • Router can change the URL by calling the method navigate with the address name and data. route-emitter will generate and change the URL, will change page title and will set a browser history record if needed.
  • Update your address list at any time. Router will start using the new list immediately;

Important Notes

  • Calling method navigate will NOT generate signal to change(prevents infinite loop);
  • Router don't have any route logic build in. Everything is programmable from outside;
  • If url is not recognized, router will signal an error;
  • Signal reload means that requested url is the same as the current url;
  • Calling navigate with address and wrong set of data will generate signal error;

Application Address Definition

const address = {
               name: 'about'                 // required
             , path: '/about/:name'          // required
             , title: x => `About ${x.name}` // optional
             , inHistory: true               // optional
        }
// path: string. Path to be matched;
// name: string. Name of the address used also for event name;
// title: string|function. Title of the page. ( optional, default value: App title);
// inHistory: boolean. If true, will add record in the browser history. (optional, default value: false);

// Address can be a redirect address. Then possible fields are:
const redirectAddress = {
               name: 'about'                 // required
             , path: '/about/:name'          // required
             , redirect: 'home'              // required
             , data: { name: 'Peter' }       // optional
        }
// redirect: string. Name of the address to be redirected. Address should be in the address list;
// data: object. Data to be passed to the redirected address;

Instalation

Install for node.js projects by writing in your terminal:

npm install @peter.naydenov/route-emitter

Once it has been installed, it can be used by writing this line in JavaScript project:

import routeEmitter from '@peter.naydenov/route-emitter'

How to use it

Router has 2 configuration options:

  • appName : string. Used as page title if address don't have title. Default value: 'App title';
  • sessionStorageKey : string. Used to store in sessionStorage the last route. Default value: '_routeEmmiterLastLocation';

Configuration if needed could be provided to routeEmmiter during initialization:

const config = { appName: 'My App', sessionStorageKey: 'myAppLastLocation' }
const router = routeEmmiter ( config )

Before run the router provide at least one address - current address. On run the router will start evaluating the URL against the address list. If URL is not recognized, the router will signal an error. If URL is recognized, the router will signal change and will execute the callback function if any provided.

// create the router instance:
const router = routeEmmiter ()
// set application title & addresses:
router.setAddresses ( addressList )
// listen for 'error' signal 
router.onError (({code, message}) => console.log ( code, message )   )
router.onChange ((name, data) => console.log ( `Address "${name}" was loaded successfully`)   )
// run the router
router.run ()
// -> Address "home" was loaded successfully

Route-emitter Methods

// Router Methods
   setAddresses        : 'Set the address list'
 , removeAddresses     : 'Remove addresses from the list by name'
 , getCurrentAddress   : 'Returns the current address name and data'
 , navigate            : 'Change current address. Will not generate "change" signal'
 , createURL           : 'Create URL from address name and data (In version 2.1.0 and above)'

 , onChange  : 'Register a callback function for "change" signal'
 , onRefresh : 'Register a callback function for "refresh" signal'
 , onError   : 'Register a callback function for "error" signal'

 , run : 'Start the router'

 , listActiveAddresses : 'Returns a list of active addresses names'
 , listActiveRoutes    : 'Returns a list of active addresses and their paths. (Mostly used for debugging)'
 , destroy             : 'Destroy the router'

External Links

Credits

'@peter.naydenov/route-emitter' was created and supported by Peter Naydenov.

License

'@peter.naydenov/router-emitter' is released under the MIT License.