nanocomponent

nanocomponent

Create performant HTML elements.

Features

• works with every framework
• significantly speeds up perceived performance
• improves rendering performance
• graciously falls back if APIs are not available
• weighs ~2kb

Usage

Cache a static HTML element

var component = require('nanocomponent')
var html = require('bel')

var staticElement = component(html`
  <div>heya</div>
`)
console.log(staticElement())

Cache a dynamic HTML element

var cachedElement = component(function (foo) {
  return html`
    <div>${foo}</div>
  `
})
console.log(cachedElement())

Defer rendering until the browser has spare time available

var politeElement = component({
  placeholder: function () {
    return html`
      <p>lol not loaded yet</p>
    `
  },
  render: function () {
    return html`
      <p>HOW'S IT GOING CHAP</p>
    `
  }
})
console.log(politeElement())

Trigger lifecycle events when loading and unloading elements to the DOM

var widgetElement = component({
  onload: function () {
  },
  onunload: function (el) {
  },
  onupdate: function (foo, bar) {
    // do stuff with new arguments
  },
  render: function (foo, bar) {
    return html`
      <p>lol not loaded yet</p>
    `
  }
})
console.log(widgetElement())

API

render = nanocomponent(HtmlOrFunctionOrObject)

Create a render function for a component based depending on the arguments that are passed in:

• HTMLElement: when a valid HTML node is passed
• function: cache the result of the function until new arguments are passed
• object: create an object with different methods attached

el = render(...args)

Installation

$ npm install nanocomponent

License

MIT