feat: add visible to RenderWhen component

[openscript]

Adds a IsVisible component, which shows it's children only when the component is in the users viewport.

This is especially useful for iframe, for example a youtube player, which should be unloaded when you leave a slide

[John98Zakaria]

slidev already includes vue-use which includes the same concept

https://vueuse.org/core/useElementVisibility/

[openscript]

How to use vue-use inside markdown without having a component?

[antfu]

Instead of a new component, maybe we could extend
https://github.com/slidevjs/slidev/blob/aa0d7141c53d7baf1da1911318f3ffc0de4c2f58/packages/client/builtin/RenderWhen.vue

to have <RenderWhen context="visible">...</RenderWhen>?

[openscript]

I've been thinking about this too, but <RenderWhen /> is related to Slidevs context. For this component we don't depend on the context and also need another template. The component <RenderWhen /> would become multi purpose or non-atomic. What do you think @antfu? <RenderWhen /> or separate one?

[antfu]

I am okay with it being multi-purpose. And the name doesn't limit it to being context-specific. I think having fewer components would help in learning and discovering.

[openscript]

Alright, I'll change the PR and also use vue-use as suggested by @John98Zakaria.

[John98Zakaria]

@openscript Sorry for talking so long

You can pnpm install @vueuse/core @vueuse/components to you project.

I think the secret lies in the fact that slidev slides are just vue components :)

---


Slide 1


---

<div v-element-visibility="onElementVisibility">
Slide 2
</div>

{{someData}}


<script setup lang="ts">
import {Ref, ref} from 'vue'
import {vElementVisibility} from '@vueuse/components'



const image: Ref<HTMLElement> = ref();

const someData = "someDatafromScript"

const clicks = $clicks;

function onElementVisibility(visible: boolean) {
    console.log(visible)
    console.log("data")
}


</script>

[openscript]

Thank you @John98Zakaria for explaining. I think to integrate it into the <RenderWhen /> component is a more handy and clean solution.