@slidev/client 0.47.4 → 0.48.0-beta.0

package/modules/directives.ts

@@ -1,7 +1,6 @@
+import type { ResolvedClicksInfo } from '@slidev/types'
 import type { App, DirectiveBinding, InjectionKey } from 'vue'
-import { watch } from 'vue'
-import { remove } from '@antfu/utils'
-import { isClicksDisabled } from '../logic/nav'
+import { computed, watchEffect } from 'vue'
 import {
   CLASS_VCLICK_CURRENT,
   CLASS_VCLICK_FADE,
@@ -9,10 +8,7 @@ import {
   CLASS_VCLICK_HIDDEN_EXP,
   CLASS_VCLICK_PRIOR,
   CLASS_VCLICK_TARGET,
-  injectionClicks,
-  injectionClicksDisabled,
-  injectionClicksElements,
-  injectionOrderMap,
+  injectionClicksContext,
 } from '../constants'
 
 function dirInject<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, defaultValue?: T): T | undefined {
@@ -27,88 +23,36 @@ export default function createDirectives() {
         name: 'v-click',
 
         mounted(el: HTMLElement, dir) {
-          if (isClicksDisabled.value || dirInject(dir, injectionClicksDisabled)?.value)
+          const resolved = resolveClick(el, dir)
+          if (resolved == null)
             return
 
-          if (dir.value === false || dir.value === 'false')
-            return
-
-          const elements = dirInject(dir, injectionClicksElements)
-          const clicks = dirInject(dir, injectionClicks)
-          const orderMap = dirInject(dir, injectionOrderMap)
-
-          const hide = dir.modifiers.hide !== false && dir.modifiers.hide != null
-          const fade = dir.modifiers.fade !== false && dir.modifiers.fade != null
-
-          const CLASS_HIDE = fade ? CLASS_VCLICK_FADE : CLASS_VCLICK_HIDDEN
-
-          if (elements && !elements?.value?.includes(el))
-            elements.value.push(el)
+          el.classList.toggle(CLASS_VCLICK_TARGET, true)
 
-          const prev = elements?.value?.length || 0
+          // Expose the resolved clicks info to the element to make it easier to understand and debug
+          const clicks = Array.isArray(resolved.clicks) ? resolved.clicks : [resolved.clicks, undefined]
+          el.dataset.slidevClicksStart = String(clicks[0])
+          if (clicks[1] != null)
+            el.dataset.slidevClicksEnd = String(clicks[1])
 
-          resolveDirValue(dir, prev)
+          watchEffect(() => {
+            const active = resolved.isActive.value
+            const current = resolved.isCurrent.value
+            const prior = active && !current
 
-          // If orderMap didn't have dir.value aka the order key, then initialize it.
-          // If key exists, then move current element to the first of order array to
-          // make sure the v-after set correct CLASS_VCLICK_CURRENT state.
-          if (!orderMap?.value.has(dir.value)) {
-            orderMap?.value.set(dir.value, [el])
-          }
-          else {
-            if (!orderMap?.value.get(dir.value)?.includes(el)) {
-              const afterClicks = orderMap?.value.get(dir.value) || []
-              orderMap?.value.set(dir.value, [el].concat(afterClicks))
+            if (resolved.flagHide) {
+              el.classList.toggle(resolved.flagFade ? CLASS_VCLICK_FADE : CLASS_VCLICK_HIDDEN, active)
+              el.classList.toggle(CLASS_VCLICK_HIDDEN_EXP, active)
             }
-          }
-
-          el?.classList.toggle(CLASS_VCLICK_TARGET, true)
-
-          if (clicks) {
-            watch(
-              clicks,
-              () => {
-                const c = clicks?.value ?? 0
-                const show = dir.value != null
-                  ? Array.isArray(dir.value)
-                    ? c >= dir.value[0] && c < dir.value[1]
-                    : c >= dir.value
-                  : c > prev
-
-                if (!el.classList.contains(CLASS_VCLICK_HIDDEN_EXP))
-                  el.classList.toggle(CLASS_HIDE, !show)
-
-                if (hide !== false && hide !== undefined)
-                  el.classList.toggle(CLASS_HIDE, show)
-
-                // Reset CLASS_VCLICK_CURRENT to false.
-                el.classList.toggle(CLASS_VCLICK_CURRENT, false)
-
-                const currentElArray = orderMap?.value.get(c)
-                currentElArray?.forEach((cEl, idx) => {
-                  // Reset CLASS_VCLICK_PRIOR to false
-                  cEl.classList.toggle(CLASS_VCLICK_PRIOR, false)
-                  // If the element is the last of order array, then set it as
-                  // CLASS_VCLICK_CURRENT state, others set as CLASS_VCLICK_PRIOR state.
-                  if (idx === currentElArray.length - 1)
-                    cEl.classList.toggle(CLASS_VCLICK_CURRENT, true)
-                  else
-                    cEl.classList.toggle(CLASS_VCLICK_PRIOR, true)
-                })
-
-                if (!el.classList.contains(CLASS_VCLICK_CURRENT))
-                  el.classList.toggle(CLASS_VCLICK_PRIOR, show)
-              },
-              { immediate: true },
-            )
-          }
-        },
-        unmounted(el: HTMLElement, dir) {
-          el?.classList.toggle(CLASS_VCLICK_TARGET, false)
-          const elements = dirInject(dir, injectionClicksElements)!
-          if (elements?.value)
-            remove(elements.value, el)
+            else {
+              el.classList.toggle(resolved.flagFade ? CLASS_VCLICK_FADE : CLASS_VCLICK_HIDDEN, !active)
+            }
+
+            el.classList.toggle(CLASS_VCLICK_CURRENT, current)
+            el.classList.toggle(CLASS_VCLICK_PRIOR, prior)
+          })
         },
+        unmounted,
       })
 
       app.directive('after', {
@@ -116,57 +60,30 @@ export default function createDirectives() {
         name: 'v-after',
 
         mounted(el: HTMLElement, dir) {
-          if (isClicksDisabled.value || dirInject(dir, injectionClicksDisabled)?.value)
+          const resolved = resolveClick(el, dir, true)
+          if (resolved == null)
             return
 
-          if (dir.value === false || dir.value === 'false')
-            return
+          el.classList.toggle(CLASS_VCLICK_TARGET, true)
 
-          const elements = dirInject(dir, injectionClicksElements)
-          const clicks = dirInject(dir, injectionClicks)
-          const orderMap = dirInject(dir, injectionOrderMap)
-
-          const prev = elements?.value.length || 0
-
-          resolveDirValue(dir, prev)
-
-          // If a v-click order before v-after is lower than v-after, the order map will
-          // not contain the key for v-after, so we need to set it first, then move v-after
-          // to the last of order array.
-          if (orderMap?.value.has(dir.value))
-            orderMap?.value.get(dir.value)?.push(el)
-          else
-            orderMap?.value.set(dir.value, [el])
-
-          el?.classList.toggle(CLASS_VCLICK_TARGET, true)
-
-          if (clicks) {
-            watch(
-              clicks,
-              () => {
-                const c = (clicks.value ?? 0)
-                const show = dir.value != null
-                  ? Array.isArray(dir.value)
-                    ? c >= dir.value[0] && c < dir.value[1]
-                    : c >= dir.value
-                  : c >= prev
-
-                if (!el.classList.contains(CLASS_VCLICK_HIDDEN_EXP))
-                  el.classList.toggle(CLASS_VCLICK_HIDDEN, !show)
-
-                // Reset CLASS_VCLICK_CURRENT to false.
-                el.classList.toggle(CLASS_VCLICK_CURRENT, false)
-
-                if (!el.classList.contains(CLASS_VCLICK_CURRENT))
-                  el.classList.toggle(CLASS_VCLICK_PRIOR, show)
-              },
-              { immediate: true },
-            )
-          }
-        },
-        unmounted(el: HTMLElement) {
-          el?.classList.toggle(CLASS_VCLICK_TARGET, true)
+          watchEffect(() => {
+            const active = resolved.isActive.value
+            const current = resolved.isCurrent.value
+            const prior = active && !current
+
+            if (resolved.flagHide) {
+              el.classList.toggle(resolved.flagFade ? CLASS_VCLICK_FADE : CLASS_VCLICK_HIDDEN, active)
+              el.classList.toggle(CLASS_VCLICK_HIDDEN_EXP, active)
+            }
+            else {
+              el.classList.toggle(resolved.flagFade ? CLASS_VCLICK_FADE : CLASS_VCLICK_HIDDEN, !active)
+            }
+
+            el.classList.toggle(CLASS_VCLICK_CURRENT, current)
+            el.classList.toggle(CLASS_VCLICK_PRIOR, prior)
+          })
         },
+        unmounted,
       })
 
       app.directive('click-hide', {
@@ -174,50 +91,90 @@ export default function createDirectives() {
         name: 'v-click-hide',
 
         mounted(el: HTMLElement, dir) {
-          if (isClicksDisabled.value || dirInject(dir, injectionClicksDisabled)?.value)
+          const resolved = resolveClick(el, dir, false, true)
+          if (resolved == null)
             return
 
-          const elements = dirInject(dir, injectionClicksElements)
-          const clicks = dirInject(dir, injectionClicks)
-
-          const prev = elements?.value?.length || 0
-
-          if (elements && !elements?.value?.includes(el))
-            elements.value.push(el)
-
-          el?.classList.toggle(CLASS_VCLICK_TARGET, true)
-
-          if (clicks) {
-            watch(
-              clicks,
-              () => {
-                const c = clicks?.value ?? 0
-                const hide = dir.value != null
-                  ? c >= dir.value
-                  : c > prev
-                el.classList.toggle(CLASS_VCLICK_HIDDEN, hide)
-                el.classList.toggle(CLASS_VCLICK_HIDDEN_EXP, hide)
-              },
-              { immediate: true },
-            )
-          }
-        },
-        unmounted(el, dir) {
-          el?.classList.toggle(CLASS_VCLICK_TARGET, false)
-          const elements = dirInject(dir, injectionClicksElements)
-          if (elements?.value)
-            remove(elements.value, el)
+          el.classList.toggle(CLASS_VCLICK_TARGET, true)
+
+          watchEffect(() => {
+            const active = resolved.isActive.value
+            const current = resolved.isCurrent.value
+            const prior = active && !current
+
+            el.classList.toggle(resolved.flagFade ? CLASS_VCLICK_FADE : CLASS_VCLICK_HIDDEN, active)
+            el.classList.toggle(CLASS_VCLICK_HIDDEN_EXP, active)
+
+            el.classList.toggle(CLASS_VCLICK_CURRENT, current)
+            el.classList.toggle(CLASS_VCLICK_PRIOR, prior)
+          })
         },
+        unmounted,
       })
     },
   }
 }
 
-function resolveDirValue(dir: DirectiveBinding<any>, prev: number) {
-  // Set default dir.value
-  if (dir.value == null || dir.value === true || dir.value === 'true')
-    dir.value = prev
-  // Relative value starts with '+' o '-'
-  if (typeof dir.value === 'string' && (dir.value.startsWith('+') || dir.value.startsWith('-')))
-    dir.value = prev + Number(dir.value)
+function isActive(thisClick: number | [number, number], clicks: number) {
+  return Array.isArray(thisClick)
+    ? thisClick[0] <= clicks && clicks < thisClick[1]
+    : thisClick <= clicks
+}
+
+function isCurrent(thisClick: number | [number, number], clicks: number) {
+  return Array.isArray(thisClick)
+    ? thisClick[0] === clicks
+    : thisClick === clicks
+}
+
+function resolveClick(el: Element, dir: DirectiveBinding<any>, clickAfter = false, flagHide = false): ResolvedClicksInfo | null {
+  const ctx = dirInject(dir, injectionClicksContext)?.value
+
+  if (!el || !ctx || ctx.disabled)
+    return null
+
+  let value = dir.value
+
+  if (value === false || value === 'false')
+    return null
+
+  flagHide ||= dir.modifiers.hide !== false && dir.modifiers.hide != null
+  const flagFade = dir.modifiers.fade !== false && dir.modifiers.fade != null
+
+  if (clickAfter)
+    value = '+0'
+  else if (value == null || value === true || value === 'true')
+    value = '+1'
+
+  let delta: number
+  let thisClick: number | [number, number]
+  let maxClick: number
+  if (Array.isArray(value)) {
+    // range (absolute)
+    delta = 0
+    thisClick = value as [number, number]
+    maxClick = value[1]
+  }
+  else {
+    ({ start: thisClick, end: maxClick, delta } = ctx.resolve(value))
+  }
+
+  const resolved: ResolvedClicksInfo = {
+    max: maxClick,
+    clicks: thisClick,
+    delta,
+    isActive: computed(() => isActive(thisClick, ctx.current)),
+    isCurrent: computed(() => isCurrent(thisClick, ctx.current)),
+    isShown: computed(() => flagHide ? !isActive(thisClick, ctx.current) : isActive(thisClick, ctx.current)),
+    flagFade,
+    flagHide,
+  }
+  ctx.register(el, resolved)
+  return resolved
+}
+
+function unmounted(el: HTMLElement, dir: DirectiveBinding<any>) {
+  el.classList.toggle(CLASS_VCLICK_TARGET, false)
+  const ctx = dirInject(dir, injectionClicksContext)?.value
+  ctx?.unregister(el)
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.47.4",
+  "version": "0.48.0-beta.0",
   "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.2",
     "@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.19",
     "vue-router": "^4.2.5",
-    "@slidev/parser": "0.47.4",
-    "@slidev/types": "0.47.4"
+    "@slidev/types": "0.48.0-beta.0",
+    "@slidev/parser": "0.48.0-beta.0"
   },
   "devDependencies": {
-    "vite": "^5.0.12"
+    "vite": "^5.1.1"
   }
 }

package/routes.ts

@@ -1,6 +1,7 @@
 import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import type { TransitionGroupProps } from 'vue'
+import type { ClicksContext } from '@slidev/types'
 import Play from './internals/Play.vue'
 import Print from './internals/Print.vue'
 
@@ -101,7 +102,7 @@ declare module 'vue-router' {
     }
 
     // private fields
-    __clicksElements: HTMLElement[]
+    __clicksContext: null | ClicksContext
     __preloaded?: boolean
   }
 }

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,8 @@ import 'codemirror/mode/htmlmixed/htmlmixed'
 import 'codemirror/addon/display/placeholder'
 import 'codemirror/lib/codemirror.css'
 
+const CodeMirror = _CodeMirror.default ?? ('fromTextArea' in _CodeMirror ? _CodeMirror : globalThis.CodeMirror)
+
 export async function useCodeMirror(
   textarea: Ref<HTMLTextAreaElement | null | undefined>,
   input: Ref<string> | WritableComputedRef<string>,

package/setup/root.ts

@@ -5,7 +5,7 @@ import { nanoid } from 'nanoid'
 import { configs } from '../env'
 import { initSharedState, onPatch, patch } from '../state/shared'
 import { initDrawingState } from '../state/drawings'
-import { clicks, currentPage, getPath, isNotesViewer, isPresenter } from '../logic/nav'
+import { clicksContext, currentPage, getPath, isNotesViewer, isPresenter } from '../logic/nav'
 import { router } from '../routes'
 import { TRUST_ORIGINS } from '../constants'
 import { skipTransition } from '../composables/hmr'
@@ -38,11 +38,11 @@ export default function setupRoot() {
 
     if (isPresenter.value) {
       patch('page', +currentPage.value)
-      patch('clicks', clicks.value)
+      patch('clicks', clicksContext.value.current)
     }
     else {
       patch('viewerPage', +currentPage.value)
-      patch('viewerClicks', clicks.value)
+      patch('viewerClicks', clicksContext.value.current)
     }
 
     patch('lastUpdate', {
@@ -52,13 +52,13 @@ export default function setupRoot() {
     })
   }
   router.afterEach(updateSharedState)
-  watch(clicks, updateSharedState)
+  watch(clicksContext, updateSharedState)
 
   onPatch((state) => {
     const routePath = router.currentRoute.value.path
     if (!routePath.match(/^\/(\d+|presenter)\/?/))
       return
-    if (state.lastUpdate?.type === 'presenter' && (+state.page !== +currentPage.value || +clicks.value !== +state.clicks)) {
+    if (state.lastUpdate?.type === 'presenter' && (+state.page !== +currentPage.value || +clicksContext.value.current !== +state.clicks)) {
       skipTransition.value = false
       router.replace({
         path: getPath(state.page),

package/composables/useNavClicks.ts

@@ -1,38 +0,0 @@
-import type { ComputedRef, WritableComputedRef } from 'vue'
-import { computed, nextTick, ref } from 'vue'
-import type { RouteRecordRaw } from 'vue-router'
-import type { SlidevContextNavClicks } from '../modules/context'
-import { rawRoutes, router } from '../routes'
-
-export function useNavClicks(
-  clicks: WritableComputedRef<number>,
-  currentRoute: ComputedRef<RouteRecordRaw | undefined>,
-  currentPage: ComputedRef<number>,
-): SlidevContextNavClicks {
-  // force update collected elements when the route is fully resolved
-  const routeForceRefresh = ref(0)
-  nextTick(() => {
-    router.afterEach(async () => {
-      await nextTick()
-      routeForceRefresh.value += 1
-    })
-  })
-
-  const clicksElements = computed<HTMLElement[]>(() => {
-    // eslint-disable-next-line no-unused-expressions
-    routeForceRefresh.value
-    return currentRoute.value?.meta?.__clicksElements || []
-  })
-
-  const clicksTotal = computed(() => +(currentRoute.value?.meta?.clicks ?? clicksElements.value.length))
-
-  const hasNext = computed(() => currentPage.value < rawRoutes.length - 1 || clicks.value < clicksTotal.value)
-  const hasPrev = computed(() => currentPage.value > 1 || clicks.value > 0)
-  return {
-    clicks,
-    clicksElements,
-    clicksTotal,
-    hasNext,
-    hasPrev,
-  }
-}