@slidev/client 0.48.7 → 0.48.9

package/builtin/ShikiMagicMove.vue

@@ -45,43 +45,45 @@ onMounted(() => {
       // 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 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) {
+        if (clickCount < currentClickSum + current.length - 1) {
           step = i
-          rangeStr = current[clickCount - _currentClickSum + 1]
+          rangeStr = current[clickCount - currentClickSum + 1]
           break
         }
-        _currentClickSum += current.length || 1
+        currentClickSum += current.length || 1
       }
       stepIndex.value = step
 
-      const pre = container.value?.querySelector('.shiki') as HTMLElement
-      if (!pre)
-        return
+      setTimeout(() => {
+        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
+        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[][])
+        // 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],
-      )
+        // Update highlight range
+        updateCodeHighlightRange(
+          rangeStr,
+          lines.length,
+          1,
+          no => lines[no],
+        )
+      })
     },
     { immediate: true },
   )
@@ -104,3 +106,10 @@ onMounted(() => {
     />
   </div>
 </template>
+
+<style>
+.slidev-code-magic-move .shiki-magic-move-enter-from,
+.slidev-code-magic-move .shiki-magic-move-leave-to {
+  opacity: 0;
+}
+</style>

package/composables/useClicks.ts

@@ -1,4 +1,4 @@
-import { sum } from '@antfu/utils'
+import { clamp, sum } from '@antfu/utils'
 import type { ClicksContext, SlideRoute } from '@slidev/types'
 import type { Ref } from 'vue'
 import { ref, shallowReactive } from 'vue'
@@ -7,18 +7,21 @@ import { routeForceRefresh } from '../logic/route'
 
 export function createClicksContextBase(
   current: Ref<number>,
-  clicksOverrides?: number,
+  clicksStart = 0,
+  clicksTotalOverrides?: number,
 ): ClicksContext {
   const relativeOffsets: ClicksContext['relativeOffsets'] = new Map()
   const map: ClicksContext['map'] = shallowReactive(new Map())
 
   return {
     get current() {
-      return +current.value
+      // Here we haven't know clicksTotal yet.
+      return clamp(+current.value, clicksStart, this.total)
     },
     set current(value) {
-      current.value = +value
+      current.value = clamp(+value, clicksStart, this.total)
     },
+    clicksStart,
     relativeOffsets,
     map,
     onMounted() { },
@@ -56,7 +59,7 @@ export function createClicksContextBase(
     get total() {
       // eslint-disable-next-line no-unused-expressions
       routeForceRefresh.value
-      return clicksOverrides ?? Math.max(0, ...[...map.values()].map(v => v.max || 0))
+      return clicksTotalOverrides ?? Math.max(0, ...[...map.values()].map(v => v.max || 0))
     },
   }
 }
@@ -65,5 +68,10 @@ export function createFixedClicks(
   route?: SlideRoute | undefined,
   currentInit = 0,
 ): ClicksContext {
-  return createClicksContextBase(ref(currentInit), route?.meta?.clicks)
+  const clicksStart = route?.meta.slide?.frontmatter.clicksStart ?? 0
+  return createClicksContextBase(
+    ref(Math.max(currentInit, clicksStart)),
+    clicksStart,
+    route?.meta?.clicks,
+  )
 }

package/composables/useNav.ts

@@ -5,6 +5,7 @@ import { useRouter } from 'vue-router'
 import type { RouteLocationNormalized, Router } from 'vue-router'
 import { createSharedComposable } from '@vueuse/core'
 import { logicOr } from '@vueuse/math'
+import { clamp } from '@antfu/utils'
 import { getCurrentTransition } from '../logic/transition'
 import { getSlide, getSlidePath } from '../logic/slides'
 import { CLICKS_MAX } from '../constants'
@@ -33,6 +34,7 @@ export interface SlidevContextNav {
 
   clicksContext: ComputedRef<ClicksContext>
   clicks: ComputedRef<number>
+  clicksStart: ComputedRef<number>
   clicksTotal: ComputedRef<number>
 
   /** The table of content tree */
@@ -99,6 +101,7 @@ export function useNavBase(
   const currentLayout = computed(() => currentSlideRoute.value.meta?.layout || (currentSlideNo.value === 1 ? 'cover' : 'default'))
 
   const clicks = computed(() => clicksContext.value.current)
+  const clicksStart = computed(() => clicksContext.value.clicksStart)
   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])
@@ -140,7 +143,7 @@ export function useNavBase(
 
   async function prev() {
     clicksDirection.value = -1
-    if (queryClicks.value <= 0)
+    if (queryClicks.value <= clicksStart.value)
       await prevSlide()
     else
       queryClicks.value -= 1
@@ -177,6 +180,9 @@ export function useNavBase(
     skipTransition.value = false
     const pageChanged = currentSlideNo.value !== page
     const clicksChanged = clicks !== queryClicks.value
+    const meta = getSlide(page)?.meta
+    const clicksStart = meta?.slide?.frontmatter.clicksStart ?? 0
+    clicks = clamp(clicks, clicksStart, meta?.__clicksContext?.total ?? CLICKS_MAX)
     if (pageChanged || clicksChanged) {
       await router?.push({
         path: getSlidePath(page, isPresenter.value),
@@ -202,6 +208,7 @@ export function useNavBase(
     prevRoute,
     clicksContext,
     clicks,
+    clicksStart,
     clicksTotal,
     hasNext,
     hasPrev,
@@ -289,24 +296,25 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
       computed({
         get() {
           if (currentSlideNo.value === thisNo)
-            return +(queryClicksRaw.value || 0) || 0
+            return Math.max(+(queryClicksRaw.value ?? 0), context.clicksStart)
           else if (currentSlideNo.value > thisNo)
             return CLICKS_MAX
           else
-            return 0
+            return context.clicksStart
         },
         set(v) {
           if (currentSlideNo.value === thisNo)
-            queryClicksRaw.value = Math.min(v, context.total).toString()
+            queryClicksRaw.value = clamp(v, context.clicksStart, context.total).toString()
         },
       }),
-      route?.meta?.clicks,
+      route?.meta.slide?.frontmatter.clicksStart ?? 0,
+      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).toString()
+      if (currentSlideNo.value === thisNo)
+        queryClicksRaw.value = clamp(+queryClicksRaw.value, context.clicksStart, context.total).toString()
     }
 
     if (route?.meta)

package/constants.ts

@@ -13,6 +13,7 @@ export const injectionRenderContext = '$$slidev-render-context' as unknown as In
 export const injectionActive = '$$slidev-active' as unknown as InjectionKey<Ref<boolean>>
 export const injectionFrontmatter = '$$slidev-fontmatter' as unknown as InjectionKey<Record<string, any>>
 export const injectionSlideZoom = '$$slidev-slide-zoom' as unknown as InjectionKey<ComputedRef<number>>
+export const injectionClickVisibility = '$$slidev-click-visibility' as unknown as InjectionKey<ComputedRef<true | 'before' | 'after'>>
 
 export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'
@@ -31,6 +32,7 @@ export const TRUST_ORIGINS = [
 
 export const FRONTMATTER_FIELDS = [
   'clicks',
+  'clicksStart',
   'disabled',
   'hide',
   'hideInToc',

package/internals/ClicksSlider.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ClicksContext } from '@slidev/types'
+import { clamp, range } from '@antfu/utils'
 import { computed } from 'vue'
 import { CLICKS_MAX } from '../constants'
 
@@ -8,6 +9,8 @@ const props = defineProps<{
 }>()
 
 const total = computed(() => props.clicksContext.total)
+const start = computed(() => clamp(0, props.clicksContext.clicksStart, total.value))
+const length = computed(() => total.value - start.value + 1)
 const current = computed({
   get() {
     return props.clicksContext.current > total.value ? -1 : props.clicksContext.current
@@ -18,7 +21,7 @@ const current = computed({
   },
 })
 
-const range = computed(() => Array.from({ length: total.value + 1 }, (_, i) => i))
+const clicksRange = computed(() => range(start.value, total.value + 1))
 
 function onMousedown() {
   if (current.value < 0 || current.value > total.value)
@@ -29,8 +32,8 @@ function onMousedown() {
 <template>
   <div
     class="flex gap-1 items-center select-none"
-    :title="`Clicks in this slide: ${total}`"
-    :class="total ? '' : 'op50'"
+    :title="`Clicks in this slide: ${length}`"
+    :class="length ? '' : 'op50'"
   >
     <div class="flex gap-0.5 items-center min-w-16 font-mono mr1">
       <carbon:cursor-1 text-sm op50 />
@@ -46,13 +49,13 @@ function onMousedown() {
       @dblclick="current = clicksContext.total"
     >
       <div
-        v-for="i of range" :key="i"
+        v-for="i of clicksRange" :key="i"
         border="y main" of-hidden relative
         :class="[
           i === 0 ? 'rounded-l border-l' : '',
           i === total ? 'rounded-r border-r' : '',
         ]"
-        :style="{ width: total > 0 ? `${1 / total * 100}%` : '100%' }"
+        :style="{ width: length > 0 ? `${1 / length * 100}%` : '100%' }"
       >
         <div absolute inset-0 :class="i <= current ? 'bg-primary op15' : ''" />
         <div
@@ -69,8 +72,8 @@ function onMousedown() {
       <input
         v-model="current"
         class="range" absolute inset-0
-        type="range" :min="0" :max="total" :step="1" z-10 op0
-        :style="{ '--thumb-width': `${1 / (total + 1) * 100}%` }"
+        type="range" :min="start" :max="total" :step="1" z-10 op0
+        :style="{ '--thumb-width': `${1 / (length + 1) * 100}%` }"
         @mousedown="onMousedown"
         @focus="event => (event.currentTarget as HTMLElement)?.blur()"
       >

package/internals/Goto.vue

@@ -3,7 +3,7 @@ import { computed, ref, watch } from 'vue'
 import Fuse from 'fuse.js'
 import { activeElement, showGotoDialog } from '../state'
 import { useNav } from '../composables/useNav'
-import Titles from '#slidev/title-renderer'
+import TitleRenderer from '#slidev/title-renderer'
 
 const container = ref<HTMLDivElement>()
 const input = ref<HTMLInputElement>()
@@ -161,7 +161,7 @@ watch(activeElement, () => {
         <div w-4 text-right op50 text-sm>
           {{ item.no }}
         </div>
-        <Titles :no="item.no" />
+        <TitleRenderer :no="item.no" />
       </li>
     </ul>
   </div>

package/internals/PresenterMouse.vue

@@ -8,8 +8,12 @@ import { sharedState } from '../state/shared'
     class="absolute top-0 left-0 right-0 bottom-0 pointer-events-none text-xl"
   >
     <ph-cursor-fill
-      class="absolute"
-      :style="{ left: `${sharedState.cursor.x}%`, top: `${sharedState.cursor.y}%` }"
+      class="absolute stroke-white dark:stroke-black"
+      :style="{
+        left: `${sharedState.cursor.x}%`,
+        top: `${sharedState.cursor.y}%`,
+        strokeWidth: 16,
+      }"
     />
   </div>
 </template>

package/internals/PrintSlide.vue

@@ -16,10 +16,14 @@ const clicks0 = createFixedClicks(route, isPrintWithClicks.value ? 0 : CLICKS_MA
     :nav="useFixedNav(route, clicks0)"
   />
   <template v-if="isPrintWithClicks">
+    <!--
+      clicks0.total can be any number >=0 when rendering.
+      So total-clicksStart can be negative in intermediate states.
+    -->
     <PrintSlideClick
-      v-for="i of clicks0.total"
+      v-for="i in Math.max(0, clicks0.total - clicks0.clicksStart)"
       :key="i"
-      :nav="useFixedNav(route, createFixedClicks(route, i))"
+      :nav="useFixedNav(route, createFixedClicks(route, i + clicks0.clicksStart))"
     />
   </template>
 </template>

package/internals/SlidesShow.vue

@@ -76,7 +76,6 @@ function onAfterLeave() {
         :class="getSlideClass(route)"
         :route="route"
         :render-context="renderContext"
-        class="overflow-hidden"
       />
     </div>
   </component>

package/modules/v-click.ts

@@ -1,5 +1,5 @@
 import type { ResolvedClicksInfo } from '@slidev/types'
-import type { App, DirectiveBinding, InjectionKey } from 'vue'
+import type { App, DirectiveBinding } from 'vue'
 import { computed, watchEffect } from 'vue'
 import {
   CLASS_VCLICK_CURRENT,
@@ -8,14 +8,12 @@ import {
   CLASS_VCLICK_HIDDEN_EXP,
   CLASS_VCLICK_PRIOR,
   CLASS_VCLICK_TARGET,
+  injectionClickVisibility,
   injectionClicksContext,
 } from '../constants'
+import { directiveInject, directiveProvide } from '../utils'
 
-export type VClickValue = string | [string | number, string | number] | boolean
-
-export function dirInject<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, defaultValue?: T): T | undefined {
-  return (dir.instance?.$ as any).provides[key as any] ?? defaultValue
-}
+export type VClickValue = undefined | string | number | [string | number, string | number] | boolean
 
 export function createVClickDirectives() {
   return {
@@ -25,7 +23,7 @@ export function createVClickDirectives() {
         name: 'v-click',
 
         mounted(el, dir) {
-          const resolved = resolveClick(el, dir, dir.value)
+          const resolved = resolveClick(el, dir, dir.value, true)
           if (resolved == null)
             return
 
@@ -37,7 +35,8 @@ export function createVClickDirectives() {
           if (clicks[1] != null)
             el.dataset.slidevClicksEnd = String(clicks[1])
 
-          watchEffect(() => {
+          // @ts-expect-error extra prop
+          el.watchStopHandle = watchEffect(() => {
             const active = resolved.isActive.value
             const current = resolved.isCurrent.value
             const prior = active && !current
@@ -62,13 +61,14 @@ export function createVClickDirectives() {
         name: 'v-after',
 
         mounted(el, dir) {
-          const resolved = resolveClick(el, dir, dir.value, true)
+          const resolved = resolveClick(el, dir, dir.value, true, true)
           if (resolved == null)
             return
 
           el.classList.toggle(CLASS_VCLICK_TARGET, true)
 
-          watchEffect(() => {
+          // @ts-expect-error extra prop
+          el.watchStopHandle = watchEffect(() => {
             const active = resolved.isActive.value
             const current = resolved.isCurrent.value
             const prior = active && !current
@@ -93,13 +93,14 @@ export function createVClickDirectives() {
         name: 'v-click-hide',
 
         mounted(el, dir) {
-          const resolved = resolveClick(el, dir, dir.value, false, true)
+          const resolved = resolveClick(el, dir, dir.value, true, false, true)
           if (resolved == null)
             return
 
           el.classList.toggle(CLASS_VCLICK_TARGET, true)
 
-          watchEffect(() => {
+          // @ts-expect-error extra prop
+          el.watchStopHandle = watchEffect(() => {
             const active = resolved.isActive.value
             const current = resolved.isCurrent.value
             const prior = active && !current
@@ -117,20 +118,20 @@ export function createVClickDirectives() {
   }
 }
 
-function isActive(thisClick: number | [number, number], clicks: number) {
+function isClickActive(thisClick: number | [number, number], clicks: number) {
   return Array.isArray(thisClick)
     ? thisClick[0] <= clicks && clicks < thisClick[1]
     : thisClick <= clicks
 }
 
-function isCurrent(thisClick: number | [number, number], clicks: number) {
+function isClickCurrent(thisClick: number | [number, number], clicks: number) {
   return Array.isArray(thisClick)
     ? thisClick[0] === clicks
     : thisClick === clicks
 }
 
-export function resolveClick(el: Element, dir: DirectiveBinding<any>, value: VClickValue, clickAfter = false, flagHide = false): ResolvedClicksInfo | null {
-  const ctx = dirInject(dir, injectionClicksContext)?.value
+export function resolveClick(el: Element | string, dir: DirectiveBinding<any>, value: VClickValue, provideVisibility = false, clickAfter = false, flagHide = false): ResolvedClicksInfo | null {
+  const ctx = directiveInject(dir, injectionClicksContext)?.value
 
   if (!el || !ctx)
     return null
@@ -152,29 +153,47 @@ export function resolveClick(el: Element, dir: DirectiveBinding<any>, value: VCl
   if (Array.isArray(value)) {
     // range (absolute)
     delta = 0
-    thisClick = value as [number, number]
+    thisClick = [+value[0], +value[1]]
     maxClick = +value[1]
   }
   else {
     ({ start: thisClick, end: maxClick, delta } = ctx.resolve(value))
   }
 
+  const isActive = computed(() => isClickActive(thisClick, ctx.current))
+  const isCurrent = computed(() => isClickCurrent(thisClick, ctx.current))
+  const isShown = computed(() => flagHide ? !isActive.value : isActive.value)
+
   const resolved: ResolvedClicksInfo = {
     max: maxClick,
     clicks: thisClick,
     delta,
-    isActive: computed(() => isActive(thisClick, ctx.current)),
-    isCurrent: computed(() => isCurrent(thisClick, ctx.current)),
-    isShown: computed(() => flagHide ? !isActive(thisClick, ctx.current) : isActive(thisClick, ctx.current)),
+    isActive,
+    isCurrent,
+    isShown,
     flagFade,
     flagHide,
   }
   ctx.register(el, resolved)
+
+  if (provideVisibility) {
+    directiveProvide(dir, injectionClickVisibility, computed(() => {
+      if (isShown.value)
+        return true
+      if (Array.isArray(thisClick))
+        return ctx.current < thisClick[0] ? 'before' : 'after'
+      else
+        return flagHide ? 'after' : 'before'
+    }))
+  }
+
   return resolved
 }
 
 function unmounted(el: HTMLElement, dir: DirectiveBinding<any>) {
   el.classList.toggle(CLASS_VCLICK_TARGET, false)
-  const ctx = dirInject(dir, injectionClicksContext)?.value
+  const ctx = directiveInject(dir, injectionClicksContext)?.value
   ctx?.unregister(el)
+  // @ts-expect-error extra prop
+  el.watchStopHandle?.()
 }

package/modules/v-mark.ts

@@ -121,7 +121,8 @@ export function createVMarkDirective() {
             return
           }
 
-          watchEffect(() => {
+          // @ts-expect-error extra prop
+          el.watchStopHandle = watchEffect(() => {
             let shouldShow: boolean | undefined
 
             if (options.value.class)
@@ -147,6 +148,11 @@ export function createVMarkDirective() {
               annotation.hide()
           })
         },
+
+        unmounted: (el) => {
+          // @ts-expect-error extra prop
+          el.watchStopHandle?.()
+        },
       })
     },
   }

package/modules/v-motion.ts

@@ -0,0 +1,120 @@
+import type { App, ObjectDirective } from 'vue'
+import { watch } from 'vue'
+import { MotionDirective } from '@vueuse/motion'
+import type { ResolvedClicksInfo } from '@slidev/types'
+import { injectionClickVisibility, injectionClicksContext, injectionCurrentPage, injectionRenderContext } from '../constants'
+import { useNav } from '../composables/useNav'
+import { makeId } from '../logic/utils'
+import { directiveInject } from '../utils'
+import type { VClickValue } from './v-click'
+import { resolveClick } from './v-click'
+
+export type MotionDirectiveValue = undefined | VClickValue | {
+  key?: string
+  at?: VClickValue
+}
+
+export function createVMotionDirectives() {
+  return {
+    install(app: App) {
+      const original = MotionDirective() as ObjectDirective
+      app.directive<HTMLElement | SVGElement, string>('motion', {
+        // @ts-expect-error extra prop
+        name: 'v-motion',
+        mounted(el, binding, node, prevNode) {
+          const props = node.props = { ...node.props }
+
+          const variantInitial = { ...props.initial, ...props.variants?.['slidev-initial'] }
+          const variantEnter = { ...props.enter, ...props.variants?.['slidev-enter'] }
+          const variantLeave = { ...props.leave, ...props.variants?.['slidev-leave'] }
+          delete props.initial
+          delete props.enter
+          delete props.leave
+
+          const idPrefix = `${makeId()}-`
+          const clicks: {
+            id: string
+            at: number | [number, number]
+            variant: Record<string, unknown>
+            resolved: ResolvedClicksInfo | null
+          }[] = []
+
+          for (const k of Object.keys(props)) {
+            if (k.startsWith('click-')) {
+              const s = k.slice(6)
+              const at = s.includes('-') ? s.split('-').map(Number) as [number, number] : +s
+              const id = idPrefix + s
+              clicks.push({
+                id,
+                at,
+                variant: { ...props[k] },
+                resolved: resolveClick(id, binding, at),
+              })
+              delete props[k]
+            }
+          }
+
+          clicks.sort((a, b) => (Array.isArray(a.at) ? a.at[0] : a.at) - (Array.isArray(b.at) ? b.at[0] : b.at))
+
+          original.created!(el, binding, node, prevNode)
+          original.mounted!(el, binding, node, prevNode)
+
+          const thisPage = directiveInject(binding, injectionCurrentPage)
+          const renderContext = directiveInject(binding, injectionRenderContext)
+          const clickVisibility = directiveInject(binding, injectionClickVisibility)
+          const clicksContext = directiveInject(binding, injectionClicksContext)
+          const { currentPage, clicks: currentClicks, isPrintMode } = useNav()
+          // @ts-expect-error extra prop
+          const motion = el.motionInstance
+          motion.clickIds = clicks.map(i => i.id)
+          motion.set(variantInitial)
+          motion.watchStopHandle = watch(
+            [thisPage, currentPage, currentClicks].filter(Boolean),
+            () => {
+              const visibility = clickVisibility?.value ?? true
+              if (!clicksContext?.value || !['slide', 'presenter'].includes(renderContext?.value ?? '')) {
+                const mixedVariant: Record<string, unknown> = { ...variantInitial, ...variantEnter }
+                for (const { variant } of clicks)
+                  Object.assign(mixedVariant, variant)
+
+                motion.set(mixedVariant)
+              }
+              else if (isPrintMode.value || thisPage?.value === currentPage.value) {
+                if (visibility === true) {
+                  const mixedVariant: Record<string, unknown> = { ...variantInitial, ...variantEnter }
+                  for (const { variant, resolved: resolvedClick } of clicks) {
+                    if (!resolvedClick || resolvedClick.isActive.value)
+                      Object.assign(mixedVariant, variant)
+                  }
+                  if (isPrintMode.value)
+                    motion.set(mixedVariant) // print with clicks
+                  else
+                    motion.apply(mixedVariant)
+                }
+                else {
+                  motion.apply(visibility === 'before' ? variantInitial : variantLeave)
+                }
+              }
+              else {
+                motion.apply((thisPage?.value ?? -1) > currentPage.value ? variantInitial : variantLeave)
+              }
+            },
+            {
+              immediate: true,
+            },
+          )
+        },
+        unmounted(el, dir) {
+          if (!directiveInject(dir, injectionClicksContext)?.value)
+            return
+
+          const ctx = directiveInject(dir, injectionClicksContext)?.value
+          // @ts-expect-error extra prop
+          const motion = el.motionInstance
+          motion.clickIds.map((id: string) => ctx?.unregister(id))
+          motion.watchStopHandle()
+        },
+      })
+    },
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.7",
+  "version": "0.48.9",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -32,12 +32,12 @@
     "@iconify-json/carbon": "^1.1.31",
     "@iconify-json/ph": "^1.1.11",
     "@iconify-json/svg-spinners": "^1.1.2",
-    "@shikijs/monaco": "^1.1.7",
-    "@shikijs/vitepress-twoslash": "^1.1.7",
+    "@shikijs/monaco": "^1.2.3",
+    "@shikijs/vitepress-twoslash": "^1.2.3",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.4",
-    "@unhead/vue": "^1.8.18",
-    "@unocss/reset": "^0.58.5",
+    "@unhead/vue": "^1.9.4",
+    "@unocss/reset": "^0.58.9",
     "@vueuse/core": "^10.9.0",
     "@vueuse/math": "^10.9.0",
     "@vueuse/motion": "^2.1.0",
@@ -47,23 +47,23 @@
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
     "js-yaml": "^4.1.0",
-    "katex": "^0.16.9",
+    "katex": "^0.16.10",
     "lz-string": "^1.5.0",
     "mermaid": "^10.9.0",
     "monaco-editor": "^0.47.0",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
-    "shiki": "^1.1.7",
-    "shiki-magic-move": "^0.3.4",
-    "typescript": "^5.4.2",
-    "unocss": "^0.58.5",
+    "shiki": "^1.2.3",
+    "shiki-magic-move": "^0.3.5",
+    "typescript": "^5.4.3",
+    "unocss": "^0.58.9",
     "vue": "^3.4.21",
     "vue-demi": "^0.14.7",
     "vue-router": "^4.3.0",
-    "@slidev/types": "0.48.7",
-    "@slidev/parser": "0.48.7"
+    "@slidev/parser": "0.48.9",
+    "@slidev/types": "0.48.9"
   },
   "devDependencies": {
-    "vite": "^5.1.6"
+    "vite": "^5.2.7"
   }
 }

package/pages/print.vue

@@ -28,8 +28,8 @@ onMounted(() => {
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"
       :width="windowSize.width.value"
     />
+    <div id="twoslash-container" />
   </div>
-  <div id="twoslash-container" />
 </template>
 
 <style lang="postcss">

package/setup/code-runners.ts

@@ -1,13 +1,14 @@
-import { createSingletonPromise } from '@antfu/utils'
+import { createSingletonPromise, ensurePrefix, slash } from '@antfu/utils'
 import type { CodeRunner, CodeRunnerContext, CodeRunnerOutput, CodeRunnerOutputText, CodeRunnerOutputs } from '@slidev/types'
 import type { CodeToHastOptions } from 'shiki'
+import type ts from 'typescript'
 import { isDark } from '../logic/dark'
 import setups from '#slidev/setups/code-runners'
 
 export default createSingletonPromise(async () => {
   const runners: Record<string, CodeRunner> = {
-    javascript: runJavaScript,
-    js: runJavaScript,
+    javascript: runTypeScript,
+    js: runTypeScript,
     typescript: runTypeScript,
     ts: runTypeScript,
   }
@@ -24,6 +25,18 @@ export default createSingletonPromise(async () => {
     ...options,
   })
 
+  const resolveId = async (specifier: string) => {
+    if (!/^(@[^\/:]+?\/)?[^\/:]+$/.test(specifier))
+      return specifier
+    const res = await fetch(`/@slidev/resolve-id/${specifier}`)
+    if (!res.ok)
+      return null
+    const id = await res.text()
+    if (!id)
+      return null
+    return `/@fs${ensurePrefix('/', slash(id))}`
+  }
+
   const run = async (code: string, lang: string, options: Record<string, unknown>): Promise<CodeRunnerOutputs> => {
     try {
       const runner = runners[lang]
@@ -34,6 +47,7 @@ export default createSingletonPromise(async () => {
         {
           options,
           highlight,
+          resolveId,
           run: async (code, lang) => {
             return await run(code, lang, options)
           },
@@ -60,7 +74,7 @@ export default createSingletonPromise(async () => {
 })
 
 // Ported from https://github.com/microsoft/TypeScript-Website/blob/v2/packages/playground/src/sidebar/runtime.ts
-export async function runJavaScript(code: string): Promise<CodeRunnerOutputs> {
+async function runJavaScript(code: string): Promise<CodeRunnerOutputs> {
   const allLogs: CodeRunnerOutput[] = []
 
   const replace = {} as any
@@ -144,9 +158,13 @@ export async function runJavaScript(code: string): Promise<CodeRunnerOutputs> {
     return textRep
   }
 
-  // The reflect-metadata runtime is available, so allow that to go through
   function sanitizeJS(code: string) {
-    return code.replace(`import "reflect-metadata"`, '').replace(`require("reflect-metadata")`, '')
+    // The reflect-metadata runtime is available, so allow that to go through
+    code = code.replace(`import "reflect-metadata"`, '').replace(`require("reflect-metadata")`, '')
+    // Transpiled typescript sometimes contains an empty export, remove it.
+    code = code.replace('export {};', '')
+
+    return code
   }
 
   return allLogs
@@ -155,10 +173,80 @@ export async function runJavaScript(code: string): Promise<CodeRunnerOutputs> {
 let tsModule: typeof import('typescript') | undefined
 
 export async function runTypeScript(code: string, context: CodeRunnerContext) {
-  const { transpile } = tsModule ??= await import('typescript')
-  code = transpile(code, {
-    module: tsModule.ModuleKind.ESNext,
-    target: tsModule.ScriptTarget.ES2022,
-  })
-  return await context.run(code, 'javascript')
+  tsModule ??= await import('typescript')
+
+  code = tsModule.transpileModule(code, {
+    compilerOptions: {
+      module: tsModule.ModuleKind.ESNext,
+      target: tsModule.ScriptTarget.ES2022,
+    },
+    transformers: {
+      after: [transformImports],
+    },
+  }).outputText
+
+  const importRegex = /import\s*\(\s*(['"])(.+?)['"]\s*\)/g
+  const idMap: Record<string, string> = {}
+  for (const [,,specifier] of code.matchAll(importRegex)!)
+    idMap[specifier] = await context.resolveId(specifier) ?? specifier
+  code = code.replace(importRegex, (_full, quote, specifier) => `import(${quote}${idMap[specifier] ?? specifier}${quote})`)
+
+  return await runJavaScript(code)
+}
+
+/**
+ * Transform import statements to dynamic imports
+ */
+function transformImports(context: ts.TransformationContext): ts.Transformer<ts.SourceFile> {
+  const { factory } = context
+  const { isImportDeclaration, isNamedImports, NodeFlags } = tsModule!
+  return (sourceFile: ts.SourceFile) => {
+    const statements = [...sourceFile.statements]
+    for (let i = 0; i < statements.length; i++) {
+      const statement = statements[i]
+      if (!isImportDeclaration(statement))
+        continue
+      let bindingPattern: ts.ObjectBindingPattern | ts.Identifier
+      const namedBindings = statement.importClause?.namedBindings
+      const bindings: ts.BindingElement[] = []
+      if (statement.importClause?.name)
+        bindings.push(factory.createBindingElement(undefined, factory.createIdentifier('default'), statement.importClause.name))
+      if (namedBindings) {
+        if (isNamedImports(namedBindings)) {
+          for (const specifier of namedBindings.elements)
+            bindings.push(factory.createBindingElement(undefined, specifier.propertyName, specifier.name))
+          bindingPattern = factory.createObjectBindingPattern(bindings)
+        }
+        else {
+          bindingPattern = factory.createIdentifier(namedBindings.name.text)
+        }
+      }
+      else {
+        bindingPattern = factory.createObjectBindingPattern(bindings)
+      }
+
+      const newStatement = factory.createVariableStatement(
+        undefined,
+        factory.createVariableDeclarationList(
+          [
+            factory.createVariableDeclaration(
+              bindingPattern,
+              undefined,
+              undefined,
+              factory.createAwaitExpression(
+                factory.createCallExpression(
+                  factory.createIdentifier('import'),
+                  undefined,
+                  [statement.moduleSpecifier],
+                ),
+              ),
+            ),
+          ],
+          NodeFlags.Const,
+        ),
+      )
+      statements[i] = newStatement
+    }
+    return factory.updateSourceFile(sourceFile, statements)
+  }
 }

package/setup/main.ts

@@ -1,5 +1,4 @@
 import type { AppContext } from '@slidev/types'
-import { MotionPlugin } from '@vueuse/motion'
 import TwoSlashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import type { App } from 'vue'
 import { nextTick } from 'vue'
@@ -8,6 +7,7 @@ import { createHead } from '@unhead/vue'
 import { routeForceRefresh } from '../logic/route'
 import { createVClickDirectives } from '../modules/v-click'
 import { createVMarkDirective } from '../modules/v-mark'
+import { createVMotionDirectives } from '../modules/v-motion'
 import { routes } from '../routes'
 import setups from '#slidev/setups/main'
 
@@ -34,7 +34,7 @@ export default async function setupMain(app: App) {
   app.use(createHead())
   app.use(createVClickDirectives())
   app.use(createVMarkDirective())
-  app.use(MotionPlugin)
+  app.use(createVMotionDirectives())
   app.use(TwoSlashFloatingVue as any, { container: '#twoslash-container' })
 
   const context: AppContext = {

package/utils.ts

@@ -1,4 +1,5 @@
 import type { SlideRoute } from '@slidev/types'
+import type { DirectiveBinding, InjectionKey } from 'vue'
 import { configs } from './env'
 
 export function getSlideClass(route?: SlideRoute, extra = '') {
@@ -22,3 +23,18 @@ export async function downloadPDF() {
     `${configs.title}.pdf`,
   )
 }
+
+export function directiveInject<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, defaultValue?: T): T | undefined {
+  return (dir.instance?.$ as any).provides[key as any] ?? defaultValue
+}
+
+export function directiveProvide<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, value?: T) {
+  const instance = dir.instance?.$ as any
+  if (instance) {
+    let provides = instance.provides
+    const parentProvides = instance.parent?.provides
+    if (provides === parentProvides)
+      provides = instance.provides = Object.create(parentProvides)
+    provides[key as any] = value
+  }
+}