When building applications you usually create a set of stateful components. For example a button can be clicked, disabled, have different types of text on it and more. If you're not testing all states, it can be easy for regressions to pop back up. That's where preview tools become useful: they allow you to view all the states of your components and pages, so making sure all different states work as expected.
var previewify = require('previewify')
var html = require('bel')
var p = previewify()
var button = p.component('button')
button.add('with text', function (emit) {
return html`
<button onclick=${emit.bind(emit, 'clicked')}>
Hello button
</button>
`
})
button.add('with emoji', function (emit) {
return html`
<button onclick=${emit.bind(emit, 'clicked')}>
✌️🙆🌿
</button>
`
})
p.mount('body')
p = previewify([opts])Create a new instance of Previewify. Takes optional arguments:
opts.name (default: 'previewify') set the nav header nameopts.url (default: '/') set the nav header urlExposes a few internal properties:
p.app instance of Choop.components array of registered componentsDOMElement = p.start()Start the instance, returns a DOM tree that can be mounted on the DOM.
p.mount(node)Start and mount the instance on the DOM. Node can either be a DOM node or a string. Replaces the selected Node.
component = p.component(name)Create a new component with a name.
component.add(name, callback)Add a new state of the component.
component = p.page(name)Create a new page with a name. (To be implemented)
page.add(name, callback)Add a new state of the page. (To be implemented)
Separation of concerns, this is just a UI module - use bankai or a similar compiler tool if you want to have a live reloading dev environment for your components.
I thought the React storybook stuff was neat, and wanted something similar for regular DOM elements.