picocomponent

Teeny tiny component system 🔍

Usage

var PicoComponent = require('picocomponent')
 
function Button () {
  PicoComponent.call(this)
  this.el = document.createElement('button')
}
 
Button.prototype = Object.create(PicoComponent.prototype)
 
Button.prototype.render = function render (text) {
  this.el.innerText = text
  return this.el
}
 
var button = new Button()
 
document.body.appendChild(button.render('Hello world!'))

API

PicoComponent.prototype

PicoComponent aims to provide a Class like interface for constructing components.

As a consumer you'll always want to extend the PicoComponent.prototype either via ES6 classes:

class Component extends PicoComponent {
  // ...
}

or by extending the base prototype:

function Component () {
  PicoComponent.call(this)
}
 
Button.prototype = Object.create(PicoComponent.prototype)

Instances of PicoComponent have the following internal properties:

• this.el: Used to manage the DOM node a component is responsible for. Defaults to null. See How do I manage DOM nodes for more info.

PicoComponent.prototype.render(...args)

You'll always want to implement a render function. This forms the public interface for your component, and will generally leverage some templating library to manage rendering and updating your component. Your render method should always return DOM nodes.

PicoComponent.prototype.connect()

When assigned, the connect handler will be called once your component has been inserted into the DOM.

PicoComponent.prototype.disconnect()

When assigned, the disconnect handler will be called once your component has been removed from the DOM.

FAQ

Is this a joke?

It may seem that way, but seriously this exists as a result of other component systems eg. nanocomponent being focused on producing components targeted at DOM morphing libraries such as nanomorph and morphdom.

For this reason picocomponent aims to be more general purpose, leaving DOM diffing strategies up to the consumer, while still providing useful features such as connect/disconnect event listeners by integrating on-load.

How do I manage DOM nodes

As a matter of convention PicoComponent implements a custom getter/setter used for managing the DOM node your component is responsible for.

When assigning a DOM node to your PicoComponent instance eg:

class Button extends PicoComponent {
  constructor () {
    super()
    this.el = document.createElement('button')
  }
}

PicoComponent will ensure all appropriate lifecycle hooks are correctly assigned.

Have you gone too far?

Eh.

See also:

• joshgillies/hypercomponent
• yoshuawuyts/nanocomponent
• yoshuawuyts/microcomponent
• yoshuawuyts/cache-element
• hypermodules/cache-component

License

MIT