Skip to content

Commit 1e79054

Browse files
edison1105edison1105
committed
wip: save
1 parent 413651d commit 1e79054

File tree

6 files changed

+177
-126
lines changed

6 files changed

+177
-126
lines changed

‎packages/runtime-core/src/components/BaseTransition.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -320,8 +320,8 @@ function getLeavingNodesForType(
320320
}
321321

322322
export interface TransitionHooksContext {
323-
setLeavingNodeCache: () => void
324-
unsetLeavingNodeCache: () => void
323+
setLeavingNodeCache: (node: any) => void
324+
unsetLeavingNodeCache: (node: any) => void
325325
earlyRemove: () => void
326326
cloneHooks: (node: any) => TransitionHooks
327327
}
@@ -502,9 +502,9 @@ export function baseResolveTransitionHooks(
502502
callHook(onAfterLeave, [el])
503503
}
504504
el[leaveCbKey] = undefined
505-
unsetLeavingNodeCache()
505+
unsetLeavingNodeCache(el)
506506
})
507-
setLeavingNodeCache()
507+
setLeavingNodeCache(el)
508508
if (onLeave) {
509509
callAsyncHook(onLeave, [el, done])
510510
} else {

‎packages/runtime-core/src/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -564,4 +564,4 @@ export { initFeatureFlags } from './featureFlags'
564564
/**
565565
* @internal
566566
*/
567-
export { applyTransitionEnter, applyTransitionLeave } from './renderer'
567+
export { performTransitionEnter, performTransitionLeave } from './renderer'

‎packages/runtime-core/src/renderer.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -732,7 +732,7 @@ function baseCreateRenderer(
732732
// #1583 For inside suspense + suspense not resolved case, enter hook should call when suspense resolved
733733
// #1689 For inside suspense + suspense resolved case, just call it
734734
if (transition) {
735-
applyTransitionEnter(
735+
performTransitionEnter(
736736
el,
737737
transition,
738738
() => hostInsert(el, container, anchor),
@@ -2116,7 +2116,7 @@ function baseCreateRenderer(
21162116
transition
21172117
if (needTransition) {
21182118
if (moveType === MoveType.ENTER) {
2119-
applyTransitionEnter(
2119+
performTransitionEnter(
21202120
el!,
21212121
transition,
21222122
() => hostInsert(el!, container, anchor),
@@ -2297,7 +2297,7 @@ function baseCreateRenderer(
22972297
}
22982298

22992299
if (transition) {
2300-
applyTransitionLeave(
2300+
performTransitionLeave(
23012301
el!,
23022302
transition,
23032303
() => hostRemove(el!),
@@ -2622,7 +2622,7 @@ export function invalidateMount(hooks: LifecycleHook | undefined): void {
26222622
}
26232623
}
26242624

2625-
export function applyTransitionEnter(
2625+
export function performTransitionEnter(
26262626
el: RendererElement,
26272627
transition: TransitionHooks,
26282628
insert: () => void,
@@ -2637,7 +2637,7 @@ export function applyTransitionEnter(
26372637
}
26382638
}
26392639

2640-
export function applyTransitionLeave(
2640+
export function performTransitionLeave(
26412641
el: RendererElement,
26422642
transition: TransitionHooks,
26432643
remove: () => void,

‎packages/runtime-vapor/src/block.ts

+51-34
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,15 @@ import { createComment, createTextNode } from './dom/node'
99
import { EffectScope, pauseTracking, resetTracking } from '@vue/reactivity'
1010
import {
1111
type TransitionHooks,
12-
applyTransitionEnter,
13-
applyTransitionLeave,
12+
type TransitionProps,
13+
type TransitionState,
14+
performTransitionEnter,
15+
performTransitionLeave,
1416
} from '@vue/runtime-dom'
17+
import {
18+
applyTransitionEnterHooks,
19+
applyTransitionLeaveHooks,
20+
} from './components/Transition'
1521

1622
export type Block = (
1723
| Node
@@ -22,13 +28,14 @@ export type Block = (
2228
) &
2329
TransitionBlock
2430

31+
export interface VaporTransitionHooks extends TransitionHooks {
32+
state?: TransitionState
33+
props?: TransitionProps
34+
}
35+
2536
export type TransitionBlock = {
2637
key?: any
27-
transition?: TransitionHooks
28-
applyTransitionLeavingHooks?: (
29-
block: Block,
30-
afterLeaveCb: () => void,
31-
) => TransitionHooks | undefined
38+
transition?: VaporTransitionHooks
3239
}
3340

3441
export type BlockFn = (...args: any[]) => Block
@@ -38,11 +45,7 @@ export class VaporFragment {
3845
anchor?: Node
3946
insert?: (parent: ParentNode, anchor: Node | null) => void
4047
remove?: (parent?: ParentNode) => void
41-
transition?: TransitionHooks
42-
applyTransitionLeavingHooks?: (
43-
block: Block,
44-
afterLeaveCb: () => void,
45-
) => TransitionHooks | undefined
48+
transitionChild?: TransitionBlock | undefined
4649

4750
constructor(nodes: Block) {
4851
this.nodes = nodes
@@ -54,6 +57,7 @@ export class DynamicFragment extends VaporFragment {
5457
scope: EffectScope | undefined
5558
current?: BlockFn
5659
fallback?: BlockFn
60+
transitionChild?: Block
5761

5862
constructor(anchorLabel?: string) {
5963
super([])
@@ -72,9 +76,18 @@ export class DynamicFragment extends VaporFragment {
7276

7377
const renderBranch = () => {
7478
if (render) {
79+
const transition = this.transition
7580
this.scope = new EffectScope()
7681
this.nodes = this.scope.run(render) || []
77-
if (parent) insert(this.nodes, parent, this.anchor, this.transition)
82+
if (transition) {
83+
this.transitionChild = applyTransitionEnterHooks(
84+
this.nodes,
85+
transition.state!,
86+
transition.props!,
87+
transition,
88+
)
89+
}
90+
if (parent) insert(this.nodes, parent, this.anchor)
7891
} else {
7992
this.scope = undefined
8093
this.nodes = []
@@ -86,32 +99,39 @@ export class DynamicFragment extends VaporFragment {
8699
this.scope.stop()
87100
const mode = this.transition && this.transition.mode
88101
if (mode) {
89-
const transition = this.applyTransitionLeavingHooks!(
102+
applyTransitionLeaveHooks(
90103
this.nodes,
104+
this.transition!.state!,
105+
this.transition!.props!,
91106
renderBranch,
107+
this.transition,
92108
)
93-
parent && remove(this.nodes, parent, transition)
109+
parent && remove(this.nodes, parent)
94110
if (mode === 'out-in') {
95111
resetTracking()
96112
return
97113
}
98114
} else {
99-
parent && remove(this.nodes, parent, this.transition)
115+
parent && remove(this.nodes, parent)
100116
}
101117
}
102118

103119
renderBranch()
104120

105121
if (this.fallback && !isValidBlock(this.nodes)) {
106-
parent && remove(this.nodes, parent, this.transition)
122+
parent && remove(this.nodes, parent)
107123
this.nodes =
108124
(this.scope || (this.scope = new EffectScope())).run(this.fallback) ||
109125
[]
110-
parent && insert(this.nodes, parent, this.anchor, this.transition)
126+
parent && insert(this.nodes, parent, this.anchor)
111127
}
112128

113129
resetTracking()
114130
}
131+
132+
get transition(): VaporTransitionHooks | undefined {
133+
return this.transitionChild && this.transitionChild.transition
134+
}
115135
}
116136

117137
export function isFragment(val: NonNullable<unknown>): val is VaporFragment {
@@ -144,24 +164,24 @@ export function insert(
144164
block: Block,
145165
parent: ParentNode,
146166
anchor: Node | null | 0 = null, // 0 means prepend
147-
transition: TransitionHooks | undefined = block.transition,
148167
parentSuspense?: any, // TODO Suspense
149168
): void {
150169
anchor = anchor === 0 ? parent.firstChild : anchor
151170
if (block instanceof Node) {
152171
// don't apply transition on text or comment nodes
153-
if (transition && block instanceof Element) {
154-
applyTransitionEnter(
172+
if (block.transition && block instanceof Element) {
173+
performTransitionEnter(
155174
block,
156-
transition,
175+
// @ts-expect-error
176+
block.transition,
157177
() => parent.insertBefore(block, anchor),
158178
parentSuspense,
159179
)
160180
} else {
161181
parent.insertBefore(block, anchor)
162182
}
163183
} else if (isVaporComponent(block)) {
164-
mountComponent(block, parent, anchor, transition)
184+
mountComponent(block, parent, anchor)
165185
} else if (isArray(block)) {
166186
for (let i = 0; i < block.length; i++) {
167187
insert(block[i], parent, anchor)
@@ -171,7 +191,7 @@ export function insert(
171191
if (block.insert) {
172192
block.insert(parent, anchor)
173193
} else {
174-
insert(block.nodes, parent, anchor, block.transition)
194+
insert(block.nodes, parent, anchor, parentSuspense)
175195
}
176196
if (block.anchor) insert(block.anchor, parent, anchor)
177197
}
@@ -182,23 +202,20 @@ export function prepend(parent: ParentNode, ...blocks: Block[]): void {
182202
while (i--) insert(blocks[i], parent, 0)
183203
}
184204

185-
export function remove(
186-
block: Block,
187-
parent?: ParentNode,
188-
transition: TransitionHooks | undefined = block.transition,
189-
): void {
205+
export function remove(block: Block, parent?: ParentNode): void {
190206
if (block instanceof Node) {
191-
if (transition && block instanceof Element) {
192-
applyTransitionLeave(
207+
if (block.transition && block instanceof Element) {
208+
performTransitionLeave(
193209
block,
194-
transition,
210+
// @ts-expect-error
211+
block.transition,
195212
() => parent && parent.removeChild(block),
196213
)
197214
} else {
198215
parent && parent.removeChild(block)
199216
}
200217
} else if (isVaporComponent(block)) {
201-
unmountComponent(block, parent, transition)
218+
unmountComponent(block, parent)
202219
} else if (isArray(block)) {
203220
for (let i = 0; i < block.length; i++) {
204221
remove(block[i], parent)
@@ -208,7 +225,7 @@ export function remove(
208225
if (block.remove) {
209226
block.remove(parent)
210227
} else {
211-
remove(block.nodes, parent, block.transition)
228+
remove(block.nodes, parent)
212229
}
213230
if (block.anchor) remove(block.anchor, parent)
214231
if ((block as DynamicFragment).scope) {

‎packages/runtime-vapor/src/component.ts

+3-6
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
type NormalizedPropsOptions,
1212
type ObjectEmitsOptions,
1313
type SuspenseBoundary,
14-
type TransitionHooks,
1514
callWithErrorHandling,
1615
currentInstance,
1716
endMeasure,
@@ -476,18 +475,17 @@ export function mountComponent(
476475
instance: VaporComponentInstance,
477476
parent: ParentNode,
478477
anchor?: Node | null | 0,
479-
transition?: TransitionHooks,
480478
): void {
481479
if (__DEV__) {
482480
startMeasure(instance, `mount`)
483481
}
484482
if (!instance.isMounted) {
485483
if (instance.bm) invokeArrayFns(instance.bm)
486-
insert(instance.block, parent, anchor, transition)
484+
insert(instance.block, parent, anchor)
487485
if (instance.m) queuePostFlushCb(() => invokeArrayFns(instance.m!))
488486
instance.isMounted = true
489487
} else {
490-
insert(instance.block, parent, anchor, transition)
488+
insert(instance.block, parent, anchor)
491489
}
492490
if (__DEV__) {
493491
endMeasure(instance, `mount`)
@@ -497,7 +495,6 @@ export function mountComponent(
497495
export function unmountComponent(
498496
instance: VaporComponentInstance,
499497
parentNode?: ParentNode,
500-
transition?: TransitionHooks,
501498
): void {
502499
if (instance.isMounted && !instance.isUnmounted) {
503500
if (__DEV__ && instance.type.__hmrId) {
@@ -516,7 +513,7 @@ export function unmountComponent(
516513
}
517514

518515
if (parentNode) {
519-
remove(instance.block, parentNode, transition)
516+
remove(instance.block, parentNode)
520517
}
521518
}
522519

0 commit comments

Comments
 (0)