@slidev/client 52.11.5 → 52.12.0

package/composables/usePreloadImages.ts

@@ -0,0 +1,83 @@
+import type { SlideRoute } from '@slidev/types'
+import type { ComputedRef, Ref } from 'vue'
+import configs from '#slidev/configs'
+import { watchEffect } from 'vue'
+
+const loaded = new Set<string>()
+const loading = new Set<string>()
+
+function resolveUrl(url: string): string {
+  if (url.startsWith('http') || url.startsWith('//'))
+    return url
+  const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+  return `${base}${url.startsWith('/') ? url : `/${url}`}`
+}
+
+function preloadImage(url: string): void {
+  const resolved = resolveUrl(url)
+  if (loaded.has(resolved) || loading.has(resolved))
+    return
+  loading.add(resolved)
+  const img = new Image()
+  img.onload = () => {
+    loading.delete(resolved)
+    loaded.add(resolved)
+  }
+  img.onerror = () => {
+    loading.delete(resolved)
+  }
+  img.src = resolved
+}
+
+function preloadSlideImages(route: SlideRoute): void {
+  const images = route.meta?.slide?.images
+  if (images?.length) {
+    for (const url of images)
+      preloadImage(url)
+  }
+}
+
+export function usePreloadImages(
+  currentRoute: ComputedRef<SlideRoute>,
+  prevRoute: ComputedRef<SlideRoute>,
+  nextRoute: ComputedRef<SlideRoute>,
+  slides: Ref<SlideRoute[]>,
+): void {
+  const config = configs.preloadImages
+  if (config === false)
+    return
+
+  const ahead = (typeof config === 'object' && config?.ahead) || 3
+
+  // Preload current + prev + next + look-ahead window
+  watchEffect(() => {
+    const current = currentRoute.value
+    const all = slides.value
+    if (!current || !all?.length)
+      return
+
+    preloadSlideImages(current)
+    preloadSlideImages(prevRoute.value)
+    preloadSlideImages(nextRoute.value)
+
+    // Preload ahead window
+    const currentIdx = current.no - 1
+    for (let i = 1; i <= ahead; i++) {
+      const idx = currentIdx + i
+      if (idx < all.length)
+        preloadSlideImages(all[idx])
+    }
+  })
+
+  // Preload all remaining slides after 3s
+  watchEffect((onCleanup) => {
+    const all = slides.value
+    const timeout = setTimeout(() => {
+      if (all?.length) {
+        for (const route of all)
+          preloadSlideImages(route)
+      }
+    }, 3000)
+    onCleanup(() => clearTimeout(timeout))
+  })
+}

package/constants.ts

@@ -87,4 +87,5 @@ export const HEADMATTER_FIELDS = [
   'seoMeta',
   'notesAutoRuby',
   'magicMoveDuration',
+  'preloadImages',
 ]

package/internals/SlidesShow.vue

@@ -5,6 +5,7 @@ import { recomputeAllPoppers } from 'floating-vue'
 import { computed, shallowRef, TransitionGroup, watchEffect } from 'vue'
 import { createFixedClicks } from '../composables/useClicks'
 import { useNav } from '../composables/useNav'
+import { usePreloadImages } from '../composables/usePreloadImages'
 import { useViewTransition } from '../composables/useViewTransition'
 import { CLICKS_MAX } from '../constants'
 import { activeDragElement, disableTransition, hmrSkipTransition } from '../state'
@@ -49,6 +50,9 @@ watchEffect((onCleanup) => {
   onCleanup(() => clearTimeout(timeout))
 })
 
+// preload images for nearby slides
+usePreloadImages(currentSlideRoute, prevRoute, nextRoute, slides)
+
 const hasViewTransition = useViewTransition()
 
 const DrawingLayer = shallowRef<any>()

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "52.11.5",
+  "version": "52.12.0",
   "description": "Presentation slides for developers",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -61,8 +61,8 @@
     "vue": "^3.5.27",
     "vue-router": "^4.6.4",
     "yaml": "^2.8.2",
-    "@slidev/types": "52.11.5",
-    "@slidev/parser": "52.11.5"
+    "@slidev/parser": "52.12.0",
+    "@slidev/types": "52.12.0"
   },
   "devDependencies": {
     "vite": "^7.3.1"