fix: clicks missing when going backward

Author: antfu

packages/client/composables/useClicks.ts

@@ -23,6 +23,7 @@ function useClicksContextBase(current: Ref<number>, clicksOverrides?: number): C
     },
     relativeOffsets,
     map,
+    onMounted() {},
     resolve(at, size = 1) {
       const [isRelative, value] = normalizeAtProp(at)
       if (isRelative) {
@@ -57,8 +58,7 @@ function useClicksContextBase(current: Ref<number>, clicksOverrides?: number): C
     get total() {
       // eslint-disable-next-line no-unused-expressions
       routeForceRefresh.value
-      return clicksOverrides
-        ?? Math.max(0, ...[...map.values()].map(v => v.max || 0))
+      return clicksOverrides ?? Math.max(0, ...[...map.values()].map(v => v.max || 0))
     },
   }
 }
@@ -68,6 +68,7 @@ const queryClicksRaw = useRouteQuery('clicks', '0')
 export function usePrimaryClicks(route: SlideRoute): ClicksContext {
   if (route?.meta?.__clicksContext)
     return route.meta.__clicksContext
+
   const thisNo = route.no
   const current = computed({
     get() {
@@ -92,6 +93,13 @@ export function usePrimaryClicks(route: SlideRoute): ClicksContext {
     current,
     route?.meta?.clicks,
   )
+
+  // On slide mounted, make sure the query is not greater than the total
+  context.onMounted = () => {
+    if (queryClicksRaw.value)
+      queryClicksRaw.value = Math.min(queryClicksRaw.value, context.total)
+  }
+
   if (route?.meta)
     route.meta.__clicksContext = context
   return context

packages/client/composables/useNav.ts

@@ -3,7 +3,8 @@ 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 { getSlide, getSlidePath } from '../logic/slides'
+import { CLICKS_MAX } from '../constants'
 import { useTocTree } from './useTocTree'
 import { skipTransition } from './hmr'
 import { slides } from '#slidev/slides'
@@ -121,12 +122,12 @@ export function useNavBase(
   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 },
-      })
-    }
+    await go(
+      next,
+      lastClicks
+        ? getSlide(next)?.meta.__clicksContext?.total ?? CLICKS_MAX
+        : undefined,
+    )
   }
 
   function goFirst() {
@@ -141,7 +142,10 @@ export function useNavBase(
     skipTransition.value = false
     await router?.push({
       path: getSlidePath(page),
-      query: { ...router.currentRoute.value.query, clicks },
+      query: {
+        ...router.currentRoute.value.query,
+        clicks: clicks || undefined,
+      },
     })
   }
 

packages/client/internals/SlideWrapper.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineAsyncComponent, ref, toRef } from 'vue'
+import { computed, defineAsyncComponent, defineComponent, h, onMounted, ref, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { provideLocal } from '@vueuse/core'
 import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
@@ -20,6 +20,7 @@ const props = defineProps({
     default: false,
   },
   is: {
+    type: Function as PropType<() => any>,
     required: true,
   },
   route: {
@@ -47,14 +48,28 @@ const style = computed(() => {
 })
 
 const SlideComponent = defineAsyncComponent({
-  loader: (props.is as any),
+  loader: async () => {
+    const component = await props.is()
+    return defineComponent({
+      setup(_, { attrs }) {
+        onMounted(() => {
+          props.clicksContext.onMounted()
+        })
+        return () => h(component.default, attrs)
+      },
+    })
+  },
   delay: 300,
   loadingComponent: SlideLoading,
 })
 </script>
 
 <template>
-  <component :is="SlideComponent" :style="style" :class="{ 'disable-view-transition': !['slide', 'presenter'].includes(props.renderContext) }" />
+  <component
+    :is="SlideComponent"
+    :style="style"
+    :class="{ 'disable-view-transition': !['slide', 'presenter'].includes(props.renderContext) }"
+  />
 </template>
 
 <style scoped>

packages/client/logic/route.ts

@@ -19,7 +19,12 @@ export function useRouteQuery<T extends string | string[]>(
     },
     set(v) {
       nextTick(() => {
-        router[unref(mode) as 'replace' | 'push']({ query: { ...router.currentRoute.value.query, [name]: v } })
+        router[unref(mode) as 'replace' | 'push']({
+          query: {
+            ...router.currentRoute.value.query,
+            [name]: v === defaultValue ? undefined : v,
+          },
+        })
       })
     },
   })

packages/types/src/types.ts

@@ -161,6 +161,7 @@ export interface ClicksContext {
   }
   register: (el: ClicksElement, info: ClicksInfo) => void
   unregister: (el: ClicksElement) => void
+  onMounted: () => void
   readonly currentOffset: number
   readonly total: number
 }