wip: refactor

diff --git a/packages/compiler-vapor/src/generate.ts b/packages/compiler-vapor/src/generate.ts
index 64d346d1d59733a9473c800c6369d974ea3fe7a7..e6d6a816ce7b356510ed79158c3353a8c841cd6d 100644 (file)
--- 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 c0ac494641db34369d16575395b78bb42dea56be..d6ade4ebd91f6272ca934e28444512363fc8403e 100644 (file)
--- 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 387bf1136386c999c234892b3499b85a39b67fb7..cc0c9dcf307c6e33cd64ef67d1020fdb2a3dd7db 100644 (file)
--- 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<string>
   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 788b1889ab9d259f84f530a624b50c87c97ea4e0..76563899d2b770b19aae215805cded9c13ba85b5 100644 (file)
--- 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 14cdf66c2ee78de960b8187d75d489b6bc5969a5..35fd596ee83b5952589c2e9cd6fe03502e0a27c1 100644 (file)
--- 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 91513434957ad7a53ed05b67d996eebfb2dfdf17..ad527a899a2ecb0d44cdb69405d07308f82415d7 100644 (file)
--- 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<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
-}

diff --git a/packages/compiler-vapor/src/transforms/vSlot.ts b/packages/compiler-vapor/src/transforms/vSlot.ts
index d14f91b58c47e83766cf443373510eeccf732d24..66b24b0a9f039f4f33cbd948bc4c8111e2d2fe55 100644 (file)
--- 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 728281914fd786f67aee7e73d6e4edd38c0ef2b7..d390c69a21a5d433f4fd72ad32f2561799112b74 100644 (file)
--- 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<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'
+  }
+}

diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts
index 7e28dc08301dcd036c59ac304ef51cdb3e1b7a19..6c6344bfcacbc8dc84961131dbca8d49f813634f 100644 (file)
--- 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<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

diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index 0cfd08e87a221f346241d75ff742b4fc2133b18f..450ec74d15f80fa020e4229300874af3a88e6066 100644 (file)
--- 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 f6491aee3566883149f2ceb979637bbd9f852e0e..92952ad812aa142f024a45a17cd4a942ed2ceebc 100644 (file)
--- 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<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
-  }
-}

diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts
index ac34bef4d55ddbb8cebc438629aa5d5cecadf0e3..d663e179653ca46840700e37e0537bae61cf30c4 100644 (file)
--- 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'