@slidev/client 52.7.0 → 52.8.0

package/builtin/ShikiMagicMove.vue

@@ -34,6 +34,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  duration: {
+    type: Number,
+    default: configs.magicMoveDuration,
+  },
 })
 
 const steps = JSON.parse(lz.decompressFromBase64(props.stepsLz)) as KeyedTokensInfo[]
@@ -42,6 +46,8 @@ const { isPrintMode } = useNav()
 const id = makeId()
 
 const stepIndex = ref(0)
+// Used to skip the animation on the first tick.
+const isFirstTick = ref(true)
 const container = ref<HTMLElement>()
 
 const showCopyButton = computed(() => {
@@ -89,6 +95,7 @@ onMounted(() => {
   const clickInfo = clicks.calculateSince(props.at, clickCounts - 1)
   clicks.register(id, clickInfo)
 
+  let cancelTick: () => void = () => { }
   watch(
     () => clicks.current,
     () => {
@@ -107,9 +114,24 @@ onMounted(() => {
         currentClickSum += current.length || 1
       }
 
+      // It seems ticks may not be executed in order. Cancel previous ones, because
+      // clicks.current is first 0 then immediately updated when refreshing the slide.
+      cancelTick()
+      let isCanceled = false
+      cancelTick = () => {
+        isCanceled = true
+      }
+
       nextTick(async () => {
+        if (isCanceled) {
+          return
+        }
         stepIndex.value = step
-
+        if (isFirstTick.value) {
+          nextTick(() => {
+            isFirstTick.value = false
+          })
+        }
         await sleep(0)
 
         const pre = container.value?.querySelector('.shiki') as HTMLElement
@@ -158,8 +180,10 @@ onMounted(() => {
       :animate="!isPrintMode"
       :options="{
         globalScale: scale * zoom,
-        // TODO: make this configurable later
-        duration: 800,
+        // Use duration 0 to skip animation instead of using the animate prop,
+        // because moving from non-animated to animated causes issues with
+        // new elements. Unfortunately, this causes a flash.
+        duration: isFirstTick ? 0 : $props.duration,
         stagger: 1,
       }"
     />

package/constants.ts

@@ -86,4 +86,5 @@ export const HEADMATTER_FIELDS = [
   'wakeLock',
   'seoMeta',
   'notesAutoRuby',
+  'magicMoveDuration',
 ]

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "52.7.0",
+  "version": "52.8.0",
   "description": "Presentation slides for developers",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.8",
     "@unhead/vue": "^2.0.19",
-    "@unocss/reset": "^66.5.4",
+    "@unocss/reset": "^66.5.5",
     "@vueuse/core": "^14.0.0",
     "@vueuse/math": "^14.0.0",
     "@vueuse/motion": "^3.0.3",
@@ -57,12 +57,12 @@
     "shiki": "^3.15.0",
     "shiki-magic-move": "^1.2.1",
     "typescript": "^5.9.3",
-    "unocss": "^66.5.4",
-    "vue": "^3.5.23",
+    "unocss": "^66.5.5",
+    "vue": "^3.5.24",
     "vue-router": "^4.6.3",
     "yaml": "^2.8.1",
-    "@slidev/parser": "52.7.0",
-    "@slidev/types": "52.7.0"
+    "@slidev/parser": "52.8.0",
+    "@slidev/types": "52.8.0"
   },
   "devDependencies": {
     "vite": "^7.2.2"