@slidev/client 52.19.1 → 52.20.0

package/builtin/CodeBlockWrapper.vue

@@ -78,13 +78,19 @@ onMounted(() => {
     return props.finally === 'last' ? props.ranges.at(-1) : props.finally.toString()
   })
 
+  let hiddenByRange = false
+
   watchEffect(() => {
     if (!el.value)
       return
 
     let rangeStr = props.ranges[index.value] ?? finallyRange.value
     const hide = rangeStr === 'hide'
-    el.value.classList.toggle(CLASS_VCLICK_HIDDEN, hide)
+    // Only toggle the class when a `hide` range set it, so a click directive on the same element keeps control
+    if (hide || hiddenByRange) {
+      el.value.classList.toggle(CLASS_VCLICK_HIDDEN, hide)
+      hiddenByRange = hide
+    }
     if (hide)
       rangeStr = props.ranges[index.value + 1] ?? finallyRange.value
 

package/builtin/KaTexBlockWrapper.vue

@@ -68,13 +68,19 @@ onMounted(() => {
     return props.finally === 'last' ? props.ranges.at(-1) : props.finally.toString()
   })
 
+  let hiddenByRange = false
+
   watchEffect(() => {
     if (!el.value)
       return
 
     let rangeStr = props.ranges[index.value] ?? finallyRange.value
     const hide = rangeStr === 'hide'
-    el.value.classList.toggle(CLASS_VCLICK_HIDDEN, hide)
+    // Only toggle the class when a `hide` range set it, so a click directive on the same element keeps control
+    if (hide || hiddenByRange) {
+      el.value.classList.toggle(CLASS_VCLICK_HIDDEN, hide)
+      hiddenByRange = hide
+    }
     if (hide)
       rangeStr = props.ranges[index.value + 1] ?? finallyRange.value
 

package/builtin/Tweet.vue

@@ -4,14 +4,17 @@ A simple wrapper for embedded Tweet
 Usage:
 
 <Tweet id="20" />
+<Tweet url="https://x.com/jack/status/20" />
 -->
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { isDark } from '../logic/dark'
+import { resolveTweetId } from '../logic/tweet'
 
 const props = defineProps<{
-  id: string | number
+  id?: string | number
+  url?: string
   scale?: string | number
   conversation?: string
   cards?: 'hidden' | 'visible'
@@ -23,6 +26,14 @@ const loaded = ref(false)
 const tweetNotFound = ref(false)
 
 async function create(retries = 10) {
+  const tweetId = resolveTweetId(props.id, props.url)
+  if (!tweetId) {
+    loaded.value = true
+    tweetNotFound.value = true
+    console.error('Tweet requires a valid id or X post URL.')
+    return
+  }
+
   // @ts-expect-error global
   if (!window.twttr?.widgets?.createTweet) {
     if (retries <= 0)
@@ -32,7 +43,7 @@ async function create(retries = 10) {
   }
   // @ts-expect-error global
   const element = await window.twttr.widgets.createTweet(
-    props.id.toString(),
+    tweetId,
     tweet.value,
     {
       theme: isDark.value ? 'dark' : 'light',
@@ -56,7 +67,7 @@ onMounted(() => {
       <div v-if="!loaded || tweetNotFound" class="w-30 h-30 my-10px bg-gray-400 bg-opacity-10 rounded-lg flex opacity-50">
         <div class="m-auto animate-pulse text-4xl">
           <div class="i-carbon:logo-twitter" />
-          <span v-if="tweetNotFound">Could not load tweet with id="{{ props.id }}"</span>
+          <span v-if="tweetNotFound">Could not load tweet</span>
         </div>
       </div>
     </div>

package/layouts/iframe-left.vue

@@ -13,9 +13,9 @@ const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`)
   <div class="grid grid-cols-2 w-full h-full">
     <div relative :style="{ width: scaleInvertPercent, height: scaleInvertPercent }">
       <iframe
-        id="frame" class="w-full h-full"
+        id="frame" class="slidev-layout-iframe"
         :src="url"
-        :style="scale ? { transform: `scale(${scale})`, transformOrigin: 'top left' } : {}"
+        :style="scale ? { '--slidev-iframe-scale': scale } : {}"
       />
     </div>
     <div class="slidev-layout default" v-bind="$attrs">

package/layouts/iframe-right.vue

@@ -16,9 +16,9 @@ const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`)
     </div>
     <div relative :style="{ width: scaleInvertPercent, height: scaleInvertPercent }">
       <iframe
-        id="frame" class="w-full h-full"
+        id="frame" class="slidev-layout-iframe"
         :src="url"
-        :style="scale ? { transform: `scale(${scale})`, transformOrigin: 'top left' } : {}"
+        :style="scale ? { '--slidev-iframe-scale': scale } : {}"
       />
     </div>
   </div>

package/layouts/iframe.vue

@@ -13,9 +13,9 @@ const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`)
   <div class="h-full w-full">
     <div relative :style="{ width: scaleInvertPercent, height: scaleInvertPercent }">
       <iframe
-        id="frame" class="w-full h-full"
+        id="frame" class="slidev-layout-iframe"
         :src="url"
-        :style="scale ? { transform: `scale(${scale})`, transformOrigin: 'top left' } : {}"
+        :style="scale ? { '--slidev-iframe-scale': scale } : {}"
       />
     </div>
   </div>

package/logic/recording.ts

@@ -106,6 +106,11 @@ export function useRecording() {
   async function startCameraStream() {
     await ensureDevicesListPermissions()
     await nextTick()
+
+    // Stopped tracks can never be resumed, the whole stream has to be requested again
+    if (streamCamera.value?.getTracks().some(track => track.readyState === 'ended'))
+      closeStream(streamCamera)
+
     if (!streamCamera.value) {
       if (currentCamera.value === 'none' && currentMic.value === 'none')
         return
@@ -206,7 +211,9 @@ export function useRecording() {
       const blob = recorderSlides.value!.getBlob()
       downloadBlob(blob, duration, getFilename('screen', config.mimeType))
       closeStream(streamCapture)
-      closeStream(streamSlides)
+      // `streamSlides` only borrows its tracks from `streamCapture` and `streamCamera`,
+      // stopping them here would also end the mic still used by the camera stream
+      streamSlides.value = undefined
       recorderSlides.value = undefined
     })
   }

package/logic/tweet.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest'
+import { resolveTweetId } from './tweet'
+
+describe('resolveTweetId', () => {
+  it('keeps the existing id input', () => {
+    expect(resolveTweetId(123, undefined)).toBe('123')
+    expect(resolveTweetId(' 456 ', undefined)).toBe('456')
+  })
+
+  it('prefers id when both inputs are present', () => {
+    expect(resolveTweetId('123', 'https://x.com/slidevjs/status/456')).toBe('123')
+  })
+
+  it.each([
+    'https://x.com/slidevjs/status/123',
+    'https://www.x.com/slidevjs/status/123?s=20',
+    'https://twitter.com/slidevjs/status/123',
+    'https://mobile.twitter.com/slidevjs/status/123/photo/1',
+    'https://x.com/i/web/status/123',
+  ])('extracts an id from %s', (url) => {
+    expect(resolveTweetId(undefined, url)).toBe('123')
+  })
+
+  it.each([
+    'https://example.com/slidevjs/status/123',
+    'https://x.com.example.com/slidevjs/status/123',
+    'https://x.com/slidevjs/status/not-a-number',
+    'javascript:alert(1)',
+    'not a URL',
+  ])('rejects an unsupported source URL: %s', (url) => {
+    expect(resolveTweetId(undefined, url)).toBeUndefined()
+  })
+})

package/logic/tweet.ts

@@ -0,0 +1,37 @@
+const TWEET_HOSTS = new Set([
+  'mobile.twitter.com',
+  'mobile.x.com',
+  'twitter.com',
+  'www.twitter.com',
+  'www.x.com',
+  'x.com',
+])
+
+export function resolveTweetId(
+  id: string | number | undefined,
+  sourceUrl: string | undefined,
+): string | undefined {
+  if (typeof id === 'number')
+    return id.toString()
+
+  if (id?.trim())
+    return id.trim()
+
+  if (!sourceUrl)
+    return
+
+  try {
+    const url = new URL(sourceUrl)
+    if (!['http:', 'https:'].includes(url.protocol) || !TWEET_HOSTS.has(url.hostname))
+      return
+
+    const segments = url.pathname.split('/').filter(Boolean)
+    const statusIndex = segments.lastIndexOf('status')
+    const tweetId = segments[statusIndex + 1]
+    if (statusIndex < 1 || !tweetId || !/^\d+$/.test(tweetId))
+      return
+
+    return tweetId
+  }
+  catch {}
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "52.19.1",
+  "version": "52.20.0",
   "description": "Presentation slides for developers",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -30,30 +30,33 @@
   "dependencies": {
     "@antfu/utils": "^9.3.0",
     "@fix-webm-duration/fix": "^1.0.1",
-    "@iconify-json/carbon": "^1.2.25",
+    "@iconify-json/carbon": "^1.2.27",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.4",
     "@shikijs/engine-javascript": "^4.4.3",
     "@shikijs/magic-move": "^4.4.3",
     "@shikijs/monaco": "^4.4.3",
     "@shikijs/vitepress-twoslash": "^4.4.3",
+    "@slidev/parser": "52.20.0",
     "@slidev/rough-notation": "^0.1.0",
+    "@slidev/types": "52.20.0",
     "@typescript/ata": "^0.9.8",
-    "@unhead/vue": "^3.3.2",
-    "@unocss/extractor-mdc": "^66.7.5",
-    "@unocss/preset-mini": "^66.7.5",
-    "@unocss/reset": "^66.7.5",
+    "@unhead/vue": "^3.4.1",
+    "@unocss/extractor-mdc": "^66.10.4",
+    "@unocss/preset-mini": "^66.10.4",
+    "@unocss/reset": "^66.10.4",
     "@vueuse/core": "^14.4.0",
     "@vueuse/math": "^14.4.0",
     "@vueuse/motion": "^3.0.3",
-    "ansis": "^4.3.1",
+    "ansis": "^4.4.0",
     "drauu": "^1.0.0",
     "file-saver": "^2.0.5",
     "fitty": "^2.4.2",
-    "floating-vue": "^5.2.2",
+    "floating-vue": "^5.4.0",
     "fuse.js": "^7.5.0",
-    "katex": "^0.18.4",
+    "katex": "^0.18.7",
     "lz-string": "^1.5.0",
+    "markdown-it-github-alerts": "^1.0.1",
     "mermaid": "^11.16.1",
     "monaco-editor": "^0.56.0",
     "nanotar": "^0.3.0",
@@ -61,14 +64,12 @@
     "recordrtc": "^5.6.2",
     "shiki": "^4.4.3",
     "typescript": "^6.0.3",
-    "unocss": "^66.7.5",
-    "vue": "^3.5.41",
-    "vue-router": "^5.2.0",
-    "yaml": "^2.9.0",
-    "@slidev/parser": "52.19.1",
-    "@slidev/types": "52.19.1"
+    "unocss": "^66.10.4",
+    "vue": "^3.5.42",
+    "vue-router": "^5.3.1",
+    "yaml": "^2.9.1"
   },
   "devDependencies": {
-    "vite": "^8.2.1"
+    "vite": "^8.3.0"
   }
 }

package/styles/index.css

@@ -122,6 +122,21 @@ html {
   transform: scale(calc(1 / var(--slidev-slide-scale)));
 }
 
+/*
+ * Counter the slide scale so iframes lay out and rasterize at their real
+ * on-screen resolution. Without this, canvas-based content (e.g. Excalidraw)
+ * is rendered at the slide's design size and bitmap-upscaled, which makes it
+ * blurry when the slide is scaled up. Scales below 1 are not countered, so
+ * scaled-down views like the overview keep the original layout.
+ */
+.slidev-layout-iframe {
+  --slidev-iframe-raster: max(var(--slidev-slide-scale, 1), 1);
+  width: calc(100% * var(--slidev-iframe-raster));
+  height: calc(100% * var(--slidev-iframe-raster));
+  transform: scale(calc(var(--slidev-iframe-scale, 1) / var(--slidev-iframe-raster)));
+  transform-origin: top left;
+}
+
 #twoslash-container {
   position: fixed;