@mui/x-codemod 6.0.0-beta.3 → 6.0.0-beta.5

package/README.md

@@ -381,7 +381,7 @@ Rename toolbar related translation keys, removing `Default` part from them to be
 npx @mui/x-codemod v6.0.0/pickers/rename-default-toolbar-title-localeText <path>
 ```
 
-#### `rename-components-to-slots`
+#### `rename-components-to-slots-pickers`
 
 Renames the `components` and `componentsProps` props to `slots` and `slotProps`, respectively.
 
@@ -603,7 +603,7 @@ Rename selectors and events.
 
 ```diff
  function App() {
--  useGridApiEventHandler('selectionChange', handleEvent);
+-  useGridApiEventHandler(apiRef, 'selectionChange', handleEvent);
 -  apiRef.current.subscribeEvent('selectionChange', handleEvent);
 -  const selection = useGridSelector(apiRef, gridSelectionStateSelector);
 -  const sortedRowIds = useGridSelector(apiRef, gridVisibleSortedRowIdsSelector);
@@ -616,7 +616,7 @@ Rename selectors and events.
 -  const visibleGridColumns = useGridSelector(apiRef, visibleGridColumnsSelector);
 -  const filterableGridColumns = useGridSelector(apiRef, filterableGridColumnsSelector);
 -  const getGridNumericColumn = useGridSelector(apiRef, getGridNumericColumnOperators);
-+  useGridApiEventHandler('rowSelectionChange', handleEvent);
++  useGridApiEventHandler(apiRef, 'rowSelectionChange', handleEvent);
 +  apiRef.current.subscribeEvent('rowSelectionChange', handleEvent);
 +  const selection = useGridSelector(apiRef, gridRowSelectionStateSelector);
 +  const sortedRowIds = useGridSelector(apiRef, gridExpandedSortedRowIdsSelector);
@@ -680,4 +680,23 @@ Replace `onCellFocusOut` prop with `componentsProps.cell.onBlur`.
 npx @mui/x-codemod v6.0.0/data-grid/replace-onCellFocusOut-prop <path>
 ```
 
+#### `rename-components-to-slots-data-grid`
+
+Renames the `components` and `componentsProps` props to `slots` and `slotProps`, respectively.
+
+This change only affects data grid components.
+
+```diff
+ <DataGrid
+-  components={{ Toolbar: CustomToolbar }}
++  slots={{ toolbar: CustomToolbar }}
+-  componentsProps={{ actionBar: { actions: ['clear'] } }}
++  slotProps={{ actionBar: { actions: ['clear'] } }}
+ />;
+```
+
+```sh
+npx @mui/x-codemod v6.0.0/data-grid/rename-components-to-slots <path>
+```
+
 You can find more details about Data Grid breaking change in [the migration guide](https://next.mui.com/x/migration/migration-data-grid-v5/).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-codemod",
-  "version": "6.0.0-beta.3",
+  "version": "6.0.0-beta.5",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -36,7 +36,7 @@
     "@babel/traverse": "^7.20.13",
     "jscodeshift": "0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
-    "yargs": "^17.6.2"
+    "yargs": "^17.7.1"
   },
   "devDependencies": {
     "@types/jscodeshift": "^0.11.5"

package/v6.0.0/data-grid/rename-components-to-slots/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameIdentifiers = require("../../../util/renameIdentifiers");
+const preRequisites = {
+  components: ['DataGrid', 'DataGridPro', 'DataGridPremium'],
+  packageRegex: /@mui\/x-data-grid(-pro|-premium)?/
+};
+function transformComponentsProp(attributeNode) {
+  attributeNode.value.name.name = 'slots';
+  const valueExpression = attributeNode.value.value.expression;
+  if (!valueExpression || 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.value.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 || {
+    quote: 'single',
+    trailingComma: true
+  };
+  const isGridUsed = (0, _renameIdentifiers.checkPreRequisitesSatisfied)(j, root, preRequisites);
+  if (isGridUsed) {
+    root.find(j.JSXElement).filter(path => {
+      return preRequisites.components.includes(path.value.openingElement.name.name);
+    }).find(j.JSXAttribute).forEach(attribute => {
+      // Only remove props from components in componentNames. Not nested ones.
+      if (!preRequisites.components.includes(attribute.parent.value.name.name)) {
+        return;
+      }
+      if (attribute.value.name.name === 'components') {
+        transformComponentsProp(attribute);
+      } else if (attribute.value.name.name === 'componentsProps') {
+        transformComponentsPropsProp(attribute);
+      }
+    });
+  }
+  return root.toSource(printOptions);
+}

package/v6.0.0/data-grid/rename-linkOperators-logicOperators/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transform;
-var _renameCSSClasses = _interopRequireDefault(require("packages/x-codemod/src/util/renameCSSClasses"));
+var _renameCSSClasses = _interopRequireDefault(require("../../../util/renameCSSClasses"));
 var _renameIdentifiers = _interopRequireWildcard(require("../../../util/renameIdentifiers"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -14,7 +14,8 @@ const renamedIdentifiers = {
   linkOperatorInputProps: 'logicOperatorInputProps',
   linkOperator: 'logicOperator',
   linkOperators: 'logicOperators',
-  setFilterLinkOperator: 'setFilterLogicOperator'
+  setFilterLinkOperator: 'setFilterLogicOperator',
+  getRowIndex: 'getRowIndexRelativeToVisibleRows'
 };
 const PACKAGE_REGEXP = /@mui\/x-data-grid(-pro|-premium)?/;
 const GridComponents = ['DataGrid', 'DataGridPro', 'DataGridPremium'];
@@ -38,6 +39,14 @@ const preRequisiteUsages = {
     possiblePaths: ['componentsProps.filter'],
     components: GridComponents,
     packageRegex: PACKAGE_REGEXP
+  },
+  setFilterLinkOperator: {
+    components: GridComponents,
+    packageRegex: PACKAGE_REGEXP
+  },
+  getRowIndex: {
+    components: GridComponents,
+    packageRegex: PACKAGE_REGEXP
   }
 };
 const renamedLiterals = {

package/v6.0.0/data-grid/rename-selectors-and-events/index.js

@@ -41,9 +41,9 @@ function transformer(file, api, options) {
     root.find(j.Identifier).filter(path => !!renamedSelectors[path.node.name]).replaceWith(path => j.identifier(renamedSelectors[path.node.name]));
 
     // Rename the usage of renamed event literals
-    // - useGridApiEventHandler('selectionChange', handleEvent);
+    // - useGridApiEventHandler(apiRef, 'selectionChange', handleEvent);
     // - apiRef.current.subscribeEvent('selectionChange', handleEvent);
-    // + useGridApiEventHandler('rowSelectionChange', handleEvent);
+    // + useGridApiEventHandler(apiRef, 'rowSelectionChange', handleEvent);
     // + apiRef.current.subscribeEvent('rowSelectionChange', handleEvent);
     root.find(j.CallExpression).find(j.Literal).filter(path => !!renamedEvents[path.node.value]).replaceWith(path => j.literal(renamedEvents[path.node.value]));
   }