diff --git a/packages/compiler-vapor/src/generate.ts b/packages/compiler-vapor/src/generate.ts index 64d346d1d..e6d6a816c 100644 --- a/packages/compiler-vapor/src/generate.ts +++ b/packages/compiler-vapor/src/generate.ts @@ -130,10 +130,6 @@ export function generate( ) } - if (ir.hasTransition) { - push(NEWLINE, `${context.helper('useVaporTransition')}()`) - } - push(...genBlockContent(ir.block, context, true)) push(INDENT_END, NEWLINE) diff --git a/packages/compiler-vapor/src/generators/component.ts b/packages/compiler-vapor/src/generators/component.ts index c0ac49464..d6ade4ebd 100644 --- a/packages/compiler-vapor/src/generators/component.ts +++ b/packages/compiler-vapor/src/generators/component.ts @@ -39,7 +39,8 @@ import { genEventHandler } from './event' import { genDirectiveModifiers, genDirectivesForElement } from './directive' import { genBlock } from './block' import { genModelHandler } from './vModel' -import { isBuiltInComponent } from '../transforms/transformElement' + +import { isBuiltInComponent } from '../utils' export function genCreateComponent( operation: CreateComponentIRNode, diff --git a/packages/compiler-vapor/src/ir/index.ts b/packages/compiler-vapor/src/ir/index.ts index 387bf1136..cc0c9dcf3 100644 --- a/packages/compiler-vapor/src/ir/index.ts +++ b/packages/compiler-vapor/src/ir/index.ts @@ -68,7 +68,6 @@ export interface RootIRNode { directive: Set block: BlockIRNode hasTemplateRef: boolean - hasTransition: boolean } export interface IfIRNode extends BaseIRNode { diff --git a/packages/compiler-vapor/src/transform.ts b/packages/compiler-vapor/src/transform.ts index 788b1889a..76563899d 100644 --- a/packages/compiler-vapor/src/transform.ts +++ b/packages/compiler-vapor/src/transform.ts @@ -230,7 +230,6 @@ export function transform( directive: new Set(), block: newBlock(node), hasTemplateRef: false, - hasTransition: false, } const context = new TransformContext(ir, node, options) diff --git a/packages/compiler-vapor/src/transforms/transformElement.ts b/packages/compiler-vapor/src/transforms/transformElement.ts index 14cdf66c2..35fd596ee 100644 --- a/packages/compiler-vapor/src/transforms/transformElement.ts +++ b/packages/compiler-vapor/src/transforms/transformElement.ts @@ -1,4 +1,3 @@ -import { isValidHTMLNesting } from '@vue/compiler-dom' import { type AttributeNode, type ComponentNode, @@ -11,6 +10,7 @@ import { createCompilerError, createSimpleExpression, isStaticArgOf, + isValidHTMLNesting, } from '@vue/compiler-dom' import { camelize, @@ -36,7 +36,7 @@ import { type VaporDirectiveNode, } from '../ir' import { EMPTY_EXPRESSION } from './utils' -import { findProp } from '../utils' +import { findProp, isBuiltInComponent } from '../utils' export const isReservedProp: (key: string) => boolean = /*#__PURE__*/ makeMap( // the leading comma is intentional so empty string "" is also included @@ -441,9 +441,3 @@ function mergePropValues(existing: IRProp, incoming: IRProp) { function isComponentTag(tag: string) { return tag === 'component' || tag === 'Component' } - -export function isBuiltInComponent(tag: string): string | undefined { - if (tag === 'Transition' || tag === 'transition') { - return 'Transition' - } -} diff --git a/packages/compiler-vapor/src/transforms/vIf.ts b/packages/compiler-vapor/src/transforms/vIf.ts index 915134349..ad527a899 100644 --- a/packages/compiler-vapor/src/transforms/vIf.ts +++ b/packages/compiler-vapor/src/transforms/vIf.ts @@ -1,7 +1,6 @@ import { type ElementNode, ErrorCodes, - NodeTypes, createCompilerError, createSimpleExpression, } from '@vue/compiler-dom' @@ -19,7 +18,7 @@ import { import { extend } from '@vue/shared' import { newBlock, wrapTemplate } from './utils' import { getSiblingIf } from './transformComment' -import { isStaticExpression } from '../utils' +import { isInTransition, isStaticExpression } from '../utils' export const transformVIf: NodeTransform = createStructuralDirectiveTransform( ['if', 'else', 'else-if'], @@ -129,25 +128,3 @@ export function createIfBranch( branch.dynamic.needsKey = isInTransition(context) return [branch, exitBlock] } - -export function isInTransition( - context: TransformContext, -): boolean { - const parentNode = context.parent && context.parent.node - return !!(parentNode && isTransitionNode(parentNode as ElementNode, context)) -} - -export function isTransitionNode( - node: ElementNode, - context: TransformContext, -): boolean { - const inTransition = - node.type === NodeTypes.ELEMENT && - (node.tag === 'transition' || node.tag === 'Transition') - - if (inTransition) { - context.ir.hasTransition = true - } - - return inTransition -} diff --git a/packages/compiler-vapor/src/transforms/vSlot.ts b/packages/compiler-vapor/src/transforms/vSlot.ts index d14f91b58..66b24b0a9 100644 --- a/packages/compiler-vapor/src/transforms/vSlot.ts +++ b/packages/compiler-vapor/src/transforms/vSlot.ts @@ -23,8 +23,12 @@ import { type SlotBlockIRNode, type VaporDirectiveNode, } from '../ir' -import { findDir, findProp, resolveExpression } from '../utils' -import { isTransitionNode } from './vIf' +import { + findDir, + findProp, + isTransitionNode, + resolveExpression, +} from '../utils' export const transformVSlot: NodeTransform = (node, context) => { if (node.type !== NodeTypes.ELEMENT) return @@ -74,7 +78,7 @@ function transformComponentSlot( ) let slotKey - if (isTransitionNode(node, context)) { + if (isTransitionNode(node)) { const keyProp = findProp( nonSlotTemplateChildren[0] as ElementNode, 'key', diff --git a/packages/compiler-vapor/src/utils.ts b/packages/compiler-vapor/src/utils.ts index 728281914..d390c69a2 100644 --- a/packages/compiler-vapor/src/utils.ts +++ b/packages/compiler-vapor/src/utils.ts @@ -15,6 +15,7 @@ import { } from '@vue/compiler-dom' import type { VaporDirectiveNode } from './ir' import { EMPTY_EXPRESSION } from './transforms/utils' +import type { TransformContext } from './transform' export const findProp = _findProp as ( node: ElementNode, @@ -88,3 +89,25 @@ export function getLiteralExpressionValue( } return exp.isStatic ? exp.content : null } + +export function isInTransition( + context: TransformContext, +): boolean { + const parentNode = context.parent && context.parent.node + return !!(parentNode && isTransitionNode(parentNode as ElementNode)) +} + +export function isTransitionNode(node: ElementNode): boolean { + return node.type === NodeTypes.ELEMENT && isTransitionTag(node.tag) +} + +export function isTransitionTag(tag: string): boolean { + tag = tag.toLowerCase() + return tag === 'transition' || tag === 'vaportransition' +} + +export function isBuiltInComponent(tag: string): string | undefined { + if (isTransitionTag(tag)) { + return 'VaporTransition' + } +} diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts index 7e28dc083..6c6344bfc 100644 --- a/packages/runtime-dom/src/components/Transition.ts +++ b/packages/runtime-dom/src/components/Transition.ts @@ -4,11 +4,9 @@ import { BaseTransitionPropsValidators, DeprecationTypes, type FunctionalComponent, - type Slots, assertNumber, compatUtils, h, - renderSlot, } from '@vue/runtime-core' import { extend, isArray, isObject, toNumber } from '@vue/shared' @@ -34,20 +32,6 @@ export interface TransitionProps extends BaseTransitionProps { leaveToClass?: string } -export interface VaporTransitionInterface { - applyTransition: ( - props: TransitionProps, - slots: { default: () => any }, - ) => any -} - -let vaporTransitionImpl: VaporTransitionInterface | null = null -export const registerVaporTransition = ( - impl: VaporTransitionInterface, -): void => { - vaporTransitionImpl = impl -} - export const vtcKey: unique symbol = Symbol('_vtc') export interface ElementWithTransition extends HTMLElement { @@ -101,27 +85,9 @@ const decorate = (t: typeof Transition) => { * base Transition component, with DOM-specific logic. */ export const Transition: FunctionalComponent = - /*@__PURE__*/ decorate((props, { slots }) => { - const resolvedProps = resolveTransitionProps(props) - if (slots.__vapor) { - // with vapor interop plugin - if (slots.__interop) { - const children = vaporTransitionImpl!.applyTransition( - resolvedProps, - slots as any, - ) - const vaporSlots = { - default: () => children, - __interop: true, - } as any as Slots - return renderSlot(vaporSlots, 'default') - } - - return vaporTransitionImpl!.applyTransition(resolvedProps, slots as any) - } - - return h(BaseTransition, resolvedProps, slots) - }) + /*@__PURE__*/ decorate((props, { slots }) => + h(BaseTransition, resolveTransitionProps(props), slots), + ) /** * #3227 Incoming hooks may be merged into arrays when wrapping Transition diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts index 0cfd08e87..450ec74d1 100644 --- a/packages/runtime-dom/src/index.ts +++ b/packages/runtime-dom/src/index.ts @@ -354,9 +354,4 @@ export { export { resolveTransitionProps, TransitionPropsValidators, - registerVaporTransition, } from './components/Transition' -/** - * @internal - */ -export type { VaporTransitionInterface } from './components/Transition' diff --git a/packages/runtime-vapor/src/components/Transition.ts b/packages/runtime-vapor/src/components/Transition.ts index f6491aee3..92952ad81 100644 --- a/packages/runtime-vapor/src/components/Transition.ts +++ b/packages/runtime-vapor/src/components/Transition.ts @@ -1,15 +1,16 @@ import { + type FunctionalComponent, type GenericComponentInstance, type TransitionElement, type TransitionHooks, type TransitionHooksContext, type TransitionProps, + TransitionPropsValidators, type TransitionState, - type VaporTransitionInterface, baseResolveTransitionHooks, currentInstance, leaveCbKey, - registerVaporTransition, + resolveTransitionProps, useTransitionState, warn, } from '@vue/runtime-dom' @@ -21,13 +22,15 @@ import { } from '../block' import { isVaporComponent } from '../component' -/*#__NO_SIDE_EFFECTS__*/ -export const vaporTransitionImpl: VaporTransitionInterface = { - applyTransition: ( - props: TransitionProps, - slots: { default: () => Block }, - ): Block | undefined => { - const children = slots.default && slots.default() +const decorate = (t: typeof VaporTransition) => { + t.displayName = 'VaporTransition' + t.props = TransitionPropsValidators + return t +} + +export const VaporTransition: FunctionalComponent = + /*@__PURE__*/ decorate((props, { slots }) => { + const children = (slots.default && slots.default()) as any as Block if (!children) return const { mode } = props @@ -43,12 +46,11 @@ export const vaporTransitionImpl: VaporTransitionInterface = { applyTransitionEnterHooks(children, { state: useTransitionState(), - props, + props: resolveTransitionProps(props), } as VaporTransitionHooks) return children - }, -} + }) const getTransitionHooksContext = ( key: String, @@ -236,12 +238,3 @@ export function findTransitionBlock(block: Block): TransitionBlock | undefined { return child } - -let registered = false -/*#__NO_SIDE_EFFECTS__*/ -export function useVaporTransition(): void { - if (!registered) { - registerVaporTransition(vaporTransitionImpl) - registered = true - } -} diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts index ac34bef4d..d663e1796 100644 --- a/packages/runtime-vapor/src/index.ts +++ b/packages/runtime-vapor/src/index.ts @@ -42,4 +42,4 @@ export { applyDynamicModel, } from './directives/vModel' export { withVaporDirectives } from './directives/custom' -export { useVaporTransition } from './components/Transition' +export { VaporTransition } from './components/Transition'