🐛 BUG: `client:visible` doens't hydrate if the component just passes children through

[thetarnav]

What version of astro are you using?

1.0.0-rc.3

Are you using an SSR adapter? If so, which one?

doesn't apply

What package manager are you using?

pnpm & npm

What operating system are you using?

Windows 10

Describe the Bug

If the island component just passes children through, without having it's own elements, it doesn't get hydrated by the client:visible directive. It's returning elements that are being passed to it, but they aren't getting observed by the IntersectionObserver it seems.

e.g.

// Solid component
function Animate(props) {
   onMount(() => {
      // animate passed children on the client
   })
   return props.children
}

// Astro component
<Animate client:visible><h1>Hello!</h1></Animate>

This is a useful pattern to be able to do in my mind, especially for animations where I don't neccesarely want to load the animation scripts if the user isn't going to see the animation.

It works fine with load, idle, and other directives.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/astro-client-visible-control

Participation

• [ ] I am willing to submit a pull request for this issue.