@slidev/client 52.7.0 → 52.9.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/internals/QuickOverview.vue

@@ -84,7 +84,7 @@ useEventListener('keypress', (e) => {
   keyboardBuffer.value += String(num)
 
   // beyond the number of slides, reset
-  if (+keyboardBuffer.value >= slides.value.length) {
+  if (+keyboardBuffer.value > slides.value.length) {
     keyboardBuffer.value = ''
     return
   }

package/internals/ShikiEditor.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { getHighlighter } from '#slidev/shiki'
 import { ref, shallowRef } from 'vue'
 import { useIME } from '../composables/useIME'
 
@@ -11,14 +10,21 @@ const { composingContent, onInput, onCompositionEnd } = useIME(content)
 
 const textareaEl = ref<HTMLTextAreaElement | null>(null)
 
-const highlight = shallowRef<Awaited<ReturnType<typeof getHighlighter>> | null>(null)
-getHighlighter().then(h => highlight.value = h)
+const highlight = shallowRef<((code: string) => string) | null>(null)
+import('../setup/shiki').then(async (m) => {
+  const { getEagerHighlighter, defaultHighlightOptions } = await m.default()
+  const highlighter = await getEagerHighlighter()
+  highlight.value = (code: string) => highlighter.codeToHtml(code, {
+    ...defaultHighlightOptions,
+    lang: 'markdown',
+  })
+})
 </script>
 
 <template>
   <div class="absolute left-3 right-0 inset-y-2 font-mono overflow-x-hidden overflow-y-auto cursor-text">
     <div v-if="highlight" class="relative w-full h-max min-h-full">
-      <div class="relative w-full h-max" v-html="`${highlight(composingContent, 'markdown')}&nbsp;`" />
+      <div class="relative w-full h-max" v-html="`${highlight(composingContent)}&nbsp;`" />
       <textarea
         ref="textareaEl" v-model="composingContent" :placeholder="props.placeholder"
         class="absolute inset-0 resize-none text-transparent bg-transparent focus:outline-none caret-black dark:caret-white overflow-y-hidden"

package/internals/SlideContainer.vue

@@ -52,7 +52,6 @@ const contentStyle = computed(() => ({
   ...props.contentStyle,
   'height': `${slideHeight.value}px`,
   'width': `${slideWidth.value}px`,
-  'transform': `translate(-50%, -50%) scale(${scale.value})`,
   '--slidev-slide-scale': scale.value,
 }))
 
@@ -117,6 +116,8 @@ const snapshot = computed(() => {
 }
 
 .slidev-slide-content {
+  --slidev-slide-container-scale: var(--slidev-slide-scale);
+  transform: translate(-50%, -50%) scale(var(--slidev-slide-scale));
   @apply absolute left-1/2 top-1/2 overflow-hidden bg-main;
 }
 </style>

package/internals/SlideWrapper.vue

@@ -32,19 +32,9 @@ provideLocal(injectionRenderContext, ref(props.renderContext))
 provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
 provideLocal(injectionSlideZoom, zoom)
 
-const zoomStyle = computed(() => {
-  return zoom.value === 1
-    ? undefined
-    : {
-        width: `${100 / zoom.value}%`,
-        height: `${100 / zoom.value}%`,
-        transformOrigin: 'top left',
-        transform: `scale(${zoom.value})`,
-      }
-})
 const style = computed<CSSProperties>(() => ({
-  ...zoomStyle.value,
   'user-select': configs.selectable ? undefined : 'none',
+  '--slidev-slide-zoom-scale': zoom.value === 1 ? undefined : zoom.value,
 }))
 </script>
 
@@ -69,5 +59,14 @@ const style = computed<CSSProperties>(() => ({
 .slidev-page {
   position: absolute;
   inset: 0;
+
+  /* Zoom handling */
+  --slidev-slide-zoom-scale: 1;
+  width: calc(100% / var(--slidev-slide-zoom-scale));
+  height: calc(100% / var(--slidev-slide-zoom-scale));
+  transform-origin: top left;
+  transform: scale(var(--slidev-slide-zoom-scale));
+  /* slide scale = container scale * zoom scale */
+  --slidev-slide-scale: calc(var(--slidev-slide-container-scale) * var(--slidev-slide-zoom-scale));
 }
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "52.7.0",
+  "version": "52.9.0",
   "description": "Presentation slides for developers",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -38,10 +38,11 @@
     "@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",
+    "ansis": "^4.2.0",
     "drauu": "^0.4.3",
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
@@ -57,12 +58,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.9.0",
+    "@slidev/types": "52.9.0"
   },
   "devDependencies": {
     "vite": "^7.2.2"

package/setup/code-runners.ts

@@ -1,6 +1,6 @@
 import type { CodeRunner, CodeRunnerOutput, CodeRunnerOutputs, CodeRunnerOutputText } from '@slidev/types'
+import type { CodeToHastOptions } from 'shiki'
 import type ts from 'typescript'
-
 import deps from '#slidev/monaco-run-deps'
 import setups from '#slidev/setups/code-runners'
 import { createSingletonPromise } from '@antfu/utils'
@@ -15,8 +15,16 @@ export default createSingletonPromise(async () => {
     ts: runTypeScript,
   }
 
-  const { getHighlighter } = await import('#slidev/shiki')
-  const highlight = await getHighlighter()
+  const { defaultHighlightOptions, getEagerHighlighter } = await (await import('./shiki')).default()
+
+  const highlighter = await getEagerHighlighter()
+  const highlight = (code: string, lang: string, options?: Partial<CodeToHastOptions>) => {
+    return highlighter.codeToHtml(code, {
+      ...defaultHighlightOptions,
+      lang,
+      ...options,
+    })
+  }
 
   const run = async (code: string, lang: string, options: Record<string, unknown>): Promise<CodeRunnerOutputs> => {
     try {

package/setup/monaco.ts

@@ -2,6 +2,7 @@ import type { MonacoSetupReturn } from '@slidev/types'
 import configs from '#slidev/configs'
 import setups from '#slidev/setups/monaco'
 import { createSingletonPromise } from '@antfu/utils'
+import { shikiToMonaco } from '@shikijs/monaco'
 import { setupTypeAcquisition } from '@typescript/ata'
 import * as monaco from 'monaco-editor'
 
@@ -83,14 +84,16 @@ const setup = createSingletonPromise(async () => {
       })
     : () => { }
 
+  const { getEagerHighlighter, languageNames, themeOption } = await (await import('./shiki')).default()
+
   monaco.languages.register({ id: 'vue' })
   monaco.languages.register({ id: 'html' })
   monaco.languages.register({ id: 'css' })
   monaco.languages.register({ id: 'typescript' })
   monaco.languages.register({ id: 'javascript' })
-
-  const { shiki, languages, themes, shikiToMonaco } = await import('#slidev/shiki')
-  const highlighter = await shiki
+  for (const lang of languageNames) {
+    monaco.languages.register({ id: lang })
+  }
 
   const editorOptions: MonacoSetupReturn['editorOptions'] & object = {}
   for (const setup of setups) {
@@ -111,21 +114,18 @@ const setup = createSingletonPromise(async () => {
   })
 
   // Use Shiki to highlight Monaco
+  const highlighter = await getEagerHighlighter()
   shikiToMonaco(highlighter, monaco)
-  if (typeof themes === 'string') {
-    monaco.editor.setTheme(themes)
+  if (typeof themeOption === 'string') {
+    monaco.editor.setTheme(themeOption)
   }
   else {
     watchEffect(() => {
       monaco.editor.setTheme(isDark.value
-        ? themes.dark || 'vitesse-dark'
-        : themes.light || 'vitesse-light')
+        ? themeOption.dark || 'vitesse-dark'
+        : themeOption.light || 'vitesse-light')
     })
   }
-  // Register all languages, otherwise Monaco will not highlight them
-  for (const lang of languages) {
-    monaco.languages.register({ id: lang })
-  }
 
   return {
     monaco,

package/setup/shiki-options.ts

@@ -0,0 +1,125 @@
+// This module also runs in the Node.js environment
+
+import type { ResolvedSlidevUtils, ShikiContext, ShikiSetupReturn } from '@slidev/types'
+import type { LanguageInput, ThemeInput, ThemeRegistrationAny } from 'shiki'
+import { objectMap } from '@antfu/utils'
+import { red, yellow } from 'ansis'
+import { bundledLanguages, bundledThemes } from 'shiki'
+
+export const shikiContext: ShikiContext = {
+  /** @deprecated */
+  loadTheme() {
+    throw new Error('`loadTheme` is no longer supported.')
+  },
+}
+
+export function resolveShikiOptions(options: (ShikiSetupReturn | void)[]) {
+  const mergedOptions: Record<string, any> = Object.assign({}, ...options)
+
+  if ('theme' in mergedOptions && 'themes' in mergedOptions)
+    delete mergedOptions.theme
+
+  // Rename theme to themes when provided in multiple themes format, but exclude when it's a theme object.
+  if (mergedOptions.theme && typeof mergedOptions.theme !== 'string' && !mergedOptions.theme.name && !mergedOptions.theme.tokenColors) {
+    mergedOptions.themes = mergedOptions.theme
+    delete mergedOptions.theme
+  }
+
+  // No theme at all, apply the default
+  if (!mergedOptions.theme && !mergedOptions.themes) {
+    mergedOptions.themes = {
+      dark: 'vitesse-dark',
+      light: 'vitesse-light',
+    }
+  }
+
+  if (mergedOptions.themes)
+    mergedOptions.defaultColor = false
+
+  const themeOption = extractThemeName(mergedOptions.theme) || extractThemeNames(mergedOptions.themes || {})
+  const themeNames = typeof themeOption === 'string' ? [themeOption] : Object.values(themeOption)
+
+  const themeInput: Record<string, ThemeInput> = Object.assign({}, bundledThemes)
+  if (typeof mergedOptions.theme === 'object' && mergedOptions.theme?.name) {
+    themeInput[mergedOptions.theme.name] = mergedOptions.theme
+  }
+  if (mergedOptions.themes) {
+    for (const theme of Object.values<ThemeRegistrationAny | string>(mergedOptions.themes)) {
+      if (typeof theme === 'object' && theme?.name) {
+        themeInput[theme.name] = theme
+      }
+    }
+  }
+
+  const languageNames = new Set<string>(['markdown', 'vue', 'javascript', 'typescript', 'html', 'css'])
+  const languageInput: Record<string, LanguageInput> = Object.assign({}, bundledLanguages)
+  for (const option of options) {
+    const langs = option?.langs
+    if (langs == null)
+      continue
+    if (Array.isArray(langs)) {
+      for (const lang of langs.flat()) {
+        if (typeof lang === 'function') {
+          console.error(red('[slidev] `langs` option returned by setup/shiki.ts cannot be an array containing functions. Please use the record format (`{ [name]: () => {...} }`) instead.'))
+        }
+        else if (typeof lang === 'string') {
+          // a name of a Shiki built-in language
+          // which can be loaded on demand without overhead, so all built-in languages are available.
+          // Only need to include them explicitly in browser environment.
+          languageNames.add(lang)
+        }
+        else if (lang.name) {
+          // a custom grammar object
+          languageNames.add(lang.name)
+          languageInput[lang.name] = lang
+          for (const alias of lang.aliases || []) {
+            languageNames.add(alias)
+            languageInput[alias] = lang
+          }
+        }
+        else {
+          console.error(red('[slidev] Invalid lang option in shiki setup:'), lang)
+        }
+      }
+    }
+    else if (typeof langs === 'object') {
+      // a map from name to loader or grammar object
+      for (const name of Object.keys(langs))
+        languageNames.add(name)
+      Object.assign(languageInput, langs)
+    }
+    else {
+      console.error(red('[slidev] Invalid langs option in shiki setup:'), langs)
+    }
+  }
+
+  return {
+    options: mergedOptions as ResolvedSlidevUtils['shikiOptions'],
+    themeOption,
+    themeNames,
+    themeInput,
+    languageNames,
+    languageInput,
+  }
+}
+
+function extractThemeName(theme?: ThemeRegistrationAny | string): string | undefined {
+  if (!theme)
+    return undefined
+  if (typeof theme === 'string')
+    return theme
+  if (!theme.name)
+    console.warn(yellow('[slidev] Theme'), theme, yellow('does not have a name, which may cause issues.'))
+  return theme.name
+}
+
+function extractThemeNames(themes?: Record<string, ThemeRegistrationAny | string>): Record<string, string> {
+  if (!themes)
+    return {}
+  return objectMap(themes, (key, theme) => {
+    const name = extractThemeName(theme)
+    if (!name)
+      return undefined
+    return [key, name]
+  })
+}

package/setup/shiki.ts

@@ -0,0 +1,30 @@
+import setups from '#slidev/setups/shiki'
+import { createSingletonPromise } from '@antfu/utils'
+import { createJavaScriptRegexEngine } from '@shikijs/engine-javascript'
+import { createdBundledHighlighter, createSingletonShorthands } from 'shiki/core'
+import { resolveShikiOptions, shikiContext } from './shiki-options'
+
+export default createSingletonPromise(async () => {
+  const { options, languageNames, languageInput, themeOption, themeNames, themeInput } = resolveShikiOptions(await Promise.all(setups.map(setup => setup(shikiContext))))
+
+  const createHighlighter = createdBundledHighlighter<string, string>({
+    engine: createJavaScriptRegexEngine,
+    langs: languageInput,
+    themes: themeInput,
+  })
+  const shorthands = createSingletonShorthands(createHighlighter)
+  const getEagerHighlighter = createSingletonPromise(() => shorthands.getSingletonHighlighter({
+    ...options,
+    langs: [...languageNames],
+    themes: themeNames,
+  }))
+
+  return {
+    defaultHighlightOptions: options,
+    getEagerHighlighter,
+    shorthands,
+    languageNames,
+    themeNames,
+    themeOption,
+  }
+})