@slidev/client 52.16.0 → 52.17.0

package/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { watchEffect } from 'vue'
 import { themeVars } from './env'
+import PwaIndicator from './internals/PwaIndicator.vue'
 import setupRoot from './setup/root'
 
 setupRoot()
@@ -13,4 +14,5 @@ watchEffect(() => {
 
 <template>
   <RouterView />
+  <PwaIndicator v-if="__SLIDEV_FEATURE_PWA__" />
 </template>

package/builtin/AutoFitText.vue

@@ -1,9 +1,8 @@
 <!--
-[Experimental]
-
-Think this component as the TextBox you that will see
+Think of this component as the TextBox that you will see
 in PowerPoint or Keynote. It will automatically resize
-the font size based on it's content to fit them in.
+the font size based on its content to fit them in,
+powered by fitty (https://github.com/rikschennink/fitty).
 
 Usage:
 
@@ -11,12 +10,14 @@ Usage:
 
 or
 
-<AutoFitText :max="80" :min="100" v-model="text"/>
+<AutoFitText :max="100" :min="30" v-model="text"/>
 -->
 
 <script setup lang="ts">
-import { useElementSize, useVModel } from '@vueuse/core'
-import { computed, ref, watch } from 'vue'
+import type { FittyInstance } from 'fitty'
+import { useResizeObserver, useVModel } from '@vueuse/core'
+import fitty from 'fitty'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 const props = defineProps({
   modelValue: {
@@ -28,40 +29,59 @@ const props = defineProps({
   min: {
     default: 30,
   },
+  multiLine: {
+    type: Boolean,
+    default: true,
+  },
 })
 
-const emit = defineEmits<{
-  (e: any): void
-}>()
-const container = ref<HTMLDivElement>()
-const inner = ref<HTMLDivElement>()
-const size = ref(100)
-const fontSize = computed(() => `${size.value}px`)
+const emit = defineEmits(['update:modelValue'])
+
 const value = useVModel(props, 'modelValue', emit)
 
-const containerSize = useElementSize(container)
-const innerSize = useElementSize(inner)
+const container = ref<HTMLDivElement>()
+const inner = ref<HTMLDivElement>()
 
-const wrapLen = ref(0)
-const wrap = ref('nowrap')
+let instance: FittyInstance | undefined
 
-watch([container, value, containerSize.width, innerSize.width], async () => {
-  if (!container.value || innerSize.width.value <= 0)
+function init() {
+  instance?.unsubscribe()
+  instance = undefined
+  if (!inner.value)
     return
-  const ratio = containerSize.width.value / innerSize.width.value
-  if (Number.isNaN(ratio) || ratio <= 0)
+  instance = fitty(inner.value, {
+    minSize: props.min,
+    maxSize: props.max,
+    multiLine: props.multiLine,
+  })
+}
+
+onMounted(() => {
+  init()
+  // Refit once web fonts are loaded, as glyph metrics may change
+  document.fonts?.ready.then(() => instance?.fit())
+})
+
+onUnmounted(() => {
+  instance?.unsubscribe()
+  instance = undefined
+})
+
+watch(() => [props.min, props.max, props.multiLine], init)
+
+// Fitty observes content mutations and window resizes on its own,
+// but not resizes of the container itself
+useResizeObserver(container, () => {
+  if (!container.value || container.value.clientWidth <= 0)
     return
-  let newSize = size.value * (containerSize.width.value / innerSize.width.value)
-  if (newSize < props.min) {
-    wrapLen.value = value.value.length
-    wrap.value = ''
-  }
-  else {
-    if (value.value.length < wrapLen.value)
-      wrap.value = 'nowrap'
-  }
-  newSize = Math.max(props.min, Math.min(props.max, newSize))
-  size.value = newSize
+  // If fitty was initialized while the element was hidden (e.g. on a
+  // preloaded slide), its internal state is invalid and refitting can
+  // never recover, so reinitialize it once the container is visible.
+  // A successful fit always leaves an inline font-size on the element.
+  if (inner.value && !inner.value.style.fontSize)
+    init()
+  else
+    instance?.fit()
 })
 </script>
 
@@ -78,11 +98,10 @@ watch([container, value, containerSize.width, innerSize.width], async () => {
 <style scoped>
 .slidev-auto-fit-text {
   overflow: auto;
-  font-size: v-bind(fontSize);
-  white-space: v-bind(wrap);
 }
 
 .slidev-auto-fit-text-inner {
   display: inline-block;
+  white-space: nowrap;
 }
 </style>

package/composables/usePreloadImages.ts

@@ -1,6 +1,6 @@
 import type { SlideRoute } from '@slidev/types'
 import type { ComputedRef, Ref } from 'vue'
-import { watchEffect } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import configs from '#slidev/configs'
 
 const loaded = new Set<string>()
@@ -14,6 +14,23 @@ function resolveUrl(url: string): string {
   return `${base}${url.startsWith('/') ? url : `/${url}`}`
 }
 
+const RETRY_LIMIT = 2
+const retries = new Map<string, number>()
+
+const preloadedCount = ref(0)
+const totalImagesCount = ref(0)
+
+/**
+ * Progress of slide-image preloading, from 0 to 1 (1 when every preloadable
+ * image in the deck has loaded, or when the deck has no images).
+ */
+export const preloadProgress = computed(() =>
+  totalImagesCount.value === 0 ? 1 : preloadedCount.value / totalImagesCount.value,
+)
+
+/** Whether all preloadable slide images have finished loading. */
+export const preloadComplete = computed(() => preloadProgress.value >= 1)
+
 function preloadImage(url: string): void {
   const resolved = resolveUrl(url)
   if (loaded.has(resolved) || loading.has(resolved))
@@ -23,9 +40,18 @@ function preloadImage(url: string): void {
   img.onload = () => {
     loading.delete(resolved)
     loaded.add(resolved)
+    retries.delete(resolved)
+    preloadedCount.value = loaded.size
   }
   img.onerror = () => {
     loading.delete(resolved)
+    // Retry transient preload failures (e.g. flaky network) instead of silently
+    // giving up; bounded so genuinely-missing assets aren't hammered.
+    const attempts = retries.get(resolved) ?? 0
+    if (attempts < RETRY_LIMIT) {
+      retries.set(resolved, attempts + 1)
+      setTimeout(preloadImage, 1000 * (attempts + 1), url)
+    }
   }
   img.src = resolved
 }
@@ -50,6 +76,19 @@ export function usePreloadImages(
 
   const ahead = (typeof config === 'object' && config?.ahead) || 3
 
+  // Track total preloadable images across the deck for progress reporting
+  watchEffect(() => {
+    const all = slides.value
+    if (!all?.length)
+      return
+    const urls = new Set<string>()
+    for (const route of all) {
+      for (const url of route.meta?.slide?.images ?? [])
+        urls.add(resolveUrl(url))
+    }
+    totalImagesCount.value = urls.size
+  })
+
   // Preload current + prev + next + look-ahead window
   watchEffect(() => {
     const current = currentRoute.value

package/constants.ts

@@ -86,6 +86,7 @@ export const HEADMATTER_FIELDS = [
   'comark',
   'contextMenu',
   'wakeLock',
+  'pwa',
   'seoMeta',
   'notesAutoRuby',
   'magicMoveDuration',

package/internals/PwaIndicator.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { pwaCaching, pwaReady } from '../setup/pwa'
+</script>
+
+<template>
+  <Transition name="slidev-pwa-fade">
+    <div
+      v-if="pwaCaching || pwaReady"
+      class="slidev-pwa-indicator"
+      :class="{ ready: pwaReady }"
+    >
+      <span v-if="pwaCaching">Caching for offline…</span>
+      <span v-else-if="pwaReady">Ready offline</span>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.slidev-pwa-indicator {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 9999;
+  padding: 0.4em 0.75em;
+  border-radius: 0.4em;
+  font-size: 0.75rem;
+  font-family: sans-serif;
+  line-height: 1.4;
+  background: rgba(0, 0, 0, 0.72);
+  color: #ccc;
+  pointer-events: none;
+  user-select: none;
+  backdrop-filter: blur(4px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.slidev-pwa-indicator.ready {
+  color: #7dce82;
+}
+
+.slidev-pwa-fade-enter-active,
+.slidev-pwa-fade-leave-active {
+  transition: opacity 0.35s ease;
+}
+
+.slidev-pwa-fade-enter-from,
+.slidev-pwa-fade-leave-to {
+  opacity: 0;
+}
+</style>

package/logic/slidePath.test.ts

@@ -0,0 +1,29 @@
+import type { SlideRoute } from '@slidev/types'
+import { describe, expect, it } from 'vitest'
+import { getSlideRoutePath } from './slidePath'
+
+function route(no: number, routeAlias?: string): SlideRoute {
+  return {
+    no,
+    meta: {
+      slide: {
+        frontmatter: {
+          routeAlias,
+        },
+      },
+    },
+  } as unknown as SlideRoute
+}
+
+describe('getSlideRoutePath', () => {
+  it('returns router paths without Vite base', () => {
+    expect(getSlideRoutePath(route(2), false)).toBe('/2')
+    expect(getSlideRoutePath(route(2), true)).toBe('/presenter/2')
+    expect(getSlideRoutePath(route(2), false, true)).toBe('/export/2')
+  })
+
+  it('uses route aliases', () => {
+    expect(getSlideRoutePath(route(2, 'intro'), false)).toBe('/intro')
+    expect(getSlideRoutePath(route(2, 'intro'), true)).toBe('/presenter/intro')
+  })
+})

package/logic/slidePath.ts

@@ -0,0 +1,10 @@
+import type { SlideRoute } from '@slidev/types'
+
+export function getSlideRoutePath(
+  route: SlideRoute,
+  presenter: boolean,
+  exporting: boolean = false,
+) {
+  const no = route.meta.slide?.frontmatter.routeAlias ?? route.no
+  return exporting ? `/export/${no}` : presenter ? `/presenter/${no}` : `/${no}`
+}

package/logic/slides.ts

@@ -3,6 +3,7 @@ import { tryOnMounted } from '@vueuse/core'
 import { computed, watch } from 'vue'
 import { slides } from '#slidev/slides'
 import { useSlideContext } from '../context'
+import { getSlideRoutePath } from './slidePath'
 
 export { slides }
 
@@ -19,9 +20,7 @@ export function getSlidePath(
 ) {
   if (typeof route === 'number' || typeof route === 'string')
     route = getSlide(route)!
-  const no = route.meta.slide?.frontmatter.routeAlias ?? route.no
-  const path = exporting ? `export/${no}` : presenter ? `presenter/${no}` : `${no}`
-  return `${import.meta.env.BASE_URL}${path}`
+  return getSlideRoutePath(route, presenter, exporting)
 }
 
 export function useIsSlideActive() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "52.16.0",
+  "version": "52.17.0",
   "description": "Presentation slides for developers",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -30,44 +30,45 @@
   "dependencies": {
     "@antfu/utils": "^9.3.0",
     "@fix-webm-duration/fix": "^1.0.1",
-    "@iconify-json/carbon": "^1.2.22",
+    "@iconify-json/carbon": "^1.2.24",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.4",
-    "@shikijs/engine-javascript": "^4.2.0",
-    "@shikijs/magic-move": "^4.2.0",
-    "@shikijs/monaco": "^4.2.0",
-    "@shikijs/vitepress-twoslash": "^4.2.0",
+    "@shikijs/engine-javascript": "^4.3.1",
+    "@shikijs/magic-move": "^4.3.1",
+    "@shikijs/monaco": "^4.3.1",
+    "@shikijs/vitepress-twoslash": "^4.3.1",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.8",
-    "@unhead/vue": "^3.1.1",
-    "@unocss/extractor-mdc": "^66.7.0",
-    "@unocss/preset-mini": "^66.7.0",
-    "@unocss/reset": "^66.7.0",
+    "@unhead/vue": "^3.1.7",
+    "@unocss/extractor-mdc": "^66.7.5",
+    "@unocss/preset-mini": "^66.7.5",
+    "@unocss/reset": "^66.7.5",
     "@vueuse/core": "^14.3.0",
     "@vueuse/math": "^14.3.0",
     "@vueuse/motion": "^3.0.3",
     "ansis": "^4.3.1",
     "drauu": "^1.0.0",
     "file-saver": "^2.0.5",
+    "fitty": "^2.4.2",
     "floating-vue": "^5.2.2",
-    "fuse.js": "^7.4.1",
+    "fuse.js": "^7.4.2",
     "katex": "^0.17.0",
     "lz-string": "^1.5.0",
-    "mermaid": "^11.15.0",
+    "mermaid": "^11.16.0",
     "monaco-editor": "^0.55.1",
     "nanotar": "^0.3.0",
     "pptxgenjs": "^4.0.1",
     "recordrtc": "^5.6.2",
-    "shiki": "^4.2.0",
+    "shiki": "^4.3.1",
     "typescript": "^6.0.3",
-    "unocss": "^66.7.0",
-    "vue": "^3.5.35",
+    "unocss": "^66.7.5",
+    "vue": "^3.5.39",
     "vue-router": "^5.1.0",
     "yaml": "^2.9.0",
-    "@slidev/parser": "52.16.0",
-    "@slidev/types": "52.16.0"
+    "@slidev/parser": "52.17.0",
+    "@slidev/types": "52.17.0"
   },
   "devDependencies": {
-    "vite": "^8.0.16"
+    "vite": "^8.1.3"
   }
 }

package/setup/main.ts

@@ -2,12 +2,13 @@ import type { AppContext } from '@slidev/types'
 import type { App } from 'vue'
 import TwoSlashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import { createHead } from '@unhead/vue/client'
-import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import { createMemoryHistory, createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import setups from '#slidev/setups/main'
 import { createVClickDirectives } from '../modules/v-click'
 import { createVDragDirective } from '../modules/v-drag'
 import { createVMarkDirective } from '../modules/v-mark'
 import { createVMotionDirectives } from '../modules/v-motion'
+import { setupPWA } from '../setup/pwa'
 import setupRoutes from '../setup/routes'
 import '../styles'
 
@@ -21,9 +22,11 @@ export default async function setupMain(app: App) {
   window.addEventListener('resize', setMaxHeight)
 
   const router = createRouter({
-    history: __SLIDEV_HASH_ROUTE__
-      ? createWebHashHistory(import.meta.env.BASE_URL)
-      : createWebHistory(import.meta.env.BASE_URL),
+    history: __SLIDEV_MEMORY_ROUTE__
+      ? createMemoryHistory(import.meta.env.BASE_URL)
+      : __SLIDEV_HASH_ROUTE__
+        ? createWebHashHistory(import.meta.env.BASE_URL)
+        : createWebHistory(import.meta.env.BASE_URL),
     routes: setupRoutes(),
   })
 
@@ -42,4 +45,7 @@ export default async function setupMain(app: App) {
 
   for (const setup of setups)
     await setup(context)
+
+  if (__SLIDEV_FEATURE_PWA__)
+    setupPWA()
 }

package/setup/pwa.ts

@@ -0,0 +1,28 @@
+import { ref } from 'vue'
+
+export const pwaCaching = ref(false)
+export const pwaReady = ref(false)
+
+export async function setupPWA() {
+  if (!__SLIDEV_FEATURE_PWA__)
+    return
+
+  const { registerSW } = await import('virtual:pwa-register')
+
+  pwaCaching.value = true
+
+  registerSW({
+    immediate: true,
+    onOfflineReady() {
+      pwaCaching.value = false
+      pwaReady.value = true
+      // Auto-dismiss "ready" indicator after 4 seconds
+      setTimeout(() => {
+        pwaReady.value = false
+      }, 4000)
+    },
+    onRegisteredSW(_swUrl, _registration) {
+      // SW registered; caching is in progress until onOfflineReady fires
+    },
+  })
+}

package/shim.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="vite-plugin-pwa/client" />
+
 declare module '*.md' {
   // with unplugin-vue-markdown, markdowns can be treat as Vue components
   import type { ComponentOptions } from 'vue'