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

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,
-})

package/setup/code-runners.ts

@@ -1,8 +1,8 @@
-/* __imports__ */
 import { createSingletonPromise } from '@antfu/utils'
-import type { CodeRunner, CodeRunnerContext, CodeRunnerOutput, CodeRunnerOutputText, CodeRunnerOutputs, CodeRunnerProviders } from '@slidev/types'
+import type { CodeRunner, CodeRunnerContext, CodeRunnerOutput, CodeRunnerOutputText, CodeRunnerOutputs } from '@slidev/types'
 import type { CodeToHastOptions } from 'shiki'
 import { isDark } from '../logic/dark'
+import setups from '#slidev/setups/code-runners'
 
 export default createSingletonPromise(async () => {
   const runners: Record<string, CodeRunner> = {
@@ -48,15 +48,10 @@ export default createSingletonPromise(async () => {
     }
   }
 
-  // @ts-expect-error injected in runtime
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const injection_arg = runners
-  // eslint-disable-next-line prefer-const
-  let injection_return: CodeRunnerProviders = {}
-
-  /* __async_injections__ */
-
-  Object.assign(runners, injection_return)
+  for (const setup of setups) {
+    const result = await setup(runners)
+    Object.assign(runners, result)
+  }
 
   return {
     highlight,

package/setup/main.ts

@@ -1,10 +1,20 @@
-/* __imports__ */
-
 import type { AppContext } from '@slidev/types'
 import { MotionPlugin } from '@vueuse/motion'
 import TwoSlashFloatingVue from '@shikijs/vitepress-twoslash/client'
+import type { App } from 'vue'
+import { nextTick } from 'vue'
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import { createHead } from '@unhead/vue'
+import { routeForceRefresh } from '../logic/route'
+import { createVClickDirectives } from '../modules/v-click'
+import { createVMarkDirective } from '../modules/v-mark'
+import { routes } from '../routes'
+import setups from '#slidev/setups/main'
+
+import '#slidev/styles'
+import 'shiki-magic-move/style.css'
 
-export default function setupMain(context: AppContext) {
+export default async function setupMain(app: App) {
   function setMaxHeight() {
     // disable the mobile navbar scroll
     // see https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
@@ -13,12 +23,32 @@ export default function setupMain(context: AppContext) {
   setMaxHeight()
   window.addEventListener('resize', setMaxHeight)
 
-  context.app.use(MotionPlugin)
-  context.app.use(TwoSlashFloatingVue as any)
+  const router = createRouter({
+    history: __SLIDEV_HASH_ROUTE__
+      ? createWebHashHistory(import.meta.env.BASE_URL)
+      : createWebHistory(import.meta.env.BASE_URL),
+    routes,
+  })
+
+  app.use(router)
+  app.use(createHead())
+  app.use(createVClickDirectives())
+  app.use(createVMarkDirective())
+  app.use(MotionPlugin)
+  app.use(TwoSlashFloatingVue as any, { container: '#slideshow' })
+
+  const context: AppContext = {
+    app,
+    router,
+  }
 
-  // @ts-expect-error inject in runtime
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const injection_arg = context
+  nextTick(() => {
+    router.afterEach(async () => {
+      await nextTick()
+      routeForceRefresh.value += 1
+    })
+  })
 
-  /* __injections__ */
+  for (const setup of setups)
+    await setup(context)
 }

package/setup/mermaid.ts

@@ -1,15 +1,14 @@
-/* __imports__ */
-
 import type { MermaidOptions } from '@slidev/types'
 import { defineMermaidSetup } from '@slidev/types'
+import setups from '#slidev/setups/mermaid'
 
 export default defineMermaidSetup(() => {
-  // eslint-disable-next-line prefer-const
-  let injection_return: MermaidOptions = {
+  const setupReturn: MermaidOptions = {
     theme: 'default',
   }
 
-  /* __injections__ */
+  for (const setup of setups)
+    Object.assign(setupReturn, setup())
 
-  return injection_return
+  return setupReturn
 })

package/setup/monaco.ts

@@ -22,8 +22,8 @@ import { StandaloneServices } from 'monaco-editor/esm/vs/editor/standalone/brows
 
 import { isDark } from '../logic/dark'
 import configs from '#slidev/configs'
+import setups from '#slidev/setups/monaco'
 
-/* __imports__ */
 window.MonacoEnvironment = {
   getWorker(_, label) {
     if (label === 'json')
@@ -98,13 +98,11 @@ const setup = createSingletonPromise(async () => {
   const { shiki, themes, shikiToMonaco } = await import('#slidev/shiki')
   const highlighter = await shiki
 
-  // @ts-expect-error injected in runtime
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const injection_arg = monaco
-  // eslint-disable-next-line prefer-const
-  let injection_return: MonacoSetupReturn = {}
-
-  /* __async_injections__ */
+  const setupReturn: MonacoSetupReturn = {}
+  for (const setup of setups) {
+    const result = await setup(monaco)
+    Object.assign(setupReturn, result)
+  }
 
   // Use Shiki to highlight Monaco
   shikiToMonaco(highlighter, monaco)
@@ -122,7 +120,7 @@ const setup = createSingletonPromise(async () => {
   return {
     monaco,
     ata,
-    ...injection_return,
+    ...setupReturn,
   }
 })
 

package/setup/root.ts

@@ -1,27 +1,71 @@
-/* __imports__ */
-import { watch } from 'vue'
+import { computed, getCurrentInstance, reactive, ref, shallowRef, watch } from 'vue'
 import { useHead } from '@unhead/vue'
+import { useRouter } from 'vue-router'
 import { configs } from '../env'
 import { initSharedState, onPatch, patch } from '../state/shared'
 import { initDrawingState } from '../state/drawings'
-import { clicksContext, currentSlideNo, getSlidePath, hasPrimarySlide, isNotesViewer, isPresenter } from '../logic/nav'
-import { router } from '../routes'
-import { TRUST_ORIGINS } from '../constants'
-import { skipTransition } from '../composables/hmr'
+import { TRUST_ORIGINS, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionSlidevContext } from '../constants'
+import { skipTransition } from '../logic/hmr'
 import { makeId } from '../logic/utils'
+import { getSlidePath } from '../logic/slides'
+import { createFixedClicks } from '../composables/useClicks'
+import { isDark } from '../logic/dark'
+import { useNav } from '../composables/useNav'
+import setups from '#slidev/setups/root'
 
 export default function setupRoot() {
-  // @ts-expect-error injected in runtime
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const injection_arg = undefined
+  const app = getCurrentInstance()!.appContext.app
 
-  /* __injections__ */
+  const context = reactive({
+    nav: useNav(),
+    configs,
+    themeConfigs: computed(() => configs.themeConfig),
+  })
+  app.provide(injectionRenderContext, ref('none'))
+  app.provide(injectionSlidevContext, context)
+  app.provide(injectionCurrentPage, computed(() => context.nav.currentSlideNo))
+  app.provide(injectionClicksContext, shallowRef(createFixedClicks()))
+
+  // 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') {
+          context.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'
+        }
+      }
+    })
+  }
+
+  // User Setups
+  for (const setup of setups)
+    setup()
 
   const title = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
+
+  const {
+    clicksContext,
+    currentSlideNo,
+    hasPrimarySlide,
+    isNotesViewer,
+    isPresenter,
+  } = useNav()
+
   useHead({
     title,
     htmlAttrs: configs.htmlAttrs,
   })
+
   initSharedState(`${title} - shared`)
   initDrawingState(`${title} - drawings`)
 
@@ -51,6 +95,7 @@ export default function setupRoot() {
       time: new Date().getTime(),
     })
   }
+  const router = useRouter()
   router.afterEach(updateSharedState)
   watch(clicksContext, updateSharedState)
 
@@ -60,7 +105,7 @@ export default function setupRoot() {
     if (state.lastUpdate?.type === 'presenter' && (+state.page !== +currentSlideNo.value || +clicksContext.value.current !== +state.clicks)) {
       skipTransition.value = false
       router.replace({
-        path: getSlidePath(state.page),
+        path: getSlidePath(state.page, isPresenter.value),
         query: {
           ...router.currentRoute.value.query,
           clicks: state.clicks || 0,

package/setup/shortcuts.ts

@@ -1,19 +1,19 @@
-/* __imports__ */
 import { and, not, or } from '@vueuse/math'
 import type { NavOperations, ShortcutOptions } from '@slidev/types'
 import { downloadPDF } from '../utils'
-import { go, goFirst, goLast, next, nextSlide, prev, prevSlide } from '../logic/nav'
 import { toggleDark } from '../logic/dark'
 import { magicKeys, showGotoDialog, showOverview, toggleOverview } from '../state'
-import { drawingEnabled } from '../logic/drawings'
+import { useNav } from '../composables/useNav'
+import { useDrawings } from '../composables/useDrawings'
 import { currentOverviewPage, downOverviewPage, nextOverviewPage, prevOverviewPage, upOverviewPage } from './../logic/overview'
+import setups from '#slidev/setups/shortcuts'
 
 export default function setupShortcuts() {
+  const { go, goFirst, goLast, next, nextSlide, prev, prevSlide } = useNav()
+  const { drawingEnabled } = useDrawings()
   const { escape, space, shift, left, right, up, down, enter, d, g, o, '`': backtick } = magicKeys
 
-  // @ts-expect-error injected in runtime
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const injection_arg: NavOperations = {
+  const context: NavOperations = {
     next,
     prev,
     nextSlide,
@@ -29,8 +29,7 @@ export default function setupShortcuts() {
     showGotoDialog: () => showGotoDialog.value = !showGotoDialog.value,
   }
 
-  // eslint-disable-next-line prefer-const
-  let injection_return: ShortcutOptions[] = [
+  let shortcuts: ShortcutOptions[] = [
     { name: 'next_space', key: and(space, not(shift)), fn: next, autoRepeat: true },
     { name: 'prev_space', key: and(space, shift), fn: prev, autoRepeat: true },
     { name: 'next_right', key: and(right, not(shift), not(showOverview)), fn: next, autoRepeat: true },
@@ -59,11 +58,14 @@ export default function setupShortcuts() {
     },
   ]
 
-  const baseShortcutNames = new Set(injection_return.map(s => s.name))
+  const baseShortcutNames = new Set(shortcuts.map(s => s.name))
 
-  /* __chained_injections__ */
+  for (const setup of setups) {
+    const result = setup(context, shortcuts)
+    shortcuts = shortcuts.concat(result)
+  }
 
-  const remainingBaseShortcutNames = injection_return.filter(s => s.name && baseShortcutNames.has(s.name))
+  const remainingBaseShortcutNames = shortcuts.filter(s => s.name && baseShortcutNames.has(s.name))
   if (remainingBaseShortcutNames.length === 0) {
     const message = [
       '========== WARNING ==========',
@@ -77,5 +79,5 @@ export default function setupShortcuts() {
     console.warn(message)
   }
 
-  return injection_return
+  return shortcuts
 }

package/styles/shiki-twoslash.css

@@ -11,7 +11,7 @@
 }
 
 .twoslash-popup-container {
-  font-size: calc(13px * var(--slidev-slide-scale, 1));
+  font-size: 13px;
 }
 
 .twoslash-popup-container .twoslash-popup-code {

package/composables/useContext.ts

@@ -1,12 +0,0 @@
-import { computed } from 'vue'
-import { configs } from '../env'
-import type { SlidevContext } from '../modules/context'
-import * as nav from '../logic/nav'
-
-export function useContext(): SlidevContext {
-  return {
-    nav: { ...nav }, // Convert the module to a plain object
-    configs,
-    themeConfigs: computed(() => configs.themeConfig),
-  }
-}

package/logic/drawings.ts

@@ -1,161 +0,0 @@
-import { computed, markRaw, nextTick, reactive, ref, watch } from 'vue'
-import type { Brush, Options as DrauuOptions, DrawingMode } from 'drauu'
-import { createDrauu } from 'drauu'
-import { toReactive, useLocalStorage } from '@vueuse/core'
-import { drawingState, onPatch, patch } from '../state/drawings'
-import { configs } from '../env'
-import { isInputting } from '../state'
-import { currentSlideNo, isPresenter } from './nav'
-
-export const brushColors = [
-  '#ff595e',
-  '#ffca3a',
-  '#8ac926',
-  '#1982c4',
-  '#6a4c93',
-  '#ffffff',
-  '#000000',
-]
-
-export const drawingEnabled = useLocalStorage('slidev-drawing-enabled', false)
-export const drawingPinned = useLocalStorage('slidev-drawing-pinned', false)
-export const canUndo = ref(false)
-export const canRedo = ref(false)
-export const canClear = ref(false)
-export const isDrawing = ref(false)
-
-export const brush = toReactive(useLocalStorage<Brush>('slidev-drawing-brush', {
-  color: brushColors[0],
-  size: 4,
-  mode: 'stylus',
-}))
-
-const _mode = ref<DrawingMode | 'arrow'>('stylus')
-const syncUp = computed(() => configs.drawings.syncAll || isPresenter.value)
-let disableDump = false
-
-export const drawingMode = computed({
-  get() {
-    return _mode.value
-  },
-  set(v: DrawingMode | 'arrow') {
-    _mode.value = v
-    if (v === 'arrow') {
-      // eslint-disable-next-line ts/no-use-before-define
-      drauu.mode = 'line'
-      brush.arrowEnd = true
-    }
-    else {
-      // eslint-disable-next-line ts/no-use-before-define
-      drauu.mode = v
-      brush.arrowEnd = false
-    }
-  },
-})
-
-export const drauuOptions: DrauuOptions = reactive({
-  brush,
-  acceptsInputTypes: computed(() => (drawingEnabled.value && (!configs.drawings.presenterOnly || isPresenter.value)) ? undefined : ['pen' as const]),
-  coordinateTransform: false,
-})
-export const drauu = markRaw(createDrauu(drauuOptions))
-
-export function clearDrauu() {
-  drauu.clear()
-  if (syncUp.value)
-    patch(currentSlideNo.value, '')
-}
-
-export function updateState() {
-  canRedo.value = drauu.canRedo()
-  canUndo.value = drauu.canUndo()
-  canClear.value = !!drauu.el?.children.length
-}
-
-export function loadCanvas(page?: number) {
-  disableDump = true
-  const data = drawingState[page || currentSlideNo.value]
-  if (data != null)
-    drauu.load(data)
-  else
-    drauu.clear()
-  updateState()
-  disableDump = false
-}
-
-drauu.on('changed', () => {
-  updateState()
-  if (!disableDump) {
-    const dump = drauu.dump()
-    const key = currentSlideNo.value
-    if ((drawingState[key] || '') !== dump && syncUp.value)
-      patch(key, drauu.dump())
-  }
-})
-
-onPatch((state) => {
-  disableDump = true
-  if (state[currentSlideNo.value] != null)
-    drauu.load(state[currentSlideNo.value] || '')
-  disableDump = false
-  updateState()
-})
-
-nextTick(() => {
-  watch(currentSlideNo, () => {
-    if (!drauu.mounted)
-      return
-    loadCanvas()
-  }, { immediate: true })
-})
-
-drauu.on('start', () => isDrawing.value = true)
-drauu.on('end', () => isDrawing.value = false)
-
-window.addEventListener('keydown', (e) => {
-  if (!drawingEnabled.value || isInputting.value)
-    return
-
-  const noModifier = !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey
-  let handled = true
-  if (e.code === 'KeyZ' && (e.ctrlKey || e.metaKey)) {
-    if (e.shiftKey)
-      drauu.redo()
-    else
-      drauu.undo()
-  }
-  else if (e.code === 'Escape') {
-    drawingEnabled.value = false
-  }
-  else if (e.code === 'KeyL' && noModifier) {
-    drawingMode.value = 'line'
-  }
-  else if (e.code === 'KeyA' && noModifier) {
-    drawingMode.value = 'arrow'
-  }
-  else if (e.code === 'KeyS' && noModifier) {
-    drawingMode.value = 'stylus'
-  }
-  else if (e.code === 'KeyR' && noModifier) {
-    drawingMode.value = 'rectangle'
-  }
-  else if (e.code === 'KeyE' && noModifier) {
-    drawingMode.value = 'ellipse'
-  }
-  else if (e.code === 'KeyC' && noModifier) {
-    clearDrauu()
-  }
-  else if (e.code.startsWith('Digit') && noModifier && +e.code[5] <= brushColors.length) {
-    brush.color = brushColors[+e.code[5] - 1]
-  }
-  else {
-    handled = false
-  }
-
-  if (handled) {
-    e.preventDefault()
-    e.stopPropagation()
-  }
-}, false)
-
-export { drawingState }

package/logic/nav-state.ts

@@ -1,20 +0,0 @@
-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,71 +0,0 @@
-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 { currentRoute, currentSlideRoute, hasPrimarySlide } from './nav-state'
-import { getSlide } from './slides'
-
-export * from './slides'
-export * from './nav-state'
-
-export const clicksContext = computed(() => usePrimaryClicks(currentSlideRoute.value))
-
-const queryClicksRaw = useRouteQuery('clicks', '0')
-export const queryClicks = computed({
-  get() {
-    if (clicksContext.value.disabled)
-      return CLICKS_MAX
-    let v = +(queryClicksRaw.value || 0)
-    if (Number.isNaN(v))
-      v = 0
-    return v
-  },
-  set(v) {
-    queryClicksRaw.value = v.toString()
-  },
-})
-
-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()
-    }
-  },
-  { flush: 'pre', immediate: true },
-)

package/setup/prettier.ts

@@ -1,43 +0,0 @@
-import { format } from 'prettier'
-
-export async function formatCode(code: string, lang: string) {
-  try {
-    let parser = 'babel'
-    let plugins: any[] = []
-
-    switch (lang) {
-      case 'ts':
-      case 'typescript':
-        parser = 'typescript'
-        plugins = [
-          (await import('prettier/plugins/babel')).default,
-          (await import('prettier/plugins/typescript')).default,
-        ]
-        break
-      case 'html':
-        parser = 'html'
-        plugins = [
-          (await import('prettier/plugins/html')).default,
-        ]
-        break
-      default:
-        parser = 'babel'
-        plugins = [
-          (await import('prettier/plugins/babel')).default,
-        ]
-    }
-
-    return format(code, {
-      semi: false,
-      singleQuote: true,
-      tabWidth: 2,
-      useTabs: false,
-      parser,
-      plugins,
-    })
-  }
-  catch (e) {
-    console.error(e)
-    return code
-  }
-}