handle v-for to singleRoot

Author: runyasak

packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts

@@ -6,6 +6,7 @@ import {
   transformElement,
   transformText,
   transformVBind,
+  transformVFor,
   transformVOn,
 } from '../../src'
 import {
@@ -15,7 +16,12 @@ import {
 } from '@vue/compiler-core'
 
 const compileWithElementTransform = makeCompile({
-  nodeTransforms: [transformElement, transformChildren, transformText],
+  nodeTransforms: [
+    transformVFor,
+    transformElement,
+    transformChildren,
+    transformText,
+  ],
   directiveTransforms: {
     bind: transformVBind,
     on: transformVOn,
@@ -185,6 +191,16 @@ describe('compiler: element transform', () => {
       expect(code).contains('_createComponent(_ctx.Comp, null, null, true)')
     })
 
+    test('generate root component with v-for', () => {
+      const { code } = compileWithElementTransform(
+        `<Comp v-for="i in 1000"/>`,
+        {
+          bindingMetadata: { Comp: BindingTypes.SETUP_CONST },
+        },
+      )
+      expect(code).contains('_createComponent(_ctx.Comp)')
+    })
+
     test('generate multi root component', () => {
       const { code } = compileWithElementTransform(`<Comp/>123`, {
         bindingMetadata: { Comp: BindingTypes.SETUP_CONST },

packages/compiler-vapor/src/transforms/transformElement.ts

@@ -75,6 +75,7 @@ export const transformElement: NodeTransform = (node, context) => {
     }
     const singleRoot =
       context.root === parent &&
+      !parent.ir.source.includes('v-for') &&
       parent.node.children.filter(child => child.type !== NodeTypes.COMMENT)
         .length === 1