@mui/codemod 5.15.5 → 5.15.7

package/README.md

@@ -60,11 +60,42 @@ npx @mui/codemod@latest <transform> <path> --jscodeshift="--printOptions='{\"quo
 
 ## Included scripts
 
+- [Deprecation](#deprecations)
+- [v5](#v500)
+- [v4](#v400)
+- [v1](#v100)
+- [v0.15](#v0150)
+
+### Deprecations
+
+```bash
+npx @mui/codemod@latest deprecations/all <path>
+```
+
+#### `all`
+
+A combination of all deprecations.
+
+#### `accordion-props`
+
+```diff
+ <Accordion
+-    TransitionComponent={CustomTransition}
+-    TransitionProps={{ unmountOnExit: true }}
++    slots={{ transition: CustomTransition }}
++    slotProps={{ transition: { unmountOnExit: true } }}
+ />
+```
+
+```bash
+npx @mui/codemod@latest deprecations/accordion-props <path>
+```
+
 ### v5.0.0
 
-### `base-use-named-exports`
+#### `base-use-named-exports`
 
-Base UI default exports were changed to named ones. Previously we had a mix of default and named ones.
+Base UI default exports were changed to named ones. Previously we had a mix of default and named ones.
 This was changed to improve consistency and avoid problems some bundlers have with default exports.
 See https://github.com/mui/material-ui/issues/21862 for more context.
 
@@ -81,9 +112,9 @@ This codemod updates the import and re-export statements.
 npx @mui/codemod@latest v5.0.0/base-use-named-exports <path>
 ```
 
-### `base-remove-unstyled-suffix`
+#### `base-remove-unstyled-suffix`
 
-The `Unstyled` suffix has been removed from all Base UI component names, including names of types and other related identifiers.
+The `Unstyled` suffix has been removed from all Base UI component names, including names of types and other related identifiers.
 
 ```diff
 -  <Input component='a' href='url' />;
@@ -96,9 +127,9 @@ npx @mui/codemod@latest v5.0.0/base-remove-unstyled-suffix <path>
 
 #### `base-remove-component-prop`
 
-Remove `component` prop from all Base UI components by transferring its value into `slots.root`.
+Remove `component` prop from all Base UI components by transferring its value into `slots.root`.
 
-This change only affects Base UI components.
+This change only affects Base UI components.
 
 ```diff
 -  <Input component={CustomRoot} />
@@ -126,7 +157,7 @@ npx @mui/codemod@latest v5.0.0/rename-css-variables <path>
 
 #### `base-hook-imports`
 
-Updates the sources of the imports of the Base UI hooks to adapt to the new directories of the hooks.
+Updates the sources of the imports of the Base UI hooks to adapt to the new directories of the hooks.
 
 ```diff
 -  import { useBadge } from '@mui/base/BadgeUnstyled';
@@ -452,7 +483,7 @@ You can find more details about this breaking change in [the migration guide](ht
 Renames the `components` and `componentsProps` props to `slots` and `slotProps`, respectively.
 Also, changes `slots`' fields names to camelCase.
 
-This change only affects Base UI components.
+This change only affects Base UI components.
 
 ```diff
  <BadgeUnstyled
@@ -1551,7 +1582,7 @@ Head to https://mui.com/guides/minimizing-bundle-size/ to understand when it's u
 #### `import-path`
 
 Updates the `import-paths` for the new location of the components.
-MUI v1.0.0 flatten the import paths.
+Material UI v1.0.0 flatten the import paths.
 The diff should look like this:
 
 ```diff
@@ -1576,7 +1607,7 @@ Subsequently, you can run the above `find ...` command to flatten your imports.
 
 #### `color-imports`
 
-Updates the `color-imports` for the new location of MUI color palettes.
+Updates the `color-imports` for the new location of Material UI color palettes.
 The diff should look like this:
 
 ```diff
@@ -1641,7 +1672,7 @@ npx @mui/codemod@latest v1.0.0/menu-item-primary-text <path>
 #### `import-path`
 
 Updates the `import-paths` for the new location of the components.
-MUI v0.15.0 is reorganizing the folder distribution of the project.
+Material UI v0.15.0 is reorganizing the folder distribution of the project.
 The diff should look like this:
 
 ```diff

package/codemod.js

@@ -10,27 +10,39 @@ const jscodeshiftDirectory = path.dirname(require.resolve('jscodeshift'));
 const jscodeshiftExecutable = path.join(jscodeshiftDirectory, jscodeshiftPackage.bin.jscodeshift);
 
 async function runTransform(transform, files, flags, codemodFlags) {
-  const transformerSrcPath = path.resolve(__dirname, './src', `${transform}.js`);
-  const transformerBuildPath = path.resolve(__dirname, './node', `${transform}.js`);
+  const paths = [
+    path.resolve(__dirname, './src', `${transform}/index.js`),
+    path.resolve(__dirname, './src', `${transform}.js`),
+    path.resolve(__dirname, './node', `${transform}/index.js`),
+    path.resolve(__dirname, './node', `${transform}.js`),
+  ];
+
   let transformerPath;
-  try {
-    await fs.stat(transformerSrcPath);
-    transformerPath = transformerSrcPath;
-  } catch (srcPathError) {
+  let error;
+  // eslint-disable-next-line no-restricted-syntax
+  for (const item of paths) {
     try {
-      await fs.stat(transformerBuildPath);
-      transformerPath = transformerBuildPath;
-    } catch (buildPathError) {
-      if (buildPathError.code === 'ENOENT') {
-        throw new Error(
-          `Transform '${transform}' not found. Check out ${path.resolve(
-            __dirname,
-            './README.md for a list of available codemods.',
-          )}`,
-        );
-      }
-      throw buildPathError;
+      // eslint-disable-next-line no-await-in-loop
+      await fs.stat(item);
+      error = undefined;
+      transformerPath = item;
+      break;
+    } catch (srcPathError) {
+      error = srcPathError;
+      continue;
+    }
+  }
+
+  if (error) {
+    if (error?.code === 'ENOENT') {
+      throw new Error(
+        `Transform '${transform}' not found. Check out ${path.resolve(
+          __dirname,
+          './README.md for a list of available codemods.',
+        )}`,
+      );
     }
+    throw error;
   }
 
   const args = [

package/node/deprecations/accordion-props/accordion-props.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _findComponentJSX = _interopRequireDefault(require("../../util/findComponentJSX"));
+var _assignObject = _interopRequireDefault(require("../../util/assignObject"));
+var _appendAttribute = _interopRequireDefault(require("../../util/appendAttribute"));
+/**
+ * @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;
+  (0, _findComponentJSX.default)(j, {
+    root,
+    componentName: 'Accordion'
+  }, elementPath => {
+    let index = elementPath.node.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'TransitionComponent');
+    if (index !== -1) {
+      const removed = elementPath.node.openingElement.attributes.splice(index, 1);
+      let hasNode = false;
+      elementPath.node.openingElement.attributes.forEach(attr => {
+        var _attr$name;
+        if (((_attr$name = attr.name) == null ? void 0 : _attr$name.name) === 'slots') {
+          hasNode = true;
+          (0, _assignObject.default)(j, {
+            target: attr,
+            key: 'transition',
+            expression: removed[0].value.expression
+          });
+        }
+      });
+      if (!hasNode) {
+        (0, _appendAttribute.default)(j, {
+          target: elementPath.node,
+          attributeName: 'slots',
+          expression: j.objectExpression([j.objectProperty(j.identifier('transition'), removed[0].value.expression)])
+        });
+      }
+    }
+    index = elementPath.node.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'TransitionProps');
+    if (index !== -1) {
+      const removed = elementPath.node.openingElement.attributes.splice(index, 1);
+      let hasNode = false;
+      elementPath.node.openingElement.attributes.forEach(attr => {
+        var _attr$name2;
+        if (((_attr$name2 = attr.name) == null ? void 0 : _attr$name2.name) === 'slotProps') {
+          hasNode = true;
+          (0, _assignObject.default)(j, {
+            target: attr,
+            key: 'transition',
+            expression: removed[0].value.expression
+          });
+        }
+      });
+      if (!hasNode) {
+        (0, _appendAttribute.default)(j, {
+          target: elementPath.node,
+          attributeName: 'slotProps',
+          expression: j.objectExpression([j.objectProperty(j.identifier('transition'), removed[0].value.expression)])
+        });
+      }
+    }
+  });
+  root.find(j.ObjectProperty, {
+    key: {
+      name: 'TransitionComponent'
+    }
+  }).forEach(path => {
+    var _path$parent;
+    if (((_path$parent = path.parent) == null || (_path$parent = _path$parent.parent) == null || (_path$parent = _path$parent.parent) == null || (_path$parent = _path$parent.parent) == null || (_path$parent = _path$parent.node.key) == null ? void 0 : _path$parent.name) === 'MuiAccordion') {
+      path.replace(j.property('init', j.identifier('slots'), j.objectExpression([j.objectProperty(j.identifier('transition'), path.node.value)])));
+    }
+  });
+  root.find(j.ObjectProperty, {
+    key: {
+      name: 'TransitionProps'
+    }
+  }).forEach(path => {
+    var _path$parent2;
+    if (((_path$parent2 = path.parent) == null || (_path$parent2 = _path$parent2.parent) == null || (_path$parent2 = _path$parent2.parent) == null || (_path$parent2 = _path$parent2.parent) == null || (_path$parent2 = _path$parent2.node.key) == null ? void 0 : _path$parent2.name) === 'MuiAccordion') {
+      path.replace(j.property('init', j.identifier('slotProps'), j.objectExpression([j.objectProperty(j.identifier('transition'), path.node.value)])));
+    }
+  });
+  return root.toSource(printOptions);
+}

package/node/deprecations/accordion-props/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _accordionProps.default;
+  }
+});
+var _accordionProps = _interopRequireDefault(require("./accordion-props"));

package/node/deprecations/accordion-props/test-cases/actual.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _Accordion = _interopRequireDefault(require("@mui/material/Accordion"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+  slots: {
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: {
+      unmountOnExit: true
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Accordion, {
+  slots: {
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: transitionVars
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+  slots: {
+    root: 'div',
+    transition: CustomTransition
+  },
+  slotProps: {
+    root: {
+      className: 'foo'
+    },
+    transition: {
+      unmountOnExit: true
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Accordion, {
+  slots: (0, _extends2.default)({}, outerSlots, {
+    transition: CustomTransition
+  }),
+  slotProps: (0, _extends2.default)({}, outerSlotProps, {
+    transition: {
+      unmountOnExit: true
+    }
+  })
+});
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiAccordion, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: {
+    unmountOnExit: true
+  }
+});

package/node/deprecations/accordion-props/test-cases/expected.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _Accordion = _interopRequireDefault(require("@mui/material/Accordion"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+  slots: {
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: {
+      unmountOnExit: true
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Accordion, {
+  slots: {
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: transitionVars
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+  slots: {
+    root: 'div',
+    transition: CustomTransition
+  },
+  slotProps: {
+    root: {
+      className: 'foo'
+    },
+    transition: {
+      unmountOnExit: true
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Accordion, {
+  slots: (0, _extends2.default)({}, outerSlots, {
+    transition: CustomTransition
+  }),
+  slotProps: (0, _extends2.default)({}, outerSlotProps, {
+    transition: {
+      unmountOnExit: true
+    }
+  })
+});
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiAccordion, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: {
+    unmountOnExit: true
+  }
+});

package/node/deprecations/accordion-props/test-cases/theme.actual.js

@@ -0,0 +1,12 @@
+"use strict";
+
+fn({
+  MuiAccordion: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+      TransitionProps: {
+        unmountOnExit: true
+      }
+    }
+  }
+});

package/node/deprecations/accordion-props/test-cases/theme.expected.js

@@ -0,0 +1,16 @@
+"use strict";
+
+fn({
+  MuiAccordion: {
+    defaultProps: {
+      slots: {
+        transition: CustomTransition
+      },
+      slotProps: {
+        transition: {
+          unmountOnExit: true
+        }
+      }
+    }
+  }
+});

package/node/deprecations/all/deprecations-all.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = deprecationsAll;
+var _accordionProps = _interopRequireDefault(require("../accordion-props/accordion-props"));
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function deprecationsAll(file, api, options) {
+  file.source = (0, _accordionProps.default)(file, api, options);
+  return file.source;
+}

package/node/deprecations/all/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _deprecationsAll.default;
+  }
+});
+var _deprecationsAll = _interopRequireDefault(require("./deprecations-all"));

package/node/util/appendAttribute.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = appendAttribute;
+/**
+ * @param {import('jscodeshift')} j
+ * @param {{ target: import('jscodeshift').JSXElement; attributeName: string; expression: import('ast-types/gen/kinds').ExpressionKind | import('ast-types/gen/kinds').JSXEmptyExpressionKind; }} options
+ */
+function appendAttribute(j, options) {
+  const {
+    target,
+    attributeName,
+    expression
+  } = options;
+  target.openingElement.attributes.push(j.jsxAttribute(j.jsxIdentifier(attributeName), j.jsxExpressionContainer(expression)));
+}

package/node/util/assignObject.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = assignObject;
+/**
+ * Pushes an expression to a known object. handles local object and variable declaration.
+ *
+ * @param {import('jscodeshift')} j
+ * @param {{ target: import('jscodeshift').JSXAttribute; expression: import('ast-types/gen/kinds').ExpressionKind; key: string }} options
+ *
+ * @example push expression to `slots.transition` => <Component slots={{ transition: <expression> }} />
+ * @example push expression to `slots.transition` => <Component slots={{ ...slots, transition: <expression> }} />
+ */
+function assignObject(j, options) {
+  const {
+    target,
+    expression,
+    key
+  } = options;
+  if (target && target.type === 'JSXAttribute') {
+    const expContainer = /** @type import('jscodeshift').JSXExpressionContainer */target.value;
+    if (expContainer.expression.type === 'ObjectExpression') {
+      // case `<prop>={{ ... }}`
+      expContainer.expression.properties.push(j.objectProperty(j.identifier(key), expression));
+    } else if (expContainer.expression.type === 'Identifier') {
+      // case `<prop>={outerVariable}
+      expContainer.expression = j.objectExpression([j.spreadElement(j.identifier(expContainer.expression.name)), j.objectProperty(j.identifier(key), expression)]);
+    }
+  }
+}

package/node/util/findComponentJSX.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = findComponentJSX;
+/**
+ * Find all the JSXElements of a given component name.
+ *
+ * @param {import('jscodeshift')} j
+ * @param {{ root: import('jscodeshift').Collection; componentName: string }} options
+ * @param {(path: import('jscodeshift').ASTPath<import('jscodeshift').JSXElement>) => void} callback
+ *
+ */
+function findComponentJSX(j, options, callback) {
+  const {
+    root,
+    componentName
+  } = options;
+
+  // case 1: import ComponentName from '@mui/material/ComponentName';
+  // case 2: import { ComponentName } from '@mui/material';
+  // case 3: import { ComponentName as SomethingElse } from '@mui/material';
+
+  const importName = new Set();
+  root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(new RegExp(`^@mui/material/?(${componentName})?`))).forEach(path => {
+    path.node.specifiers.forEach(specifier => {
+      if (specifier.type === 'ImportDefaultSpecifier') {
+        importName.add(specifier.local.name);
+      }
+      if (specifier.type === 'ImportSpecifier' && specifier.imported.name === componentName) {
+        importName.add(specifier.local.name);
+      }
+    });
+  });
+  [...importName].forEach(name => {
+    root.findJSXElements(name).forEach(elementPath => {
+      callback(elementPath);
+    });
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.15.5",
+  "version": "5.15.7",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -24,9 +24,9 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.23.7",
-    "@babel/runtime": "^7.23.8",
-    "@babel/traverse": "^7.23.7",
+    "@babel/core": "^7.23.9",
+    "@babel/runtime": "^7.23.9",
+    "@babel/traverse": "^7.23.9",
     "jscodeshift": "^0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
     "yargs": "^17.7.2"