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

package/context.ts

@@ -1,6 +1,5 @@
-import { ref, shallowRef, toRef } from 'vue'
+import { ref, toRef } from 'vue'
 import { injectLocal, objectOmit, provideLocal } from '@vueuse/core'
-import { useFixedClicks } from './composables/useClicks'
 import {
   FRONTMATTER_FIELDS,
   HEADMATTER_FIELDS,
@@ -13,15 +12,13 @@ import {
   injectionSlidevContext,
 } from './constants'
 
-const clicksContextFallback = shallowRef(useFixedClicks())
-
 /**
  * Get the current slide context, should be called inside the setup function of a component inside slide
  */
 export function useSlideContext() {
   const $slidev = injectLocal(injectionSlidevContext)!
   const $nav = toRef($slidev, 'nav')
-  const $clicksContext = injectLocal(injectionClicksContext, clicksContextFallback)!.value
+  const $clicksContext = injectLocal(injectionClicksContext)!.value
   const $clicks = toRef($clicksContext, 'current')
   const $page = injectLocal(injectionCurrentPage)!
   const $renderContext = injectLocal(injectionRenderContext)!
@@ -51,7 +48,7 @@ export function provideFrontmatter(frontmatter: Record<string, any>) {
   } = useSlideContext()
 
   // update frontmatter in router to make HMR work better
-  const route = $slidev.nav.rawRoutes.find(i => i.path === String($page.value))
+  const route = $slidev.nav.slides.find(i => i.no === $page.value)
   if (route?.meta?.slide?.frontmatter) {
     for (const key of Object.keys(route.meta.slide.frontmatter)) {
       if (!(key in frontmatter))

package/env.ts

@@ -1,15 +1,15 @@
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { objectMap } from '@antfu/utils'
 import configs from '#slidev/configs'
 
 export { configs }
 
-export const slideAspect = configs.aspectRatio ?? (16 / 9)
-export const slideWidth = configs.canvasWidth ?? 980
+export const slideAspect = ref(configs.aspectRatio ?? (16 / 9))
+export const slideWidth = ref(configs.canvasWidth ?? 980)
 
 // To honor the aspect ratio more as possible, we need to approximate the height to the next integer.
 // Doing this, we will prevent on print, to create an additional empty white page after each page.
-export const slideHeight = Math.ceil(slideWidth / slideAspect)
+export const slideHeight = computed(() => Math.ceil(slideWidth.value / slideAspect.value))
 
 export const themeVars = computed(() => {
   return objectMap(configs.themeConfig || {}, (k, v) => [`--slidev-theme-${k}`, v])

package/internals/Goto.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import Fuse from 'fuse.js'
-import { go, rawRoutes } from '../logic/nav'
+import { go, slides } from '../logic/nav'
 import { activeElement, showGotoDialog } from '../state'
 import Titles from '#slidev/titles.md'
 
@@ -16,7 +16,7 @@ function notNull<T>(value: T | null | undefined): value is T {
   return value !== null && value !== undefined
 }
 
-const fuse = computed(() => new Fuse(rawRoutes.map(i => i.meta?.slide).filter(notNull), {
+const fuse = computed(() => new Fuse(slides.value.map(i => i.meta?.slide).filter(notNull), {
   keys: ['no', 'title'],
   threshold: 0.3,
   shouldSort: true,

package/internals/NavControls.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
-import { currentPage, downloadPDF, hasNext, hasPrev, isEmbedded, isPresenter, next, presenterPassword, prev, showPresenter, total } from '../logic/nav'
+import { downloadPDF } from '../utils'
+import { currentRoute, currentSlideNo, getSlidePath, hasNext, hasPrev, isEmbedded, isPresenter, isPresenterAvailable, next, prev, total } from '../logic/nav'
 import { activeElement, breakpoints, fullscreen, presenterLayout, showEditor, showInfoDialog, showPresenterCursor, toggleOverview, togglePresenterLayout } from '../state'
 import { brush, drawingEnabled } from '../logic/drawings'
 import { configs } from '../env'
@@ -21,9 +22,10 @@ const props = defineProps({
 const md = breakpoints.smaller('md')
 const { isFullscreen, toggle: toggleFullscreen } = fullscreen
 
+const presenterPassword = computed(() => currentRoute.value.query.password)
 const query = computed(() => presenterPassword.value ? `?password=${presenterPassword.value}` : '')
-const presenterLink = computed(() => `/presenter/${currentPage.value}${query.value}`)
-const nonPresenterLink = computed(() => `/${currentPage.value}${query.value}`)
+const presenterLink = computed(() => `${getSlidePath(currentSlideNo.value, true)}${query.value}`)
+const nonPresenterLink = computed(() => `${getSlidePath(currentSlideNo.value, false)}${query.value}`)
 
 const root = ref<HTMLDivElement>()
 function onMouseLeave() {
@@ -107,7 +109,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         <RouterLink v-if="isPresenter" :to="nonPresenterLink" class="slidev-icon-btn" title="Play Mode">
           <carbon:presentation-file />
         </RouterLink>
-        <RouterLink v-if="__SLIDEV_FEATURE_PRESENTER__ && showPresenter" :to="presenterLink" class="slidev-icon-btn" title="Presenter Mode">
+        <RouterLink v-if="__SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable" :to="presenterLink" class="slidev-icon-btn" title="Presenter Mode">
           <carbon:user-speaker />
         </RouterLink>
 
@@ -156,7 +158,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
 
       <div class="h-40px flex" p="l-1 t-0.5 r-2" text="sm leading-2">
         <div class="my-auto">
-          {{ currentPage }}
+          {{ currentSlideNo }}
           <span class="opacity-50">/ {{ total }}</span>
         </div>
       </div>

package/internals/NoteStatic.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ClicksContext } from 'packages/types'
+import type { ClicksContext } from '@slidev/types'
 import { useSlideInfo } from '../logic/note'
 import NoteDisplay from './NoteDisplay.vue'
 

package/internals/PrintContainer.vue

@@ -4,7 +4,7 @@ import { computed } from 'vue'
 import { provideLocal } from '@vueuse/core'
 import { configs, slideAspect, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
-import { route as currentRoute, rawRoutes } from '../logic/nav'
+import { currentRoute, slides } from '../logic/nav'
 import PrintSlide from './PrintSlide.vue'
 
 const props = defineProps<{
@@ -12,17 +12,18 @@ const props = defineProps<{
 }>()
 
 const width = computed(() => props.width)
-const height = computed(() => props.width / slideAspect)
+const height = computed(() => props.width / slideAspect.value)
 
 const screenAspect = computed(() => width.value / height.value)
 
 const scale = computed(() => {
-  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
 })
 
-let routes = rawRoutes
+// In print mode, the routes will never change. So we don't need reactivity here.
+let routes = slides.value
 if (currentRoute.value.query.range) {
   const r = parseRangeString(routes.length, currentRoute.value.query.range as string)
   routes = r.map(i => routes[i - 1])
@@ -38,7 +39,7 @@ provideLocal(injectionSlideScale, scale)
 <template>
   <div id="print-container" :class="className">
     <div id="print-content">
-      <PrintSlide v-for="route of routes" :key="route.path" :route="route" />
+      <PrintSlide v-for="route of routes" :key="route.no" :route="route" />
     </div>
     <slot name="controls" />
   </div>

package/internals/PrintSlide.vue

@@ -1,30 +1,23 @@
 <script setup lang="ts">
-import type { RouteRecordRaw } from 'vue-router'
-import { computed } from 'vue'
-import { useNav } from '../composables/useNav'
+import type { SlideRoute } from '@slidev/types'
+import { useFixedNav } from '../composables/useNav'
 import { useFixedClicks } from '../composables/useClicks'
 import PrintSlideClick from './PrintSlideClick.vue'
 
-const props = defineProps<{ route: RouteRecordRaw }>()
-
-const route = computed(() => props.route)
-const nav = useNav(route)
-const clicks0 = useFixedClicks(route.value, 0)
+const { route } = defineProps<{ route: SlideRoute }>()
+const clicks0 = useFixedClicks(route, 0)
 </script>
 
 <template>
   <PrintSlideClick
     :clicks-context="clicks0"
-    :nav="nav"
-    :route="route"
+    :nav="useFixedNav(route, clicks0)"
   />
   <template v-if="!clicks0.disabled">
     <PrintSlideClick
       v-for="i of clicks0.total"
       :key="i"
-      :clicks-context="useFixedClicks(route, i)"
-      :nav="nav"
-      :route="route"
+      :nav="useFixedNav(route, useFixedClicks(route, i))"
     />
   </template>
 </template>

package/internals/PrintSlideClick.vue

@@ -1,26 +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 type { SlidevContextNav } from '../composables/useNav'
 import SlideWrapper from './SlideWrapper'
 
 import GlobalTop from '#slidev/global-components/top'
 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>()
@@ -28,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),
 }))
@@ -43,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"
     />
@@ -55,7 +53,7 @@ provideLocal(injectionSlidevContext, reactive({
           && DrawingPreview
       "
     >
-      <DrawingPreview :page="+route.path" />
+      <DrawingPreview :page="route.no" />
     </template>
 
     <GlobalTop />

package/internals/QuickOverview.vue

@@ -2,7 +2,7 @@
 import { useEventListener, useVModel } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
 import { breakpoints, showOverview, windowSize } from '../state'
-import { currentPage, go as goSlide, rawRoutes } from '../logic/nav'
+import { currentSlideNo, go as goSlide, slides } from '../logic/nav'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
 import { useFixedClicks } from '../composables/useClicks'
 import { getSlideClass } from '../utils'
@@ -78,17 +78,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 +97,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,17 +120,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'"
-            @click="go(+route.path)"
+            @click="go(route.no)"
           >
             <SlideContainer
-              :key="route.path"
+              :key="route.no"
               :width="cardWidth"
               :clicks-disabled="true"
               class="pointer-events-none"
@@ -143,7 +143,7 @@ watchEffect(() => {
                 :route="route"
                 render-context="overview"
               />
-              <DrawingPreview :page="+route.path" />
+              <DrawingPreview :page="route.no" />
             </SlideContainer>
           </div>
           <div

package/internals/SideEditor.vue

@@ -3,7 +3,7 @@ import { throttledWatch, useEventListener } 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 { currentSlideNo, openInEditor } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
 import IconButton from './IconButton.vue'
 
@@ -19,7 +19,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,
@@ -103,7 +103,7 @@ onMounted(async () => {
     })
   })
 
-  watch(currentSlideId, () => {
+  watch(currentSlideNo, () => {
     contentEditor.clearHistory()
     noteEditor.clearHistory()
   }, { flush: 'post' })

package/internals/SlideContainer.vue

@@ -25,7 +25,7 @@ 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,14 +41,14 @@ 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,
 }))

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">
+    <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.ts

@@ -1,9 +1,9 @@
-import { computed, defineComponent, h, ref, toRef } from 'vue'
+import { computed, defineAsyncComponent, defineComponent, h, ref, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { provideLocal } from '@vueuse/core'
-import type { ClicksContext, RenderContext } from '@slidev/types'
-import type { RouteRecordRaw } from 'vue-router'
+import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
 import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute } from '../constants'
+import SlideLoading from './SlideLoading.vue'
 
 export default defineComponent({
   name: 'SlideWrapper',
@@ -21,17 +21,16 @@ export default defineComponent({
       default: false,
     },
     is: {
-      type: Object,
       required: true,
     },
     route: {
-      type: Object as PropType<RouteRecordRaw>,
+      type: Object as PropType<SlideRoute>,
       required: true,
     },
   },
   setup(props) {
     provideLocal(injectionRoute, props.route)
-    provideLocal(injectionCurrentPage, ref(+props.route.path))
+    provideLocal(injectionCurrentPage, ref(props.route.no))
     provideLocal(injectionRenderContext, ref(props.renderContext as RenderContext))
     provideLocal(injectionActive, toRef(props, 'active'))
     provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
@@ -48,11 +47,12 @@ export default defineComponent({
           }
     })
 
-    return {
-      style,
-    }
-  },
-  render() {
-    return h(this.$props.is, { style: this.style })
+    const SlideComponent = defineAsyncComponent({
+      loader: (props.is as any),
+      delay: 300,
+      loadingComponent: SlideLoading,
+    })
+
+    return () => h(SlideComponent, { style: style.value })
   },
 })

package/internals/SlidesShow.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TransitionGroup, computed, shallowRef, watch } from 'vue'
-import { currentRoute, isPresenter, nextRoute, rawRoutes, transition } from '../logic/nav'
+import { currentSlideRoute, currentTransition, isPresenter, nextRoute, slides } from '../logic/nav'
 import { getSlideClass } from '../utils'
 import { useViewTransition } from '../composables/useViewTransition'
 import { skipTransition } from '../composables/hmr'
@@ -16,9 +16,9 @@ defineProps<{
 }>()
 
 // 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 })
@@ -29,7 +29,7 @@ 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
@@ -45,22 +45,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"
+        :is="route.component!"
         :clicks-context="usePrimaryClicks(route)"
         :class="getSlideClass(route)"
         :route="route"
         :render-context="renderContext"
         class="overflow-hidden"
       />
-    </template>
+    </div>
   </component>
 
   <!-- Global Top -->

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/logic/drawings.ts

@@ -5,7 +5,7 @@ import { toReactive, useLocalStorage } from '@vueuse/core'
 import { drawingState, onPatch, patch } from '../state/drawings'
 import { configs } from '../env'
 import { isInputting } from '../state'
-import { currentPage, isPresenter } from './nav'
+import { currentSlideNo, isPresenter } from './nav'
 
 export const brushColors = [
   '#ff595e',
@@ -63,7 +63,7 @@ export const drauu = markRaw(createDrauu(drauuOptions))
 export function clearDrauu() {
   drauu.clear()
   if (syncUp.value)
-    patch(currentPage.value, '')
+    patch(currentSlideNo.value, '')
 }
 
 export function updateState() {
@@ -74,7 +74,7 @@ export function updateState() {
 
 export function loadCanvas(page?: number) {
   disableDump = true
-  const data = drawingState[page || currentPage.value]
+  const data = drawingState[page || currentSlideNo.value]
   if (data != null)
     drauu.load(data)
   else
@@ -87,7 +87,7 @@ drauu.on('changed', () => {
   updateState()
   if (!disableDump) {
     const dump = drauu.dump()
-    const key = currentPage.value
+    const key = currentSlideNo.value
     if ((drawingState[key] || '') !== dump && syncUp.value)
       patch(key, drauu.dump())
   }
@@ -95,14 +95,14 @@ drauu.on('changed', () => {
 
 onPatch((state) => {
   disableDump = true
-  if (state[currentPage.value] != null)
-    drauu.load(state[currentPage.value] || '')
+  if (state[currentSlideNo.value] != null)
+    drauu.load(state[currentSlideNo.value] || '')
   disableDump = false
   updateState()
 })
 
 nextTick(() => {
-  watch(currentPage, () => {
+  watch(currentSlideNo, () => {
     if (!drauu.mounted)
       return
     loadCanvas()

package/logic/nav-state.ts

@@ -0,0 +1,20 @@
+import { computed } from 'vue'
+import { logicOr } from '@vueuse/math'
+import { configs } from '../env'
+import { router } from '../routes'
+import { getSlide, slides } from './slides'
+
+export const currentRoute = computed(() => router.currentRoute.value)
+
+export const isPrintMode = computed(() => currentRoute.value.query.print !== undefined)
+export const isPrintWithClicks = computed(() => currentRoute.value.query.print === 'clicks')
+export const isEmbedded = computed(() => currentRoute.value.query.embedded !== undefined)
+export const isPlaying = computed(() => currentRoute.value.name === 'play')
+export const isPresenter = computed(() => currentRoute.value.name === 'presenter')
+export const isNotesViewer = computed(() => currentRoute.value.name === 'notes')
+export const isPresenterAvailable = computed(() => !isPresenter.value && (!configs.remote || currentRoute.value.query.password === configs.remote))
+
+export const hasPrimarySlide = logicOr(isPlaying, isPresenter)
+
+export const currentSlideNo = computed(() => hasPrimarySlide.value ? getSlide(currentRoute.value.params.no as string)?.no ?? 1 : 1)
+export const currentSlideRoute = computed(() => slides.value[currentSlideNo.value - 1])