wip: refactor

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)
 

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,

packages/compiler-vapor/src/ir/index.ts

@@ -68,7 +68,6 @@ export interface RootIRNode {
   directive: Set<string>
   block: BlockIRNode
   hasTemplateRef: boolean
-  hasTransition: boolean
 }
 
 export interface IfIRNode extends BaseIRNode {

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)

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'
-  }
-}

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<ElementNode>,
-): boolean {
-  const parentNode = context.parent && context.parent.node
-  return !!(parentNode && isTransitionNode(parentNode as ElementNode, context))
-}
-
-export function isTransitionNode(
-  node: ElementNode,
-  context: TransformContext<ElementNode>,
-): boolean {
-  const inTransition =
-    node.type === NodeTypes.ELEMENT &&
-    (node.tag === 'transition' || node.tag === 'Transition')
-
-  if (inTransition) {
-    context.ir.hasTransition = true
-  }
-
-  return inTransition
-}

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',

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<ElementNode>,
+): 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'
+  }
+}

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<Element> {
   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<TransitionProps> =
-  /*@__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

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'

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<TransitionProps> =
+  /*@__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
-  }
-}

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'