@slidev/client 0.48.0-beta.2 → 0.48.0-beta.21

package/logic/drawings.ts

@@ -4,7 +4,8 @@ import { createDrauu } from 'drauu'
 import { toReactive, useLocalStorage } from '@vueuse/core'
 import { drawingState, onPatch, patch } from '../state/drawings'
 import { configs } from '../env'
-import { currentPage, isPresenter } from './nav'
+import { isInputting } from '../state'
+import { currentSlideNo, isPresenter } from './nav'
 
 export const brushColors = [
   '#ff595e',
@@ -40,11 +41,13 @@ export const drawingMode = computed({
   set(v: DrawingMode | 'arrow') {
     _mode.value = v
     if (v === 'arrow') {
-      brush.mode = 'line'
+      // eslint-disable-next-line ts/no-use-before-define
+      drauu.mode = 'line'
       brush.arrowEnd = true
     }
     else {
-      brush.mode = v
+      // eslint-disable-next-line ts/no-use-before-define
+      drauu.mode = v
       brush.arrowEnd = false
     }
   },
@@ -60,7 +63,7 @@ export const drauu = markRaw(createDrauu(drauuOptions))
 export function clearDrauu() {
   drauu.clear()
   if (syncUp.value)
-    patch(currentPage.value, '')
+    patch(currentSlideNo.value, '')
 }
 
 export function updateState() {
@@ -71,7 +74,7 @@ export function updateState() {
 
 export function loadCanvas(page?: number) {
   disableDump = true
-  const data = drawingState[page || currentPage.value]
+  const data = drawingState[page || currentSlideNo.value]
   if (data != null)
     drauu.load(data)
   else
@@ -84,7 +87,7 @@ drauu.on('changed', () => {
   updateState()
   if (!disableDump) {
     const dump = drauu.dump()
-    const key = currentPage.value
+    const key = currentSlideNo.value
     if ((drawingState[key] || '') !== dump && syncUp.value)
       patch(key, drauu.dump())
   }
@@ -92,14 +95,14 @@ drauu.on('changed', () => {
 
 onPatch((state) => {
   disableDump = true
-  if (state[currentPage.value] != null)
-    drauu.load(state[currentPage.value] || '')
+  if (state[currentSlideNo.value] != null)
+    drauu.load(state[currentSlideNo.value] || '')
   disableDump = false
   updateState()
 })
 
 nextTick(() => {
-  watch(currentPage, () => {
+  watch(currentSlideNo, () => {
     if (!drauu.mounted)
       return
     loadCanvas()
@@ -110,7 +113,7 @@ drauu.on('start', () => isDrawing.value = true)
 drauu.on('end', () => isDrawing.value = false)
 
 window.addEventListener('keydown', (e) => {
-  if (!drawingEnabled.value)
+  if (!drawingEnabled.value || isInputting.value)
     return
 
   const noModifier = !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey

package/logic/nav-state.ts

@@ -0,0 +1,20 @@
+import { computed } from 'vue'
+import { logicOr } from '@vueuse/math'
+import { configs } from '../env'
+import { router } from '../routes'
+import { getSlide, slides } from './slides'
+
+export const currentRoute = computed(() => router.currentRoute.value)
+
+export const isPrintMode = computed(() => currentRoute.value.query.print !== undefined)
+export const isPrintWithClicks = computed(() => currentRoute.value.query.print === 'clicks')
+export const isEmbedded = computed(() => currentRoute.value.query.embedded !== undefined)
+export const isPlaying = computed(() => currentRoute.value.name === 'play')
+export const isPresenter = computed(() => currentRoute.value.name === 'presenter')
+export const isNotesViewer = computed(() => currentRoute.value.name === 'notes')
+export const isPresenterAvailable = computed(() => !isPresenter.value && (!configs.remote || currentRoute.value.query.password === configs.remote))
+
+export const hasPrimarySlide = logicOr(isPlaying, isPresenter)
+
+export const currentSlideNo = computed(() => hasPrimarySlide.value ? getSlide(currentRoute.value.params.no as string)?.no ?? 1 : 1)
+export const currentSlideRoute = computed(() => slides.value[currentSlideNo.value - 1])

package/logic/nav.ts

@@ -1,44 +1,22 @@
-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 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 99999
+      return CLICKS_MAX
     let v = +(queryClicksRaw.value || 0)
     if (Number.isNaN(v))
       v = 0
@@ -49,230 +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() {
-  if (clicksTotal.value <= queryClicks.value)
-    await nextSlide()
-  else
-    queryClicks.value += 1
-}
-
-export async function prev() {
-  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() {
-  if (currentPage.value < rawRoutes.length)
-    await go(currentPage.value + 1)
-}
-
-export async function prevSlide(lastClicks = true) {
-  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, {
-    onSwipeStart(e) {
-      if (e.pointerType !== 'touch')
-        return
-      if (isDrawing.value)
-        return
-      swipeBegin.value = timestamp()
-    },
-    onSwipeEnd(e) {
-      if (e.pointerType !== 'touch')
-        return
-      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?.filepath)
-      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: 'post', immediate: true },
+)

package/logic/note.ts

@@ -2,17 +2,17 @@ import type { MaybeRef } from '@vueuse/core'
 import { useFetch } from '@vueuse/core'
 import type { Ref } from 'vue'
 import { computed, ref, unref } from 'vue'
-import type { SlideInfo, SlideInfoExtended } from '@slidev/types'
+import type { SlideInfo, SlidePatch } from '@slidev/types'
 
 export interface UseSlideInfo {
-  info: Ref<SlideInfoExtended | undefined>
-  update: (data: Partial<SlideInfo>) => Promise<SlideInfoExtended | void>
+  info: Ref<SlideInfo | undefined>
+  update: (data: SlidePatch) => Promise<SlideInfo | void>
 }
 
 export function useSlideInfo(id: number | undefined): UseSlideInfo {
   if (id == null) {
     return {
-      info: ref() as Ref<SlideInfoExtended | undefined>,
+      info: ref() as Ref<SlideInfo | undefined>,
       update: async () => {},
     }
   }
@@ -21,7 +21,7 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
 
   execute()
 
-  const update = async (data: Partial<SlideInfo>) => {
+  const update = async (data: SlidePatch) => {
     return await fetch(
       url,
       {
@@ -36,12 +36,12 @@ 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) => {
-      if (payload.id === id && info.value.note.trim() !== payload.note.trim())
+    import.meta.hot?.on('slidev:update-note', (payload) => {
+      if (payload.id === id && info.value.note?.trim() !== payload.note?.trim())
         info.value = { ...info.value, ...payload }
     })
   }
@@ -64,7 +64,7 @@ export function useDynamicSlideInfo(id: MaybeRef<number | undefined>) {
 
   return {
     info: computed(() => get(unref(id)).info.value),
-    update: async (data: Partial<SlideInfo>, newId?: number) => {
+    update: async (data: SlidePatch, newId?: number) => {
       const info = get(newId ?? unref(id))
       const newData = await info.update(data)
       if (newData)

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

@@ -1,17 +1,21 @@
+/// <reference types="@slidev/types/client" />
+
 import { createApp } from 'vue'
 import { createHead } from '@unhead/vue'
 import App from './App.vue'
 import setupMain from './setup/main'
 import { router } from './routes'
-import createDirectives from './modules/directives'
-import createSlidevContext from './modules/context'
+import { createVClickDirectives } from './modules/v-click'
+import { createVMarkDirective } from './modules/v-mark'
+import { createSlidevContext } from './modules/context'
 
-import '/@slidev/styles'
+import '#slidev/styles'
 
 const app = createApp(App)
 app.use(router)
 app.use(createHead())
-app.use(createDirectives())
+app.use(createVClickDirectives())
+app.use(createVMarkDirective())
 app.use(createSlidevContext())
 
 setupMain({ app, router })

package/modules/context.ts

@@ -1,19 +1,12 @@
 import type { App } from 'vue'
-import { computed, reactive } from 'vue'
-import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
+import { computed, reactive, ref } 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, injectionSlidevContext } from '../constants'
+import { 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'
 
 export interface SlidevContext {
   nav: SlidevContextNav
@@ -21,12 +14,13 @@ export interface SlidevContext {
   themeConfigs: ComputedRef<typeof configs['themeConfig']>
 }
 
-export default function createSlidevContext() {
+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))
 
       // allows controls from postMessages
       if (__DEV__) {