@slidev/client 0.47.3 → 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/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.3",
+  "version": "0.47.4",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -46,8 +46,8 @@
     "unocss": "^0.58.5",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
-    "@slidev/parser": "0.47.3",
-    "@slidev/types": "0.47.3"
+    "@slidev/parser": "0.47.4",
+    "@slidev/types": "0.47.4"
   },
   "devDependencies": {
     "vite": "^5.0.12"