Skip to content

Commit

Permalink
fix(build): improve built-in components treeshakability
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 committed Sep 4, 2024
1 parent 475977a commit 4eee630
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 37 deletions.
9 changes: 6 additions & 3 deletions packages/runtime-core/src/components/KeepAlive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -362,13 +362,16 @@ const KeepAliveImpl: ComponentOptions = {
},
}

if (__COMPAT__) {
KeepAliveImpl.__isBuildIn = true
const decorate = (t: typeof KeepAliveImpl) => {
t.__isBuiltIn = true
return t
}

// export the public type for h/tsx inference
// also to avoid inline import() in generated d.ts files
export const KeepAlive = KeepAliveImpl as any as {
export const KeepAlive = (__COMPAT__
? /*#__PURE__*/ decorate(KeepAliveImpl)
: KeepAliveImpl) as any as {
__isKeepAlive: true
new (): {
$props: VNodeProps & KeepAliveProps
Expand Down
46 changes: 27 additions & 19 deletions packages/runtime-dom/src/components/Transition.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,19 +42,6 @@ export interface ElementWithTransition extends HTMLElement {
[vtcKey]?: Set<string>
}

// DOM Transition is a higher-order-component based on the platform-agnostic
// base Transition component, with DOM-specific logic.
export const Transition: FunctionalComponent<TransitionProps> = (
props,
{ slots },
) => h(BaseTransition, resolveTransitionProps(props), slots)

Transition.displayName = 'Transition'

if (__COMPAT__) {
Transition.__isBuiltIn = true
}

const DOMTransitionPropsValidators = {
name: String,
type: String,
Expand All @@ -74,12 +61,33 @@ const DOMTransitionPropsValidators = {
leaveToClass: String,
}

export const TransitionPropsValidators: any = (Transition.props =
/*#__PURE__*/ extend(
{},
BaseTransitionPropsValidators as any,
DOMTransitionPropsValidators,
))
export const TransitionPropsValidators: any = /*#__PURE__*/ extend(
{},
BaseTransitionPropsValidators as any,
DOMTransitionPropsValidators,
)

/**
* Wrap logic that attaches extra properties to Transition in a function
* so that it can be annotated as pure
*/
const decorate = (t: typeof Transition) => {
t.displayName = 'Transition'
t.props = TransitionPropsValidators
if (__COMPAT__) {
t.__isBuiltIn = true
}
return t
}

/**
* DOM Transition is a higher-order-component based on the platform-agnostic
* base Transition component, with DOM-specific logic.
*/
export const Transition: FunctionalComponent<TransitionProps> =
/*#__PURE__*/ decorate((props, { slots }) =>
h(BaseTransition, resolveTransitionProps(props), slots),
)

/**
* #3227 Incoming hooks may be merged into arrays when wrapping Transition
Expand Down
32 changes: 17 additions & 15 deletions packages/runtime-dom/src/components/TransitionGroup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,27 @@ const positionMap = new WeakMap<VNode, DOMRect>()
const newPositionMap = new WeakMap<VNode, DOMRect>()
const moveCbKey = Symbol('_moveCb')
const enterCbKey = Symbol('_enterCb')

export type TransitionGroupProps = Omit<TransitionProps, 'mode'> & {
tag?: string
moveClass?: string
}

const TransitionGroupImpl: ComponentOptions = {
/**
* Wrap logic that modifies TransitionGroup properties in a function
* so that it can be annotated as pure
*/
const decorate = (t: typeof TransitionGroupImpl) => {
// TransitionGroup does not support "mode" so we need to remove it from the
// props declarations, but direct delete operation is considered a side effect
delete t.props.mode
if (__COMPAT__) {
t.__isBuiltIn = true
}
return t
}

const TransitionGroupImpl: ComponentOptions = /*#__PURE__*/ decorate({
name: 'TransitionGroup',

props: /*#__PURE__*/ extend({}, TransitionPropsValidators, {
Expand Down Expand Up @@ -152,20 +167,7 @@ const TransitionGroupImpl: ComponentOptions = {
return createVNode(tag, null, children)
}
},
}

if (__COMPAT__) {
TransitionGroupImpl.__isBuiltIn = true
}

/**
* TransitionGroup does not support "mode" so we need to remove it from the
* props declarations, but direct delete operation is considered a side effect
* and will make the entire transition feature non-tree-shakeable, so we do it
* in a function and mark the function's invocation as pure.
*/
const removeMode = (props: any) => delete props.mode
/*#__PURE__*/ removeMode(TransitionGroupImpl.props)
})

export const TransitionGroup = TransitionGroupImpl as unknown as {
new (): {
Expand Down

0 comments on commit 4eee630

Please sign in to comment.