@slidev/client 0.49.16 → 0.49.18

package/builtin/VAfter.ts

@@ -1,7 +1,7 @@
 /**
  * <v-after/> click animations component
  *
- * Learn more: https://sli.dev/guide/animations.html#click-animations
+ * Learn more: https://sli.dev/guide/animations.html#click-animation
  */
 
 import { toArray } from '@antfu/utils'

package/builtin/VClick.ts

@@ -1,7 +1,7 @@
 /**
  * <v-click/> click animations component
  *
- * Learn more: https://sli.dev/guide/animations.html#click-animations
+ * Learn more: https://sli.dev/guide/animations.html#click-animation
  */
 
 import type { PropType, VNode } from 'vue'

package/builtin/VClicks.ts

@@ -1,7 +1,7 @@
 /**
  * <v-clicks/> click animations component
  *
- * Learn more: https://sli.dev/guide/animations.html#click-animations
+ * Learn more: https://sli.dev/guide/animations.html#click-animation
  */
 
 import { toArray } from '@antfu/utils'

package/composables/useClicks.ts

@@ -1,8 +1,7 @@
 import { clamp, sum } from '@antfu/utils'
 import type { ClicksContext, NormalizedRangeClickValue, NormalizedSingleClickValue, RawAtValue, RawSingleAtValue, SlideRoute } from '@slidev/types'
 import type { Ref } from 'vue'
-import { computed, ref, shallowReactive } from 'vue'
-import { routeForceRefresh } from '../logic/route'
+import { computed, onMounted, onUnmounted, ref, shallowReactive } from 'vue'
 
 export function normalizeSingleAtValue(at: RawSingleAtValue): NormalizedSingleClickValue {
   if (at === false || at === 'false')
@@ -54,17 +53,19 @@ export function createClicksContextBase(
     get isMounted() {
       return isMounted.value
     },
-    onMounted: () => {
-      isMounted.value = true
-      // Convert maxMap to reactive
-      maxMap = shallowReactive(maxMap)
-      // Make sure the query is not greater than the total
-      context.current = current.value
-    },
-    onUnmounted: () => {
-      isMounted.value = false
-      relativeSizeMap = new Map()
-      maxMap = new Map()
+    setup() {
+      onMounted(() => {
+        isMounted.value = true
+        // Convert maxMap to reactive
+        maxMap = shallowReactive(maxMap)
+        // Make sure the query is not greater than the total
+        context.current = current.value
+      })
+      onUnmounted(() => {
+        isMounted.value = false
+        relativeSizeMap = new Map()
+        maxMap = new Map()
+      })
     },
     calculateSince(rawAt, size = 1) {
       const at = normalizeSingleAtValue(rawAt)
@@ -144,13 +145,9 @@ export function createClicksContextBase(
       maxMap.delete(el)
     },
     get currentOffset() {
-      // eslint-disable-next-line no-unused-expressions
-      routeForceRefresh.value
       return sum(...relativeSizeMap.values())
     },
     get total() {
-      // eslint-disable-next-line no-unused-expressions
-      routeForceRefresh.value
       return clicksTotalOverrides
         ?? (isMounted.value
           ? Math.max(0, ...maxMap.values())

package/composables/useDragElements.ts

@@ -113,7 +113,7 @@ export function useDragElementsUpdater(no: number) {
   }
 }
 
-export function useDragElement(directive: DirectiveBinding | null, posRaw?: string | number | number[], markdownSource?: DragElementMarkdownSource, isArrow?: boolean) {
+export function useDragElement(directive: DirectiveBinding | null, posRaw?: string | number | number[], markdownSource?: DragElementMarkdownSource, isArrow = false) {
   function inject<T>(key: InjectionKey<T> | string): T | undefined {
     return directive
       ? directiveInject(directive, key)

package/composables/useNav.ts

@@ -275,7 +275,7 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
 
   const currentRoute = computed(() => router.currentRoute.value)
   const query = computed(() => {
-    // eslint-disable-next-line no-unused-expressions
+    // eslint-disable-next-line ts/no-unused-expressions
     router.currentRoute.value.query
     return new URLSearchParams(location.search)
   })

package/composables/useSlideInfo.ts

@@ -17,7 +17,7 @@ export function useSlideInfo(no: number): UseSlideInfo {
       update: async () => {},
     }
   }
-  const url = `/@slidev/slide/${no}.json`
+  const url = `/__slidev/slides/${no}.json`
   const { data: info, execute } = useFetch(url).json<SlideInfo>().get()
 
   execute()

package/env.ts

@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { objectMap } from '@antfu/utils'
 import configs from '#slidev/configs'
 
@@ -6,8 +6,8 @@ export { configs }
 
 export const mode = __DEV__ ? 'dev' : 'build'
 
-export const slideAspect = ref(configs.aspectRatio ?? (16 / 9))
-export const slideWidth = ref(configs.canvasWidth ?? 980)
+export const slideAspect = computed(() => configs.aspectRatio)
+export const slideWidth = computed(() => configs.canvasWidth)
 
 // To honor the aspect ratio more as possible, we need to approximate the height to the next integer.
 // Doing this, we will prevent on print, to create an additional empty white page after each page.

package/internals/PrintSlideClick.vue

@@ -39,7 +39,6 @@ provideLocal(injectionSlidevContext, reactive({
     <GlobalBottom />
 
     <SlideWrapper
-      :is="route.component!"
       :clicks-context="nav.clicksContext.value"
       :class="getSlideClass(route)"
       :route="route"

package/internals/QuickOverview.vue

@@ -98,11 +98,6 @@ watchEffect(() => {
   // Watch rowCount, make sure up and down shortcut work correctly.
   overviewRowCount.value = rowCount.value
 })
-
-const activeSlidesLoaded = ref(false)
-setTimeout(() => {
-  activeSlidesLoaded.value = true
-}, 3000)
 </script>
 
 <template>
@@ -113,8 +108,7 @@ setTimeout(() => {
     leave-to-class="opacity-0 scale-102 !backdrop-blur-0px"
   >
     <div
-      v-if="showOverview || activeSlidesLoaded"
-      v-show="showOverview"
+      v-if="showOverview"
       class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-20 bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px"
       @click="close"
     >

package/internals/SlideWrapper.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { computed, defineAsyncComponent, defineComponent, h, ref, toRef } from 'vue'
+import { computed, ref, toRef } from 'vue'
 import type { CSSProperties, PropType } from 'vue'
 import { provideLocal } from '@vueuse/core'
 import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
 import { injectionClicksContext, injectionCurrentPage, injectionFrontmatter, injectionRenderContext, injectionRoute, injectionSlideZoom } from '../constants'
 import { getSlideClass } from '../utils'
 import { configs } from '../env'
-import SlideLoading from './SlideLoading.vue'
 import { SlideBottom, SlideTop } from '#slidev/global-layers'
 
 const props = defineProps({
@@ -47,19 +46,6 @@ const style = computed<CSSProperties>(() => ({
   ...zoomStyle.value,
   'user-select': configs.selectable ? undefined : 'none',
 }))
-
-const SlideComponent = computed(() => props.route && defineAsyncComponent({
-  loader: async () => {
-    const component = await props.route.component()
-    return defineComponent({
-      mounted: props.clicksContext?.onMounted,
-      unmounted: props.clicksContext?.onUnmounted,
-      render: () => h(component.default),
-    })
-  },
-  delay: 300,
-  loadingComponent: SlideLoading,
-}))
 </script>
 
 <template>
@@ -69,7 +55,7 @@ const SlideComponent = computed(() => props.route && defineAsyncComponent({
     :style="style"
   >
     <SlideBottom />
-    <SlideComponent />
+    <component :is="props.route.component" />
     <SlideTop />
   </div>
 </template>

package/internals/SlidesShow.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { TransitionGroup, computed, shallowRef, watch } from 'vue'
+import { TransitionGroup, computed, shallowRef, watchEffect } from 'vue'
 import { recomputeAllPoppers } from 'floating-vue'
+import type { SlideRoute } from '@slidev/types'
 import { useNav } from '../composables/useNav'
 import { useViewTransition } from '../composables/useViewTransition'
 import { skipTransition } from '../logic/hmr'
@@ -19,6 +20,7 @@ const {
   currentSlideRoute,
   currentTransition,
   getPrimaryClicks,
+  prevRoute,
   nextRoute,
   slides,
   isPrintMode,
@@ -26,13 +28,26 @@ const {
   clicksDirection,
 } = useNav()
 
-// preload next route
-watch(currentSlideRoute, () => {
-  if (currentSlideRoute.value?.meta && currentSlideRoute.value.meta.preload !== false)
-    currentSlideRoute.value.meta.__preloaded = true
-  if (nextRoute.value?.meta && nextRoute.value.meta.preload !== false)
-    nextRoute.value.meta.__preloaded = true
-}, { immediate: true })
+function preloadRoute(route: SlideRoute) {
+  if (route.meta.preload !== false) {
+    route.meta.__preloaded = true
+    route.load()
+  }
+}
+// preload current, prev and next slides
+watchEffect(() => {
+  preloadRoute(currentSlideRoute.value)
+  preloadRoute(prevRoute.value)
+  preloadRoute(nextRoute.value)
+})
+// preload all slides after 3s
+watchEffect((onCleanup) => {
+  const routes = slides.value
+  const timeout = setTimeout(() => {
+    routes.forEach(preloadRoute)
+  }, 3000)
+  onCleanup(() => clearTimeout(timeout))
+})
 
 const hasViewTransition = useViewTransition()
 
@@ -67,14 +82,15 @@ function onAfterLeave() {
     }"
     @after-leave="onAfterLeave"
   >
-    <SlideWrapper
-      v-for="route of loadedRoutes"
-      v-show="route === currentSlideRoute"
-      :key="route.no"
-      :clicks-context="isPrintMode && !isPrintWithClicks ? createFixedClicks(route, CLICKS_MAX) : getPrimaryClicks(route)"
-      :route="route"
-      :render-context="renderContext"
-    />
+    <template v-for="route of loadedRoutes" :key="route.no">
+      <SlideWrapper
+        v-if="Math.abs(route.no - currentSlideRoute.no) <= 20"
+        v-show="route === currentSlideRoute"
+        :clicks-context="isPrintMode && !isPrintWithClicks ? createFixedClicks(route, CLICKS_MAX) : getPrimaryClicks(route)"
+        :route="route"
+        :render-context="renderContext"
+      />
+    </template>
   </component>
 
   <DragControl v-if="activeDragElement" :data="activeDragElement" />

package/logic/route.ts

@@ -1,5 +1,5 @@
 import type { WritableComputedRef } from 'vue'
-import { computed, nextTick, ref, unref } from 'vue'
+import { computed, nextTick, unref } from 'vue'
 import { useRouter } from 'vue-router'
 
 export function useRouteQuery<T extends string | string[]>(
@@ -35,6 +35,3 @@ export function useRouteQuery<T extends string | string[]>(
     },
   })
 }
-
-// force update collected elements when the route is fully resolved
-export const routeForceRefresh = ref(0)

package/modules/mermaid.ts

@@ -19,7 +19,7 @@ export async function renderMermaid(lzEncoded: string, options: any) {
 
   mermaid.initialize({
     startOnLoad: false,
-    ...clearUndefined(setupMermaid() || {}),
+    ...clearUndefined(await setupMermaid() || {}),
     ...clearUndefined(options),
   })
   const code = lz.decompressFromBase64(lzEncoded)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.49.16",
+  "version": "0.49.18",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -32,12 +32,12 @@
     "@iconify-json/carbon": "^1.1.36",
     "@iconify-json/ph": "^1.1.13",
     "@iconify-json/svg-spinners": "^1.1.2",
-    "@shikijs/monaco": "^1.10.0",
-    "@shikijs/vitepress-twoslash": "^1.10.0",
+    "@shikijs/monaco": "^1.10.3",
+    "@shikijs/vitepress-twoslash": "^1.10.3",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.6",
-    "@unhead/vue": "^1.9.14",
-    "@unocss/reset": "^0.61.2",
+    "@unhead/vue": "^1.9.16",
+    "@unocss/reset": "^0.61.5",
     "@vueuse/core": "^10.11.0",
     "@vueuse/math": "^10.11.0",
     "@vueuse/motion": "^2.2.3",
@@ -45,23 +45,23 @@
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
-    "katex": "^0.16.10",
+    "katex": "^0.16.11",
     "lz-string": "^1.5.0",
     "mermaid": "^10.9.1",
     "monaco-editor": "^0.50.0",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "recordrtc": "^5.6.2",
-    "shiki": "^1.10.0",
-    "shiki-magic-move": "^0.4.2",
-    "typescript": "^5.5.2",
-    "unocss": "^0.61.2",
-    "vue": "^3.4.31",
+    "shiki": "^1.10.3",
+    "shiki-magic-move": "^0.4.3",
+    "typescript": "^5.5.3",
+    "unocss": "^0.61.5",
+    "vue": "^3.4.33",
     "vue-router": "^4.4.0",
     "yaml": "^2.4.5",
-    "@slidev/parser": "0.49.16",
-    "@slidev/types": "0.49.16"
+    "@slidev/parser": "0.49.18",
+    "@slidev/types": "0.49.18"
   },
   "devDependencies": {
-    "vite": "^5.3.2"
+    "vite": "^5.3.4"
   }
 }

package/pages/play.vue

@@ -37,18 +37,21 @@ registerShortcuts()
 if (__SLIDEV_FEATURE_WAKE_LOCK__)
   useWakeLock()
 
-useStyleTag(computed(() => `
-vite-error-overlay {
-  --width: calc(100vw - ${isEditorVertical.value ? 0 : editorWidth.value}px);
-  --height: calc(100vh - ${isEditorVertical.value ? editorHeight.value : 0}px);
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: calc(var(--width) / var(--slidev-slide-scale));
-  height: calc(var(--height) / var(--slidev-slide-scale));
-  transform-origin: top left;
-  transform: scale(var(--slidev-slide-scale));
-}`))
+if (import.meta.hot) {
+  useStyleTag(computed(() => `
+    vite-error-overlay {
+      --width: calc(100vw - ${isEditorVertical.value ? 0 : editorWidth.value}px);
+      --height: calc(100vh - ${isEditorVertical.value ? editorHeight.value : 0}px);
+      position: fixed;
+      left: 0;
+      top: 0;
+      width: calc(var(--width) / var(--slidev-slide-scale));
+      height: calc(var(--height) / var(--slidev-slide-scale));
+      transform-origin: top left;
+      transform: scale(var(--slidev-slide-scale));
+    }`,
+  ))
+}
 
 const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 

package/pages/presenter.vue

@@ -56,7 +56,7 @@ const nextFrame = computed(() => {
   if (clicksContext.value.current < clicksContext.value.total)
     return [currentSlideRoute.value!, clicksContext.value.current + 1] as const
   else if (hasNext.value)
-    return [nextRoute.value!, 0] as const
+    return [nextRoute.value, 0] as const
   else
     return null
 })
@@ -135,6 +135,11 @@ onMounted(() => {
             render-context="previewNext"
           />
         </SlideContainer>
+        <div v-else class="h-full flex justify-center items-center">
+          <div class="text-gray-500">
+            End of the presentation
+          </div>
+        </div>
         <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
           Next
         </div>

package/setup/main.ts

@@ -1,10 +1,8 @@
 import type { AppContext } from '@slidev/types'
 import TwoSlashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import type { App } from 'vue'
-import { nextTick } from 'vue'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import { createHead } from '@unhead/vue'
-import { routeForceRefresh } from '../logic/route'
 import { createVClickDirectives } from '../modules/v-click'
 import { createVMarkDirective } from '../modules/v-mark'
 import { createVDragDirective } from '../modules/v-drag'
@@ -43,13 +41,6 @@ export default async function setupMain(app: App) {
     router,
   }
 
-  nextTick(() => {
-    router.afterEach(async () => {
-      await nextTick()
-      routeForceRefresh.value += 1
-    })
-  })
-
   for (const setup of setups)
     await setup(context)
 }

package/setup/mermaid.ts

@@ -1,14 +1,14 @@
-import type { MermaidOptions } from '@slidev/types'
-import { defineMermaidSetup } from '@slidev/types'
+import type { MermaidConfig } from 'mermaid'
+import { createSingletonPromise } from '@antfu/utils'
 import setups from '#slidev/setups/mermaid'
 
-export default defineMermaidSetup(() => {
-  const setupReturn: MermaidOptions = {
+export default createSingletonPromise(async () => {
+  const setupReturn: MermaidConfig = {
     theme: 'default',
   }
 
   for (const setup of setups)
-    Object.assign(setupReturn, setup())
+    Object.assign(setupReturn, await setup())
 
   return setupReturn
 })