State of component visibility with events

[misog]

Hi, Alpine.js has both x-if and x-show to control both DOM presence and DOM visibility while using "inline" declarative style. Visibility is very important and useful state, that is why x-show exists.

When using components, Alpine.js has good support for DOM presence because it offers x-init to bind handlers of component creation. However component visibility is not supported very well. It does not offer events or hooks to bind handlers for component visibility.

I would like something like this:

<div x-init="doStuffWhenPartOfDOM()" x-shown="doStuffWhenVisible()"></div>

This would be useful to manage component lifecycle in a way that components are preloaded on init and later show instantly. The trick is to load JS libraries or complicated components on init and then later show them on shown. However sometimes there are many nested components and parent component holds the visibility state of child. It would be useful to just get listen to visibility change from Alpine.js and not access parent state to get visibility state. Components can be placed in different files so it is good for readability not to rely on parent state. For example:

...
<template x-if="abc">
    <div x-show="xyz">
        <div x-data="{IamVisible: false}" x-shown="IamVisible=true">
            <div x-show="IamVisible"></div>
            <template x-if="IamVisible">
            </template>
        </div>
    </div>
    <button @click="xyz=true">OK</button>
</template>
...

Also this would help also:

<div x-init="doStuffWhenPartOfDOM()" x-shown="doStuffWhenVisible()" x-hidden="doStuffWhenHidden()"></div>

Or:

<div x-init="doStuffWhenPartOfDOM()" x-visibility="$visible ? doStuffWhenVisible() : doStuffWhenHidden()"></div>

And maybe x-init could be modified too:

<div x-init="$initialized ? doStuffWhenPartOfDOM() : doStuffWhenRemovedFromDOM()" x-shown="doStuffWhenVisible()" x-hidden="doStuffWhenHidden()"></div>

[SimoTod]

If something like that gets implemented, it could probably be an event so you can have @alpine:shown without the need of a new directive

[AvalonNZ]

I would kill for an x-shown or on:shown event. If the Alpine team is reading this, it's a big deal.

I'm trying to display Google Graphs on tab panels and the graphs don't render reliably unless the tab panel is visible (because the sizing isn't clear if the panel is hidden). Since I have four tab panels, and all the graphs are rendered when the page is loaded, three of the panels are hidden when the graphs are rendered.

[SimoTod]

Alpine doesn't have any custom events it just use the native browser events (to keep the package minimal and small).

Have you tried something like
<div x-show="visible" x-effect="if (visible) $nextTick(() => doSomething())">?

[ekwoka]

Is there a reason why x-if doesn't work for you?

Or even x-intersect...

[AvalonNZ]

Those are both excellent ideas. I wasn't even aware of the intersect plugin. Thanks. I'll give them a try.

[AvalonNZ]

x-intersect worked for me. Thanks for the pointer.