microcomponent

microcomponent

Smol event based component library. Syntactic sugar around nanocomponent. Adds logging through nanologger.

Usage

var microcomponent = require('microcomponent')
var html = require('bel')

var component = createComponent()
document.body.appendChild(component.render())

function createComponent () {
  var text = null

  var component = microcomponent()
  component.on('render', render)
  component.on('update', update)
  component.on('load', load)
  component.on('unload', unload)
  return component

  function render (newText) {
    text = newText
    return html`<h1>${text}</h1>`
  }

  function update (newText) {
    return newText !== text
  }

  function load () {
    console.log('mounted on DOM')
  }

  function unload () {
    console.log('removed from DOM')
  }
}

API

component = Component([name], [state])

Create a new Microcomponent instance. Takes a name string that's used for logging data. Logging is logged on log level 'debug'. You can set the log level through localstorage.logLevel = 'debug|info|warn|error|fatal'. Also takes an object that will be initialized as this.state.

component.on(eventname, handler)

Register a new handler for an eventname. Can register any custom event, built-in lifecycle events are:

• render: (required) create a new DOMNode. If there's already been an DOMNode rendered it'll be diffed instead. Must always return an DOMNode of the same type.
• update: (required) determine if update should be called
• load: called when the element is mounted on the DOM
• unload: called when the element is removed from the DOM

component.emit(eventname, […data])

Trigger a handler on the component.

DOMNode = component.render([…data])

Render an element.

See Also

• yoshuawuyts/nanocomponent

License

MIT