refactor: relocate getRootElement to custom.ts and update custom directive tests to use template helper.

Author: edison1105

packages/runtime-vapor/__tests__/directives/customDirective.spec.ts

@@ -3,6 +3,7 @@ import {
   type VaporDirective,
   createComponent,
   defineVaporComponent,
+  template,
   withVaporDirectives,
 } from '../../src'
 import { nextTick, watchEffect } from '@vue/runtime-dom'
@@ -58,8 +59,7 @@ describe('custom directive', () => {
     // Child component with single root
     const Child = defineVaporComponent({
       render() {
-        const el = document.createElement('div')
-        return el
+        return template('<div></div>', true)()
       },
     })
 
@@ -92,7 +92,7 @@ describe('custom directive', () => {
     // Child component with multiple roots
     const Child = defineVaporComponent({
       render() {
-        return [document.createElement('div'), document.createElement('span')]
+        return [template('<div></div>')(), template('<span></span>')()]
       },
     })
 

packages/runtime-vapor/src/component.ts

@@ -100,7 +100,7 @@ import {
   isLastInsertion,
   resetInsertionState,
 } from './insertionState'
-import { DynamicFragment, isFragment } from './fragment'
+import { DynamicFragment } from './fragment'
 import type { VaporElement } from './apiDefineVaporCustomElement'
 
 export { currentInstance } from '@vue/runtime-dom'
@@ -831,48 +831,6 @@ export function getExposed(
   }
 }
 
-export function getRootElement(
-  block: Block,
-  recurse: boolean = true,
-): Element | undefined {
-  if (block instanceof Element) {
-    return block
-  }
-
-  if (recurse && isVaporComponent(block)) {
-    return getRootElement(block.block, recurse)
-  }
-
-  if (isFragment(block)) {
-    const { nodes } = block
-    if (nodes instanceof Element && (nodes as any).$root) {
-      return nodes
-    }
-    return getRootElement(nodes, recurse)
-  }
-
-  // The root node contains comments. It is necessary to filter out
-  // the comment nodes and return a single root node.
-  // align with vdom behavior
-  if (isArray(block)) {
-    let singleRoot: Element | undefined
-    let hasComment = false
-    for (const b of block) {
-      if (b instanceof Comment) {
-        hasComment = true
-        continue
-      }
-      const thisRoot = getRootElement(b, recurse)
-      // only return root if there is exactly one eligible root in the array
-      if (!thisRoot || singleRoot) {
-        return
-      }
-      singleRoot = thisRoot
-    }
-    return hasComment ? singleRoot : undefined
-  }
-}
-
 export function filterSingleRootElement(block: Block): Element | undefined {
   let singleRoot
   if (block instanceof Element) {

packages/runtime-vapor/src/directives/custom.ts

@@ -1,9 +1,8 @@
 import { type DirectiveModifiers, onScopeDispose, warn } from '@vue/runtime-dom'
-import {
-  type VaporComponentInstance,
-  getRootElement,
-  isVaporComponent,
-} from '../component'
+import { type VaporComponentInstance, isVaporComponent } from '../component'
+import type { Block } from '../block'
+import { isFragment } from '../fragment'
+import { isArray } from '@vue/shared'
 
 // !! vapor directive is different from vdom directives
 export type VaporDirective = (
@@ -47,3 +46,42 @@ export function withVaporDirectives(
     }
   }
 }
+
+export function getRootElement(block: Block): Element | undefined {
+  if (block instanceof Element && (block as any).$root) {
+    return block
+  }
+
+  if (isVaporComponent(block)) {
+    return getRootElement(block.block)
+  }
+
+  if (isFragment(block)) {
+    const { nodes } = block
+    if (nodes instanceof Element && (nodes as any).$root) {
+      return nodes
+    }
+    return getRootElement(nodes)
+  }
+
+  // The root node contains comments. It is necessary to filter out
+  // the comment nodes and return a single root node.
+  // align with vdom behavior
+  if (isArray(block)) {
+    let singleRoot: Element | undefined
+    let hasComment = false
+    for (const b of block) {
+      if (b instanceof Comment) {
+        hasComment = true
+        continue
+      }
+      const thisRoot = getRootElement(b)
+      // only return root if there is exactly one eligible root in the array
+      if (!thisRoot || singleRoot) {
+        return
+      }
+      singleRoot = thisRoot
+    }
+    return hasComment ? singleRoot : undefined
+  }
+}