@slidev/client 52.15.2 → 52.17.0

package/internals/NoteEditable.vue

@@ -131,10 +131,9 @@ watch(
     v-else
     ref="inputEl"
     v-model="note"
-    class="prose dark:prose-invert resize-none overflow-auto outline-none bg-transparent block border-primary border-2"
-    style="line-height: 1.75;"
+    class="prose dark:prose-invert resize-none overflow-auto outline-none bg-transparent block border-primary border-2 slidev-note placeholder:op25"
     :style="[props.style, inputHeight != null ? { height: `${inputHeight}px` } : {}]"
-    :class="props.class"
+    :class="[props.class, note ? '' : 'italic']"
     :placeholder="placeholder"
     @keydown.esc="editing = false"
     @keydown="onKeyDown"

package/internals/PrintSlideClick.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { SlidevContextNav } from '../composables/useNav'
-import { GlobalBottom, GlobalTop } from '#slidev/global-layers'
 import { provideLocal } from '@vueuse/core'
 import { computed, reactive, shallowRef, useTemplateRef } from 'vue'
+import { GlobalBottom, GlobalTop } from '#slidev/global-layers'
 import { injectionSlideElement, injectionSlidevContext } from '../constants'
 import { configs, slideHeight, slideWidth } from '../env'
 import { getSlideClass } from '../utils'

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/internals/SideEditor.vue

@@ -3,6 +3,7 @@ import { throttledWatch, useEventListener } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import { useNav } from '../composables/useNav'
 import { useDynamicSlideInfo } from '../composables/useSlideInfo'
+import { parseSideEditorContent } from '../logic/sideEditor'
 import { activeElement, editorHeight, editorWidth, isInputting, showEditor, isEditorVertical as vertical } from '../state'
 import IconButton from './IconButton.vue'
 import ShikiEditor from './ShikiEditor.vue'
@@ -11,8 +12,6 @@ const props = defineProps<{
   resize?: boolean
 }>()
 
-const RE_FRONTMATTER_BLOCK = /^---\n([\s\S]*?)\n---\n/
-
 const { currentSlideNo, openInEditor } = useNav()
 
 const tab = ref<'content' | 'note'>('content')
@@ -38,11 +37,7 @@ watch(
 async function save() {
   dirty.value = false
 
-  let frontmatterRaw: string | undefined
-  const contentOnly = content.value.trim().replace(RE_FRONTMATTER_BLOCK, (_, f) => {
-    frontmatterRaw = f
-    return ''
-  })
+  const { content: contentOnly, frontmatterRaw } = parseSideEditorContent(content.value)
 
   await update({
     note: note.value || undefined,

package/internals/SlideWrapper.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
 import type { CSSProperties, PropType } from 'vue'
-import { SlideBottom, SlideTop } from '#slidev/global-layers'
 import { provideLocal } from '@vueuse/core'
 import { computed, ref, toRef } from 'vue'
+import { SlideBottom, SlideTop } from '#slidev/global-layers'
 import { injectionClicksContext, injectionCurrentPage, injectionFrontmatter, injectionRenderContext, injectionRoute, injectionSlideZoom } from '../constants'
 import { configs } from '../env'
 import { getSlideClass } from '../utils'

package/internals/SlidesShow.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { SlideRoute } from '@slidev/types'
-import { GlobalBottom, GlobalTop } from '#slidev/global-layers'
 import { recomputeAllPoppers } from 'floating-vue'
 import { computed, shallowRef, TransitionGroup, watchEffect } from 'vue'
+import { GlobalBottom, GlobalTop } from '#slidev/global-layers'
 import { createFixedClicks } from '../composables/useClicks'
 import { useNav } from '../composables/useNav'
 import { usePreloadImages } from '../composables/usePreloadImages'

package/logic/sideEditor.ts

@@ -0,0 +1,14 @@
+const RE_FRONTMATTER_BLOCK = /^---\n([\s\S]*?)\n---(?:\n|$)/
+
+export function parseSideEditorContent(content: string) {
+  let frontmatterRaw: string | undefined
+  const contentOnly = content.trim().replace(RE_FRONTMATTER_BLOCK, (_, f) => {
+    frontmatterRaw = f
+    return ''
+  })
+
+  return {
+    content: contentOnly,
+    frontmatterRaw,
+  }
+}

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

@@ -1,8 +1,9 @@
 import type { SlideRoute } from '@slidev/types'
-import { slides } from '#slidev/slides'
 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,8 +20,7 @@ export function getSlidePath(
 ) {
   if (typeof route === 'number' || typeof route === 'string')
     route = getSlide(route)!
-  const no = route.meta.slide?.frontmatter.routeAlias ?? route.no
-  return exporting ? `/export/${no}` : presenter ? `/presenter/${no}` : `/${no}`
+  return getSlideRoutePath(route, presenter, exporting)
 }
 
 export function useIsSlideActive() {

package/modules/mermaid.ts

@@ -1,7 +1,7 @@
-import mermaidRenderers from '#slidev/setups/mermaid-renderer'
 import { clearUndefined } from '@antfu/utils'
 import lz from 'lz-string'
 import mermaid from 'mermaid/dist/mermaid.esm.mjs'
+import mermaidRenderers from '#slidev/setups/mermaid-renderer'
 import { makeId } from '../logic/utils'
 import setupMermaid from '../setup/mermaid'
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "52.15.2",
+  "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.20",
+    "@iconify-json/carbon": "^1.2.24",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.4",
-    "@shikijs/engine-javascript": "^4.0.2",
-    "@shikijs/monaco": "^4.0.2",
-    "@shikijs/vitepress-twoslash": "^4.0.2",
+    "@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": "^2.1.13",
-    "@unocss/extractor-mdc": "^66.6.8",
-    "@unocss/preset-mini": "^66.6.8",
-    "@unocss/reset": "^66.6.8",
-    "@vueuse/core": "^14.2.1",
-    "@vueuse/math": "^14.2.1",
+    "@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.2.0",
+    "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.3.0",
-    "katex": "^0.16.45",
+    "fuse.js": "^7.4.2",
+    "katex": "^0.17.0",
     "lz-string": "^1.5.0",
-    "mermaid": "^11.14.0",
+    "mermaid": "^11.16.0",
     "monaco-editor": "^0.55.1",
     "nanotar": "^0.3.0",
     "pptxgenjs": "^4.0.1",
     "recordrtc": "^5.6.2",
-    "shiki": "^4.0.2",
-    "shiki-magic-move": "^1.3.0",
-    "typescript": "^5.9.3",
-    "unocss": "^66.6.8",
-    "vue": "^3.5.33",
-    "vue-router": "^5.0.6",
-    "yaml": "^2.8.3",
-    "@slidev/types": "52.15.2",
-    "@slidev/parser": "52.15.2"
+    "shiki": "^4.3.1",
+    "typescript": "^6.0.3",
+    "unocss": "^66.7.5",
+    "vue": "^3.5.39",
+    "vue-router": "^5.1.0",
+    "yaml": "^2.9.0",
+    "@slidev/parser": "52.17.0",
+    "@slidev/types": "52.17.0"
   },
   "devDependencies": {
-    "vite": "^8.0.10"
+    "vite": "^8.1.3"
   }
 }