From: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
Date: Sun, 26 Nov 2023 21:28:50 +0000 (+0800)
Subject: feat: use Array for Fragment, instead of native DocumentFragment
X-Git-Tag: v3.6.0-alpha.1~16^2~806
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6ff8b1bf0d026aba2e1de1810a5d63f160b45658;p=thirdparty%2Fvuejs%2Fcore.git

feat: use Array for Fragment, instead of native DocumentFragment
---

diff --git a/README.md b/README.md
index ca5a5a0f58..8d3e7c5513 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 32ea085f07..df71172218 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)
+    expect(root).toBeInstanceOf(Array)
+    expect(root.length).toBe(0)
 
-    const div2 = frag()
-    expect(div2).toBeInstanceOf(DocumentFragment)
-    expect(div2).not.toBe(root)
+    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 9132c20221..6c87b629bb 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 9f0ae6c49e..aa3858b24d 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