@mui/x-codemod 7.0.0-alpha.5 → 7.0.0-alpha.7

package/README.md

@@ -13,7 +13,7 @@ This repository contains a collection of codemod scripts based for use with
 <!-- #default-branch-switch -->
 
 ```bash
-npx @mui/x-codemod <codemod> <paths...>
+npx @mui/x-codemod@next <codemod> <paths...>
 
 Applies a `@mui/x-codemod` to the specified paths
 
@@ -73,6 +73,7 @@ The corresponding sub-sections are listed below
 
 - [`preset-safe-for-pickers`](#preset-safe-for-pickers-v700)
 - [`preset-safe-for-data-grid`](#preset-safe-for-data-grid-v700)
+- [`preset-safe-for-tree-view`](#preset-safe-for-tree-view-v700)
 
 ### Pickers codemods
 
@@ -151,7 +152,7 @@ Replace types suffix `SlotsComponent` by `Slots` and `SlotsComponentsProps` by `
 npx @mui/x-codemod v7.0.0/pickers/rename-slots-types <path>
 ```
 
-### Data grid codemods
+### Data Grid codemods
 
 #### `preset-safe` for data grid v7.0.0
 
@@ -204,6 +205,76 @@ Rename props related to `cellSelection` feature.
 npx @mui/x-codemod v7.0.0/data-grid/rename-cell-selection-props <path>
 ```
 
+### Tree View codemods
+
+#### `preset-safe` for tree view v7.0.0
+
+The `preset-safe` codemods for tree view.
+
+```bash
+npx @mui/x-codemod 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-expansion-props`](#rename-expansion-props)
+- [`rename-selection-props`](#rename-selection-props)
+
+#### `rename-tree-view-simple-tree-view`
+
+Renames the `TreeView` component to `SimpleTreeView`
+
+```diff
+- import { TreeView } from '@mui/x-tree-view';
++ import { SimpleTreeView } from '@mui/x-tree-view';
+
+- import { TreeView } from '@mui/x-tree-view/TreeView';
++ import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+
+  return (
+-   <TreeView>
++   <SimpleTreeView>
+      <TreeItem nodeId="1" label="First item" />
+-   </TreeView>
++   </SimpleTreeView>
+  )
+```
+
+#### `rename-expansion-props`
+
+Rename the expansion props
+
+```diff
+  <TreeView
+-   onNodeToggle={handleExpansionChange}
++   onExpandedNodesChange={handleExpansionChange}
+
+-   expanded={expandedNodes}
++   expandedNodes={expandedNodes}
+
+-   defaultExpanded={defaultExpandedNodes}
++   defaultExpandedNodes={defaultExpandedNodes}
+  />
+```
+
+#### `rename-selection-props`
+
+Rename the selection props
+
+```diff
+  <TreeView
+-   onNodeSelect={handleSelectionChange}
++   onSelectedNodesChange={handleSelectionChange}
+
+-   selected={selectedNodes}
++   selectedNodes={selectedNodes}
+
+-   defaultSelected={defaultSelectedNodes}
++   defaultSelectedNodes={defaultSelectedNodes}
+  />
+```
+
 ## v6.0.0
 
 ### 🚀 `preset-safe` for v6.0.0
@@ -549,7 +620,7 @@ This change only affects Date and Time Pickers components.
 npx @mui/x-codemod v6.0.0/pickers/rename-components-to-slots <path>
 ```
 
-### Data grid codemods
+### Data Grid codemods
 
 #### `preset-safe` for data grid v6.0.0
 
@@ -598,7 +669,7 @@ If you are using `GridRowGroupingColumnMenuItems` and `GridRowGroupableColumnMen
 
 #### `row-selection-props-rename`
 
-Data grid props that have been renamed.
+Data Grid props that have been renamed.
 
 ```diff
  <DataGrid

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-codemod",
-  "version": "7.0.0-alpha.5",
+  "version": "7.0.0-alpha.7",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -32,9 +32,9 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.23.5",
-    "@babel/runtime": "^7.23.5",
-    "@babel/traverse": "^7.23.5",
+    "@babel/core": "^7.23.7",
+    "@babel/runtime": "^7.23.7",
+    "@babel/traverse": "^7.23.7",
     "jscodeshift": "0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
     "yargs": "^17.7.2"

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

@@ -7,8 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = transformer;
 var _presetSafe = _interopRequireDefault(require("../pickers/preset-safe"));
 var _presetSafe2 = _interopRequireDefault(require("../data-grid/preset-safe"));
+var _presetSafe3 = _interopRequireDefault(require("../tree-view/preset-safe"));
 function transformer(file, api, options) {
   file.source = (0, _presetSafe.default)(file, api, options);
   file.source = (0, _presetSafe2.default)(file, api, options);
+  file.source = (0, _presetSafe3.default)(file, api, options);
   return file.source;
 }

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

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameExpansionProps = _interopRequireDefault(require("../rename-expansion-props"));
+var _renameSelectionProps = _interopRequireDefault(require("../rename-selection-props"));
+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, _renameTreeViewSimpleTreeView.default)(file, api, options);
+  return file.source;
+}

package/v7.0.0/tree-view/rename-expansion-props/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameProps = _interopRequireDefault(require("../../../util/renameProps"));
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  return (0, _renameProps.default)({
+    root,
+    componentNames: ['TreeView', 'SimpleTreeView'],
+    props: {
+      expanded: 'expandedNodes',
+      defaultExpanded: 'defaultExpandedNodes',
+      onNodeToggle: 'onExpandedNodesChange'
+    },
+    j
+  }).toSource(printOptions);
+}

package/v7.0.0/tree-view/rename-selection-props/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameProps = _interopRequireDefault(require("../../../util/renameProps"));
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  return (0, _renameProps.default)({
+    root,
+    componentNames: ['TreeView', 'SimpleTreeView'],
+    props: {
+      selected: 'selectedNodes',
+      defaultSelected: 'defaultSelectedNodes',
+      onNodeSelect: 'onSelectedNodesChange'
+    },
+    j
+  }).toSource(printOptions);
+}

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

@@ -0,0 +1,47 @@
+"use strict";
+
+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);
+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 { 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
+    );
+  });
+
+  // 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-tree-view-simple-tree-view/rename-tree-view-simple-tree-view.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-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');
+        });
+      });
+    });
+  });
+});