@slidev/client 0.49.29 → 0.50.0-beta.10

package/internals/ShikiEditor.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, shallowRef } from 'vue'
 import { getHighlighter } from '#slidev/shiki'
+import { ref, shallowRef } from 'vue'
 
 const props = defineProps<{
   placeholder?: string

package/internals/SideEditor.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { throttledWatch, useEventListener } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
-import { activeElement, editorHeight, editorWidth, isInputting, showEditor, isEditorVertical as vertical } from '../state'
 import { useNav } from '../composables/useNav'
 import { useDynamicSlideInfo } from '../composables/useSlideInfo'
+import { activeElement, editorHeight, editorWidth, isInputting, showEditor, isEditorVertical as vertical } from '../state'
 import IconButton from './IconButton.vue'
 import ShikiEditor from './ShikiEditor.vue'
 
@@ -143,13 +143,13 @@ throttledWatch(
           title="Switch to content tab" :class="tab === 'content' ? 'text-primary' : ''"
           @click="switchTab('content')"
         >
-          <carbon:account />
+          <div class="i-carbon:account" />
         </IconButton>
         <IconButton
           title="Switch to notes tab" :class="tab === 'note' ? 'text-primary' : ''"
           @click="switchTab('note')"
         >
-          <carbon:align-box-bottom-right />
+          <div class="i-carbon:align-box-bottom-right" />
         </IconButton>
       </div>
       <span class="text-2xl pt-1">
@@ -158,17 +158,17 @@ throttledWatch(
       <div class="flex-auto" />
       <template v-if="resize">
         <IconButton v-if="vertical" title="Dock to right" @click="vertical = false">
-          <carbon:open-panel-right />
+          <div class="i-carbon:open-panel-right" />
         </IconButton>
         <IconButton v-else title="Dock to bottom" @click="vertical = true">
-          <carbon:open-panel-bottom />
+          <div class="i-carbon:open-panel-bottom" />
         </IconButton>
       </template>
       <IconButton title="Open in editor" @click="openInEditor()">
-        <carbon:launch />
+        <div class="i-carbon:launch" />
       </IconButton>
       <IconButton title="Close" @click="close">
-        <carbon:close />
+        <div class="i-carbon:close" />
       </IconButton>
     </div>
     <div class="relative overflow-hidden rounded" style="background-color: var(--slidev-code-background)">

package/internals/SlideContainer.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { useNav } from '../composables/useNav'
 import { injectionSlideElement, injectionSlideScale } from '../constants'
 import { slideAspect, slideHeight, slideWidth } from '../env'
-import { useNav } from '../composables/useNav'
+import { snapshotManager } from '../logic/snapshot'
 import { slideScale } from '../state'
 
 const props = defineProps({
@@ -17,6 +18,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  no: {
+    type: Number,
+    required: false,
+  },
+  useSnapshot: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const { isPrintMode } = useNav()
@@ -54,15 +63,34 @@ if (props.isMain)
 
 provideLocal(injectionSlideScale, scale)
 provideLocal(injectionSlideElement, slideElement)
+
+const snapshot = computed(() => {
+  if (!props.useSnapshot || props.no == null)
+    return undefined
+  return snapshotManager.getSnapshot(props.no)
+})
+
+onMounted(() => {
+  if (container.value && props.useSnapshot && props.no != null) {
+    snapshotManager.captureSnapshot(props.no, container.value)
+  }
+})
 </script>
 
 <template>
-  <div :id="isMain ? 'slide-container' : undefined" ref="container" class="slidev-slide-container" :style="containerStyle">
+  <div v-if="!snapshot" :id="isMain ? 'slide-container' : undefined" ref="container" class="slidev-slide-container" :style="containerStyle">
     <div :id="isMain ? 'slide-content' : undefined" ref="slideElement" class="slidev-slide-content" :style="contentStyle">
       <slot />
     </div>
     <slot name="controls" />
   </div>
+  <!-- Image preview -->
+  <img
+    v-else
+    :src="snapshot"
+    class="w-full object-cover"
+    :style="containerStyle"
+  >
 </template>
 
 <style scoped lang="postcss">

package/internals/SlideWrapper.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { computed, ref, toRef } from 'vue'
+import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
 import type { CSSProperties, PropType } from 'vue'
+import { SlideBottom, SlideTop } from '#slidev/global-layers'
 import { provideLocal } from '@vueuse/core'
-import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
+import { computed, ref, toRef } from 'vue'
 import { injectionClicksContext, injectionCurrentPage, injectionFrontmatter, injectionRenderContext, injectionRoute, injectionSlideZoom } from '../constants'
-import { getSlideClass } from '../utils'
 import { configs } from '../env'
-import { SlideBottom, SlideTop } from '#slidev/global-layers'
+import { getSlideClass } from '../utils'
 
 const props = defineProps({
   clicksContext: {
@@ -53,6 +53,7 @@ const style = computed<CSSProperties>(() => ({
     :data-slidev-no="props.route.no"
     :class="getSlideClass(route, ['slide', 'presenter'].includes(props.renderContext) ? '' : 'disable-view-transition')"
     :style="style"
+    :lang="props.route.meta.slide.frontmatter.lang"
   >
     <SlideBottom />
     <component :is="props.route.component" />

package/internals/SlidesShow.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { TransitionGroup, computed, shallowRef, watchEffect } from 'vue'
-import { recomputeAllPoppers } from 'floating-vue'
 import type { SlideRoute } from '@slidev/types'
+import { GlobalBottom, GlobalTop } from '#slidev/global-layers'
+import { recomputeAllPoppers } from 'floating-vue'
+import { computed, shallowRef, TransitionGroup, watchEffect } from 'vue'
+import { createFixedClicks } from '../composables/useClicks'
 import { useNav } from '../composables/useNav'
 import { useViewTransition } from '../composables/useViewTransition'
+import { CLICKS_MAX } from '../constants'
 import { skipTransition } from '../logic/hmr'
-import { createFixedClicks } from '../composables/useClicks'
 import { activeDragElement } from '../state'
-import { CLICKS_MAX } from '../constants'
-import SlideWrapper from './SlideWrapper.vue'
 import DragControl from './DragControl.vue'
-import { GlobalBottom, GlobalTop } from '#slidev/global-layers'
+import SlideWrapper from './SlideWrapper.vue'
 
 defineProps<{
   renderContext: 'slide' | 'presenter'

package/internals/WebCamera.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useDraggable, useEventListener, useLocalStorage } from '@vueuse/core'
 import { computed, onMounted, ref, watchEffect } from 'vue'
-import { currentCamera } from '../state'
 import { recorder } from '../logic/recording'
+import { currentCamera } from '../state'
 
 const size = useLocalStorage('slidev-webcam-size', Math.round(Math.min(window.innerHeight, (window.innerWidth) / 8)))
 const position = useLocalStorage('slidev-webcam-pos', {

package/layouts/error.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="px-4 py-10 text-center text-red-700 dark:text-red-500 font-bold font-mono">
-    An error occurred on this slide. Check the terminal for more information.
+    {{
+      __SLIDEV_HAS_SERVER__
+        ? 'An error occurred on this slide. Check the terminal for more information.'
+        : 'Failed to fetch this slide. Please check your network connection.'
+    }}
   </div>
 </template>

package/logic/contextMenu.ts

@@ -1,9 +1,9 @@
 import type { ContextMenuItem } from '@slidev/types'
 import type { ComputedRef } from 'vue'
 import { shallowRef } from 'vue'
-import setupContextMenu from '../setup/context-menu'
-import { configs, mode } from '../env'
 import { useNav } from '../composables/useNav'
+import { configs, mode } from '../env'
+import setupContextMenu from '../setup/context-menu'
 
 export const currentContextMenu = shallowRef<null | {
   x: number
@@ -24,7 +24,7 @@ export function closeContextMenu() {
 }
 
 export function onContextMenu(ev: MouseEvent) {
-  if (configs.contextMenu !== true && configs.contextMenu !== undefined && configs.contextMenu !== mode)
+  if (configs.contextMenu !== true && configs.contextMenu != null && configs.contextMenu !== mode)
     return
   if (ev.shiftKey || ev.defaultPrevented)
     return

package/logic/recording.ts

@@ -1,9 +1,9 @@
-import type { Ref } from 'vue'
-import { nextTick, ref, shallowRef, watch } from 'vue'
-import { useDevicesList, useEventListener, useLocalStorage } from '@vueuse/core'
-import { isTruthy } from '@antfu/utils'
 import type RecorderType from 'recordrtc'
 import type { Options as RecorderOptions } from 'recordrtc'
+import type { Ref } from 'vue'
+import { isTruthy } from '@antfu/utils'
+import { useDevicesList, useEventListener, useLocalStorage } from '@vueuse/core'
+import { nextTick, ref, shallowRef, watch } from 'vue'
 import { currentCamera, currentMic } from '../state'
 
 type Defined<T> = T extends undefined ? never : T

package/logic/shortcuts.ts

@@ -1,11 +1,11 @@
+import type { ShortcutOptions } from '@slidev/types'
 import type { Fn, KeyFilter } from '@vueuse/core'
+import type { Ref } from 'vue'
 import { onKeyStroke } from '@vueuse/core'
 import { and, not } from '@vueuse/math'
-import type { Ref } from 'vue'
 import { watch } from 'vue'
-import type { ShortcutOptions } from '@slidev/types'
-import { fullscreen, isInputting, isOnFocus, magicKeys, shortcutsEnabled } from '../state'
 import setupShortcuts from '../setup/shortcuts'
+import { fullscreen, isInputting, isOnFocus, magicKeys, shortcutsEnabled } from '../state'
 
 const _shortcut = and(not(isInputting), not(isOnFocus), shortcutsEnabled)
 

package/logic/slides.ts

@@ -1,8 +1,8 @@
 import type { SlideRoute } from '@slidev/types'
+import { slides } from '#slidev/slides'
 import { computed, watch, watchEffect } from 'vue'
-import { useSlideContext } from '../context'
 import { useNav } from '../composables/useNav'
-import { slides } from '#slidev/slides'
+import { useSlideContext } from '../context'
 
 export { slides }
 

package/logic/snapshot.ts

@@ -0,0 +1,86 @@
+import { snapshotState } from '../state/snapshot'
+import { getSlide } from './slides'
+
+export class SlideSnapshotManager {
+  private _capturePromises = new Map<number, Promise<void>>()
+
+  getSnapshot(slideNo: number) {
+    const data = snapshotState.state[slideNo]
+    if (!data) {
+      return
+    }
+    const slide = getSlide(slideNo)
+    if (!slide) {
+      return
+    }
+    if (data?.revision === slide?.meta.slide.revision) {
+      return data.image
+    }
+  }
+
+  async captureSnapshot(slideNo: number, el: HTMLElement, delay = 1000) {
+    if (!__DEV__)
+      return
+    if (this.getSnapshot(slideNo)) {
+      return
+    }
+    if (this._capturePromises.has(slideNo)) {
+      await this._capturePromises.get(slideNo)
+    }
+    const promise = this._captureSnapshot(slideNo, el, delay)
+      .finally(() => {
+        this._capturePromises.delete(slideNo)
+      })
+    this._capturePromises.set(slideNo, promise)
+    await promise
+  }
+
+  private async _captureSnapshot(slideNo: number, el: HTMLElement, delay: number) {
+    if (!__DEV__)
+      return
+    const slide = getSlide(slideNo)
+    if (!slide)
+      return
+
+    const revision = slide.meta.slide.revision
+
+    // Retry until the slide is loaded
+    let retries = 100
+    while (retries-- > 0) {
+      if (!el.querySelector('.slidev-slide-loading'))
+        break
+      await new Promise(r => setTimeout(r, 100))
+    }
+
+    // Artificial delay for the content to be loaded
+    await new Promise(r => setTimeout(r, delay))
+
+    // Capture the snapshot
+    const toImage = await import('html-to-image')
+    try {
+      const dataUrl = await toImage.toPng(el, {
+        width: el.offsetWidth,
+        height: el.offsetHeight,
+        skipFonts: true,
+        cacheBust: true,
+        pixelRatio: 1.5,
+      })
+      if (revision !== slide.meta.slide.revision) {
+        // eslint-disable-next-line no-console
+        console.info('[Slidev] Slide', slideNo, 'changed, discarding the snapshot')
+        return
+      }
+      snapshotState.patch(slideNo, {
+        revision,
+        image: dataUrl,
+      })
+      // eslint-disable-next-line no-console
+      console.info('[Slidev] Snapshot captured for slide', slideNo)
+    }
+    catch (e) {
+      console.error('[Slidev] Failed to capture snapshot for slide', slideNo, e)
+    }
+  }
+}
+
+export const snapshotManager = new SlideSnapshotManager()

package/logic/utils.ts

@@ -1,27 +1,4 @@
 import { parseRangeString } from '@slidev/parser/core'
-import { useTimestamp } from '@vueuse/core'
-import { computed, ref } from 'vue'
-
-export function useTimer() {
-  const tsStart = ref(Date.now())
-  const now = useTimestamp({
-    interval: 1000,
-  })
-  const timer = computed(() => {
-    const passed = (now.value - tsStart.value) / 1000
-    const sec = Math.floor(passed % 60).toString().padStart(2, '0')
-    const min = Math.floor(passed / 60).toString().padStart(2, '0')
-    return `${min}:${sec}`
-  })
-  function resetTimer() {
-    tsStart.value = now.value
-  }
-
-  return {
-    timer,
-    resetTimer,
-  }
-}
 
 export function makeId(length = 5) {
   const result = []

package/main.ts

@@ -4,6 +4,10 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import setupMain from './setup/main'
 
-const app = createApp(App)
-setupMain(app)
-app.mount('#app')
+async function main() {
+  const app = createApp(App)
+  await setupMain(app)
+  app.mount('#app')
+}
+
+main()

package/modules/context.ts

@@ -1,6 +1,6 @@
 import type { ComputedRef } from '@vue/reactivity'
-import type { configs } from '../env'
 import type { SlidevContextNav } from '../composables/useNav'
+import type { configs } from '../env'
 
 export interface SlidevContext {
   nav: SlidevContextNav

package/modules/mermaid.ts

@@ -1,8 +1,8 @@
-import mermaid from 'mermaid/dist/mermaid.esm.mjs'
-import lz from 'lz-string'
 import { clearUndefined } from '@antfu/utils'
-import setupMermaid from '../setup/mermaid'
+import lz from 'lz-string'
+import mermaid from 'mermaid/dist/mermaid.esm.mjs'
 import { makeId } from '../logic/utils'
+import setupMermaid from '../setup/mermaid'
 
 mermaid.startOnLoad = false
 mermaid.initialize({ startOnLoad: false })

package/modules/v-click.ts

@@ -1,6 +1,6 @@
+import type { ClicksElement, RawAtValue } from '@slidev/types'
 import type { App, DirectiveBinding } from 'vue'
 import { computed, watchEffect } from 'vue'
-import type { ClicksElement, RawAtValue } from '@slidev/types'
 import {
   CLASS_VCLICK_CURRENT,
   CLASS_VCLICK_FADE,

package/modules/v-drag.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue'
-import { watch } from 'vue'
 import type { DragElementState } from '../composables/useDragElements'
+import { watch } from 'vue'
 import { useDragElement } from '../composables/useDragElements'
 
 export function createVDragDirective() {

package/modules/v-mark.ts

@@ -1,8 +1,8 @@
 import type { RoughAnnotationConfig } from '@slidev/rough-notation'
-import { annotate } from '@slidev/rough-notation'
+import type { RawAtValue } from '@slidev/types'
 import type { App } from 'vue'
+import { annotate } from '@slidev/rough-notation'
 import { computed, watchEffect } from 'vue'
-import type { RawAtValue } from '@slidev/types'
 import { resolveClick } from './v-click'
 
 export interface RoughDirectiveOptions extends Partial<RoughAnnotationConfig> {

package/modules/v-motion.ts

@@ -1,9 +1,9 @@
+import type { ClicksInfo } from '@slidev/types'
 import type { App, ObjectDirective } from 'vue'
-import { watch } from 'vue'
 import { MotionDirective } from '@vueuse/motion'
-import type { ClicksInfo } from '@slidev/types'
-import { injectionClicksContext, injectionCurrentPage, injectionRenderContext } from '../constants'
+import { watch } from 'vue'
 import { useNav } from '../composables/useNav'
+import { injectionClicksContext, injectionCurrentPage, injectionRenderContext } from '../constants'
 import { makeId } from '../logic/utils'
 import { directiveInject } from '../utils'
 import { resolvedClickMap } from './v-click'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.49.29",
+  "version": "0.50.0-beta.10",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -29,39 +29,40 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.10",
-    "@iconify-json/carbon": "^1.1.37",
-    "@iconify-json/ph": "^1.1.14",
-    "@iconify-json/svg-spinners": "^1.1.3",
-    "@shikijs/monaco": "^1.14.1",
-    "@shikijs/vitepress-twoslash": "^1.14.1",
+    "@iconify-json/carbon": "^1.2.4",
+    "@iconify-json/ph": "^1.2.1",
+    "@iconify-json/svg-spinners": "^1.2.1",
+    "@shikijs/monaco": "^1.24.0",
+    "@shikijs/vitepress-twoslash": "^1.24.0",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.7",
-    "@unhead/vue": "^1.10.0",
-    "@unocss/reset": "^0.62.3",
-    "@vueuse/core": "^11.0.3",
-    "@vueuse/math": "^11.0.3",
-    "@vueuse/motion": "^2.2.3",
-    "drauu": "^0.4.1",
+    "@unhead/vue": "^1.11.13",
+    "@unocss/reset": "^0.65.0",
+    "@vueuse/core": "^12.0.0",
+    "@vueuse/math": "^12.0.0",
+    "@vueuse/motion": "^2.2.6",
+    "drauu": "^0.4.2",
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
+    "html-to-image": "^1.11.11",
     "katex": "^0.16.11",
     "lz-string": "^1.5.0",
-    "mermaid": "^11.0.2",
-    "monaco-editor": "^0.51.0",
-    "prettier": "^3.3.3",
+    "mermaid": "^11.4.1",
+    "monaco-editor": "0.51.0",
+    "prettier": "^3.4.1",
     "recordrtc": "^5.6.2",
-    "shiki": "^1.14.1",
-    "shiki-magic-move": "^0.4.4",
-    "typescript": "^5.5.4",
-    "unocss": "^0.62.3",
-    "vue": "^3.4.38",
-    "vue-router": "^4.4.3",
-    "yaml": "^2.5.0",
-    "@slidev/types": "0.49.29",
-    "@slidev/parser": "0.49.29"
+    "shiki": "^1.24.0",
+    "shiki-magic-move": "^0.5.0",
+    "typescript": "5.6.3",
+    "unocss": "^0.65.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "yaml": "^2.6.1",
+    "@slidev/types": "0.50.0-beta.10",
+    "@slidev/parser": "0.50.0-beta.10"
   },
   "devDependencies": {
-    "vite": "^5.4.2"
+    "vite": "^6.0.2"
   }
 }

package/pages/entry.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="h-full w-full flex items-center justify-center gap-5 lt-md:flex-col">
     <RouterLink to="/" class="page-link">
-      <carbon:presentation-file /> Slides
+      <div class="i-carbon:presentation-file" /> Slides
     </RouterLink>
     <RouterLink to="/presenter" class="page-link">
-      <carbon:user-speaker /> Presenter
+      <div class="i-carbon:user-speaker" /> Presenter
     </RouterLink>
     <RouterLink to="/notes" class="page-link">
-      <carbon:catalog /> Notes
+      <div class="i-carbon:catalog" /> Notes
     </RouterLink>
     <RouterLink to="/overview" class="page-link">
-      <carbon:list-boxes /> Overview
+      <div class="i-carbon:list-boxes" /> Overview
     </RouterLink>
   </div>
 </template>

package/pages/notes.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
-import { computed, ref, watch } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+import { createClicksContextBase } from '../composables/useClicks'
+import { useNav } from '../composables/useNav'
 import { slidesTitle } from '../env'
-import { sharedState } from '../state/shared'
-import { fullscreen } from '../state'
 
-import NoteDisplay from '../internals/NoteDisplay.vue'
-import IconButton from '../internals/IconButton.vue'
 import ClicksSlider from '../internals/ClicksSlider.vue'
-import { useNav } from '../composables/useNav'
-import { createClicksContextBase } from '../composables/useClicks'
+import IconButton from '../internals/IconButton.vue'
+import NoteDisplay from '../internals/NoteDisplay.vue'
+import { fullscreen } from '../state'
+import { sharedState } from '../state/shared'
 
 useHead({ title: `Notes - ${slidesTitle}` })
 
@@ -67,14 +67,14 @@ const clicksContext = computed(() => {
     <div class="flex-none border-t border-main">
       <div class="flex gap-1 items-center px-6 py-3">
         <IconButton :title="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" @click="toggleFullscreen">
-          <carbon:minimize v-if="isFullscreen" />
-          <carbon:maximize v-else />
+          <div v-if="isFullscreen" class="i-carbon:minimize" />
+          <div v-else class="i-carbon:maximize" />
         </IconButton>
         <IconButton title="Increase font size" @click="increaseFontSize">
-          <carbon:zoom-in />
+          <div class="i-carbon:zoom-in" />
         </IconButton>
         <IconButton title="Decrease font size" @click="decreaseFontSize">
-          <carbon:zoom-out />
+          <div class="i-carbon:zoom-out" />
         </IconButton>
         <div class="flex-auto" />
         <div class="p2 text-center">