@slidev/client 0.48.0-beta.20 → 0.48.0-beta.22

package/pages/overview.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useHead } from '@unhead/vue'
-import type { RouteRecordRaw } from 'vue-router'
-import type { ClicksContext } from 'packages/types'
+import type { ClicksContext, SlideRoute } from '@slidev/types'
 import { configs } from '../env'
-import { openInEditor, rawRoutes } from '../logic/nav'
+import { getSlidePath, openInEditor, slides } from '../logic/nav'
 import { useFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
 import { getSlideClass } from '../utils'
@@ -26,19 +25,19 @@ useHead({
 const blocks: Map<number, HTMLElement> = reactive(new Map())
 const activeBlocks = ref<number[]>([])
 const edittingNote = ref<number | null>(null)
-const wordCounts = computed(() => rawRoutes.map(route => wordCount(route.meta?.slide?.note || '')))
+const wordCounts = computed(() => slides.value.map(route => wordCount(route.meta?.slide?.note || '')))
 const totalWords = computed(() => wordCounts.value.reduce((a, b) => a + b, 0))
-const totalClicks = computed(() => rawRoutes.map(route => getSlideClicks(route)).reduce((a, b) => a + b, 0))
+const totalClicks = computed(() => slides.value.map(route => getSlideClicks(route)).reduce((a, b) => a + b, 0))
 
-const clicksContextMap = new WeakMap<RouteRecordRaw, ClicksContext>()
-function getClicksContext(route: RouteRecordRaw) {
+const clicksContextMap = new WeakMap<SlideRoute, ClicksContext>()
+function getClicksContext(route: SlideRoute) {
   // We create a local clicks context to calculate the total clicks of the slide
   if (!clicksContextMap.has(route))
     clicksContextMap.set(route, useFixedClicks(route, CLICKS_MAX))
   return clicksContextMap.get(route)!
 }
 
-function getSlideClicks(route: RouteRecordRaw) {
+function getSlideClicks(route: SlideRoute) {
   return route.meta?.clicks || getClicksContext(route)?.total
 }
 
@@ -80,7 +79,7 @@ function scrollToSlide(idx: number) {
     el.scrollIntoView({ behavior: 'smooth', block: 'start' })
 }
 
-function onMarkerClick(e: MouseEvent, clicks: number, route: RouteRecordRaw) {
+function onMarkerClick(e: MouseEvent, clicks: number, route: SlideRoute) {
   const ctx = getClicksContext(route)
   if (ctx.current === clicks)
     ctx.current = CLICKS_MAX
@@ -101,8 +100,8 @@ onMounted(() => {
     <nav class="h-full flex flex-col border-r border-main p2 select-none">
       <div class="flex flex-col flex-auto items-center justify-center group gap-1">
         <div
-          v-for="(route, idx) of rawRoutes"
-          :key="route.path"
+          v-for="(route, idx) of slides"
+          :key="route.no"
           class="relative"
         >
           <button
@@ -136,8 +135,8 @@ onMounted(() => {
       @scroll="checkActiveBlocks"
     >
       <div
-        v-for="(route, idx) of rawRoutes"
-        :key="route.path"
+        v-for="(route, idx) of slides"
+        :key="route.no"
         :ref="el => blocks.set(idx, el as any)"
         class="relative border-t border-main of-hidden flex gap-4 min-h-50 group"
       >
@@ -148,7 +147,7 @@ onMounted(() => {
           <IconButton
             class="mr--3 op0 group-hover:op80"
             title="Play in new tab"
-            @click="openSlideInNewTab(route.path)"
+            @click="openSlideInNewTab(getSlidePath(route, false))"
           >
             <carbon:presentation-file />
           </IconButton>
@@ -164,23 +163,22 @@ onMounted(() => {
         <div class="flex flex-col gap-2 my5">
           <div
             class="border rounded border-main overflow-hidden bg-main select-none h-max"
-            @dblclick="openSlideInNewTab(route.path)"
+            @dblclick="openSlideInNewTab(getSlidePath(route, false))"
           >
             <SlideContainer
-              :key="route.path"
+              :key="route.no"
               :width="cardWidth"
               :clicks-disabled="true"
               class="pointer-events-none important:[&_*]:select-none"
             >
               <SlideWrapper
-                :is="route.component"
-                v-if="route?.component"
+                :is="route.component!"
                 :clicks-context="getClicksContext(route)"
                 :class="getSlideClass(route)"
                 :route="route"
                 render-context="overview"
               />
-              <DrawingPreview :page="+route.path" />
+              <DrawingPreview :page="route.no" />
             </SlideContainer>
           </div>
           <ClicksSlider
@@ -220,8 +218,8 @@ onMounted(() => {
     </main>
     <div class="absolute top-0 right-0 px3 py1.5 border-b border-l rounded-lb bg-main border-main select-none">
       <div class="text-xs op50">
-        {{ rawRoutes.length }} slides ·
-        {{ totalClicks + rawRoutes.length - 1 }} clicks ·
+        {{ slides.length }} slides ·
+        {{ totalClicks + slides.length - 1 }} clicks ·
         {{ totalWords }} words
       </div>
     </div>

package/pages/play.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
 import { isEditorVertical, isScreenVertical, showEditor, slideScale, windowSize } from '../state'
-import { isEmbedded, isPrintMode, next, prev, useSwipeControls } from '../logic/nav'
+import { isEmbedded, isPrintMode, next, prev } from '../logic/nav'
+import { useSwipeControls } from '../composables/useSwipeControls'
 import { isDrawing } from '../logic/drawings'
 import { registerShortcuts } from '../logic/shortcuts'
 import { configs } from '../env'

package/pages/presenter/print.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import { useStyleTag } from '@vueuse/core'
 import { useHead } from '@unhead/vue'
 import { configs } from '../../env'
-import { rawRoutes, total } from '../../logic/nav'
+import { slides, total } from '../../logic/nav'
 import NoteDisplay from '../../internals/NoteDisplay.vue'
 
 useStyleTag(`
@@ -28,7 +28,7 @@ useHead({
   title: `Notes - ${configs.title}`,
 })
 
-const slidesWithNote = computed(() => rawRoutes
+const slidesWithNote = computed(() => slides.value
   .map(route => route.meta?.slide)
   .filter(slide => slide !== undefined && slide.noteHTML !== ''))
 </script>

package/pages/presenter.vue

@@ -2,7 +2,8 @@
 import { useHead } from '@unhead/vue'
 import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
-import { clicksContext, currentPage, currentRoute, currentSlideId, hasNext, nextRoute, queryClicks, rawRoutes, total, useSwipeControls } from '../logic/nav'
+import { clicksContext, currentSlideNo, currentSlideRoute, hasNext, nextRoute, queryClicks, slides, total } from '../logic/nav'
+import { useSwipeControls } from '../composables/useSwipeControls'
 import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showOverview, showPresenterCursor } from '../state'
 import { configs } from '../env'
 import { sharedState } from '../state/shared'
@@ -37,10 +38,10 @@ const notesEditing = ref(false)
 
 const { timer, resetTimer } = useTimer()
 
-const clicksCtxMap = rawRoutes.map(route => useFixedClicks(route))
+const clicksCtxMap = computed(() => slides.value.map(route => useFixedClicks(route)))
 const nextFrame = computed(() => {
   if (clicksContext.value.current < clicksContext.value.total)
-    return [currentRoute.value!, clicksContext.value.current + 1] as const
+    return [currentSlideRoute.value!, clicksContext.value.current + 1] as const
   else if (hasNext.value)
     return [nextRoute.value!, 0] as const
   else
@@ -48,11 +49,11 @@ const nextFrame = computed(() => {
 })
 
 const nextFrameClicksCtx = computed(() => {
-  return nextFrame.value && clicksCtxMap[+nextFrame.value[0].path - 1]
+  return nextFrame.value && clicksCtxMap.value[nextFrame.value[0].no - 1]
 })
 
 watch(
-  [currentRoute, queryClicks],
+  [currentSlideRoute, queryClicks],
   () => {
     if (nextFrameClicksCtx.value)
       nextFrameClicksCtx.value.current = nextFrame.value![1]
@@ -104,8 +105,8 @@ onMounted(() => {
           </template>
         </SlideContainer>
         <ClicksSlider
-          :key="currentRoute?.path"
-          :clicks-context="usePrimaryClicks(currentRoute)"
+          :key="currentSlideRoute?.no"
+          :clicks-context="usePrimaryClicks(currentSlideRoute)"
           class="w-full pb2 px4 flex-none"
         />
         <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
@@ -119,8 +120,8 @@ onMounted(() => {
           class="h-full w-full"
         >
           <SlideWrapper
-            :is="(nextFrame[0].component as any)"
-            :key="nextFrame[0].path"
+            :is="nextFrame[0].component!"
+            :key="nextFrame[0].no"
             :clicks-context="nextFrameClicksCtx"
             :class="getSlideClass(nextFrame[0])"
             :route="nextFrame[0]"
@@ -138,17 +139,17 @@ onMounted(() => {
       <div v-else class="grid-section note grid grid-rows-[1fr_min-content] overflow-hidden">
         <NoteEditable
           v-if="__DEV__"
-          :key="`edit-${currentSlideId}`"
+          :key="`edit-${currentSlideNo}`"
           v-model:editing="notesEditing"
-          :no="currentSlideId"
+          :no="currentSlideNo"
           class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
           :clicks-context="clicksContext"
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
         />
         <NoteStatic
           v-else
-          :key="`static-${currentSlideId}`"
-          :no="currentSlideId"
+          :key="`static-${currentSlideNo}`"
+          :no="currentSlideNo"
           class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
           :clicks-context="clicksContext"
@@ -189,7 +190,7 @@ onMounted(() => {
     <div class="progress-bar">
       <div
         class="progress h-3px bg-primary transition-all"
-        :style="{ width: `${(currentPage - 1) / (total - 1) * 100}%` }"
+        :style="{ width: `${(currentSlideNo - 1) / (total - 1) * 100}%` }"
       />
     </div>
   </div>

package/routes.ts

@@ -1,21 +1,8 @@
 import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
-
-import { rawRoutes, redirects } from '#slidev/routes'
 import configs from '#slidev/configs'
 
-export { rawRoutes }
-
 export const routes: RouteRecordRaw[] = [
-  {
-    name: 'play',
-    path: '/',
-    component: () => import('./pages/play.vue'),
-    children: [
-      ...rawRoutes,
-      ...redirects,
-    ],
-  },
   {
     name: 'print',
     path: '/print',
@@ -24,7 +11,6 @@ export const routes: RouteRecordRaw[] = [
 
   // Redirects
   { path: '', redirect: { path: '/1' } },
-  { path: '/:pathMatch(.*)', redirect: { path: '/1' } },
 ]
 
 if (__SLIDEV_FEATURE_PRESENTER__) {
@@ -76,6 +62,12 @@ if (__SLIDEV_FEATURE_PRESENTER__) {
   })
 }
 
+routes.push({
+  name: 'play',
+  path: '/:no',
+  component: () => import('./pages/play.vue'),
+})
+
 export const router = createRouter({
   history: __SLIDEV_HASH_ROUTE__
     ? createWebHashHistory(import.meta.env.BASE_URL)

package/setup/root.ts

@@ -4,7 +4,7 @@ import { useHead } from '@unhead/vue'
 import { configs } from '../env'
 import { initSharedState, onPatch, patch } from '../state/shared'
 import { initDrawingState } from '../state/drawings'
-import { clicksContext, currentPage, getPath, isNotesViewer, isPresenter } from '../logic/nav'
+import { clicksContext, currentSlideNo, getSlidePath, hasPrimarySlide, isNotesViewer, isPresenter } from '../logic/nav'
 import { router } from '../routes'
 import { TRUST_ORIGINS } from '../constants'
 import { skipTransition } from '../composables/hmr'
@@ -37,11 +37,11 @@ export default function setupRoot() {
       return
 
     if (isPresenter.value) {
-      patch('page', +currentPage.value)
+      patch('page', +currentSlideNo.value)
       patch('clicks', clicksContext.value.current)
     }
     else {
-      patch('viewerPage', +currentPage.value)
+      patch('viewerPage', +currentSlideNo.value)
       patch('viewerClicks', clicksContext.value.current)
     }
 
@@ -55,13 +55,12 @@ export default function setupRoot() {
   watch(clicksContext, updateSharedState)
 
   onPatch((state) => {
-    const routePath = router.currentRoute.value.path
-    if (!routePath.match(/^\/(\d+|presenter)\/?/))
+    if (!hasPrimarySlide.value)
       return
-    if (state.lastUpdate?.type === 'presenter' && (+state.page !== +currentPage.value || +clicksContext.value.current !== +state.clicks)) {
+    if (state.lastUpdate?.type === 'presenter' && (+state.page !== +currentSlideNo.value || +clicksContext.value.current !== +state.clicks)) {
       skipTransition.value = false
       router.replace({
-        path: getPath(state.page),
+        path: getSlidePath(state.page),
         query: {
           ...router.currentRoute.value.query,
           clicks: state.clicks || 0,

package/setup/shortcuts.ts

@@ -1,7 +1,8 @@
 /* __imports__ */
 import { and, not, or } from '@vueuse/math'
 import type { NavOperations, ShortcutOptions } from '@slidev/types'
-import { downloadPDF, go, goFirst, goLast, next, nextSlide, prev, prevSlide } from '../logic/nav'
+import { downloadPDF } from '../utils'
+import { go, goFirst, goLast, next, nextSlide, prev, prevSlide } from '../logic/nav'
 import { toggleDark } from '../logic/dark'
 import { magicKeys, showGotoDialog, showOverview, toggleOverview } from '../state'
 import { drawingEnabled } from '../logic/drawings'

package/shim-vue.d.ts

@@ -8,6 +8,9 @@ declare module 'vue' {
 }
 
 declare module 'vue-router' {
+  import type { TransitionGroupProps } from 'vue'
+  import type { ClicksContext, SlideInfo } from '@slidev/types'
+
   interface RouteMeta {
     // inherited from frontmatter
     layout: string

package/state/index.ts

@@ -14,7 +14,7 @@ export const breakpoints = useBreakpoints({
 })
 export const windowSize = useWindowSize()
 export const magicKeys = useMagicKeys()
-export const isScreenVertical = computed(() => windowSize.height.value - windowSize.width.value / slideAspect > 120)
+export const isScreenVertical = computed(() => windowSize.height.value - windowSize.width.value / slideAspect.value > 120)
 export const fullscreen = useFullscreen(isClient ? document.body : null)
 
 export const activeElement = useActiveElement()

package/styles/code.css

@@ -44,9 +44,9 @@ html:not(.dark) .shiki span {
   overflow: auto;
 }
 
-.slidev-code .line.highlighted {
+.slidev-code .slidev-code-highlighted {
 }
-.slidev-code .line.dishonored {
+.slidev-code .slidev-code-dishonored {
   opacity: 0.3;
   pointer-events: none;
 }

package/utils.ts

@@ -1,6 +1,7 @@
-import type { RouteRecordRaw } from 'vue-router'
+import type { SlideRoute } from '@slidev/types'
+import { configs } from './env'
 
-export function getSlideClass(route?: RouteRecordRaw, extra = '') {
+export function getSlideClass(route?: SlideRoute, extra = '') {
   const classes = ['slidev-page', extra]
 
   const no = route?.meta?.slide?.no
@@ -9,3 +10,15 @@ export function getSlideClass(route?: RouteRecordRaw, extra = '') {
 
   return classes.filter(Boolean).join(' ')
 }
+
+export async function downloadPDF() {
+  const { saveAs } = await import('file-saver')
+  saveAs(
+    typeof configs.download === 'string'
+      ? configs.download
+      : configs.exportFilename
+        ? `${configs.exportFilename}.pdf`
+        : `${import.meta.env.BASE_URL}slidev-exported.pdf`,
+    `${configs.title}.pdf`,
+  )
+}