fix: presenter mode sync

demo/slides.md

@@ -628,9 +628,7 @@ mouse.x === x.value // true
 
 With Composition API, we can actually turn async data into "sync"
 
-<v-clicks>
-
-<div>
+<div v-click>
 
 ### Async
 
@@ -641,7 +639,7 @@ const data = await fetch('https://api.github.com/').then(r => r.json())
 ```
 
 </div>
-<div>
+<div v-click>
 
 ### Composition API
 
@@ -652,11 +650,11 @@ const user_url = computed(() => data.value?.user_url)
 ```
 
 </div>
+<div v-click> 
 
 Establish the "Connections" first, then wait data to be filled up. The idea is similar to SWR (stale-while-revalidate)
 
-</v-clicks>
-
+</div>
 
 ------
 

packages/client/builtin/VClicks.ts

@@ -1,4 +1,4 @@
-import { defineComponent, Directive, resolveDirective, VNode, withDirectives } from 'vue'
+import { defineComponent, Directive, h, resolveDirective, VNode, withDirectives } from 'vue'
 
 export default defineComponent({
   props: {
@@ -11,10 +11,6 @@ export default defineComponent({
     const after = resolveDirective('after')!
 
     function applyDirective(node: VNode, directive: Directive) {
-      // console.log(node.dirs)
-      // // @ts-expect-error
-      // if (node.dirs?.find(i => i.dir.name && ['v-click', 'v-after'].includes(i.dir.name)))
-      //   return node
       return withDirectives(node, [[directive]])
     }
 
@@ -24,8 +20,8 @@ export default defineComponent({
       return
 
     if (Array.isArray(defaults))
-      return defaults.map((i, idx) => applyDirective(i, idx % this.every === 0 ? click : after))
+      return defaults.map((i, idx) => applyDirective(h(i), idx % this.every === 0 ? click : after))
 
-    return applyDirective(defaults, click)
+    return applyDirective(h(defaults), click)
   },
 })

packages/client/internals/Play.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { isPrintMode, showEditor, windowSize } from '../state'
 import { next, prev, currentRoute, tab, tabElements } from '../logic/nav'
 import Controls from './Controls.vue'
@@ -16,24 +15,19 @@ function onClick(e: MouseEvent) {
       prev()
   }
 }
-
-const component = computed(() => currentRoute.value?.component)
 </script>
 
 <template>
   <div id="page-root" class="grid grid-cols-[1fr,max-content]">
     <SlideContainer
+      v-model:tab="tab"
+      v-model:tab-elements="tabElements"
       class="w-full h-full bg-black"
       :width="isPrintMode ? windowSize.width.value : undefined"
+      :route="currentRoute"
+      :tab-disabled="false"
       @click="onClick"
     >
-      <component
-        :is="component"
-        v-model:tab="tab"
-        v-model:tabElements="tabElements"
-        :tab-disabled="false"
-        :class="currentRoute?.meta?.class || ''"
-      />
       <template #controls>
         <NavControls />
       </template>

packages/client/internals/Presenter.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useHead } from '@vueuse/head'
-import { total, currentPage, currentRoute } from '../logic/nav'
+import { ref, computed, watchEffect } from 'vue'
+import { total, currentPage, currentRoute, nextRoute, tab, tabElements, route } from '../logic/nav'
 import { showOverview } from '../state'
 import SlideContainer from './SlideContainer.vue'
 import NavControls from './NavControls.vue'
@@ -12,6 +13,25 @@ useHead({
   title: configs.title ? `Presenter - ${configs.title} - Slidev` : 'Presenter - Slidev',
 })
 
+watchEffect(() => {
+  console.log(tabElements.value.length)
+})
+
+const nextTabElements = ref([])
+const nextSlide = computed(() => {
+  if (tab.value < tabElements.value.length) {
+    return {
+      route: currentRoute.value,
+      tab: tab.value + 1,
+    }
+  }
+  else {
+    return {
+      route: nextRoute.value,
+      tab: 0,
+    }
+  }
+})
 </script>
 
 <template>
@@ -24,14 +44,24 @@ useHead({
       <NavControls mode="persist" />
     </div>
     <div class="grid-section main flex flex-col p-4 bg-gray-400 bg-opacity-10">
-      <SlideContainer class="h-full w-full ">
-        <component :is="currentRoute?.component" />
-      </SlideContainer>
+      <SlideContainer
+        key="main"
+        v-model:tab="tab"
+        v-model:tab-elements="tabElements"
+        class="h-full w-full"
+        :route="currentRoute"
+        :tab-disabled="false"
+      />
     </div>
     <div class="grid-section next flex flex-col p-4 bg-gray-400 bg-opacity-10">
-      <!-- <SlideContainer class="h-full w-full">
-        <component :is="controls.nextRoute.value?.component" />
-      </SlideContainer> -->
+      <SlideContainer
+        key="next"
+        v-model:tab-elements="nextTabElements"
+        class="h-full w-full"
+        :tab="nextSlide.tab"
+        :route="nextSlide.route"
+        :tab-disabled="false"
+      />
     </div>
     <div class="grid-section note"></div>
     <div class="grid-section bottom"></div>

packages/client/internals/SlideContainer.vue

@@ -1,14 +1,42 @@
 <script setup lang="ts">
-import { useElementSize } from '@vueuse/core'
-import { computed, defineProps, ref, watchEffect } from 'vue'
+import { useElementSize, useVModel } from '@vueuse/core'
+import { computed, defineProps, ref, watchEffect, inject, provide, defineEmit } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
 import { slideAspect, slideWidth, slideHeight } from '../constants'
+import { injectionTab, injectionTabDisabled, injectionTabElements } from '../modules/directives'
 
+const emit = defineEmit()
 const props = defineProps({
   width: {
     type: Number,
   },
+  tab: {
+    default: 0,
+  },
+  tabElements: {
+    default: () => [] as Element[],
+  },
+  tabDisabled: {
+    default: false,
+  },
+  meta: {
+    default: () => ({}) as any,
+  },
+  route: {
+    default: () => ({}) as any as RouteRecordRaw,
+  },
 })
 
+const tab = useVModel(props, 'tab', emit)
+const tabElements = useVModel(props, 'tabElements', emit)
+const tabDisabled = useVModel(props, 'tabDisabled', emit)
+
+tabElements.value = []
+
+provide(injectionTab, tab)
+provide(injectionTabElements, tabElements)
+provide(injectionTabDisabled, tabDisabled)
+
 const root = ref<HTMLDivElement>()
 const element = useElementSize(root)
 
@@ -42,7 +70,10 @@ const style = computed(() => ({
 <template>
   <div id="slide-container" ref="root">
     <div id="slide-content" :style="style">
-      <slot />
+      <component
+        :is="route.component"
+        :class="route.meta?.class"
+      />
     </div>
     <slot name="controls" />
   </div>

packages/client/internals/SlidesOverview.vue

@@ -3,7 +3,6 @@ import { useVModel } from '@vueuse/core'
 import { computed, defineEmit, defineProps, provide, ref } from 'vue'
 import { breakpoints, windowSize } from '../state'
 import { go as goSlide, rawRoutes } from '../logic/nav'
-import { injectionTabDisabled } from '../modules/directives'
 import SlideContainer from './SlideContainer.vue'
 
 const emit = defineEmit()
@@ -32,8 +31,6 @@ const cardWidth = computed(() => {
     return (windowSize.width.value - padding - gap) / 2
   return 300
 })
-
-provide(injectionTabDisabled, ref(true))
 </script>
 
 <template>
@@ -56,11 +53,12 @@ provide(injectionTabDisabled, ref(true))
           @click="go(+route.path)"
         >
           <SlideContainer
+            :key="route.path"
             :width="cardWidth"
+            :route="route"
+            :tab-disabled="true"
             class="pointer-events-none"
-          >
-            <component :is="route.component" />
-          </SlideContainer>
+          />
         </div>
         <div
           class="absolute top-0 opacity-50"

packages/client/setup/app.ts

@@ -19,6 +19,8 @@ export default function setupApp() {
   router.isReady().then(() => {
     watch(serverState,
       () => {
+        if (isPresenter.value)
+          return
         if (+serverState.value.page !== +currentPage.value)
           router.replace(getPath(serverState.value.page))
         tab.value = serverState.value.tab || 0

packages/slidev/node/plugins/factory.ts

@@ -38,12 +38,10 @@ export function VitePluginVueFactory(): Plugin {
       const classes = (params.get('class') || '').split(',').join(' ')
       const tag = params.get('tag') || 'div'
 
-      console.log({ classes, tag })
+      // console.log({ classes, tag })
 
       const content = `<template><${tag} class="${classes}"><slot/></${tag}></template>`
 
-      console.log(windi?.api)
-
       windi?.api?.extractFile(content)
 
       return content

packages/slidev/node/plugins/loaders.ts

@@ -69,7 +69,6 @@ export function createSlidesLoader({ entry, clientRoot, themeRoot, userRoot }: R
           }
           if (type === 'json' && req.method === 'POST') {
             const body = await getBodyJson(req)
-            // console.log(req.url, body)
             Object.assign(data.slides[idx], body)
             skipNext = true
             await parser.save(data, entry)
@@ -168,12 +167,11 @@ export function createSlidesLoader({ entry, clientRoot, themeRoot, userRoot }: R
             throw new Error(`Unknown layout "${layoutName}"`)
 
           code = code.replace('export default _sfc_main', '')
-          code = `import __wrapper from '/@fs${clientRoot}/internals/SlideWrapper'\n${code}`
           code = `import __layout from "${layouts[layoutName]}"\n${code}`
           code = `import { h } from 'vue'\n${code}`
           code += `\nexport default {
             name: "layout-${layoutName}",
-            render: () => h(__wrapper, null, () => h(__layout, null, () => h(_sfc_main))),
+            render: () => h(__layout, null, () => h(_sfc_main)),
             __file: __layout.__file,
           }`