@slidev/client 0.47.2 → 0.47.4

package/builtin/RenderWhen.vue

@@ -1,29 +1,48 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
 import type { RenderContext } from '@slidev/types'
-
+import { computed, inject, ref } from 'vue'
+import { useElementVisibility } from '@vueuse/core'
 import { injectionRenderContext } from '../constants'
 
-type Context = 'main' | RenderContext
+type Context = 'main' | 'visible' | RenderContext
 
 const props = defineProps<{
   context: Context | Context[]
 }>()
 const { context } = props
+const target = ref(null)
+const targetVisible = useElementVisibility(target)
 
-const currentContext = inject(injectionRenderContext)
+// When context has `visible`, we need to wrap the content with a div to track the visibility
+const needsDomWrapper = Array.isArray(context) ? context.includes('visible') : context === 'visible'
 
-const shouldRender = computed(() => Array.isArray(context) ? context.some(contextMatch) : contextMatch(context))
+const currentContext = inject(injectionRenderContext)
+const shouldRender = computed(() => {
+  const anyContext = Array.isArray(context) ? context.some(contextMatch) : contextMatch(context)
+  const allConditions = Array.isArray(context) ? context.every(conditionsMatch) : conditionsMatch(context)
+  return anyContext && allConditions
+})
 
 function contextMatch(context: Context) {
   if (context === currentContext?.value)
     return true
   if (context === 'main' && (currentContext?.value === 'slide' || currentContext?.value === 'presenter'))
     return true
+  if (context === 'visible')
+    return true
   return false
 }
+
+function conditionsMatch(context: Context) {
+  if (context === 'visible')
+    return targetVisible.value
+  return true
+}
 </script>
 
 <template>
-  <slot v-if="shouldRender" />
+  <div v-if="needsDomWrapper" ref="target">
+    <slot v-if="shouldRender" />
+  </div>
+  <slot v-else-if="shouldRender" />
 </template>

package/builtin/Tweet.vue

@@ -15,6 +15,7 @@ const props = defineProps<{
   id: string | number
   scale?: string | number
   conversation?: string
+  cards?: 'hidden' | 'visible'
 }>()
 
 const tweet = ref<HTMLElement | null>()
@@ -31,6 +32,7 @@ async function create() {
     {
       theme: isDark.value ? 'dark' : 'light',
       conversation: props.conversation || 'none',
+      cards: props.cards,
     },
   )
   loaded.value = true

package/iframes/monaco/index.css

@@ -5,7 +5,7 @@ body,
   margin: 0;
   background: var(--slidev-code-background);
   width: 100%;
-  height: 100%;
+  height: 200%;
 }
 
 #container {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.47.2",
+  "version": "0.47.4",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -20,9 +20,11 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.7",
+    "@iconify-json/carbon": "^1.1.28",
+    "@iconify-json/ph": "^1.1.11",
     "@shikijs/vitepress-twoslash": "^1.0.0-beta.5",
     "@unhead/vue": "^1.8.10",
-    "@unocss/reset": "^0.58.4",
+    "@unocss/reset": "^0.58.5",
     "@vueuse/core": "^10.7.2",
     "@vueuse/math": "^10.7.2",
     "@vueuse/motion": "^2.0.0",
@@ -38,14 +40,14 @@
     "mermaid": "^10.8.0",
     "monaco-editor": "^0.37.1",
     "nanoid": "^5.0.5",
-    "prettier": "^3.2.4",
+    "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.8",
-    "unocss": "^0.58.4",
+    "unocss": "^0.58.5",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
-    "@slidev/parser": "0.47.2",
-    "@slidev/types": "0.47.2"
+    "@slidev/parser": "0.47.4",
+    "@slidev/types": "0.47.4"
   },
   "devDependencies": {
     "vite": "^5.0.12"

package/uno.config.ts

@@ -1,3 +1,4 @@
+import { fileURLToPath } from 'node:url'
 import {
   defineConfig,
   presetAttributify,
@@ -26,7 +27,9 @@ export default defineConfig({
   presets: [
     presetUno(),
     presetAttributify(),
-    presetIcons(),
+    presetIcons({
+      collectionsNodeResolvePath: fileURLToPath(import.meta.url),
+    }),
     presetTypography(),
   ],
   transformers: [