@slidev/client 0.49.4 → 0.49.5

package/builtin/Arrow.vue

@@ -9,6 +9,8 @@ Simple Arrow
 -->
 
 <script setup lang="ts">
+import { ref } from 'vue'
+import { onClickOutside } from '@vueuse/core'
 import { makeId } from '../logic/utils'
 
 defineProps<{
@@ -18,38 +20,53 @@ defineProps<{
   y2: number | string
   width?: number | string
   color?: string
+  twoWay?: boolean
 }>()
 
+const emit = defineEmits(['dblclick', 'clickOutside'])
+
 const id = makeId()
+
+const markerAttrs = {
+  markerUnits: 'strokeWidth',
+  markerHeight: 7,
+  refY: 3.5,
+  orient: 'auto',
+}
+
+const clickArea = ref<HTMLElement>()
+onClickOutside(clickArea, () => emit('clickOutside'))
 </script>
 
 <template>
   <svg
-    class="absolute left-0 top-0 pointer-events-none"
+    class="absolute left-0 top-0"
     :width="Math.max(+x1, +x2) + 50"
     :height="Math.max(+y1, +y2) + 50"
   >
     <defs>
-      <marker
-        :id="id"
-        markerUnits="strokeWidth"
-        :markerWidth="10"
-        :markerHeight="7"
-        refX="9"
-        refY="3.5"
-        orient="auto"
-      >
-        <polygon points="0 0, 10 3.5, 0 7" :fill="color || 'currentColor'" />
+      <marker :id="id" markerWidth="10" refX="9" v-bind="markerAttrs">
+        <polygon points="0 0, 10 3.5, 0 7" :fill="color || 'currentColor'" @dblclick="emit('dblclick')" />
+      </marker>
+      <marker v-if="twoWay" :id="`${id}-rev`" markerWidth="20" refX="11" v-bind="markerAttrs">
+        <polygon points="20 0, 10 3.5, 20 7" :fill="color || 'currentColor'" @dblclick="emit('dblclick')" />
       </marker>
     </defs>
     <line
-      :x1="+x1"
-      :y1="+y1"
-      :x2="+x2"
-      :y2="+y2"
+      :x1 :y1 :x2 :y2
       :stroke="color || 'currentColor'"
       :stroke-width="width || 2"
       :marker-end="`url(#${id})`"
+      :marker-start="twoWay ? `url(#${id}-rev)` : 'none'"
+      @dblclick="emit('dblclick')"
+    />
+    <line
+      ref="clickArea"
+      :x1 :y1 :x2 :y2
+      stroke="transparent"
+      stroke-linecap="round"
+      :stroke-width="20"
+      @dblclick="emit('dblclick')"
     />
   </svg>
 </template>

package/builtin/Monaco.vue

@@ -33,6 +33,7 @@ const props = withDefaults(defineProps<{
   editorOptions?: monaco.editor.IEditorOptions
   ata?: boolean
   runnable?: boolean
+  writable?: string
   autorun?: boolean | 'once'
   showOutputAt?: RawAtValue
   outputHeight?: string
@@ -52,6 +53,7 @@ const props = withDefaults(defineProps<{
 
 const code = ref(lz.decompressFromBase64(props.codeLz).trimEnd())
 const diff = props.diffLz && ref(lz.decompressFromBase64(props.diffLz).trimEnd())
+const isWritable = computed(() => props.writable && !props.readonly && __DEV__)
 
 const langMap: Record<string, string> = {
   ts: 'typescript',
@@ -151,6 +153,7 @@ onMounted(async () => {
       contentHeight.value = newHeight
       nextTick(() => editableEditor.layout())
     })
+
     editableEditor = editor
   }
   loadTypes.value = () => {
@@ -173,6 +176,23 @@ onMounted(async () => {
         : /* BELOW */ `` // reset
     }
   }
+
+  editableEditor.addAction({
+    id: 'slidev-save',
+    label: 'Save',
+    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS],
+    run: () => {
+      if (!isWritable.value || !import.meta.hot?.send) {
+        console.warn('[Slidev] this monaco editor is not writable, save action is ignored.')
+        return
+      }
+      import.meta.hot.send('slidev:monaco-write', {
+        file: props.writable!,
+        content: editableEditor.getValue(),
+      })
+    },
+  })
+
   nextTick(() => monaco.editor.remeasureFonts())
 })
 </script>

package/builtin/ShikiMagicMove.vue

@@ -1,18 +1,33 @@
 <script setup lang="ts">
 import { ShikiMagicMovePrecompiled } from 'shiki-magic-move/vue'
 import type { KeyedTokensInfo } from 'shiki-magic-move/types'
+import type { PropType } from 'vue'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import lz from 'lz-string'
 import { useSlideContext } from '../context'
 import { makeId, updateCodeHighlightRange } from '../logic/utils'
 import { useNav } from '../composables/useNav'
 import { CLICKS_MAX } from '../constants'
+import { configs } from '../env'
 
-const props = defineProps<{
-  at?: string | number
-  stepsLz: string
-  stepRanges: string[][]
-}>()
+const props = defineProps({
+  at: {
+    type: [String, Number],
+    default: '+1',
+  },
+  stepsLz: {
+    type: String,
+    required: true,
+  },
+  stepRanges: {
+    type: Array as PropType<string[][]>,
+    required: true,
+  },
+  lines: {
+    type: Boolean,
+    default: configs.lineNumbers,
+  },
+})
 
 const steps = JSON.parse(lz.decompressFromBase64(props.stepsLz)) as KeyedTokensInfo[]
 const { $clicksContext: clicks, $scale: scale, $zoom: zoom } = useSlideContext()
@@ -37,7 +52,7 @@ onMounted(() => {
     throw new Error('[slidev] The length of stepRanges does not match the length of steps, this is an internal error.')
 
   const clickCounts = ranges.value.map(s => s.length).reduce((a, b) => a + b, 0)
-  const clickInfo = clicks.calculateSince(props.at ?? '+1', clickCounts - 1)
+  const clickInfo = clicks.calculateSince(props.at, clickCounts - 1)
   clicks.register(id, clickInfo)
 
   watch(

package/builtin/VDrag.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
   markdownSource?: DragElementMarkdownSource
 }>()
 
-const { id, container, containerStyle, mounted, unmounted, startDragging } = useDragElement(null, props.pos, props.markdownSource)
+const { dragId, container, containerStyle, mounted, unmounted, startDragging } = useDragElement(null, props.pos, props.markdownSource)
 
 onMounted(mounted)
 onUnmounted(unmounted)
@@ -17,7 +17,7 @@ onUnmounted(unmounted)
 <template>
   <div
     ref="container"
-    :data-drag-id="id"
+    :data-drag-id="dragId"
     :style="containerStyle"
     class="p-1"
     @dblclick="startDragging"

package/builtin/VDragArrow.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted } from 'vue'
+import type { DragElementMarkdownSource } from '../composables/useDragElements'
+import { useDragElement } from '../composables/useDragElements'
+import Arrow from './Arrow.vue'
+
+const props = defineProps<{
+  pos?: string
+  markdownSource?: DragElementMarkdownSource
+  width?: number | string
+  color?: string
+  twoWay?: boolean
+}>()
+
+const { dragId, mounted, unmounted, startDragging, stopDragging, x0, y0, width, height } = useDragElement(null, props.pos ?? '100,100,300,300', props.markdownSource, true)
+
+onMounted(mounted)
+onUnmounted(unmounted)
+
+const x1 = computed(() => x0.value - width.value / 2)
+const y1 = computed(() => y0.value - height.value / 2)
+const x2 = computed(() => x0.value + width.value / 2)
+const y2 = computed(() => y0.value + height.value / 2)
+</script>
+
+<template>
+  <Arrow
+    :x1 :y1 :x2 :y2
+    :data-drag-id="dragId"
+    :width="props.width"
+    :color="props.color"
+    :two-way="props.twoWay"
+    @dblclick="startDragging"
+    @click-outside="stopDragging"
+  />
+</template>

package/composables/useDragElements.ts

@@ -68,7 +68,8 @@ export function useDragElementsUpdater(no: number) {
       let replaced = false
 
       section = type === 'prop'
-        ? section.replace(/<(v-?drag)(.*?)>/gi, (full, tag, attrs, index) => {
+      // eslint-disable-next-line regexp/no-super-linear-backtracking
+        ? section.replace(/<(v-?drag-?\w*)(.*?)>/gi, (full, tag, attrs, index) => {
           if (index === idx) {
             replaced = true
             const posMatch = attrs.match(/pos=".*?"/)
@@ -112,7 +113,7 @@ export function useDragElementsUpdater(no: number) {
   }
 }
 
-export function useDragElement(directive: DirectiveBinding | null, posRaw?: string | number | number[], markdownSource?: DragElementMarkdownSource) {
+export function useDragElement(directive: DirectiveBinding | null, posRaw?: string | number | number[], markdownSource?: DragElementMarkdownSource, isArrow?: boolean) {
   function inject<T>(key: InjectionKey<T> | string): T | undefined {
     return directive
       ? directiveInject(directive, key)
@@ -129,7 +130,7 @@ export function useDragElement(directive: DirectiveBinding | null, posRaw?: stri
   const enabled = ['slide', 'presenter'].includes(renderContext.value)
 
   let dataSource: DragElementDataSource = directive ? 'directive' : 'prop'
-  let id: string = makeId()
+  let dragId: string = makeId()
   let pos: number[] | undefined
   if (Array.isArray(posRaw)) {
     pos = posRaw
@@ -139,8 +140,8 @@ export function useDragElement(directive: DirectiveBinding | null, posRaw?: stri
   }
   else if (posRaw != null) {
     dataSource = 'frontmatter'
-    id = `${posRaw}`
-    posRaw = frontmatter?.dragPos?.[id]
+    dragId = `${posRaw}`
+    posRaw = frontmatter?.dragPos?.[dragId]
     pos = (posRaw as string)?.split(',').map(Number)
   }
 
@@ -149,12 +150,12 @@ export function useDragElement(directive: DirectiveBinding | null, posRaw?: stri
 
   const watchStopHandles: WatchStopHandle[] = [stopWatchBounds]
 
-  const autoHeight = posRaw != null && !Number.isFinite(pos?.[3])
+  const autoHeight = !isArrow && posRaw != null && !Number.isFinite(pos?.[3])
   pos ??= [Number.NaN, Number.NaN, 0]
   const width = ref(pos[2])
   const x0 = ref(pos[0] + pos[2] / 2)
 
-  const rotate = ref(pos[4] ?? 0)
+  const rotate = ref(isArrow ? 0 : (pos[4] ?? 0))
   const rotateRad = computed(() => rotate.value * Math.PI / 180)
   const rotateSin = computed(() => Math.sin(rotateRad.value))
   const rotateCos = computed(() => Math.cos(rotateRad.value))
@@ -163,7 +164,9 @@ export function useDragElement(directive: DirectiveBinding | null, posRaw?: stri
   const bounds = ref({ left: 0, top: 0, width: 0, height: 0 })
   const actualHeight = ref(0)
   function updateBounds() {
-    const rect = container.value!.getBoundingClientRect()
+    if (!container.value)
+      return
+    const rect = container.value.getBoundingClientRect()
     bounds.value = {
       left: rect.left / zoom.value,
       top: rect.top / zoom.value,
@@ -175,32 +178,36 @@ export function useDragElement(directive: DirectiveBinding | null, posRaw?: stri
   watchStopHandles.push(watch(width, updateBounds, { flush: 'post' }))
 
   const configuredHeight = ref(pos[3] ?? 0)
-  const height = computed({
-    get: () => (autoHeight ? actualHeight.value : configuredHeight.value) || 0,
-    set: v => !autoHeight && (configuredHeight.value = v),
-  })
-  const configuredY0 = ref(pos[1])
-  const y0 = computed({
-    get: () => configuredY0.value + height.value / 2,
-    set: v => configuredY0.value = v - height.value / 2,
-  })
-
-  const containerStyle = computed<CSSProperties>(() => {
+  const height = autoHeight
+    ? computed({
+      get: () => (autoHeight ? actualHeight.value : configuredHeight.value) || 0,
+      set: v => !autoHeight && (configuredHeight.value = v),
+    })
+    : configuredHeight
+  const configuredY0 = autoHeight ? ref(pos[1]) : ref(pos[1] + pos[3] / 2)
+  const y0 = autoHeight
+    ? computed({
+      get: () => configuredY0.value + height.value / 2,
+      set: v => configuredY0.value = v - height.value / 2,
+    })
+    : configuredY0
+
+  const containerStyle = computed(() => {
     return Number.isFinite(x0.value)
       ? {
-          position: 'absolute',
-          zIndex: 100,
-          left: `${x0.value - width.value / 2}px`,
-          top: `${y0.value - height.value / 2}px`,
-          width: `${width.value}px`,
-          height: autoHeight ? undefined : `${height.value}px`,
-          transformOrigin: 'center center',
-          transform: `rotate(${rotate.value}deg)`,
-        }
+        position: 'absolute',
+        zIndex: 100,
+        left: `${x0.value - width.value / 2}px`,
+        top: `${y0.value - height.value / 2}px`,
+        width: `${width.value}px`,
+        height: autoHeight ? undefined : `${height.value}px`,
+        transformOrigin: 'center center',
+        transform: `rotate(${rotate.value}deg)`,
+      } satisfies CSSProperties
       : {
-          position: 'absolute',
-          zIndex: 100,
-        }
+        position: 'absolute',
+        zIndex: 100,
+      } satisfies CSSProperties
   })
 
   watchStopHandles.push(
@@ -218,15 +225,16 @@ export function useDragElement(directive: DirectiveBinding | null, posRaw?: stri
         if (dataSource === 'directive')
           posStr = `[${posStr}]`
 
-        updater.value(id, posStr, dataSource, markdownSource)
+        updater.value(dragId, posStr, dataSource, markdownSource)
       },
     ),
   )
 
   const state = {
-    id,
+    dragId,
     dataSource,
     markdownSource,
+    isArrow,
     zoom,
     autoHeight,
     x0,

package/env.ts

@@ -17,4 +17,4 @@ export const themeVars = computed(() => {
   return objectMap(configs.themeConfig || {}, (k, v) => [`--slidev-theme-${k}`, v])
 })
 
-export const slidesTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
+export const slidesTitle = configs.slidesTitle

package/internals/DragControl.vue

@@ -10,14 +10,14 @@ import { slideHeight, slideWidth } from '../env'
 import { magicKeys } from '../state'
 
 const { data } = defineProps<{ data: DragElementState }>()
-const { id, zoom, autoHeight, x0, y0, width, height, rotate } = data
+const { dragId, zoom, autoHeight, x0, y0, width, height, rotate, isArrow } = data
 
 const slideScale = inject(injectionSlideScale, ref(1))
 const scale = computed(() => slideScale.value * zoom.value)
 const { left: slideLeft, top: slideTop } = useSlideBounds()
 
 const ctrlSize = 10
-const minSize = 40
+const minSize = isArrow ? Number.NEGATIVE_INFINITY : 40
 const minRemain = 10
 
 const rotateRad = computed(() => rotate.value * Math.PI / 180)
@@ -32,6 +32,9 @@ const boundingTop = computed(() => y0.value - boundingHeight.value / 2)
 const boundingRight = computed(() => x0.value + boundingWidth.value / 2)
 const boundingBottom = computed(() => y0.value + boundingHeight.value / 2)
 
+const arrowRevX = computed(() => isArrow && width.value < 0)
+const arrowRevY = computed(() => isArrow && height.value < 0)
+
 let currentDrag: {
   x0: number
   y0: number
@@ -206,11 +209,12 @@ function getCornerProps(isLeft: boolean, isTop: boolean) {
       width: `${ctrlSize}px`,
       height: `${ctrlSize}px`,
       margin: `-${ctrlSize / 2}px`,
-      left: isLeft ? '0' : undefined,
-      right: isLeft ? undefined : '0',
-      top: isTop ? '0' : undefined,
-      bottom: isTop ? undefined : '0',
-      cursor: +isLeft + +isTop === 1 ? 'nesw-resize' : 'nwse-resize',
+      left: isLeft !== arrowRevX.value ? '0' : undefined,
+      right: isLeft !== arrowRevX.value ? undefined : '0',
+      top: isTop !== arrowRevY.value ? '0' : undefined,
+      bottom: isTop !== arrowRevY.value ? undefined : '0',
+      cursor: isArrow ? 'move' : +isLeft + +isTop === 1 ? 'nesw-resize' : 'nwse-resize',
+      borderRadius: isArrow ? '50%' : undefined,
     },
     class: ctrlClasses,
   }
@@ -356,14 +360,14 @@ watchEffect(() => {
   <div
     v-if="Number.isFinite(x0)"
     id="drag-control-container"
-    :data-drag-id="id"
+    :data-drag-id="dragId"
     :style="{
       position: 'absolute',
       zIndex: 100,
-      left: `${zoom * (x0 - width / 2)}px`,
-      top: `${zoom * (y0 - height / 2)}px`,
-      width: `${zoom * width}px`,
-      height: `${zoom * height}px`,
+      left: `${zoom * (x0 - Math.abs(width) / 2)}px`,
+      top: `${zoom * (y0 - Math.abs(height) / 2)}px`,
+      width: `${zoom * Math.abs(width)}px`,
+      height: `${zoom * Math.abs(height)}px`,
       transformOrigin: 'center center',
       transform: `rotate(${rotate}deg)`,
     }"
@@ -371,27 +375,31 @@ watchEffect(() => {
     @pointermove="onPointermove"
     @pointerup="onPointerup"
   >
-    <div class="absolute inset-0 z-100 b b-dark dark:b-gray-400">
+    <div class="absolute inset-0 z-100 dark:b-gray-400" :class="isArrow ? '' : 'b b-dark'">
       <template v-if="!autoHeight">
         <div v-bind="getCornerProps(true, true)" />
-        <div v-bind="getCornerProps(true, false)" />
-        <div v-bind="getCornerProps(false, true)" />
         <div v-bind="getCornerProps(false, false)" />
+        <template v-if="!isArrow">
+          <div v-bind="getCornerProps(true, false)" />
+          <div v-bind="getCornerProps(false, true)" />
+        </template>
       </template>
-      <div v-bind="getBorderProps('l')" />
-      <div v-bind="getBorderProps('r')" />
-      <template v-if="!autoHeight">
-        <div v-bind="getBorderProps('t')" />
-        <div v-bind="getBorderProps('b')" />
+      <template v-if="!isArrow">
+        <div v-bind="getBorderProps('l')" />
+        <div v-bind="getBorderProps('r')" />
+        <template v-if="!autoHeight">
+          <div v-bind="getBorderProps('t')" />
+          <div v-bind="getBorderProps('b')" />
+        </template>
+        <div v-bind="getRotateProps()" />
+        <div
+          class="absolute -top-15px w-0 b b-dashed b-dark dark:b-gray-400"
+          :style="{
+            left: 'calc(50% - 1px)',
+            height: autoHeight ? '14px' : '10px',
+          }"
+        />
       </template>
-      <div v-bind="getRotateProps()" />
-      <div
-        class="absolute -top-15px w-0 b b-dashed b-dark dark:b-gray-400"
-        :style="{
-          left: 'calc(50% - 1px)',
-          height: autoHeight ? '14px' : '10px',
-        }"
-      />
     </div>
   </div>
 </template>

package/modules/v-drag.ts

@@ -18,12 +18,12 @@ export function createVDragDirective() {
           }
           state.container.value = el
           el.draggingState = state
-          el.dataset.dragId = state.id
+          el.dataset.dragId = state.dragId
           state.watchStopHandles.push(
             watch(state.containerStyle, (style) => {
               for (const [k, v] of Object.entries(style)) {
                 if (v)
-                  el.style[k as any] = v
+                  el.style[k as any] = v as any
               }
             }, { immediate: true }),
           )

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.49.4",
+  "version": "0.49.5",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -32,14 +32,14 @@
     "@iconify-json/carbon": "^1.1.34",
     "@iconify-json/ph": "^1.1.13",
     "@iconify-json/svg-spinners": "^1.1.2",
-    "@shikijs/monaco": "^1.6.0",
-    "@shikijs/vitepress-twoslash": "^1.6.0",
+    "@shikijs/monaco": "^1.6.1",
+    "@shikijs/vitepress-twoslash": "^1.6.1",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.4",
     "@unhead/vue": "^1.9.11",
     "@unocss/reset": "^0.60.3",
-    "@vueuse/core": "^10.9.0",
-    "@vueuse/math": "^10.9.0",
+    "@vueuse/core": "^10.10.0",
+    "@vueuse/math": "^10.10.0",
     "@vueuse/motion": "^2.1.0",
     "codemirror": "^5.65.16",
     "drauu": "^0.4.0",
@@ -52,17 +52,17 @@
     "monaco-editor": "^0.49.0",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
-    "shiki": "^1.6.0",
+    "shiki": "^1.6.1",
     "shiki-magic-move": "^0.4.2",
     "typescript": "^5.4.5",
     "unocss": "^0.60.3",
     "vue": "^3.4.27",
     "vue-router": "^4.3.2",
     "yaml": "^2.4.2",
-    "@slidev/types": "0.49.4",
-    "@slidev/parser": "0.49.4"
+    "@slidev/parser": "0.49.5",
+    "@slidev/types": "0.49.5"
   },
   "devDependencies": {
-    "vite": "^5.2.11"
+    "vite": "^5.2.12"
   }
 }

package/setup/monaco.ts

@@ -121,10 +121,21 @@ const setup = createSingletonPromise(async () => {
   }
 })
 
-export async function addFile(raw: Promise<{ default: string }>, path: string) {
+async function _addFile(raw: Promise<{ default: string }>, path: string) {
+  const uri = monaco.Uri.file(path)
   const code = (await raw).default
   monaco.languages.typescript.typescriptDefaults.addExtraLib(code, `file:///${path}`)
-  monaco.editor.createModel(code, 'javascript', monaco.Uri.file(path))
+  monaco.editor.createModel(code, 'javascript', uri)
+}
+
+const addFileCache = new Map<string, Promise<void>>()
+
+export async function addFile(raw: Promise<{ default: string }>, path: string) {
+  if (addFileCache.has(path))
+    return addFileCache.get(path)
+  const promise = _addFile(raw, path)
+  addFileCache.set(path, promise)
+  return promise
 }
 
 export default setup

package/setup/routes.ts

@@ -50,7 +50,7 @@ export default function setupRoutes() {
     )
   }
 
-  if (__SLIDEV_HAS_SERVER__) {
+  if (__SLIDEV_FEATURE_PRINT__) {
     routes.push(
       {
         name: 'print',