From 84dc5a686275528733977ea1570e0a892ba3e177 Mon Sep 17 00:00:00 2001 From: Evan You Date: Mon, 6 Jan 2020 11:57:19 -0500 Subject: [PATCH] fix(runtime-core/vnode): should not render boolean values in vnode children (close #574) --- packages/runtime-core/__tests__/vnode.spec.ts | 7 ++++++- packages/runtime-core/src/vnode.ts | 4 ++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/runtime-core/__tests__/vnode.spec.ts b/packages/runtime-core/__tests__/vnode.spec.ts index 934b0952865..656d27644b9 100644 --- a/packages/runtime-core/__tests__/vnode.spec.ts +++ b/packages/runtime-core/__tests__/vnode.spec.ts @@ -120,6 +120,12 @@ describe('vnode', () => { expect(normalizeVNode(null)).toMatchObject({ type: Comment }) expect(normalizeVNode(undefined)).toMatchObject({ type: Comment }) + // boolean -> Comment + // this is for usage like `someBoolean && h('div')` and behavior consistency + // with 2.x (#574) + expect(normalizeVNode(true)).toMatchObject({ type: Comment }) + expect(normalizeVNode(false)).toMatchObject({ type: Comment }) + // array -> Fragment expect(normalizeVNode(['foo'])).toMatchObject({ type: Fragment }) @@ -137,7 +143,6 @@ describe('vnode', () => { // primitive types expect(normalizeVNode('foo')).toMatchObject({ type: Text, children: `foo` }) expect(normalizeVNode(1)).toMatchObject({ type: Text, children: `1` }) - expect(normalizeVNode(true)).toMatchObject({ type: Text, children: `true` }) }) test('type shapeFlag inference', () => { diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts index cab6ce8a994..1f08d5cab5b 100644 --- a/packages/runtime-core/src/vnode.ts +++ b/packages/runtime-core/src/vnode.ts @@ -337,7 +337,7 @@ export function createCommentVNode( } export function normalizeVNode(child: VNodeChild): VNode { - if (child == null) { + if (child == null || typeof child === 'boolean') { // empty placeholder return createVNode(Comment) } else if (isArray(child)) { @@ -348,7 +348,7 @@ export function normalizeVNode(child: VNodeChild): VNode { // always produce all-vnode children arrays return child.el === null ? child : cloneVNode(child) } else { - // primitive types + // strings and numbers return createVNode(Text, null, String(child)) } }