macrocomponent
v2.0.0
Published
Convenience wrapper around nanocomponent, for the most common case
Downloads
10
Readme
macrocomponent
Convenience wrapper around the nanocomponent DOM component library, for the most common case.
Example
Instead of this boilerplate-y thing:
const Component = require('nanocomponent')
const html = require('bel')
const morph = require('nanomorph')
const inherits = require('util').inherits
function View () {
Component.call(this)
this.foo = null
this.bar = null
}
inherits(View, Component)
View.prototype._update = function (state) {
return state.foo !== this.foo
|| state.bar !== this.bar
}
View.prototype._render = function (state) {
this.foo = state.foo
this.bar = state.bar
const el = html`
<p>
Hey ${state.foo}, how are you ${state.bar}ing?
</p>
`
if (this._element) morph(this._element, el)
else this._element = el
return this._element
}
You can now do this:
const component = require('macrocomponent')
const view = component(() => `
<p>
Hey ${this.props.foo}, how are you ${this.props.bar}ing?
</p>
`)
..and it implements the same logic!
Installation
$ npm install macrocomponent
API
component(render)
License
MIT