@slidev/client 52.6.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

@@ -66,6 +66,7 @@ export const HEADMATTER_FIELDS = [
   'monacoTypesSource',
   'monacoTypesAdditionalPackages',
   'monacoRunAdditionalDeps',
+  'monacoRunUseStrict',
   'remoteAssets',
   'selectable',
   'record',
@@ -85,4 +86,5 @@ export const HEADMATTER_FIELDS = [
   'wakeLock',
   'seoMeta',
   'notesAutoRuby',
+  'magicMoveDuration',
 ]

package/index.ts

@@ -23,6 +23,7 @@ export type { DrawingsState } from './state/drawings'
 export { drawingState, onDrawingUpdate } from './state/drawings'
 export type { SharedState } from './state/shared'
 export { onSharedUpdate, sharedState } from './state/shared'
+export { lockShortcuts } from './state/storage'
 
 export {
   addSyncMethod,

package/internals/TitleIcon.vue

@@ -61,6 +61,7 @@ const builtinIcons: Record<string, string> = {
   '.yml': 'i-vscode-icons:file-type-light-yaml',
   '.yaml': 'i-vscode-icons:file-type-light-yaml',
   '.php': 'i-vscode-icons:file-type-php',
+  '.svg': 'i-vscode-icons:file-type-svg',
 }
 
 function matchIcon(title: string) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "52.6.0",
+  "version": "52.8.0",
   "description": "Presentation slides for developers",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -32,13 +32,13 @@
     "@iconify-json/carbon": "^1.2.14",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.4",
-    "@shikijs/engine-javascript": "^3.13.0",
-    "@shikijs/monaco": "^3.13.0",
-    "@shikijs/vitepress-twoslash": "^3.13.0",
+    "@shikijs/engine-javascript": "^3.15.0",
+    "@shikijs/monaco": "^3.15.0",
+    "@shikijs/vitepress-twoslash": "^3.15.0",
     "@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",
@@ -48,23 +48,23 @@
     "fuse.js": "^7.1.0",
     "katex": "^0.16.25",
     "lz-string": "^1.5.0",
-    "mermaid": "^11.12.0",
-    "monaco-editor": "^0.53.0",
+    "mermaid": "^11.12.1",
+    "monaco-editor": "^0.54.0",
     "nanotar": "^0.2.0",
     "pptxgenjs": "^4.0.1",
     "prettier": "^3.6.2",
     "recordrtc": "^5.6.2",
-    "shiki": "^3.13.0",
-    "shiki-magic-move": "^1.2.0",
+    "shiki": "^3.15.0",
+    "shiki-magic-move": "^1.2.1",
     "typescript": "^5.9.3",
-    "unocss": "^66.5.4",
-    "vue": "^3.5.22",
+    "unocss": "^66.5.5",
+    "vue": "^3.5.24",
     "vue-router": "^4.6.3",
     "yaml": "^2.8.1",
-    "@slidev/parser": "52.6.0",
-    "@slidev/types": "52.6.0"
+    "@slidev/parser": "52.8.0",
+    "@slidev/types": "52.8.0"
   },
   "devDependencies": {
-    "vite": "^7.1.12"
+    "vite": "^7.2.2"
   }
 }

package/setup/code-runners.ts

@@ -5,6 +5,7 @@ import deps from '#slidev/monaco-run-deps'
 import setups from '#slidev/setups/code-runners'
 import { createSingletonPromise } from '@antfu/utils'
 import { ref } from 'vue'
+import { configs } from '../env'
 
 export default createSingletonPromise(async () => {
   const runners: Record<string, CodeRunner> = {
@@ -63,6 +64,7 @@ function runJavaScript(code: string): CodeRunnerOutputs {
   vmConsole.clear = () => result.value.length = 0
   try {
     const safeJS = `return async (console, __slidev_import, __slidev_on_error) => {
+    ${configs.monacoRunUseStrict ? `"use strict";` : ''}
       try {
         ${sanitizeJS(code)}
       } catch (e) {

package/state/storage.ts

@@ -17,11 +17,6 @@ export const disableTransition = ref(false)
 
 export const shortcutsEnabled = ref(true)
 
-/**
- * Whether the keyboard shortcuts are enabled. Readonly,
- * use `lockShortcuts` and `releaseShortcuts` to modify.
- */
-
 // Use a locking mechanism to support multiple simultaneous locks
 // and avoid race conditions. Race conditions may occur, for example,
 // when locking shortcuts on editor focus and moving from one editor