chore : work with filtered nodes instead

node children should not be overwritten to keep comments in the build output

Author: amirkian007

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

@@ -19,8 +19,7 @@ import {
   TemplateTextChildNode,
   DirectiveArguments,
   createVNodeCall,
-  ConstantTypes,
-  PlainElementNode
+  ConstantTypes
 } from '../ast'
 import {
   PatchFlags,
@@ -146,7 +145,8 @@ export const transformElement: NodeTransform = (node, context) => {
     }
 
     // children
-    if (node.children.length > 0) {
+      if (node.children.length > 0) {
+      let filterdChildren = [...node.children]
       if (vnodeTag === KEEP_ALIVE) {
         // Although a built-in component, we compile KeepAlive with raw children
         // instead of slot functions so that it can be used inside Transition
@@ -157,12 +157,14 @@ export const transformElement: NodeTransform = (node, context) => {
         shouldUseBlock = true
         // 2. Force keep-alive to always be updated, since it uses raw children.
         patchFlag |= PatchFlags.DYNAMIC_SLOTS
+        //filter out potential comment nodes
+        filterdChildren  = filterdChildren.filter(c => c.type !== NodeTypes.COMMENT)
         // warn if <KeepAlive> has multiple children
-        if (__DEV__ && hasMultipleChildren(node)) {
+        if (__DEV__ && filterdChildren.length > 1) {
           context.onError(
             createCompilerError(ErrorCodes.X_KEEP_ALIVE_INVALID_CHILDREN, {
-              start: node.children[0].loc.start,
-              end: node.children[node.children.length - 1].loc.end,
+              start: filterdChildren[0].loc.start,
+              end: filterdChildren[filterdChildren.length - 1].loc.end,
               source: ''
             })
           )
@@ -182,8 +184,8 @@ export const transformElement: NodeTransform = (node, context) => {
         if (hasDynamicSlots) {
           patchFlag |= PatchFlags.DYNAMIC_SLOTS
         }
-      } else if (node.children.length === 1 && vnodeTag !== TELEPORT) {
-        const child = node.children[0]
+      } else if (filterdChildren.length === 1 && vnodeTag !== TELEPORT) {
+        const child = filterdChildren[0]
         const type = child.type
         // check for dynamic text children
         const hasDynamicTextChild =
@@ -929,12 +931,3 @@ function stringifyDynamicPropNames(props: string[]): string {
 function isComponentTag(tag: string) {
   return tag === 'component' || tag === 'Component'
 }
-
-function hasMultipleChildren(node: ComponentNode | PlainElementNode): boolean {
-  // filter out potential comment nodes.
-  const children = (node.children = node.children.filter(
-    c => c.type !== NodeTypes.COMMENT 
-  ))
-
-  return children.length !== 1
-}

packages/runtime-core/src/components/KeepAlive.ts

@@ -13,9 +13,9 @@ import {
   cloneVNode,
   isVNode,
   VNodeProps,
-  invokeVNodeHook
+  invokeVNodeHook,
+  Comment
 } from '../vnode'
-import { warn } from '../warning'
 import {
   onBeforeUnmount,
   injectHook,
@@ -249,13 +249,21 @@ const KeepAliveImpl: ComponentOptions = {
       }
 
       const children = slots.default()
-      const rawVNode = children[0]
+      let rawVNode = children[0]
       if (children.length > 1) {
-        if (__DEV__) {
-          warn(`KeepAlive should contain exactly one component child.`)
+        let hasFound = false
+        // locate first non-comment child
+        for (const c of children) {
+          if (c.type !== Comment) {
+            rawVNode = c
+            hasFound = true
+            break
+          }
+        }
+        if(!hasFound){
+          current = null
+          return children
         }
-        current = null
-        return children
       } else if (
         !isVNode(rawVNode) ||
         (!(rawVNode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) &&