Add more lifecycle hooks plz!

[VeederLicht]

Hey people,

I'm getting up to speed with this library/framework. I like it. There is something i would like to see added to the API though: more lifecycle hooks. I'm coming from MithrilJS where hooks like onBeforeRemove, onBeforeMount etc can be used. These are very handy for custom animations and other related actions before the component is being removed, or is being added to the DOM.

I am aware there has been an 'issue' (#39) discussing animations already, but:

1. i dont like being chained down by some pre-selection
2. its not possible to execute other logic

Ideally they would be methods with a timeout-parameter or, even better, methods that halt the execution of the mounting/unmounting requiring the user function to end with a 'continue()' call when they're done.

[trusktr]

The way Solid works, Solid component simply don't need any other life cycle hooks because there aren't any other life cycles.

If you can explain with a piece of code what you were trying to do in Mithril, and couldn't in Solid, we can help you write it properly in Solid.

[VeederLicht]

Sure, i think the example in the MithrilJS-docs is great:

The onbeforeremove(vnode) hook is called before a DOM element is detached from the document. If a Promise is returned, Mithril.js only detaches the DOM element after the promise completes.

So basically, onBeforeRemove() gives the programmer the possibility to execute logic for the specific element just before it is removed from the DOM. SolidJS' onCleanup() method is executed after the removal from the DOM.

The advantage would be that you have all code specific to that component in one place. If i would try to achieve the same thing in Solid, i would have to code the desired logic separately before calling SolidJS methods that do the DOM manipulation. The same thing goes for the onBeforeUpdate() and onBeforeMount().

Example now:

<button onClick={() => {
      stufftodobeforeupdate()
      setCount(count() + 1)
}}>Counter</button>

Example desired:

<button onClick={() => setCount(count() + 1) }>Counter</button>
// components onBeforeUpdate() method handles the desired logic in this case

[ryansolid]

That isn't the only way to do this, you can control the mount point from the parent. Things like solid-transition-group as shown in the thread.

But in general adding lifecycles makes no sense with this model. There are no components. There is nothing to have a lifecycle. Like even something that seems simple like onBeforeUpdate.. I'd ask before update what? Only things that run are things that have dependencies that trigger. So the only what to have a "BeforeUpdate" is to subscribe to the same changes. But the same changes as what? Like you can tap into the reactive scheduling by using things like createMemo which run before effects are applied to the DOM, but there is no component-specific means to have a lifecycle. Even mount/cleanup aren't tied to components but the reactive branch. In a sense, they are being registered with the nearest loop or conditional above them in the tree.

This doesn't limit the ability to simulate it, just means these points need to be injected into the tree purposefully. It just make little sense to introduce it everywhere as it would be just adding a bunch of overhead as we don't even need the thing you'd anchor this on.

[VeederLicht]

I see, thanks for the explanation. I guess i think too much in virtual-dom style programming. I'll have to dive a little deeper into Solid.