@slidev/client 0.48.0-beta.24 → 0.48.0-beta.25

package/internals/DrawingLayer.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { drauu, drawingEnabled, loadCanvas } from '../logic/drawings'
 import { useSlideContext } from '../context'
+import { useDrawings } from '../composables/useDrawings'
+
+const { drauu, drawingEnabled, loadCanvas } = useDrawings()
 
 const scale = useSlideContext().$scale
 const svg = ref<SVGSVGElement>()
@@ -23,4 +25,4 @@ onBeforeUnmount(() => {
     class="w-full h-full absolute top-0"
     :class="{ 'pointer-events-none': !drawingEnabled, 'touch-none': drawingEnabled }"
   />
-</template>
+</template>../composables/drawings

package/internals/DrawingPreview.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { drawingState } from '../logic/drawings'
+import { useDrawings } from '../composables/useDrawings'
 
 defineProps<{ page: number }>()
+
+const { drawingState } = useDrawings()
 </script>
 
 <template>
@@ -10,4 +12,4 @@ defineProps<{ page: number }>()
     class="w-full h-full absolute top-0 pointer-events-none"
     v-html="drawingState[page]"
   />
-</template>
+</template>../composables/drawings

package/internals/Goto.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import Fuse from 'fuse.js'
-import { go, slides } from '../logic/nav'
 import { activeElement, showGotoDialog } from '../state'
-import Titles from '#slidev/titles.md'
+import { useNav } from '../composables/useNav'
+import Titles from '#slidev/title-renderer'
 
 const container = ref<HTMLDivElement>()
 const input = ref<HTMLInputElement>()
@@ -12,6 +12,8 @@ const items = ref<HTMLLIElement[]>()
 const text = ref('')
 const selectedIndex = ref(0)
 
+const { go, slides } = useNav()
+
 function notNull<T>(value: T | null | undefined): value is T {
   return value !== null && value !== undefined
 }

package/internals/NavControls.vue

@@ -2,10 +2,11 @@
 import { computed, ref, shallowRef } from 'vue'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
 import { downloadPDF } from '../utils'
-import { currentRoute, currentSlideNo, getSlidePath, hasNext, hasPrev, isEmbedded, isPresenter, isPresenterAvailable, next, prev, total } from '../logic/nav'
 import { activeElement, breakpoints, fullscreen, presenterLayout, showEditor, showInfoDialog, showPresenterCursor, toggleOverview, togglePresenterLayout } from '../state'
-import { brush, drawingEnabled } from '../logic/drawings'
 import { configs } from '../env'
+import { useNav } from '../composables/useNav'
+import { getSlidePath } from '../logic/slides'
+import { useDrawings } from '../composables/useDrawings'
 import Settings from './Settings.vue'
 import MenuButton from './MenuButton.vue'
 import VerticalDivider from './VerticalDivider.vue'
@@ -19,6 +20,23 @@ const props = defineProps({
   },
 })
 
+const {
+  currentRoute,
+  currentSlideNo,
+  hasNext,
+  hasPrev,
+  isEmbedded,
+  isPresenter,
+  isPresenterAvailable,
+  next,
+  prev,
+  total,
+} = useNav()
+const {
+  brush,
+  drawingEnabled,
+} = useDrawings()
+
 const md = breakpoints.smaller('md')
 const { isFullscreen, toggle: toggleFullscreen } = fullscreen
 
@@ -166,4 +184,4 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       <CustomNavControls />
     </div>
   </nav>
-</template>
+</template>../composables/drawings

package/internals/PrintContainer.vue

@@ -4,13 +4,15 @@ import { computed } from 'vue'
 import { provideLocal } from '@vueuse/core'
 import { configs, slideAspect, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
-import { currentRoute, slides } from '../logic/nav'
+import { useNav } from '../composables/useNav'
 import PrintSlide from './PrintSlide.vue'
 
 const props = defineProps<{
   width: number
 }>()
 
+const { slides, currentRoute } = useNav()
+
 const width = computed(() => props.width)
 const height = computed(() => props.width / slideAspect.value)
 

package/internals/PrintSlide.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type { SlideRoute } from '@slidev/types'
 import { useFixedNav } from '../composables/useNav'
-import { useFixedClicks } from '../composables/useClicks'
+import { createFixedClicks } from '../composables/useClicks'
 import PrintSlideClick from './PrintSlideClick.vue'
 
 const { route } = defineProps<{ route: SlideRoute }>()
-const clicks0 = useFixedClicks(route, 0)
+const clicks0 = createFixedClicks(route, 0)
 </script>
 
 <template>
@@ -17,7 +17,7 @@ const clicks0 = useFixedClicks(route, 0)
     <PrintSlideClick
       v-for="i of clicks0.total"
       :key="i"
-      :nav="useFixedNav(route, useFixedClicks(route, i))"
+      :nav="useFixedNav(route, createFixedClicks(route, i))"
     />
   </template>
 </template>

package/internals/QuickOverview.vue

@@ -2,21 +2,22 @@
 import { useEventListener, useVModel } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
 import { breakpoints, showOverview, windowSize } from '../state'
-import { currentSlideNo, go as goSlide, slides } from '../logic/nav'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
-import { useFixedClicks } from '../composables/useClicks'
+import { createFixedClicks } from '../composables/useClicks'
 import { getSlideClass } from '../utils'
 import { CLICKS_MAX } from '../constants'
+import { useNav } from '../composables/useNav'
 import SlideContainer from './SlideContainer.vue'
 import SlideWrapper from './SlideWrapper.vue'
 import DrawingPreview from './DrawingPreview.vue'
 import IconButton from './IconButton.vue'
 
 const props = defineProps<{ modelValue: boolean }>()
-
 const emit = defineEmits(['update:modelValue'])
 const value = useVModel(props, 'modelValue', emit)
 
+const { currentSlideNo, go: goSlide, slides } = useNav()
+
 function close() {
   value.value = false
 }
@@ -138,7 +139,7 @@ watchEffect(() => {
               <SlideWrapper
                 :is="route.component"
                 v-if="route?.component"
-                :clicks-context="useFixedClicks(route, CLICKS_MAX)"
+                :clicks-context="createFixedClicks(route, CLICKS_MAX)"
                 :class="getSlideClass(route)"
                 :route="route"
                 render-context="overview"

package/internals/SideEditor.vue

@@ -2,8 +2,8 @@
 import { throttledWatch, useEventListener } from '@vueuse/core'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { activeElement, editorHeight, editorWidth, isInputting, showEditor, isEditorVertical as vertical } from '../state'
-import { useCodeMirror } from '../setup/codemirror'
-import { currentSlideNo, openInEditor } from '../logic/nav'
+import { useCodeMirror } from '../modules/codemirror'
+import { useNav } from '../composables/useNav'
 import { useDynamicSlideInfo } from '../composables/useSlideInfo'
 import IconButton from './IconButton.vue'
 
@@ -11,6 +11,8 @@ const props = defineProps<{
   resize?: boolean
 }>()
 
+const { currentSlideNo, openInEditor } = useNav()
+
 const tab = ref<'content' | 'note'>('content')
 const content = ref('')
 const note = ref('')

package/internals/SlideContainer.vue

@@ -3,7 +3,7 @@ import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
 import { configs, slideAspect, slideHeight, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
-import { clicksDirection, isPrintMode } from '../logic/nav'
+import { useNav } from '../composables/useNav'
 
 const props = defineProps({
   width: {
@@ -21,6 +21,8 @@ const props = defineProps({
   },
 })
 
+const { clicksDirection, isPrintMode } = useNav()
+
 const root = ref<HTMLDivElement>()
 const element = useElementSize(root)
 

package/internals/SlidesShow.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { TransitionGroup, computed, shallowRef, watch } from 'vue'
-import { currentSlideRoute, currentTransition, isPresenter, nextRoute, slides } from '../logic/nav'
+import { recomputeAllPoppers } from 'floating-vue'
+import { useNav } from '../composables/useNav'
 import { getSlideClass } from '../utils'
 import { useViewTransition } from '../composables/useViewTransition'
-import { skipTransition } from '../composables/hmr'
-import { usePrimaryClicks } from '../composables/useClicks'
+import { skipTransition } from '../logic/hmr'
 import SlideWrapper from './SlideWrapper.vue'
 import PresenterMouse from './PresenterMouse.vue'
 
@@ -15,6 +15,15 @@ defineProps<{
   renderContext: 'slide' | 'presenter'
 }>()
 
+const {
+  currentSlideRoute,
+  currentTransition,
+  getPrimaryClicks,
+  isPresenter,
+  nextRoute,
+  slides,
+} = useNav()
+
 // preload next route
 watch(currentSlideRoute, () => {
   if (currentSlideRoute.value?.meta && currentSlideRoute.value.meta.preload !== false)
@@ -35,6 +44,8 @@ function onAfterLeave() {
   // After transition, we disable it so HMR won't trigger it again
   // We will turn it back on `nav.go` so the normal navigation would still work
   skipTransition.value = true
+  // recompute poppers after transition
+  recomputeAllPoppers()
 }
 </script>
 
@@ -57,7 +68,7 @@ function onAfterLeave() {
     >
       <SlideWrapper
         :is="route.component!"
-        :clicks-context="usePrimaryClicks(route)"
+        :clicks-context="getPrimaryClicks(route)"
         :class="getSlideClass(route)"
         :route="route"
         :render-context="renderContext"
@@ -86,3 +97,4 @@ function onAfterLeave() {
   width: 100%;
 }
 </style>
+../logic/hmr

package/logic/overview.ts

@@ -1,5 +1,5 @@
 import { computed, ref } from 'vue'
-import { slides } from './nav'
+import { slides } from './slides'
 
 // To have same format(.value) as max, wrap it with ref.
 const min = ref(1)

package/logic/route.ts

@@ -1,5 +1,6 @@
+import type { WritableComputedRef } from 'vue'
 import { computed, nextTick, ref, unref } from 'vue'
-import { router } from '../routes'
+import { useRouter } from 'vue-router'
 
 export function useRouteQuery<T extends string | string[]>(
   name: string,
@@ -7,7 +8,9 @@ export function useRouteQuery<T extends string | string[]>(
   {
     mode = 'replace',
   } = {},
-) {
+): WritableComputedRef<T> {
+  const router = useRouter()
+
   return computed<any>({
     get() {
       const data = router.currentRoute.value.query[name]
@@ -27,14 +30,8 @@ export function useRouteQuery<T extends string | string[]>(
         })
       })
     },
-  })
+  }) as any
 }
 
 // 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

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

package/main.ts

@@ -1,24 +1,9 @@
 /// <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 { createVClickDirectives } from './modules/v-click'
-import { createVMarkDirective } from './modules/v-mark'
-import { createSlidevContext } from './modules/context'
-
-import '#slidev/styles'
-import 'shiki-magic-move/style.css'
 
 const app = createApp(App)
-app.use(router)
-app.use(createHead())
-app.use(createVClickDirectives())
-app.use(createVMarkDirective())
-app.use(createSlidevContext())
-
-setupMain({ app, router })
-
+setupMain(app)
 app.mount('#app')

package/modules/context.ts

@@ -1,49 +1,9 @@
-import type { App } from 'vue'
-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 { isDark } from '../logic/dark'
-import { injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionSlidevContext } from '../constants'
-import { useContext } from '../composables/useContext'
 import type { SlidevContextNav } from '../composables/useNav'
-import { useFixedClicks } from '../composables/useClicks'
 
 export interface SlidevContext {
   nav: SlidevContextNav
   configs: typeof configs
   themeConfigs: ComputedRef<typeof configs['themeConfig']>
 }
-
-export function createSlidevContext() {
-  return {
-    install(app: App) {
-      const context = reactive(useContext())
-      app.provide(injectionRenderContext, ref('none'))
-      app.provide(injectionSlidevContext, context)
-      app.provide(injectionCurrentPage, computed(() => context.nav.currentSlideNo))
-      app.provide(injectionClicksContext, shallowRef(useFixedClicks()))
-
-      // allows controls from postMessages
-      if (__DEV__) {
-        // @ts-expect-error expose global
-        window.__slidev__ = context
-        window.addEventListener('message', ({ data }) => {
-          if (data && data.target === 'slidev') {
-            if (data.type === 'navigate') {
-              nav.go(+data.no, +data.clicks || 0)
-            }
-            else if (data.type === 'css-vars') {
-              const root = document.documentElement
-              for (const [key, value] of Object.entries(data.vars || {}))
-                root.style.setProperty(key, value as any)
-            }
-            else if (data.type === 'color-schema') {
-              isDark.value = data.color === 'dark'
-            }
-          }
-        })
-      }
-    },
-  }
-}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.0-beta.24",
+  "version": "0.48.0-beta.25",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -58,8 +58,8 @@
     "vue": "^3.4.21",
     "vue-demi": "^0.14.7",
     "vue-router": "^4.3.0",
-    "@slidev/parser": "0.48.0-beta.24",
-    "@slidev/types": "0.48.0-beta.24"
+    "@slidev/parser": "0.48.0-beta.25",
+    "@slidev/types": "0.48.0-beta.25"
   },
   "devDependencies": {
     "vite": "^5.1.5"

package/pages/notes.vue

@@ -5,15 +5,17 @@ import { useLocalStorage } from '@vueuse/core'
 import { configs } from '../env'
 import { sharedState } from '../state/shared'
 import { fullscreen } from '../state'
-import { slides, total } from '../logic/nav'
+
 import NoteDisplay from '../internals/NoteDisplay.vue'
 import IconButton from '../internals/IconButton.vue'
+import { useNav } from '../composables/useNav'
 
 const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
   title: `Notes - ${slideTitle}`,
 })
 
+const { slides, total } = useNav()
 const { isFullscreen, toggle: toggleFullscreen } = fullscreen
 
 const scroller = ref<HTMLDivElement>()

package/pages/overview.vue

@@ -3,8 +3,8 @@ import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useHead } from '@unhead/vue'
 import type { ClicksContext, SlideRoute } from '@slidev/types'
 import { configs } from '../env'
-import { getSlidePath, openInEditor, slides } from '../logic/nav'
-import { useFixedClicks } from '../composables/useClicks'
+import { getSlidePath } from '../logic/slides'
+import { createFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
 import { getSlideClass } from '../utils'
 import SlideContainer from '../internals/SlideContainer.vue'
@@ -14,6 +14,7 @@ import IconButton from '../internals/IconButton.vue'
 import NoteEditable from '../internals/NoteEditable.vue'
 import ClicksSlider from '../internals/ClicksSlider.vue'
 import { CLICKS_MAX } from '../constants'
+import { useNav } from '../composables/useNav'
 
 const cardWidth = 450
 
@@ -22,6 +23,8 @@ useHead({
   title: `Overview - ${slideTitle}`,
 })
 
+const { openInEditor, slides } = useNav()
+
 const blocks: Map<number, HTMLElement> = reactive(new Map())
 const activeBlocks = ref<number[]>([])
 const edittingNote = ref<number | null>(null)
@@ -33,7 +36,7 @@ const clicksContextMap = new WeakMap<SlideRoute, ClicksContext>()
 function getClicksContext(route: SlideRoute) {
   // We create a local clicks context to calculate the total clicks of the slide
   if (!clicksContextMap.has(route))
-    clicksContextMap.set(route, useFixedClicks(route, CLICKS_MAX))
+    clicksContextMap.set(route, createFixedClicks(route, CLICKS_MAX))
   return clicksContextMap.get(route)!
 }
 

package/pages/play.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
 import { isEditorVertical, isScreenVertical, showEditor, slideScale, windowSize } from '../state'
-import { isEmbedded, isPrintMode, next, prev } from '../logic/nav'
 import { useSwipeControls } from '../composables/useSwipeControls'
-import { isDrawing } from '../logic/drawings'
 import { registerShortcuts } from '../logic/shortcuts'
 import { configs } from '../env'
 import Controls from '../internals/Controls.vue'
@@ -11,9 +9,14 @@ import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
+import { useNav } from '../composables/useNav'
+import { useDrawings } from '../composables/useDrawings'
 
 registerShortcuts()
 
+const { next, prev, isEmbedded, isPrintMode } = useNav()
+const { isDrawing } = useDrawings()
+
 const root = ref<HTMLDivElement>()
 function onClick(e: MouseEvent) {
   if (showEditor.value)
@@ -79,4 +82,4 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
     </template>
   </div>
   <Controls />
-</template>
+</template>../composables/drawings

package/pages/presenter/print.vue

@@ -2,10 +2,12 @@
 import { computed } from 'vue'
 import { useStyleTag } from '@vueuse/core'
 import { useHead } from '@unhead/vue'
+import { useNav } from '../../composables/useNav'
 import { configs } from '../../env'
-import { slides, total } from '../../logic/nav'
 import NoteDisplay from '../../internals/NoteDisplay.vue'
 
+const { slides, total } = useNav()
+
 useStyleTag(`
 @page {
   size: A4;

package/pages/presenter.vue

@@ -2,7 +2,6 @@
 import { useHead } from '@unhead/vue'
 import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
-import { clicksContext, currentSlideNo, currentSlideRoute, hasNext, nextRoute, queryClicks, slides, total } from '../logic/nav'
 import { useSwipeControls } from '../composables/useSwipeControls'
 import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showOverview, showPresenterCursor } from '../state'
 import { configs } from '../env'
@@ -10,8 +9,7 @@ import { sharedState } from '../state/shared'
 import { registerShortcuts } from '../logic/shortcuts'
 import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'
-import { isDrawing } from '../logic/drawings'
-import { useFixedClicks, usePrimaryClicks } from '../composables/useClicks'
+import { createFixedClicks } from '../composables/useClicks'
 import SlideWrapper from '../internals/SlideWrapper.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
@@ -23,12 +21,27 @@ import SlidesShow from '../internals/SlidesShow.vue'
 import DrawingControls from '../internals/DrawingControls.vue'
 import IconButton from '../internals/IconButton.vue'
 import ClicksSlider from '../internals/ClicksSlider.vue'
+import { useNav } from '../composables/useNav'
+import { useDrawings } from '../composables/useDrawings'
 
 const main = ref<HTMLDivElement>()
 
 registerShortcuts()
 useSwipeControls(main)
 
+const {
+  clicksContext,
+  currentSlideNo,
+  currentSlideRoute,
+  hasNext,
+  nextRoute,
+  slides,
+  queryClicks,
+  getPrimaryClicks,
+  total,
+} = useNav()
+const { isDrawing } = useDrawings()
+
 const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
   title: `Presenter - ${slideTitle}`,
@@ -38,7 +51,7 @@ const notesEditing = ref(false)
 
 const { timer, resetTimer } = useTimer()
 
-const clicksCtxMap = computed(() => slides.value.map(route => useFixedClicks(route)))
+const clicksCtxMap = computed(() => slides.value.map(route => createFixedClicks(route)))
 const nextFrame = computed(() => {
   if (clicksContext.value.current < clicksContext.value.total)
     return [currentSlideRoute.value!, clicksContext.value.current + 1] as const
@@ -106,7 +119,7 @@ onMounted(() => {
         </SlideContainer>
         <ClicksSlider
           :key="currentSlideRoute?.no"
-          :clicks-context="usePrimaryClicks(currentSlideRoute)"
+          :clicks-context="getPrimaryClicks(currentSlideRoute)"
           class="w-full pb2 px4 flex-none"
         />
         <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
@@ -286,4 +299,4 @@ onMounted(() => {
 .grid-section.bottom {
   grid-area: bottom;
 }
-</style>
+</style>../composables/drawings

package/pages/print.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { watchEffect } from 'vue'
 import { windowSize } from '../state'
-import { isPrintMode } from '../logic/nav'
 import PrintContainer from '../internals/PrintContainer.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
+import { useNav } from '../composables/useNav'
+
+const { isPrintMode } = useNav()
 
 watchEffect(() => {
   if (isPrintMode)

package/routes.ts

@@ -1,5 +1,4 @@
 import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
-import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import configs from '#slidev/configs'
 
 export const routes: RouteRecordRaw[] = [
@@ -67,10 +66,3 @@ routes.push({
   path: '/:no',
   component: () => import('./pages/play.vue'),
 })
-
-export const router = createRouter({
-  history: __SLIDEV_HASH_ROUTE__
-    ? createWebHashHistory(import.meta.env.BASE_URL)
-    : createWebHistory(import.meta.env.BASE_URL),
-  routes,
-})