wip: add more tests

packages-private/vapor-e2e-test/__tests__/transition.spec.ts

@@ -845,9 +845,60 @@ describe('vapor transition', () => {
       E2E_TIMEOUT,
     )
 
-    test.todo(
+    test(
       'transition + fallthrough attrs (in-out mode)',
-      async () => {},
+      async () => {
+        const btnSelector = '.if-fallthrough-attr-in-out > button'
+        const containerSelector = '.if-fallthrough-attr-in-out > div'
+
+        expect(await html(containerSelector)).toBe('<div foo="1">one</div>')
+
+        // toggle
+        await click(btnSelector)
+        await nextTick()
+        await transitionFinish(duration * 3)
+        let calls = await page().evaluate(() => {
+          return (window as any).getCalls('ifInOut')
+        })
+        expect(calls).toStrictEqual([
+          'beforeEnter',
+          'onEnter',
+          'afterEnter',
+          'beforeLeave',
+          'onLeave',
+          'afterLeave',
+        ])
+
+        expect(await html(containerSelector)).toBe(
+          '<div foo="1" class="">two</div>',
+        )
+
+        // clear calls
+        await page().evaluate(() => {
+          ;(window as any).resetCalls('ifInOut')
+        })
+
+        // toggle back
+        await click(btnSelector)
+        await nextTick()
+        await transitionFinish(duration * 3)
+
+        calls = await page().evaluate(() => {
+          return (window as any).getCalls('ifInOut')
+        })
+        expect(calls).toStrictEqual([
+          'beforeEnter',
+          'onEnter',
+          'afterEnter',
+          'beforeLeave',
+          'onLeave',
+          'afterLeave',
+        ])
+
+        expect(await html(containerSelector)).toBe(
+          '<div foo="1" class="">one</div>',
+        )
+      },
       E2E_TIMEOUT,
     )
   })

packages-private/vapor-e2e-test/transition/App.vue

@@ -21,6 +21,7 @@ let calls = {
   enterCancel: [],
   withAppear: [],
   cssFalse: [],
+  ifInOut: [],
 }
 window.getCalls = key => calls[key]
 window.resetCalls = key => (calls[key] = [])
@@ -73,6 +74,16 @@ const view = shallowRef(One)
 function changeView() {
   view.value = view.value === One ? Two : One
 }
+
+const SimpleOne = defineVaporComponent({
+  setup() {
+    return template('<div>one</div>', true)()
+  },
+})
+const viewInOut = shallowRef(SimpleOne)
+function changeViewInOut() {
+  viewInOut.value = viewInOut.value === SimpleOne ? Two : SimpleOne
+}
 </script>
 
 <template>
@@ -308,6 +319,24 @@ function changeView() {
       </div>
       <button @click="toggle = !toggle">button fallthrough</button>
     </div>
+    <div class="if-fallthrough-attr-in-out">
+      <div>
+        <transition
+          foo="1"
+          name="test"
+          mode="in-out"
+          @beforeEnter="() => calls.ifInOut.push('beforeEnter')"
+          @enter="() => calls.ifInOut.push('onEnter')"
+          @afterEnter="() => calls.ifInOut.push('afterEnter')"
+          @beforeLeave="() => calls.ifInOut.push('beforeLeave')"
+          @leave="() => calls.ifInOut.push('onLeave')"
+          @afterLeave="() => calls.ifInOut.push('afterLeave')"
+        >
+          <component :is="viewInOut"></component>
+        </transition>
+      </div>
+      <button @click="changeViewInOut">button</button>
+    </div>
 
     <div class="vshow">
       <button @click="show = !show">Show</button>

packages/runtime-vapor/src/component.ts

@@ -236,11 +236,9 @@ export function createComponent(
     instance.block instanceof Element &&
     Object.keys(instance.attrs).length
   ) {
-    renderEffect(() => {
-      isApplyingFallthroughProps = true
-      setDynamicProps(instance.block as Element, [instance.attrs])
-      isApplyingFallthroughProps = false
-    })
+    renderEffect(() =>
+      applyFallthroughProps(instance.block as Element, instance.attrs),
+    )
   }
 
   resetTracking()
@@ -258,6 +256,15 @@ export function createComponent(
 
 export let isApplyingFallthroughProps = false
 
+export function applyFallthroughProps(
+  block: Block,
+  attrs: Record<string, any>,
+): void {
+  isApplyingFallthroughProps = true
+  setDynamicProps(block as Element, [attrs])
+  isApplyingFallthroughProps = false
+}
+
 /**
  * dev only
  */

packages/runtime-vapor/src/components/Transition.ts

@@ -21,10 +21,13 @@ import {
   type VaporTransitionHooks,
   isFragment,
 } from '../block'
-import { type VaporComponentInstance, isVaporComponent } from '../component'
+import {
+  type VaporComponentInstance,
+  applyFallthroughProps,
+  isVaporComponent,
+} from '../component'
 import { extend, isArray } from '@vue/shared'
 import { renderEffect } from '../renderEffect'
-import { setDynamicProps } from '../dom/prop'
 
 const decorate = (t: typeof VaporTransition) => {
   t.displayName = 'VaporTransition'
@@ -71,7 +74,7 @@ export const VaporTransition: FunctionalComponent<TransitionProps> =
         const resolvedAttrs = extend({}, attrs)
         const child = findTransitionBlock(children)
         if (child) {
-          setDynamicProps(child, [resolvedAttrs])
+          applyFallthroughProps(child, resolvedAttrs)
           // ensure fallthrough attrs are not happened again in
           // applyTransitionHooks
           fallthroughAttrs = false
@@ -185,7 +188,7 @@ export function applyTransitionHooks(
 
   // fallthrough attrs
   if (fallthroughAttrs && instance.hasFallthrough) {
-    setDynamicProps(child, [instance.attrs])
+    applyFallthroughProps(child, instance.attrs)
   }
 
   return resolvedHooks
@@ -256,7 +259,8 @@ export function findTransitionBlock(
     if (block instanceof Element) child = block
   } else if (isVaporComponent(block)) {
     child = findTransitionBlock(block.block)
-    if (child && child.$key === undefined) child.$key = block.type.__name
+    // use component id as key
+    if (child && child.$key === undefined) child.$key = block.uid
   } else if (isArray(block)) {
     child = block[0] as TransitionBlock
     let hasFound = false

packages/runtime-vapor/src/components/TransitionGroup.ts

@@ -31,10 +31,11 @@ import {
 import {
   type ObjectVaporComponent,
   type VaporComponentInstance,
+  applyFallthroughProps,
   isVaporComponent,
 } from '../component'
 import { isForBlock } from '../apiCreateFor'
-import { renderEffect, setDynamicProps } from '@vue/runtime-vapor'
+import { renderEffect } from '../renderEffect'
 
 const positionMap = new WeakMap<TransitionBlock, DOMRect>()
 const newPositionMap = new WeakMap<TransitionBlock, DOMRect>()
@@ -149,7 +150,7 @@ export const VaporTransitionGroup: ObjectVaporComponent = decorate({
       insert(slottedBlock, container)
       // fallthrough attrs
       if (instance!.hasFallthrough) {
-        renderEffect(() => setDynamicProps(container, [instance!.attrs]))
+        renderEffect(() => applyFallthroughProps(container, instance!.attrs))
       }
       return container
     } else {