@slidev/client 0.48.0-beta.20 → 0.48.0-beta.22

package/builtin/CodeBlockWrapper.vue

@@ -12,13 +12,12 @@ Learn more: https://sli.dev/guide/syntax.html#line-highlighting
 -->
 
 <script setup lang="ts">
-import { parseRangeString } from '@slidev/parser/core'
 import { useClipboard } from '@vueuse/core'
 import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import type { PropType } from 'vue'
 import { configs } from '../env'
-import { makeId } from '../logic/utils'
-import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET } from '../constants'
+import { makeId, updateCodeHighlightRange } from '../logic/utils'
+import { CLASS_VCLICK_HIDDEN } from '../constants'
 import { useSlideContext } from '../context'
 
 const props = defineProps({
@@ -87,28 +86,27 @@ onMounted(() => {
     if (hide)
       rangeStr = props.ranges[index.value + 1] ?? finallyRange.value
 
-    const isDuoTone = el.value.querySelector('.shiki-dark')
-    const targets = isDuoTone ? Array.from(el.value.querySelectorAll('.shiki')) : [el.value]
-    const startLine = props.startLine
-    for (const target of targets) {
-      const lines = Array.from(target.querySelectorAll('code > .line'))
-      const highlights: number[] = parseRangeString(lines.length + startLine - 1, rangeStr)
-      lines.forEach((line, idx) => {
-        const highlighted = highlights.includes(idx + startLine)
-        line.classList.toggle(CLASS_VCLICK_TARGET, true)
-        line.classList.toggle('highlighted', highlighted)
-        line.classList.toggle('dishonored', !highlighted)
-      })
-      if (props.maxHeight) {
-        const highlightedEls = Array.from(target.querySelectorAll('.line.highlighted')) as HTMLElement[]
-        const height = highlightedEls.reduce((acc, el) => el.offsetHeight + acc, 0)
-        if (height > el.value.offsetHeight) {
-          highlightedEls[0].scrollIntoView({ behavior: 'smooth', block: 'start' })
-        }
-        else if (highlightedEls.length > 0) {
-          const middleEl = highlightedEls[Math.round((highlightedEls.length - 1) / 2)]
-          middleEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
-        }
+    const pre = el.value.querySelector('.shiki')!
+    const lines = Array.from(pre.querySelectorAll('code > .line'))
+    const linesCount = lines.length
+
+    updateCodeHighlightRange(
+      rangeStr,
+      linesCount,
+      props.startLine,
+      no => [lines[no]],
+    )
+
+    // Scroll to the highlighted line if `maxHeight` is set
+    if (props.maxHeight) {
+      const highlightedEls = Array.from(pre.querySelectorAll('.line.highlighted')) as HTMLElement[]
+      const height = highlightedEls.reduce((acc, el) => el.offsetHeight + acc, 0)
+      if (height > el.value.offsetHeight) {
+        highlightedEls[0].scrollIntoView({ behavior: 'smooth', block: 'start' })
+      }
+      else if (highlightedEls.length > 0) {
+        const middleEl = highlightedEls[Math.round((highlightedEls.length - 1) / 2)]
+        middleEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
       }
     }
   })

package/builtin/ShikiMagicMove.vue

@@ -1,22 +1,28 @@
 <script setup lang="ts">
 import { ShikiMagicMovePrecompiled } from 'shiki-magic-move/vue'
 import type { KeyedTokensInfo } from 'shiki-magic-move/types'
-import { onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import lz from 'lz-string'
 import { useSlideContext } from '../context'
-import { makeId } from '../logic/utils'
+import { makeId, updateCodeHighlightRange } from '../logic/utils'
 
 import 'shiki-magic-move/style.css'
 
 const props = defineProps<{
-  stepsLz: string
   at?: string | number
+  stepsLz: string
+  stepRanges: string[][]
 }>()
 
 const steps = JSON.parse(lz.decompressFromBase64(props.stepsLz)) as KeyedTokensInfo[]
 const { $clicksContext: clicks, $scale: scale } = useSlideContext()
 const id = makeId()
-const index = ref(0)
+
+const stepIndex = ref(0)
+const container = ref<HTMLElement>()
+
+// Normalized the ranges, to at least have one range
+const ranges = computed(() => props.stepRanges.map(i => i.length ? i : ['all']))
 
 onUnmounted(() => {
   clicks!.unregister(id)
@@ -26,24 +32,68 @@ onMounted(() => {
   if (!clicks || clicks.disabled)
     return
 
-  const { start, end, delta } = clicks.resolve(props.at || '+1', steps.length - 1)
+  if (ranges.value.length !== steps.length)
+    throw new Error('[slidev] The length of stepRanges does not match the length of steps, this is an internal error.')
+
+  const clickCounts = ranges.value.map(s => s.length).reduce((a, b) => a + b, 0)
+  const { start, end, delta } = clicks.resolve(props.at ?? '+1', clickCounts - 1)
   clicks.register(id, { max: end, delta })
 
-  watchEffect(() => {
-    if (clicks.disabled)
-      index.value = steps.length - 1
-    else
-      index.value = Math.min(Math.max(0, clicks.current - start + 1), steps.length - 1)
-  })
+  watch(
+    () => clicks.current,
+    () => {
+      // Calculate the step and rangeStr based on the current click count
+      const clickCount = clicks.current - start
+      let step = steps.length - 1
+      let _currentClickSum = 0
+      let rangeStr = 'all'
+      for (let i = 0; i < ranges.value.length; i++) {
+        const current = ranges.value[i]
+        if (clickCount < _currentClickSum + current.length - 1) {
+          step = i
+          rangeStr = current[clickCount - _currentClickSum + 1]
+          break
+        }
+        _currentClickSum += current.length || 1
+      }
+      stepIndex.value = step
+
+      const pre = container.value?.querySelector('.shiki') as HTMLElement
+      if (!pre)
+        return
+
+      const children = (Array.from(pre.children) as HTMLElement[])
+        .slice(1) // Remove the first anchor
+        .filter(i => !i.className.includes('shiki-magic-move-leave')) // Filter the leaving elements
+
+      // Group to lines between `<br>`
+      const lines = children.reduce((acc, el) => {
+        if (el.tagName === 'BR')
+          acc.push([])
+        else
+          acc[acc.length - 1].push(el)
+        return acc
+      }, [[]] as HTMLElement[][])
+
+      // Update highlight range
+      updateCodeHighlightRange(
+        rangeStr,
+        lines.length,
+        1,
+        no => lines[no],
+      )
+    },
+    { immediate: true },
+  )
 })
 </script>
 
 <template>
-  <div class="slidev-code-wrapper slidev-code-magic-move">
+  <div ref="container" class="slidev-code-wrapper slidev-code-magic-move relative">
     <ShikiMagicMovePrecompiled
       class="slidev-code relative shiki overflow-visible"
       :steps="steps"
-      :step="index"
+      :step="stepIndex"
       :options="{ globalScale: scale }"
     />
   </div>

package/builtin/SlidevVideo.vue

@@ -22,7 +22,7 @@ const ended = ref(false)
 const matchRoute = computed(() => {
   if (!video.value || currentContext?.value !== 'slide')
     return false
-  return route === $slidev?.nav.currentRoute
+  return route && route.no === $slidev?.nav.currentSlideNo
 })
 
 const matchClick = computed(() => {

package/builtin/Toc.vue

@@ -74,7 +74,7 @@ function filterOnlySiblings(tree: TocItem[]): TocItem[] {
 }
 
 const toc = computed(() => {
-  const tree = $slidev?.nav.tree
+  const tree = $slidev?.nav.tocTree
   if (!tree)
     return []
   let tocTree = filterTreeDepth(tree)

package/builtin/TocList.vue

@@ -48,7 +48,7 @@ const styles = computed(() => {
       :class="[{ 'slidev-toc-item-active': item.active }, { 'slidev-toc-item-parent-active': item.activeParent }]"
     >
       <Link :to="item.path">
-        <Titles :no="item.path" />
+        <Titles :no="item.no" />
       </Link>
       <TocList
         v-if="item.children.length > 0"

package/composables/useClicks.ts

@@ -1,11 +1,11 @@
 import { sum } from '@antfu/utils'
-import type { ClicksContext } from '@slidev/types'
+import type { ClicksContext, SlideRoute } from '@slidev/types'
 import type { Ref } from 'vue'
 import { computed, ref, shallowReactive } from 'vue'
-import type { RouteRecordRaw } from 'vue-router'
-import { currentRoute, isPrintMode, isPrintWithClicks, queryClicks, routeForceRefresh } from '../logic/nav'
+import { currentSlideNo, isPrintMode, isPrintWithClicks } from '../logic/nav'
 import { normalizeAtProp } from '../logic/utils'
 import { CLICKS_MAX } from '../constants'
+import { routeForceRefresh, useRouteQuery } from '../logic/route'
 
 function useClicksContextBase(current: Ref<number>, clicksOverrides?: number): ClicksContext {
   const relativeOffsets: ClicksContext['relativeOffsets'] = new Map()
@@ -63,27 +63,28 @@ function useClicksContextBase(current: Ref<number>, clicksOverrides?: number): C
   }
 }
 
-export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksContext {
+const queryClicksRaw = useRouteQuery('clicks', '0')
+
+export function usePrimaryClicks(route: SlideRoute): ClicksContext {
   if (route?.meta?.__clicksContext)
     return route.meta.__clicksContext
-  const thisPath = +(route?.path ?? Number.NaN)
+  const thisNo = route.no
   const current = computed({
     get() {
-      const currentPath = +(currentRoute.value?.path ?? Number.NaN)
-      if (!currentPath || Number.isNaN(currentPath))
-        return 0
-      if (currentPath === thisPath)
-        return queryClicks.value
-      else if (currentPath > thisPath)
+      // eslint-disable-next-line ts/no-use-before-define
+      if (context.disabled)
+        return CLICKS_MAX
+      if (currentSlideNo.value === thisNo)
+        return +(queryClicksRaw.value || 0) || 0
+      else if (currentSlideNo.value > thisNo)
         return CLICKS_MAX
       else
         return 0
     },
     set(v) {
-      const currentPath = +(currentRoute.value?.path ?? Number.NaN)
-      if (currentPath === thisPath) {
+      if (currentSlideNo.value === thisNo) {
         // eslint-disable-next-line ts/no-use-before-define
-        queryClicks.value = Math.min(v, context.total)
+        queryClicksRaw.value = Math.min(v, context.total).toString()
       }
     },
   })
@@ -96,6 +97,6 @@ export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksConte
   return context
 }
 
-export function useFixedClicks(route?: RouteRecordRaw | undefined, currentInit = 0): ClicksContext {
+export function useFixedClicks(route?: SlideRoute | undefined, currentInit = 0): ClicksContext {
   return useClicksContextBase(ref(currentInit), route?.meta?.clicks)
 }

package/composables/useContext.ts

@@ -1,16 +1,11 @@
-import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
-import type { RouteLocationNormalizedLoaded } from 'vue-router'
-import type { SlidevContext } from '../modules/context'
 import { configs } from '../env'
-import { useNav } from './useNav'
+import type { SlidevContext } from '../modules/context'
+import * as nav from '../logic/nav'
 
-export function useContext(
-  route: ComputedRef<RouteLocationNormalizedLoaded>,
-): SlidevContext {
-  const nav = useNav(route)
+export function useContext(): SlidevContext {
   return {
-    nav,
+    nav: { ...nav }, // Convert the module to a plain object
     configs,
     themeConfigs: computed(() => configs.themeConfig),
   }

package/composables/useNav.ts

@@ -1,55 +1,193 @@
-import type { ComputedRef } from 'vue'
-import { computed } from 'vue'
-import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
-import type { TocItem } from '@slidev/types'
-import type { SlidevContextNav } from '../modules/context'
-import { addToTree, clicks, clicksContext, clicksTotal, downloadPDF, filterTree, getPath, getTreeWithActiveStatuses, go, next, nextSlide, openInEditor, prev, prevSlide } from '../logic/nav'
-import { rawRoutes } from '../routes'
-
-export function useNav(route: ComputedRef<RouteRecordRaw | RouteLocationNormalizedLoaded>): SlidevContextNav {
-  const path = computed(() => route.value.path)
-  const total = computed(() => rawRoutes.length)
-
-  const currentPage = computed(() => Number.parseInt(path.value.split(/\//g).slice(-1)[0]) || 1)
-  const currentPath = computed(() => getPath(currentPage.value))
-  const currentRoute = computed(() => rawRoutes.find(i => i.path === `${currentPage.value}`) ?? rawRoutes.at(-1) ?? rawRoutes[0])
-  const currentSlideId = computed(() => currentRoute.value?.meta?.slide?.id)
-  const currentLayout = computed(() => currentRoute.value?.meta?.layout || (currentPage.value === 1 ? 'cover' : 'default'))
-
-  const nextRoute = computed(() => rawRoutes.find(i => i.path === `${Math.min(rawRoutes.length, currentPage.value + 1)}`))
-
-  const rawTree = computed(() => rawRoutes
-    .filter((route: RouteRecordRaw) => route.meta?.slide?.title)
-    .reduce((acc: TocItem[], route: RouteRecordRaw) => {
-      addToTree(acc, route)
-      return acc
-    }, []))
-  const treeWithActiveStatuses = computed(() => getTreeWithActiveStatuses(rawTree.value, currentRoute.value))
-  const tree = computed(() => filterTree(treeWithActiveStatuses.value))
+import type { ClicksContext, SlideRoute, TocItem } from '@slidev/types'
+import type { ComputedRef, Ref, TransitionGroupProps } from 'vue'
+import { computed, ref, watch } from 'vue'
+import type { Router } from 'vue-router'
+import { getCurrentTransition } from '../logic/transition'
+import { getSlidePath } from '../logic/slides'
+import { useTocTree } from './useTocTree'
+import { skipTransition } from './hmr'
+import { slides } from '#slidev/slides'
+
+export interface SlidevContextNav {
+  slides: Ref<SlideRoute[]>
+  total: ComputedRef<number>
+
+  currentPath: ComputedRef<string>
+  currentPage: ComputedRef<number>
+  currentSlideNo: ComputedRef<number>
+  currentSlideRoute: ComputedRef<SlideRoute>
+  currentTransition: ComputedRef<TransitionGroupProps | undefined>
+  currentLayout: ComputedRef<string>
+
+  nextRoute: ComputedRef<SlideRoute>
+  prevRoute: ComputedRef<SlideRoute>
+  hasNext: ComputedRef<boolean>
+  hasPrev: ComputedRef<boolean>
+
+  clicksContext: ComputedRef<ClicksContext>
+  clicks: ComputedRef<number>
+  clicksTotal: ComputedRef<number>
+
+  /** The table of content tree */
+  tocTree: ComputedRef<TocItem[]>
+  /** The direction of the navigation, 1 for forward, -1 for backward */
+  navDirection: Ref<number>
+  /** The direction of the clicks, 1 for forward, -1 for backward */
+  clicksDirection: Ref<number>
+  /** Utility function for open file in editor, only avaible in dev mode  */
+  openInEditor: (url?: string) => Promise<boolean>
+
+  /** Go to next click */
+  next: () => Promise<void>
+  /** Go to previous click */
+  prev: () => Promise<void>
+  /** Go to next slide */
+  nextSlide: () => Promise<void>
+  /** Go to previous slide */
+  prevSlide: (lastClicks?: boolean) => Promise<void>
+  /** Go to slide */
+  go: (page: number | string, clicks?: number) => Promise<void>
+  /** Go to the first slide */
+  goFirst: () => Promise<void>
+  /** Go to the last slide */
+  goLast: () => Promise<void>
+}
+
+export function useNavBase(
+  currentSlideRoute: ComputedRef<SlideRoute>,
+  clicksContext: ComputedRef<ClicksContext>,
+  queryClicks: Ref<number> = ref(0),
+  router?: Router,
+): SlidevContextNav {
+  const total = computed(() => slides.value.length)
+
+  const navDirection = ref(0)
+  const clicksDirection = ref(0)
+
+  const currentPath = computed(() => getSlidePath(currentSlideRoute.value))
+  const currentSlideNo = computed(() => currentSlideRoute.value.no)
+  const currentLayout = computed(() => currentSlideRoute.value.meta?.layout || (currentSlideNo.value === 1 ? 'cover' : 'default'))
+
+  const clicks = computed(() => clicksContext.value.current)
+  const clicksTotal = computed(() => clicksContext.value.total)
+  const nextRoute = computed(() => slides.value[Math.min(slides.value.length, currentSlideNo.value + 1) - 1])
+  const prevRoute = computed(() => slides.value[Math.max(1, currentSlideNo.value - 1) - 1])
+  const hasNext = computed(() => currentSlideNo.value < slides.value.length || clicks.value < clicksTotal.value)
+  const hasPrev = computed(() => currentSlideNo.value > 1 || clicks.value > 0)
+
+  const currentTransition = computed(() => getCurrentTransition(navDirection.value, currentSlideRoute.value, prevRoute.value))
+
+  watch(currentSlideRoute, (next, prev) => {
+    navDirection.value = next.no - prev.no
+  })
+
+  async function openInEditor(url?: string) {
+    if (!__DEV__)
+      return false
+    if (url == null) {
+      const slide = currentSlideRoute.value?.meta?.slide
+      if (!slide)
+        return false
+      url = `${slide.filepath}:${slide.start}`
+    }
+    await fetch(`/__open-in-editor?file=${encodeURIComponent(url)}`)
+    return true
+  }
+
+  const tocTree = useTocTree(slides)
+
+  async function next() {
+    clicksDirection.value = 1
+    if (clicksTotal.value <= queryClicks.value)
+      await nextSlide()
+    else
+      queryClicks.value += 1
+  }
+
+  async function prev() {
+    clicksDirection.value = -1
+    if (queryClicks.value <= 0)
+      await prevSlide()
+    else
+      queryClicks.value -= 1
+  }
+
+  async function nextSlide() {
+    clicksDirection.value = 1
+    if (currentSlideNo.value < slides.value.length)
+      await go(currentSlideNo.value + 1)
+  }
+
+  async function prevSlide(lastClicks = true) {
+    clicksDirection.value = -1
+    const next = Math.max(1, currentSlideNo.value - 1)
+    await go(next)
+    if (lastClicks && clicksTotal.value) {
+      router?.replace({
+        query: { ...router.currentRoute.value.query, clicks: clicksTotal.value },
+      })
+    }
+  }
+
+  function goFirst() {
+    return go(1)
+  }
+
+  function goLast() {
+    return go(total.value)
+  }
+
+  async function go(page: number | string, clicks?: number) {
+    skipTransition.value = false
+    await router?.push({
+      path: getSlidePath(page),
+      query: { ...router.currentRoute.value.query, clicks },
+    })
+  }
 
   return {
-    rawRoutes,
-    route,
-    path,
+    slides,
     total,
-    clicksContext,
-    clicks,
-    clicksTotal,
-    currentPage,
     currentPath,
-    currentRoute,
-    currentSlideId,
+    currentSlideNo,
+    currentPage: currentSlideNo,
+    currentSlideRoute,
     currentLayout,
+    currentTransition,
+    clicksDirection,
     nextRoute,
-    rawTree,
-    treeWithActiveStatuses,
-    tree,
-    go,
-    downloadPDF,
-    next,
-    nextSlide,
+    prevRoute,
+    clicksContext,
+    clicks,
+    clicksTotal,
+    hasNext,
+    hasPrev,
+    tocTree,
+    navDirection,
     openInEditor,
+    next,
     prev,
+    go,
+    goLast,
+    goFirst,
+    nextSlide,
     prevSlide,
   }
 }
+
+export function useFixedNav(
+  currentSlideRoute: SlideRoute,
+  clicksContext: ClicksContext,
+): SlidevContextNav {
+  const noop = async () => { }
+  return {
+    ...useNavBase(computed(() => currentSlideRoute), computed(() => clicksContext)),
+    next: noop,
+    prev: noop,
+    nextSlide: noop,
+    prevSlide: noop,
+    goFirst: noop,
+    goLast: noop,
+    go: noop,
+  }
+}

package/composables/useSwipeControls.ts

@@ -0,0 +1,40 @@
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+import { timestamp, usePointerSwipe } from '@vueuse/core'
+import { isDrawing } from '../logic/drawings'
+import { next, nextSlide, prev, prevSlide } from '../logic/nav'
+
+export function useSwipeControls(root: Ref<HTMLElement | undefined>) {
+  const swipeBegin = ref(0)
+  const { direction, distanceX, distanceY } = usePointerSwipe(root, {
+    pointerTypes: ['touch'],
+    onSwipeStart() {
+      if (isDrawing.value)
+        return
+      swipeBegin.value = timestamp()
+    },
+    onSwipeEnd() {
+      if (!swipeBegin.value)
+        return
+      if (isDrawing.value)
+        return
+
+      const x = Math.abs(distanceX.value)
+      const y = Math.abs(distanceY.value)
+      if (x / window.innerWidth > 0.3 || x > 75) {
+        if (direction.value === 'left')
+          next()
+
+        else
+          prev()
+      }
+      else if (y / window.innerHeight > 0.4 || y > 200) {
+        if (direction.value === 'down')
+          prevSlide()
+
+        else
+          nextSlide()
+      }
+    },
+  })
+}

package/composables/useTocTree.ts

@@ -0,0 +1,63 @@
+import type { SlideRoute, TocItem } from '@slidev/types'
+import type { ComputedRef, Ref } from 'vue'
+import { computed } from 'vue'
+import { currentSlideNo, currentSlideRoute, getSlidePath } from '../logic/nav'
+
+function addToTree(tree: TocItem[], route: SlideRoute, level = 1) {
+  const titleLevel = route.meta?.slide?.level
+  if (titleLevel && titleLevel > level && tree.length > 0) {
+    addToTree(tree[tree.length - 1].children, route, level + 1)
+  }
+  else {
+    tree.push({
+      no: route.no,
+      children: [],
+      level,
+      path: getSlidePath(route.meta.slide?.frontmatter?.routeAlias ?? route.no),
+      hideInToc: Boolean(route.meta?.slide?.frontmatter?.hideInToc),
+      title: route.meta?.slide?.title,
+    })
+  }
+}
+
+function getTreeWithActiveStatuses(
+  tree: TocItem[],
+  currentRoute?: SlideRoute,
+  hasActiveParent = false,
+  parent?: TocItem,
+): TocItem[] {
+  return tree.map((item: TocItem) => {
+    const clone = {
+      ...item,
+      active: item.no === currentSlideNo.value,
+      hasActiveParent,
+    }
+    if (clone.children.length > 0)
+      clone.children = getTreeWithActiveStatuses(clone.children, currentRoute, clone.active || clone.hasActiveParent, clone)
+    if (parent && (clone.active || clone.activeParent))
+      parent.activeParent = true
+    return clone
+  })
+}
+
+function filterTree(tree: TocItem[], level = 1): TocItem[] {
+  return tree
+    .filter((item: TocItem) => !item.hideInToc)
+    .map((item: TocItem) => ({
+      ...item,
+      children: filterTree(item.children, level + 1),
+    }))
+}
+
+export function useTocTree(slides: Ref<SlideRoute[]>): ComputedRef<TocItem[]> {
+  const rawTree = computed(() => slides.value
+    .filter((route: SlideRoute) => route.meta?.slide?.title)
+    .reduce((acc: TocItem[], route: SlideRoute) => {
+      addToTree(acc, route)
+      return acc
+    }, []))
+
+  const treeWithActiveStatuses = computed(() => getTreeWithActiveStatuses(rawTree.value, currentSlideRoute.value))
+
+  return computed(() => filterTree(treeWithActiveStatuses.value))
+}

package/constants.ts

@@ -1,6 +1,5 @@
 import type { ComputedRef, InjectionKey, Ref, UnwrapNestedRefs } from 'vue'
-import type { RouteRecordRaw } from 'vue-router'
-import type { ClicksContext, RenderContext } from '@slidev/types'
+import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
 import type { SlidevContext } from './modules/context'
 
 // Here we use string literal instead of symbols to make HMR more stable
@@ -9,7 +8,7 @@ export const injectionClicksContext = '$$slidev-clicks-context' as unknown as In
 export const injectionCurrentPage = '$$slidev-page' as unknown as InjectionKey<Ref<number>>
 export const injectionSlideScale = '$$slidev-slide-scale' as unknown as InjectionKey<ComputedRef<number>>
 export const injectionSlidevContext = '$$slidev-context' as unknown as InjectionKey<UnwrapNestedRefs<SlidevContext>>
-export const injectionRoute = '$$slidev-route' as unknown as InjectionKey<RouteRecordRaw>
+export const injectionRoute = '$$slidev-route' as unknown as InjectionKey<SlideRoute>
 export const injectionRenderContext = '$$slidev-render-context' as unknown as InjectionKey<Ref<RenderContext>>
 export const injectionActive = '$$slidev-active' as unknown as InjectionKey<Ref<boolean>>
 export const injectionFrontmatter = '$$slidev-fontmatter' as unknown as InjectionKey<Record<string, any>>