@slidev/client 0.48.8 → 0.49.0-beta.1

package/modules/v-drag.ts

@@ -0,0 +1,44 @@
+import type { App } from 'vue'
+import { watch } from 'vue'
+import type { DragElementState } from '../composables/useDragElements'
+import { useDragElement } from '../composables/useDragElements'
+
+export function createVDragDirective() {
+  return {
+    install(app: App) {
+      app.directive<HTMLElement & { draggingState: DragElementState }>('drag', {
+        // @ts-expect-error extra prop
+        name: 'v-drag',
+
+        created(el, binding, vnode) {
+          const state = useDragElement(binding, binding.value, vnode.props?.markdownSource)
+          if (vnode.props) {
+            vnode.props = { ...vnode.props }
+            delete vnode.props.markdownSource
+          }
+          state.container.value = el
+          el.draggingState = state
+          el.dataset.dragId = state.id
+          state.watchStopHandles.push(
+            watch(state.containerStyle, (style) => {
+              for (const [k, v] of Object.entries(style)) {
+                if (v)
+                  el.style[k as any] = v
+              }
+            }, { immediate: true }),
+          )
+          el.addEventListener('dblclick', state.startDragging)
+        },
+        mounted(el) {
+          el.draggingState.mounted()
+        },
+        unmounted(el) {
+          const state = el.draggingState
+          state.unmounted()
+          el.removeEventListener('dblclick', state.startDragging)
+          state.watchStopHandles.forEach(fn => fn())
+        },
+      })
+    },
+  }
+}

package/modules/v-mark.ts

@@ -121,7 +121,8 @@ export function createVMarkDirective() {
             return
           }
 
-          watchEffect(() => {
+          // @ts-expect-error extra prop
+          el.watchStopHandle = watchEffect(() => {
             let shouldShow: boolean | undefined
 
             if (options.value.class)
@@ -147,6 +148,11 @@ export function createVMarkDirective() {
               annotation.hide()
           })
         },
+
+        unmounted: (el) => {
+          // @ts-expect-error extra prop
+          el.watchStopHandle?.()
+        },
       })
     },
   }

package/modules/v-motion.ts

@@ -0,0 +1,120 @@
+import type { App, ObjectDirective } from 'vue'
+import { watch } from 'vue'
+import { MotionDirective } from '@vueuse/motion'
+import type { ResolvedClicksInfo } from '@slidev/types'
+import { injectionClickVisibility, injectionClicksContext, injectionCurrentPage, injectionRenderContext } from '../constants'
+import { useNav } from '../composables/useNav'
+import { makeId } from '../logic/utils'
+import { directiveInject } from '../utils'
+import type { VClickValue } from './v-click'
+import { resolveClick } from './v-click'
+
+export type MotionDirectiveValue = undefined | VClickValue | {
+  key?: string
+  at?: VClickValue
+}
+
+export function createVMotionDirectives() {
+  return {
+    install(app: App) {
+      const original = MotionDirective() as ObjectDirective
+      app.directive<HTMLElement | SVGElement, string>('motion', {
+        // @ts-expect-error extra prop
+        name: 'v-motion',
+        mounted(el, binding, node, prevNode) {
+          const props = node.props = { ...node.props }
+
+          const variantInitial = { ...props.initial, ...props.variants?.['slidev-initial'] }
+          const variantEnter = { ...props.enter, ...props.variants?.['slidev-enter'] }
+          const variantLeave = { ...props.leave, ...props.variants?.['slidev-leave'] }
+          delete props.initial
+          delete props.enter
+          delete props.leave
+
+          const idPrefix = `${makeId()}-`
+          const clicks: {
+            id: string
+            at: number | [number, number]
+            variant: Record<string, unknown>
+            resolved: ResolvedClicksInfo | null
+          }[] = []
+
+          for (const k of Object.keys(props)) {
+            if (k.startsWith('click-')) {
+              const s = k.slice(6)
+              const at = s.includes('-') ? s.split('-').map(Number) as [number, number] : +s
+              const id = idPrefix + s
+              clicks.push({
+                id,
+                at,
+                variant: { ...props[k] },
+                resolved: resolveClick(id, binding, at),
+              })
+              delete props[k]
+            }
+          }
+
+          clicks.sort((a, b) => (Array.isArray(a.at) ? a.at[0] : a.at) - (Array.isArray(b.at) ? b.at[0] : b.at))
+
+          original.created!(el, binding, node, prevNode)
+          original.mounted!(el, binding, node, prevNode)
+
+          const thisPage = directiveInject(binding, injectionCurrentPage)
+          const renderContext = directiveInject(binding, injectionRenderContext)
+          const clickVisibility = directiveInject(binding, injectionClickVisibility)
+          const clicksContext = directiveInject(binding, injectionClicksContext)
+          const { currentPage, clicks: currentClicks, isPrintMode } = useNav()
+          // @ts-expect-error extra prop
+          const motion = el.motionInstance
+          motion.clickIds = clicks.map(i => i.id)
+          motion.set(variantInitial)
+          motion.watchStopHandle = watch(
+            [thisPage, currentPage, currentClicks].filter(Boolean),
+            () => {
+              const visibility = clickVisibility?.value ?? true
+              if (!clicksContext?.value || !['slide', 'presenter'].includes(renderContext?.value ?? '')) {
+                const mixedVariant: Record<string, unknown> = { ...variantInitial, ...variantEnter }
+                for (const { variant } of clicks)
+                  Object.assign(mixedVariant, variant)
+
+                motion.set(mixedVariant)
+              }
+              else if (isPrintMode.value || thisPage?.value === currentPage.value) {
+                if (visibility === true) {
+                  const mixedVariant: Record<string, unknown> = { ...variantInitial, ...variantEnter }
+                  for (const { variant, resolved: resolvedClick } of clicks) {
+                    if (!resolvedClick || resolvedClick.isActive.value)
+                      Object.assign(mixedVariant, variant)
+                  }
+                  if (isPrintMode.value)
+                    motion.set(mixedVariant) // print with clicks
+                  else
+                    motion.apply(mixedVariant)
+                }
+                else {
+                  motion.apply(visibility === 'before' ? variantInitial : variantLeave)
+                }
+              }
+              else {
+                motion.apply((thisPage?.value ?? -1) > currentPage.value ? variantInitial : variantLeave)
+              }
+            },
+            {
+              immediate: true,
+            },
+          )
+        },
+        unmounted(el, dir) {
+          if (!directiveInject(dir, injectionClicksContext)?.value)
+            return
+
+          const ctx = directiveInject(dir, injectionClicksContext)?.value
+          // @ts-expect-error extra prop
+          const motion = el.motionInstance
+          motion.clickIds.map((id: string) => ctx?.unregister(id))
+          motion.watchStopHandle()
+        },
+      })
+    },
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.8",
+  "version": "0.49.0-beta.1",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -30,14 +30,14 @@
   "dependencies": {
     "@antfu/utils": "^0.7.7",
     "@iconify-json/carbon": "^1.1.31",
-    "@iconify-json/ph": "^1.1.11",
+    "@iconify-json/ph": "^1.1.12",
     "@iconify-json/svg-spinners": "^1.1.2",
-    "@shikijs/monaco": "^1.2.1",
-    "@shikijs/vitepress-twoslash": "^1.2.1",
+    "@shikijs/monaco": "^1.3.0",
+    "@shikijs/vitepress-twoslash": "^1.3.0",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.4",
-    "@unhead/vue": "^1.9.3",
-    "@unocss/reset": "^0.58.8",
+    "@unhead/vue": "^1.9.4",
+    "@unocss/reset": "^0.59.0",
     "@vueuse/core": "^10.9.0",
     "@vueuse/math": "^10.9.0",
     "@vueuse/motion": "^2.1.0",
@@ -53,17 +53,17 @@
     "monaco-editor": "^0.47.0",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
-    "shiki": "^1.2.1",
-    "shiki-magic-move": "^0.3.4",
-    "typescript": "^5.4.3",
-    "unocss": "^0.58.8",
+    "shiki": "^1.3.0",
+    "shiki-magic-move": "^0.3.5",
+    "typescript": "^5.4.4",
+    "unocss": "^0.59.0",
     "vue": "^3.4.21",
     "vue-demi": "^0.14.7",
     "vue-router": "^4.3.0",
-    "@slidev/parser": "0.48.8",
-    "@slidev/types": "0.48.8"
+    "@slidev/parser": "0.49.0-beta.1",
+    "@slidev/types": "0.49.0-beta.1"
   },
   "devDependencies": {
-    "vite": "^5.2.7"
+    "vite": "^5.2.8"
   }
 }

package/setup/code-runners.ts

@@ -1,13 +1,14 @@
-import { createSingletonPromise } from '@antfu/utils'
+import { createSingletonPromise, ensurePrefix, slash } from '@antfu/utils'
 import type { CodeRunner, CodeRunnerContext, CodeRunnerOutput, CodeRunnerOutputText, CodeRunnerOutputs } from '@slidev/types'
 import type { CodeToHastOptions } from 'shiki'
+import type ts from 'typescript'
 import { isDark } from '../logic/dark'
 import setups from '#slidev/setups/code-runners'
 
 export default createSingletonPromise(async () => {
   const runners: Record<string, CodeRunner> = {
-    javascript: runJavaScript,
-    js: runJavaScript,
+    javascript: runTypeScript,
+    js: runTypeScript,
     typescript: runTypeScript,
     ts: runTypeScript,
   }
@@ -24,6 +25,18 @@ export default createSingletonPromise(async () => {
     ...options,
   })
 
+  const resolveId = async (specifier: string) => {
+    if (!/^(@[^\/:]+?\/)?[^\/:]+$/.test(specifier))
+      return specifier
+    const res = await fetch(`/@slidev/resolve-id/${specifier}`)
+    if (!res.ok)
+      return null
+    const id = await res.text()
+    if (!id)
+      return null
+    return `/@fs${ensurePrefix('/', slash(id))}`
+  }
+
   const run = async (code: string, lang: string, options: Record<string, unknown>): Promise<CodeRunnerOutputs> => {
     try {
       const runner = runners[lang]
@@ -34,6 +47,7 @@ export default createSingletonPromise(async () => {
         {
           options,
           highlight,
+          resolveId,
           run: async (code, lang) => {
             return await run(code, lang, options)
           },
@@ -60,7 +74,7 @@ export default createSingletonPromise(async () => {
 })
 
 // Ported from https://github.com/microsoft/TypeScript-Website/blob/v2/packages/playground/src/sidebar/runtime.ts
-export async function runJavaScript(code: string): Promise<CodeRunnerOutputs> {
+async function runJavaScript(code: string): Promise<CodeRunnerOutputs> {
   const allLogs: CodeRunnerOutput[] = []
 
   const replace = {} as any
@@ -159,10 +173,80 @@ export async function runJavaScript(code: string): Promise<CodeRunnerOutputs> {
 let tsModule: typeof import('typescript') | undefined
 
 export async function runTypeScript(code: string, context: CodeRunnerContext) {
-  const { transpile } = tsModule ??= await import('typescript')
-  code = transpile(code, {
-    module: tsModule.ModuleKind.ESNext,
-    target: tsModule.ScriptTarget.ES2022,
-  })
-  return await context.run(code, 'javascript')
+  tsModule ??= await import('typescript')
+
+  code = tsModule.transpileModule(code, {
+    compilerOptions: {
+      module: tsModule.ModuleKind.ESNext,
+      target: tsModule.ScriptTarget.ES2022,
+    },
+    transformers: {
+      after: [transformImports],
+    },
+  }).outputText
+
+  const importRegex = /import\s*\(\s*(['"])(.+?)['"]\s*\)/g
+  const idMap: Record<string, string> = {}
+  for (const [,,specifier] of code.matchAll(importRegex)!)
+    idMap[specifier] = await context.resolveId(specifier) ?? specifier
+  code = code.replace(importRegex, (_full, quote, specifier) => `import(${quote}${idMap[specifier] ?? specifier}${quote})`)
+
+  return await runJavaScript(code)
+}
+
+/**
+ * Transform import statements to dynamic imports
+ */
+function transformImports(context: ts.TransformationContext): ts.Transformer<ts.SourceFile> {
+  const { factory } = context
+  const { isImportDeclaration, isNamedImports, NodeFlags } = tsModule!
+  return (sourceFile: ts.SourceFile) => {
+    const statements = [...sourceFile.statements]
+    for (let i = 0; i < statements.length; i++) {
+      const statement = statements[i]
+      if (!isImportDeclaration(statement))
+        continue
+      let bindingPattern: ts.ObjectBindingPattern | ts.Identifier
+      const namedBindings = statement.importClause?.namedBindings
+      const bindings: ts.BindingElement[] = []
+      if (statement.importClause?.name)
+        bindings.push(factory.createBindingElement(undefined, factory.createIdentifier('default'), statement.importClause.name))
+      if (namedBindings) {
+        if (isNamedImports(namedBindings)) {
+          for (const specifier of namedBindings.elements)
+            bindings.push(factory.createBindingElement(undefined, specifier.propertyName, specifier.name))
+          bindingPattern = factory.createObjectBindingPattern(bindings)
+        }
+        else {
+          bindingPattern = factory.createIdentifier(namedBindings.name.text)
+        }
+      }
+      else {
+        bindingPattern = factory.createObjectBindingPattern(bindings)
+      }
+
+      const newStatement = factory.createVariableStatement(
+        undefined,
+        factory.createVariableDeclarationList(
+          [
+            factory.createVariableDeclaration(
+              bindingPattern,
+              undefined,
+              undefined,
+              factory.createAwaitExpression(
+                factory.createCallExpression(
+                  factory.createIdentifier('import'),
+                  undefined,
+                  [statement.moduleSpecifier],
+                ),
+              ),
+            ),
+          ],
+          NodeFlags.Const,
+        ),
+      )
+      statements[i] = newStatement
+    }
+    return factory.updateSourceFile(sourceFile, statements)
+  }
 }

package/setup/main.ts

@@ -1,5 +1,4 @@
 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'
@@ -8,6 +7,8 @@ import { createHead } from '@unhead/vue'
 import { routeForceRefresh } from '../logic/route'
 import { createVClickDirectives } from '../modules/v-click'
 import { createVMarkDirective } from '../modules/v-mark'
+import { createVDragDirective } from '../modules/v-drag'
+import { createVMotionDirectives } from '../modules/v-motion'
 import { routes } from '../routes'
 import setups from '#slidev/setups/main'
 
@@ -34,7 +35,8 @@ export default async function setupMain(app: App) {
   app.use(createHead())
   app.use(createVClickDirectives())
   app.use(createVMarkDirective())
-  app.use(MotionPlugin)
+  app.use(createVDragDirective())
+  app.use(createVMotionDirectives())
   app.use(TwoSlashFloatingVue as any, { container: '#twoslash-container' })
 
   const context: AppContext = {

package/setup/shortcuts.ts

@@ -2,7 +2,7 @@ import { and, not, or } from '@vueuse/math'
 import type { NavOperations, ShortcutOptions } from '@slidev/types'
 import { downloadPDF } from '../utils'
 import { toggleDark } from '../logic/dark'
-import { magicKeys, showGotoDialog, showOverview, toggleOverview } from '../state'
+import { activeDragElement, magicKeys, showGotoDialog, showOverview, toggleOverview } from '../state'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
 import { currentOverviewPage, downOverviewPage, nextOverviewPage, prevOverviewPage, upOverviewPage } from './../logic/overview'
@@ -29,15 +29,17 @@ export default function setupShortcuts() {
     showGotoDialog: () => showGotoDialog.value = !showGotoDialog.value,
   }
 
+  const navViaArrowKeys = and(not(showOverview), not(activeDragElement))
+
   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 },
-    { name: 'prev_left', key: and(left, not(shift), not(showOverview)), fn: prev, autoRepeat: true },
+    { name: 'next_right', key: and(right, not(shift), navViaArrowKeys), fn: next, autoRepeat: true },
+    { name: 'prev_left', key: and(left, not(shift), navViaArrowKeys), fn: prev, autoRepeat: true },
     { name: 'next_page_key', key: 'pageDown', fn: next, autoRepeat: true },
     { name: 'prev_page_key', key: 'pageUp', fn: prev, autoRepeat: true },
-    { name: 'next_down', key: and(down, not(showOverview)), fn: nextSlide, autoRepeat: true },
-    { name: 'prev_up', key: and(up, not(showOverview)), fn: () => prevSlide(false), autoRepeat: true },
+    { name: 'next_down', key: and(down, navViaArrowKeys), fn: nextSlide, autoRepeat: true },
+    { name: 'prev_up', key: and(up, navViaArrowKeys), fn: () => prevSlide(false), autoRepeat: true },
     { name: 'next_shift', key: and(right, shift), fn: nextSlide, autoRepeat: true },
     { name: 'prev_shift', key: and(left, shift), fn: () => prevSlide(false), autoRepeat: true },
     { name: 'toggle_dark', key: and(d, not(drawingEnabled)), fn: toggleDark },

package/state/index.ts

@@ -1,6 +1,7 @@
 import { breakpointsTailwind, isClient, useActiveElement, useBreakpoints, useFullscreen, useLocalStorage, useMagicKeys, useToggle, useWindowSize } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, ref, shallowRef } from 'vue'
 import { slideAspect } from '../env'
+import type { DragElementState } from '../composables/useDragElements'
 
 export const showRecordingDialog = ref(false)
 export const showInfoDialog = ref(false)
@@ -31,6 +32,8 @@ export const isEditorVertical = useLocalStorage('slidev-editor-vertical', false,
 export const editorWidth = useLocalStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 318, { listenToStorageChanges: false })
 export const editorHeight = useLocalStorage('slidev-editor-height', isClient ? window.innerHeight * 0.4 : 300, { listenToStorageChanges: false })
 
+export const activeDragElement = shallowRef<DragElementState | null>(null)
+
 export const presenterNotesFontSize = useLocalStorage('slidev-presenter-font-size', 1, { listenToStorageChanges: false })
 export const presenterLayout = useLocalStorage('slidev-presenter-layout', 1, { listenToStorageChanges: false })
 

package/utils.ts

@@ -1,4 +1,5 @@
 import type { SlideRoute } from '@slidev/types'
+import type { DirectiveBinding, InjectionKey } from 'vue'
 import { configs } from './env'
 
 export function getSlideClass(route?: SlideRoute, extra = '') {
@@ -22,3 +23,18 @@ export async function downloadPDF() {
     `${configs.title}.pdf`,
   )
 }
+
+export function directiveInject<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, defaultValue?: T): T | undefined {
+  return (dir.instance?.$ as any).provides[key as any] ?? defaultValue
+}
+
+export function directiveProvide<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, value?: T) {
+  const instance = dir.instance?.$ as any
+  if (instance) {
+    let provides = instance.provides
+    const parentProvides = instance.parent?.provides
+    if (provides === parentProvides)
+      provides = instance.provides = Object.create(parentProvides)
+    provides[key as any] = value
+  }
+}