} from './component'
import { createComment, createTextNode } from './dom/node'
import { EffectScope, pauseTracking, resetTracking } from '@vue/reactivity'
+ import { isHydrating } from './dom/hydration'
+import {
+ type TransitionHooks,
+ type TransitionProps,
+ type TransitionState,
+ performTransitionEnter,
+ performTransitionLeave,
+} from '@vue/runtime-dom'
+import {
+ applyTransitionEnterHooks,
+ applyTransitionLeaveHooks,
+} from './components/Transition'
+
+export interface TransitionOptions {
+ $key?: any
+ $transition?: VaporTransitionHooks
+}
+
+export interface VaporTransitionHooks extends TransitionHooks {
+ state: TransitionState
+ props: TransitionProps
+}
+
+export type TransitionBlock =
+ | (Node & TransitionOptions)
+ | (VaporFragment & TransitionOptions)
+ | (DynamicFragment & TransitionOptions)
-export type Block =
- | Node
- | VaporFragment
- | DynamicFragment
- | VaporComponentInstance
- | Block[]
+export type Block = TransitionBlock | VaporComponentInstance | Block[]
export type BlockFn = (...args: any[]) => Block
): void {
anchor = anchor === 0 ? parent.firstChild : anchor
if (block instanceof Node) {
- // don't apply transition on text or comment nodes
- if ((block as TransitionBlock).$transition && block instanceof Element) {
- performTransitionEnter(
- block,
- (block as TransitionBlock).$transition as TransitionHooks,
- () => parent.insertBefore(block, anchor),
- parentSuspense,
- )
- } else {
- parent.insertBefore(block, anchor)
+ if (!isHydrating) {
- parent.insertBefore(block, anchor)
++ // don't apply transition on text or comment nodes
++ if ((block as TransitionBlock).$transition && block instanceof Element) {
++ performTransitionEnter(
++ block,
++ (block as TransitionBlock).$transition as TransitionHooks,
++ () => parent.insertBefore(block, anchor),
++ parentSuspense,
++ )
++ } else {
++ parent.insertBefore(block, anchor)
++ }
}
} else if (isVaporComponent(block)) {
- mountComponent(block, parent, anchor)
+ if (block.isMounted) {
+ insert(block.block!, parent, anchor)
+ } else {
+ mountComponent(block, parent, anchor)
+ }
} else if (isArray(block)) {
- for (let i = 0; i < block.length; i++) {
- insert(block[i], parent, anchor)
+ for (const b of block) {
+ insert(b, parent, anchor)
}
} else {
// fragment
if (block.insert) {
- block.insert(parent, anchor)
+ // TODO handle hydration for vdom interop
+ block.insert(parent, anchor, (block as TransitionBlock).$transition)
} else {
- insert(block.nodes, parent, anchor)
+ insert(block.nodes, parent, anchor, parentSuspense)
}
if (block.anchor) insert(block.anchor, parent, anchor)
}