Add support to destroy app instance bound to DOM.

[wanton7]

We are trying to embed hyperapp into our company's old jQuery based application and I've hit a wall. I tested different kind of rendering libraries that don't need pipeline like Webpack and just using <script> is enough. What's missing is way to destroy hyperappapp instance. Ex. Vue.js has vm.$destroy().

We sometimes destroy existing HTML, like using Ajax to load HTML from server and replacing old HTML with jQuery. We also also use jQuery UI's remove event to clean up everything properly when old HTML is replaced and it had components made with jQuery. We like to replace these components progressively using hyperapp but could not find anything like vm.$destroy() in Vue.js or ReactDOM.unmountComponentAtNode() in React to destroy hyperapp app instances properly.

[jorgebucaran]

@wanton7 Do you think this relates to jorgebucaran/superfine#136?

[wanton7]

@jorgebucaran yes that's exactly what I need! Component might have registered itself to some external service or maybe it's wrapping some jQuery/JavaScript component so having hyperapp call those remove/destroy lifecycle events is what I need. I also need the call to be synchronous, so after it returns everything has been destroyed/unmounted.

[wanton7]

@jorgebucaran By synchronous I mean that hyperapp itself won't do any unnecessary setTimeout calls or something similar asynchronous stuff. If developer can create asynchronous remove and destroy events then it's up to them to make sure everything critical is removed synchronously when these lifecycle events are called.

[wanton7]

I've been thinking about this and it would better to add new life cycle event maybe called onunmount in form of (element: Element) => void. Because when unmount/destroy app you might to handle things differently. Like you wouldn't use effects to fade out etc. because you know everything in view is going to be destroyed.

[jorgebucaran]

@wanton7 Sounds like the existing ondestroy or onremove. Were you aware of those?

[wanton7]

@jorgebucaran ondestroy is called after element is removed from DOM, so it won't usually work for me. onremove would work if there was an extra boolean parameter like (element, done, unmount) =>. Having that unmount patameter for both onremove and ondestroy would do nicely..

[jorgebucaran]

Hey @wanton7. I think what you want is what's described in jorgebucaran/superfine#136 and not lifecycle events at all. It's my fault for bringing them up.

I talked about lifecycle events because your #789 (comment) reminded me of them.

Also for the record: ondestroy is the counterpart of oncreate. It is called on every element so you can free resources allocated in oncreate. This is how global subscriptions are implemented in V1.

onremove is used to delay the removal of an element, e.g. for creating animations.

[jorgebucaran]

Tracking in #863.