@slidev/client 0.48.0-beta.9 → 0.48.1

package/{logic/note.ts → composables/useSlideInfo.ts}

@@ -9,14 +9,14 @@ export interface UseSlideInfo {
   update: (data: SlidePatch) => Promise<SlideInfo | void>
 }
 
-export function useSlideInfo(id: number | undefined): UseSlideInfo {
-  if (id == null) {
+export function useSlideInfo(no: number): UseSlideInfo {
+  if (no == null) {
     return {
       info: ref() as Ref<SlideInfo | undefined>,
       update: async () => {},
     }
   }
-  const url = `/@slidev/slide/${id}.json`
+  const url = `/@slidev/slide/${no}.json`
   const { data: info, execute } = useFetch(url).json().get()
 
   execute()
@@ -36,12 +36,12 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
   }
 
   if (__DEV__) {
-    import.meta.hot?.on('slidev-update', (payload) => {
-      if (payload.id === id)
+    import.meta.hot?.on('slidev:update-slide', (payload) => {
+      if (payload.no === no)
         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.no === no && info.value.note?.trim() !== payload.note?.trim())
         info.value = { ...info.value, ...payload }
     })
   }
@@ -52,20 +52,17 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
   }
 }
 
-const map: Record<string, UseSlideInfo> = {}
+const map: Record<number, UseSlideInfo> = {}
 
-export function useDynamicSlideInfo(id: MaybeRef<number | undefined>) {
-  function get(id: number | undefined) {
-    const i = `${id}`
-    if (!map[i])
-      map[i] = useSlideInfo(id)
-    return map[i]
+export function useDynamicSlideInfo(no: MaybeRef<number>) {
+  function get(no: number) {
+    return map[no] ??= useSlideInfo(no)
   }
 
   return {
-    info: computed(() => get(unref(id)).info.value),
+    info: computed(() => get(unref(no)).info.value),
     update: async (data: SlidePatch, newId?: number) => {
-      const info = get(newId ?? unref(id))
+      const info = get(newId ?? unref(no))
       const newData = await info.update(data)
       if (newData)
         info.info.value = newData

package/composables/useSwipeControls.ts

@@ -0,0 +1,43 @@
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+import { timestamp, usePointerSwipe } from '@vueuse/core'
+import { useNav } from '../composables/useNav'
+import { useDrawings } from './useDrawings'
+
+export function useSwipeControls(root: Ref<HTMLElement | undefined>) {
+  const { next, nextSlide, prev, prevSlide } = useNav()
+  const { isDrawing } = useDrawings()
+
+  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()
+      }
+    },
+  })
+}

package/composables/useTocTree.ts

@@ -0,0 +1,81 @@
+import type { SlideRoute, TocItem } from '@slidev/types'
+import type { ComputedRef, Ref } from 'vue'
+import { computed } from 'vue'
+import { getSlidePath } from '../logic/slides'
+
+function addToTree(tree: TocItem[], route: SlideRoute, 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({
+      no: route.no,
+      children: [],
+      level,
+      path: getSlidePath(route.meta.slide?.frontmatter?.routeAlias ?? route.no, false),
+      hideInToc: Boolean(route.meta?.slide?.frontmatter?.hideInToc),
+      title: route.meta?.slide?.title,
+    })
+  }
+}
+
+function getTreeWithActiveStatuses(
+  tree: TocItem[],
+  currentRoute?: SlideRoute,
+  hasActiveParent = false,
+  parent?: TocItem,
+  currentSlideNo?: Ref<number>,
+): TocItem[] {
+  return tree.map((item: TocItem) => {
+    const clone = {
+      ...item,
+      active: item.no === currentSlideNo?.value,
+      hasActiveParent,
+    }
+    if (clone.children.length > 0) {
+      clone.children = getTreeWithActiveStatuses(
+        clone.children,
+        currentRoute,
+        clone.active || clone.hasActiveParent,
+        clone,
+        currentSlideNo,
+      )
+    }
+    if (parent && (clone.active || clone.activeParent))
+      parent.activeParent = true
+    return clone
+  })
+}
+
+function filterTree(tree: TocItem[], level = 1): TocItem[] {
+  return tree
+    .filter((item: TocItem) => !item.hideInToc)
+    .map((item: TocItem) => ({
+      ...item,
+      children: filterTree(item.children, level + 1),
+    }))
+}
+
+export function useTocTree(
+  slides: Ref<SlideRoute[]>,
+  currentSlideNo: Ref<number>,
+  currentSlideRoute: Ref<SlideRoute>,
+): ComputedRef<TocItem[]> {
+  const rawTree = computed(() => slides.value
+    .filter((route: SlideRoute) => route.meta?.slide?.title)
+    .reduce((acc: TocItem[], route: SlideRoute) => {
+      addToTree(acc, route)
+      return acc
+    }, []))
+
+  const treeWithActiveStatuses = computed(() => getTreeWithActiveStatuses(
+    rawTree.value,
+    currentSlideRoute.value,
+    undefined,
+    undefined,
+    currentSlideNo,
+  ))
+
+  return computed(() => filterTree(treeWithActiveStatuses.value))
+}

package/composables/useViewTransition.ts

@@ -1,5 +1,6 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { getSlide } from '../logic/slides'
 
 export function useViewTransition() {
   const router = useRouter()
@@ -11,13 +12,15 @@ export function useViewTransition() {
   const supportViewTransition = typeof document !== 'undefined' && 'startViewTransition' in document
 
   router.beforeResolve((to, from) => {
-    const fromNo = from.meta.slide?.no
-    const toNo = to.meta.slide?.no
+    const fromMeta = getSlide(from.params.no as string)?.meta
+    const toMeta = getSlide(to.params.no as string)?.meta
+    const fromNo = fromMeta?.slide?.no
+    const toNo = toMeta?.slide?.no
     if (
       !(
         fromNo !== undefined && toNo !== undefined && (
-          (from.meta.transition === 'view-transition' && fromNo < toNo)
-          || (to.meta.transition === 'view-transition' && toNo < fromNo)
+          (fromMeta?.transition === 'view-transition' && fromNo < toNo)
+          || (toMeta?.transition === 'view-transition' && toNo < fromNo)
         )
       )
     ) {

package/constants.ts

@@ -1,6 +1,5 @@
 import type { ComputedRef, InjectionKey, Ref, UnwrapNestedRefs } from 'vue'
-import type { RouteRecordRaw } from 'vue-router'
-import type { ClicksContext, RenderContext } from '@slidev/types'
+import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
 import type { SlidevContext } from './modules/context'
 
 // Here we use string literal instead of symbols to make HMR more stable
@@ -9,7 +8,7 @@ export const injectionClicksContext = '$$slidev-clicks-context' as unknown as In
 export const injectionCurrentPage = '$$slidev-page' as unknown as InjectionKey<Ref<number>>
 export const injectionSlideScale = '$$slidev-slide-scale' as unknown as InjectionKey<ComputedRef<number>>
 export const injectionSlidevContext = '$$slidev-context' as unknown as InjectionKey<UnwrapNestedRefs<SlidevContext>>
-export const injectionRoute = '$$slidev-route' as unknown as InjectionKey<RouteRecordRaw>
+export const injectionRoute = '$$slidev-route' as unknown as InjectionKey<SlideRoute>
 export const injectionRenderContext = '$$slidev-render-context' as unknown as InjectionKey<Ref<RenderContext>>
 export const injectionActive = '$$slidev-active' as unknown as InjectionKey<Ref<boolean>>
 export const injectionFrontmatter = '$$slidev-fontmatter' as unknown as InjectionKey<Record<string, any>>
@@ -22,6 +21,8 @@ export const CLASS_VCLICK_HIDDEN_EXP = 'slidev-vclick-hidden-explicitly'
 export const CLASS_VCLICK_CURRENT = 'slidev-vclick-current'
 export const CLASS_VCLICK_PRIOR = 'slidev-vclick-prior'
 
+export const CLICKS_MAX = 999999
+
 export const TRUST_ORIGINS = [
   'localhost',
   '127.0.0.1',

package/context.ts

@@ -1,6 +1,5 @@
-import { shallowRef, toRef } from 'vue'
+import { ref, toRef } from 'vue'
 import { injectLocal, objectOmit, provideLocal } from '@vueuse/core'
-import { useFixedClicks } from './composables/useClicks'
 import {
   FRONTMATTER_FIELDS,
   HEADMATTER_FIELDS,
@@ -9,23 +8,23 @@ import {
   injectionFrontmatter,
   injectionRenderContext,
   injectionRoute,
+  injectionSlideScale,
   injectionSlidevContext,
 } from './constants'
 
-const clicksContextFallback = shallowRef(useFixedClicks()[1])
-
 /**
  * Get the current slide context, should be called inside the setup function of a component inside slide
  */
 export function useSlideContext() {
   const $slidev = injectLocal(injectionSlidevContext)!
   const $nav = toRef($slidev, 'nav')
-  const $clicksContext = injectLocal(injectionClicksContext, clicksContextFallback)!.value
+  const $clicksContext = injectLocal(injectionClicksContext)!.value
   const $clicks = toRef($clicksContext, 'current')
   const $page = injectLocal(injectionCurrentPage)!
   const $renderContext = injectLocal(injectionRenderContext)!
   const $frontmatter = injectLocal(injectionFrontmatter, {})
   const $route = injectLocal(injectionRoute, undefined)
+  const $scale = injectLocal(injectionSlideScale, ref(1))!
 
   return {
     $slidev,
@@ -36,9 +35,15 @@ export function useSlideContext() {
     $route,
     $renderContext,
     $frontmatter,
+    $scale,
   }
 }
 
+export type SlideContext = ReturnType<typeof useSlideContext>
+
+/**
+ * @internal
+ */
 export function provideFrontmatter(frontmatter: Record<string, any>) {
   provideLocal(injectionFrontmatter, frontmatter)
 
@@ -48,7 +53,7 @@ export function provideFrontmatter(frontmatter: Record<string, any>) {
   } = useSlideContext()
 
   // update frontmatter in router to make HMR work better
-  const route = $slidev.nav.rawRoutes.find(i => i.path === String($page.value))
+  const route = $slidev.nav.slides.find(i => i.no === $page.value)
   if (route?.meta?.slide?.frontmatter) {
     for (const key of Object.keys(route.meta.slide.frontmatter)) {
       if (!(key in frontmatter))
@@ -61,6 +66,8 @@ export function provideFrontmatter(frontmatter: Record<string, any>) {
 /**
  * Convert frontmatter options to props for v-bind
  * It removes known options fields, and expose an extra `frontmatter` field that contains full frontmatter
+ *
+ * @internal
  */
 export function frontmatterToProps(frontmatter: Record<string, any>, pageNo: number) {
   return {

package/env.ts

@@ -1,25 +1,16 @@
-import type { SlidevConfig } from '@slidev/types'
-import type { UnwrapNestedRefs } from 'vue'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { objectMap } from '@antfu/utils'
+import configs from '#slidev/configs'
 
-// @ts-expect-error missing types
-import _configs from '/@slidev/configs'
-import type { SlidevContext } from './modules/context'
+export { configs }
+
+export const slideAspect = ref(configs.aspectRatio ?? (16 / 9))
+export const slideWidth = ref(configs.canvasWidth ?? 980)
 
-export const configs = _configs as SlidevConfig
-export const slideAspect = configs.aspectRatio ?? (16 / 9)
-export const slideWidth = configs.canvasWidth ?? 980
 // To honor the aspect ratio more as possible, we need to approximate the height to the next integer.
 // Doing this, we will prevent on print, to create an additional empty white page after each page.
-export const slideHeight = Math.ceil(slideWidth / slideAspect)
+export const slideHeight = computed(() => Math.ceil(slideWidth.value / slideAspect.value))
 
 export const themeVars = computed(() => {
   return objectMap(configs.themeConfig || {}, (k, v) => [`--slidev-theme-${k}`, v])
 })
-
-declare module 'vue' {
-  interface ComponentCustomProperties {
-    $slidev: UnwrapNestedRefs<SlidevContext>
-  }
-}

package/index.html

@@ -8,6 +8,7 @@
 <body>
   <div id="app"></div>
   <script type="module" src="__ENTRY__"></script>
+  <div id="mermaid-rendering-container"></div>
   <!-- body -->
 </body>
 </html>

package/index.ts

@@ -0,0 +1,12 @@
+/**
+ * This file is the public APIs that you might use in your app.
+ *
+ * The other files despite they are accessable, are not meant to be used directly, breaking changes might happen.
+ */
+export { useSlideContext } from './context'
+export { useNav } from './composables/useNav'
+export { useDrawings } from './composables/useDrawings'
+export { useDarkMode } from './composables/useDarkMode'
+
+export * from './layoutHelper'
+export * from './env'

package/internals/ClicksSlider.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import type { ClicksContext } from '@slidev/types'
+import { computed } from 'vue'
+import { CLICKS_MAX } from '../constants'
+
+const props = defineProps<{
+  clicksContext: ClicksContext
+}>()
+
+const total = computed(() => props.clicksContext.total)
+const current = computed({
+  get() {
+    return props.clicksContext.current > total.value ? -1 : props.clicksContext.current
+  },
+  set(value: number) {
+    // eslint-disable-next-line vue/no-mutating-props
+    props.clicksContext.current = value
+  },
+})
+
+const range = computed(() => Array.from({ length: total.value + 1 }, (_, i) => i))
+
+function onMousedown() {
+  if (current.value < 0 || current.value > total.value)
+    current.value = 0
+}
+</script>
+
+<template>
+  <div
+    class="flex gap-0.5 items-center select-none"
+    :title="`Clicks in this slide: ${total}`"
+    :class="total ? '' : 'op50'"
+  >
+    <div class="flex gap-1 items-center min-w-16 tabular-nums">
+      <carbon:cursor-1 text-sm op50 />
+      <template v-if="current >= 0 && current !== CLICKS_MAX">
+        <div flex-auto />
+        <span text-primary>{{ current }}</span>
+        <span op25>/</span>
+      </template>
+      <span op50>{{ total }}</span>
+    </div>
+    <div
+      relative flex-auto h5 flex="~"
+      @dblclick="current = clicksContext.total"
+    >
+      <div
+        v-for="i of range" :key="i"
+        border="y main" of-hidden relative
+        :class="[
+          i === 0 ? 'rounded-l border-l' : '',
+          i === total ? 'rounded-r border-r' : '',
+        ]"
+        :style="{ width: total > 0 ? `${1 / total * 100}%` : '100%' }"
+      >
+        <div absolute inset-0 :class="i <= current ? 'bg-primary op20' : ''" />
+        <div
+          :class="[
+            +i === +current ? 'text-primary font-bold op100 border-primary' : 'op30 border-main',
+            i === 0 ? 'rounded-l' : '',
+            i === total ? 'rounded-r' : 'border-r-2',
+          ]"
+          w-full h-full text-xs flex items-center justify-center z-1
+        >
+          {{ i }}
+        </div>
+      </div>
+      <input
+        v-model="current"
+        class="range" absolute inset-0
+        type="range" :min="0" :max="total" :step="1" z-10 op0
+        :style="{ '--thumb-width': `${1 / (total + 1) * 100}%` }"
+        @mousedown="onMousedown"
+        @focus="event => (event.currentTarget as HTMLElement)?.blur()"
+      >
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.range {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}
+.range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 100%;
+  width: var(--thumb-width, 0.5rem);
+}
+
+.range::-moz-range-thumb {
+  height: 100%;
+  width: var(--thumb-width, 0.5rem);
+}
+</style>

package/internals/CodeRunner.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { debounce, toArray } from '@antfu/utils'
+import { useVModel } from '@vueuse/core'
+import type { CodeRunnerOutput } from '@slidev/types'
+import { computed, ref, shallowRef, watch } from 'vue'
+import { useSlideContext } from '../context'
+import setupCodeRunners from '../setup/code-runners'
+import { useNav } from '../composables/useNav'
+import IconButton from './IconButton.vue'
+import DomElement from './DomElement.vue'
+
+const props = defineProps<{
+  modelValue: string
+  lang: string
+  autorun: boolean | 'once'
+  height?: string
+  highlightOutput: boolean
+  runnerOptions?: Record<string, unknown>
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const { isPrintMode } = useNav()
+
+const code = useVModel(props, 'modelValue', emit)
+
+const { $renderContext } = useSlideContext()
+const disabled = computed(() => !['slide', 'presenter'].includes($renderContext.value))
+
+const autorun = isPrintMode.value ? 'once' : props.autorun
+const isRunning = ref(autorun)
+const outputs = shallowRef<CodeRunnerOutput[]>()
+const runCount = ref(0)
+const highlightFn = ref<(code: string, lang: string) => string>()
+
+const triggerRun = debounce(200, async () => {
+  if (disabled.value)
+    return
+
+  const { highlight, run } = await setupCodeRunners()
+  highlightFn.value = highlight
+
+  const setAsRunning = setTimeout(() => {
+    isRunning.value = true
+  }, 500)
+
+  outputs.value = toArray(await run(code.value, props.lang, props.runnerOptions ?? {}))
+  runCount.value += 1
+  isRunning.value = false
+
+  clearTimeout(setAsRunning)
+})
+
+if (autorun === 'once')
+  triggerRun()
+else if (autorun)
+  watch(code, triggerRun, { immediate: true })
+</script>
+
+<template>
+  <div
+    class="relative flex flex-col rounded-b border-t border-main"
+    :style="{ height: props.height }"
+    data-waitfor=".slidev-runner-output"
+  >
+    <div v-if="disabled" class="text-sm text-center opacity-50">
+      Code is disabled in the "{{ $renderContext }}" mode
+    </div>
+    <div v-else-if="isRunning" class="text-sm text-center opacity-50">
+      Running...
+    </div>
+    <div v-else-if="!outputs?.length" class="text-sm text-center opacity-50">
+      Click the play button to run the code
+    </div>
+    <div v-else :key="`run-${runCount}`" class="slidev-runner-output">
+      <template v-for="output, _idx1 of outputs" :key="_idx1">
+        <div v-if="'html' in output" v-html="output.html" />
+        <div v-else-if="'error' in output" class="text-red-500">
+          {{ output.error }}
+        </div>
+        <DomElement v-else-if="'element' in output" :element="output.element" />
+        <div v-else class="output-line">
+          <template
+            v-for="item, idx2 in toArray(output)"
+            :key="idx2"
+          >
+            <span
+              v-if="item.highlightLang && highlightFn"
+              class="highlighted"
+              v-html="highlightFn(item.text, item.highlightLang)"
+            />
+            <span v-else :class="item.class">{{ item.text }}</span>
+            <span v-if="idx2 < toArray(output).length - 1" class="separator">,</span>
+          </template>
+        </div>
+      </template>
+    </div>
+  </div>
+  <div v-if="code.trim()" class="absolute right-1 top-1 max-h-full flex gap-1">
+    <IconButton class="w-8 h-8 max-h-full flex justify-center items-center" title="Run code" @click="triggerRun">
+      <carbon:play />
+    </IconButton>
+  </div>
+</template>
+
+<style lang="postcss">
+.slidev-runner-output {
+  @apply px-5 py-3 flex-grow text-xs leading-[.8rem] font-$slidev-code-font-family select-text;
+}
+
+.slidev-runner-output .log-type {
+  @apply font-bold op-70;
+
+  &.DBG {
+    @apply text-gray-500;
+  }
+
+  &.LOG {
+    @apply text-blue-500;
+  }
+
+  &.WRN {
+    @apply text-orange-500;
+  }
+
+  &.ERR {
+    @apply text-red-500;
+  }
+}
+
+.slidev-runner-output .output-line {
+  @apply flex my-1 w-full;
+}
+
+.slidev-runner-output .separator {
+  @apply op-40 mr-1;
+}
+
+.slidev-runner-output .highlighted > pre {
+  @apply inline text-wrap !bg-transparent;
+}
+</style>

package/internals/Controls.vue

@@ -2,7 +2,7 @@
 import { shallowRef } from 'vue'
 import { showInfoDialog, showOverview, showRecordingDialog } from '../state'
 import { configs } from '../env'
-import SlidesOverview from './SlidesOverview.vue'
+import QuickOverview from './QuickOverview.vue'
 import InfoDialog from './InfoDialog.vue'
 import Goto from './Goto.vue'
 
@@ -15,7 +15,7 @@ if (__SLIDEV_FEATURE_RECORD__) {
 </script>
 
 <template>
-  <SlidesOverview v-model="showOverview" />
+  <QuickOverview v-model="showOverview" />
   <Goto />
   <WebCamera v-if="WebCamera" />
   <RecordingDialog v-if="RecordingDialog" v-model="showRecordingDialog" />

package/internals/DomElement.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+
+const props = defineProps<{
+  element: HTMLElement
+}>()
+
+const container = ref<HTMLElement>()
+
+watchEffect(() => {
+  if (container.value)
+    container.value.appendChild(props.element)
+})
+</script>
+
+<template>
+  <div ref="container" />
+</template>