Awesome
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 ifupdate
should be calledload
: called when the element is mounted on the DOMunload
: 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.