❤
npm
Sign UpSign In

byo

2.1.2 • Public • Published

byo

API stability NPM version Build Status Standard Size

byo or bring your own is like choo without a renderer.

Example

Clone of the choo example, but we bring bel, nanomount, and nanomorph ourselves.

var byo = require('byo')
var html = require('bel')
var nanomount = require('nanomount')
var nanomorph = require('nanomorph')
 
var app = byo({
  mount: handleMount,
  render: handleRender
})
 
app.use(logger)
app.use(countStore)
app.route('/', mainView)
app.mount('body')
 
function handleMount (tree, root) {
  nanomount(root, tree)
  return root
}
 
function handleRender (tree, newTree, root) {
  return nanomorph(tree, newTree)
}
 
function mainView (state, emit) {
  return html`
    <body>
      <h1>count is ${state.count}</h1>
      <button onclick=${onclick}>Increment</button>
    </body>
  `
 
  function onclick () {
    emit('increment', 1)
  }
}
 
function logger (state, emitter) {
  emitter.on('*', function (messageName, data) {
    console.log('event', messageName, data)
  })
}
 
function countStore (state, emitter) {
  state.count = 0
  emitter.on('increment', function (count) {
    state.count += count
    emitter.emit('render')
  })
}

API

Under the hood, byo is essentially a fork of choo. At the moment, we'll keep byo in API parity with choo. Please refer to the choo documentation for details on routing, events, and the architecture in general. The only thing we need to document here is...

Additional Options

A couple additional options are provided for defining render methods, alongside all the supported choo options. While we refer to them as options, mount and render are required since byo has no render methods by default.

opts.mount

required | Mount the tree onto the root. Typically you will return the tree or root. Example:

function handleMount (tree, root) {
  nanomount(root, tree)
  return root
}

opts.render

required | Render the new tree. tree, newTree, and root are available for morphing. Example:

function handleRender (tree, newTree, root) {
  return nanomorph(tree, newTree)
}

opts.toString

Convert html (or vdom) to string. You'll usually define this method for server rendering. Example:

function handleToString (html) {
  return html.toString()
}

Why does this exist?

If you like choo use choo, it's rad.

But sometimes bel, nanomount, or nanomorph might not fit the needs of a project. Maybe you like virtual dom but you still want to build your apps choo-style. byo is the back-pocket tool for those scenarios. I'm maintaining this project because I currently have a need for nested components which we can't quite yet pull off with nanocomponent, so I opt for preact + hyperx.

Renderers

Here are some examples of renderers with tagged template string implementations you can byo:

virtual-dom

var vdom = require('virtual-dom')
var hyperx = require('hyperx')
var html = hyperx(vdom.h)
var rootNode
 
function handleMount (tree, root) {
  rootNode = vdom.create(tree)
  root.appendChild(rootNode)
  return tree
})
 
function handleRender (tree, newTree, root) {
  var patches = vdom.diff(tree, newTree)
  rootNode = vdom.patch(rootNode, patches)
  return newTree
})

Inferno

var Inferno = require('inferno')
var hyperx = require('hyperx')
var html = hyperx(require('inferno-create-element'))
 
function handleMount (tree, root) {
  return Inferno.render(tree, root)
})
 
function handleRender (tree, newTree, root) {
  return Inferno.render(newTree, root)
})

Preact

var preact = require('preact')
var hyperx = require('hyperx')
var html = hyperx(preact.h)
 
function handleMount (tree, root) {
  return preact.render(tree, root)
})
 
function handleRender (tree, newTree, root) {
  return preact.render(newTree, root, tree)
})

React

var React = require('react')
var ReactDOM = require('react-dom')
var hyperx = require('hyperx')
var html = hyperx(React.createElement)
 
function handleMount (tree, root) {
  return ReactDOM.render(tree, root)
})
 
function handleRender (tree, newTree, root) {
  return ReactDOM.render(newTree, root)
})

Snabby

var html = require('snabby')
 
function handleMount (tree, root) {
  html.update(root, tree)
  return tree
})
 
function handleRender (tree, newTree, root) {
  html.update(tree, newTree)
  return newTree
})

Fine Print

Thanks Yoshua Wuyts and the rest of the choo team (s/o dat) for the continual awsm work 🙏

Readme

Keywords

Package Sidebar

Install

npm i byo

Repository

github.com/jongacnik/byo

Homepage

github.com/jongacnik/byo#readme

Weekly Downloads

3

Version

2.1.2

License

MIT

Last publish

Collaborators

  • amongiants
Try on RunKit
Report malware