@mui/x-codemod 7.0.0-alpha.8 → 7.0.0-alpha.9

package/README.md

@@ -29,8 +29,8 @@ Options:
   --jscodeshift Pass options directly to jscodeshift                  [array]
 
 Examples:
-  npx @mui/x-codemod v6.0.0/preset-safe src
-  npx @mui/x-codemod v6.0.0/component-rename-prop src --
+  npx @mui/x-codemod@latest v6.0.0/preset-safe src
+  npx @mui/x-codemod@latest v6.0.0/component-rename-prop src --
   --component=DataGrid --from=prop --to=newProp
 ```
 
@@ -40,9 +40,9 @@ To pass more options directly to jscodeshift, use `--jscodeshift=...`. For examp
 
 ```bash
 // single option
-npx @mui/x-codemod --jscodeshift=--run-in-band
+npx @mui/x-codemod@next --jscodeshift=--run-in-band
 // multiple options
-npx @mui/x-codemod --jscodeshift=--cpus=1 --jscodeshift=--print --jscodeshift=--dry --jscodeshift=--verbose=2
+npx @mui/x-codemod@next --jscodeshift=--cpus=1 --jscodeshift=--print --jscodeshift=--dry --jscodeshift=--verbose=2
 ```
 
 See all available options [here](https://github.com/facebook/jscodeshift#usage-cli).
@@ -53,7 +53,7 @@ Options to [recast](https://github.com/benjamn/recast)'s printer can be provided
 through jscodeshift's `printOptions` command line argument
 
 ```bash
-npx @mui/x-codemod <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"double\"}'"
+npx @mui/x-codemod@next <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"double\"}'"
 ```
 
 ## v7.0.0
@@ -66,7 +66,7 @@ It runs codemods for both Data Grid and Date and Time Pickers packages.
 To run codemods for a specific package, refer to the respective section.
 
 ```bash
-npx @mui/x-codemod v7.0.0/preset-safe <path|folder>
+npx @mui/x-codemod@next v7.0.0/preset-safe <path|folder>
 ```
 
 The corresponding sub-sections are listed below
@@ -82,7 +82,7 @@ The corresponding sub-sections are listed below
 The `preset-safe` codemods for pickers.
 
 ```bash
-npx @mui/x-codemod v7.0.0/pickers/preset-safe <path|folder>
+npx @mui/x-codemod@next v7.0.0/pickers/preset-safe <path|folder>
 ```
 
 The list includes these transformers
@@ -108,7 +108,7 @@ This change only affects Date and Time Picker components.
 ```
 
 ```bash
-npx @mui/x-codemod v7.0.0/pickers/rename-components-to-slots <path>
+npx @mui/x-codemod@next v7.0.0/pickers/rename-components-to-slots <path>
 ```
 
 #### `rename-default-calendar-month-to-reference-date`
@@ -116,12 +116,12 @@ npx @mui/x-codemod v7.0.0/pickers/rename-components-to-slots <path>
 Replace the `defaultCalendarMonth` prop with the `referenceDate` prop.
 
 ```diff
-- <DateCalendar defaultCalendarMonth={dayjs('2022-04-01')};
-+ <DateCalendar referenceDate{dayjs('2022-04-01')} />
+-<DateCalendar defaultCalendarMonth={dayjs('2022-04-01')};
++<DateCalendar referenceDate{dayjs('2022-04-01')} />
 ```
 
 ```bash
-npx @mui/x-codemod v7.0.0/pickers/rename-default-calendar-month-to-reference-date <path>
+npx @mui/x-codemod@next v7.0.0/pickers/rename-default-calendar-month-to-reference-date <path>
 ```
 
 #### `rename-day-picker-classes`
@@ -129,12 +129,12 @@ npx @mui/x-codemod v7.0.0/pickers/rename-default-calendar-month-to-reference-dat
 Rename the `dayPickerClasses` variable to `dayCalendarClasses`.
 
 ```diff
-- import { dayPickerClasses } from '@mui/x-date-pickers/DateCalendar';
-+ import { dayCalendarClasses } from '@mui/x-date-pickers/DateCalendar';
+-import { dayPickerClasses } from '@mui/x-date-pickers/DateCalendar';
++import { dayCalendarClasses } from '@mui/x-date-pickers/DateCalendar';
 ```
 
 ```bash
-npx @mui/x-codemod v7.0.0/pickers/rename-day-picker-classes <path>
+npx @mui/x-codemod@next v7.0.0/pickers/rename-day-picker-classes <path>
 ```
 
 #### `rename-slots-types`
@@ -149,7 +149,7 @@ Replace types suffix `SlotsComponent` by `Slots` and `SlotsComponentsProps` by `
 ```
 
 ```bash
-npx @mui/x-codemod v7.0.0/pickers/rename-slots-types <path>
+npx @mui/x-codemod@next v7.0.0/pickers/rename-slots-types <path>
 ```
 
 ### Data Grid codemods
@@ -159,7 +159,7 @@ npx @mui/x-codemod v7.0.0/pickers/rename-slots-types <path>
 The `preset-safe` codemods for data grid.
 
 ```bash
-npx @mui/x-codemod v7.0.0/data-grid/preset-safe <path|folder>
+npx @mui/x-codemod@next v7.0.0/data-grid/preset-safe <path|folder>
 ```
 
 The list includes these transformers
@@ -176,14 +176,14 @@ This change only affects Data Grid components.
 ```diff
  <DataGrid
 -  components={{ Toolbar: CustomToolbar }}
-+  slots={{ toolbar: CustomToolbar }}
 -  componentsProps={{ toolbar: { showQuickFilter: true }}}
++  slots={{ toolbar: CustomToolbar }}
 +  slotProps={{ toolbar: { showQuickFilter: true }}}
  />;
 ```
 
 ```bash
-npx @mui/x-codemod v7.0.0/data-grid/rename-components-to-slots <path>
+npx @mui/x-codemod@next v7.0.0/data-grid/rename-components-to-slots <path>
 ```
 
 #### `rename-cell-selection-props`
@@ -193,16 +193,16 @@ Rename props related to `cellSelection` feature.
 ```diff
  <DataGridPremium
 -  unstable_cellSelection
+-  unstable_cellSelectionModel={{ 0: { id: true, currencyPair: true, price1M: false } }}
+-  unstable_onCellSelectionModelChange={() => {}}
 +  cellSelection
--  cellSelectionModel={{ 0: { id: true, currencyPair: true, price1M: false } }}
 +  cellSelectionModel={{ 0: { id: true, currencyPair: true, price1M: false } }}
--  unstable_onCellSelectionModelChange={() => {}}
 +  onCellSelectionModelChange={() => {}}
  />;
 ```
 
 ```bash
-npx @mui/x-codemod v7.0.0/data-grid/rename-cell-selection-props <path>
+npx @mui/x-codemod@next v7.0.0/data-grid/rename-cell-selection-props <path>
 ```
 
 ### Tree View codemods
@@ -212,12 +212,13 @@ npx @mui/x-codemod v7.0.0/data-grid/rename-cell-selection-props <path>
 The `preset-safe` codemods for tree view.
 
 ```bash
-npx @mui/x-codemod v7.0.0/tree-view/preset-safe <path|folder>
+npx @mui/x-codemod@next v7.0.0/tree-view/preset-safe <path|folder>
 ```
 
 The list includes these transformers
 
 - [`rename-tree-view-simple-tree-view`](#rename-tree-view-simple-tree-view)
+- [`rename-use-tree-item`](#rename-use-tree-item)
 - [`rename-expansion-props`](#rename-expansion-props)
 - [`rename-selection-props`](#rename-selection-props)
 
@@ -241,21 +242,45 @@ Renames the `TreeView` component to `SimpleTreeView`
    );
 ```
 
+#### `rename-use-tree-item`
+
+Renames the `useTreeItem` hook to `useTreeItemState`
+
+```diff
+-import { TreeItem, useTreeItem } from '@mui/x-tree-view/TreeItem';
++import { TreeItem, useTreeItemState } from '@mui/x-tree-view/TreeItem';
+
+ const CustomContent = React.forwardRef((props, ref) => {
+-  const { disabled } = useTreeItem(props.nodeId);
++  const { disabled } = useTreeItemState(props.nodeId);
+
+   // Render some UI
+ });
+
+ function App() {
+   return (
+     <SimpleTreeView>
+       <TreeItem ContentComponent={CustomContent} />
+     </SimpleTreeView>
+   )
+ }
+```
+
 #### `rename-expansion-props`
 
 Rename the expansion props
 
 ```diff
-  <TreeView
--   onNodeToggle={handleExpansionChange}
-+   onExpandedNodesChange={handleExpansionChange}
+ <TreeView
+-  onNodeToggle={handleExpansionChange}
++  onExpandedNodesChange={handleExpansionChange}
 
--   expanded={expandedNodes}
-+   expandedNodes={expandedNodes}
+-  expanded={expandedNodes}
++  expandedNodes={expandedNodes}
 
--   defaultExpanded={defaultExpandedNodes}
-+   defaultExpandedNodes={defaultExpandedNodes}
-  />
+-  defaultExpanded={defaultExpandedNodes}
++  defaultExpandedNodes={defaultExpandedNodes}
+ />
 ```
 
 #### `rename-selection-props`
@@ -263,16 +288,16 @@ Rename the expansion props
 Rename the selection props
 
 ```diff
-  <TreeView
--   onNodeSelect={handleSelectionChange}
-+   onSelectedNodesChange={handleSelectionChange}
+ <TreeView
+-  onNodeSelect={handleSelectionChange}
++  onSelectedNodesChange={handleSelectionChange}
 
--   selected={selectedNodes}
-+   selectedNodes={selectedNodes}
+-  selected={selectedNodes}
++  selectedNodes={selectedNodes}
 
--   defaultSelected={defaultSelectedNodes}
-+   defaultSelectedNodes={defaultSelectedNodes}
-  />
+-  defaultSelected={defaultSelectedNodes}
++  defaultSelectedNodes={defaultSelectedNodes}
+ />
 ```
 
 ## v6.0.0
@@ -285,7 +310,7 @@ It runs codemods for both Data Grid and Date and Time Pickers packages.
 To run codemods for a specific package, refer to the respective section.
 
 ```bash
-npx @mui/x-codemod v6.0.0/preset-safe <path|folder>
+npx @mui/x-codemod@latest v6.0.0/preset-safe <path|folder>
 ```
 
 The corresponding sub-sections are listed below
@@ -300,7 +325,7 @@ The corresponding sub-sections are listed below
 The `preset-safe` codemods for pickers.
 
 ```bash
-npx @mui/x-codemod v6.0.0/pickers/preset-safe <path|folder>
+npx @mui/x-codemod@latest v6.0.0/pickers/preset-safe <path|folder>
 ```
 
 The list includes these transformers
@@ -385,7 +410,7 @@ Renames the `locale` prop of the `LocalizationProvider` component into `adapterL
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/pickers/localization-provider-rename-locale <path>
+npx @mui/x-codemod@latest v6.0.0/pickers/localization-provider-rename-locale <path>
 ```
 
 #### `text-props-to-localeText`
@@ -402,7 +427,7 @@ Replace props used for localization such as `cancelText` to their corresponding
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/pickers/text-props-to-localeText <path>
+npx @mui/x-codemod@latest v6.0.0/pickers/text-props-to-localeText <path>
 ```
 
 If you were always using the same text value in all your components, consider moving those translation from the component to the `LocalizationProvider` by hand.
@@ -443,7 +468,7 @@ Replace props used for `Tabs` in DateTime pickers by `componentsProps.tabs` prop
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/pickers/replace-tabs-props <path>
+npx @mui/x-codemod@latest v6.0.0/pickers/replace-tabs-props <path>
 ```
 
 #### `replace-toolbar-props-by-slot`
@@ -469,7 +494,7 @@ Replace props used to customize the `Toolbar` in pickers by slots properties and
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/pickers/replace-toolbar-props-by-slot <path>
+npx @mui/x-codemod@latest v6.0.0/pickers/replace-toolbar-props-by-slot <path>
 ```
 
 #### `migrate-to-components-componentsProps`
@@ -519,7 +544,7 @@ Replace customization props by their equivalent `components` and `componentsProp
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/pickers/migrate-to-components-componentsProps <path>
+npx @mui/x-codemod@latest v6.0.0/pickers/migrate-to-components-componentsProps <path>
 ```
 
 #### `replace-arrows-button-slot`
@@ -545,7 +570,7 @@ Replace `LeftArrowButton` and `RightArrowButton` slots for navigation buttons by
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/pickers/replace-arrows-button-slot <path>
+npx @mui/x-codemod@latest v6.0.0/pickers/replace-arrows-button-slot <path>
 ```
 
 #### `rename-should-disable-time`
@@ -560,7 +585,7 @@ Replace `shouldDisableTime` by `shouldDisableClock`.
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/pickers/rename-should-disable-time <path>
+npx @mui/x-codemod@latest v6.0.0/pickers/rename-should-disable-time <path>
 ```
 
 #### `rename-inputFormat-prop`
@@ -575,7 +600,7 @@ Replace `inputFormat` prop with `format`.
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/pickers/rename-inputFormat-prop <path>
+npx @mui/x-codemod@latest v6.0.0/pickers/rename-inputFormat-prop <path>
 ```
 
 #### `rename-default-toolbar-title-localeText`
@@ -598,7 +623,7 @@ Rename toolbar related translation keys, removing `Default` part from them to be
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/pickers/rename-default-toolbar-title-localeText <path>
+npx @mui/x-codemod@latest v6.0.0/pickers/rename-default-toolbar-title-localeText <path>
 ```
 
 #### `rename-components-to-slots-pickers`
@@ -617,7 +642,7 @@ This change only affects Date and Time Pickers components.
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/pickers/rename-components-to-slots <path>
+npx @mui/x-codemod@latest v6.0.0/pickers/rename-components-to-slots <path>
 ```
 
 ### Data Grid codemods
@@ -627,7 +652,7 @@ npx @mui/x-codemod v6.0.0/pickers/rename-components-to-slots <path>
 The `preset-safe` codemods for data grid.
 
 ```bash
-npx @mui/x-codemod v6.0.0/data-grid/preset-safe <path|folder>
+npx @mui/x-codemod@latest v6.0.0/data-grid/preset-safe <path|folder>
 ```
 
 The list includes these transformers
@@ -662,7 +687,7 @@ Replace column menu items that have been renamed.
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/data-grid/column-menu-components-rename <path>
+npx @mui/x-codemod@latest v6.0.0/data-grid/column-menu-components-rename <path>
 ```
 
 If you are using `GridRowGroupingColumnMenuItems` and `GridRowGroupableColumnMenuItems` for grouping, consider fixing them manually as these imports are replaced by `GridColumnMenuGroupingItem` and may require some extra work to port.
@@ -689,7 +714,7 @@ Data Grid props that have been renamed.
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/data-grid/row-selection-props-rename <path>
+npx @mui/x-codemod@latest v6.0.0/data-grid/row-selection-props-rename <path>
 ```
 
 #### `rename-rowsPerPageOptions-prop`
@@ -704,7 +729,7 @@ Rename `rowsPerPageOptions` prop to `pageSizeOptions`.
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/data-grid/rename-rowsPerPageOptions-prop <path>
+npx @mui/x-codemod@latest v6.0.0/data-grid/rename-rowsPerPageOptions-prop <path>
 ```
 
 #### `remove-disableExtendRowFullWidth-prop`
@@ -718,7 +743,7 @@ Remove `disableExtendRowFullWidth` prop which is no longer supported.
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/data-grid/remove-disableExtendRowFullWidth-prop <path>
+npx @mui/x-codemod@latest v6.0.0/data-grid/remove-disableExtendRowFullWidth-prop <path>
 ```
 
 #### `rename-linkOperators-logicOperators`
@@ -773,7 +798,7 @@ Rename `linkOperators` related props to `logicOperators` and rename classes.
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/data-grid/rename-linkOperators-logicOperators <path>
+npx @mui/x-codemod@latest v6.0.0/data-grid/rename-linkOperators-logicOperators <path>
 ```
 
 #### `rename-filter-item-props`
@@ -814,7 +839,7 @@ Rename filter item props to the new values.
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/data-grid/rename-filter-item-props <path>
+npx @mui/x-codemod@latest v6.0.0/data-grid/rename-filter-item-props <path>
 ```
 
 #### `rename-selectors-and-events`
@@ -853,7 +878,7 @@ Rename selectors and events.
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/data-grid/rename-selectors-and-events <path>
+npx @mui/x-codemod@latest v6.0.0/data-grid/rename-selectors-and-events <path>
 ```
 
 #### `remove-stabilized-experimentalFeatures`
@@ -878,7 +903,7 @@ Remove feature flags for stabilized `experimentalFeatures`.
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/data-grid/remove-stabilized-experimentalFeatures <path>
+npx @mui/x-codemod@latest v6.0.0/data-grid/remove-stabilized-experimentalFeatures <path>
 ```
 
 #### `replace-onCellFocusOut-prop`
@@ -897,7 +922,7 @@ Replace `onCellFocusOut` prop with `componentsProps.cell.onBlur`.
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/data-grid/replace-onCellFocusOut-prop <path>
+npx @mui/x-codemod@latest v6.0.0/data-grid/replace-onCellFocusOut-prop <path>
 ```
 
 #### `rename-components-to-slots-data-grid`
@@ -916,7 +941,7 @@ This change only affects Data Grid components.
 ```
 
 ```bash
-npx @mui/x-codemod v6.0.0/data-grid/rename-components-to-slots <path>
+npx @mui/x-codemod@latest 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://mui.com/x/migration/migration-data-grid-v5/).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-codemod",
-  "version": "7.0.0-alpha.8",
+  "version": "7.0.0-alpha.9",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.23.7",
-    "@babel/runtime": "^7.23.7",
+    "@babel/runtime": "^7.23.8",
     "@babel/traverse": "^7.23.7",
     "jscodeshift": "0.13.1",
     "jscodeshift-add-imports": "^1.0.10",

package/v7.0.0/tree-view/preset-safe/index.js

@@ -7,10 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = transformer;
 var _renameExpansionProps = _interopRequireDefault(require("../rename-expansion-props"));
 var _renameSelectionProps = _interopRequireDefault(require("../rename-selection-props"));
+var _renameUseTreeItem = _interopRequireDefault(require("../rename-use-tree-item"));
 var _renameTreeViewSimpleTreeView = _interopRequireDefault(require("../rename-tree-view-simple-tree-view"));
 function transformer(file, api, options) {
   file.source = (0, _renameExpansionProps.default)(file, api, options);
   file.source = (0, _renameSelectionProps.default)(file, api, options);
+  file.source = (0, _renameUseTreeItem.default)(file, api, options);
   file.source = (0, _renameTreeViewSimpleTreeView.default)(file, api, options);
   return file.source;
 }

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

@@ -0,0 +1,28 @@
+"use strict";
+
+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);
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    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'));
+  return root.toSource(printOptions);
+}

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

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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');
+        });
+      });
+    });
+  });
+});