-
-
Notifications
You must be signed in to change notification settings - Fork 32.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Avatar][joy] Remove
imgProps prop and add Codemod script for migra…
…tion (#35859)
- Loading branch information
Showing
8 changed files
with
168 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
92 changes: 92 additions & 0 deletions
92
packages/mui-codemod/src/v5.0.0/joy-avatar-remove-imgProps.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| /** | ||
| * @param {import('jscodeshift').FileInfo} file | ||
| * @param {import('jscodeshift').API} api | ||
| */ | ||
| export default function transformer(file, api, options) { | ||
| const j = api.jscodeshift; | ||
| const root = j(file.source); | ||
| const printOptions = options.printOptions; | ||
|
|
||
| root | ||
| .find(j.ImportDeclaration) | ||
| .filter(({ node }) => { | ||
| const sourceVal = node.source.value; | ||
|
|
||
| return [ | ||
| '@mui/joy', // Process only Joy UI components | ||
| '@mui/joy/Avatar', // Filter default imports of components other than `Avatar` | ||
| ].includes(sourceVal); | ||
| }) | ||
| .forEach((path) => { | ||
| path.node.specifiers.forEach((elementNode) => { | ||
| if ( | ||
| (elementNode.type === 'ImportSpecifier' && elementNode.imported?.name === 'Avatar') || | ||
| elementNode.type === 'ImportDefaultSpecifier' | ||
| ) { | ||
| // Process only Joy `Avatar` component | ||
| root.findJSXElements(elementNode.local.name).forEach((elementPath) => { | ||
| if (elementPath.node.type !== 'JSXElement') { | ||
| return; | ||
| } | ||
|
|
||
| const slotPropsAttributeNode = elementPath.node.openingElement.attributes.find( | ||
| (attributeNode) => | ||
| attributeNode.type === 'JSXAttribute' && | ||
| attributeNode.name.name === 'slotProps' && | ||
| attributeNode.value.expression?.type === 'ObjectExpression', | ||
| ); | ||
| const newAttributeNodes = []; | ||
| elementPath.node.openingElement.attributes.forEach((attributeNode) => { | ||
| if (attributeNode.type !== 'JSXAttribute') { | ||
| return; | ||
| } | ||
|
|
||
| if (attributeNode.name.name !== 'imgProps') { | ||
| newAttributeNodes.push(attributeNode); | ||
| return; | ||
| } | ||
|
|
||
| const val = attributeNode.value; | ||
| if (!val?.expression) { | ||
| return; | ||
| } | ||
|
|
||
| if (slotPropsAttributeNode) { | ||
| const imgObjInSlotProps = slotPropsAttributeNode.value.expression.properties.find( | ||
| (propNode) => | ||
| propNode.key.name === 'img' && propNode.value.type === 'ObjectExpression', | ||
| ); | ||
| if (imgObjInSlotProps) { | ||
| const newProperties = [ | ||
| ...imgObjInSlotProps.value.properties, | ||
| ...attributeNode.value.expression.properties, | ||
| ]; | ||
| imgObjInSlotProps.value.properties = newProperties; | ||
| } else { | ||
| slotPropsAttributeNode.value.expression.properties.push( | ||
| j.objectProperty(j.identifier('img'), attributeNode.value), | ||
| ); | ||
| } | ||
| } else { | ||
| newAttributeNodes.push( | ||
| j.jsxAttribute( | ||
| j.jsxIdentifier('slotProps'), | ||
| j.jsxExpressionContainer( | ||
| j.objectExpression([ | ||
| j.objectProperty(j.identifier('img'), attributeNode.value.expression), | ||
| ]), | ||
| ), | ||
| ), | ||
| ); | ||
| } | ||
| }); | ||
| elementPath.node.openingElement.attributes = newAttributeNodes; | ||
| }); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| const transformed = root.findJSXElements(); | ||
|
|
||
| return transformed.toSource(printOptions); | ||
| } |
29 changes: 29 additions & 0 deletions
29
packages/mui-codemod/src/v5.0.0/joy-avatar-remove-imgProps.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import path from 'path'; | ||
| import { expect } from 'chai'; | ||
| import jscodeshift from 'jscodeshift'; | ||
| import transform from './joy-avatar-remove-imgProps'; | ||
| import readFile from '../util/readFile'; | ||
|
|
||
| function read(fileName) { | ||
| return readFile(path.join(__dirname, fileName)); | ||
| } | ||
|
|
||
| describe('@mui/codemod', () => { | ||
| describe('v5.0.0', () => { | ||
| describe('joy-avatar-remove-imgProps', () => { | ||
| it('transforms `imgProps` prop to `slotProps.img`', () => { | ||
| const actual = transform( | ||
| { | ||
| source: read('./joy-avatar-remove-imgProps.test/actual.js'), | ||
| path: require.resolve('./joy-rename-components-to-slots.test/actual.js'), | ||
| }, | ||
| { jscodeshift }, | ||
| {}, | ||
| ); | ||
|
|
||
| const expected = read('./joy-avatar-remove-imgProps.test/expected.js'); | ||
| expect(actual).to.equal(expected, 'The transformed version should be correct'); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
13 changes: 13 additions & 0 deletions
13
packages/mui-codemod/src/v5.0.0/joy-avatar-remove-imgProps.test/actual.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| // the codemod should transform only Joy UI `Avatar`; | ||
| import { Avatar as JoyAvatar } from '@mui/joy'; | ||
| import Avatar from '@mui/joy/Avatar'; | ||
| import MaterialAvatar from '@mui/material/Avatar'; | ||
|
|
||
| <div> | ||
| <JoyAvatar imgProps={{ ['aria-hidden']: true }} /> | ||
| <Avatar | ||
| slotProps={{ root: { ['aria-hidden']: false }, img: { ['aria-label']: 'imgSlot' } }} | ||
| imgProps={{ ['aria-hidden']: true }} | ||
| /> | ||
| <MaterialAvatar imgProps={{ ['aria-hidden']: true }} /> | ||
| </div>; |
16 changes: 16 additions & 0 deletions
16
packages/mui-codemod/src/v5.0.0/joy-avatar-remove-imgProps.test/expected.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| // the codemod should transform only Joy UI `Avatar`; | ||
| import { Avatar as JoyAvatar } from '@mui/joy'; | ||
| import Avatar from '@mui/joy/Avatar'; | ||
| import MaterialAvatar from '@mui/material/Avatar'; | ||
|
|
||
| <div> | ||
| <JoyAvatar slotProps={{ | ||
| img: { ['aria-hidden']: true } | ||
| }} /> | ||
| <Avatar | ||
| slotProps={{ root: { ['aria-hidden']: false }, img: { | ||
| ['aria-label']: 'imgSlot', | ||
| ['aria-hidden']: true | ||
| } }} /> | ||
| <MaterialAvatar imgProps={{ ['aria-hidden']: true }} /> | ||
| </div>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters