What is BlueJacket?
BlueJacket is a tiny (~125LOC) router, that provides simple, Express Style routing for both the server and the browser. It uses the popular middleware style of the ExpressJS router with a few tweaks for better readabilty.
Please note, BlueJacket does not come with an ES5-ready distribution out of the box. It needs to be transpiled for usage on the browser. It is assumed that you will be doing this as part of the build process for your application.
To get started install BlueJacket.
yarn add bluejacket
npm install --save bluejacket
Let's create a route
/gists, which will fetch a list of public gists from Github and display their titles.
const BlueJacket = ;const fetch = ;const router = ;// Shared coderouter;// Browser Codeconst context = router;documentdocumentElementinnerHTML = contexthtml || ''; // Don't actually do this. innerHTML is BAD.// Server Code// app is an expressJS appapp;
Main router class.
const BlueJacket = ;const router = options;
options: [Optional] Options object with properties:
mixins- An object whose properties get merged into the
contextobject passed to the request handlers.
- Default :
- Default :
caseSensitive- Specify if paths should be treated as case sensitive, while routing.
strict- Specify if
/pathshould be treated as distinct from
instanceKey- A key used to uniquely identify this router instance. You can call the constructor again, with this instanceKey to get the same router instance. If not specified, instances are not tracked. Ex:
const router = caseSensitive: true instanceKey: 'universe-router' ;
const router = instanceKey: 'universe-router' ;routeroptscaseSensitive; //true
path- Optional string or regex denoting an expressJS style path. If none specified all paths will match against this handler.
handler- Function, Array of Functions, or destructured Array of Functions. Function can be async also. Ex:
If single function is provided, it will be triggered when the route matches.
If list of functions provided, each will be triggered in series:
If any handler in the list is an Array of functions, all those functions will be triggered parallelly:
You can also mix and match above options as required:
If a handler function called in series
throws, the remaining handlers will not be triggered. If a handler function called in parallel
throws, the other parallel handlers will continue execution, but any subsequent serial handlers will not be triggered.
If you wish to skip the handlers after the current handler, you can
throw the string
This will cause the resolution of the request to terminate.
Note that, when you throw
route, it will be implicitly caught by BlueJacket. If you throw anything else, BlueJacket will catch and throw it again.
Each handler will be called with a
context object. The context object is created at the start of the request life-cycle and then passed throught to subsequent handlers. If you wish to pass data between handlers, use the
context object to do os.
The context object has the following properties:
dataobject that the request resolution is requested with.
params: If you have any express style route params, these will be listed here in key value form. Regex capture groups will also appear here.
route: The actual route being resolved.
router: The router instance resolving this request.
- Other properties from the
mixinsoption defined on this router. If any mixin has the same name as one of the above properties it will be overwritten.
context object passed to the handlers is the same object. So modifications to the
context object will impact other routers. Keep this in mind, esp when modifying
context object in parallelly defined handlers.
This is the method that is called to actually resolve your request.
path- Request path to resolve.
data- Data to resolve with. This data is made available to your handlers as
dataproperty on the
This method returns:
context- The shared context object that was passed through the request handlers list.
Usage in browser:
router;const context = router;
Usage on server:
router;//Assuming you are using express and app is an express appapp;
Once all handlers have been executed, or an error thrown by any of the handlers, or any handler
throws the string
route, i.e. once the request resolution has either completed or been terminated, the context object will be made available as the return value of the
You can then use this
context object to perform any rendering that you might wish to do.
Please note that, by default, the router does not perform any kind of 'rendering'. It is up to you to render the response from the
context object returned by
router;router;router;const context = router;documentdocumentElementinnerHTML = contexthtml || ''; // Don't actually do this. innerHTML is BAD.
Server rendering with ExpressJS
router;router;router;// app is an expressJS appapp;
And that's pretty much it! I'll add a few examples for things like rendering React shortly.