nanocomponent

nanocomponent

1kb library to wrap native DOM libraries to work with DOM diffing algorithms.

Usage

// Implementer API
var Nanocomponent = require('nanocomponent')
var html = require('bel')

function MyButton () {
  if (!(this instanceof MyButton)) return new MyButton()
  this._color = null
  Nanocomponent.call(this)
}
MyButton.prototype = Object.create(Nanocomponent)

MyButton.prototype._render = function (color) {
  this._color = color
  return html`
    <button style="background-color: ${color}">
      Click Me
    </button>
  `
}

MyButton.prototype._update = function (newColor) {
  return newColor !== this._color
}

// Consumer API
var MyButton = require('./my-button.js')
var myButton = MyButton()
document.body.appendChild(myButton.render())

API

Nanocomponent.prototype()

Inheritable Nanocomponent prototype. Should be inherited from using Nanococomponent.call(this) and prototype = Object.create(Nanocomponent).

Internal properties are:

• _this.placeholder: placeholder element that's returned on subsequent render() calls that don't pass the ._update() check.
• _this.element: rendered element that should be returned from the first ._render() call. Used to apply ._load() and ._unload() listeners on.
• _this.hasWindow: boolean if window exists. Can be used to create elements that render both in the browser and in Node.
• _this.loaded: boolean if the element is currently loaded on the DOM.
• _this.onload: reference to the on-load library.

DOMNode|placeholder = Nanocomponent.prototype.render()

Create an instance of the component. Calls prototype._render() if prototype._update() returns true. As long as the element is mounted on the DOM, subsequent calls to .render() will return a placeholder element with a .isSameNode() method that compares arguments with the previously rendered node. This is useful for diffing algorithms like nanomorph which use this method to determine if a portion of the tree should be walked.

Nanocomponent.prototype._render([arguments])

Render an HTML node with arguments. For prototype._load() and prototype._unload() to work, make sure you return the same node on subsequent renders. The Node that's initially returned is saved as this._element.

Nanocomponent.prototype._update([arguments])

Return a boolean to determine if prototype._render() should be called. Evaluates to true if not implemented. Not called on the first render.

Nanocomponent.prototype._load()

Called when the component is mounted on the DOM.

Nanocomponent.prototype._unload()

Called when the component is removed from the DOM.

Installation

$ npm install nanocomponent

See Also

• bendrucker/document-ready
• shama/bel
• shama/on-load
• yoshuawuyts/choo
• yoshuawuyts/nanomorph
• yoshuawuyts/nanoraf
• yoshuawuyts/nanotick
• yoshuawuyts/observe-resize
• yoshuawuyts/on-intersect
• yoshuawuyts/polite-element

Similar Packages

• shama/base-element
• yoshuawuyts/cache-element

License

MIT