signalman
An isomorphic router to build web applications
Last updated 5 years ago by intuitivcloud .
BSD-3-Clause · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install signalman 
SYNC missed versions from official npm registry.

signalman

An tiny isomorphic router

npm Version Build Status Dependency Status License

Installation

Node

$ npm install --save signalman

Browser

Copy the file signalman.min.js in the dist folder and refer to it in your HTML:

<script src="/js/signalman.min.js"></script>

signalman will now be available via window.signalman.

Usage

Server-Side Setup

Example with a simple express server

var express = require('express'),
    signalman = require('signalman');

var app = express(),
    router = signalman(),				// create a new router
    server;

// define a route handler
router.get('/', function (cxt) {
  // cxt provides the request and response objects transparently
  cxt.response.status(200).send('Hello World\n');
});

router.get('/bye/{name}', function (cxt) {
  // access the name parameter
  cxt.response.status(200).send('Bye ' + cxt.request.params.name + '!\n');
});

// route requests from signalman
app.use(router.start());

server = app.listen(process.env.PORT, process.env.HOST, function () {
  var address = server.address(),
      host = address.address,
      port = address.port;

  console.log('Server started at: http://%s:%d/', host, port); 
});

Client-Side

Simple example using domready:

function renderHomePage(cxt) {
  var c = document.getElementById('content'),
          nameField, sayHelloButton;

  c.innerHTML = '<a href="/hello/Signalman">Say Hello Signalman!</a><br/><input type="text" id="name"/><button type="button" id="sayHello">Say Hello!</button>';

  nameField = document.getElementById('name');
  sayHelloButton = document.getElementById('sayHello');

  sayHelloButton.addEventListener('click', function (e) {
    var name = encodeURIComponent(nameField.value);
    app.router.navigateTo('/hello/' + name);
  });
}

function renderHelloPage(cxt) {
  var c = document.getElementById('content'),
          name = (cxt.params.name && decodeURIComponent(cxt.params.name)) || 'World',
          backButton;

  c.innerHTML = '<h2>Hello ' + name + '!</h2><button type="button" id="back">Go Back</button>';

  backButton = document.getElementById('back');

  backButton.addEventListener('click', function () {
    window.history.back();
  });
}

domready(function () {
  var app = window.app = {},
      router = app.router = signalman();
      
  router.get('/', renderHomePage);
  router.get('/hello/{name}', renderHelloPage);
  
  // listen to events on the router
  router.bind('navigating', function (e) {
    console.log('Router is navigating to:', e.fullPath, ', cause was:', e.cause);
  });
  
  // start the router, auto navigate to the current URL
  router.start({ autoStart: true });
});

API Reference

signalman()

Returns an instance of a router.

On the server this method may be called multiple times to get an new instance of a router each time.

In the browser, calling this method multiple-times will return the same router instance returned by the first call.

router.<HTTP Method>(path, handlers...)

Registers the specified handler(s) to be invoked in their specified sequence when a request whose path matches the path specified to this method is detected.

NOTE: Only those routes registered with the get method will also be available in the browser. Routes registered with other methods, will be ignored in the browser.

Supported HTTP Methods:
HTTP Method Router Method Name Supported in Browser?
GET get yes
POST post no
PUT put no
DELETE del no
PATCH patch no
HEAD head no
OPTIONS options no
TRACE trace no
Parameters:
  • path: the pattern that defines the route's path
  • handlers...: one or more handler/middleware functions. The handlers will be passed a navigation context object as a single parameter containing details about the navigation. Handlers defined as middleware can call the next() method on the context object to indicate that the router can call the next handler in the chain. See Navigation Context Object section below.
Example:
router.get('/hello/{name}', function (cxt) {
	// code to respond with a greeting
});

// ignored in the browser
router.post('/users', function (cxt) {
	// code to create a new user
});

router.start([options])

Starts routing requests or navigation actions.

On the server, this method returns a middleware function with the signature function (req, res, next) which can be attached with a server instance like express which supports middleware based routers.

In the browser, this method attaches itself to the window.history object listening to popstate events and using pushState and replaceState to define new history entries.

  • If autoStart option is specified as true in the options, the router automatically invokes the handler chain for the route matching the current document.location.href.

  • If handleLinks options is specified as true in the options, the router automatically intercepts click events on a tags and routes the navigation via its routes. This is true by default.

Parameters:
  • options: an optional object containing options for the router that adjust the in-browser routing behavior.
Example:

// on server, return middleware function to attach to underlying server
// in browser, start routing, intercept links but do not auto-navigate to current URL's route
router.start();

// in the browser, start routing and auto-navigate to current URL's route and intercept links
router.start({ autoStart: true });

// in the browser, start routing and auto-navigate to current URL's route but do not intercept links
router.start({ autoStart: true, handleLinks: false });

router.stop()

Stops routing navigation actions in the browser. This method only works in the browser.

When called, it detaches itself from the popstate events of window and stops intercepting click events on a tags in the document.

router.navigate(path)

Navigates to a particular route in the browser. This method is available only in the browser.

If no route was found matching the path, the router triggers a notFound event which can be bound for defining the responding behavior.

Parameters:
  • path: the path to navigate to
Example:
router.navigateTo('/hello/John%20Doe?confirm=1');

router.bind(eventName, eventHandler)

Binds the specified eventHandler function to be called when an event with the specified eventName occurs on the router.

Parameters:
  • eventName: The name of the event to bind the handler to. See below for list of routing events.
  • eventHandler: The event handler function to be invoked when the event occurs. Any event details are passed as arguments to the function.
Example:
router.bind('notFound', function (e) {
	alert('We cannot find what you\'re looking for');
});

router.unbind(eventName, eventHandler)

Un-binds the specified eventHandler function from being called when an event with the specified eventName occurs on the router.

Parameters:
  • eventName: The name of the event to unbind the handler from. See below for list of routing events.
  • eventHandler: The event handler function that was previously bound using the #bind() method.

Navigation Context Object

Represents the details of a navigation performed by the router.

A Context object is passed to all handlers in a route using which the handlers can retrieve details about the navigation from this object.

Attributes on Context Object

Name Type Description Available on Server Available in Browser
cause string Cause of the navigation yes yes
fullPath string The full URL of the navigation yes yes
path string The path part of the URL of the navigation yes yes
canUseDOM boolean true if browser DOM is accessible; false if not. yes yes
router object The instance of the router which initiated the navigation yes yes
request object The underlying request object provided by the server yes no
request.params object The URL parameters parsed by the router. Empty if none. yes no
request.query object The query-string parameters parsed by the router. Empty if none. yes no
response object The underlying response object provided by the server yes no
params object The URL parameters parsed by the router. Empty if none. no yes
query object The query-string parameters parsed by the router. Empty if none. no yes

Routing Events

Event Name Details passed Description
navigating path, method, cause, router triggered when router is navigating to a new route
notFound path, method, router triggered when the router did not find a route matching the path
error path, method, error, router triggered when a route handler/middleware threw an error while executing

License

Copyright (c) 2015, intuitivcloud Systems <engineering@intuitivcloud.com>
All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

  • Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

  • Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

  • Neither the name of signalman nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

Current Tags

  • 2.2.0                                ...           latest (5 years ago)

11 Versions

  • 2.2.0                                ...           5 years ago
  • 2.1.0                                ...           5 years ago
  • 2.0.0                                ...           5 years ago
  • 1.2.1                                ...           5 years ago
  • 1.2.0                                ...           5 years ago
  • 1.1.3                                ...           5 years ago
  • 1.1.2                                ...           5 years ago
  • 1.1.1                                ...           5 years ago
  • 1.1.0                                ...           5 years ago
  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (5)
Dev Dependencies (12)
Dependents (2)

Copyright 2014 - 2016 © taobao.org |