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