nanocomponent
Advanced tools
Changelog
6.1.0 - 2017-08-14
Changelog
6.0.1 - 2017-08-09
f9f7540415
] - load & unload callbacks should be passed el (timwis)Changelog
6.0.0 - 2017-08-09
🎉 nanocomponent and [cache-component][cc] are merged into one module: nanocomponent@6.0.0
🎉.
Be sure to read the README so that you get an understanding of the new API, but here is a quick summary of what has changed from the perspective of both modules:
cache-component@5
nanocomponent@6
is mostly the same as cache-component@5
except a few methods are renamed and everything you interact with has had the _
prefix removed.
_element
[getter][getter] is renamed to element
._willMount
is renamed to beforerender
because DOM mounting can't be guaranteed from the perspective of a component._didMount
is removed. Consider using load
instead now._update
is renamed to update
and should always be implemented. Instead of the old default shallow compare, not implementing update
throws. You can require('nanocomponent/compare')
to implement the shallow compare if you want that still. See below._args
is removed. arguments
in createElement
and update
are already "sliced", so you can simply capture a copy in update
and createElement
and use it for comparison at a later time._willUpdate
is removed. Anything you could do in _willUpdate
you can just move to update
._didUpdate
is renamed to afterupdate
. It also receives an element argument el
e.g. afterupdate(el)
. This makes its argument signature consistent with the other life-cycle methods.load
and unload
. [on-load][ol] listeners only get added when one or both of the hooks are implemented on a component making the mutation observers optional.cache-component@5
to nanocomponent@6
upgrade guide:_render
to createElement
.update
now. Rename existing _update
method to update
. Here is an example of doing shallow compare on components that didn't implement their own update function previously:var html = require('choo/html')
var Component = require('nanocomponent')
var compare = require('nanocomponent/compare')
class Meta extends Component {
constructor () {
super()
this.arguments = []
}
createElement (title, artist, album) {
this.arguments = arguments // cache a copy of arguments
return html`
<div>
<p>${title}</p>
<p>
${artist} - ${album}
</p>
</div>
`
}
// Implement this to recreate cache-component@5
// behavior when update was not implemented
update () {
return compare(arguments, this.arguments)
}
}
_willMount
to beforerender
_didMount
implementations into load
or a window.requestAnmimationFrame
inside of beforerender
._willUpdate
implementations into update
._didUpdate
to afterupdate
.load
and unload
for DOM insertion aware node interactions 🙌nanocomponent@5
nanocomponent@6
has some subtle but important differences from nanocompnent@5
. Be sure to read the README and check out the examples to get an understanding of the new API.
_element
property is removed. A [getter][getter] called element
is now used instead. Since this is now a read-only getter, you must not assign anything to this property or else bad things will happen. The element
getter returns the component's DOM node if mounted in the page, and undefined
otherwise. You are allowed to mutate that DOM node by hand however. Just don't reassign the property on the component instance.nanocomponent@5
._render
is renamed to createElement
and must now return a DOM node always. In earlier versions you could get away with not returning from _render
and assigning nodes to _element
. No longer! Also, you should move your DOM mutations into update
.createElement
or return false to skip a call to createElement
when render
is called. If you decide to mutate element
"by hand" on updates, do that here (rather than conditional paths inside createElement
)._load
and _unload
renamed to load
and unload
. They have always been optional, but now the mutation observers are only added if at least one of these methods are implemented prior to component instantiation.beforerender
lifecycle hook. Its similar to load
but runs before the function call to render
returns on unmounted component instances. This is where the [on-load][ol] listeners are added and is a good opportunity to add any other lifecycle hooks.afterupdate
runs after update
returns true and the results of createElement
is mutated over the mounted component. Useful for adjusting scroll position.nanocomponent@5
to nanocomponent@6
upgrade guide:_render
to createElement
and _update
to update
.createElement
into update
.createElement
returns a DOM node always. (You will get warnings if you don't and it probably won't work)_load
and _unload
to load
and unload
.load
actions into beforerender
if they don't depend on the newly rendered node being mounted in a DOM tree yet.afterupdate
allowing you to interact with your component after createElement
is called on mounted components 🙌