Lifecycle and conditional rendering

[cjh9]

• Optionally patch and mount with lifecycle events directly on each dom element to allow for more complex animations within components.
• Allow conditional rendering for text like list.length && ''+list.length

If a dom element has an onremoved function attached, it will get called when the element is about to be removed. You have to manually call done when the transition has finished in order to remove the element. It will recursively check if any of the descendants have onremove methods, and you can optionally transition out them as well.

[yelouafi]

Sorry for the late answer. I think you can have lifecycle with the actual API using custom components; see this example

https://github.com/yelouafi/petit-dom/blob/master/examples/browser/with-lifecycle.html

[cjh9]

Hi @yelouafi That's great, but the way I'm using it is to have a lifecycle hook directly on each DOM node. I'm not even using the component API. A component is just a function that returns a virtual dom representation. At each render the whole app is calculated.

In that way the animations when an component enters can be more advanced:

https://jsfiddle.net/ewb341fh/

https://github.com/cjh9/NoMoreFrameworksJS#3-use-dom-lifecycle-hooks-for-animation-%EF%B8%8F

I think the virtual dom library "superfine" works in the same way, it has oncreated on onremove etc..

[cjh9]

@yelouafi I saw that Snabbdom also has Dom-level lifecycle hooks :)
https://github.com/snabbdom/snabbdom#hooks