@slidev/client 0.48.0-beta.9 → 0.48.1

package/internals/PrintSlideClick.vue

@@ -1,29 +1,24 @@
 <script setup lang="ts">
-import type { RouteRecordRaw } from 'vue-router'
 import { computed, reactive, shallowRef } from 'vue'
-import type { ClicksContext } from '@slidev/types'
 import { provideLocal } from '@vueuse/core'
 import { injectionSlidevContext } from '../constants'
 import { configs, slideHeight, slideWidth } from '../env'
 import { getSlideClass } from '../utils'
-import type { SlidevContextNav } from '../modules/context'
-import SlideWrapper from './SlideWrapper'
+import type { SlidevContextNav } from '../composables/useNav'
+import SlideWrapper from './SlideWrapper.vue'
 
-// @ts-expect-error virtual module
-import GlobalTop from '/@slidev/global-components/top'
+import GlobalTop from '#slidev/global-components/top'
+import GlobalBottom from '#slidev/global-components/bottom'
 
-// @ts-expect-error virtual module
-import GlobalBottom from '/@slidev/global-components/bottom'
-
-const props = defineProps<{
-  clicksContext: ClicksContext
+const { nav } = defineProps<{
   nav: SlidevContextNav
-  route: RouteRecordRaw
 }>()
 
+const route = computed(() => nav.currentSlideRoute.value)
+
 const style = computed(() => ({
-  height: `${slideHeight}px`,
-  width: `${slideWidth}px`,
+  height: `${slideHeight.value}px`,
+  width: `${slideWidth.value}px`,
 }))
 
 const DrawingPreview = shallowRef<any>()
@@ -31,11 +26,11 @@ if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
   import('./DrawingPreview.vue').then(v => (DrawingPreview.value = v.default))
 
 const id = computed(() =>
-  `${props.route.path.toString().padStart(3, '0')}-${(props.nav.clicks.value + 1).toString().padStart(2, '0')}`,
+  `${route.value.no.toString().padStart(3, '0')}-${(nav.clicks.value + 1).toString().padStart(2, '0')}`,
 )
 
 provideLocal(injectionSlidevContext, reactive({
-  nav: props.nav,
+  nav,
   configs,
   themeConfigs: computed(() => configs.themeConfig),
 }))
@@ -46,8 +41,8 @@ provideLocal(injectionSlidevContext, reactive({
     <GlobalBottom />
 
     <SlideWrapper
-      :is="route?.component!"
-      :clicks-context="clicksContext"
+      :is="route.component!"
+      :clicks-context="nav.clicksContext.value"
       :class="getSlideClass(route)"
       :route="route"
     />
@@ -58,7 +53,7 @@ provideLocal(injectionSlidevContext, reactive({
           && DrawingPreview
       "
     >
-      <DrawingPreview :page="+route.path" />
+      <DrawingPreview :page="route.no" />
     </template>
 
     <GlobalTop />

package/internals/{SlidesOverview.vue → QuickOverview.vue}

@@ -1,22 +1,23 @@
 <script setup lang="ts">
 import { useEventListener, useVModel } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
-import { themeVars } from '../env'
 import { breakpoints, showOverview, windowSize } from '../state'
-import { currentPage, go as goSlide, rawRoutes } from '../logic/nav'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
-import { useFixedClicks } from '../composables/useClicks'
+import { createFixedClicks } from '../composables/useClicks'
 import { getSlideClass } from '../utils'
+import { CLICKS_MAX } from '../constants'
+import { useNav } from '../composables/useNav'
 import SlideContainer from './SlideContainer.vue'
-import SlideWrapper from './SlideWrapper'
+import SlideWrapper from './SlideWrapper.vue'
 import DrawingPreview from './DrawingPreview.vue'
 import IconButton from './IconButton.vue'
 
 const props = defineProps<{ modelValue: boolean }>()
-
 const emit = defineEmits(['update:modelValue'])
 const value = useVModel(props, 'modelValue', emit)
 
+const { currentSlideNo, go: goSlide, slides } = useNav()
+
 function close() {
   value.value = false
 }
@@ -78,17 +79,17 @@ useEventListener('keypress', (e) => {
   keyboardBuffer.value += String(num)
 
   // beyond the number of slides, reset
-  if (+keyboardBuffer.value >= rawRoutes.length) {
+  if (+keyboardBuffer.value >= slides.value.length) {
     keyboardBuffer.value = ''
     return
   }
 
-  const extactMatch = rawRoutes.findIndex(i => i.path === keyboardBuffer.value)
+  const extactMatch = slides.value.findIndex(i => `/${i.no}` === keyboardBuffer.value)
   if (extactMatch !== -1)
     currentOverviewPage.value = extactMatch + 1
 
   // When the input number is the largest at the number of digits, we go to that page directly.
-  if (+keyboardBuffer.value * 10 > rawRoutes.length) {
+  if (+keyboardBuffer.value * 10 > slides.value.length) {
     go(+keyboardBuffer.value)
     keyboardBuffer.value = ''
   }
@@ -97,7 +98,7 @@ useEventListener('keypress', (e) => {
 watchEffect(() => {
   // Watch currentPage, make sure every time we open overview,
   // we focus on the right page.
-  currentOverviewPage.value = currentPage.value
+  currentOverviewPage.value = currentSlideNo.value
   // Watch rowCount, make sure up and down shortcut work correctly.
   overviewRowCount.value = rowCount.value
 })
@@ -120,18 +121,17 @@ watchEffect(() => {
         :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`"
       >
         <div
-          v-for="(route, idx) of rawRoutes"
-          :key="route.path"
+          v-for="(route, idx) of slides"
+          :key="route.no"
           class="relative"
         >
           <div
             class="inline-block border rounded overflow-hidden bg-main hover:border-primary transition"
             :class="(focus(idx + 1) || currentOverviewPage === idx + 1) ? 'border-primary' : 'border-main'"
-            :style="themeVars"
-            @click="go(+route.path)"
+            @click="go(route.no)"
           >
             <SlideContainer
-              :key="route.path"
+              :key="route.no"
               :width="cardWidth"
               :clicks-disabled="true"
               class="pointer-events-none"
@@ -139,12 +139,12 @@ watchEffect(() => {
               <SlideWrapper
                 :is="route.component"
                 v-if="route?.component"
-                :clicks-context="useFixedClicks(route, 99999)[1]"
+                :clicks-context="createFixedClicks(route, CLICKS_MAX)"
                 :class="getSlideClass(route)"
                 :route="route"
                 render-context="overview"
               />
-              <DrawingPreview :page="+route.path" />
+              <DrawingPreview :page="route.no" />
             </SlideContainer>
           </div>
           <div
@@ -163,17 +163,20 @@ watchEffect(() => {
       </div>
     </div>
   </Transition>
-  <div class="fixed top-4 right-4 text-gray-400 flex items-center gap-4">
-    <RouterLink
+  <div v-if="value" class="fixed top-4 right-4 text-gray-400 flex flex-col items-center gap-2">
+    <IconButton title="Close" class="text-2xl" @click="close">
+      <carbon:close />
+    </IconButton>
+    <IconButton
       v-if="__DEV__"
-      to="/overview"
+      as="a"
+      title="Slides Overview"
+      target="_blank"
+      href="/overview"
       tab-index="-1"
-      class="border-main border px3 py1 rounded hover:bg-gray/5 hover:text-primary"
+      class="text-2xl"
     >
-      List overview
-    </RouterLink>
-    <IconButton v-if="value" title="Close" class="text-2xl" @click="close">
-      <carbon:close />
+      <carbon:list-boxes />
     </IconButton>
   </div>
 </template>

package/internals/RecordingControls.vue

@@ -54,7 +54,7 @@ onMounted(() => {
   </IconButton>
   <MenuButton :disabled="recording">
     <template #button>
-      <IconButton title="Select recording device" class="h-full !text-sm !px-0">
+      <IconButton title="Select recording device" class="h-full !text-sm !px-0 aspect-initial">
         <carbon:chevron-up class="opacity-50" />
       </IconButton>
     </template>

package/internals/RecordingDialog.vue

@@ -108,18 +108,18 @@ async function start() {
     }
   }
 
-  input[type="text"] {
+  input[type='text'] {
     @apply border border-main rounded px-2 py-1;
   }
 
   button {
     @apply bg-orange-400 text-white px-4 py-1 rounded border-b-2 border-orange-600;
-    @apply hover:(bg-orange-500 border-orange-700)
+    @apply hover:(bg-orange-500 border-orange-700);
   }
 
   button.cancel {
     @apply bg-gray-400 bg-opacity-50 text-white px-4 py-1 rounded border-b-2 border-main;
-    @apply hover:(bg-opacity-75 border-opacity-75)
+    @apply hover:(bg-opacity-75 border-opacity-75);
   }
 }
 </style>

package/internals/{Editor.vue → SideEditor.vue}

@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import { throttledWatch, useEventListener } from '@vueuse/core'
+import { throttledWatch, useEventListener, watchThrottled } from '@vueuse/core'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
-import { activeElement, editorHeight, editorWidth, isInputting, showEditor, isEditorVertical as vertical } from '../state'
-import { useCodeMirror } from '../setup/codemirror'
-import { currentSlideId, openInEditor } from '../logic/nav'
-import { useDynamicSlideInfo } from '../logic/note'
+import { activeElement, editorHeight, editorWidth, isEditorVertical, isInputting, showEditor, isEditorVertical as vertical } from '../state'
+import { useCodeMirror } from '../modules/codemirror'
+import { useNav } from '../composables/useNav'
+import { useDynamicSlideInfo } from '../composables/useSlideInfo'
 import IconButton from './IconButton.vue'
 
 const props = defineProps<{
   resize?: boolean
 }>()
 
+const { currentSlideNo, openInEditor } = useNav()
+
 const tab = ref<'content' | 'note'>('content')
 const content = ref('')
 const note = ref('')
@@ -19,7 +21,7 @@ const frontmatter = ref<any>({})
 const contentInput = ref<HTMLTextAreaElement>()
 const noteInput = ref<HTMLTextAreaElement>()
 
-const { info, update } = useDynamicSlideInfo(currentSlideId)
+const { info, update } = useDynamicSlideInfo(currentSlideNo)
 
 watch(
   info,
@@ -94,16 +96,23 @@ onMounted(async () => {
     },
   )
 
-  watch([tab, vertical], () => {
-    nextTick(() => {
-      if (tab.value === 'content')
-        contentEditor.refresh()
-      else
-        noteEditor.refresh()
-    })
-  })
+  watchThrottled(
+    [tab, vertical, isEditorVertical, editorWidth, editorHeight],
+    () => {
+      nextTick(() => {
+        if (tab.value === 'content')
+          contentEditor.refresh()
+        else
+          noteEditor.refresh()
+      })
+    },
+    {
+      throttle: 100,
+      flush: 'post',
+    },
+  )
 
-  watch(currentSlideId, () => {
+  watch(currentSlideNo, () => {
     contentEditor.clearHistory()
     noteEditor.clearHistory()
   }, { flush: 'post' })

package/internals/SlideContainer.vue

@@ -3,7 +3,7 @@ import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
 import { configs, slideAspect, slideHeight, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
-import { isPrintMode } from '../logic/nav'
+import { useNav } from '../composables/useNav'
 
 const props = defineProps({
   width: {
@@ -21,11 +21,13 @@ const props = defineProps({
   },
 })
 
+const { clicksDirection, isPrintMode } = useNav()
+
 const root = ref<HTMLDivElement>()
 const element = useElementSize(root)
 
 const width = computed(() => props.width ? props.width : element.width.value)
-const height = computed(() => props.width ? props.width / slideAspect : element.height.value)
+const height = computed(() => props.width ? props.width / slideAspect.value : element.height.value)
 
 if (props.width) {
   watchEffect(() => {
@@ -41,20 +43,22 @@ const screenAspect = computed(() => width.value / height.value)
 const scale = computed(() => {
   if (props.scale && !isPrintMode.value)
     return props.scale
-  if (screenAspect.value < slideAspect)
-    return width.value / slideWidth
-  return height.value * slideAspect / slideWidth
+  if (screenAspect.value < slideAspect.value)
+    return width.value / slideWidth.value
+  return height.value * slideAspect.value / slideWidth.value
 })
 
 const style = computed(() => ({
-  'height': `${slideHeight}px`,
-  'width': `${slideWidth}px`,
+  'height': `${slideHeight.value}px`,
+  'width': `${slideWidth.value}px`,
   'transform': `translate(-50%, -50%) scale(${scale.value})`,
   '--slidev-slide-scale': scale.value,
 }))
 
 const className = computed(() => ({
   'select-none': !configs.selectable,
+  'slidev-nav-go-forward': clicksDirection.value > 0,
+  'slidev-nav-go-backward': clicksDirection.value < 0,
 }))
 
 if (props.isMain) {
@@ -69,8 +73,8 @@ provideLocal(injectionSlideScale, scale as any)
 </script>
 
 <template>
-  <div id="slide-container" ref="root" :class="className">
-    <div id="slide-content" :style="style">
+  <div id="slide-container" ref="root" class="slidev-slides-container" :class="className">
+    <div id="slide-content" class="slidev-slide-content" :style="style">
       <slot />
     </div>
     <slot name="controls" />

package/internals/SlideLoading.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+const timeout = ref(false)
+onMounted(() => {
+  setTimeout(() => {
+    timeout.value = true
+  }, 200)
+})
+</script>
+
+<template>
+  <div class="h-full w-full flex items-center justify-center gap-2 slidev-slide-loading">
+    <template v-if="timeout">
+      <div class="i-svg-spinners-90-ring-with-bg text-xl" />
+      <div>Loading slide...</div>
+    </template>
+  </div>
+</template>

package/internals/SlideWrapper.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed, defineAsyncComponent, defineComponent, h, onMounted, ref, toRef } from 'vue'
+import type { PropType } from 'vue'
+import { provideLocal } from '@vueuse/core'
+import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
+import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute } from '../constants'
+import SlideLoading from './SlideLoading.vue'
+
+const props = defineProps({
+  clicksContext: {
+    type: Object as PropType<ClicksContext>,
+    required: true,
+  },
+  renderContext: {
+    type: String as PropType<RenderContext>,
+    default: 'slide',
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  is: {
+    type: Function as PropType<() => any>,
+    required: true,
+  },
+  route: {
+    type: Object as PropType<SlideRoute>,
+    required: true,
+  },
+})
+
+provideLocal(injectionRoute, props.route)
+provideLocal(injectionCurrentPage, ref(props.route.no))
+provideLocal(injectionRenderContext, ref(props.renderContext as RenderContext))
+provideLocal(injectionActive, toRef(props, 'active'))
+provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
+
+const style = computed(() => {
+  const zoom = props.route.meta?.slide?.frontmatter.zoom ?? 1
+  return zoom === 1
+    ? undefined
+    : {
+        width: `${100 / zoom}%`,
+        height: `${100 / zoom}%`,
+        transformOrigin: 'top left',
+        transform: `scale(${zoom})`,
+      }
+})
+
+const SlideComponent = defineAsyncComponent({
+  loader: async () => {
+    const component = await props.is()
+    return defineComponent({
+      setup(_, { attrs }) {
+        onMounted(() => {
+          props.clicksContext.onMounted()
+        })
+        return () => h(component.default, attrs)
+      },
+    })
+  },
+  delay: 300,
+  loadingComponent: SlideLoading,
+})
+</script>
+
+<template>
+  <component
+    :is="SlideComponent"
+    :style="style"
+    :class="{ 'disable-view-transition': !['slide', 'presenter'].includes(props.renderContext) }"
+  />
+</template>
+
+<style scoped>
+.disable-view-transition:deep(*) {
+  view-transition-name: none !important;
+}
+</style>

package/internals/SlidesShow.vue

@@ -1,27 +1,33 @@
 <script setup lang="ts">
 import { TransitionGroup, computed, shallowRef, watch } from 'vue'
-import { currentRoute, isPresenter, nextRoute, rawRoutes, transition } from '../logic/nav'
+import { recomputeAllPoppers } from 'floating-vue'
+import { useNav } from '../composables/useNav'
 import { getSlideClass } from '../utils'
 import { useViewTransition } from '../composables/useViewTransition'
-import { skipTransition } from '../composables/hmr'
-import { usePrimaryClicks } from '../composables/useClicks'
-import SlideWrapper from './SlideWrapper'
-
-// @ts-expect-error virtual module
-import GlobalTop from '/@slidev/global-components/top'
-
-// @ts-expect-error virtual module
-import GlobalBottom from '/@slidev/global-components/bottom'
+import { skipTransition } from '../logic/hmr'
+import SlideWrapper from './SlideWrapper.vue'
 import PresenterMouse from './PresenterMouse.vue'
 
+import GlobalTop from '#slidev/global-components/top'
+import GlobalBottom from '#slidev/global-components/bottom'
+
 defineProps<{
   renderContext: 'slide' | 'presenter'
 }>()
 
+const {
+  currentSlideRoute,
+  currentTransition,
+  getPrimaryClicks,
+  isPresenter,
+  nextRoute,
+  slides,
+} = useNav()
+
 // preload next route
-watch(currentRoute, () => {
-  if (currentRoute.value?.meta && currentRoute.value.meta.preload !== false)
-    currentRoute.value.meta.__preloaded = true
+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 })
@@ -32,12 +38,14 @@ const DrawingLayer = shallowRef<any>()
 if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
   import('./DrawingLayer.vue').then(v => DrawingLayer.value = v.default)
 
-const loadedRoutes = computed(() => rawRoutes.filter(r => r.meta?.__preloaded || r === currentRoute.value))
+const loadedRoutes = computed(() => slides.value.filter(r => r.meta?.__preloaded || r === currentSlideRoute.value))
 
 function onAfterLeave() {
   // After transition, we disable it so HMR won't trigger it again
   // We will turn it back on `nav.go` so the normal navigation would still work
   skipTransition.value = true
+  // recompute poppers after transition
+  recomputeAllPoppers()
 }
 </script>
 
@@ -48,22 +56,25 @@ function onAfterLeave() {
   <!-- Slides -->
   <component
     :is="hasViewTransition ? 'div' : TransitionGroup"
-    v-bind="skipTransition ? {} : transition"
+    v-bind="skipTransition ? {} : currentTransition"
     id="slideshow"
     tag="div"
     @after-leave="onAfterLeave"
   >
-    <template v-for="route of loadedRoutes" :key="route.path">
+    <div
+      v-for="route of loadedRoutes"
+      v-show="route === currentSlideRoute"
+      :key="route.no"
+    >
       <SlideWrapper
-        :is="route?.component as any"
-        v-show="route === currentRoute"
-        :clicks-context="usePrimaryClicks(route)"
+        :is="route.component!"
+        :clicks-context="getPrimaryClicks(route)"
         :class="getSlideClass(route)"
         :route="route"
         :render-context="renderContext"
         class="overflow-hidden"
       />
-    </template>
+    </div>
   </component>
 
   <!-- Global Top -->
@@ -77,10 +88,13 @@ function onAfterLeave() {
 
 <style scoped>
 #slideshow {
-  @apply h-full;
+  height: 100%;
 }
 
 #slideshow > div {
-  @apply h-full w-full absolute;
+  position: absolute;
+  height: 100%;
+  width: 100%;
 }
 </style>
+../logic/hmr

package/layouts/error.vue

@@ -0,0 +1,5 @@
+<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.
+  </div>
+</template>

package/layouts/two-cols-header.vue

@@ -51,9 +51,15 @@ const props = defineProps({
   grid-template-rows: repeat(2, 1fr);
 }
 
-.col-header { grid-area: 1 / 1 / 2 / 3; }
-.col-left { grid-area: 2 / 1 / 3 / 2; }
-.col-right { grid-area: 2 / 2 / 3 / 3; }
+.col-header {
+  grid-area: 1 / 1 / 2 / 3;
+}
+.col-left {
+  grid-area: 2 / 1 / 3 / 2;
+}
+.col-right {
+  grid-area: 2 / 2 / 3 / 3;
+}
 .col-bottom {
   align-self: end;
   grid-area: 3 / 1 / 3 / 3;

package/logic/overview.ts

@@ -1,9 +1,9 @@
 import { computed, ref } from 'vue'
-import { rawRoutes } from '../routes'
+import { slides } from './slides'
 
 // To have same format(.value) as max, wrap it with ref.
 const min = ref(1)
-const max = computed(() => rawRoutes.length)
+const max = computed(() => slides.value.length)
 
 export const currentOverviewPage = ref(0)
 export const overviewRowCount = ref(0)

package/logic/route.ts

@@ -1,5 +1,6 @@
-import { computed, nextTick, unref } from 'vue'
-import { router } from '../routes'
+import type { WritableComputedRef } from 'vue'
+import { computed, nextTick, ref, unref } from 'vue'
+import { useRouter } from 'vue-router'
 
 export function useRouteQuery<T extends string | string[]>(
   name: string,
@@ -7,7 +8,9 @@ export function useRouteQuery<T extends string | string[]>(
   {
     mode = 'replace',
   } = {},
-) {
+): WritableComputedRef<T> {
+  const router = useRouter()
+
   return computed<any>({
     get() {
       const data = router.currentRoute.value.query[name]
@@ -19,8 +22,16 @@ export function useRouteQuery<T extends string | string[]>(
     },
     set(v) {
       nextTick(() => {
-        router[unref(mode) as 'replace' | 'push']({ query: { ...router.currentRoute.value.query, [name]: v } })
+        router[unref(mode) as 'replace' | 'push']({
+          query: {
+            ...router.currentRoute.value.query,
+            [name]: `${v}` === defaultValue ? undefined : v,
+          },
+        })
       })
     },
-  })
+  }) as any
 }
+
+// force update collected elements when the route is fully resolved
+export const routeForceRefresh = ref(0)

package/logic/slides.ts

@@ -0,0 +1,20 @@
+import type { SlideRoute } from '@slidev/types'
+import { slides } from '#slidev/slides'
+
+export { slides }
+
+export function getSlide(no: number | string) {
+  return slides.value.find(
+    s => (s.no === +no || s.meta.slide?.frontmatter.routeAlias === no),
+  )
+}
+
+export function getSlidePath(
+  route: SlideRoute | number | string,
+  presenter: boolean,
+) {
+  if (typeof route === 'number' || typeof route === 'string')
+    route = getSlide(route)!
+  const no = route.meta.slide?.frontmatter.routeAlias ?? route.no
+  return presenter ? `/presenter/${no}` : `/${no}`
+}