@slidev/client 0.48.8 → 0.48.9

package/builtin/ShikiMagicMove.vue

@@ -45,43 +45,45 @@ onMounted(() => {
       // Calculate the step and rangeStr based on the current click count
       const clickCount = clicks.current - start
       let step = steps.length - 1
-      let _currentClickSum = 0
+      let currentClickSum = 0
       let rangeStr = 'all'
       for (let i = 0; i < ranges.value.length; i++) {
         const current = ranges.value[i]
-        if (clickCount < _currentClickSum + current.length - 1) {
+        if (clickCount < currentClickSum + current.length - 1) {
           step = i
-          rangeStr = current[clickCount - _currentClickSum + 1]
+          rangeStr = current[clickCount - currentClickSum + 1]
           break
         }
-        _currentClickSum += current.length || 1
+        currentClickSum += current.length || 1
       }
       stepIndex.value = step
 
-      const pre = container.value?.querySelector('.shiki') as HTMLElement
-      if (!pre)
-        return
+      setTimeout(() => {
+        const pre = container.value?.querySelector('.shiki') as HTMLElement
+        if (!pre)
+          return
 
-      const children = (Array.from(pre.children) as HTMLElement[])
-        .slice(1) // Remove the first anchor
-        .filter(i => !i.className.includes('shiki-magic-move-leave')) // Filter the leaving elements
+        const children = (Array.from(pre.children) as HTMLElement[])
+          .slice(1) // Remove the first anchor
+          .filter(i => !i.className.includes('shiki-magic-move-leave')) // Filter the leaving elements
 
-      // Group to lines between `<br>`
-      const lines = children.reduce((acc, el) => {
-        if (el.tagName === 'BR')
-          acc.push([])
-        else
-          acc[acc.length - 1].push(el)
-        return acc
-      }, [[]] as HTMLElement[][])
+        // Group to lines between `<br>`
+        const lines = children.reduce((acc, el) => {
+          if (el.tagName === 'BR')
+            acc.push([])
+          else
+            acc[acc.length - 1].push(el)
+          return acc
+        }, [[]] as HTMLElement[][])
 
-      // Update highlight range
-      updateCodeHighlightRange(
-        rangeStr,
-        lines.length,
-        1,
-        no => lines[no],
-      )
+        // Update highlight range
+        updateCodeHighlightRange(
+          rangeStr,
+          lines.length,
+          1,
+          no => lines[no],
+        )
+      })
     },
     { immediate: true },
   )
@@ -104,3 +106,10 @@ onMounted(() => {
     />
   </div>
 </template>
+
+<style>
+.slidev-code-magic-move .shiki-magic-move-enter-from,
+.slidev-code-magic-move .shiki-magic-move-leave-to {
+  opacity: 0;
+}
+</style>

package/constants.ts

@@ -13,6 +13,7 @@ export const injectionRenderContext = '$$slidev-render-context' as unknown as In
 export const injectionActive = '$$slidev-active' as unknown as InjectionKey<Ref<boolean>>
 export const injectionFrontmatter = '$$slidev-fontmatter' as unknown as InjectionKey<Record<string, any>>
 export const injectionSlideZoom = '$$slidev-slide-zoom' as unknown as InjectionKey<ComputedRef<number>>
+export const injectionClickVisibility = '$$slidev-click-visibility' as unknown as InjectionKey<ComputedRef<true | 'before' | 'after'>>
 
 export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'

package/internals/SlidesShow.vue

@@ -76,7 +76,6 @@ function onAfterLeave() {
         :class="getSlideClass(route)"
         :route="route"
         :render-context="renderContext"
-        class="overflow-hidden"
       />
     </div>
   </component>

package/modules/v-click.ts

@@ -1,5 +1,5 @@
 import type { ResolvedClicksInfo } from '@slidev/types'
-import type { App, DirectiveBinding, InjectionKey } from 'vue'
+import type { App, DirectiveBinding } from 'vue'
 import { computed, watchEffect } from 'vue'
 import {
   CLASS_VCLICK_CURRENT,
@@ -8,14 +8,12 @@ import {
   CLASS_VCLICK_HIDDEN_EXP,
   CLASS_VCLICK_PRIOR,
   CLASS_VCLICK_TARGET,
+  injectionClickVisibility,
   injectionClicksContext,
 } from '../constants'
+import { directiveInject, directiveProvide } from '../utils'
 
-export type VClickValue = string | [string | number, string | number] | boolean
-
-export function dirInject<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, defaultValue?: T): T | undefined {
-  return (dir.instance?.$ as any).provides[key as any] ?? defaultValue
-}
+export type VClickValue = undefined | string | number | [string | number, string | number] | boolean
 
 export function createVClickDirectives() {
   return {
@@ -25,7 +23,7 @@ export function createVClickDirectives() {
         name: 'v-click',
 
         mounted(el, dir) {
-          const resolved = resolveClick(el, dir, dir.value)
+          const resolved = resolveClick(el, dir, dir.value, true)
           if (resolved == null)
             return
 
@@ -37,7 +35,8 @@ export function createVClickDirectives() {
           if (clicks[1] != null)
             el.dataset.slidevClicksEnd = String(clicks[1])
 
-          watchEffect(() => {
+          // @ts-expect-error extra prop
+          el.watchStopHandle = watchEffect(() => {
             const active = resolved.isActive.value
             const current = resolved.isCurrent.value
             const prior = active && !current
@@ -62,13 +61,14 @@ export function createVClickDirectives() {
         name: 'v-after',
 
         mounted(el, dir) {
-          const resolved = resolveClick(el, dir, dir.value, true)
+          const resolved = resolveClick(el, dir, dir.value, true, true)
           if (resolved == null)
             return
 
           el.classList.toggle(CLASS_VCLICK_TARGET, true)
 
-          watchEffect(() => {
+          // @ts-expect-error extra prop
+          el.watchStopHandle = watchEffect(() => {
             const active = resolved.isActive.value
             const current = resolved.isCurrent.value
             const prior = active && !current
@@ -93,13 +93,14 @@ export function createVClickDirectives() {
         name: 'v-click-hide',
 
         mounted(el, dir) {
-          const resolved = resolveClick(el, dir, dir.value, false, true)
+          const resolved = resolveClick(el, dir, dir.value, true, false, true)
           if (resolved == null)
             return
 
           el.classList.toggle(CLASS_VCLICK_TARGET, true)
 
-          watchEffect(() => {
+          // @ts-expect-error extra prop
+          el.watchStopHandle = watchEffect(() => {
             const active = resolved.isActive.value
             const current = resolved.isCurrent.value
             const prior = active && !current
@@ -117,20 +118,20 @@ export function createVClickDirectives() {
   }
 }
 
-function isActive(thisClick: number | [number, number], clicks: number) {
+function isClickActive(thisClick: number | [number, number], clicks: number) {
   return Array.isArray(thisClick)
     ? thisClick[0] <= clicks && clicks < thisClick[1]
     : thisClick <= clicks
 }
 
-function isCurrent(thisClick: number | [number, number], clicks: number) {
+function isClickCurrent(thisClick: number | [number, number], clicks: number) {
   return Array.isArray(thisClick)
     ? thisClick[0] === clicks
     : thisClick === clicks
 }
 
-export function resolveClick(el: Element, dir: DirectiveBinding<any>, value: VClickValue, clickAfter = false, flagHide = false): ResolvedClicksInfo | null {
-  const ctx = dirInject(dir, injectionClicksContext)?.value
+export function resolveClick(el: Element | string, dir: DirectiveBinding<any>, value: VClickValue, provideVisibility = false, clickAfter = false, flagHide = false): ResolvedClicksInfo | null {
+  const ctx = directiveInject(dir, injectionClicksContext)?.value
 
   if (!el || !ctx)
     return null
@@ -152,29 +153,47 @@ export function resolveClick(el: Element, dir: DirectiveBinding<any>, value: VCl
   if (Array.isArray(value)) {
     // range (absolute)
     delta = 0
-    thisClick = value as [number, number]
+    thisClick = [+value[0], +value[1]]
     maxClick = +value[1]
   }
   else {
     ({ start: thisClick, end: maxClick, delta } = ctx.resolve(value))
   }
 
+  const isActive = computed(() => isClickActive(thisClick, ctx.current))
+  const isCurrent = computed(() => isClickCurrent(thisClick, ctx.current))
+  const isShown = computed(() => flagHide ? !isActive.value : isActive.value)
+
   const resolved: ResolvedClicksInfo = {
     max: maxClick,
     clicks: thisClick,
     delta,
-    isActive: computed(() => isActive(thisClick, ctx.current)),
-    isCurrent: computed(() => isCurrent(thisClick, ctx.current)),
-    isShown: computed(() => flagHide ? !isActive(thisClick, ctx.current) : isActive(thisClick, ctx.current)),
+    isActive,
+    isCurrent,
+    isShown,
     flagFade,
     flagHide,
   }
   ctx.register(el, resolved)
+
+  if (provideVisibility) {
+    directiveProvide(dir, injectionClickVisibility, computed(() => {
+      if (isShown.value)
+        return true
+      if (Array.isArray(thisClick))
+        return ctx.current < thisClick[0] ? 'before' : 'after'
+      else
+        return flagHide ? 'after' : 'before'
+    }))
+  }
+
   return resolved
 }
 
 function unmounted(el: HTMLElement, dir: DirectiveBinding<any>) {
   el.classList.toggle(CLASS_VCLICK_TARGET, false)
-  const ctx = dirInject(dir, injectionClicksContext)?.value
+  const ctx = directiveInject(dir, injectionClicksContext)?.value
   ctx?.unregister(el)
+  // @ts-expect-error extra prop
+  el.watchStopHandle?.()
 }

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.48.9",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -32,12 +32,12 @@
     "@iconify-json/carbon": "^1.1.31",
     "@iconify-json/ph": "^1.1.11",
     "@iconify-json/svg-spinners": "^1.1.2",
-    "@shikijs/monaco": "^1.2.1",
-    "@shikijs/vitepress-twoslash": "^1.2.1",
+    "@shikijs/monaco": "^1.2.3",
+    "@shikijs/vitepress-twoslash": "^1.2.3",
     "@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.58.9",
     "@vueuse/core": "^10.9.0",
     "@vueuse/math": "^10.9.0",
     "@vueuse/motion": "^2.1.0",
@@ -53,15 +53,15 @@
     "monaco-editor": "^0.47.0",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
-    "shiki": "^1.2.1",
-    "shiki-magic-move": "^0.3.4",
+    "shiki": "^1.2.3",
+    "shiki-magic-move": "^0.3.5",
     "typescript": "^5.4.3",
-    "unocss": "^0.58.8",
+    "unocss": "^0.58.9",
     "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.48.9",
+    "@slidev/types": "0.48.9"
   },
   "devDependencies": {
     "vite": "^5.2.7"

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

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