@mui/codemod 5.10.16 → 5.11.0

package/README.md

@@ -62,6 +62,27 @@ npx @mui/codemod <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"
 
 ### v5.0.0
 
+#### `joy-rename-components-to-slots`
+
+Renames the `components` and `componentsProps` props to `slots` and `slotProps`, respectively.
+
+This change only affects Joy UI components.
+
+```diff
+ <Autocomplete
+-  components={{ listbox: CustomListbox }}
++  slots={{ listbox: CustomListbox }}
+-  componentsProps={{ root: { className: 'root' }, listbox: { 'data-testid': 'listbox' } }}
++  slotProps={{ root: { className: 'root' }, listbox: { 'data-testid': 'listbox' } }}
+ />;
+```
+
+```sh
+npx @mui/codemod v5.0.0/joy-rename-components-to-slots <path>
+```
+
+The associated breaking change was done in [#34997](https://github.com/mui/material-ui/pull/34997).
+
 #### `date-pickers-moved-to-x`
 
 Rename the imports of date and time pickers from `@mui/lab` to `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`.

package/node/v5.0.0/joy-rename-components-to-slots.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+function transformComponentsProp(attributeNode) {
+  attributeNode.name.name = 'slots';
+  const valueExpression = attributeNode.value.expression;
+  if ((valueExpression == null ? void 0 : valueExpression.type) !== 'ObjectExpression') {
+    return;
+  }
+  valueExpression.properties.forEach(property => {
+    property.key.name = property.key.name[0].toLowerCase() + property.key.name.slice(1);
+    if (property.shorthand) {
+      property.shorthand = false;
+    }
+  });
+}
+function transformComponentsPropsProp(attributeNode) {
+  attributeNode.name.name = 'slotProps';
+}
+
+/**
+ * @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
+  }) => {
+    return node.source.value.startsWith('@mui/joy');
+  }).forEach(path => {
+    path.node.specifiers.forEach(node => {
+      // Process only Joy UI components
+      root.findJSXElements(node.local.name).forEach(elementPath => {
+        if (elementPath.node.type !== 'JSXElement') {
+          return;
+        }
+        elementPath.node.openingElement.attributes.forEach(elementNode => {
+          if (elementNode.type !== 'JSXAttribute') {
+            return;
+          }
+          switch (elementNode.name.name) {
+            case 'components':
+              transformComponentsProp(elementNode);
+              break;
+            case 'componentsProps':
+              transformComponentsPropsProp(elementNode);
+              break;
+            default:
+          }
+        });
+      });
+    });
+  });
+  const transformed = root.findJSXElements();
+  return transformed.toSource(printOptions);
+}

package/node/v5.0.0/joy-rename-components-to-slots.test/actual.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _joy = require("@mui/joy");
+var _Autocomplete = _interopRequireDefault(require("@mui/joy/Autocomplete"));
+var _Custom = _interopRequireDefault(require("components/Custom"));
+var _jsxRuntime = require("react/jsx-runtime");
+// the codemod should transform only Joy UI components;
+
+/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.Alert, {
+    components: {
+      Root,
+      Input: CustomInput
+    },
+    componentsProps: {
+      root: {
+        className: 'root'
+      },
+      input: {
+        'data-testid': 'input'
+      }
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
+    components: {
+      Root,
+      Input: CustomInput
+    },
+    componentsProps: {
+      root: {
+        className: 'root'
+      },
+      input: {
+        'data-testid': 'input'
+      }
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Custom.default, {
+    components: {
+      Root,
+      Input: CustomInput
+    },
+    componentsProps: {
+      root: {
+        className: 'root'
+      },
+      input: {
+        'data-testid': 'input'
+      }
+    }
+  })]
+});

package/node/v5.0.0/joy-rename-components-to-slots.test/expected.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _joy = require("@mui/joy");
+var _Autocomplete = _interopRequireDefault(require("@mui/joy/Autocomplete"));
+var _Custom = _interopRequireDefault(require("components/Custom"));
+var _jsxRuntime = require("react/jsx-runtime");
+// the codemod should transform only Joy UI components;
+
+/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.Alert, {
+    slots: {
+      root: Root,
+      input: CustomInput
+    },
+    slotProps: {
+      root: {
+        className: 'root'
+      },
+      input: {
+        'data-testid': 'input'
+      }
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
+    slots: {
+      root: Root,
+      input: CustomInput
+    },
+    slotProps: {
+      root: {
+        className: 'root'
+      },
+      input: {
+        'data-testid': 'input'
+      }
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Custom.default, {
+    components: {
+      Root,
+      Input: CustomInput
+    },
+    componentsProps: {
+      root: {
+        className: 'root'
+      },
+      input: {
+        'data-testid': 'input'
+      }
+    }
+  })]
+});

package/node/v5.0.0/theme-spacing.test/large-actual.js

@@ -23,7 +23,7 @@ var _KeyboardArrowRightRounded = _interopRequireDefault(require("@mui/icons-mate
 var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
 var _GlobalStyles = _interopRequireDefault(require("@mui/material/GlobalStyles"));
 var _styles = require("@mui/material/styles");
-var _constants = require("docs/src/modules/constants");
+var _config = require("docs/config");
 var _Link = _interopRequireDefault(require("docs/src/modules/components/Link"));
 var _i18n = require("docs/src/modules/utils/i18n");
 var _useLazyCSS = _interopRequireDefault(require("docs/src/modules/utils/useLazyCSS"));
@@ -250,7 +250,7 @@ function AppSearch() {
   const searchButtonRef = React.useRef(null);
   const [isOpen, setIsOpen] = React.useState(false);
   const [initialQuery, setInitialQuery] = React.useState(undefined);
-  const facetFilterLanguage = _constants.LANGUAGES_SSR.indexOf(userLanguage) !== -1 ? `language:${userLanguage}` : `language:en`;
+  const facetFilterLanguage = _config.LANGUAGES_SSR.indexOf(userLanguage) !== -1 ? `language:${userLanguage}` : `language:en`;
   const macOS = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
   const onOpen = React.useCallback(() => {
     setIsOpen(true);

package/node/v5.0.0/theme-spacing.test/large-expected.js

@@ -23,7 +23,7 @@ var _KeyboardArrowRightRounded = _interopRequireDefault(require("@mui/icons-mate
 var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
 var _GlobalStyles = _interopRequireDefault(require("@mui/material/GlobalStyles"));
 var _styles = require("@mui/material/styles");
-var _constants = require("docs/src/modules/constants");
+var _config = require("docs/config");
 var _Link = _interopRequireDefault(require("docs/src/modules/components/Link"));
 var _i18n = require("docs/src/modules/utils/i18n");
 var _useLazyCSS = _interopRequireDefault(require("docs/src/modules/utils/useLazyCSS"));
@@ -250,7 +250,7 @@ function AppSearch() {
   const searchButtonRef = React.useRef(null);
   const [isOpen, setIsOpen] = React.useState(false);
   const [initialQuery, setInitialQuery] = React.useState(undefined);
-  const facetFilterLanguage = _constants.LANGUAGES_SSR.indexOf(userLanguage) !== -1 ? `language:${userLanguage}` : `language:en`;
+  const facetFilterLanguage = _config.LANGUAGES_SSR.indexOf(userLanguage) !== -1 ? `language:${userLanguage}` : `language:en`;
   const macOS = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
   const onOpen = React.useCallback(() => {
     setIsOpen(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.10.16",
+  "version": "5.11.0",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -30,9 +30,9 @@
     "url": "https://opencollective.com/mui"
   },
   "dependencies": {
-    "@babel/core": "^7.20.2",
-    "@babel/runtime": "^7.20.1",
-    "@babel/traverse": "^7.20.1",
+    "@babel/core": "^7.20.5",
+    "@babel/runtime": "^7.20.6",
+    "@babel/traverse": "^7.20.5",
     "jscodeshift": "^0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
     "yargs": "^17.6.2"