wip: improve types

Author: edison1105

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 TransitionBlock {
+  key?: any
+  $transition?: VaporTransitionHooks
+}
 
 export interface VaporTransitionHooks extends TransitionHooks {
   state: TransitionState
   props: TransitionProps
 }
 
-export type TransitionBlock = {
-  key?: any
-  $transition?: VaporTransitionHooks
-}
+export type Block =
+  | (Node & TransitionBlock)
+  | (VaporFragment & TransitionBlock)
+  | (DynamicFragment & TransitionBlock)
+  | VaporComponentInstance
+  | Block[]
 
 export type BlockFn = (...args: any[]) => Block
 
-export class VaporFragment {
+export class VaporFragment implements TransitionBlock {
+  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
@@ -153,11 +152,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 +186,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 {

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<Block, Block>()
-export function findElementChild(block: Block): Block | undefined {
+const transitionChildCache = new WeakMap<Block, TransitionBlock>()
+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
+    if (block instanceof Element) child = block as TransitionBlock
   } 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)

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)) {