From 3fcba1d5aa92cf309b02015f8e06f187fe87fd54 Mon Sep 17 00:00:00 2001 From: daiwei Date: Wed, 5 Mar 2025 08:59:04 +0800 Subject: [PATCH] wip: improve types --- packages/runtime-vapor/src/block.ts | 38 +++++++++---------- .../src/components/Transition.ts | 25 +++++++----- .../runtime-vapor/src/directives/vShow.ts | 4 +- 3 files changed, 35 insertions(+), 32 deletions(-) diff --git a/packages/runtime-vapor/src/block.ts b/packages/runtime-vapor/src/block.ts index 6dbc05d219..73b3af38f4 100644 --- a/packages/runtime-vapor/src/block.ts +++ b/packages/runtime-vapor/src/block.ts @@ -19,33 +19,32 @@ import { applyTransitionLeaveHooks, } from './components/Transition' -export type Block = ( - | Node - | VaporFragment - | DynamicFragment - | VaporComponentInstance - | Block[] -) & - TransitionBlock +export interface TransitionOptions { + key?: any + $transition?: VaporTransitionHooks +} export interface VaporTransitionHooks extends TransitionHooks { state: TransitionState props: TransitionProps } -export type TransitionBlock = { - key?: any - $transition?: VaporTransitionHooks -} +export type TransitionBlock = + | (Node & TransitionOptions) + | (VaporFragment & TransitionOptions) + | (DynamicFragment & TransitionOptions) + +export type Block = TransitionBlock | VaporComponentInstance | Block[] export type BlockFn = (...args: any[]) => Block -export class VaporFragment { +export class VaporFragment implements TransitionOptions { + key?: any + $transition?: VaporTransitionHooks | undefined nodes: Block anchor?: Node insert?: (parent: ParentNode, anchor: Node | null) => void remove?: (parent?: ParentNode) => void - $transition?: VaporTransitionHooks | undefined constructor(nodes: Block) { this.nodes = nodes @@ -72,7 +71,6 @@ export class DynamicFragment extends VaporFragment { pauseTracking() const parent = this.anchor.parentNode - const transition = this.$transition const renderBranch = () => { if (render) { @@ -153,11 +151,10 @@ export function insert( anchor = anchor === 0 ? parent.firstChild : anchor if (block instanceof Node) { // don't apply transition on text or comment nodes - if (block.$transition && block instanceof Element) { + if ((block as TransitionBlock).$transition && block instanceof Element) { performTransitionEnter( block, - // @ts-expect-error - block.$transition, + (block as TransitionBlock).$transition as TransitionHooks, () => parent.insertBefore(block, anchor), parentSuspense, ) @@ -188,11 +185,10 @@ export function prepend(parent: ParentNode, ...blocks: Block[]): void { export function remove(block: Block, parent?: ParentNode): void { if (block instanceof Node) { - if (block.$transition && block instanceof Element) { + if ((block as TransitionBlock).$transition && block instanceof Element) { performTransitionLeave( block, - // @ts-expect-error - block.$transition, + (block as TransitionBlock).$transition as TransitionHooks, () => parent && parent.removeChild(block), ) } else { diff --git a/packages/runtime-vapor/src/components/Transition.ts b/packages/runtime-vapor/src/components/Transition.ts index 8a705fda02..44f87023ed 100644 --- a/packages/runtime-vapor/src/components/Transition.ts +++ b/packages/runtime-vapor/src/components/Transition.ts @@ -13,7 +13,12 @@ import { useTransitionState, warn, } from '@vue/runtime-dom' -import { type Block, type VaporTransitionHooks, isFragment } from '../block' +import { + type Block, + type TransitionBlock, + type VaporTransitionHooks, + isFragment, +} from '../block' import { isVaporComponent } from '../component' export const vaporTransitionImpl: VaporTransitionInterface = { @@ -85,7 +90,7 @@ const getTransitionHooksContext = ( } function resolveTransitionHooks( - block: Block, + block: TransitionBlock, props: TransitionProps, state: TransitionState, instance: GenericComponentInstance, @@ -109,7 +114,10 @@ function resolveTransitionHooks( return hooks } -function setTransitionHooks(block: Block, hooks: VaporTransitionHooks) { +function setTransitionHooks( + block: TransitionBlock, + hooks: VaporTransitionHooks, +) { if (!isFragment(block)) { block.$transition = hooks } @@ -188,20 +196,20 @@ export function applyTransitionLeaveHooks( } } -const transitionChildCache = new WeakMap() -export function findElementChild(block: Block): Block | undefined { +const transitionChildCache = new WeakMap() +export function findElementChild(block: Block): TransitionBlock | undefined { if (transitionChildCache.has(block)) { return transitionChildCache.get(block) } - let child: Block | undefined + let child: TransitionBlock | undefined if (block instanceof Node) { // transition can only be applied on Element child if (block instanceof Element) child = block } else if (isVaporComponent(block)) { child = findElementChild(block.block) } else if (Array.isArray(block)) { - child = block[0] + child = block[0] as TransitionBlock let hasFound = false for (const c of block) { const item = findElementChild(c) @@ -219,8 +227,7 @@ export function findElementChild(block: Block): Block | undefined { if (!__DEV__) break } } - } else { - // fragment + } else if (isFragment(block)) { child = findElementChild(block.nodes) } diff --git a/packages/runtime-vapor/src/directives/vShow.ts b/packages/runtime-vapor/src/directives/vShow.ts index 82855fef84..410f0da235 100644 --- a/packages/runtime-vapor/src/directives/vShow.ts +++ b/packages/runtime-vapor/src/directives/vShow.ts @@ -6,7 +6,7 @@ import { } from '@vue/runtime-dom' import { renderEffect } from '../renderEffect' import { isVaporComponent } from '../component' -import { type Block, DynamicFragment } from '../block' +import { type Block, DynamicFragment, type TransitionBlock } from '../block' import { isArray } from '@vue/shared' export function applyVShow(target: Block, source: () => any): void { @@ -39,7 +39,7 @@ function setDisplay(target: Block, value: unknown): void { if (target instanceof DynamicFragment) { return setDisplay(target.nodes, value) } - const { $transition } = target + const { $transition } = target as TransitionBlock if (target instanceof Element) { const el = target as VShowElement if (!(vShowOriginalDisplay in el)) { -- 2.47.2