refactor(runtime-vapor): re-organize block

Author: sxzz

packages/runtime-vapor/src/apiCreateComponent.ts

@@ -15,9 +15,9 @@ import { type RawSlots, isDynamicSlotFn } from './componentSlots'
 import { withAttrs } from './componentAttrs'
 import { isString } from '@vue/shared'
 import { renderEffect } from './renderEffect'
-import { normalizeBlock } from './dom/element'
 import { setClass, setDynamicProp } from './dom/prop'
 import { setStyle } from './dom/style'
+import { normalizeBlock } from './block'
 
 export function createComponent(
   comp: Component | string,

packages/runtime-vapor/src/apiCreateFor.ts

@@ -11,7 +11,7 @@ import {
   insert,
   remove as removeBlock,
 } from './dom/element'
-import { type Block, type Fragment, fragmentKey } from './apiRender'
+import { type Block, type Fragment, fragmentKey } from './block'
 import { warn } from './warning'
 import { currentInstance } from './component'
 import { componentKey } from './component'

packages/runtime-vapor/src/apiCreateIf.ts

@@ -1,5 +1,5 @@
 import { renderEffect } from './renderEffect'
-import { type Block, type Fragment, fragmentKey } from './apiRender'
+import { type Block, type Fragment, fragmentKey } from './block'
 import { type EffectScope, effectScope, shallowReactive } from '@vue/reactivity'
 import { createComment, createTextNode, insert, remove } from './dom/element'
 

packages/runtime-vapor/src/apiRender.ts

@@ -20,15 +20,7 @@ import { VaporErrorCodes, callWithErrorHandling } from './errorHandling'
 import { endMeasure, startMeasure } from './profiling'
 import { devtoolsComponentAdded } from './devtools'
 import { fallThroughAttrs } from './componentAttrs'
-
-export const fragmentKey: unique symbol = Symbol(__DEV__ ? `fragmentKey` : ``)
-
-export type Block = Node | Fragment | ComponentInternalInstance | Block[]
-export type Fragment = {
-  nodes: Block
-  anchor?: Node
-  [fragmentKey]: true
-}
+import { type Block, findFirstRootElement, fragmentKey } from './block'
 
 export function setupComponent(instance: ComponentInternalInstance): void {
   if (__DEV__) {
@@ -176,20 +168,3 @@ export function unmountComponent(instance: ComponentInternalInstance): void {
   )
   flushPostFlushCbs()
 }
-
-function findFirstRootElement(instance: ComponentInternalInstance) {
-  const element = getFirstNode(instance.block)
-  return element instanceof Element ? element : undefined
-}
-
-function getFirstNode(block: Block | null): Node | undefined {
-  if (!block || componentKey in block) return
-  if (block instanceof Node) return block
-  if (isArray(block)) {
-    if (block.length === 1) {
-      return getFirstNode(block[0])
-    }
-  } else {
-    return getFirstNode(block.nodes)
-  }
-}

packages/runtime-vapor/src/block.ts

@@ -0,0 +1,52 @@
+import { isArray } from '@vue/shared'
+import { type ComponentInternalInstance, componentKey } from './component'
+
+export const fragmentKey: unique symbol = Symbol(__DEV__ ? `fragmentKey` : ``)
+
+export type Block = Node | Fragment | ComponentInternalInstance | Block[]
+export type Fragment = {
+  nodes: Block
+  anchor?: Node
+  [fragmentKey]: true
+}
+
+/*! #__NO_SIDE_EFFECTS__ */
+export function normalizeBlock(block: Block): Node[] {
+  const nodes: Node[] = []
+  if (block instanceof Node) {
+    nodes.push(block)
+  } else if (isArray(block)) {
+    block.forEach(child => nodes.push(...normalizeBlock(child)))
+  } else if (componentKey in block) {
+    nodes.push(...normalizeBlock(block.block!))
+  } else if (block) {
+    nodes.push(...normalizeBlock(block.nodes))
+    block.anchor && nodes.push(block.anchor)
+  }
+  return nodes
+}
+
+export function findFirstRootElement(
+  instance: ComponentInternalInstance,
+): Element | undefined {
+  const element = getFirstNode(instance.block)
+  return element instanceof Element ? element : undefined
+}
+
+export function getFirstNode(block: Block | null): Node | undefined {
+  if (!block || componentKey in block) return
+  if (block instanceof Node) return block
+  if (isArray(block)) {
+    if (block.length === 1) {
+      return getFirstNode(block[0])
+    }
+  } else {
+    return getFirstNode(block.nodes)
+  }
+}
+
+export function isValidBlock(block: Block): boolean {
+  return (
+    normalizeBlock(block).filter(node => !(node instanceof Comment)).length > 0
+  )
+}

packages/runtime-vapor/src/component.ts

@@ -6,7 +6,7 @@ import {
   isBuiltInTag,
   isFunction,
 } from '@vue/shared'
-import type { Block } from './apiRender'
+import type { Block } from './block'
 import {
   type ComponentPropsOptions,
   type NormalizedPropsOptions,

packages/runtime-vapor/src/componentSlots.ts

@@ -11,15 +11,9 @@ import {
   currentInstance,
   setCurrentInstance,
 } from './component'
-import { type Block, type Fragment, fragmentKey } from './apiRender'
+import { type Block, type Fragment, fragmentKey, isValidBlock } from './block'
 import { firstEffect, renderEffect } from './renderEffect'
-import {
-  createComment,
-  createTextNode,
-  insert,
-  normalizeBlock,
-  remove,
-} from './dom/element'
+import { createComment, createTextNode, insert, remove } from './dom/element'
 import type { NormalizedRawProps } from './componentProps'
 import type { Data } from '@vue/runtime-shared'
 import { mergeProps } from './dom/prop'
@@ -271,9 +265,3 @@ function normalizeSlotProps(rawPropsList: NormalizedRawProps) {
     }
   }
 }
-
-function isValidBlock(block: Block) {
-  return (
-    normalizeBlock(block).filter(node => !(node instanceof Comment)).length > 0
-  )
-}

packages/runtime-vapor/src/directives.ts

@@ -5,7 +5,7 @@ import {
   isVaporComponent,
 } from './component'
 import { warn } from './warning'
-import { normalizeBlock } from './dom/element'
+import { normalizeBlock } from './block'
 import { getCurrentScope } from '@vue/reactivity'
 import { VaporErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
 

packages/runtime-vapor/src/dom/element.ts

@@ -1,24 +1,7 @@
 import { isArray } from '@vue/shared'
-import type { Block } from '../apiRender'
-import { componentKey } from '../component'
 import { renderEffect } from '../renderEffect'
 import { setText } from './prop'
-
-/*! #__NO_SIDE_EFFECTS__ */
-export function normalizeBlock(block: Block): Node[] {
-  const nodes: Node[] = []
-  if (block instanceof Node) {
-    nodes.push(block)
-  } else if (isArray(block)) {
-    block.forEach(child => nodes.push(...normalizeBlock(child)))
-  } else if (componentKey in block) {
-    nodes.push(...normalizeBlock(block.block!))
-  } else if (block) {
-    nodes.push(...normalizeBlock(block.nodes))
-    block.anchor && nodes.push(block.anchor)
-  }
-  return nodes
-}
+import { type Block, normalizeBlock } from '../block'
 
 export function insert(
   block: Block,