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

package/internals/PrintSlideClick.vue

@@ -1,23 +1,21 @@
 <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`,
@@ -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/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])