@mui/x-codemod 7.20.0 → 7.23.6

package/README.md

@@ -227,9 +227,9 @@ npx @mui/x-codemod@latest v7.0.0/data-grid/remove-stabilized-experimentalFeature
 
 ### Tree View codemods
 
-#### `preset-safe` for tree view v7.0.0
+#### `preset-safe` for Tree View v7.0.0
 
-The `preset-safe` codemods for tree view.
+The `preset-safe` codemods for Tree View.
 
 ```bash
 npx @mui/x-codemod@latest v7.0.0/tree-view/preset-safe <path|folder>
@@ -247,7 +247,7 @@ The list includes these transformers
 
 #### `rename-tree-view-simple-tree-view`
 
-Renames the `TreeView` component to `SimpleTreeView`
+Renames the Tree View component to Simple Tree View
 
 ```diff
 -import { TreeView } from '@mui/x-tree-view';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-codemod",
-  "version": "7.20.0",
+  "version": "7.23.6",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -25,7 +25,7 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.25.7",
+    "@babel/core": "^7.25.8",
     "@babel/runtime": "^7.25.7",
     "@babel/traverse": "^7.25.7",
     "jscodeshift": "17.0.0",
@@ -33,8 +33,8 @@
   },
   "devDependencies": {
     "@types/jscodeshift": "^0.12.0",
-    "dayjs": "^1.11.11",
-    "moment-timezone": "^0.5.45",
+    "dayjs": "^1.11.13",
+    "moment-timezone": "^0.5.46",
     "rimraf": "^6.0.1"
   },
   "sideEffects": false,

package/util/renameImports.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renameImports = renameImports;
+const getPathStrFromPath = path => {
+  let cleanPath;
+  if (path.get('type').value === 'ImportDeclaration') {
+    cleanPath = path;
+  } else {
+    cleanPath = path.parentPath.parentPath;
+  }
+  return cleanPath.node.source.value?.toString() ?? '';
+};
+const getRelativeEndpointFromPathStr = (pathStr, packageNames) => {
+  return pathStr.replace(new RegExp(`^(${packageNames.join('|')})/`), '');
+};
+const getMatchingNestedImport = (path, parameters) => {
+  const pathStr = getPathStrFromPath(path);
+  const relativeEndpoint = getRelativeEndpointFromPathStr(pathStr, parameters.packageNames);
+  return parameters.imports.find(importConfig => importConfig.oldEndpoint === relativeEndpoint);
+};
+const getMatchingRootImport = (path, parameters) => {
+  return parameters.imports.find(importConfig => {
+    return !importConfig.skipRoot && importConfig.importsMapping.hasOwnProperty(path.node.imported.name);
+  });
+};
+function renameImports(parameters) {
+  const {
+    j,
+    root
+  } = parameters;
+  const renamedIdentifiersMap = {};
+  const importDeclarations = root
+  // Find all the import declarations (import { ... } from '...')
+  .find(j.ImportDeclaration);
+
+  // Rename the nested imports specifiers
+  // - import { A } from '@mui/x-date-pickers/A'
+  // + import { B } from '@mui/x-date-pickers/A'
+  const nestedImportRegExp = new RegExp(`^(${parameters.packageNames.join('|')})/(.*)$`);
+  importDeclarations
+  // Filter out the declarations that are not nested endpoints of the matching packages or that don't have any update to apply
+  .filter(path => {
+    const pathStr = getPathStrFromPath(path);
+    if (!pathStr.match(nestedImportRegExp)) {
+      return false;
+    }
+    return !!getMatchingNestedImport(path, parameters);
+  })
+  // Find all the import specifiers (extract A in import { A } from '...')
+  .find(j.ImportSpecifier)
+  // Filter out the specifiers that don't need to be updated
+  .filter(path => {
+    return getMatchingNestedImport(path, parameters).importsMapping.hasOwnProperty(path.node.imported.name);
+  })
+  // Rename the import specifiers
+  .replaceWith(path => {
+    const newName = getMatchingNestedImport(path, parameters).importsMapping[path.node.imported.name];
+
+    // If the import is alias, we keep the alias and don't rename the variable usage
+    const hasAlias = path.node.local?.name !== path.node.imported.name;
+    if (hasAlias) {
+      return j.importSpecifier(j.identifier(newName), j.identifier(path.node.local.name));
+    }
+    renamedIdentifiersMap[path.node.imported.name] = newName;
+    return j.importSpecifier(j.identifier(newName));
+  });
+
+  // Rename the root imports specifiers
+  // - import { A } from '@mui/x-date-pickers'
+  // + import { B } from '@mui/x-date-pickers'
+  const rootImportRegExp = new RegExp(`^(${parameters.packageNames.join('|')})$`);
+  importDeclarations
+  // Filter out the declarations that are not root endpoint of the matching packages
+  .filter(path => {
+    const pathStr = getPathStrFromPath(path);
+    return !!pathStr.match(rootImportRegExp);
+  }).find(j.ImportSpecifier).filter(path => {
+    return !!getMatchingRootImport(path, parameters);
+  })
+  // Rename the import specifiers
+  .replaceWith(path => {
+    const newName = getMatchingRootImport(path, parameters).importsMapping[path.node.imported.name];
+
+    // If the import is alias, we keep the alias and don't rename the variable usage
+    const hasAlias = path.node.local?.name !== path.node.imported.name;
+    if (hasAlias) {
+      return j.importSpecifier(j.identifier(newName), j.identifier(path.node.local.name));
+    }
+    renamedIdentifiersMap[path.node.imported.name] = newName;
+    return j.importSpecifier(j.identifier(newName));
+  });
+
+  // Rename the nested import declarations
+  // - import { B } from '@mui/x-date-pickers/A'
+  // + import { B } from '@mui/x-date-pickers/B'
+  importDeclarations
+  // Filter out the declarations that are not nested endpoints of the matching packages or that don't have any update to apply
+  .filter(path => {
+    const pathStr = getPathStrFromPath(path);
+    if (!pathStr.match(nestedImportRegExp)) {
+      return false;
+    }
+    return !!getMatchingNestedImport(path, parameters)?.newEndpoint;
+  }).replaceWith(path => {
+    const pathStr = getPathStrFromPath(path);
+    const oldEndpoint = getRelativeEndpointFromPathStr(pathStr, parameters.packageNames);
+    const newEndpoint = getMatchingNestedImport(path, parameters).newEndpoint;
+    const newPathStr = pathStr.replace(oldEndpoint, newEndpoint);
+    return j.importDeclaration(
+    // Copy over the existing import specifiers
+    path.node.specifiers,
+    // Replace the source with our new source
+    j.stringLiteral(newPathStr));
+  });
+
+  // Rename the import usage
+  // - <A />
+  // + <B />
+  root.find(j.Identifier).filter(path => {
+    return renamedIdentifiersMap.hasOwnProperty(path.node.name);
+  }).replaceWith(path => {
+    const newName = renamedIdentifiersMap[path.node.name];
+    return j.identifier(newName);
+  });
+  return root;
+}

package/v6.0.0/pickers/view-components-rename/index.js

@@ -4,51 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
-const SUB_PACKAGES = {
-  CalendarPicker: 'DateCalendar',
-  CalendarPickerSkeleton: 'DayCalendarSkeleton',
-  MonthPicker: 'MonthCalendar',
-  YearPicker: 'YearCalendar',
-  ClockPicker: 'TimeClock'
-};
-const VARIABLES = {
-  // Date Calendar
-  CalendarPicker: 'DateCalendar',
-  CalendarPickerProps: 'DateCalendarProps',
-  CalendarPickerSlotsComponent: 'DateCalendarSlotsComponent',
-  CalendarPickerSlotsComponentsProps: 'DateCalendarSlotsComponentsProps',
-  CalendarPickerClasses: 'DateCalendarClasses',
-  CalendarPickerClassKey: 'DateCalendarClassKey',
-  calendarPickerClasses: 'dateCalendarClasses',
-  getCalendarPickerUtilityClass: 'getDateCalendarUtilityClass',
-  // Month Calendar
-  MonthPicker: 'MonthCalendar',
-  MonthPickerProps: 'MonthCalendarProps',
-  MonthPickerClasses: 'MonthCalendarClasses',
-  MonthPickerClassKey: 'MonthCalendarClassKey',
-  monthPickerClasses: 'monthCalendarClasses',
-  getMonthPickerUtilityClass: 'getMonthCalendarUtilityClass',
-  YearPicker: 'YearCalendar',
-  YearPickerProps: 'YearCalendarProps',
-  YearPickerClasses: 'YearCalendarClasses',
-  YearPickerClassKey: 'YearCalendarClassKey',
-  yearPickerClasses: 'yearCalendarClasses',
-  getYearPickerUtilityClass: 'getYearCalendarUtilityClass',
-  ClockPicker: 'TimeClock',
-  ClockPickerProps: 'TimeClockProps',
-  ClockPickerClasses: 'TimeClockClasses',
-  ClockPickerClassKey: 'TimeClockClassKey',
-  clockPickerClasses: 'timeClockClasses',
-  getClockPickerUtilityClass: 'getTimeClockUtilityClass',
-  CalendarPickerSkeleton: 'DayCalendarSkeleton',
-  CalendarPickerSkeletonProps: 'DayCalendarSkeletonProps',
-  CalendarPickerSkeletonClasses: 'DayCalendarSkeletonClasses',
-  CalendarPickerSkeletonClassKey: 'DayCalendarSkeletonClassKey',
-  calendarPickerSkeletonClasses: 'dayCalendarSkeletonClasses',
-  getCalendarPickerSkeletonUtilityClass: 'getDayCalendarSkeletonUtilityClass'
-};
-const PACKAGE_REGEXP = /@mui\/x-date-pickers(-pro|)(\/(.*)|)/;
-const matchImport = path => (path.node.source.value?.toString() ?? '').match(PACKAGE_REGEXP);
+var _renameImports = require("../../../util/renameImports");
 function transformer(file, api, options) {
   const j = api.jscodeshift;
   const root = j(file.source);
@@ -56,28 +12,68 @@ function transformer(file, api, options) {
     quote: 'single',
     trailingComma: true
   };
-  const matchingImports = root.find(j.ImportDeclaration).filter(path => !!matchImport(path));
-
-  // Rename the import specifiers
-  // - import { MonthPicker } from '@mui/x-date-pickers/MonthPicker'
-  // + import { MonthCalendar } from '@mui/x-date-pickers/MonthPicker'
-  matchingImports.find(j.ImportSpecifier).filter(path => VARIABLES.hasOwnProperty(path.node.imported.name)).replaceWith(path => j.importSpecifier(j.identifier(VARIABLES[path.node.imported.name])));
-
-  // Rename the nested import declarations
-  // - import {} from '@mui/x-date-pickers/MonthPicker'
-  // + import {} from '@mui/x-date-pickers/MonthCalendar'
-  matchingImports.filter(path => SUB_PACKAGES.hasOwnProperty(matchImport(path)?.[3] ?? '')).replaceWith(path => {
-    const subPackage = matchImport(path)[3];
-    const importPath = path.node.source.value?.toString() ?? '';
-    return j.importDeclaration(path.node.specifiers,
-    // copy over the existing import specifiers
-    j.stringLiteral(importPath.replace(subPackage, SUB_PACKAGES[subPackage])) // Replace the source with our new source
-    );
+  (0, _renameImports.renameImports)({
+    j,
+    root,
+    packageNames: ['@mui/x-date-pickers', '@mui/x-date-pickers-pro'],
+    imports: [{
+      oldEndpoint: 'CalendarPicker',
+      newEndpoint: 'DateCalendar',
+      importsMapping: {
+        CalendarPicker: 'DateCalendar',
+        CalendarPickerProps: 'DateCalendarProps',
+        CalendarPickerSlotsComponent: 'DateCalendarSlotsComponent',
+        CalendarPickerSlotsComponentsProps: 'DateCalendarSlotsComponentsProps',
+        CalendarPickerClasses: 'DateCalendarClasses',
+        CalendarPickerClassKey: 'DateCalendarClassKey',
+        calendarPickerClasses: 'dateCalendarClasses',
+        getCalendarPickerUtilityClass: 'getDateCalendarUtilityClass'
+      }
+    }, {
+      oldEndpoint: 'MonthPicker',
+      newEndpoint: 'MonthCalendar',
+      importsMapping: {
+        MonthPicker: 'MonthCalendar',
+        MonthPickerProps: 'MonthCalendarProps',
+        MonthPickerClasses: 'MonthCalendarClasses',
+        MonthPickerClassKey: 'MonthCalendarClassKey',
+        monthPickerClasses: 'monthCalendarClasses',
+        getMonthPickerUtilityClass: 'getMonthCalendarUtilityClass'
+      }
+    }, {
+      oldEndpoint: 'YearPicker',
+      newEndpoint: 'YearCalendar',
+      importsMapping: {
+        YearPicker: 'YearCalendar',
+        YearPickerProps: 'YearCalendarProps',
+        YearPickerClasses: 'YearCalendarClasses',
+        YearPickerClassKey: 'YearCalendarClassKey',
+        yearPickerClasses: 'yearCalendarClasses',
+        getYearPickerUtilityClass: 'getYearCalendarUtilityClass'
+      }
+    }, {
+      oldEndpoint: 'ClockPicker',
+      newEndpoint: 'TimeClock',
+      importsMapping: {
+        ClockPicker: 'TimeClock',
+        ClockPickerProps: 'TimeClockProps',
+        ClockPickerClasses: 'TimeClockClasses',
+        ClockPickerClassKey: 'TimeClockClassKey',
+        clockPickerClasses: 'timeClockClasses',
+        getClockPickerUtilityClass: 'getTimeClockUtilityClass'
+      }
+    }, {
+      oldEndpoint: 'CalendarPickerSkeleton',
+      newEndpoint: 'DayCalendarSkeleton',
+      importsMapping: {
+        CalendarPickerSkeleton: 'DayCalendarSkeleton',
+        CalendarPickerSkeletonProps: 'DayCalendarSkeletonProps',
+        CalendarPickerSkeletonClasses: 'DayCalendarSkeletonClasses',
+        CalendarPickerSkeletonClassKey: 'DayCalendarSkeletonClassKey',
+        calendarPickerSkeletonClasses: 'dayCalendarSkeletonClasses',
+        getCalendarPickerSkeletonUtilityClass: 'getDayCalendarSkeletonUtilityClass'
+      }
+    }]
   });
-
-  // Rename the import usage
-  // - <CalendarPicker />
-  // + <DateCalendar />
-  root.find(j.Identifier).filter(path => VARIABLES.hasOwnProperty(path.node.name)).replaceWith(path => j.identifier(VARIABLES[path.node.name]));
   return root.toSource(printOptions);
 }

package/v7.0.0/tree-view/rename-tree-view-simple-tree-view/index.js

@@ -4,16 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
-const VARIABLES = {
-  TreeView: 'SimpleTreeView',
-  TreeViewProps: 'SimpleTreeViewProps',
-  TreeViewClasses: 'SimpleTreeViewClasses',
-  TreeViewClassKey: 'SimpleTreeViewClassKey',
-  treeViewClasses: 'simpleTreeViewClasses',
-  getTreeViewUtilityClass: 'getSimpleTreeViewUtilityClass'
-};
-const PACKAGE_REGEXP = /@mui\/x-tree-view(\/(.*)|)/;
-const matchImport = path => (path.node.source.value?.toString() ?? '').match(PACKAGE_REGEXP);
+var _renameImports = require("../../../util/renameImports");
 function transformer(file, api, options) {
   const j = api.jscodeshift;
   const root = j(file.source);
@@ -21,27 +12,22 @@ function transformer(file, api, options) {
     quote: 'single',
     trailingComma: true
   };
-  const matchingImports = root.find(j.ImportDeclaration).filter(path => !!matchImport(path));
-
-  // Rename the import specifiers
-  // - import { TreeView } from '@mui/x-tree-view/TreeView'
-  // + import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'
-  matchingImports.find(j.ImportSpecifier).filter(path => VARIABLES.hasOwnProperty(path.node.imported.name)).replaceWith(path => j.importSpecifier(j.identifier(VARIABLES[path.node.imported.name])));
-
-  // Rename the nested import declarations
-  // - import {} from '@mui/x-tree-view/TreeView'
-  // + import {} from '@mui/x-tree-view/SimpleTreeView'
-  matchingImports.filter(path => matchImport(path)?.[2] === 'TreeView').replaceWith(path => {
-    const importPath = path.node.source.value?.toString() ?? '';
-    return j.importDeclaration(path.node.specifiers,
-    // copy over the existing import specifiers
-    j.stringLiteral(importPath.replace('TreeView', 'SimpleTreeView')) // Replace the source with our new source
-    );
+  (0, _renameImports.renameImports)({
+    j,
+    root,
+    packageNames: ['@mui/x-tree-view'],
+    imports: [{
+      oldEndpoint: 'TreeView',
+      newEndpoint: 'SimpleTreeView',
+      importsMapping: {
+        TreeView: 'SimpleTreeView',
+        TreeViewProps: 'SimpleTreeViewProps',
+        TreeViewClasses: 'SimpleTreeViewClasses',
+        TreeViewClassKey: 'SimpleTreeViewClassKey',
+        treeViewClasses: 'simpleTreeViewClasses',
+        getTreeViewUtilityClass: 'getSimpleTreeViewUtilityClass'
+      }
+    }]
   });
-
-  // Rename the import usage
-  // - <TreeView />
-  // + <SimpleTreeView />
-  root.find(j.Identifier).filter(path => VARIABLES.hasOwnProperty(path.node.name)).replaceWith(path => j.identifier(VARIABLES[path.node.name]));
   return root.toSource(printOptions);
 }

package/v7.0.0/tree-view/rename-use-tree-item/index.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
-const PACKAGE_REGEXP = /@mui\/x-tree-view(\/TreeItem|)/;
-const matchImport = path => (path.node.source.value?.toString() ?? '').match(PACKAGE_REGEXP);
+var _renameImports = require("../../../util/renameImports");
 function transformer(file, api, options) {
   const j = api.jscodeshift;
   const root = j(file.source);
@@ -13,16 +12,16 @@ function transformer(file, api, options) {
     quote: 'single',
     trailingComma: true
   };
-  const matchingImports = root.find(j.ImportDeclaration).filter(path => !!matchImport(path));
-
-  // Rename the import specifiers
-  // - import { useTreeItem } from '@mui/x-tree-view/TreeItem'
-  // + import { useTreeItemState } from '@mui/x-tree-view/TreeItem'
-  matchingImports.find(j.ImportSpecifier).filter(path => path.node.imported.name === 'useTreeItem').replaceWith(j.importSpecifier(j.identifier('useTreeItemState')));
-
-  // Rename the import usage
-  // - useTreeItem(nodeId);
-  // + useTreeItemState(nodeId)
-  root.find(j.Identifier).filter(path => path.node.name === 'useTreeItem').replaceWith(j.identifier('useTreeItemState'));
+  (0, _renameImports.renameImports)({
+    j,
+    root,
+    packageNames: ['@mui/x-tree-view'],
+    imports: [{
+      oldEndpoint: 'TreeItem',
+      importsMapping: {
+        useTreeItem: 'useTreeItemState'
+      }
+    }]
+  });
   return root.toSource(printOptions);
 }

package/v7.0.0/tree-view/rename-tree-view-simple-tree-view/rename-tree-view-simple-tree-view.js

@@ -1,40 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _path = _interopRequireDefault(require("path"));
-var _chai = require("chai");
-var _jscodeshift = _interopRequireDefault(require("jscodeshift"));
-var _ = _interopRequireDefault(require("."));
-var _readFile = _interopRequireDefault(require("../../../util/readFile"));
-function read(fileName) {
-  return (0, _readFile.default)(_path.default.join(__dirname, fileName));
-}
-const TEST_FILES = ['nested-imports', 'root-imports'];
-describe('v7.0.0/tree-view', () => {
-  describe('rename-tree-view-simple-tree-view', () => {
-    TEST_FILES.forEach(testFile => {
-      const actualPath = `./actual-${testFile}.spec.tsx`;
-      const expectedPath = `./expected-${testFile}.spec.tsx`;
-      describe(`${testFile.replace(/-/g, ' ')}`, () => {
-        it('transforms imports as needed', () => {
-          const actual = (0, _.default)({
-            source: read(actualPath)
-          }, {
-            jscodeshift: _jscodeshift.default.withParser('tsx')
-          }, {});
-          const expected = read(expectedPath);
-          (0, _chai.expect)(actual).to.equal(expected, 'The transformed version should be correct');
-        });
-        it('should be idempotent', () => {
-          const actual = (0, _.default)({
-            source: read(expectedPath)
-          }, {
-            jscodeshift: _jscodeshift.default.withParser('tsx')
-          }, {});
-          const expected = read(expectedPath);
-          (0, _chai.expect)(actual).to.equal(expected, 'The transformed version should be correct');
-        });
-      });
-    });
-  });
-});

package/v7.0.0/tree-view/rename-use-tree-item/rename-use-tree-item.js

@@ -1,40 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _path = _interopRequireDefault(require("path"));
-var _chai = require("chai");
-var _jscodeshift = _interopRequireDefault(require("jscodeshift"));
-var _ = _interopRequireDefault(require("."));
-var _readFile = _interopRequireDefault(require("../../../util/readFile"));
-function read(fileName) {
-  return (0, _readFile.default)(_path.default.join(__dirname, fileName));
-}
-const TEST_FILES = ['nested-imports', 'root-imports'];
-describe('v7.0.0/tree-view', () => {
-  describe('rename-use-tree-item', () => {
-    TEST_FILES.forEach(testFile => {
-      const actualPath = `./actual-${testFile}.spec.tsx`;
-      const expectedPath = `./expected-${testFile}.spec.tsx`;
-      describe(`${testFile.replace(/-/g, ' ')}`, () => {
-        it('transforms imports as needed', () => {
-          const actual = (0, _.default)({
-            source: read(actualPath)
-          }, {
-            jscodeshift: _jscodeshift.default.withParser('tsx')
-          }, {});
-          const expected = read(expectedPath);
-          (0, _chai.expect)(actual).to.equal(expected, 'The transformed version should be correct');
-        });
-        it('should be idempotent', () => {
-          const actual = (0, _.default)({
-            source: read(expectedPath)
-          }, {
-            jscodeshift: _jscodeshift.default.withParser('tsx')
-          }, {});
-          const expected = read(expectedPath);
-          (0, _chai.expect)(actual).to.equal(expected, 'The transformed version should be correct');
-        });
-      });
-    });
-  });
-});