Skip to content

Commit 8fabd2c

Browse files
edison1105edison1105
committed
perf(runtime-vapor): tree-shake transition operations from non-transition bundles
1 parent 0bb3df6 commit 8fabd2c

8 files changed

Lines changed: 89 additions & 23 deletions

File tree

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ import {
4949
isLastInsertion,
5050
resetInsertionState,
5151
} from './insertionState'
52-
import { applyTransitionHooks } from './transition'
52+
import { applyTransitionHooks, isTransitionEnabled } from './transition'
5353

5454
type Source = any[] | Record<any, any> | number | Set<any> | Map<any, any>
5555

@@ -493,7 +493,7 @@ export const createFor = (
493493
))
494494

495495
// apply transition for new nodes
496-
if (frag.$transition) {
496+
if (isTransitionEnabled && frag.$transition) {
497497
applyTransitionHooks(block.nodes, frag.$transition)
498498
}
499499

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

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,18 @@ import {
1212
type TransitionHooks,
1313
type TransitionProps,
1414
type TransitionState,
15-
performTransitionEnter,
16-
performTransitionLeave,
1715
} from '@vue/runtime-dom'
1816
import {
1917
type DynamicFragment,
2018
type VaporFragment,
2119
isFragment,
2220
} from './fragment'
2321
import { isTeleportFragment } from './components/Teleport'
22+
import {
23+
isTransitionEnabled,
24+
runTransitionEnter,
25+
runTransitionLeave,
26+
} from './transition'
2427

2528
export interface VaporTransitionHooks extends TransitionHooks {
2629
state: TransitionState
@@ -101,13 +104,14 @@ export function insert(
101104
if (!isHydrating) {
102105
// only apply transition on Element nodes
103106
if (
107+
isTransitionEnabled &&
104108
block instanceof Element &&
105109
(block as TransitionBlock).$transition &&
106110
!(block as TransitionBlock).$transition!.disabled
107111
) {
108-
performTransitionEnter(
112+
runTransitionEnter(
109113
block,
110-
(block as TransitionBlock).$transition as TransitionHooks,
114+
(block as TransitionBlock).$transition as VaporTransitionHooks,
111115
() => parent.insertBefore(block, anchor as Node),
112116
parentSuspense,
113117
)
@@ -151,23 +155,24 @@ export function move(
151155
if (block instanceof Node) {
152156
// only apply transition on Element nodes
153157
if (
158+
isTransitionEnabled &&
154159
block instanceof Element &&
155160
(block as TransitionBlock).$transition &&
156161
!(block as TransitionBlock).$transition!.disabled &&
157162
moveType !== MoveType.REORDER
158163
) {
159164
if (moveType === MoveType.ENTER) {
160-
performTransitionEnter(
165+
runTransitionEnter(
161166
block,
162-
(block as TransitionBlock).$transition as TransitionHooks,
167+
(block as TransitionBlock).$transition as VaporTransitionHooks,
163168
() => parent.insertBefore(block, anchor as Node),
164169
parentSuspense,
165170
true,
166171
)
167172
} else {
168-
performTransitionLeave(
173+
runTransitionLeave(
169174
block,
170-
(block as TransitionBlock).$transition as TransitionHooks,
175+
(block as TransitionBlock).$transition as VaporTransitionHooks,
171176
() => {
172177
// if the component is unmounted after leave finish, remove the block
173178
// to avoid retaining a detached node.
@@ -240,10 +245,14 @@ export function prepend(parent: ParentNode, ...blocks: Block[]): void {
240245

241246
export function remove(block: Block, parent?: ParentNode): void {
242247
if (block instanceof Node) {
243-
if ((block as TransitionBlock).$transition && block instanceof Element) {
244-
performTransitionLeave(
248+
if (
249+
isTransitionEnabled &&
250+
(block as TransitionBlock).$transition &&
251+
block instanceof Element
252+
) {
253+
runTransitionLeave(
245254
block,
246-
(block as TransitionBlock).$transition as TransitionHooks,
255+
(block as TransitionBlock).$transition as VaporTransitionHooks,
247256
() => parent && parent.removeChild(block),
248257
)
249258
} else {

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ import type { VaporElement } from './apiDefineCustomElement'
124124
import { parentSuspense, setParentSuspense } from './components/Suspense'
125125
import { isInteropEnabled } from './vdomInteropState'
126126
import { setComponentScopeId, setScopeId } from './scopeId'
127+
import { isTransitionEnabled } from './transition'
127128

128129
export { currentInstance } from '@vue/runtime-dom'
129130

@@ -281,7 +282,9 @@ export function createComponent(
281282
if (
282283
(isSingleRoot ||
283284
// transition has attrs fallthrough
284-
(currentInstance && isVaporTransition(currentInstance!.type))) &&
285+
(isTransitionEnabled
286+
? currentInstance && isVaporTransition(currentInstance!.type)
287+
: false)) &&
285288
component.inheritAttrs !== false &&
286289
isVaporComponent(currentInstance) &&
287290
currentInstance.hasFallthrough
@@ -1177,7 +1180,8 @@ function handleSetupResult(
11771180
if (root) {
11781181
renderEffect(() => {
11791182
const attrs =
1180-
isFunction(component) && !isVaporTransition(component)
1183+
isFunction(component) &&
1184+
!(isTransitionEnabled ? isVaporTransition(component) : false)
11811185
? getFunctionalFallthrough(instance.attrs)
11821186
: instance.attrs
11831187
if (attrs) applyFallthroughProps(root, attrs)

‎packages/runtime-vapor/src/components/Teleport.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ import {
4545
} from '../dom/hydration'
4646
import type { DefineVaporSetupFnComponent } from '../apiDefineComponent'
4747
import { getScopeOwner } from '../componentSlots'
48-
import { applyTransitionHooks } from '../transition'
48+
import { applyTransitionHooks, isTransitionEnabled } from '../transition'
4949

5050
const VaporTeleportImpl = {
5151
name: 'VaporTeleport',
@@ -196,7 +196,7 @@ export class TeleportFragment extends VaporFragment {
196196
private mount(parent: ParentNode, anchor: Node | null) {
197197
// don't apply transitions during move teleports
198198
// algin with Vue DOM teleport behavior
199-
if (this.$transition && !this.isMounted) {
199+
if (isTransitionEnabled && this.$transition && !this.isMounted) {
200200
applyTransitionHooks(this.nodes, this.$transition)
201201
}
202202
if (this.isMounted) {

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import {
1717
isTemplateNode,
1818
leaveCbKey,
1919
onBeforeMount,
20+
performTransitionEnter,
21+
performTransitionLeave,
2022
queuePostFlushCb,
2123
resolveTransitionProps,
2224
useTransitionState,
@@ -66,6 +68,8 @@ export const ensureTransitionHooksRegistered = (): void => {
6668
registerTransitionHooks(
6769
applyTransitionHooksImpl,
6870
applyTransitionLeaveHooksImpl,
71+
performTransitionEnter,
72+
performTransitionLeave,
6973
)
7074
}
7175
}

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,11 @@ import {
5353
setCurrentKeepAliveCtx,
5454
withCurrentCacheKey,
5555
} from './components/KeepAlive'
56-
import { applyTransitionHooks, applyTransitionLeaveHooks } from './transition'
56+
import {
57+
applyTransitionHooks,
58+
applyTransitionLeaveHooks,
59+
isTransitionEnabled,
60+
} from './transition'
5761

5862
export class VaporFragment<
5963
T extends Block = Block,
@@ -192,7 +196,7 @@ export class DynamicFragment extends VaporFragment {
192196
return
193197
}
194198

195-
const transition = this.$transition
199+
const transition = isTransitionEnabled ? this.$transition : undefined
196200
// currently leaving: defer mounting the next branch until
197201
// the leave finishes.
198202
if (transition && transition.state.isLeaving) {
@@ -324,7 +328,7 @@ export class DynamicFragment extends VaporFragment {
324328
const key = this.keyed ? this.current : this.$key
325329
if (key !== undefined) setBlockKey(this.nodes, key)
326330

327-
if (transition) {
331+
if (isTransitionEnabled && transition) {
328332
this.$transition = applyTransitionHooks(this.nodes, transition)
329333
}
330334

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

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,30 +12,72 @@ type ApplyTransitionLeaveHooksFn = (
1212
enterHooks: VaporTransitionHooks,
1313
afterLeaveCb: () => void,
1414
) => void
15+
type RunTransitionEnterFn = (
16+
el: Element,
17+
hooks: VaporTransitionHooks,
18+
insert: () => void,
19+
parentSuspense?: any,
20+
force?: boolean,
21+
) => void
22+
type RunTransitionLeaveFn = (
23+
el: Element,
24+
hooks: VaporTransitionHooks,
25+
remove: () => void,
26+
isElement?: boolean,
27+
force?: boolean,
28+
) => void
1529

1630
let _applyTransitionHooks: ApplyTransitionHooksFn | undefined
1731
let _applyTransitionLeaveHooks: ApplyTransitionLeaveHooksFn | undefined
32+
let _runTransitionEnter: RunTransitionEnterFn | undefined
33+
let _runTransitionLeave: RunTransitionLeaveFn | undefined
34+
35+
export let isTransitionEnabled = false
1836

1937
export function registerTransitionHooks(
2038
applyHooks: ApplyTransitionHooksFn,
2139
applyLeaveHooks: ApplyTransitionLeaveHooksFn,
40+
runEnter: RunTransitionEnterFn,
41+
runLeave: RunTransitionLeaveFn,
2242
): void {
43+
isTransitionEnabled = true
2344
_applyTransitionHooks = applyHooks
2445
_applyTransitionLeaveHooks = applyLeaveHooks
46+
_runTransitionEnter = runEnter
47+
_runTransitionLeave = runLeave
2548
}
2649

2750
export function applyTransitionHooks(
2851
block: Block,
2952
hooks: VaporTransitionHooks,
3053
): VaporTransitionHooks {
31-
return _applyTransitionHooks ? _applyTransitionHooks(block, hooks) : hooks
54+
return _applyTransitionHooks!(block, hooks)
3255
}
3356

3457
export function applyTransitionLeaveHooks(
3558
block: Block,
3659
enterHooks: VaporTransitionHooks,
3760
afterLeaveCb: () => void,
3861
): void {
39-
_applyTransitionLeaveHooks &&
40-
_applyTransitionLeaveHooks(block, enterHooks, afterLeaveCb)
62+
_applyTransitionLeaveHooks!(block, enterHooks, afterLeaveCb)
63+
}
64+
65+
export function runTransitionEnter(
66+
el: Element,
67+
hooks: VaporTransitionHooks,
68+
insert: () => void,
69+
parentSuspense?: any,
70+
force?: boolean,
71+
): void {
72+
_runTransitionEnter!(el, hooks, insert, parentSuspense, force)
73+
}
74+
75+
export function runTransitionLeave(
76+
el: Element,
77+
hooks: VaporTransitionHooks,
78+
remove: () => void,
79+
isElement?: boolean,
80+
force?: boolean,
81+
): void {
82+
_runTransitionLeave!(el, hooks, remove, isElement, force)
4183
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ import {
111111
} from './fragment'
112112
import type { NodeRef } from './apiTemplateRef'
113113
import {
114+
ensureTransitionHooksRegistered,
114115
getVNodeKey,
115116
setTransitionHooks as setVaporTransitionHooks,
116117
} from './components/Transition'
@@ -201,6 +202,7 @@ const vaporInteropImpl: Omit<
201202
instance.shapeFlag = vnode.shapeFlag
202203

203204
if (vnode.transition) {
205+
ensureTransitionHooksRegistered()
204206
setVaporTransitionHooks(
205207
instance,
206208
vnode.transition as VaporTransitionHooks,
@@ -434,6 +436,7 @@ const vaporInteropImpl: Omit<
434436
},
435437

436438
setTransitionHooks(component, hooks) {
439+
ensureTransitionHooksRegistered()
437440
setVaporTransitionHooks(component as any, hooks as VaporTransitionHooks)
438441
},
439442

0 commit comments

Comments
 (0)