From d20d13343010e9e59e040e31deaa6e910483fe43 Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Sat, 19 Oct 2024 12:48:06 +0900
Subject: [PATCH 1/2] feat(component): wrap `leave` variant internally

---
 src/components/Motion.ts | 27 ++++++++++++++++++++++++---
 src/utils/component.ts   |  4 ++--
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/Motion.ts b/src/components/Motion.ts
index 46bcd594..fcac0e25 100644
--- a/src/components/Motion.ts
+++ b/src/components/Motion.ts
@@ -1,7 +1,7 @@
 import type { Component } from '@nuxt/schema'
 import type { PropType } from 'vue'
 
-import { defineComponent, h, useSlots } from 'vue'
+import { Transition, defineComponent, h, useAttrs, useSlots } from 'vue'
 import { variantToStyle } from '../utils/transform'
 import { MotionComponentProps, setupMotionComponent } from '../utils/component'
 
@@ -13,17 +13,38 @@ export default defineComponent({
       type: [String, Object] as PropType<string | Component>,
       default: 'div',
     },
+    // TODO: figure out if this is possible using `v-if`, otherwise find better prop name
+    present: {
+      type: Boolean,
+      default: true,
+    },
   },
+  inheritAttrs: false,
   setup(props) {
     const slots = useSlots()
 
     const { motionConfig, setNodeInstance } = setupMotionComponent(props)
+    const attrs = useAttrs()
 
     return () => {
       const style = variantToStyle(motionConfig.value.initial || {})
-      const node = h(props.is, undefined, slots)
+      const node = h(props.is, attrs, slots)
+
+      const instance = setNodeInstance(node, 0, style)
+
+      // Wrap component in Transition if leave variant is set
+      if (props.leave) {
+        const wrapper = h(
+          Transition,
+          {
+            css: false,
+            onLeave: (_: any, done: any) => instance.leave(done),
+          },
+          () => [props.present && node],
+        )
 
-      setNodeInstance(node, 0, style)
+        return wrapper
+      }
 
       return node
     }
diff --git a/src/utils/component.ts b/src/utils/component.ts
index f447bc06..fce55dd3 100644
--- a/src/utils/component.ts
+++ b/src/utils/component.ts
@@ -257,11 +257,11 @@ export function setupMotionComponent(
       const styles = variantToStyle(instances[index].state as Variant)
 
       for (const [key, val] of Object.entries(styles)) {
-        (el as any).style[key] = val
+        ;(el as any).style[key] = val
       }
     }
 
-    return node
+    return instances[index]
   }
 
   return {

From 824cca398196109505efc74bb3205e448e47d68d Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Mon, 21 Oct 2024 14:28:02 +0900
Subject: [PATCH 2/2] fix: test failures

---
 src/components/Motion.ts | 9 +++++----
 src/utils/component.ts   | 3 ++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/Motion.ts b/src/components/Motion.ts
index fcac0e25..de0eb335 100644
--- a/src/components/Motion.ts
+++ b/src/components/Motion.ts
@@ -23,14 +23,15 @@ export default defineComponent({
   setup(props) {
     const slots = useSlots()
 
-    const { motionConfig, setNodeInstance } = setupMotionComponent(props)
-    const attrs = useAttrs()
+    const { instances, motionConfig, setNodeInstance }
+      = setupMotionComponent(props)
 
     return () => {
+      const attrs = useAttrs()
       const style = variantToStyle(motionConfig.value.initial || {})
       const node = h(props.is, attrs, slots)
 
-      const instance = setNodeInstance(node, 0, style)
+      setNodeInstance(node, 0, style)
 
       // Wrap component in Transition if leave variant is set
       if (props.leave) {
@@ -38,7 +39,7 @@ export default defineComponent({
           Transition,
           {
             css: false,
-            onLeave: (_: any, done: any) => instance.leave(done),
+            onLeave: (_: any, done: any) => instances[0].leave(done),
           },
           () => [props.present && node],
         )
diff --git a/src/utils/component.ts b/src/utils/component.ts
index fce55dd3..0641d9ae 100644
--- a/src/utils/component.ts
+++ b/src/utils/component.ts
@@ -261,10 +261,11 @@ export function setupMotionComponent(
       }
     }
 
-    return instances[index]
+    return node
   }
 
   return {
+    instances,
     motionConfig,
     setNodeInstance,
   }