virtualdom-state-renderer

Use virtual-dom with abstract-state-router!

example

index.js

var StateRouter = require('abstract-state-router')
var virtualdomRenderer = require('virtualdom-state-renderer')
var domready = require('domready')
 
var stateRouter = StateRouter(virtualdomRenderer, 'body')
 
// add whatever states to the state router
stateRouter.addState({
    name: 'app',
    route: '/',
    template: require('./template.js')
})
 
domready(function() {
    stateRouter.evaluateCurrentRoute('app')
})

template.js

module.exports = function template(h, resolveContent, helpers) {
    return (
        h('div', [
            h('p', 'Pretty sweet, isn\'t it?'),
            h('p', 'Here, let me give some examples or something.')
        ])
    )
}

api

var virtualdomRenderer = require('virtualdom-state-renderer')

virtualdomRenderer

Pass this object into the StateRouter.

var Router = require('abstract-state-router')
var renderer = require('virtualdom-state-renderer')
 
Router(renderer, 'body')

templates

A template is a function that returns a virtual-dom object. If you wanted, you could use the virtual-html library to generate a virtual-dom object.

The function is supplied with these arguments:

• h is a function that returns a virtual-dom node. View API here.
• resolveContent is the resolve content, which is the set in the resolve callback. See the resolve() function docs.
• helpers is an object with the following properties:
  • var active = isActive(stateName, parameters) is a reference to stateRouter.stateIsActive(stateName, parameters). Returns true or false.
  • var class = active(stateName, parameters) is an abstraction to stateRouter.stateisActive(stateName, parameters). Returns 'active' or ''.
  • var url = makePath(stateName, parameters) is a reference to stateRouter.makePath(stateName, parameters). This function returns a URL for the given state and parameters.
  • killEvent(ev) is a function that does ev.preventDefault() and ev.stopPropagation().
  • emitter is the event emitter that is on the domApi. This allows a bit of communication between the template's DOM events (e.g. a mouse-click), and the activate() function.

template.js

var virtualHtml = require('virtual-html')
 
module.exports = function template(h, resolveContent, helpers) {
    var html = (
        '<div>' +
            '<p>Pretty sweet, isn\'t it?</p>' +
            '<p>Here, let me give some examples or something.</p>' +
            '<a href="' + helpers.makePath('app') + '">' +
                'Click to go to the "app" state.' +
            '</a>' +
        '</div>'
    )
    return virtualHtml(html)
}

domApi

This object is exposed by the state router in the activate() function. The object has the following properties:

• el is the DOM element that is created/updated.
• emitter is the event emitter on helpers. This allows the template to request an update, or something.
• sharedState is the object that comes from the resolve content, which is the set in the resolve callback. See the resolve() function docs.
• update() is a function that will render the template, and update the DOM if necessary.

license

VOL