Selaa lähdekoodia

fix(runtime-vapor): refactor move function into insert with MoveType parameter

daiwei 4 kuukautta sitten
vanhempi
commit
387c02b24b

+ 6 - 2
packages/runtime-vapor/__tests__/hmr.spec.ts

@@ -276,11 +276,14 @@ describe('hot module replacement', () => {
       components: { Child },
       components: { Child },
       setup() {
       setup() {
         const toggle = ref(true)
         const toggle = ref(true)
-        return { toggle }
+        function onLeave(_: any, done: Function) {
+          setTimeout(done, 0)
+        }
+        return { toggle, onLeave }
       },
       },
       render: compileToFunction(
       render: compileToFunction(
         `<button @click="toggle = !toggle" />
         `<button @click="toggle = !toggle" />
-        <Transition>
+        <Transition @leave="onLeave">
           <KeepAlive><Child v-if="toggle" /></KeepAlive>
           <KeepAlive><Child v-if="toggle" /></KeepAlive>
         </Transition>`,
         </Transition>`,
       ),
       ),
@@ -303,6 +306,7 @@ describe('hot module replacement', () => {
       render: compileToFunction(`<div>{{ count }}</div>`),
       render: compileToFunction(`<div>{{ count }}</div>`),
     })
     })
     await nextTick()
     await nextTick()
+    await new Promise(r => setTimeout(r, 0))
     expect(root.innerHTML).toBe(`<button></button><div>1</div><!--if-->`)
     expect(root.innerHTML).toBe(`<button></button><div>1</div><!--if-->`)
     expect(unmountSpy).toHaveBeenCalledTimes(1)
     expect(unmountSpy).toHaveBeenCalledTimes(1)
     expect(mountSpy).toHaveBeenCalledTimes(1)
     expect(mountSpy).toHaveBeenCalledTimes(1)

+ 8 - 25
packages/runtime-vapor/src/block.ts

@@ -8,6 +8,7 @@ import {
 import { _child } from './dom/node'
 import { _child } from './dom/node'
 import { isComment, isHydrating } from './dom/hydration'
 import { isComment, isHydrating } from './dom/hydration'
 import {
 import {
+  MoveType,
   type TransitionHooks,
   type TransitionHooks,
   type TransitionProps,
   type TransitionProps,
   type TransitionState,
   type TransitionState,
@@ -77,6 +78,7 @@ export function insert(
   block: Block,
   block: Block,
   parent: ParentNode & { $fc?: Node | null },
   parent: ParentNode & { $fc?: Node | null },
   anchor: Node | null | 0 = null, // 0 means prepend
   anchor: Node | null | 0 = null, // 0 means prepend
+  moveType: MoveType = MoveType.ENTER,
   parentSuspense?: any, // TODO Suspense
   parentSuspense?: any, // TODO Suspense
 ): void {
 ): void {
   anchor = anchor === 0 ? parent.$fc || _child(parent) : anchor
   anchor = anchor === 0 ? parent.$fc || _child(parent) : anchor
@@ -88,7 +90,12 @@ export function insert(
         (block as TransitionBlock).$transition &&
         (block as TransitionBlock).$transition &&
         !(block as TransitionBlock).$transition!.disabled
         !(block as TransitionBlock).$transition!.disabled
       ) {
       ) {
-        performTransitionEnter(
+        const action =
+          moveType === MoveType.LEAVE
+            ? performTransitionLeave
+            : performTransitionEnter
+
+        action(
           block,
           block,
           (block as TransitionBlock).$transition as TransitionHooks,
           (block as TransitionBlock).$transition as TransitionHooks,
           () => parent.insertBefore(block, anchor as Node),
           () => parent.insertBefore(block, anchor as Node),
@@ -158,30 +165,6 @@ export function remove(block: Block, parent?: ParentNode): void {
   }
   }
 }
 }
 
 
-export function move(block: Block, parent: ParentNode): void {
-  if (block instanceof Node) {
-    if ((block as TransitionBlock).$transition && block instanceof Element) {
-      performTransitionLeave(
-        block,
-        (block as TransitionBlock).$transition as TransitionHooks,
-        () => insert(block, parent),
-      )
-    } else {
-      insert(block, parent)
-    }
-  } else if (isVaporComponent(block)) {
-    move(block.block, parent)
-  } else if (isArray(block)) {
-    for (let i = 0; i < block.length; i++) {
-      move(block[i], parent)
-    }
-  } else {
-    // fragment
-    move(block.nodes, parent)
-    if (block.anchor) move(block.anchor, parent)
-  }
-}
-
 /**
 /**
  * dev / test only
  * dev / test only
  */
  */

+ 3 - 2
packages/runtime-vapor/src/components/KeepAlive.ts

@@ -3,6 +3,7 @@ import {
   type GenericComponent,
   type GenericComponent,
   type GenericComponentInstance,
   type GenericComponentInstance,
   type KeepAliveProps,
   type KeepAliveProps,
+  MoveType,
   type VNode,
   type VNode,
   currentInstance,
   currentInstance,
   devtoolsComponentAdded,
   devtoolsComponentAdded,
@@ -18,7 +19,7 @@ import {
   warn,
   warn,
   watch,
   watch,
 } from '@vue/runtime-dom'
 } from '@vue/runtime-dom'
-import { type Block, insert, move, remove } from '../block'
+import { type Block, insert, remove } from '../block'
 import {
 import {
   type ObjectVaporComponent,
   type ObjectVaporComponent,
   type VaporComponent,
   type VaporComponent,
@@ -358,7 +359,7 @@ export function deactivate(
   instance: VaporComponentInstance,
   instance: VaporComponentInstance,
   container: ParentNode,
   container: ParentNode,
 ): void {
 ): void {
-  move(instance.block, container)
+  insert(instance.block, container, null, MoveType.LEAVE)
 
 
   queuePostFlushCb(() => {
   queuePostFlushCb(() => {
     if (instance.da) invokeArrayFns(instance.da)
     if (instance.da) invokeArrayFns(instance.da)