@mui/codemod 5.11.5 → 5.11.6

package/README.md

@@ -62,6 +62,24 @@ npx @mui/codemod <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"
 
 ### v5.0.0
 
+#### `joy-avatar-remove-imgProps`
+
+Remove `imgProps` prop by transferring its value into `slotProps.img`
+
+This change only affects Joy UI Avatar component.
+
+```diff
+ <Avatar
+-  imgProps={{ ['data-id']: 'imageId' }}
+-  slotProps={{ root: { ['data-id']: 'rootId' }}}
++  slotProps={{ root: { ['data-id']: 'rootId' }, img: { ['data-id']: 'imageId' } }}
+ />;
+```
+
+```sh
+npx @mui/codemod v5.0.0/joy-avatar-remove-imgProps <path>
+```
+
 #### `joy-text-field-to-input`
 
 Replace `<TextField>` with composition of `Input`

package/node/v5.0.0/joy-avatar-remove-imgProps.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+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 => {
+      var _elementNode$imported;
+      if (elementNode.type === 'ImportSpecifier' && ((_elementNode$imported = elementNode.imported) == null ? void 0 : _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 => {
+            var _attributeNode$value$;
+            return attributeNode.type === 'JSXAttribute' && attributeNode.name.name === 'slotProps' && ((_attributeNode$value$ = attributeNode.value.expression) == null ? void 0 : _attributeNode$value$.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 != null && 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);
+}

package/node/v5.0.0/joy-avatar-remove-imgProps.test/actual.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _joy = require("@mui/joy");
+var _Avatar = _interopRequireDefault(require("@mui/joy/Avatar"));
+var _Avatar2 = _interopRequireDefault(require("@mui/material/Avatar"));
+var _jsxRuntime = require("react/jsx-runtime");
+// the codemod should transform only Joy UI `Avatar`;
+
+/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.Avatar, {
+    imgProps: {
+      ['aria-hidden']: true
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+    slotProps: {
+      root: {
+        ['aria-hidden']: false
+      },
+      img: {
+        ['aria-label']: 'imgSlot'
+      }
+    },
+    imgProps: {
+      ['aria-hidden']: true
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar2.default, {
+    imgProps: {
+      ['aria-hidden']: true
+    }
+  })]
+});

package/node/v5.0.0/joy-avatar-remove-imgProps.test/expected.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _joy = require("@mui/joy");
+var _Avatar = _interopRequireDefault(require("@mui/joy/Avatar"));
+var _Avatar2 = _interopRequireDefault(require("@mui/material/Avatar"));
+var _jsxRuntime = require("react/jsx-runtime");
+// the codemod should transform only Joy UI `Avatar`;
+
+/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.Avatar, {
+    slotProps: {
+      img: {
+        ['aria-hidden']: true
+      }
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+    slotProps: {
+      root: {
+        ['aria-hidden']: false
+      },
+      img: {
+        ['aria-label']: 'imgSlot',
+        ['aria-hidden']: true
+      }
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar2.default, {
+    imgProps: {
+      ['aria-hidden']: true
+    }
+  })]
+});

package/node/v5.0.0/joy-text-field-to-input.js

@@ -64,7 +64,6 @@ function transformer(file, api, options) {
                     }
                     propNode.value.properties.forEach(prop => {
                       const key = prop.key.value;
-                      // const value = prop.value.value;
                       const newAttributeNode = j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(prop.value));
                       switch (propNode.key.name) {
                         case 'root':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.11.5",
+  "version": "5.11.6",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",