From a2dc8de84658065a2fcce896596669e4cd60e2c0 Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Thu, 2 May 2024 15:42:50 -0400 Subject: [PATCH 1/2] Only apply codemod if light prop is present --- .../divider-props/divider-props.js | 107 ++++++++++-------- .../divider-props/test-cases/actual.js | 1 + .../divider-props/test-cases/expected.js | 1 + .../divider-props/test-cases/theme.actual.js | 8 ++ .../test-cases/theme.expected.js | 8 ++ 5 files changed, 78 insertions(+), 47 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/divider-props/divider-props.js b/packages/mui-codemod/src/deprecations/divider-props/divider-props.js index d392b496ea46c0..9f13fe5013c0bf 100644 --- a/packages/mui-codemod/src/deprecations/divider-props/divider-props.js +++ b/packages/mui-codemod/src/deprecations/divider-props/divider-props.js @@ -12,37 +12,43 @@ export default function transformer(file, api, options) { const printOptions = options.printOptions; findComponentJSX(j, { root, componentName: 'Divider' }, (elementPath) => { - elementPath.node.openingElement.attributes = elementPath.node.openingElement.attributes.filter( - (attr) => { - if (attr.type === 'JSXAttribute' && attr.name.name === 'light') { - return false; - } - return true; - }, - ); - - const sxIndex = elementPath.node.openingElement.attributes.findIndex( - (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'sx', - ); - if (sxIndex === -1) { - appendAttribute(j, { - target: elementPath.node, - attributeName: 'sx', - expression: j.objectExpression([ - j.objectProperty(j.identifier('opacity'), j.literal('0.6')), - ]), - }); - } else { - const opacityIndex = elementPath.node.openingElement.attributes[ - sxIndex - ].value.expression.properties.findIndex((key) => key.key.name === 'opacity'); - - if (opacityIndex === -1) { - assignObject(j, { - target: elementPath.node.openingElement.attributes[sxIndex], - key: 'opacity', - expression: j.literal('0.6'), + const hasLightProp = elementPath.node.openingElement.attributes.findIndex( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'light', + ) !== -1; + + if (hasLightProp) { + elementPath.node.openingElement.attributes = elementPath.node.openingElement.attributes.filter( + (attr) => { + if (attr.type === 'JSXAttribute' && attr.name.name === 'light') { + return false; + } + return true; + }, + ); + + const sxIndex = elementPath.node.openingElement.attributes.findIndex( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'sx', + ); + if (sxIndex === -1) { + appendAttribute(j, { + target: elementPath.node, + attributeName: 'sx', + expression: j.objectExpression([ + j.objectProperty(j.identifier('opacity'), j.literal('0.6')), + ]), }); + } else { + const opacityIndex = elementPath.node.openingElement.attributes[ + sxIndex + ].value.expression.properties.findIndex((key) => key.key.name === 'opacity'); + + if (opacityIndex === -1) { + assignObject(j, { + target: elementPath.node.openingElement.attributes[sxIndex], + key: 'opacity', + expression: j.literal('0.6'), + }); + } } } }); @@ -52,28 +58,35 @@ export default function transformer(file, api, options) { (key) => key.key.name === 'defaultProps', ); - defaultPropsObject.value.properties = defaultPropsObject.value.properties.filter( - (prop) => !['light'].includes(prop?.key?.name), - ); + const hasLightProp = defaultPropsObject.value.properties.findIndex( + (prop) => prop.key.name === 'light', + ) !== -1; - const sxIndex = defaultPropsObject.value.properties.findIndex((prop) => prop.key.name === 'sx'); + if (hasLightProp) { - if (sxIndex === -1) { - defaultPropsObject.value.properties.push( - j.objectProperty( - j.identifier('sx'), - j.objectExpression([j.objectProperty(j.identifier('opacity'), j.literal('0.6'))]), - ), - ); - } else { - const opacityIndex = defaultPropsObject.value.properties[sxIndex].value.properties.findIndex( - (key) => key.key.name === 'opacity', + defaultPropsObject.value.properties = defaultPropsObject.value.properties.filter( + (prop) => !['light'].includes(prop?.key?.name), ); - if (opacityIndex === -1) { - defaultPropsObject.value.properties[sxIndex].value.properties.push( - j.objectProperty(j.identifier('opacity'), j.literal('0.6')), + const sxIndex = defaultPropsObject.value.properties.findIndex((prop) => prop.key.name === 'sx'); + + if (sxIndex === -1) { + defaultPropsObject.value.properties.push( + j.objectProperty( + j.identifier('sx'), + j.objectExpression([j.objectProperty(j.identifier('opacity'), j.literal('0.6'))]), + ), ); + } else { + const opacityIndex = defaultPropsObject.value.properties[sxIndex].value.properties.findIndex( + (key) => key.key.name === 'opacity', + ); + + if (opacityIndex === -1) { + defaultPropsObject.value.properties[sxIndex].value.properties.push( + j.objectProperty(j.identifier('opacity'), j.literal('0.6')), + ); + } } } }); diff --git a/packages/mui-codemod/src/deprecations/divider-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/divider-props/test-cases/actual.js index 92db3a700a543d..4c04e5109f5532 100644 --- a/packages/mui-codemod/src/deprecations/divider-props/test-cases/actual.js +++ b/packages/mui-codemod/src/deprecations/divider-props/test-cases/actual.js @@ -9,3 +9,4 @@ import { Divider as MyDivider } from '@mui/material'; ; ; ; +; diff --git a/packages/mui-codemod/src/deprecations/divider-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/divider-props/test-cases/expected.js index 634419b56eca5f..b04a2284ada8d2 100644 --- a/packages/mui-codemod/src/deprecations/divider-props/test-cases/expected.js +++ b/packages/mui-codemod/src/deprecations/divider-props/test-cases/expected.js @@ -25,3 +25,4 @@ import { Divider as MyDivider } from '@mui/material'; bgcolor: 'black', opacity: "0.6" }} />; +; diff --git a/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.actual.js index aaa23a349a3035..f7c53332dc4bac 100644 --- a/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.actual.js +++ b/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.actual.js @@ -45,3 +45,11 @@ fn({ }, }, }); + +fn({ + MuiDivider: { + defaultProps: { + className: 'my-class', + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.expected.js index 454fa3139ffd9e..d5accf78bc0c35 100644 --- a/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.expected.js +++ b/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.expected.js @@ -52,3 +52,11 @@ fn({ }, }, }); + +fn({ + MuiDivider: { + defaultProps: { + className: 'my-class', + }, + }, +}); From e1096b188c05be0ea49af3a2fb0c534aa2fbc287 Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Thu, 2 May 2024 15:49:41 -0400 Subject: [PATCH 2/2] prettier --- .../divider-props/divider-props.js | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/divider-props/divider-props.js b/packages/mui-codemod/src/deprecations/divider-props/divider-props.js index 9f13fe5013c0bf..6133aacd611d3f 100644 --- a/packages/mui-codemod/src/deprecations/divider-props/divider-props.js +++ b/packages/mui-codemod/src/deprecations/divider-props/divider-props.js @@ -12,20 +12,20 @@ export default function transformer(file, api, options) { const printOptions = options.printOptions; findComponentJSX(j, { root, componentName: 'Divider' }, (elementPath) => { - const hasLightProp = elementPath.node.openingElement.attributes.findIndex( - (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'light', - ) !== -1; - + const hasLightProp = + elementPath.node.openingElement.attributes.findIndex( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'light', + ) !== -1; + if (hasLightProp) { - elementPath.node.openingElement.attributes = elementPath.node.openingElement.attributes.filter( - (attr) => { + elementPath.node.openingElement.attributes = + elementPath.node.openingElement.attributes.filter((attr) => { if (attr.type === 'JSXAttribute' && attr.name.name === 'light') { return false; } return true; - }, - ); - + }); + const sxIndex = elementPath.node.openingElement.attributes.findIndex( (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'sx', ); @@ -41,7 +41,7 @@ export default function transformer(file, api, options) { const opacityIndex = elementPath.node.openingElement.attributes[ sxIndex ].value.expression.properties.findIndex((key) => key.key.name === 'opacity'); - + if (opacityIndex === -1) { assignObject(j, { target: elementPath.node.openingElement.attributes[sxIndex], @@ -58,17 +58,17 @@ export default function transformer(file, api, options) { (key) => key.key.name === 'defaultProps', ); - const hasLightProp = defaultPropsObject.value.properties.findIndex( - (prop) => prop.key.name === 'light', - ) !== -1; + const hasLightProp = + defaultPropsObject.value.properties.findIndex((prop) => prop.key.name === 'light') !== -1; if (hasLightProp) { - defaultPropsObject.value.properties = defaultPropsObject.value.properties.filter( (prop) => !['light'].includes(prop?.key?.name), ); - const sxIndex = defaultPropsObject.value.properties.findIndex((prop) => prop.key.name === 'sx'); + const sxIndex = defaultPropsObject.value.properties.findIndex( + (prop) => prop.key.name === 'sx', + ); if (sxIndex === -1) { defaultPropsObject.value.properties.push( @@ -78,9 +78,9 @@ export default function transformer(file, api, options) { ), ); } else { - const opacityIndex = defaultPropsObject.value.properties[sxIndex].value.properties.findIndex( - (key) => key.key.name === 'opacity', - ); + const opacityIndex = defaultPropsObject.value.properties[ + sxIndex + ].value.properties.findIndex((key) => key.key.name === 'opacity'); if (opacityIndex === -1) { defaultPropsObject.value.properties[sxIndex].value.properties.push(