Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(textReplaceWithContent): fix nested JSXElements handling #726

Merged
merged 1 commit into from
Aug 12, 2024
Merged

fix(textReplaceWithContent): fix nested JSXElements handling #726

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
165 changes: 102 additions & 63 deletions ...-plugin-pf-codemods/src/rules/v6/textReplaceWithContent/text-replace-with-content.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,13 @@ const importDeclarationError = {
message: errorMessage,
type: "ImportDeclaration",
};
const jsxElementError = {
const jsxOpeningElementError = {
message: errorMessage,
type: "JSXElement",
type: "JSXOpeningElement",
};
const jsxClosingElementError = {
message: errorMessage,
type: "JSXClosingElement",
};
const identifierError = {
message: errorMessage,
Expand All @@ -28,78 +32,109 @@ ruleTester.run("text-replace-with-content", rule, {
{
code: `import { Text } from '@patternfly/react-core'; <Text>Abc</Text>`,
output: `import { Content } from '@patternfly/react-core'; <Content component="p">Abc</Content>`,
errors: [importDeclarationError, jsxElementError],
errors: [
importDeclarationError,
jsxOpeningElementError,
jsxClosingElementError,
],
},
{
code: `import { Text } from '@patternfly/react-core'; <Text component="h3">Abc</Text>`,
output: `import { Content } from '@patternfly/react-core'; <Content component="h3">Abc</Content>`,
errors: [importDeclarationError, jsxElementError],
errors: [
importDeclarationError,
jsxOpeningElementError,
jsxClosingElementError,
],
},
{
code: `import { Text, TextContent } from '@patternfly/react-core';
<TextContent>
<Text component="h3">Abc</Text>
</TextContent>`,
output: `import { Content, TextContent } from '@patternfly/react-core';
<Content>
<Content component="h3">Abc</Content>
</Content>`,
errors: [
importDeclarationError,
jsxOpeningElementError,
jsxOpeningElementError,
jsxClosingElementError,
jsxClosingElementError,
],
},
// {
// code: `import { Text, TextContent } from '@patternfly/react-core';
// <TextContent>
// <Text component="h3">Abc</Text>
// </TextContent>`,
// output: `import { Content, TextContent } from '@patternfly/react-core';
// <Content>
// <Content component="h3">Abc</Content>
// </Content>`,
// errors: [importDeclarationError, jsxElementError, jsxElementError],
// },
{
code: `import { TextContent } from '@patternfly/react-core'; <TextContent isVisited></TextContent>`,
output: `import { Content } from '@patternfly/react-core'; <Content isVisitedLink></Content>`,
errors: [importDeclarationError, jsxElementError],
errors: [
importDeclarationError,
jsxOpeningElementError,
jsxClosingElementError,
],
},
{
code: `import { TextList, TextListItem } from '@patternfly/react-core';
<TextList>
<TextListItem>A</TextListItem>
<TextListItem>B</TextListItem>
<TextListItem>C</TextListItem>
</TextList>`,
output: `import { Content, TextListItem } from '@patternfly/react-core';
<Content component="ul">
<Content component="li">A</Content>
<Content component="li">B</Content>
<Content component="li">C</Content>
</Content>`,
errors: [
importDeclarationError,
jsxOpeningElementError,
jsxOpeningElementError,
jsxClosingElementError,
jsxOpeningElementError,
jsxClosingElementError,
jsxOpeningElementError,
jsxClosingElementError,
jsxClosingElementError,
],
},
{
code: `import { TextList, TextListItem } from '@patternfly/react-core';
<TextList component="dl">
<TextListItem component="dt">A</TextListItem>
<TextListItem component="dd">letter A</TextListItem>
<TextListItem component="dt">B</TextListItem>
<TextListItem component="dd">letter B</TextListItem>
</TextList>`,
output: `import { Content, TextListItem } from '@patternfly/react-core';
<Content component="dl">
<Content component="dt">A</Content>
<Content component="dd">letter A</Content>
<Content component="dt">B</Content>
<Content component="dd">letter B</Content>
</Content>`,
errors: [
importDeclarationError,
jsxOpeningElementError,
jsxOpeningElementError,
jsxClosingElementError,
jsxOpeningElementError,
jsxClosingElementError,
jsxOpeningElementError,
jsxClosingElementError,
jsxOpeningElementError,
jsxClosingElementError,
jsxClosingElementError,
],
},
// {
// code: `import { TextList, TextListItem } from '@patternfly/react-core';
// <TextList>
// <TextListItem>A</TextListItem>
// <TextListItem>B</TextListItem>
// <TextListItem>C</TextListItem>
// </TextList>`,
// output: `import { Content, TextListItem } from '@patternfly/react-core';
// <Content component="ul">
// <Content component="li">A</Content>
// <Content component="li">B</Content>
// <Content component="li">C</Content>
// </Content>`,
// errors: [
// importDeclarationError,
// jsxElementError,
// jsxElementError,
// jsxElementError,
// jsxElementError,
// ],
// },
// {
// code: `import { TextList, TextListItem } from '@patternfly/react-core';
// <TextList component="dl">
// <TextListItem component="dt">A</TextListItem>
// <TextListItem component="dd">letter A</TextListItem>
// <TextListItem component="dt">B</TextListItem>
// <TextListItem component="dd">letter B</TextListItem>
// </TextList>`,
// output: `import { Content, TextListItem } from '@patternfly/react-core';
// <Content component="dl">
// <Content component="dt">A</Content>
// <Content component="dd">letter A</Content>
// <Content component="dt">B</Content>
// <Content component="dd">letter B</Content>
// </Content>`,
// errors: [
// importDeclarationError,
// jsxElementError,
// jsxElementError,
// jsxElementError,
// jsxElementError,
// jsxElementError,
// ],
// },
{
code: `import { TextList } from '@patternfly/react-core'; <TextList isPlain></TextList>`,
output: `import { Content } from '@patternfly/react-core'; <Content component="ul" isPlainList></Content>`,
errors: [importDeclarationError, jsxElementError],
errors: [
importDeclarationError,
jsxOpeningElementError,
jsxClosingElementError,
],
},
{
code: `import { TextVariants } from '@patternfly/react-core'; const foo = TextVariants.h1`,
Expand All @@ -115,7 +150,11 @@ ruleTester.run("text-replace-with-content", rule, {
{
code: `import { Text as PFText } from '@patternfly/react-core'; <PFText>Abc</PFText>`,
output: `import { Content } from '@patternfly/react-core'; <Content component="p">Abc</Content>`,
errors: [importDeclarationError, jsxElementError],
errors: [
importDeclarationError,
jsxOpeningElementError,
jsxClosingElementError,
],
},
],
});
Expand Down
41 changes: 26 additions & 15 deletions ...slint-plugin-pf-codemods/src/rules/v6/textReplaceWithContent/text-replace-with-content.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import { Rule } from "eslint";
import {
ImportDeclaration,
ImportSpecifier,
JSXElement,
JSXClosingElement,
JSXIdentifier,
JSXOpeningElement,
} from "estree-jsx";
import {
getAttribute,
Expand Down Expand Up @@ -65,14 +66,10 @@ module.exports = {
});
}
},
JSXElement(node: JSXElement) {
const openingElement = node.openingElement;
const closingElement = node.closingElement;

if (openingElement.name.type === "JSXIdentifier") {
JSXOpeningElement(node: JSXOpeningElement) {
if (node.name.type === "JSXIdentifier") {
const componentImport = textImports.find(
(imp) =>
imp.local.name === (openingElement.name as JSXIdentifier).name
(imp) => imp.local.name === (node.name as JSXIdentifier).name
);

if (!componentImport) {
Expand Down Expand Up @@ -102,7 +99,7 @@ module.exports = {

fixes.push(
fixer.insertTextAfter(
openingElement.name,
node.name,
` component="${componentMap[componentName]}"`
)
);
Expand All @@ -129,18 +126,32 @@ module.exports = {
}
}

fixes.push(fixer.replaceText(openingElement.name, "Content"));
if (closingElement) {
fixes.push(
fixer.replaceText(closingElement.name, "Content")
);
}
fixes.push(fixer.replaceText(node.name, "Content"));

return fixes;
},
});
}
},
JSXClosingElement(node: JSXClosingElement) {
if (node.name.type === "JSXIdentifier") {
const componentImport = textImports.find(
(imp) => imp.local.name === (node.name as JSXIdentifier).name
);

if (!componentImport) {
return;
}

context.report({
node,
message: errorMessage,
fix(fixer) {
return fixer.replaceText(node.name, "Content");
},
});
}
},
Identifier(node: IdentifierWithParent) {
const textImport = textImports.find(
(imp) => imp.local.name === node.name
Expand Down
3 changes: 3 additions & 0 deletions ...nt-plugin-pf-codemods/src/rules/v6/textReplaceWithContent/textReplaceWithContentInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ export const TextReplaceWithContentInput = () => {
<Text component="h3">Abc</Text>
<Text>Abc</Text>
<TextContent>Abc</TextContent>
<TextContent>
<Text>Some text</Text>
</TextContent>
<TextContent isVisited>Abc</TextContent>
<TextList>Abc</TextList>
<TextList isPlain>Abc</TextList>
Expand Down
3 changes: 3 additions & 0 deletions ...t-plugin-pf-codemods/src/rules/v6/textReplaceWithContent/textReplaceWithContentOutput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ export const TextReplaceWithContentInput = () => {
<Content component="h3">Abc</Content>
<Content component="p">Abc</Content>
<Content>Abc</Content>
<Content>
<Content component="p">Some text</Content>
</Content>
<Content isVisitedLink>Abc</Content>
<Content component="ul">Abc</Content>
<Content component="ul" isPlainList>Abc</Content>
Expand Down
Loading