feat: support @vueuse/motion

Author: antfu

.tazerc.json

@@ -1,6 +1,8 @@
 {
   "exclude": [
     "@iconify/json",
-    "husky"
+    "husky",
+    "mermaid",
+    "vite-plugin-components"
   ]
 }

packages/client/package.json

@@ -20,11 +20,14 @@
     "@slidev/types": "workspace:*",
     "@vueuse/core": "^4.9.2",
     "@vueuse/head": "^0.5.1",
+    "@vueuse/motion": "^1.5.5",
     "codemirror": "^5.61.0",
     "file-saver": "^2.0.5",
     "js-base64": "^3.6.0",
     "js-yaml": "^4.1.0",
+    "mermaid": "8.5.0",
     "monaco-editor": "^0.23.0",
+    "nanoid": "^3.1.23",
     "prettier": "^2.3.0",
     "recordrtc": "^5.6.2",
     "vue": "^3.0.11",

packages/client/setup/main.ts

@@ -1,6 +1,7 @@
 /* __imports__ */
 
 import { AppContext } from '@slidev/types'
+import { MotionPlugin } from '@vueuse/motion'
 
 export default function setupMain(context: AppContext) {
   function setMaxHeight() {
@@ -11,6 +12,8 @@ export default function setupMain(context: AppContext) {
   setMaxHeight()
   window.addEventListener('resize', setMaxHeight)
 
+  context.app.use(MotionPlugin)
+
   // @ts-expect-error
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const injection_arg = context

packages/create-app/template/slides.md

@@ -183,6 +183,72 @@ theme: seriph
 Read more about [How to use a theme](https://sli.dev/themes/use.html) and
 check out the [Awesome Themes Gallery](https://sli.dev/themes/gallery.html).
 
+---
+
+# Animations
+
+Animations are powered by [@vueuse/motion](https://motion.vueuse.org/).
+
+```html
+<div
+  v-motion
+  :initial="{ x: -80 }"
+  :enter="{ x: 0 }">
+  Slidev
+</div>
+```
+
+<div class="w-60 h-60 relative mt-6">
+  <div class="relative w-40 h-40">
+    <img
+      v-motion
+      :initial="{ x: 800, y: -100, scale: 1.5, rotate: -50 }"
+      :enter="final"
+      class="absolute top-0 left-0 right-0 bottom-0"
+      src="https://sli.dev/logo-square.png"
+    />
+    <img
+      v-motion
+      :initial="{ y: 500, x: -100, scale: 2 }"
+      :enter="final"
+      class="absolute top-0 left-0 right-0 bottom-0"
+      src="https://sli.dev/logo-circle.png"
+    />
+    <img
+      v-motion
+      :initial="{ x: 600, y: 400, scale: 2, rotate: 100 }"
+      :enter="final"
+      class="absolute top-0 left-0 right-0 bottom-0"
+      src="https://sli.dev/logo-triangle.png"
+    />
+  </div>
+
+  <div 
+    class="text-5xl absolute top-14 left-40 text-[#2B90B6] -z-1"
+    v-motion
+    :initial="{ x: -80, opacity: 0}"
+    :enter="{ x: 0, opacity: 1, transition: { delay: 2000, duration: 1000 } }">
+    Slidev
+  </div>
+</div>
+
+<!-- vue script setup scripts can be directly used in markdown, and will only affects current page -->
+<script setup lang="ts">
+const final = {
+  x: 0,
+  y: 0,
+  rotate: 0,
+  scale: 1,
+  transition: {
+    type: 'spring',
+    damping: 10,
+    stiffness: 20,
+    mass: 2
+  }
+}
+</script>
+
+[Learn More](https://sli.dev/guide/animations.html#motion)
 
 ---
 
@@ -235,7 +301,7 @@ C -->|Two| E[Result 2]
 
 </div>
 
-Learn more about [the syntax](https://sli.dev/guide/syntax.html#diagrams)
+[Learn More](https://sli.dev/guide/syntax.html#diagrams)
 
 ---
 layout: center

packages/slidev/node/plugins/config.ts

@@ -6,6 +6,7 @@ import { toAtFS } from '../utils'
 
 const EXCLUDE = [
   '@slidev/types',
+  'mermaid',
 ]
 
 export function createConfigPlugin(options: ResolvedSlidevOptions): Plugin {
@@ -29,9 +30,11 @@ export function createConfigPlugin(options: ResolvedSlidevOptions): Plugin {
             'prettier/esm/parser-babel',
             'prettier/esm/parser-html',
             'prettier/esm/parser-typescript',
+            'mermaid/dist/mermaid.min',
           ],
           exclude: [
             'vue-demi',
+            'mermaid',
           ],
         },
 

packages/slidev/package.json

@@ -66,7 +66,6 @@
     "markdown-it": "^12.0.6",
     "markdown-it-katex": "^2.0.3",
     "markdown-it-link-attributes": "^3.0.0",
-    "mermaid": "8.5.0",
     "monaco-editor": "^0.23.0",
     "nanoid": "^3.1.23",
     "pdf-lib": "^1.16.0",