Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
abstract-state-router
Advanced tools
The basics of a client-side state router ala the AngularJS ui-router, but without any DOM interactions
ui-router is fantastic, and I would use it in all of my projects if it wasn't tied to AngularJS.
But I don't want to use AngularJS - I want to use [my favorite templating/dom manipulation libraries here].
Thus, this library! Written to work with browserify, it lets you create nested "states" that correspond to different parts of the url path.
If you've never used AngularJS's ui-router before, check out this post: Why your webapp needs a state-based router.
To see an example app implemented with a couple of different browser rendering libraries, click here to visit the state-router-example on Github Pages.
If you have any questions, ask me on Gitter!
If you want to use the state router with some other templating/dom manipulation library, read these docs! It's not too bad to get started.
var createStateRouter = require('abstract-state-router')
var stateRouter = createStateRouter(makeRenderer, rootElement, options)
The makeRenderer
should be a function that returns an object with four properties: render, destroy, getChildElement, and reset. Documentation is here - see test/support/renderer-mock.js for an example implementation.
The rootElement
is the element where the first-generation states will be created.
Possible properties of the options
object are:
pathPrefix
defaults to '#'
. If you're using HTML5 routing/pushState, you'll most likely want to set this to an empty string.router
defaults to an instance of a hash brown router. The abstract-state-router unit tests use the hash brown router stub. To use pushState, pass in a hash brown router created with sausage-router.throwOnError
defaults to true, because you get way better stack traces in Chrome when you throw than if you console.log(err)
or emit 'error'
events. The unit tests disable this.The addState function takes a single object of options. All of them are optional, unless stated otherwise.
name
is parsed in the same way as ui-router's dot notation, so 'contacts.list' is a child state of 'contacts'. Required.
route
is an express-style url string that is parsed with a fork of path-to-regexp. If the state is a child state, this route string will be concatenated to the route string of its parent (e.g. if 'contacts' state has route ':user/contacts' and 'contacts.list' has a route of '/list', you could visit the child state by browsing to '/tehshrike/contacts/list').
defaultChild
is a string (or a function that returns a string) of the default child's name. If you attempt to go directly to a state that has a default child, you will be directed to the default child. (For example, you could set 'list' to be the default child of 'contacts'. Then doing state.go('contacts')
will actually do state.go('contacts.list')
. Likewise, browsing to '/tehshrike/contacts' would bring you to '/tehshrike/contacts/list'.)
data
is an object that can hold whatever you want - it will be passed in to the resolve and activate functions.
template
is a template string/object/whatever to be interpreted by the render function. Required.
resolve
is a function called when the selected state begins to be transitioned to, allowing you to accomplish the same objective as you would with ui-router's resolve.
activate
is a function called when the state is made active - the equivalent of the AngularJS controller to the ui-router.
querystringParameters
is an array of query string parameters that will be watched by this state.
The first argument is the data object you passed to the addState call. The second argument is an object containing the parameters that were parsed out of the route params and the query string.
If you call callback(err, content)
with a truthy err value, the state change will be cancelled and the previous state will remain active.
If you call callback.redirect(stateName, params)
, the state router will begin transitioning to that state instead. The current destination will never become active, and will not show up in the browser history.
The activate function is called when the state becomes active. It is passed an event emitter named context
with four properties:
domApi
: the DOM API returned by the rendererdata
: the data object given to the addState callparameters
: the route/querystring parameterscontent
: the object passed into the resolveFunction's callbackThe context
object is also an event emitter that emits a 'destroy'
event when the state is being transitioned away from. You should listen to this event to clean up any workers that may be ongoing.
stateRouter.addState({
name: 'app',
data: {},
route: '/app',
template: '',
defaultChild: 'tab1',
resolve: function(data, parameters, cb) {
// Sync or asnyc stuff; just call the callback when you're done
isLoggedIn(function(err, isLoggedIn) {
cb(err, isLoggedIn)
})
}, activate: function(context) {
// Normally, you would set data in your favorite view library
var isLoggedIn = context.content
var ele = document.getElementById('status')
ele.innerText = isLoggedIn ? 'Logged In!' : 'Logged Out!'
}
})
stateRouter.addState({
name: 'app.tab1',
data: {},
route: '/tab_1',
template: '',
resolve: function(data, parameters, cb) {
getTab1Data(cb)
}, activate: function(context) {
document.getElementById('tab').innerText = context.content
var intervalId = setInterval(function() {
document.getElementById('tab').innerText = 'MORE CONTENT!'
}, 1000)
context.on('destroy', function() {
clearInterval(intervalId)
})
}
})
stateRouter.addState({
name: 'app.tab2',
data: {},
route: '/tab_2',
template: '',
resolve: function(data, parameters, cb) {
getTab2Data(cb)
}, activate: function(context) {
document.getElementById('tab').innerText = context.content
}
})
Browses to the given state, with the current parameters. Changes the url to match.
The options object currently supports just one option "replace" - if it is truthy, the current state is replaced in the url history.
If a state change is triggered during a state transition, and the DOM hasn't been manipulated yet, then the current state change is discarded, and the new one replaces it. Otherwise, it is queued and applied once the current state change is done.
stateRouter.go('app')
// This actually redirects to app.tab1, because the app state has the default child: 'tab1'
You'll want to call this once you've added all your initial states. It causes the current path to be evaluated, and will activate the current state. If the current path doesn't match the route of any available states, the browser gets sent to the fallback route provided.
stateRouter.evaluateCurrentRoute('app.tab2')
Returns true if the state name matches the current active state, and all the properties of the state parameters object match exactly the current state parameter values.
stateRouter.stateIsActive('app.tab1', { fancy: 'yes' })
Returns a path to the state, starting with an octothorpe #
, suitable for inserting straight into the href
attribute of a link.
stateRouter.makePath('app.tab2', { pants: 'no' })
To run the unit tests:
npm install
npm test
Automated browser testing provided by Browserstack.
Tested in Chrome, Firefox, Safari, and IE10+ (IE9 doesn't support replace).
A future goal is to make it possible to generate HTML for routes on the server-side, at least for the templating libraries like Ractive that do not require a DOM to generate HTML.
This requires supporting HTML5 routing (see issue linked above), and some way for the results of the initial resolve
values to be included with JSONP so that when the client-side abstract-state-router code does eventually start running, it doesn't have to re-fetch all the initial state.
I don't think this should be a huge change, but I haven't gotten around to it yet. Feel free to check out the issue above if you want to get started on it yourself.
FAQs
Like ui-router, but without all the Angular. The best way to structure a single-page webapp.
The npm package abstract-state-router receives a total of 219 weekly downloads. As such, abstract-state-router popularity was classified as not popular.
We found that abstract-state-router demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.