feat: add slide lifetime hooks (#1688)

Author: kermanx

docs/custom/vue-context.md

@@ -121,11 +121,14 @@ If you want to get the context programmatically (also type-safely), you can impo
 
 ```vue
 <script setup>
-import { useDarkMode, useNav, useSlideContext } from '@slidev/client'
+import { onSlideEnter, onSlideLeave, useDarkMode, useIsSlideActive, useNav, useSlideContext } from '@slidev/client'
 
 const { $slidev } = useSlideContext()
 const { currentPage, currentLayout, currentSlideRoute } = useNav()
 const { isDark } = useDarkMode()
+const isActive = useIsSlideActive()
+onSlideEnter(() => { /* ... */ })
+onSlideLeave(() => { /* ... */ })
 // ...
 </script>
 ```

packages/client/index.ts

@@ -7,6 +7,7 @@ export { useSlideContext } from './context'
 export { useNav } from './composables/useNav'
 export { useDrawings } from './composables/useDrawings'
 export { useDarkMode } from './composables/useDarkMode'
+export { useIsSlideActive, onSlideEnter, onSlideLeave } from './logic/slides'
 
 export * from './layoutHelper'
 export * from './env'

packages/client/logic/slides.ts

@@ -1,4 +1,7 @@
 import type { SlideRoute } from '@slidev/types'
+import { computed, watch, watchEffect } from 'vue'
+import { useSlideContext } from '../context'
+import { useNav } from '../composables/useNav'
 import { slides } from '#slidev/slides'
 
 export { slides }
@@ -18,3 +21,19 @@ export function getSlidePath(
   const no = route.meta.slide?.frontmatter.routeAlias ?? route.no
   return presenter ? `/presenter/${no}` : `/${no}`
 }
+
+export function useIsSlideActive() {
+  const { $page } = useSlideContext()
+  const { currentSlideNo } = useNav()
+  return computed(() => $page.value === currentSlideNo.value)
+}
+
+export function onSlideEnter(cb: () => void) {
+  const isActive = useIsSlideActive()
+  watchEffect(() => isActive.value && cb())
+}
+
+export function onSlideLeave(cb: () => void) {
+  const isActive = useIsSlideActive()
+  watch(isActive, () => !isActive.value && cb())
+}