@slidev/client 0.50.0-beta.10 → 0.50.0-beta.12

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.10",
+  "version": "0.50.0-beta.12",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -32,12 +32,12 @@
     "@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",
+    "@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.15",
     "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/types": "0.50.0-beta.10",
-    "@slidev/parser": "0.50.0-beta.10"
+    "@slidev/parser": "0.50.0-beta.12",
+    "@slidev/types": "0.50.0-beta.12"
   },
   "devDependencies": {
-    "vite": "^6.0.2"
+    "vite": "^6.0.3"
   }
 }

package/pages/export.vue

@@ -0,0 +1,369 @@
+<script setup lang="ts">
+import type { ScreenshotSession } from '../logic/screenshot'
+import { sleep } from '@antfu/utils'
+import { parseRangeString } from '@slidev/parser/utils'
+import { useHead } from '@unhead/vue'
+import { provideLocal, useElementSize, useLocalStorage, useStyleTag, watchDebounced } from '@vueuse/core'
+
+import { computed, ref, useTemplateRef, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useDarkMode } from '../composables/useDarkMode'
+import { useNav } from '../composables/useNav'
+import { patchMonacoColors } from '../composables/usePrintStyles'
+import { injectionSlideScale } from '../constants'
+import { configs, slideHeight, slidesTitle, slideWidth } from '../env'
+import ExportPdfTip from '../internals/ExportPdfTip.vue'
+import FormCheckbox from '../internals/FormCheckbox.vue'
+import FormItem from '../internals/FormItem.vue'
+import PrintSlide from '../internals/PrintSlide.vue'
+import { isScreenshotSupported, startScreenshotSession } from '../logic/screenshot'
+import { skipExportPdfTip } from '../state'
+import Play from './play.vue'
+
+const { slides, isPrintWithClicks, hasNext, go, next, currentSlideNo, clicks, printRange } = useNav()
+const router = useRouter()
+const { isColorSchemaConfigured, isDark } = useDarkMode()
+const { width: containerWidth } = useElementSize(useTemplateRef('export-container'))
+const { height: contentHeight } = useElementSize(useTemplateRef('export-content'))
+const scale = computed(() => containerWidth.value / slideWidth.value)
+const contentMarginBottom = computed(() => `${contentHeight.value * (scale.value - 1)}px`)
+const rangesRaw = ref('')
+const initialWait = ref(1000)
+const delay = useLocalStorage('slidev-export-capture-delay', 400, { listenToStorageChanges: false })
+type ScreenshotResult = { slideIndex: number, clickIndex: number, dataUrl: string }[]
+const screenshotSession = ref<ScreenshotSession | null>(null)
+const capturedImages = ref<ScreenshotResult | null>(null)
+const title = ref(configs.exportFilename || slidesTitle)
+
+useHead({
+  title,
+})
+
+provideLocal(injectionSlideScale, scale)
+
+const showExportPdfTip = ref(false)
+function pdf() {
+  if (skipExportPdfTip.value) {
+    doPrint()
+  }
+  else {
+    showExportPdfTip.value = true
+  }
+}
+
+function doPrint() {
+  patchMonacoColors()
+  setTimeout(window.print, 100)
+}
+
+async function capturePngs() {
+  if (screenshotSession.value) {
+    screenshotSession.value.dispose()
+    screenshotSession.value = null
+  }
+  if (capturedImages.value)
+    return capturedImages.value
+  try {
+    const scale = 2
+    screenshotSession.value = await startScreenshotSession(slideWidth.value * scale, slideHeight.value * scale)
+    const result: ScreenshotResult = []
+
+    go(1, 0, true)
+
+    await sleep(initialWait.value + delay.value)
+    while (true) {
+      if (!screenshotSession.value) {
+        break
+      }
+      result.push({
+        slideIndex: currentSlideNo.value - 1,
+        clickIndex: clicks.value,
+        dataUrl: screenshotSession.value.screenshot(document.getElementById('slide-content')!),
+      })
+      if (hasNext.value) {
+        await sleep(delay.value)
+        next()
+        await sleep(delay.value)
+      }
+      else {
+        break
+      }
+    }
+
+    if (screenshotSession.value) {
+      screenshotSession.value.dispose()
+      capturedImages.value = result
+      screenshotSession.value = null
+    }
+  }
+  catch (e) {
+    console.error(e)
+    capturedImages.value = null
+  }
+  finally {
+    router.push('/export')
+  }
+  return capturedImages.value
+}
+
+async function pptx() {
+  const pngs = await capturePngs()
+  if (!pngs)
+    return
+  const pptx = await import('pptxgenjs')
+    .then(r => r.default)
+    .then(PptxGen => new PptxGen())
+
+  const layoutName = `${slideWidth.value}x${slideHeight.value}`
+  pptx.defineLayout({
+    name: layoutName,
+    width: slideWidth.value / 96,
+    height: slideHeight.value / 96,
+  })
+  pptx.layout = layoutName
+  if (configs.author)
+    pptx.author = configs.author
+  pptx.company = 'Created using Slidev'
+  pptx.title = title.value
+  if (typeof configs.info === 'string')
+    pptx.subject = configs.info
+
+  pngs.forEach(({ slideIndex, dataUrl }) => {
+    const slide = pptx.addSlide()
+    slide.background = {
+      data: dataUrl,
+    }
+
+    const note = slides.value[slideIndex].meta.slide.note
+    if (note)
+      slide.addNotes(note)
+  })
+
+  const blob = await pptx.write({
+    outputType: 'blob',
+    compression: true,
+  }) as Blob
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `${title.value}.pptx`
+  a.click()
+}
+
+async function pngsGz() {
+  const pngs = await capturePngs()
+  if (!pngs)
+    return
+  const { createTarGzip } = await import('nanotar')
+  const data = await createTarGzip(
+    pngs.map(({ slideIndex, dataUrl }) => ({
+      name: `${slideIndex}.png`,
+      data: new Uint8Array(atob(dataUrl.split(',')[1]).split('').map(char => char.charCodeAt(0))),
+    })),
+  )
+  const a = document.createElement('a')
+  const blob = new Blob([data], { type: 'application/gzip' })
+  a.href = URL.createObjectURL(blob)
+  a.download = `${title.value}.tar.gz`
+  a.click()
+}
+
+useStyleTag(computed(() => screenshotSession.value?.isActive
+  ? `
+html {
+  cursor: none;
+  margin-bottom: 20px;
+}
+body {
+  pointer-events: none;
+}`
+  : `
+:root {
+  --slidev-slide-scale: ${scale.value};
+}
+`))
+
+// clear captured images when settings changed
+watch(
+  [
+    isDark,
+    printRange,
+    isPrintWithClicks,
+  ],
+  () => capturedImages.value = null,
+)
+
+watchDebounced(
+  [slides, rangesRaw],
+  () => printRange.value = parseRangeString(slides.value.length, rangesRaw.value),
+  { debounce: 300 },
+)
+
+// clear captured images when HMR
+if (import.meta.hot) {
+  import.meta.hot.on('vite:beforeUpdate', () => {
+    capturedImages.value = null
+  })
+}
+</script>
+
+<template>
+  <Play v-if="screenshotSession?.isActive" />
+  <div
+    v-else
+    class="fixed inset-0 flex flex-col md:flex-row md:gap-8 print:position-unset print:inset-0 print:block print:min-h-max justify-center of-hidden bg-main"
+  >
+    <div class="print:hidden min-w-fit flex flex-wrap md:flex-nowrap md:of-y-auto md:flex-col gap-2 p-6 max-w-100">
+      <h1 class="text-3xl md:my-4 flex items-center gap-2 w-full">
+        <RouterLink to="/" class="i-carbon:previous-outline op-70 hover:op-100" />
+        Browser Exporter
+        <sup op50 italic text-sm>Experimental</sup>
+      </h1>
+      <div flex="~ col gap-2">
+        <h2>Options</h2>
+        <FormItem title="Title">
+          <input v-model="title" type="text">
+        </FormItem>
+        <FormItem title="Range">
+          <input v-model="rangesRaw" type="text" :placeholder="`1-${slides.length}`">
+        </FormItem>
+        <FormItem title="Dark mode">
+          <FormCheckbox v-model="isDark" :disabled="isColorSchemaConfigured" />
+        </FormItem>
+        <FormItem title="With clicks">
+          <FormCheckbox v-model="isPrintWithClicks" />
+        </FormItem>
+      </div>
+      <div class="flex-grow" />
+      <div class="min-w-fit" flex="~ col gap-3">
+        <div border="~ main rounded-lg" p3 flex="~ col gap-2">
+          <h2>Export as Vector File</h2>
+          <div class="flex flex-col gap-2 items-start min-w-max">
+            <button @click="pdf">
+              PDF
+            </button>
+          </div>
+        </div>
+
+        <div border="~ main rounded-lg" p3 flex="~ col gap-2" :class="isScreenshotSupported ? '' : 'border-orange'">
+          <h2>Export as Images</h2>
+          <div v-if="!isScreenshotSupported" class="min-w-full w-0 text-orange/100 p-1 mb--4 bg-orange/10 rounded">
+            <span class="i-carbon:warning-alt inline-block mb--.5" />
+            Your browser may not support image capturing.
+            If you encounter issues, please use a modern Chromium-based browser,
+            or export via the CLI.
+          </div>
+          <div class="flex flex-col gap-2 items-start min-w-max">
+            <button @click="pptx">
+              PPTX
+            </button>
+            <button @click="pngsGz">
+              PNGs.gz
+            </button>
+          </div>
+          <div w-full h-1px border="t main" my2 />
+          <div class="relative flex flex-col gap-2 flex-nowrap">
+            <div class="flex flex-col gap-2 items-start min-w-max">
+              <button v-if="capturedImages" class="flex justify-center items-center gap-2" @click="capturedImages = null">
+                <span class="i-carbon:trash-can inline-block text-xl" />
+                Clear Captured Images
+              </button>
+              <button v-else class="flex justify-center items-center gap-2" @click="capturePngs">
+                <div class="i-carbon:camera-action inline-block text-xl" />
+                Pre-capture Slides as Images
+              </button>
+              <FormItem title="Delay" description="Delay between capturing each slide in milliseconds.<br>Increase this value if slides are captured incompletely. <br>(Not related to PDF export)">
+                <input v-model="delay" type="number" step="50" min="50">
+              </FormItem>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="export-container" ref="export-container" relative>
+      <div print:hidden fixed right-5 bottom-5 bg-main px2 py0 shadow z-1000 border="~ main rounded">
+        <span op75>Rendering as {{ capturedImages ? 'Captured Images' : 'DOM' }} </span>
+      </div>
+      <div v-show="!capturedImages" id="export-content" ref="export-content">
+        <PrintSlide v-for="route, index in slides" :key="index" :hidden="!printRange.includes(index + 1)" :route />
+      </div>
+      <div v-if="capturedImages" id="export-content-images" class="print:hidden grid">
+        <div v-for="png, i of capturedImages" :key="i" class="print-slide-container">
+          <img :src="png.dataUrl">
+        </div>
+      </div>
+    </div>
+    <div id="twoslash-container" />
+    <ExportPdfTip v-model="showExportPdfTip" @print="doPrint" />
+  </div>
+</template>
+
+<style scoped>
+@media not print {
+  #export-container {
+    scrollbar-width: thin;
+    scroll-behavior: smooth;
+    --uno: w-full overflow-x-hidden overflow-y-auto max-h-full max-w-300 p-6;
+  }
+
+  #export-content {
+    transform: v-bind('`scale(${scale})`');
+    margin-bottom: v-bind('contentMarginBottom');
+    --uno: origin-tl;
+  }
+
+  #export-content,
+  #export-content-images {
+    --uno: flex flex-col gap-2;
+  }
+}
+
+@media print {
+  #export-content {
+    transform: scale(1);
+    display: block !important;
+  }
+}
+
+button {
+  --uno: 'w-full rounded bg-gray:10 px-4 py-2 hover:bg-gray/20';
+}
+
+label {
+  --uno: text-xl flex gap-2 items-center select-none;
+
+  span {
+    --uno: flex-grow;
+  }
+
+  input[type='text'],
+  input[type='number'] {
+    --uno: border border-main rounded px-2 py-1;
+  }
+}
+
+h2 {
+  --uno: font-500 op-70;
+}
+
+#export-content {
+  --uno: pointer-events-none;
+}
+</style>
+
+<style>
+@media print {
+  html,
+  body,
+  #app {
+    overflow: unset !important;
+  }
+}
+
+@media not print {
+  #export-content-images .print-slide-container,
+  #export-content .print-slide-container {
+    --uno: border border-main rounded-md shadow of-hidden;
+  }
+}
+</style>

package/pages/play.vue

@@ -8,12 +8,11 @@ import { useWakeLock } from '../composables/useWakeLock'
 import Controls from '../internals/Controls.vue'
 import NavControls from '../internals/NavControls.vue'
 import PresenterMouse from '../internals/PresenterMouse.vue'
-import PrintStyle from '../internals/PrintStyle.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { registerShortcuts } from '../logic/shortcuts'
-import { editorHeight, editorWidth, isEditorVertical, isScreenVertical, showEditor, windowSize } from '../state'
+import { editorHeight, editorWidth, isEditorVertical, isScreenVertical, showEditor } from '../state'
 
 const { next, prev, isPrintMode } = useNav()
 const { isDrawing } = useDrawings()
@@ -63,14 +62,12 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
 </script>
 
 <template>
-  <PrintStyle v-if="isPrintMode" />
   <div
     id="page-root" ref="root" class="grid"
     :class="isEditorVertical ? 'grid-rows-[1fr_max-content]' : 'grid-cols-[1fr_max-content]'"
   >
     <SlideContainer
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"
-      :width="isPrintMode ? windowSize.width.value : undefined"
       is-main
       @pointerdown="onClick"
       @contextmenu="onContextMenu"

package/pages/presenter.vue

@@ -247,6 +247,15 @@ onMounted(() => {
     'bottom bottom';
 }
 
+.grid-container.layout3 {
+  grid-template-columns: 2fr 3fr;
+  grid-template-rows: 1fr 1fr min-content;
+  grid-template-areas:
+    'note next'
+    'main next'
+    'bottom bottom';
+}
+
 @media (max-aspect-ratio: 3/5) {
   .grid-container.layout1 {
     grid-template-columns: 1fr;

package/pages/print.vue

@@ -3,7 +3,6 @@ import { recomputeAllPoppers } from 'floating-vue'
 import { onMounted, watchEffect } from 'vue'
 import { useNav } from '../composables/useNav'
 import PrintContainer from '../internals/PrintContainer.vue'
-import PrintStyle from '../internals/PrintStyle.vue'
 import { windowSize } from '../state'
 
 const { isPrintMode } = useNav()
@@ -21,7 +20,6 @@ onMounted(() => {
 </script>
 
 <template>
-  <PrintStyle v-if="isPrintMode" />
   <div id="page-root" class="grid grid-cols-[1fr_max-content]">
     <PrintContainer
       class="w-full h-full"