use simple normalization for components, fix functional component multi-root node (fix #4472)

Author: yyx990803

src/compiler/codegen/index.js

@@ -3,13 +3,14 @@
 import { genHandlers } from './events'
 import { baseWarn, pluckModuleFunction } from '../helpers'
 import baseDirectives from '../directives/index'
-import { camelize } from 'shared/util'
+import { camelize, no } from 'shared/util'
 
 // configurable state
 let warn
 let transforms
 let dataGenFns
 let platformDirectives
+let isPlatformReservedTag
 let staticRenderFns
 let onceCount
 let currentOptions
@@ -31,6 +32,7 @@ export function generate (
   transforms = pluckModuleFunction(options.modules, 'transformCode')
   dataGenFns = pluckModuleFunction(options.modules, 'genData')
   platformDirectives = options.directives || {}
+  isPlatformReservedTag = options.isReservedTag || no
   const code = ast ? genElement(ast) : '_c("div")'
   staticRenderFns = prevStaticRenderFns
   onceCount = prevOnceCount
@@ -287,29 +289,42 @@ function genChildren (el: ASTElement, checkSkip?: boolean): string | void {
         el.tag !== 'slot') {
       return genElement(el)
     }
+    const normalizationType = getNormalizationType(children)
     return `[${children.map(genNode).join(',')}]${
       checkSkip
-        ? canSkipNormalization(children) ? '' : ',true'
+        ? normalizationType ? `,${normalizationType}` : ''
         : ''
     }`
   }
 }
 
-function canSkipNormalization (children): boolean {
+// determine the normalzation needed for the children array.
+// 0: no normalization needed
+// 1: simple normalization needed (possible 1-level deep nested array)
+// 2: full nomralization needed
+function getNormalizationType (children): number {
   for (let i = 0; i < children.length; i++) {
     const el: any = children[i]
     if (needsNormalization(el) ||
         (el.if && el.ifConditions.some(c => needsNormalization(c.block)))) {
-      return false
+      return 2
+    }
+    if (maybeComponent(el) ||
+        (el.if && el.ifConditions.some(c => maybeComponent(c.block)))) {
+      return 1
     }
   }
-  return true
+  return 0
 }
 
 function needsNormalization (el) {
   return el.for || el.tag === 'template' || el.tag === 'slot'
 }
 
+function maybeComponent (el) {
+  return el.type === 1 && !isPlatformReservedTag(el.tag)
+}
+
 function genNode (node: ASTNode) {
   if (node.type === 1) {
     return genElement(node)

src/core/instance/render.js

@@ -33,7 +33,7 @@ export function initRender (vm: Component) {
   vm.$scopedSlots = {}
   // bind the createElement fn to this instance
   // so that we get proper render context inside it.
-  // args order: tag, data, children, needNormalization, alwaysNormalize
+  // args order: tag, data, children, normalizationType, alwaysNormalize
   // internal version is used by render functions compiled from templates
   vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
   // normalization is always applied for the public version, used in

src/core/vdom/create-element.js

@@ -3,34 +3,37 @@
 import VNode, { createEmptyVNode } from './vnode'
 import config from '../config'
 import { createComponent } from './create-component'
-import { normalizeChildren } from './helpers/index'
+import { normalizeChildren, simpleNormalizeChildren } from './helpers/index'
 import { warn, resolveAsset, isPrimitive } from '../util/index'
 
+const SIMPLE_NORMALIZE = 1
+const ALWAYS_NORMALIZE = 2
+
 // wrapper function for providing a more flexible interface
 // without getting yelled at by flow
 export function createElement (
   context: Component,
   tag: any,
   data: any,
   children: any,
-  needNormalization: any,
+  normalizationType: any,
   alwaysNormalize: boolean
 ): VNode {
   if (Array.isArray(data) || isPrimitive(data)) {
-    needNormalization = children
+    normalizationType = children
     children = data
     data = undefined
   }
-  if (alwaysNormalize) needNormalization = true
-  return _createElement(context, tag, data, children, needNormalization)
+  if (alwaysNormalize) normalizationType = ALWAYS_NORMALIZE
+  return _createElement(context, tag, data, children, normalizationType)
 }
 
 export function _createElement (
   context: Component,
   tag?: string | Class<Component> | Function | Object,
   data?: VNodeData,
   children?: any,
-  needNormalization?: boolean
+  normalizationType?: number
 ): VNode {
   if (data && data.__ob__) {
     process.env.NODE_ENV !== 'production' && warn(
@@ -51,8 +54,10 @@ export function _createElement (
     data.scopedSlots = { default: children[0] }
     children.length = 0
   }
-  if (needNormalization) {
+  if (normalizationType === ALWAYS_NORMALIZE) {
     children = normalizeChildren(children)
+  } else if (normalizationType === SIMPLE_NORMALIZE) {
+    children = simpleNormalizeChildren(children)
   }
   let vnode, ns
   if (typeof tag === 'string') {

src/core/vdom/helpers/normalize-children.js

@@ -3,6 +3,31 @@
 import { isPrimitive } from 'core/util/index'
 import VNode, { createTextVNode } from 'core/vdom/vnode'
 
+// The template compiler attempts to minimize the need for normalization by
+// statically analyzing the template at compile time.
+//
+// For plain HTML markup, normalization can be completely skipped because the
+// generated render function is guaranteed to return Array<VNode>. There are
+// two cases where extra normalization is needed:
+
+// 1. When the children contains components - because a functional component
+// may return an Array instead of a single root. In this case, just a simple
+// nomralization is needed - if any child is an Array, we flatten the whole
+// thing with Array.prototype.concat. It is guaranteed to be only 1-level deep
+// because functional components already normalize their own children.
+export function simpleNormalizeChildren (children: any) {
+  for (let i = 0; i < children.length; i++) {
+    if (Array.isArray(children[i])) {
+      return Array.prototype.concat.apply([], children)
+    }
+  }
+  return children
+}
+
+// 2. When the children contains constrcuts that always generated nested Arrays,
+// e.g. <template>, <slot>, v-for, or when the children is provided by user
+// with hand-written render functions / JSX. In such cases a full normalization
+// is needed to cater to all possible types of children values.
 export function normalizeChildren (children: any): ?Array<VNode> {
   return isPrimitive(children)
     ? [createTextVNode(children)]

test/unit/features/options/functional.spec.js

@@ -22,6 +22,21 @@ describe('Options functional', () => {
     }).then(done)
   })
 
+  it('should support returning more than one root node', () => {
+    const vm = new Vue({
+      template: `<div><test></test></div>`,
+      components: {
+        test: {
+          functional: true,
+          render (h) {
+            return [h('span', 'foo'), h('span', 'bar')]
+          }
+        }
+      }
+    }).$mount()
+    expect(vm.$el.innerHTML).toBe('<span>foo</span><span>bar</span>')
+  })
+
   it('should support slots', () => {
     const vm = new Vue({
       data: { test: 'foo' },

test/unit/modules/compiler/codegen.spec.js

@@ -70,7 +70,7 @@ describe('codegen', () => {
     // v-for with extra element
     assertCodegen(
       '<div><p></p><li v-for="item in items"></li></div>',
-      `with(this){return _c('div',[_c('p'),_l((items),function(item){return _c('li')})],true)}`
+      `with(this){return _c('div',[_c('p'),_l((items),function(item){return _c('li')})],2)}`
     )
   })
 
@@ -133,28 +133,28 @@ describe('codegen', () => {
   it('generate template tag', () => {
     assertCodegen(
       '<div><template><p>{{hello}}</p></template></div>',
-      `with(this){return _c('div',[[_c('p',[_v(_s(hello))])]],true)}`
+      `with(this){return _c('div',[[_c('p',[_v(_s(hello))])]],2)}`
     )
   })
 
   it('generate single slot', () => {
     assertCodegen(
       '<div><slot></slot></div>',
-      `with(this){return _c('div',[_t("default")],true)}`
+      `with(this){return _c('div',[_t("default")],2)}`
     )
   })
 
   it('generate named slot', () => {
     assertCodegen(
       '<div><slot name="one"></slot></div>',
-      `with(this){return _c('div',[_t("one")],true)}`
+      `with(this){return _c('div',[_t("one")],2)}`
     )
   })
 
   it('generate slot fallback content', () => {
     assertCodegen(
       '<div><slot><div>hi</div></slot></div>',
-      `with(this){return _c('div',[_t("default",[_c('div',[_v("hi")])])],true)}`
+      `with(this){return _c('div',[_t("default",[_c('div',[_v("hi")])])],2)}`
     )
   })
 
@@ -397,7 +397,7 @@ describe('codegen', () => {
   it('generate svg component with children', () => {
     assertCodegen(
       '<svg><my-comp><circle :r="10"></circle></my-comp></svg>',
-      `with(this){return _c('svg',[_c('my-comp',[_c('circle',{attrs:{"r":10}})])])}`
+      `with(this){return _c('svg',[_c('my-comp',[_c('circle',{attrs:{"r":10}})])],1)}`
     )
   })