@slidev/client 0.47.3 → 0.47.5

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/VClick.ts

@@ -4,7 +4,8 @@
  * Learn more: https://sli.dev/guide/animations.html#click-animations
  */
 
-import { createVNode, defineComponent } from 'vue'
+import type { PropType, VNode } from 'vue'
+import { Text, defineComponent, h } from 'vue'
 import VClicks from './VClicks'
 
 export default defineComponent({
@@ -21,9 +22,13 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    wrapText: {
+      type: Function as PropType<(text: VNode) => VNode>,
+      default: (text: VNode) => h('span', text),
+    },
   },
   render() {
-    return createVNode(
+    return h(
       VClicks,
       {
         every: 99999,
@@ -31,7 +36,14 @@ export default defineComponent({
         hide: this.hide,
         fade: this.fade,
       },
-      { default: this.$slots.default },
+      {
+        default: () =>
+          this.$slots.default?.().map(v =>
+            v.type === Text
+              ? this.wrapText(v)
+              : v,
+          ),
+      },
     )
   },
 })

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/logic/note.ts

@@ -40,6 +40,10 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
       if (payload.id === id)
         info.value = payload.data
     })
+    import.meta.hot?.on('slidev-update-note', (payload) => {
+      if (payload.id === id && info.value.note.trim() !== payload.note.trim())
+        info.value = { ...info.value, ...payload }
+    })
   }
 
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.47.3",
+  "version": "0.47.5",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -20,9 +20,9 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.7",
-    "@iconify-json/carbon": "^1.1.28",
+    "@iconify-json/carbon": "^1.1.30",
     "@iconify-json/ph": "^1.1.11",
-    "@shikijs/vitepress-twoslash": "^1.0.0-beta.5",
+    "@shikijs/vitepress-twoslash": "^1.1.1",
     "@unhead/vue": "^1.8.10",
     "@unocss/reset": "^0.58.5",
     "@vueuse/core": "^10.7.2",
@@ -44,12 +44,12 @@
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.8",
     "unocss": "^0.58.5",
-    "vue": "^3.4.15",
+    "vue": "^3.4.18",
     "vue-router": "^4.2.5",
-    "@slidev/parser": "0.47.3",
-    "@slidev/types": "0.47.3"
+    "@slidev/parser": "0.47.5",
+    "@slidev/types": "0.47.5"
   },
   "devDependencies": {
-    "vite": "^5.0.12"
+    "vite": "^5.1.1"
   }
 }

package/setup/codemirror.ts

@@ -1,6 +1,6 @@
 import type { Ref, WritableComputedRef } from 'vue'
 import { watch } from 'vue'
-import * as CodeMirror from 'codemirror'
+import * as _CodeMirror from 'codemirror'
 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/mode/css/css'
 import 'codemirror/mode/markdown/markdown'
@@ -9,6 +9,10 @@ import 'codemirror/mode/htmlmixed/htmlmixed'
 import 'codemirror/addon/display/placeholder'
 import 'codemirror/lib/codemirror.css'
 
+// eslint-disable-next-line ts/ban-ts-comment
+// @ts-expect-error
+const CodeMirror: typeof _CodeMirror = _CodeMirror.fromTextArea ? _CodeMirror : globalThis.CodeMirror
+
 export async function useCodeMirror(
   textarea: Ref<HTMLTextAreaElement | null | undefined>,
   input: Ref<string> | WritableComputedRef<string>,