-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[material-ui][avatar] Add props deprecation with a codemod (#40853)
- Loading branch information
1 parent
7c0aa2c
commit a419b48
Showing
16 changed files
with
347 additions
and
29 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
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
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 |
|---|---|---|
| @@ -1,11 +1,15 @@ | ||
| import transformAccordionProps from '../accordion-props/accordion-props'; | ||
| import transformAccordionProps from '../accordion-props'; | ||
| import transformAvatarProps from '../avatar-props'; | ||
| import transformDividerProps from '../divider-props'; | ||
|
|
||
| /** | ||
| * @param {import('jscodeshift').FileInfo} file | ||
| * @param {import('jscodeshift').API} api | ||
| */ | ||
| export default function deprecationsAll(file, api, options) { | ||
| file.source = transformAccordionProps(file, api, options); | ||
| file.source = transformAvatarProps(file, api, options); | ||
| file.source = transformDividerProps(file, api, options); | ||
|
|
||
| return file.source; | ||
| } |
56 changes: 56 additions & 0 deletions
56
packages/mui-codemod/src/deprecations/avatar-props/avatar-props.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,56 @@ | ||
| import findComponentJSX from '../../util/findComponentJSX'; | ||
| import assignObject from '../../util/assignObject'; | ||
| import appendAttribute from '../../util/appendAttribute'; | ||
|
|
||
| /** | ||
| * @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; | ||
|
|
||
| findComponentJSX(j, { root, componentName: 'Avatar' }, (elementPath) => { | ||
| const index = elementPath.node.openingElement.attributes.findIndex( | ||
| (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'imgProps', | ||
| ); | ||
| if (index !== -1) { | ||
| const removed = elementPath.node.openingElement.attributes.splice(index, 1); | ||
| let hasNode = false; | ||
| elementPath.node.openingElement.attributes.forEach((attr) => { | ||
| if (attr.name?.name === 'slotProps') { | ||
| hasNode = true; | ||
| assignObject(j, { | ||
| target: attr, | ||
| key: 'img', | ||
| expression: removed[0].value.expression, | ||
| }); | ||
| } | ||
| }); | ||
| if (!hasNode) { | ||
| appendAttribute(j, { | ||
| target: elementPath.node, | ||
| attributeName: 'slotProps', | ||
| expression: j.objectExpression([ | ||
| j.objectProperty(j.identifier('img'), removed[0].value.expression), | ||
| ]), | ||
| }); | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| root.find(j.ObjectProperty, { key: { name: 'imgProps' } }).forEach((path) => { | ||
| if (path.parent?.parent?.parent?.parent?.node.key?.name === 'MuiAvatar') { | ||
| path.replace( | ||
| j.property( | ||
| 'init', | ||
| j.identifier('slotProps'), | ||
| j.objectExpression([j.objectProperty(j.identifier('img'), path.node.value)]), | ||
| ), | ||
| ); | ||
| } | ||
| }); | ||
|
|
||
| return root.toSource(printOptions); | ||
| } |
53 changes: 53 additions & 0 deletions
53
packages/mui-codemod/src/deprecations/avatar-props/avatar-props.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,53 @@ | ||
| import path from 'path'; | ||
| import { expect } from 'chai'; | ||
| import { jscodeshift } from '../../../testUtils'; | ||
| import transform from './avatar-props'; | ||
| import readFile from '../../util/readFile'; | ||
|
|
||
| function read(fileName) { | ||
| return readFile(path.join(__dirname, fileName)); | ||
| } | ||
|
|
||
| describe('@mui/codemod', () => { | ||
| describe('deprecations', () => { | ||
| describe('avatar-props', () => { | ||
| it('transforms props as needed', () => { | ||
| const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {}); | ||
|
|
||
| const expected = read('./test-cases/expected.js'); | ||
| expect(actual).to.equal(expected, 'The transformed version should be correct'); | ||
| }); | ||
|
|
||
| it('should be idempotent', () => { | ||
| const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {}); | ||
|
|
||
| const expected = read('./test-cases/expected.js'); | ||
| expect(actual).to.equal(expected, 'The transformed version should be correct'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('[theme] avatar-props', () => { | ||
| it('transforms props as needed', () => { | ||
| const actual = transform( | ||
| { source: read('./test-cases/theme.actual.js') }, | ||
| { jscodeshift }, | ||
| {}, | ||
| ); | ||
|
|
||
| const expected = read('./test-cases/theme.expected.js'); | ||
| expect(actual).to.equal(expected, 'The transformed version should be correct'); | ||
| }); | ||
|
|
||
| it('should be idempotent', () => { | ||
| const actual = transform( | ||
| { source: read('./test-cases/theme.expected.js') }, | ||
| { jscodeshift }, | ||
| {}, | ||
| ); | ||
|
|
||
| const expected = read('./test-cases/theme.expected.js'); | ||
| expect(actual).to.equal(expected, 'The transformed version should be correct'); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
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 @@ | ||
| export { default } from './avatar-props'; |
23 changes: 23 additions & 0 deletions
23
packages/mui-codemod/src/deprecations/avatar-props/test-cases/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,23 @@ | ||
| import Avatar from '@mui/material/Avatar'; | ||
| import { Avatar as MyAvatar } from '@mui/material'; | ||
|
|
||
| <Avatar | ||
| imgProps={{ | ||
| onError: () => {}, | ||
| onLoad: () => {}, | ||
| }} | ||
| />; | ||
| <MyAvatar | ||
| imgProps={{ | ||
| onError: () => {}, | ||
| onLoad: () => {}, | ||
| }} | ||
| />; | ||
|
|
||
| // should skip non MUI components | ||
| <NonMuiAvatar | ||
| imgProps={{ | ||
| onError: () => {}, | ||
| onLoad: () => {}, | ||
| }} | ||
| />; |
27 changes: 27 additions & 0 deletions
27
packages/mui-codemod/src/deprecations/avatar-props/test-cases/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,27 @@ | ||
| import Avatar from '@mui/material/Avatar'; | ||
| import { Avatar as MyAvatar } from '@mui/material'; | ||
|
|
||
| <Avatar | ||
| slotProps={{ | ||
| img: { | ||
| onError: () => {}, | ||
| onLoad: () => {}, | ||
| } | ||
| }} | ||
| />; | ||
| <MyAvatar | ||
| slotProps={{ | ||
| img: { | ||
| onError: () => {}, | ||
| onLoad: () => {}, | ||
| } | ||
| }} | ||
| />; | ||
|
|
||
| // should skip non MUI components | ||
| <NonMuiAvatar | ||
| imgProps={{ | ||
| onError: () => {}, | ||
| onLoad: () => {}, | ||
| }} | ||
| />; |
10 changes: 10 additions & 0 deletions
10
packages/mui-codemod/src/deprecations/avatar-props/test-cases/theme.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,10 @@ | ||
| fn({ | ||
| MuiAvatar: { | ||
| defaultProps: { | ||
| imgProps: { | ||
| onError: () => {}, | ||
| onLoad: () => {}, | ||
| }, | ||
| }, | ||
| }, | ||
| }); |
12 changes: 12 additions & 0 deletions
12
packages/mui-codemod/src/deprecations/avatar-props/test-cases/theme.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,12 @@ | ||
| fn({ | ||
| MuiAvatar: { | ||
| defaultProps: { | ||
| slotProps: { | ||
| img: { | ||
| onError: () => {}, | ||
| onLoad: () => {}, | ||
| } | ||
| } | ||
| }, | ||
| }, | ||
| }); |
Oops, something went wrong.