virtualdom-state-renderer

1.0.0 • Public • Published

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:

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

install

npm i virtualdom-state-renderer

Downloadsweekly downloads

4

version

1.0.0

license

none

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability