test(vapor): block tests

Author: yyx990803

packages/runtime-vapor/__tests__/dom/element.spec.ts renamed to packages/runtime-vapor/__tests__/block.spec.ts

@@ -1,26 +1,26 @@
-import { fragmentKey, normalizeBlock } from '../../src/block'
-import { insert, prepend, remove } from '../../src/dom/node'
+import { Fragment, insert, normalizeBlock, prepend, remove } from '../src/block'
 
 const node1 = document.createTextNode('node1')
 const node2 = document.createTextNode('node2')
 const node3 = document.createTextNode('node3')
 const anchor = document.createTextNode('anchor')
 
-describe('element', () => {
+describe('node ops', () => {
   test('normalizeBlock', () => {
     expect(normalizeBlock([node1, node2, node3])).toEqual([node1, node2, node3])
     expect(normalizeBlock([node1, [node2, [node3]]])).toEqual([
       node1,
       node2,
       node3,
     ])
-    expect(
-      normalizeBlock([
-        node1,
-        { nodes: node2, anchor, [fragmentKey]: true },
-        [node3],
-      ]),
-    ).toEqual([node1, node2, anchor, node3])
+    const frag = new Fragment(node2)
+    frag.anchor = anchor
+    expect(normalizeBlock([node1, frag, [node3]])).toEqual([
+      node1,
+      node2,
+      anchor,
+      node3,
+    ])
   })
 
   test('insert', () => {
@@ -39,15 +39,16 @@ describe('element', () => {
   test('prepend', () => {
     const container = document.createElement('div')
     prepend(container, [node1], node2)
-    prepend(container, { nodes: node3, [fragmentKey]: true })
+    prepend(container, new Fragment(node3))
     expect(Array.from(container.childNodes)).toEqual([node3, node1, node2])
   })
 
   test('remove', () => {
     const container = document.createElement('div')
     container.append(node1, node2, node3)
+    const frag = new Fragment(node3)
     remove([node1], container)
-    remove({ nodes: node3, [fragmentKey]: true }, container)
+    remove(frag, container)
     expect(Array.from(container.childNodes)).toEqual([node2])
 
     expect(() => remove(anchor, container)).toThrowError(

packages/runtime-vapor/__tests__/dom/templateRef.spec.ts

@@ -1,4 +1,4 @@
-import type { NodeRef } from 'packages/runtime-vapor/src/dom/templateRef'
+import type { NodeRef } from '../../src/dom/templateRef'
 import {
   createFor,
   createIf,

packages/runtime-vapor/__tests__/helpers/resolveAssets.spec.ts

@@ -1,6 +1,11 @@
 import { isArray } from '@vue/shared'
-import { type VaporComponentInstance, isVaporComponent } from './component'
-import { createComment, insert, remove } from './dom/node'
+import {
+  type VaporComponentInstance,
+  isVaporComponent,
+  mountComponent,
+  unmountComponent,
+} from './component'
+import { createComment } from './dom/node'
 import { EffectScope } from '@vue/reactivity'
 
 export type Block = Node | Fragment | VaporComponentInstance | Block[]
@@ -84,28 +89,50 @@ export function normalizeBlock(block: Block): Node[] {
   return nodes
 }
 
-export function findFirstRootElement(
-  instance: VaporComponentInstance,
-): Element | undefined {
-  const element = getFirstNode(instance.block)
-  return element instanceof Element ? element : undefined
+// TODO optimize
+export function isValidBlock(block: Block): boolean {
+  return (
+    normalizeBlock(block).filter(node => !(node instanceof Comment)).length > 0
+  )
 }
 
-export function getFirstNode(block: Block | null): Node | undefined {
-  if (!block || isVaporComponent(block)) return
-  if (block instanceof Node) return block
-  if (isArray(block)) {
-    if (block.length === 1) {
-      return getFirstNode(block[0])
+export function insert(
+  block: Block,
+  parent: ParentNode,
+  anchor: Node | null | 0 = null,
+): void {
+  if (block instanceof Node) {
+    parent.insertBefore(block, anchor === 0 ? parent.firstChild : anchor)
+  } else if (isVaporComponent(block)) {
+    mountComponent(block, parent, anchor)
+  } else if (isArray(block)) {
+    for (let i = 0; i < block.length; i++) {
+      insert(block[i], parent, anchor)
     }
   } else {
-    return getFirstNode(block.nodes)
+    // fragment
+    insert(block.nodes, parent, anchor)
+    if (block.anchor) insert(block.anchor, parent, anchor)
   }
 }
 
-// TODO optimize
-export function isValidBlock(block: Block): boolean {
-  return (
-    normalizeBlock(block).filter(node => !(node instanceof Comment)).length > 0
-  )
+export function prepend(parent: ParentNode, ...blocks: Block[]): void {
+  let i = blocks.length
+  while (i--) insert(blocks[i], parent, 0)
+}
+
+export function remove(block: Block, parent: ParentNode): void {
+  if (block instanceof Node) {
+    parent.removeChild(block)
+  } else if (isVaporComponent(block)) {
+    unmountComponent(block, parent)
+  } else if (isArray(block)) {
+    for (let i = 0; i < block.length; i++) {
+      remove(block[i], parent)
+    }
+  } else {
+    // fragment
+    remove(block.nodes, parent)
+    if (block.anchor) remove(block.anchor, parent)
+  }
 }

packages/runtime-vapor/src/block.ts

@@ -19,7 +19,7 @@ import {
   unregisterHMR,
   warn,
 } from '@vue/runtime-dom'
-import { type Block, isBlock } from './block'
+import { type Block, insert, isBlock, remove } from './block'
 import { pauseTracking, proxyRefs, resetTracking } from '@vue/reactivity'
 import { EMPTY_OBJ, invokeArrayFns, isFunction, isString } from '@vue/shared'
 import {
@@ -41,7 +41,6 @@ import {
   dynamicSlotsProxyHandlers,
   getSlot,
 } from './componentSlots'
-import { insert, remove } from './dom/node'
 import { hmrReload, hmrRerender } from './hmr'
 
 export { currentInstance } from '@vue/runtime-dom'

packages/runtime-vapor/src/component.ts

@@ -1,53 +1,6 @@
 import { isArray } from '@vue/shared'
 import { renderEffect } from '../renderEffect'
 import { setText } from './prop'
-import type { Block } from '../block'
-import {
-  isVaporComponent,
-  mountComponent,
-  unmountComponent,
-} from '../component'
-
-export function insert(
-  block: Block,
-  parent: ParentNode,
-  anchor: Node | null | 0 = null,
-): void {
-  if (block instanceof Node) {
-    parent.insertBefore(block, anchor === 0 ? parent.firstChild : anchor)
-  } else if (isVaporComponent(block)) {
-    mountComponent(block, parent, anchor)
-  } else if (isArray(block)) {
-    for (let i = 0; i < block.length; i++) {
-      insert(block[i], parent, anchor)
-    }
-  } else {
-    // fragment
-    insert(block.nodes, parent, anchor)
-    if (block.anchor) insert(block.anchor, parent, anchor)
-  }
-}
-
-export function prepend(parent: ParentNode, ...blocks: Block[]): void {
-  for (const b of blocks) insert(b, parent, 0)
-}
-
-// TODO invoke unmount recursive
-export function remove(block: Block, parent: ParentNode): void {
-  if (block instanceof Node) {
-    parent.removeChild(block)
-  } else if (isVaporComponent(block)) {
-    unmountComponent(block, parent)
-  } else if (isArray(block)) {
-    for (let i = 0; i < block.length; i++) {
-      remove(block[i], parent)
-    }
-  } else {
-    // fragment
-    remove(block.nodes, parent)
-    if (block.anchor) remove(block.anchor, parent)
-  }
-}
 
 export function createTextNode(values?: any[] | (() => any[])): Text {
   // eslint-disable-next-line no-restricted-globals

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

@@ -4,7 +4,7 @@ import {
   pushWarningContext,
   simpleSetCurrentInstance,
 } from '@vue/runtime-core'
-import { normalizeBlock } from './block'
+import { insert, normalizeBlock, remove } from './block'
 import {
   type VaporComponent,
   type VaporComponentInstance,
@@ -13,7 +13,6 @@ import {
   mountComponent,
   unmountComponent,
 } from './component'
-import { insert, remove } from './dom/node'
 
 export function hmrRerender(instance: VaporComponentInstance): void {
   const normalized = normalizeBlock(instance.block)

packages/runtime-vapor/src/hmr.ts

@@ -3,11 +3,12 @@ export { createVaporApp } from './apiCreateApp'
 export { defineVaporComponent } from './apiDefineComponent'
 
 // compiler-use only
+export { insert, prepend, remove } from './block'
 export { createComponent, createComponentWithFallback } from './component'
 export { renderEffect } from './renderEffect'
 export { createSlot } from './componentSlots'
 export { template, children, next } from './dom/template'
-export { insert, prepend, remove, createTextNode } from './dom/node'
+export { createTextNode } from './dom/node'
 export { setStyle } from './dom/style'
 export {
   setText,