afterDOM eagerness for visible tasks

[wmertens]

What is it about?

have visible tasks run after the DOM is update

What's the motivation for this proposal?

From conversation with @fabian-hiller:

Is it possible/useful to be able to configure useTask$ to execute its code after DOM rendering? I have a use case where I want to update the DOM after changing a signal but I don't need to update the DOM on the initial execution of the task. Therefore, strictly speaking useVisibleTask$ is a performance bottleneck in this case as it eagerly executes code to subscribe to the signal (this could theoretically happens on the server).

Here is the exact use case: Valibot's playground has a console where the log statements are printed. When executing the playground I want the console to scroll the latest logs into the view. Therefore, I need to execute code after DOM rendering. This is why we use useVisibleTask$ at the moment as useTask$ executes its code before DOM rendering.

In very simple words: I want to be able to subscribe to a singal on the server with useTask$ but still want to be able to execute the task after DOM rendering for max performance.

Source code: https://github.com/fabian-hiller/valibot/blob/main/website/src/routes/playground/index.tsx#L178-L184

Click the play button 2 times to see it in action: https://valibot.dev/playground/?code=JYWwDg9gTgLgBAKjgQwM5wG5wGZQiOAcg2QBtgAjCGQgbgCh6BjCAO1XgGUmALAUxDI4AXkwA6CBQBWfJjAAUAb3pw4A5MFIAucWGBg+8jGI5RgrAObyAlABpx6zTbsq4YNKgDu0ACY7jegZGJjBmljb2xiDmADJ8ljA88gAc1i4AvtYMzGwccFB8qACupPCixqjI2HwACshQqIbc-IL2yqqO2kRSyKx8AAJ8AB7I4KR8YiwghLau7qhevjqEAIwATADMACwArABsAOwz9JnZLOwQ42KkEFYFxaVZ9EA

Any other context or information you want to share:

---

Proposed Solution / Feature

What do you propose?

eagerness afterDOM, or maybe a boolean so the first run of the task can still be chosen.

When this is active, the visible task should only be run after all pending DOM manipulation has been done for the component.

---

Links / References

No response

[fabian-hiller]

Another idea would be to add a new function called useLayoutTask$.