From 6ff8b1bf0d026aba2e1de1810a5d63f160b45658 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Mon, 27 Nov 2023 05:28:50 +0800
Subject: [PATCH] feat: use Array for Fragment, instead of native
 DocumentFragment

---
 README.md                                         |  2 +-
 packages/runtime-vapor/__tests__/template.spec.ts | 13 +++++++------
 packages/runtime-vapor/src/render.ts              |  9 +++++++--
 packages/runtime-vapor/src/template.ts            |  4 ++--
 playground/src/{App-fragment.vue => fragment.vue} |  0
 5 files changed, 17 insertions(+), 11 deletions(-)
 rename playground/src/{App-fragment.vue => fragment.vue} (100%)

diff --git a/README.md b/README.md
index ca5a5a0f5..8d3e7c551 100644
--- a/README.md
+++ b/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
diff --git a/packages/runtime-vapor/__tests__/template.spec.ts b/packages/runtime-vapor/__tests__/template.spec.ts
index 32ea085f0..df7117221 100644
--- a/packages/runtime-vapor/__tests__/template.spec.ts
+++ b/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)
   })
 })
diff --git a/packages/runtime-vapor/src/render.ts b/packages/runtime-vapor/src/render.ts
index 9132c2022..6c87b629b 100644
--- a/packages/runtime-vapor/src/render.ts
+++ b/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) {
diff --git a/packages/runtime-vapor/src/template.ts b/packages/runtime-vapor/src/template.ts
index 9f0ae6c49..aa3858b24 100644
--- a/packages/runtime-vapor/src/template.ts
+++ b/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 () => []
 }
diff --git a/playground/src/App-fragment.vue b/playground/src/fragment.vue
similarity index 100%
rename from playground/src/App-fragment.vue
rename to playground/src/fragment.vue