@slidev/client 0.50.0-beta.9 → 0.50.0

package/internals/QuickOverview.vue

@@ -109,7 +109,7 @@ watchEffect(() => {
   >
     <div
       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 select-none"
+      class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-modal bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px select-none"
       @click="close"
     >
       <div
@@ -157,7 +157,7 @@ watchEffect(() => {
       </div>
     </div>
   </Transition>
-  <div v-if="showOverview" class="fixed top-4 right-4 z-20 text-gray-400 flex flex-col items-center gap-2">
+  <div v-if="showOverview" class="fixed top-4 right-4 z-modal text-gray-400 flex flex-col items-center gap-2">
     <IconButton title="Close" class="text-2xl" @click="close">
       <div class="i-carbon:close" />
     </IconButton>

package/internals/Settings.vue

@@ -30,8 +30,11 @@ const wakeLockItems: SelectionItem<boolean>[] = [
 </script>
 
 <template>
-  <div class="text-sm select-none">
+  <div class="text-sm select-none mb-2">
     <SelectList v-model="slideScale" title="Scale" :items="scaleItems" />
-    <SelectList v-if="__SLIDEV_FEATURE_WAKE_LOCK__ && isSupported" v-model="wakeLockEnabled" title="Wake lock" :items="wakeLockItems" />
+    <SelectList
+      v-if="__SLIDEV_FEATURE_WAKE_LOCK__ && isSupported"
+      v-model="wakeLockEnabled" title="Wake lock" :items="wakeLockItems"
+    />
   </div>
 </template>

package/internals/SideEditor.vue

@@ -121,7 +121,7 @@ throttledWatch(
 
 <template>
   <div
-    v-if="resize" class="fixed bg-gray-400 select-none opacity-0 hover:opacity-10 z-100"
+    v-if="resize" class="fixed bg-gray-400 select-none opacity-0 hover:opacity-10 z-dragging"
     :class="vertical ? 'left-0 right-0 w-full h-10px' : 'top-0 bottom-0 w-10px h-full'" :style="{
       opacity: handlerDown ? '0.3' : undefined,
       bottom: vertical ? `${editorHeight - 5}px` : undefined,

package/internals/SlidesShow.vue

@@ -26,6 +26,7 @@ const {
   isPrintMode,
   isPrintWithClicks,
   clicksDirection,
+  printRange,
 } = useNav()
 
 function preloadRoute(route: SlideRoute) {
@@ -55,7 +56,10 @@ const DrawingLayer = shallowRef<any>()
 if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
   import('./DrawingLayer.vue').then(v => DrawingLayer.value = v.default)
 
-const loadedRoutes = computed(() => slides.value.filter(r => r.meta?.__preloaded || r === currentSlideRoute.value))
+const loadedRoutes = computed(() => isPrintMode.value
+  ? printRange.value.map(no => slides.value[no - 1])
+  : slides.value.filter(r => r.meta?.__preloaded || r === currentSlideRoute.value),
+)
 
 function onAfterLeave() {
   // After transition, we disable it so HMR won't trigger it again
@@ -72,8 +76,8 @@ function onAfterLeave() {
 
   <!-- Slides -->
   <component
-    :is="hasViewTransition ? 'div' : TransitionGroup"
-    v-bind="skipTransition ? {} : currentTransition"
+    :is="hasViewTransition && !isPrintMode ? 'div' : TransitionGroup"
+    v-bind="skipTransition || isPrintMode ? {} : currentTransition"
     id="slideshow"
     tag="div"
     :class="{

package/internals/WebCamera.vue

@@ -63,7 +63,7 @@ onMounted(fixPosition)
 <template>
   <div
     v-if="streamCamera && showAvatar && currentCamera !== 'none'"
-    class="fixed z-10"
+    class="fixed z-camera"
     :style="containerStyle"
   >
     <div
@@ -83,7 +83,7 @@ onMounted(fixPosition)
 
     <div
       ref="handler"
-      class="absolute bottom-0 right-0 rounded-full bg-main shadow opacity-0 shadow z-30 hover:opacity-100 dark:border dark:border-true-gray-700"
+      class="absolute bottom-0 right-0 rounded-full bg-main shadow opacity-0 shadow z-dragging hover:opacity-100 dark:border dark:border-true-gray-700"
       :style="handleStyle"
       :class="handlerDown ? '!opacity-100' : ''"
     />

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/dark.ts

@@ -26,12 +26,23 @@ export const isDark = computed<boolean>({
 export const toggleDark = useToggle(isDark)
 
 if (isClient) {
+  const CSS_DISABLE_TRANS = '*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}'
+
   watch(
     isDark,
     (v) => {
+      const style = window!.document.createElement('style')
+      style.appendChild(document.createTextNode(CSS_DISABLE_TRANS))
+      window!.document.head.appendChild(style)
+
       const html = document.querySelector('html')!
       html.classList.toggle('dark', v)
       html.classList.toggle('light', !v)
+
+      // Calling getComputedStyle forces the browser to redraw
+      // @ts-expect-error unused variable
+      const _ = window!.getComputedStyle(style!).opacity
+      document.head.removeChild(style!)
     },
     { immediate: true },
   )

package/logic/screenshot.ts

@@ -0,0 +1,61 @@
+import { computed, ref } from 'vue'
+
+export async function startScreenshotSession(width: number, height: number) {
+  const canvas = document.createElement('canvas')
+  canvas.width = width
+  canvas.height = height
+  const context = canvas.getContext('2d')!
+  const video = document.createElement('video')
+  video.width = width
+  video.height = height
+
+  const captureStream = ref<MediaStream | null>(await navigator.mediaDevices.getDisplayMedia({
+    video: {
+      // Use a rather small frame rate
+      frameRate: 10,
+      // @ts-expect-error missing types
+      cursor: 'never',
+    },
+    selfBrowserSurface: 'include',
+    preferCurrentTab: true,
+  }))
+  captureStream.value!.addEventListener('inactive', dispose)
+
+  video.srcObject = captureStream.value!
+  video.play()
+
+  function screenshot(element: HTMLElement) {
+    if (!captureStream.value)
+      throw new Error('captureStream inactive')
+    context.clearRect(0, 0, width, height)
+    const { left, top, width: elWidth } = element.getBoundingClientRect()
+    context.drawImage(
+      video,
+      left * window.devicePixelRatio,
+      top * window.devicePixelRatio,
+      elWidth * window.devicePixelRatio,
+      elWidth / width * height * window.devicePixelRatio,
+      0,
+      0,
+      width,
+      height,
+    )
+    return canvas.toDataURL('image/png')
+  }
+
+  function dispose() {
+    captureStream.value?.getTracks().forEach(track => track.stop())
+    captureStream.value = null
+  }
+
+  return {
+    isActive: computed(() => !!captureStream.value),
+    screenshot,
+    dispose,
+  }
+}
+
+export type ScreenshotSession = Awaited<ReturnType<typeof startScreenshotSession>>
+
+const chromeVersion = window.navigator.userAgent.match(/Chrome\/(\d+)/)?.[1]
+export const isScreenshotSupported = chromeVersion ? Number(chromeVersion) >= 94 : false

package/logic/shortcuts.ts

@@ -4,46 +4,15 @@ import type { Ref } from 'vue'
 import { onKeyStroke } from '@vueuse/core'
 import { and, not } from '@vueuse/math'
 import { watch } from 'vue'
+import { useNav } from '../composables/useNav'
 import setupShortcuts from '../setup/shortcuts'
 import { fullscreen, isInputting, isOnFocus, magicKeys, shortcutsEnabled } from '../state'
 
-const _shortcut = and(not(isInputting), not(isOnFocus), shortcutsEnabled)
-
-export function shortcut(key: string | Ref<boolean>, fn: Fn, autoRepeat = false) {
-  if (typeof key === 'string')
-    key = magicKeys[key]
-
-  const source = and(key, _shortcut)
-  let count = 0
-  let timer: any
-  const trigger = () => {
-    clearTimeout(timer)
-    if (!source.value) {
-      count = 0
-      return
-    }
-    if (autoRepeat) {
-      timer = setTimeout(trigger, Math.max(1000 - count * 250, 150))
-      count++
-    }
-    fn()
-  }
-
-  return watch(source, trigger, { flush: 'sync' })
-}
-
-export function strokeShortcut(key: KeyFilter, fn: Fn) {
-  return onKeyStroke(key, (ev) => {
-    if (!_shortcut.value)
-      return
-    if (!ev.repeat)
-      fn()
-  })
-}
-
 export function registerShortcuts() {
-  const allShortcuts = setupShortcuts()
+  const { isPrintMode } = useNav()
+  const enabled = and(not(isInputting), not(isOnFocus), not(isPrintMode), shortcutsEnabled)
 
+  const allShortcuts = setupShortcuts()
   const shortcuts = new Map<string | Ref<boolean>, ShortcutOptions>(
     allShortcuts.map((options: ShortcutOptions) => [options.key, options]),
   )
@@ -54,4 +23,36 @@ export function registerShortcuts() {
   })
 
   strokeShortcut('f', () => fullscreen.toggle())
+
+  function shortcut(key: string | Ref<boolean>, fn: Fn, autoRepeat = false) {
+    if (typeof key === 'string')
+      key = magicKeys[key]
+
+    const source = and(key, enabled)
+    let count = 0
+    let timer: any
+    const trigger = () => {
+      clearTimeout(timer)
+      if (!source.value) {
+        count = 0
+        return
+      }
+      if (autoRepeat) {
+        timer = setTimeout(trigger, Math.max(1000 - count * 250, 150))
+        count++
+      }
+      fn()
+    }
+
+    return watch(source, trigger, { flush: 'sync' })
+  }
+
+  function strokeShortcut(key: KeyFilter, fn: Fn) {
+    return onKeyStroke(key, (ev) => {
+      if (!enabled.value)
+        return
+      if (!ev.repeat)
+        fn()
+    })
+  }
 }

package/logic/slides.ts

@@ -15,11 +15,12 @@ export function getSlide(no: number | string) {
 export function getSlidePath(
   route: SlideRoute | number | string,
   presenter: boolean,
+  exporting: boolean = false,
 ) {
   if (typeof route === 'number' || typeof route === 'string')
     route = getSlide(route)!
   const no = route.meta.slide?.frontmatter.routeAlias ?? route.no
-  return presenter ? `/presenter/${no}` : `/${no}`
+  return exporting ? `/export/${no}` : presenter ? `/presenter/${no}` : `/${no}`
 }
 
 export function useIsSlideActive() {

package/modules/v-mark.ts

@@ -3,6 +3,7 @@ import type { RawAtValue } from '@slidev/types'
 import type { App } from 'vue'
 import { annotate } from '@slidev/rough-notation'
 import { computed, watchEffect } from 'vue'
+import { useNav } from '../composables/useNav'
 import { resolveClick } from './v-click'
 
 export interface RoughDirectiveOptions extends Partial<RoughAnnotationConfig> {
@@ -78,6 +79,8 @@ export function createVMarkDirective() {
         name: 'v-mark',
 
         mounted: (el, binding) => {
+          const { isPrintMode } = useNav()
+
           const options = computed(() => {
             const bindingOptions = (typeof binding.value === 'object' && !Array.isArray(binding.value))
               ? { ...binding.value }
@@ -109,6 +112,9 @@ export function createVMarkDirective() {
             }
             options.type ||= 'underline'
 
+            if (isPrintMode.value)
+              options.animationDuration = 1 /* millisecond */
+
             return options
           })
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.50.0-beta.9",
+  "version": "0.50.0",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -29,15 +29,15 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.10",
-    "@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",
+    "@iconify-json/carbon": "^1.2.5",
+    "@iconify-json/ph": "^1.2.2",
+    "@iconify-json/svg-spinners": "^1.2.2",
+    "@shikijs/monaco": "^1.24.2",
+    "@shikijs/vitepress-twoslash": "^1.24.2",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.7",
-    "@unhead/vue": "^1.11.13",
-    "@unocss/reset": "^0.65.0",
+    "@unhead/vue": "^1.11.14",
+    "@unocss/reset": "^0.65.1",
     "@vueuse/core": "^12.0.0",
     "@vueuse/math": "^12.0.0",
     "@vueuse/motion": "^2.2.6",
@@ -46,23 +46,25 @@
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
     "html-to-image": "^1.11.11",
-    "katex": "^0.16.11",
+    "katex": "^0.16.17",
     "lz-string": "^1.5.0",
     "mermaid": "^11.4.1",
     "monaco-editor": "0.51.0",
-    "prettier": "^3.4.1",
+    "nanotar": "^0.1.1",
+    "pptxgenjs": "^3.12.0",
+    "prettier": "^3.4.2",
     "recordrtc": "^5.6.2",
-    "shiki": "^1.24.0",
-    "shiki-magic-move": "^0.5.0",
+    "shiki": "^1.24.2",
+    "shiki-magic-move": "^0.5.2",
     "typescript": "5.6.3",
-    "unocss": "^0.65.0",
+    "unocss": "^0.65.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "yaml": "^2.6.1",
-    "@slidev/parser": "0.50.0-beta.9",
-    "@slidev/types": "0.50.0-beta.9"
+    "@slidev/parser": "0.50.0",
+    "@slidev/types": "0.50.0"
   },
   "devDependencies": {
-    "vite": "^6.0.2"
+    "vite": "^6.0.3"
   }
 }