Use the client:visible functionality with plain js?

[hybrid glen]

Hey, I'd like to use the functionality that lets me hydrate a component only when its visible, but I'm not using any framework. Is this doable in with vanilla js?

[cunning haven]

Hi that's only available to framework components

[light owl]

Creating it yourself is fairly easy though

You can do using the Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Here's the code for client:visible, as reference https://github.com/withastro/astro/blob/main/packages/astro/src/runtime/client/visible.ts

There's a bit more fluff and boilerplate because of how it needs to work with components, but the gist of it is really just creating an observer and wrapping your code in a if intersecting.