feat: use Array for Fragment, instead of native DocumentFragment

README.md

@@ -36,7 +36,7 @@ See the To-do list below or `// TODO` comments in code (`compiler-vapor` and `ru
 - [ ] Fragment
   - [x] multiple root nodes
   - [x] all dynamic children
-  - [ ] return `Node[]` for all dynamic children, instead of using `fragment` API
+  - [x] return `Node[]` for all dynamic children, instead of using `fragment` API
 - [ ] Built-in Components
   - [ ] Transition
   - [ ] TransitionGroup

packages/runtime-vapor/__tests__/template.spec.ts

@@ -18,12 +18,13 @@ describe('api: template', () => {
 
   test('create fragment', () => {
     const frag = fragment()
-    const root = frag()
-    expect(root).toBeInstanceOf(DocumentFragment)
-    expect(root.childNodes.length).toBe(0)
 
-    const div2 = frag()
-    expect(div2).toBeInstanceOf(DocumentFragment)
-    expect(div2).not.toBe(root)
+    const root = frag()
+    expect(root).toBeInstanceOf(Array)
+    expect(root.length).toBe(0)
+
+    const root2 = frag()
+    expect(root2).toBeInstanceOf(Array)
+    expect(root2).not.toBe(root)
   })
 })

packages/runtime-vapor/src/render.ts

@@ -7,6 +7,7 @@ import {
 import { isArray } from '@vue/shared'
 
 export type Block = Node | Fragment | Block[]
+export type ParentBlock = ParentNode | Node[]
 export type Fragment = { nodes: Block; anchor: Node }
 export type BlockFn = (props?: any) => Block
 
@@ -57,8 +58,12 @@ export function insert(
   // }
 }
 
-export function append(parent: ParentNode, ...nodes: (Node | string)[]) {
-  parent.append(...nodes)
+export function append(parent: ParentBlock, ...nodes: Node[]) {
+  if (parent instanceof Node) {
+    parent.append(...nodes)
+  } else if (isArray(parent)) {
+    parent.push(...nodes)
+  }
 }
 
 export function remove(block: Block, parent: ParentNode) {

packages/runtime-vapor/src/template.ts

@@ -19,6 +19,6 @@ export const template = (str: string): (() => Node) => {
   }
 }
 
-export function fragment(): () => DocumentFragment {
-  return () => document.createDocumentFragment()
+export function fragment(): () => Node[] {
+  return () => []
 }