@slidev/client 0.49.15 → 0.49.17

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/ClicksSlider.vue

@@ -41,14 +41,20 @@ function onMousedown() {
     :title="`Clicks in this slide: ${length}`"
     :class="length && props.clicksContext.isMounted ? '' : 'op50'"
   >
-    <div class="flex gap-0.5 items-center min-w-16 font-mono mr1">
+    <div class="flex gap-0.2 items-center min-w-16 font-mono mr1">
       <carbon:cursor-1 text-sm op50 />
-      <div flex-auto />
       <template v-if="current >= 0 && current !== CLICKS_MAX && active">
+        <div flex-auto />
         <span text-primary>{{ current }}</span>
-        <span op25>/</span>
+        <span op25 text-sm>/</span>
+        <span op50 text-sm>{{ total }}</span>
       </template>
-      <span op50>{{ total }}</span>
+      <div
+        v-else
+        op50 flex-auto pl1
+      >
+        {{ total }}
+      </div>
     </div>
     <div
       relative flex-auto h5 font-mono flex="~"
@@ -62,10 +68,13 @@ function onMousedown() {
         ]"
         :style="{ width: length > 0 ? `${1 / length * 100}%` : '100%' }"
       >
-        <div absolute inset-0 :class="i <= current ? 'bg-primary op15' : ''" />
+        <div
+          absolute inset-0
+          :class="(i <= current && active) ? 'bg-primary op15' : ''"
+        />
         <div
           :class="[
-            +i === +current ? 'text-primary font-bold op100 border-primary' : 'op30 border-main',
+            (+i === +current && active) ? 'text-primary font-bold op100 border-primary' : 'op30 border-main',
             i === 0 ? 'rounded-l' : '',
             i === total ? 'rounded-r' : 'border-r-2',
           ]"

package/internals/NoteEditable.vue

@@ -94,6 +94,14 @@ function calculateEditorHeight() {
     inputEl.value.style.height = `${inputEl.value.scrollHeight}px`
 }
 
+function onKeyDown(e: KeyboardEvent) {
+  // Override save shortcut on editing mode
+  if (editing.value && e.metaKey && e.key === 's') {
+    e.preventDefault()
+    update({ note: note.value }, props.no)
+  }
+}
+
 watch(
   [note, editing],
   () => {
@@ -129,5 +137,6 @@ watch(
     :class="props.class"
     :placeholder="placeholder"
     @keydown.esc="editing = false"
+    @keydown="onKeyDown"
   />
 </template>

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.15",
+  "version": "0.49.17",
   "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.15",
+    "@unocss/reset": "^0.61.3",
     "@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",
     "recordrtc": "^5.6.2",
-    "shiki": "^1.10.0",
+    "shiki": "^1.10.3",
     "shiki-magic-move": "^0.4.2",
-    "typescript": "^5.5.2",
-    "unocss": "^0.61.2",
-    "vue": "^3.4.31",
+    "typescript": "^5.5.3",
+    "unocss": "^0.61.3",
+    "vue": "^3.4.32",
     "vue-router": "^4.4.0",
     "yaml": "^2.4.5",
-    "@slidev/parser": "0.49.15",
-    "@slidev/types": "0.49.15"
+    "@slidev/parser": "0.49.17",
+    "@slidev/types": "0.49.17"
   },
   "devDependencies": {
-    "vite": "^5.3.2"
+    "vite": "^5.3.3"
   }
 }

package/pages/overview.vue

@@ -139,6 +139,14 @@ onMounted(() => {
           <carbon-moon v-if="isDark" />
           <carbon-sun v-else />
         </IconButton>
+        <IconButton
+          v-else
+          :title="isDark ? 'Dark mode' : 'Light mode'"
+          pointer-events-none op50
+        >
+          <carbon-moon v-if="isDark" />
+          <carbon-sun v-else />
+        </IconButton>
       </div>
     </nav>
     <main
@@ -173,7 +181,7 @@ onMounted(() => {
             <carbon:cics-program />
           </IconButton>
         </div>
-        <div class="flex flex-col gap-2 my5">
+        <div class="flex flex-col gap-2 my5" :style="{ width: `${cardWidth}px` }">
           <div
             class="border rounded border-main overflow-hidden bg-main select-none h-max"
             @dblclick="openSlideInNewTab(getSlidePath(route, false))"

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
 })