fix: preserve clicks state for previous slide

Author: antfu

packages/client/internals/SlidesShow.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, shallowRef, watch } from 'vue'
-import { clicks, currentRoute, isPresenter, nextRoute, rawRoutes, transition } from '../logic/nav'
+import { clicks, currentRoute, isPresenter, nextRoute, rawRoutes, router, transition } from '../logic/nav'
 import { getSlideClass } from '../utils'
 import SlideWrapper from './SlideWrapper'
 
@@ -21,6 +21,12 @@ watch(currentRoute, () => {
     nextRoute.value.meta.__preloaded = true
 }, { immediate: true })
 
+// preserve the clicks count for previous slide to avoid flash on transition
+let previousClicks: [string | undefined, number] = [] as any
+router.beforeEach(() => {
+  previousClicks = [currentRoute.value?.path, clicks.value]
+})
+
 const DrawingLayer = shallowRef<any>()
 if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
   import('./DrawingLayer.vue').then(v => DrawingLayer.value = v.default)
@@ -38,7 +44,7 @@ const loadedRoutes = computed(() => rawRoutes.filter(r => r.meta?.__preloaded ||
       <SlideWrapper
         :is="route?.component as any"
         v-show="route === currentRoute"
-        :clicks="route === currentRoute ? clicks : 0"
+        :clicks="route === currentRoute ? clicks : route.path === previousClicks[0] ? previousClicks[1] : 0"
         :clicks-elements="route.meta?.__clicksElements || []"
         :clicks-disabled="false"
         :class="getSlideClass(route)"

packages/slidev/node/plugins/loaders.ts

@@ -297,7 +297,7 @@ ${title}
       name: 'slidev:context-transform:pre',
       enforce: 'pre',
       async transform(code, id) {
-        if (!id.endsWith('.vue'))
+        if (!id.endsWith('.vue') || id.includes('/@slidev/client/') || id.includes('/packages/client/'))
           return
         return transformVue(code)
       },
@@ -347,12 +347,12 @@ ${title}
     const imports = [
       'import { inject as _vueInject, toRef as _vueToRef } from "vue"',
       `import InjectedLayout from "${toAtFS(layouts[layoutName])}"`,
-      'import { injectionSlidevContext } from "@slidev/client/constants.ts"',
+      'import { injectionSlidevContext as _injectionSlidevContext, injectionClicks as _injectionClicks } from "@slidev/client/constants.ts"',
       `const frontmatter = ${JSON.stringify(frontmatter)}`,
       'const $frontmatter = frontmatter',
-      'const $slidev = _vueInject(injectionSlidevContext)',
+      'const $slidev = _vueInject(_injectionSlidevContext)',
       'const $nav = _vueToRef($slidev, "nav")',
-      'const $clicks = _vueToRef($slidev.nav, "clicks")',
+      'const $clicks = _vueInject(_injectionClicks)',
     ]
 
     code = code.replace(/(<script setup.*>)/g, `$1\n${imports.join('\n')}\n`)
@@ -367,14 +367,14 @@ ${title}
   }
 
   function transformVue(code: string): string {
-    if (code.includes('injectionSlidevContext'))
+    if (code.includes('injectionSlidevContext') || code.includes('injectionClicks') || code.includes('const $slidev'))
       return code // Assume that the context is already imported and used
     const imports = [
       'import { inject as _vueInject, toRef as _vueToRef } from "vue"',
-      'import { injectionSlidevContext } from "@slidev/client/constants.ts"',
-      'const $slidev = _vueInject(injectionSlidevContext)',
+      'import { injectionSlidevContext as _injectionSlidevContext, injectionClicks as _injectionClicks } from "@slidev/client/constants.ts"',
+      'const $slidev = _vueInject(_injectionSlidevContext)',
       'const $nav = _vueToRef($slidev, "nav")',
-      'const $clicks = _vueToRef($slidev.nav, "clicks")',
+      'const $clicks = _vueInject(_injectionClicks)',
     ]
     const matchScript = code.match(/<script((?!setup).)*(setup)?.*>/)
     if (matchScript && matchScript[2]) {