fix: global layers

packages/client/internals/PrintSlideClick.vue

@@ -3,13 +3,9 @@ import { computed, reactive, shallowRef } from 'vue'
 import { provideLocal } from '@vueuse/core'
 import { injectionSlidevContext } from '../constants'
 import { configs, slideHeight, slideWidth } from '../env'
-import { getSlideClass } from '../utils'
 import type { SlidevContextNav } from '../composables/useNav'
 import SlideWrapper from './SlideWrapper.vue'
 
-import GlobalTop from '#slidev/global-components/top'
-import GlobalBottom from '#slidev/global-components/bottom'
-
 const { nav } = defineProps<{
   nav: SlidevContextNav
 }>()
@@ -38,12 +34,8 @@ provideLocal(injectionSlidevContext, reactive({
 
 <template>
   <div :id="id" class="print-slide-container" :style="style">
-    <GlobalBottom />
-
     <SlideWrapper
-      :is="route.component!"
       :clicks-context="nav.clicksContext.value"
-      :class="getSlideClass(route)"
       :route="route"
     />
     <template
@@ -55,7 +47,5 @@ provideLocal(injectionSlidevContext, reactive({
     >
       <DrawingPreview :page="route.no" />
     </template>
-
-    <GlobalTop />
   </div>
 </template>

packages/client/internals/QuickOverview.vue

@@ -4,7 +4,6 @@ import { computed, ref, watchEffect } from 'vue'
 import { breakpoints, showOverview, windowSize } from '../state'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
 import { createFixedClicks } from '../composables/useClicks'
-import { getSlideClass } from '../utils'
 import { CLICKS_MAX } from '../constants'
 import { useNav } from '../composables/useNav'
 import SlideContainer from './SlideContainer.vue'
@@ -136,10 +135,7 @@ watchEffect(() => {
               class="pointer-events-none"
             >
               <SlideWrapper
-                :is="route.component"
-                v-if="route?.component"
                 :clicks-context="createFixedClicks(route, CLICKS_MAX)"
-                :class="getSlideClass(route)"
                 :route="route"
                 render-context="overview"
               />

packages/client/internals/SlideWrapper.vue

@@ -4,8 +4,12 @@ import type { PropType } from 'vue'
 import { provideLocal } from '@vueuse/core'
 import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
 import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute, injectionSlideZoom } from '../constants'
+import { getSlideClass } from '../utils'
 import SlideLoading from './SlideLoading.vue'
 
+import GlobalTop from '#slidev/global-components/top'
+import GlobalBottom from '#slidev/global-components/bottom'
+
 const props = defineProps({
   clicksContext: {
     type: Object as PropType<ClicksContext>,
@@ -19,10 +23,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  is: {
-    type: Function as PropType<() => any>,
-    required: true,
-  },
   route: {
     type: Object as PropType<SlideRoute>,
     required: true,
@@ -51,7 +51,7 @@ const style = computed(() => {
 
 const SlideComponent = defineAsyncComponent({
   loader: async () => {
-    const component = await props.is()
+    const component = await props.route.component()
     return defineComponent({
       setup(_, { attrs }) {
         onMounted(() => {
@@ -67,12 +67,19 @@ const SlideComponent = defineAsyncComponent({
 </script>
 
 <template>
+  <!-- Global Bottom -->
+  <GlobalBottom />
+
+  <!-- Slide Content -->
   <component
     :is="SlideComponent"
     :style="style"
     :data-slidev-no="props.route.no"
-    :class="{ 'disable-view-transition': !['slide', 'presenter'].includes(props.renderContext) }"
+    :class="getSlideClass(props.route, ['slide', 'presenter'].includes(props.renderContext) ? '' : 'disable-view-transition')"
   />
+
+  <!-- Global Top -->
+  <GlobalTop />
 </template>
 
 <style scoped>

packages/client/internals/SlidesShow.vue

@@ -2,17 +2,13 @@
 import { TransitionGroup, computed, shallowRef, watch } from 'vue'
 import { recomputeAllPoppers } from 'floating-vue'
 import { useNav } from '../composables/useNav'
-import { getSlideClass } from '../utils'
 import { useViewTransition } from '../composables/useViewTransition'
 import { skipTransition } from '../logic/hmr'
 import { createFixedClicks } from '../composables/useClicks'
 import { CLICKS_MAX } from '../constants'
 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'
 }>()
@@ -54,10 +50,6 @@ function onAfterLeave() {
 </script>
 
 <template>
-  <!-- Global Bottom -->
-  <GlobalBottom />
-
-  <!-- Slides -->
   <component
     :is="hasViewTransition ? 'div' : TransitionGroup"
     v-bind="skipTransition ? {} : currentTransition"
@@ -71,21 +63,15 @@ function onAfterLeave() {
       :key="route.no"
     >
       <SlideWrapper
-        :is="route.component!"
         :clicks-context="isPrintMode && !isPrintWithClicks ? createFixedClicks(route, CLICKS_MAX) : getPrimaryClicks(route)"
-        :class="getSlideClass(route)"
         :route="route"
         :render-context="renderContext"
-        class="overflow-hidden"
       />
     </div>
   </component>
 
   <div id="twoslash-container" />
 
-  <!-- Global Top -->
-  <GlobalTop />
-
   <template v-if="(__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__) && DrawingLayer">
     <DrawingLayer />
   </template>

packages/client/pages/overview.vue

@@ -6,7 +6,6 @@ import { configs } from '../env'
 import { getSlidePath } from '../logic/slides'
 import { createFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
-import { getSlideClass } from '../utils'
 import SlideContainer from '../internals/SlideContainer.vue'
 import SlideWrapper from '../internals/SlideWrapper.vue'
 import DrawingPreview from '../internals/DrawingPreview.vue'
@@ -180,9 +179,7 @@ onMounted(() => {
               class="pointer-events-none important:[&_*]:select-none"
             >
               <SlideWrapper
-                :is="route.component!"
                 :clicks-context="getClicksContext(route)"
-                :class="getSlideClass(route)"
                 :route="route"
                 render-context="overview"
               />

packages/client/pages/presenter.vue

@@ -7,7 +7,6 @@ import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout,
 import { configs } from '../env'
 import { sharedState } from '../state/shared'
 import { registerShortcuts } from '../logic/shortcuts'
-import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'
 import { createFixedClicks } from '../composables/useClicks'
 import SlideWrapper from '../internals/SlideWrapper.vue'
@@ -133,10 +132,8 @@ onMounted(() => {
           class="h-full w-full"
         >
           <SlideWrapper
-            :is="nextFrame[0].component!"
             :key="nextFrame[0].no"
             :clicks-context="nextFrameClicksCtx"
-            :class="getSlideClass(nextFrame[0])"
             :route="nextFrame[0]"
             render-context="previewNext"
           />

packages/types/src/types.ts

@@ -100,7 +100,7 @@ export type RenderContext = 'none' | 'slide' | 'overview' | 'presenter' | 'previ
 export interface SlideRoute {
   no: number
   meta: RouteMeta
-  component: () => Promise<RouteComponent>
+  component: () => Promise<{ default: RouteComponent }>
 }
 
 export type LoadedSnippets = Record<string, string>