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 component = microcomponent({
    props: {
      text: null
    }
  })
  component.on('render', render)
  component.on('update', update)
  component.on('load', load)
  component.on('unload', unload)
  return component

  function render () {
    return html`<h1>${this.props.text}</h1>`
  }

  function update (props) {
    return props.text !== this.props.text
  }

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

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

API

component = Component([{ name, props, state, pure }])

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 objects that will be initialized as this.state and this.props. For reference, a this.oldProps will always contain the state of the previous render iteration.

Set pure = true to activate the default on('update') handler, which will shallow diff props with this.props.

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, [props])

Trigger a handler on the component.

DOMNode = component.render([props])

Render an element.

See Also

• yoshuawuyts/nanocomponent

License

MIT