wip: improve types

diff --git a/packages/runtime-vapor/src/block.ts b/packages/runtime-vapor/src/block.ts
index 6dbc05d2195df0cb076b0538b831168545af8fe5..73b3af38f43e08890feb4ac780cebd414059b795 100644 (file)
--- 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 8a705fda0290de4721285cfbb490585fd86e40d6..44f87023edc75ae126df41901b841adb2702e477 100644 (file)
--- 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<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
   } 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 82855fef847b2165873030f51cdce7824fbe513b..410f0da235f7e39d2ec17537657d68de54bc38f0 100644 (file)
--- 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)) {