@slidev/client 0.48.3 → 0.48.5

package/builtin/ShikiMagicMove.vue

@@ -14,7 +14,7 @@ const props = defineProps<{
 }>()
 
 const steps = JSON.parse(lz.decompressFromBase64(props.stepsLz)) as KeyedTokensInfo[]
-const { $clicksContext: clicks, $scale: scale } = useSlideContext()
+const { $clicksContext: clicks, $scale: scale, $zoom: zoom } = useSlideContext()
 const { isPrintMode } = useNav()
 const id = makeId()
 
@@ -96,7 +96,7 @@ onMounted(() => {
       :step="stepIndex"
       :animate="!isPrintMode"
       :options="{
-        globalScale: scale,
+        globalScale: scale * zoom,
         // TODO: make this configurable later
         duration: 800,
         stagger: 1,

package/composables/useSlideInfo.ts

@@ -3,6 +3,7 @@ import { useFetch } from '@vueuse/core'
 import type { Ref } from 'vue'
 import { computed, ref, unref } from 'vue'
 import type { SlideInfo, SlidePatch } from '@slidev/types'
+import { getSlide } from '../logic/slides'
 
 export interface UseSlideInfo {
   info: Ref<SlideInfo | undefined>
@@ -10,9 +11,9 @@ export interface UseSlideInfo {
 }
 
 export function useSlideInfo(no: number): UseSlideInfo {
-  if (no == null) {
+  if (!__SLIDEV_HAS_SERVER__) {
     return {
-      info: ref() as Ref<SlideInfo | undefined>,
+      info: ref(getSlide(no)?.meta.slide) as Ref<SlideInfo | undefined>,
       update: async () => {},
     }
   }

package/constants.ts

@@ -12,6 +12,7 @@ export const injectionRoute = '$$slidev-route' as unknown as InjectionKey<SlideR
 export const injectionRenderContext = '$$slidev-render-context' as unknown as InjectionKey<Ref<RenderContext>>
 export const injectionActive = '$$slidev-active' as unknown as InjectionKey<Ref<boolean>>
 export const injectionFrontmatter = '$$slidev-fontmatter' as unknown as InjectionKey<Record<string, any>>
+export const injectionSlideZoom = '$$slidev-slide-zoom' as unknown as InjectionKey<ComputedRef<number>>
 
 export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'

package/context.ts

@@ -1,4 +1,4 @@
-import { ref, toRef } from 'vue'
+import { computed, ref, toRef } from 'vue'
 import { injectLocal, objectOmit, provideLocal } from '@vueuse/core'
 import {
   FRONTMATTER_FIELDS,
@@ -9,6 +9,7 @@ import {
   injectionRenderContext,
   injectionRoute,
   injectionSlideScale,
+  injectionSlideZoom,
   injectionSlidevContext,
 } from './constants'
 
@@ -24,7 +25,8 @@ export function useSlideContext() {
   const $renderContext = injectLocal(injectionRenderContext)!
   const $frontmatter = injectLocal(injectionFrontmatter, {})
   const $route = injectLocal(injectionRoute, undefined)
-  const $scale = injectLocal(injectionSlideScale, ref(1))!
+  const $scale = injectLocal(injectionSlideScale, ref(1))
+  const $zoom = injectLocal(injectionSlideZoom, computed(() => 1))
 
   return {
     $slidev,
@@ -36,6 +38,7 @@ export function useSlideContext() {
     $renderContext,
     $frontmatter,
     $scale,
+    $zoom,
   }
 }
 

package/internals/SlideWrapper.vue

@@ -3,7 +3,7 @@ import { computed, defineAsyncComponent, defineComponent, h, onMounted, ref, toR
 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 { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute, injectionSlideZoom } from '../constants'
 import SlideLoading from './SlideLoading.vue'
 
 const props = defineProps({
@@ -29,21 +29,23 @@ const props = defineProps({
   },
 })
 
+const zoom = computed(() => props.route.meta?.slide?.frontmatter.zoom ?? 1)
+
 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'))
+provideLocal(injectionSlideZoom, zoom)
 
 const style = computed(() => {
-  const zoom = props.route.meta?.slide?.frontmatter.zoom ?? 1
-  return zoom === 1
+  return zoom.value === 1
     ? undefined
     : {
-        width: `${100 / zoom}%`,
-        height: `${100 / zoom}%`,
+        width: `${100 / zoom.value}%`,
+        height: `${100 / zoom.value}%`,
         transformOrigin: 'top left',
-        transform: `scale(${zoom})`,
+        transform: `scale(${zoom.value})`,
       }
 })
 

package/internals/SlidesShow.vue

@@ -75,6 +75,7 @@ function onAfterLeave() {
         class="overflow-hidden"
       />
     </div>
+    <div id="twoslash-container" />
   </component>
 
   <!-- Global Top -->
@@ -91,10 +92,9 @@ function onAfterLeave() {
   height: 100%;
 }
 
-#slideshow > div {
+#slideshow > div:not(#twoslash-container) {
   position: absolute;
   height: 100%;
   width: 100%;
 }
 </style>
-../logic/hmr

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.3",
+  "version": "0.48.5",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -60,8 +60,8 @@
     "vue": "^3.4.21",
     "vue-demi": "^0.14.7",
     "vue-router": "^4.3.0",
-    "@slidev/types": "0.48.3",
-    "@slidev/parser": "0.48.3"
+    "@slidev/parser": "0.48.5",
+    "@slidev/types": "0.48.5"
   },
   "devDependencies": {
     "vite": "^5.1.6"

package/pages/print.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { watchEffect } from 'vue'
+import { onMounted, watchEffect } from 'vue'
+import { recomputeAllPoppers } from 'floating-vue'
 import { windowSize } from '../state'
 import PrintContainer from '../internals/PrintContainer.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
@@ -13,6 +14,10 @@ watchEffect(() => {
   else
     (document.body.parentNode as HTMLElement).classList.remove('print')
 })
+
+onMounted(() => {
+  recomputeAllPoppers()
+})
 </script>
 
 <template>
@@ -24,6 +29,7 @@ watchEffect(() => {
       :width="windowSize.width.value"
     />
   </div>
+  <div id="twoslash-container" />
 </template>
 
 <style lang="postcss">

package/setup/main.ts

@@ -35,7 +35,7 @@ export default async function setupMain(app: App) {
   app.use(createVClickDirectives())
   app.use(createVMarkDirective())
   app.use(MotionPlugin)
-  app.use(TwoSlashFloatingVue as any, { container: '#slideshow' })
+  app.use(TwoSlashFloatingVue as any, { container: '#twoslash-container' })
 
   const context: AppContext = {
     app,