fix(compiler): treat template v-for with single component child as component

Copied from vuejs/core#13914

Author: zhiyuanzmj

packages/compiler/src/transforms/vFor.ts

@@ -45,7 +45,10 @@ export function processFor(
 
   const keyProp = findProp(node, 'key')
   const keyProperty = keyProp && propToExpression(keyProp, context)
-  const isComponent = isJSXComponent(node)
+  const isComponent =
+    isJSXComponent(node) ||
+    // template v-for with a single component child
+    isTemplateWithSingleComponent(node)
   const id = context.reference()
   context.dynamic.flags |= DynamicFlag.NON_TEMPLATE | DynamicFlag.INSERT
   const [render, exitBlock] = createBranch(node, context, true)
@@ -117,3 +120,10 @@ export function getForParseResult(
     source,
   }
 }
+
+function isTemplateWithSingleComponent(node: JSXElement): boolean {
+  const nonCommentChildren = node.children.filter((c) => !isEmptyText(c))
+  return (
+    nonCommentChildren.length === 1 && isJSXComponent(nonCommentChildren[0])
+  )
+}

packages/compiler/test/transforms/__snapshots__/vFor.spec.ts.snap

@@ -201,3 +201,27 @@ exports[`compiler: v-for > v-for aliases w/ complex expressions 1`] = `
   return n0
 "
 `;
+
+exports[`compiler: v-for > v-for on component 1`] = `
+"
+  const n0 = _createFor(() => (list), (_for_item0) => {
+    const n3 = _createComponent(Comp)
+    const n2 = _child(n3)
+    _setNodes(n2, () => (_for_item0.value))
+    return [n2, n3]
+  }, undefined, 2)
+  return n0
+"
+`;
+
+exports[`compiler: v-for > v-for on template with single component child 1`] = `
+"
+  const n0 = _createFor(() => (list), (_for_item0) => {
+    const n3 = _createComponent(Comp)
+    const n2 = _child(n3)
+    _setNodes(n2, () => (_for_item0.value))
+    return [n2, n3]
+  }, undefined, 2)
+  return n0
+"
+`;

packages/compiler/test/transforms/vFor.spec.ts

@@ -379,4 +379,24 @@ describe('compiler: v-for', () => {
     })
     expect(code).toMatchSnapshot()
   })
+
+  test('v-for on component', () => {
+    const { code, ir } = compileWithVFor(
+      `<Comp v-for={item in list}>{item}</Comp>`,
+    )
+    expect(code).matchSnapshot()
+    expect(
+      (ir.block.dynamic.children[0].operation as ForIRNode).component,
+    ).toBe(true)
+  })
+
+  test('v-for on template with single component child', () => {
+    const { code, ir } = compileWithVFor(
+      `<template v-for={item in list}><Comp>{item}</Comp></template>`,
+    )
+    expect(code).matchSnapshot()
+    expect(
+      (ir.block.dynamic.children[0].operation as ForIRNode).component,
+    ).toBe(true)
+  })
 })