@slidev/client 0.47.4 → 0.48.0-beta.0

package/builtin/CodeBlockWrapper.vue

@@ -12,18 +12,23 @@ Learn more: https://sli.dev/guide/syntax.html#line-highlighting
 -->
 
 <script setup lang="ts">
-import { range, remove } from '@antfu/utils'
 import { parseRangeString } from '@slidev/parser/core'
 import { useClipboard } from '@vueuse/core'
-import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { computed, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import type { PropType } from 'vue'
 import { configs } from '../env'
-import { CLASS_VCLICK_TARGET, injectionClicks, injectionClicksDisabled, injectionClicksElements } from '../constants'
 import { makeId } from '../logic/utils'
+import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET, injectionClicksContext } from '../constants'
 
 const props = defineProps({
   ranges: {
+    type: Array as PropType<string[]>,
     default: () => [],
   },
+  finally: {
+    type: [String, Number],
+    default: 'last',
+  },
   startLine: {
     type: Number,
     default: 1,
@@ -33,8 +38,8 @@ const props = defineProps({
     default: configs.lineNumbers,
   },
   at: {
-    type: Number,
-    default: undefined,
+    type: [String, Number],
+    default: '+1',
   },
   maxHeight: {
     type: String,
@@ -42,39 +47,47 @@ const props = defineProps({
   },
 })
 
-const clicks = inject(injectionClicks)
-const elements = inject(injectionClicksElements)
-const disabled = inject(injectionClicksDisabled)
-
+const clicks = inject(injectionClicksContext)?.value
 const el = ref<HTMLDivElement>()
-const vm = getCurrentInstance()
+const id = makeId()
+
+onUnmounted(() => {
+  clicks!.unregister(id)
+})
 
 onMounted(() => {
-  const prev = props.at == null ? elements?.value.length : props.at
+  if (!clicks || clicks.disabled)
+    return
+
+  const { start, end, delta } = clicks.resolve(props.at, props.ranges.length - 1)
+  clicks.register(id, { max: end, delta })
+
   const index = computed(() => {
-    if (disabled?.value)
+    if (clicks.disabled)
       return props.ranges.length - 1
-    return Math.min(Math.max(0, (clicks?.value || 0) - (prev || 0)), props.ranges.length - 1)
+    return Math.max(0, clicks.current - start + 1)
+  })
+
+  const finallyRange = computed(() => {
+    return props.finally === 'last' ? props.ranges.at(-1) : props.finally.toString()
   })
-  const rangeStr = computed(() => props.ranges[index.value] || '')
-  if (props.ranges.length >= 2 && !disabled?.value) {
-    const id = makeId()
-    const ids = range(props.ranges.length - 1).map(i => id + i)
-    if (elements?.value) {
-      elements.value.push(...ids)
-      onUnmounted(() => ids.forEach(i => remove(elements.value, i)), vm)
-    }
-  }
 
   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)
+    if (hide)
+      rangeStr = props.ranges[index.value + 1] ?? finallyRange.value
+
     const isDuoTone = el.value.querySelector('.shiki-dark')
     const targets = isDuoTone ? Array.from(el.value.querySelectorAll('.shiki')) : [el.value]
     const startLine = props.startLine
     for (const target of targets) {
       const lines = Array.from(target.querySelectorAll('code > .line'))
-      const highlights: number[] = parseRangeString(lines.length + startLine - 1, rangeStr.value)
+      const highlights: number[] = parseRangeString(lines.length + startLine - 1, rangeStr)
       lines.forEach((line, idx) => {
         const highlighted = highlights.includes(idx + startLine)
         line.classList.toggle(CLASS_VCLICK_TARGET, true)
@@ -107,11 +120,9 @@ function copyCode() {
 
 <template>
   <div
-    ref="el" class="slidev-code-wrapper relative group"
-    :class="{
+    ref="el" class="slidev-code-wrapper relative group" :class="{
       'slidev-code-line-numbers': props.lines,
-    }"
-    :style="{
+    }" :style="{
       'max-height': props.maxHeight,
       'overflow-y': props.maxHeight ? 'scroll' : undefined,
       '--start': props.startLine,

package/builtin/KaTexBlockWrapper.vue

@@ -20,53 +20,66 @@ Learn more: https://sli.dev/guide/syntax.html#latex-line-highlighting
 -->
 
 <script setup lang="ts">
-import { range, remove } from '@antfu/utils'
-import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { computed, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import type { PropType } from 'vue'
 import { parseRangeString } from '@slidev/parser'
-import { CLASS_VCLICK_TARGET, injectionClicks, injectionClicksDisabled, injectionClicksElements } from '../constants'
+import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET, injectionClicksContext } from '../constants'
 import { makeId } from '../logic/utils'
 
 const props = defineProps({
   ranges: {
+    type: Array as PropType<string[]>,
     default: () => [],
   },
+  finally: {
+    type: [String, Number],
+    default: 'last',
+  },
   startLine: {
     type: Number,
     default: 1,
   },
   at: {
-    type: Number,
-    default: undefined,
+    type: [String, Number],
+    default: '+1',
   },
 })
 
-const clicks = inject(injectionClicks)
-const elements = inject(injectionClicksElements)
-const disabled = inject(injectionClicksDisabled)
-
+const clicks = inject(injectionClicksContext)?.value
 const el = ref<HTMLDivElement>()
-const vm = getCurrentInstance()
+const id = makeId()
+
+onUnmounted(() => {
+  clicks!.unregister(id)
+})
 
 onMounted(() => {
-  const prev = props.at == null ? elements?.value.length : props.at
+  if (!clicks || clicks.disabled)
+    return
+
+  const { start, end, delta } = clicks.resolve(props.at, props.ranges.length - 1)
+  clicks.register(id, { max: end, delta })
+
   const index = computed(() => {
-    if (disabled?.value)
+    if (clicks.disabled)
       return props.ranges.length - 1
-    return Math.min(Math.max(0, (clicks?.value || 0) - (prev || 0)), props.ranges.length - 1)
+    return Math.max(0, clicks.current - start + 1)
+  })
+
+  const finallyRange = computed(() => {
+    return props.finally === 'last' ? props.ranges.at(-1) : props.finally.toString()
   })
-  const rangeStr = computed(() => props.ranges[index.value] || '')
-  if (props.ranges.length >= 2 && !disabled?.value) {
-    const id = makeId()
-    const ids = range(props.ranges.length - 1).map(i => id + i)
-    if (elements?.value) {
-      elements.value.push(...ids)
-      onUnmounted(() => ids.forEach(i => remove(elements.value, i)), vm)
-    }
-  }
 
   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)
+    if (hide)
+      rangeStr = props.ranges[index.value + 1] ?? finallyRange.value
+
     // KaTeX equations have col-align-XXX as parent
     const equationParents = el.value.querySelectorAll('.mtable > [class*=col-align]')
     if (!equationParents)
@@ -89,7 +102,7 @@ onMounted(() => {
     }
 
     const startLine = props.startLine
-    const highlights: number[] = parseRangeString(lines.length + startLine - 1, rangeStr.value)
+    const highlights: number[] = parseRangeString(lines.length + startLine - 1, rangeStr)
     lines.forEach((line, idx) => {
       const highlighted = highlights.includes(idx + startLine)
       line.forEach((node) => {
@@ -103,9 +116,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    ref="el" class="slidev-katex-wrapper"
-  >
+  <div ref="el" class="slidev-katex-wrapper">
     <slot />
   </div>
 </template>

package/builtin/Mermaid.vue

@@ -26,6 +26,7 @@ const props = defineProps<{
 
 const vm = getCurrentInstance()
 const el = ref<ShadowRoot>()
+const error = ref<string | null>(null)
 const html = ref('')
 
 watchEffect(async (onCleanup) => {
@@ -33,15 +34,21 @@ watchEffect(async (onCleanup) => {
   onCleanup(() => {
     disposed = true
   })
-  const svg = await renderMermaid(
-    props.code || '',
-    {
-      theme: props.theme || (isDark.value ? 'dark' : undefined),
-      ...vm!.attrs,
-    },
-  )
-  if (!disposed)
-    html.value = svg
+  error.value = null
+  try {
+    const svg = await renderMermaid(
+      props.code || '',
+      {
+        theme: props.theme || (isDark.value ? 'dark' : undefined),
+        ...vm!.attrs,
+      },
+    )
+    if (!disposed)
+      html.value = svg
+  }
+  catch (e) {
+    error.value = `${e}`
+  }
 })
 
 const actualHeight = ref<number>()
@@ -69,5 +76,6 @@ watchEffect(() => {
 </script>
 
 <template>
-  <ShadowRoot class="mermaid" :inner-html="html" @shadow="el = $event" />
+  <pre v-if="error" border="1 red rounded" class="pa-3">{{ error }}</pre>
+  <ShadowRoot v-else class="mermaid" :inner-html="html" @shadow="el = $event" />
 </template>

package/builtin/SlidevVideo.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
-
-import { injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionRenderContext, injectionRoute, injectionSlidevContext } from '../constants'
+import { injectionClicksContext, injectionRenderContext, injectionRoute, injectionSlidevContext } from '../constants'
 
 const props = defineProps<{
   autoPlay?: boolean | 'once' | 'resume' | 'resumeOnce'
@@ -12,9 +11,7 @@ const props = defineProps<{
 const $slidev = inject(injectionSlidevContext)
 const route = inject(injectionRoute)
 const currentContext = inject(injectionRenderContext)
-const clicks = inject(injectionClicks)
-const clicksDisabled = inject(injectionClicksDisabled)
-const clicksElements = inject(injectionClicksElements)
+const clicks = inject(injectionClicksContext)?.value
 
 const video = ref<HTMLMediaElement>()
 const played = ref(false)
@@ -27,9 +24,9 @@ const matchRoute = computed(() => {
 })
 
 const matchClick = computed(() => {
-  if (!video.value || currentContext?.value !== 'slide' || clicks?.value === undefined || clicksDisabled?.value)
+  if (!video.value || currentContext?.value !== 'slide' || clicks?.disabled || clicks?.current === undefined)
     return false
-  return !clicksElements?.value.includes(video.value) || clicksElements?.value[clicks?.value - 1] === video.value
+  return clicks.map.get(video.value)?.isShown?.value ?? true
 })
 
 const matchRouteAndClick = computed(() => matchRoute.value && matchClick.value)

package/builtin/VClick.ts

@@ -4,14 +4,15 @@
  * 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({
   props: {
     at: {
       type: [Number, String],
-      default: null,
+      default: '+1',
     },
     hide: {
       type: Boolean,
@@ -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/builtin/VClickGap.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { Fragment, inject, onMounted, watchEffect } from 'vue'
+import { injectionClicksContext } from '../constants'
+import { makeId } from '../logic/utils'
+
+const props = defineProps({
+  size: {
+    type: [String, Number],
+    default: 1,
+  },
+})
+
+const clicksRef = inject(injectionClicksContext)
+
+onMounted(() => {
+  watchEffect((onCleanup) => {
+    const clicks = clicksRef?.value
+
+    if (!clicks || clicks.disabled)
+      return
+
+    let delta = +props.size
+    if (Number.isNaN(delta)) {
+      console.warn(`[slidev] Invalid size for VClickGap: ${props.size}`)
+      delta = 1
+    }
+    const max = clicks.currentOffset + delta - 1
+
+    const id = makeId()
+    clicks.register(id, { max, delta })
+    onCleanup(() => clicks.unregister(id))
+  })
+})
+</script>
+
+<template>
+  <Fragment />
+</template>

package/builtin/VClicks.ts

@@ -5,9 +5,10 @@
  */
 
 import { toArray } from '@antfu/utils'
-import type { Directive, VNode, VNodeArrayChildren } from 'vue'
-
-import { Comment, defineComponent, h, isVNode, resolveDirective, withDirectives } from 'vue'
+import type { VNode, VNodeArrayChildren } from 'vue'
+import { Comment, createVNode, defineComponent, h, isVNode, resolveDirective, withDirectives } from 'vue'
+import { normalizeAtProp } from '../logic/utils'
+import VClickGap from './VClickGap.vue'
 
 const listTags = ['ul', 'ol']
 
@@ -18,12 +19,12 @@ export default defineComponent({
       default: 1,
     },
     every: {
-      type: Number,
+      type: [Number, String],
       default: 1,
     },
     at: {
       type: [Number, String],
-      default: null,
+      default: '+1',
     },
     hide: {
       type: Boolean,
@@ -35,13 +36,15 @@ export default defineComponent({
     },
   },
   render() {
+    const every = +this.every
+    const [isRelative, at] = normalizeAtProp(this.at)
+
     const click = resolveDirective('click')!
-    const after = resolveDirective('after')!
 
-    const applyDirective = (node: VNode, directive: Directive, delta: number | string) => {
+    const applyDirective = (node: VNode, value: number | string) => {
       return withDirectives(node, [[
-        directive,
-        delta,
+        click,
+        value,
         '',
         {
           hide: this.hide,
@@ -66,76 +69,70 @@ export default defineComponent({
 
     defaults = openAllTopLevelSlots(toArray(defaults))
 
-    const mapSubList = (children: VNodeArrayChildren, depth = 1): [VNodeArrayChildren, number] => {
-      let idx = 0
+    const mapSubList = (children: VNodeArrayChildren, depth = 1): VNodeArrayChildren => {
       const vNodes = openAllTopLevelSlots(children).map((i) => {
         if (!isVNode(i))
           return i
         if (listTags.includes(i.type as string) && Array.isArray(i.children)) {
           // eslint-disable-next-line ts/no-use-before-define
-          const [vNodes, total] = mapChildren(i.children, depth + 1)
-          idx += total
-          return h(i, {}, [vNodes])
+          const vNodes = mapChildren(i.children, depth + 1)
+          return h(i, {}, vNodes)
         }
         return h(i)
       })
-      return [vNodes, idx]
+      return vNodes
     }
 
-    let globalIdx = 0
-    const mapChildren = (children: VNodeArrayChildren, depth = 1): [VNodeArrayChildren, number] => {
-      let idx = 0
+    let globalIdx = 1
+    let execIdx = 0
+    const mapChildren = (children: VNodeArrayChildren, depth = 1): VNodeArrayChildren => {
       const vNodes = openAllTopLevelSlots(children).map((i) => {
         if (!isVNode(i) || i.type === Comment)
           return i
-        const directive = idx % this.every === 0 ? click : after
+
+        const thisShowIdx = +at + Math.ceil(globalIdx++ / every) - 1
+
         let vNode
-        let childCount = 0
-        if (depth < +this.depth && Array.isArray(i.children)) {
-          const [vNodes, total] = mapSubList(i.children, depth)
-          vNode = h(i, {}, [vNodes])
-          childCount = total
-          idx += total + 1
-        }
-        else {
+        if (depth < +this.depth && Array.isArray(i.children))
+          vNode = h(i, {}, mapSubList(i.children, depth))
+        else
           vNode = h(i)
-          idx++
-        }
-        const delta = this.at != null
-          ? Number(this.at) + Math.floor(globalIdx / this.every) + depth
-          : (depth - 1 - childCount).toString()
-        globalIdx++
+
+        const delta = thisShowIdx - execIdx
+        execIdx = thisShowIdx
+
         return applyDirective(
           vNode,
-          directive,
-          (typeof delta === 'string' && !delta.startsWith('-')) ? `+${delta}` : delta,
+          isRelative
+            ? delta >= 0 ? `+${delta}` : `${delta}`
+            : thisShowIdx,
         )
       })
-      return [vNodes, idx]
+      return vNodes
     }
 
+    const lastGap = () => createVNode(VClickGap, {
+      size: +at + Math.ceil((globalIdx - 1) / every) - 1 - execIdx,
+    })
+
     // handle ul, ol list
     if (defaults.length === 1 && listTags.includes(defaults[0].type as string) && Array.isArray(defaults[0].children))
-      return h(defaults[0], {}, [mapChildren(defaults[0].children)[0]])
+      return h(defaults[0], {}, [mapChildren(defaults[0].children), lastGap()])
 
     if (defaults.length === 1 && defaults[0].type as string === 'table') {
       const tableNode = defaults[0]
       if (Array.isArray(tableNode.children)) {
         return h(tableNode, {}, tableNode.children.map((i) => {
-          if (!isVNode(i)) {
+          if (!isVNode(i))
             return i
-          }
-          else {
-            if (i.type === 'tbody' && Array.isArray(i.children))
-              return h(i, {}, [mapChildren(i.children)[0]])
-
-            else
-              return h(i)
-          }
+          else if (i.type === 'tbody' && Array.isArray(i.children))
+            return h(i, {}, [mapChildren(i.children), lastGap()])
+          else
+            return h(i)
         }))
       }
     }
 
-    return mapChildren(defaults)[0]
+    return [mapChildren(defaults)[0], lastGap()]
   },
 })

package/composables/useClicks.ts

@@ -0,0 +1,83 @@
+import { sum } from '@antfu/utils'
+import type { ClicksContext } from '@slidev/types'
+import type { Ref } from 'vue'
+import { ref, shallowReactive } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
+import { currentRoute, isPrintMode, isPrintWithClicks, queryClicks, routeForceRefresh } from '../logic/nav'
+import { normalizeAtProp } from '../logic/utils'
+
+function useClicksContextBase(route: RouteRecordRaw | undefined, getCurrent: () => number): ClicksContext {
+  const relativeOffsets: ClicksContext['relativeOffsets'] = new Map()
+  const map: ClicksContext['map'] = shallowReactive(new Map())
+
+  return {
+    get disabled() {
+      return isPrintMode.value && !isPrintWithClicks.value
+    },
+    get current() {
+      return getCurrent()
+    },
+    relativeOffsets,
+    map,
+    resolve(at, size = 1) {
+      const [isRelative, value] = normalizeAtProp(at)
+      if (isRelative) {
+        const offset = this.currentOffset
+        return {
+          start: offset + value,
+          end: offset + value + size - 1,
+          delta: value + size - 1,
+        }
+      }
+      else {
+        return {
+          start: value,
+          end: value + size - 1,
+          delta: 0,
+        }
+      }
+    },
+    register(el, resolved) {
+      relativeOffsets.set(el, resolved.delta)
+      map.set(el, resolved)
+    },
+    unregister(el) {
+      relativeOffsets.delete(el)
+      map.delete(el)
+    },
+    get currentOffset() {
+      // eslint-disable-next-line no-unused-expressions
+      routeForceRefresh.value
+      return sum(...relativeOffsets.values())
+    },
+    get total() {
+      // eslint-disable-next-line no-unused-expressions
+      routeForceRefresh.value
+      return route?.meta?.clicks
+        ?? Math.max(0, ...[...map.values()].map(v => v.max || 0))
+    },
+  }
+}
+
+export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksContext {
+  if (route?.meta?.__clicksContext)
+    return route.meta.__clicksContext
+  const thisPath = +(route?.path ?? 99999)
+  const context = useClicksContextBase(route, () => {
+    const currentPath = +(currentRoute.value?.path ?? 99999)
+    if (currentPath === thisPath)
+      return queryClicks.value
+    else if (currentPath > thisPath)
+      return 99999
+    else
+      return 0
+  })
+  if (route?.meta)
+    route.meta.__clicksContext = context
+  return context
+}
+
+export function useFixedClicks(route: RouteRecordRaw | undefined, currentInit = 0): [Ref<number>, ClicksContext] {
+  const current = ref(currentInit)
+  return [current, useClicksContextBase(route, () => current.value)]
+}

package/composables/useContext.ts

@@ -1,22 +1,16 @@
-import type { ComputedRef, WritableComputedRef } from 'vue'
+import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import type { SlidevContext } from '../modules/context'
 import { configs } from '../env'
 import { useNav } from './useNav'
-import { useNavClicks } from './useNavClicks'
 
 export function useContext(
   route: ComputedRef<RouteLocationNormalizedLoaded>,
-  clicks: WritableComputedRef<number>,
 ): SlidevContext {
   const nav = useNav(route)
-  const navClicks = useNavClicks(clicks, nav.currentRoute, nav.currentPage)
   return {
-    nav: {
-      ...nav,
-      ...navClicks,
-    },
+    nav,
     configs,
     themeConfigs: computed(() => configs.themeConfig),
   }