feat: use Array for Fragment, instead of native DocumentFragment

diff --git a/README.md b/README.md
index ca5a5a0f58c867afd9d53bb8ce963d13e34558c2..8d3e7c551358745dec06e1f459931880736bb657 100644 (file)
--- 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 32ea085f073e4670e67f5e63f8a9a560d9f8fceb..df711722189163583a48894f204c44ed46d918d6 100644 (file)
--- 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 9132c202212303115081f26c78bc7c84120dac9d..6c87b629bb98f1b33ccc9fe7a4b29a6225970f71 100644 (file)
--- 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 9f0ae6c49ebf97f6c61545ad2145ebb9b5668a5d..aa3858b24d7acfa6a8548dae03d266f985c71a6d 100644 (file)
--- 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