fix: child nodes of KeepAlive should not be transformed to slots

packages/babel-plugin-jsx/src/buildProps.ts

@@ -28,7 +28,7 @@ const getJSXAttributeValue = (
   state: State,
 ): (
     t.StringLiteral | t.Expression | null
-) => {
+  ) => {
   const valuePath = path.get('value');
   if (valuePath.isJSXElement()) {
     return transformJSXElement(valuePath, state);

packages/babel-plugin-jsx/src/sugar-fragment.ts

@@ -20,8 +20,7 @@ export default ({
   JSXFragment: {
     enter(path: NodePath<t.JSXElement>, state: State) {
       const fragmentCallee = createIdentifier(state, FRAGMENT);
-      path.replaceWith(
-        t.inherits(transformFragment(
+      path.replaceWith(transformFragment(
         path,
         t.isIdentifier(fragmentCallee)
           ? t.jsxIdentifier(fragmentCallee.name)
@@ -29,9 +28,7 @@ export default ({
             t.jsxIdentifier((fragmentCallee.object as t.Identifier).name),
             t.jsxIdentifier((fragmentCallee.property as t.Identifier).name),
           ),
-        ), path.node)
-        ,
-      );
+      ));
     },
   },
 });

packages/babel-plugin-jsx/src/transform-vue-jsx.ts

@@ -121,7 +121,7 @@ const transformJSXElement = (
         t.numericLiteral(slotFlag),
       ) as any,
     ].filter(Boolean));
-    if (t.isIdentifier(child)) {
+    if (t.isIdentifier(child) && isComponent) {
       VNodeChild = enableObjectSlots ? t.conditionalExpression(
         t.callExpression(state.get('@vue/babel-plugin-jsx/runtimeIsSlot')(), [child]),
         child,
@@ -212,9 +212,7 @@ export { transformJSXElement };
 export default ({
   JSXElement: {
     exit(path: NodePath<t.JSXElement>, state: State) {
-      path.replaceWith(
-        t.inherits(transformJSXElement(path, state), path.node),
-      );
+      path.replaceWith(transformJSXElement(path, state));
     },
   },
 });

packages/babel-plugin-jsx/src/utils.ts

@@ -7,6 +7,8 @@ import SlotFlags from './slotFlags';
 
 const JSX_HELPER_KEY = 'JSX_HELPER_KEY';
 const FRAGMENT = 'Fragment';
+const KEEP_ALIVE = 'KeepAlive';
+
 /**
  * create Identifier
  * @param path NodePath
@@ -26,22 +28,11 @@ const isDirective = (src: string): boolean => src.startsWith('v-')
   || (src.startsWith('v') && src.length >= 2 && src[1] >= 'A' && src[1] <= 'Z');
 
 /**
- * Check if a Node is fragment
- * @param {*} path JSXIdentifier | JSXMemberExpression | JSXNamespacedName
+ * Should transformed to slots
+ * @param tag string
  * @returns boolean
  */
-const isFragment = (
-  path:
-    NodePath<t.JSXIdentifier | t.JSXMemberExpression | t.JSXNamespacedName>,
-): boolean => {
-  if (path.isJSXIdentifier()) {
-    return path.node.name.endsWith(FRAGMENT);
-  }
-  if (path.isJSXMemberExpression()) {
-    return path.node.property.name.endsWith(FRAGMENT);
-  }
-  return false;
-};
+const shouldTransformedToSlots = (tag: string) => !(tag.endsWith(FRAGMENT) || tag === KEEP_ALIVE);
 
 /**
  * Check if a Node is a component
@@ -53,13 +44,13 @@ const isFragment = (
 const checkIsComponent = (path: NodePath<t.JSXOpeningElement>): boolean => {
   const namePath = path.get('name');
 
-  if (t.isJSXMemberExpression(namePath)) {
-    return !isFragment(namePath); // For withCtx
+  if (namePath.isJSXMemberExpression()) {
+    return shouldTransformedToSlots(namePath.node.property.name); // For withCtx
   }
 
   const tag = (namePath as NodePath<t.JSXIdentifier>).node.name;
 
-  return !tag.endsWith(FRAGMENT) && !htmlTags.includes(tag) && !svgTags.includes(tag);
+  return shouldTransformedToSlots(tag) && !htmlTags.includes(tag) && !svgTags.includes(tag);
 };
 
 /**
@@ -182,7 +173,7 @@ const transformJSXExpressionContainer = (
   path: NodePath<t.JSXExpressionContainer>,
 ): (
     t.Expression
-) => path.get('expression').node as t.Expression;
+  ) => path.get('expression').node as t.Expression;
 
 /**
  * Transform JSXSpreadChild
@@ -240,7 +231,7 @@ export {
   transformJSXText,
   transformJSXSpreadChild,
   transformJSXExpressionContainer,
-  isFragment,
+  shouldTransformedToSlots,
   FRAGMENT,
   walksScope,
   buildIIFE,