From f1c9629b88341efc01cf7ae049047fa5110043b4 Mon Sep 17 00:00:00 2001 From: Amour1688 Date: Thu, 4 Feb 2021 22:18:07 +0800 Subject: [PATCH] fix: child nodes of KeepAlive should not be transformed to slots --- packages/babel-plugin-jsx/src/buildProps.ts | 8 ++--- .../babel-plugin-jsx/src/sugar-fragment.ts | 21 ++++++------- .../babel-plugin-jsx/src/transform-vue-jsx.ts | 6 ++-- packages/babel-plugin-jsx/src/utils.ts | 31 +++++++------------ 4 files changed, 26 insertions(+), 40 deletions(-) diff --git a/packages/babel-plugin-jsx/src/buildProps.ts b/packages/babel-plugin-jsx/src/buildProps.ts index c3a7ae5..f4db6af 100644 --- a/packages/babel-plugin-jsx/src/buildProps.ts +++ b/packages/babel-plugin-jsx/src/buildProps.ts @@ -27,8 +27,8 @@ const getJSXAttributeValue = ( path: NodePath, state: State, ): ( - t.StringLiteral | t.Expression | null -) => { + t.StringLiteral | t.Expression | null + ) => { const valuePath = path.get('value'); if (valuePath.isJSXElement()) { return transformJSXElement(valuePath, state); @@ -181,8 +181,8 @@ const buildProps = (path: NodePath, state: State) => { hasStyleBinding = true; } else if ( name !== 'key' - && !isDirective(name) - && name !== 'on' + && !isDirective(name) + && name !== 'on' ) { dynamicPropNames.add(name); } diff --git a/packages/babel-plugin-jsx/src/sugar-fragment.ts b/packages/babel-plugin-jsx/src/sugar-fragment.ts index f65a8dc..ae6afea 100644 --- a/packages/babel-plugin-jsx/src/sugar-fragment.ts +++ b/packages/babel-plugin-jsx/src/sugar-fragment.ts @@ -20,18 +20,15 @@ export default ({ JSXFragment: { enter(path: NodePath, state: State) { const fragmentCallee = createIdentifier(state, FRAGMENT); - path.replaceWith( - t.inherits(transformFragment( - path, - t.isIdentifier(fragmentCallee) - ? t.jsxIdentifier(fragmentCallee.name) - : t.jsxMemberExpression( - t.jsxIdentifier((fragmentCallee.object as t.Identifier).name), - t.jsxIdentifier((fragmentCallee.property as t.Identifier).name), - ), - ), path.node) - , - ); + path.replaceWith(transformFragment( + path, + t.isIdentifier(fragmentCallee) + ? t.jsxIdentifier(fragmentCallee.name) + : t.jsxMemberExpression( + t.jsxIdentifier((fragmentCallee.object as t.Identifier).name), + t.jsxIdentifier((fragmentCallee.property as t.Identifier).name), + ), + )); }, }, }); diff --git a/packages/babel-plugin-jsx/src/transform-vue-jsx.ts b/packages/babel-plugin-jsx/src/transform-vue-jsx.ts index 7503d60..c2da06f 100644 --- a/packages/babel-plugin-jsx/src/transform-vue-jsx.ts +++ b/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, state: State) { - path.replaceWith( - t.inherits(transformJSXElement(path, state), path.node), - ); + path.replaceWith(transformJSXElement(path, state)); }, }, }); diff --git a/packages/babel-plugin-jsx/src/utils.ts b/packages/babel-plugin-jsx/src/utils.ts index 901be11..f2e44e5 100644 --- a/packages/babel-plugin-jsx/src/utils.ts +++ b/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, -): 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): 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).node.name; - return !tag.endsWith(FRAGMENT) && !htmlTags.includes(tag) && !svgTags.includes(tag); + return shouldTransformedToSlots(tag) && !htmlTags.includes(tag) && !svgTags.includes(tag); }; /** @@ -181,8 +172,8 @@ const transformJSXText = (path: NodePath): t.StringLiteral | null => const transformJSXExpressionContainer = ( path: NodePath, ): ( - t.Expression -) => path.get('expression').node as t.Expression; + t.Expression + ) => path.get('expression').node as t.Expression; /** * Transform JSXSpreadChild @@ -240,7 +231,7 @@ export { transformJSXText, transformJSXSpreadChild, transformJSXExpressionContainer, - isFragment, + shouldTransformedToSlots, FRAGMENT, walksScope, buildIIFE,