@slidev/client 0.48.0-beta.8 → 0.48.0

package/internals/NoteEditor.vue

@@ -1,88 +0,0 @@
-<script setup lang="ts">
-import { ignorableWatch, onClickOutside, useVModel } from '@vueuse/core'
-import { ref, watch, watchEffect } from 'vue'
-import { currentSlideId } from '../logic/nav'
-import { useDynamicSlideInfo } from '../logic/note'
-import NoteDisplay from './NoteDisplay.vue'
-
-const props = defineProps({
-  class: {
-    default: '',
-  },
-  editing: {
-    default: false,
-  },
-  style: {
-    default: () => ({}),
-  },
-  placeholder: {
-    default: 'No notes for this slide',
-  },
-})
-
-const emit = defineEmits([
-  'update:editing',
-])
-const editing = useVModel(props, 'editing', emit, { passive: true })
-
-const { info, update } = useDynamicSlideInfo(currentSlideId)
-
-const note = ref('')
-let timer: any
-
-const { ignoreUpdates } = ignorableWatch(
-  note,
-  (v) => {
-    const id = currentSlideId.value
-    clearTimeout(timer)
-    timer = setTimeout(() => {
-      update({ note: v }, id)
-    }, 500)
-  },
-)
-
-watch(
-  info,
-  (v) => {
-    clearTimeout(timer)
-    ignoreUpdates(() => {
-      note.value = v?.note || ''
-    })
-  },
-  { immediate: true, flush: 'sync' },
-)
-
-const input = ref<HTMLTextAreaElement>()
-
-watchEffect(() => {
-  if (editing.value)
-    input.value?.focus()
-})
-
-onClickOutside(input, () => {
-  editing.value = false
-})
-</script>
-
-<template>
-  <NoteDisplay
-    v-if="!editing"
-    class="my--4 border-transparent border-2"
-    :class="[props.class, note ? '' : 'opacity-50']"
-    :style="props.style"
-    :note="note || placeholder"
-    :note-html="info?.noteHTML"
-  />
-  <textarea
-    v-else
-    ref="input"
-    v-model="note"
-    class="prose resize-none overflow-auto outline-none bg-transparent block border-green border-2"
-    style="line-height: 1.75;"
-    :style="props.style"
-    :class="props.class"
-    :placeholder="placeholder"
-    @keydown.esc=" editing = false"
-    @focus="editing = true"
-  />
-</template>

package/internals/SlideWrapper.ts

@@ -1,58 +0,0 @@
-import { computed, defineComponent, h, ref, toRef } from 'vue'
-import type { PropType } from 'vue'
-import { provideLocal } from '@vueuse/core'
-import type { ClicksContext, RenderContext } from '@slidev/types'
-import type { RouteRecordRaw } from 'vue-router'
-import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute } from '../constants'
-
-export default defineComponent({
-  name: 'SlideWrapper',
-  props: {
-    clicksContext: {
-      type: Object as PropType<ClicksContext>,
-      required: true,
-    },
-    renderContext: {
-      type: String,
-      default: 'main',
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    is: {
-      type: Object,
-      required: true,
-    },
-    route: {
-      type: Object as PropType<RouteRecordRaw>,
-      required: true,
-    },
-  },
-  setup(props) {
-    provideLocal(injectionRoute, props.route)
-    provideLocal(injectionCurrentPage, ref(+props.route.path))
-    provideLocal(injectionRenderContext, ref(props.renderContext as RenderContext))
-    provideLocal(injectionActive, toRef(props, 'active'))
-    provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
-
-    const style = computed(() => {
-      const zoom = props.route.meta?.slide?.frontmatter.zoom ?? 1
-      return zoom === 1
-        ? undefined
-        : {
-            width: `${100 / zoom}%`,
-            height: `${100 / zoom}%`,
-            transformOrigin: 'top left',
-            transform: `scale(${zoom})`,
-          }
-    })
-
-    return {
-      style,
-    }
-  },
-  render() {
-    return h(this.$props.is, { style: this.style })
-  },
-})

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 { currentPage, 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(currentPage.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 || currentPage.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 = currentPage.value
-    if ((drawingState[key] || '') !== dump && syncUp.value)
-      patch(key, drauu.dump())
-  }
-})
-
-onPatch((state) => {
-  disableDump = true
-  if (state[currentPage.value] != null)
-    drauu.load(state[currentPage.value] || '')
-  disableDump = false
-  updateState()
-})
-
-nextTick(() => {
-  watch(currentPage, () => {
-    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.ts

@@ -1,278 +0,0 @@
-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 { usePrimaryClicks } from '../composables/useClicks'
-import { useRouteQuery } from './route'
-import { isDrawing } from './drawings'
-
-export { rawRoutes, router }
-
-// 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))
-
-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
-    let v = +(queryClicksRaw.value || 0)
-    if (Number.isNaN(v))
-      v = 0
-    return v
-  },
-  set(v) {
-    queryClicksRaw.value = v.toString()
-  },
-})
-
-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)
-      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,
-    }
-    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)
-}

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