@slidev/client 0.48.0-beta.20 → 0.48.0-beta.22

package/logic/nav.ts

@@ -1,44 +1,20 @@
-import type { Ref, TransitionGroupProps } from 'vue'
-import type { RouteRecordRaw } from 'vue-router'
-import { computed, nextTick, ref, watch } from 'vue'
-import type { TocItem } from '@slidev/types'
-import { timestamp, usePointerSwipe } from '@vueuse/core'
-import { rawRoutes, router } from '../routes'
-import { configs } from '../env'
-import { skipTransition } from '../composables/hmr'
+import { computed, watch } from 'vue'
+import { router } from '../routes'
 import { usePrimaryClicks } from '../composables/useClicks'
 import { CLICKS_MAX } from '../constants'
+import { useNavBase } from '../composables/useNav'
 import { useRouteQuery } from './route'
-import { isDrawing } from './drawings'
+import { currentRoute, currentSlideRoute, hasPrimarySlide } from './nav-state'
+import { getSlide } from './slides'
 
-export { rawRoutes, router }
+export * from './slides'
+export * from './nav-state'
 
-// force update collected elements when the route is fully resolved
-export const routeForceRefresh = ref(0)
-nextTick(() => {
-  router.afterEach(async () => {
-    await nextTick()
-    routeForceRefresh.value += 1
-  })
-})
-
-export const navDirection = ref(0)
-export const clicksDirection = ref(0)
-
-export const route = computed(() => router.currentRoute.value)
-
-export const isPrintMode = computed(() => route.value.query.print !== undefined)
-export const isPrintWithClicks = computed(() => route.value.query.print === 'clicks')
-export const isEmbedded = computed(() => route.value.query.embedded !== undefined)
-export const isPresenter = computed(() => route.value.path.startsWith('/presenter'))
-export const isNotesViewer = computed(() => route.value.path.startsWith('/notes'))
-export const presenterPassword = computed(() => route.value.query.password)
-export const showPresenter = computed(() => !isPresenter.value && (!configs.remote || presenterPassword.value === configs.remote))
+export const clicksContext = computed(() => usePrimaryClicks(currentSlideRoute.value))
 
 const queryClicksRaw = useRouteQuery('clicks', '0')
 export const queryClicks = computed({
   get() {
-    // eslint-disable-next-line ts/no-use-before-define
     if (clicksContext.value.disabled)
       return CLICKS_MAX
     let v = +(queryClicksRaw.value || 0)
@@ -51,231 +27,45 @@ export const queryClicks = computed({
   },
 })
 
-export const total = computed(() => rawRoutes.length)
-export const path = computed(() => route.value.path)
-
-export const currentPage = computed(() => Number.parseInt(path.value.split(/\//g).slice(-1)[0]) || 1)
-export const currentPath = computed(() => getPath(currentPage.value))
-export const currentRoute = computed(() => rawRoutes.find(i => i.path === `${currentPage.value}`))
-export const currentSlideId = computed(() => currentRoute.value?.meta?.slide?.id)
-export const currentLayout = computed(() => currentRoute.value?.meta?.layout || (currentPage.value === 1 ? 'cover' : 'default'))
-
-export const nextRoute = computed(() => rawRoutes.find(i => i.path === `${Math.min(rawRoutes.length, currentPage.value + 1)}`))
-export const prevRoute = computed(() => rawRoutes.find(i => i.path === `${Math.max(1, currentPage.value - 1)}`))
-
-export const clicksContext = computed(() => usePrimaryClicks(currentRoute.value))
-export const clicks = computed(() => clicksContext.value.current)
-export const clicksTotal = computed(() => clicksContext.value.total)
-
-export const hasNext = computed(() => currentPage.value < rawRoutes.length || clicks.value < clicksTotal.value)
-export const hasPrev = computed(() => currentPage.value > 1 || clicks.value > 0)
-
-export const rawTree = computed(() => rawRoutes
-  .filter((route: RouteRecordRaw) => route.meta?.slide?.title)
-  .reduce((acc: TocItem[], route: RouteRecordRaw) => {
-    addToTree(acc, route)
-    return acc
-  }, []))
-export const treeWithActiveStatuses = computed(() => getTreeWithActiveStatuses(rawTree.value, currentRoute.value))
-export const tree = computed(() => filterTree(treeWithActiveStatuses.value))
-
-export const transition = computed(() => getCurrentTransition(navDirection.value, currentRoute.value, prevRoute.value))
-
-watch(currentRoute, (next, prev) => {
-  navDirection.value = Number(next?.path) - Number(prev?.path)
-})
-
-export async function next() {
-  clicksDirection.value = 1
-  if (clicksTotal.value <= queryClicks.value)
-    await nextSlide()
-  else
-    queryClicks.value += 1
-}
-
-export async function prev() {
-  clicksDirection.value = -1
-  if (queryClicks.value <= 0)
-    await prevSlide()
-  else
-    queryClicks.value -= 1
-}
-
-export function getPath(no: number | string) {
-  return isPresenter.value ? `/presenter/${no}` : `/${no}`
-}
-
-export async function nextSlide() {
-  clicksDirection.value = 1
-  if (currentPage.value < rawRoutes.length)
-    await go(currentPage.value + 1)
-}
-
-export async function prevSlide(lastClicks = true) {
-  clicksDirection.value = -1
-  const next = Math.max(1, currentPage.value - 1)
-  await go(next)
-  if (lastClicks && clicksTotal.value)
-    router.replace({ query: { ...route.value.query, clicks: clicksTotal.value } })
-}
-
-export function goFirst() {
-  return go(1)
-}
-
-export function goLast() {
-  return go(total.value)
-}
-
-export function go(page: number | string, clicks?: number) {
-  skipTransition.value = false
-  return router.push({ path: getPath(page), query: { ...route.value.query, clicks } })
-}
-
-export function useSwipeControls(root: Ref<HTMLElement | undefined>) {
-  const swipeBegin = ref(0)
-  const { direction, distanceX, distanceY } = usePointerSwipe(root, {
-    pointerTypes: ['touch'],
-    onSwipeStart() {
-      if (isDrawing.value)
-        return
-      swipeBegin.value = timestamp()
-    },
-    onSwipeEnd() {
-      if (!swipeBegin.value)
-        return
-      if (isDrawing.value)
-        return
-
-      const x = Math.abs(distanceX.value)
-      const y = Math.abs(distanceY.value)
-      if (x / window.innerWidth > 0.3 || x > 75) {
-        if (direction.value === 'left')
-          next()
-        else
-          prev()
-      }
-      else if (y / window.innerHeight > 0.4 || y > 200) {
-        if (direction.value === 'down')
-          prevSlide()
-        else
-          nextSlide()
-      }
-    },
-  })
-}
-
-export async function downloadPDF() {
-  const { saveAs } = await import('file-saver')
-  saveAs(
-    typeof configs.download === 'string'
-      ? configs.download
-      : configs.exportFilename
-        ? `${configs.exportFilename}.pdf`
-        : `${import.meta.env.BASE_URL}slidev-exported.pdf`,
-    `${configs.title}.pdf`,
-  )
-}
-
-export async function openInEditor(url?: string) {
-  if (url == null) {
-    const slide = currentRoute.value?.meta?.slide
-    if (!slide)
-      return false
-    url = `${slide.filepath}:${slide.start}`
-  }
-  await fetch(`/__open-in-editor?file=${encodeURIComponent(url)}`)
-  return true
-}
-
-export function addToTree(tree: TocItem[], route: RouteRecordRaw, level = 1) {
-  const titleLevel = route.meta?.slide?.level
-  if (titleLevel && titleLevel > level && tree.length > 0) {
-    addToTree(tree[tree.length - 1].children, route, level + 1)
-  }
-  else {
-    tree.push({
-      children: [],
-      level,
-      path: route.path,
-      hideInToc: Boolean(route.meta?.slide?.frontmatter?.hideInToc),
-      title: route.meta?.slide?.title,
-    })
-  }
-}
-
-export function getTreeWithActiveStatuses(
-  tree: TocItem[],
-  currentRoute?: RouteRecordRaw,
-  hasActiveParent = false,
-  parent?: TocItem,
-): TocItem[] {
-  return tree.map((item: TocItem) => {
-    const clone = {
-      ...item,
-      active: item.path === currentRoute?.path,
-      hasActiveParent,
+export const {
+  slides,
+  total,
+  currentPath,
+  currentSlideNo,
+  currentPage,
+  currentLayout,
+  currentTransition,
+  clicksDirection,
+  nextRoute,
+  prevRoute,
+  clicks,
+  clicksTotal,
+  hasNext,
+  hasPrev,
+  tocTree,
+  navDirection,
+  openInEditor,
+  next,
+  prev,
+  go,
+  goLast,
+  goFirst,
+  nextSlide,
+  prevSlide,
+} = useNavBase(
+  currentSlideRoute,
+  clicksContext,
+  queryClicks,
+  router,
+)
+
+watch(
+  [total, currentRoute],
+  async () => {
+    if (hasPrimarySlide.value && !getSlide(currentRoute.value.params.no as string)) {
+      // The current slide may has been removed. Redirect to the last slide.
+      await goLast()
     }
-    if (clone.children.length > 0)
-      clone.children = getTreeWithActiveStatuses(clone.children, currentRoute, clone.active || clone.hasActiveParent, clone)
-    if (parent && (clone.active || clone.activeParent))
-      parent.activeParent = true
-    return clone
-  })
-}
-
-export function filterTree(tree: TocItem[], level = 1): TocItem[] {
-  return tree
-    .filter((item: TocItem) => !item.hideInToc)
-    .map((item: TocItem) => ({
-      ...item,
-      children: filterTree(item.children, level + 1),
-    }))
-}
-
-const transitionResolveMap: Record<string, string | undefined> = {
-  'slide-left': 'slide-left | slide-right',
-  'slide-right': 'slide-right | slide-left',
-  'slide-up': 'slide-up | slide-down',
-  'slide-down': 'slide-down | slide-up',
-}
-
-export function resolveTransition(transition?: string | TransitionGroupProps, isBackward = false): TransitionGroupProps | undefined {
-  if (!transition)
-    return undefined
-  if (typeof transition === 'string') {
-    transition = {
-      name: transition,
-    }
-  }
-
-  if (!transition.name)
-    return undefined
-
-  let name = transition.name.includes('|')
-    ? transition.name
-    : (transitionResolveMap[transition.name] || transition.name)
-
-  if (name.includes('|')) {
-    const [forward, backward] = name.split('|').map(i => i.trim())
-    name = isBackward ? backward : forward
-  }
-
-  if (!name)
-    return undefined
-
-  return {
-    ...transition,
-    name,
-  }
-}
-
-export function getCurrentTransition(direction: number, currentRoute?: RouteRecordRaw, prevRoute?: RouteRecordRaw) {
-  let transition = direction > 0
-    ? prevRoute?.meta?.transition
-    : currentRoute?.meta?.transition
-  if (!transition)
-    transition = configs.transition
-
-  return resolveTransition(transition, direction < 0)
-}
+  },
+  { flush: 'pre', immediate: true },
+)

package/logic/note.ts

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

package/logic/overview.ts

@@ -1,9 +1,9 @@
 import { computed, ref } from 'vue'
-import { rawRoutes } from '../routes'
+import { slides } from './nav'
 
 // To have same format(.value) as max, wrap it with ref.
 const min = ref(1)
-const max = computed(() => rawRoutes.length)
+const max = computed(() => slides.value.length)
 
 export const currentOverviewPage = ref(0)
 export const overviewRowCount = ref(0)

package/logic/route.ts

@@ -1,4 +1,4 @@
-import { computed, nextTick, unref } from 'vue'
+import { computed, nextTick, ref, unref } from 'vue'
 import { router } from '../routes'
 
 export function useRouteQuery<T extends string | string[]>(
@@ -24,3 +24,12 @@ export function useRouteQuery<T extends string | string[]>(
     },
   })
 }
+
+// force update collected elements when the route is fully resolved
+export const routeForceRefresh = ref(0)
+nextTick(() => {
+  router.afterEach(async () => {
+    await nextTick()
+    routeForceRefresh.value += 1
+  })
+})

package/logic/slides.ts

@@ -0,0 +1,19 @@
+import type { SlideRoute } from '@slidev/types'
+import { router } from '../routes'
+import { isPresenter } from './nav-state'
+import { slides } from '#slidev/slides'
+
+export { slides, router }
+
+export function getSlide(no: number | string) {
+  return slides.value.find(
+    s => (s.no === +no || s.meta.slide?.frontmatter.routeAlias === no),
+  )
+}
+
+export function getSlidePath(route: SlideRoute | number | string, presenter = isPresenter.value) {
+  if (typeof route === 'number' || typeof route === 'string')
+    route = getSlide(route)!
+  const no = route.meta.slide?.frontmatter.routeAlias ?? route.no
+  return presenter ? `/presenter/${no}` : `/${no}`
+}

package/logic/transition.ts

@@ -0,0 +1,50 @@
+import type { SlideRoute } from '@slidev/types'
+import type { TransitionGroupProps } from 'vue'
+import { configs } from '../env'
+
+const transitionResolveMap: Record<string, string | undefined> = {
+  'slide-left': 'slide-left | slide-right',
+  'slide-right': 'slide-right | slide-left',
+  'slide-up': 'slide-up | slide-down',
+  'slide-down': 'slide-down | slide-up',
+}
+
+export function resolveTransition(transition?: string | TransitionGroupProps, isBackward = false): TransitionGroupProps | undefined {
+  if (!transition)
+    return undefined
+  if (typeof transition === 'string') {
+    transition = {
+      name: transition,
+    }
+  }
+
+  if (!transition.name)
+    return undefined
+
+  let name = transition.name.includes('|')
+    ? transition.name
+    : (transitionResolveMap[transition.name] || transition.name)
+
+  if (name.includes('|')) {
+    const [forward, backward] = name.split('|').map(i => i.trim())
+    name = isBackward ? backward : forward
+  }
+
+  if (!name)
+    return undefined
+
+  return {
+    ...transition,
+    name,
+  }
+}
+
+export function getCurrentTransition(direction: number, currentRoute?: SlideRoute, prevRoute?: SlideRoute) {
+  let transition = direction > 0
+    ? prevRoute?.meta?.transition
+    : currentRoute?.meta?.transition
+  if (!transition)
+    transition = configs.transition
+
+  return resolveTransition(transition, direction < 0)
+}

package/logic/utils.ts

@@ -1,5 +1,7 @@
+import { parseRangeString } from '@slidev/parser/core'
 import { useTimestamp } from '@vueuse/core'
 import { computed, ref } from 'vue'
+import { CLASS_VCLICK_TARGET } from '../constants'
 
 export function useTimer() {
   const tsStart = ref(Date.now())
@@ -48,3 +50,25 @@ export function normalizeAtProp(at: string | number = '+1'): [isRelative: boolea
     n,
   ]
 }
+
+export function updateCodeHighlightRange(
+  rangeStr: string,
+  linesCount: number,
+  startLine: number,
+  getTokenOfLine: (line: number) => Element[],
+) {
+  const highlights: number[] = parseRangeString(linesCount + startLine - 1, rangeStr)
+  for (let line = 0; line < linesCount; line++) {
+    const tokens = getTokenOfLine(line)
+    const isHighlighted = highlights.includes(line + startLine)
+    for (const token of tokens) {
+      token.classList.toggle(CLASS_VCLICK_TARGET, true)
+      token.classList.toggle('slidev-code-highlighted', isHighlighted)
+      token.classList.toggle('slidev-code-dishonored', !isHighlighted)
+
+      // for backward compatibility
+      token.classList.toggle('highlighted', isHighlighted)
+      token.classList.toggle('dishonored', !isHighlighted)
+    }
+  }
+}

package/modules/context.ts

@@ -1,19 +1,13 @@
 import type { App } from 'vue'
-import { computed, reactive, ref } from 'vue'
-import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
+import { computed, reactive, ref, shallowRef } from 'vue'
 import type { ComputedRef } from '@vue/reactivity'
 import type { configs } from '../env'
 import * as nav from '../logic/nav'
-import { route } from '../logic/nav'
 import { isDark } from '../logic/dark'
-import { injectionCurrentPage, injectionRenderContext, injectionSlidevContext } from '../constants'
+import { injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionSlidevContext } from '../constants'
 import { useContext } from '../composables/useContext'
-
-export type SlidevContextNavKey = 'path' | 'total' | 'clicksContext' | 'clicks' | 'clicksTotal' | 'currentPage' | 'currentPath' | 'currentRoute' | 'currentSlideId' | 'currentLayout' | 'nextRoute' | 'rawTree' | 'treeWithActiveStatuses' | 'tree' | 'downloadPDF' | 'next' | 'nextSlide' | 'openInEditor' | 'prev' | 'prevSlide' | 'rawRoutes' | 'go'
-
-export interface SlidevContextNav extends Pick<typeof nav, SlidevContextNavKey> {
-  route: ComputedRef<RouteRecordRaw | RouteLocationNormalizedLoaded>
-}
+import type { SlidevContextNav } from '../composables/useNav'
+import { useFixedClicks } from '../composables/useClicks'
 
 export interface SlidevContext {
   nav: SlidevContextNav
@@ -24,10 +18,11 @@ export interface SlidevContext {
 export function createSlidevContext() {
   return {
     install(app: App) {
-      const context = reactive(useContext(route))
+      const context = reactive(useContext())
       app.provide(injectionRenderContext, ref('none'))
       app.provide(injectionSlidevContext, context)
-      app.provide(injectionCurrentPage, computed(() => context.nav.currentPage))
+      app.provide(injectionCurrentPage, computed(() => context.nav.currentSlideNo))
+      app.provide(injectionClicksContext, shallowRef(useFixedClicks()))
 
       // allows controls from postMessages
       if (__DEV__) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.0-beta.20",
+  "version": "0.48.0-beta.22",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -27,13 +27,14 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.7",
-    "@iconify-json/carbon": "^1.1.30",
+    "@iconify-json/carbon": "^1.1.31",
     "@iconify-json/ph": "^1.1.11",
+    "@iconify-json/svg-spinners": "^1.1.2",
     "@shikijs/monaco": "^1.1.7",
     "@shikijs/vitepress-twoslash": "^1.1.7",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.4",
-    "@unhead/vue": "^1.8.10",
+    "@unhead/vue": "^1.8.11",
     "@unocss/reset": "^0.58.5",
     "@vueuse/core": "^10.9.0",
     "@vueuse/math": "^10.9.0",
@@ -51,13 +52,13 @@
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
     "shiki": "^1.1.7",
-    "shiki-magic-move": "^0.1.0",
+    "shiki-magic-move": "^0.3.0",
     "typescript": "^5.3.3",
     "unocss": "^0.58.5",
-    "vue": "^3.4.20",
+    "vue": "^3.4.21",
     "vue-router": "^4.3.0",
-    "@slidev/types": "0.48.0-beta.20",
-    "@slidev/parser": "0.48.0-beta.20"
+    "@slidev/parser": "0.48.0-beta.22",
+    "@slidev/types": "0.48.0-beta.22"
   },
   "devDependencies": {
     "vite": "^5.1.4"

package/pages/notes.vue

@@ -5,8 +5,7 @@ import { useLocalStorage } from '@vueuse/core'
 import { configs } from '../env'
 import { sharedState } from '../state/shared'
 import { fullscreen } from '../state'
-import { total } from '../logic/nav'
-import { rawRoutes } from '../routes'
+import { slides, total } from '../logic/nav'
 import NoteDisplay from '../internals/NoteDisplay.vue'
 import IconButton from '../internals/IconButton.vue'
 
@@ -20,7 +19,7 @@ const { isFullscreen, toggle: toggleFullscreen } = fullscreen
 const scroller = ref<HTMLDivElement>()
 const fontSize = useLocalStorage('slidev-notes-font-size', 18)
 const pageNo = computed(() => sharedState.lastUpdate?.type === 'viewer' ? sharedState.viewerPage : sharedState.page)
-const currentRoute = computed(() => rawRoutes.find(i => i.path === `${pageNo.value}`))
+const currentRoute = computed(() => slides.value.find(i => i.no === pageNo.value))
 
 watch(pageNo, () => {
   scroller.value?.scrollTo({ left: 0, top: 0, behavior: 'smooth' })