previewify

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.

Usage

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')

API

p = previewify([opts])

Create a new instance of Previewify. Takes optional arguments:

• opts.name (default: 'previewify') set the nav header name
• opts.url (default: '/') set the nav header url

Exposes a few internal properties:

• p.app instance of Choo
• p.components array of registered components

DOMElement = 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)

FAQ

Why isn't this a command line tool?

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.

Why did you build this?

I thought the React storybook stuff was neat, and wanted something similar for regular DOM elements.

See Also

• https://storybooks.js.org
• https://calibreapp.com/
• http://sizzy.co/
• https://developers.google.com/web/tools/lighthouse/

License

MIT