@mui/x-codemod 7.0.0-alpha.9 → 7.0.0-beta.6

package/README.md

@@ -1,12 +1,12 @@
 # @mui/x-codemod
 
-> Codemod scripts for MUI X
+> Codemod scripts for MUI X
 
 [![npm version](https://img.shields.io/npm/v/@mui/x-codemod.svg?style=flat-square)](https://www.npmjs.com/package/@mui/x-codemod)
 [![npm downloads](https://img.shields.io/npm/dm/@mui/x-codemod.svg?style=flat-square)](https://www.npmjs.com/package/@mui/x-codemod)
 
 This repository contains a collection of codemod scripts based for use with
-[jscodeshift](https://github.com/facebook/jscodeshift) that help update MUI X APIs.
+[jscodeshift](https://github.com/facebook/jscodeshift) that help update MUI X APIs.
 
 ## Setup & run
 
@@ -221,6 +221,7 @@ The list includes these transformers
 - [`rename-use-tree-item`](#rename-use-tree-item)
 - [`rename-expansion-props`](#rename-expansion-props)
 - [`rename-selection-props`](#rename-selection-props)
+- [`replace-transition-props-by-slot`](#replace-transition-props-by-slot)
 
 #### `rename-tree-view-simple-tree-view`
 
@@ -300,6 +301,20 @@ Rename the selection props
  />
 ```
 
+#### `replace-transition-props-by-slot`
+
+Replace the `TransitionComponent` and `TransitionProps` components with the `groupTransition` slot:
+
+```diff
+ <TreeItem
+-  TransitionComponent={Fade}
++  slots={{ groupTransition: Fade }}
+
+-  TransitionProps={{ timeout: 600 }}
++  slotProps={{ groupTransition: { timeout: 600 } }}
+ />
+```
+
 ## v6.0.0
 
 ### 🚀 `preset-safe` for v6.0.0

package/package.json

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

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

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = transformer;
 var _renameExpansionProps = _interopRequireDefault(require("../rename-expansion-props"));
 var _renameSelectionProps = _interopRequireDefault(require("../rename-selection-props"));
+var _replaceTransitionPropsBySlot = _interopRequireDefault(require("../replace-transition-props-by-slot"));
 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, _replaceTransitionPropsBySlot.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/replace-transition-props-by-slot/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _addComponentsSlots = require("../../../util/addComponentsSlots");
+var _removeProps = _interopRequireDefault(require("../../../util/removeProps"));
+const propsToSlots = {
+  TransitionComponent: {
+    prop: 'slots',
+    path: 'groupTransition'
+  },
+  TransitionProps: {
+    prop: 'slotProps',
+    path: 'groupTransition'
+  }
+};
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  root.find(j.JSXElement).filter(path => path.value.openingElement.name.name === 'TreeItem').forEach(path => {
+    const attributesToTransform = j(path).find(j.JSXAttribute).filter(attribute => Object.keys(propsToSlots).includes(attribute.value.name.name));
+    attributesToTransform.forEach(attribute => {
+      const attributeName = attribute.value.name.name;
+
+      // Get the value in case it's:
+      // - prop={value}
+      // - prop="value"
+      // - prop (which means true)
+      let value = attribute.value.value?.type === 'JSXExpressionContainer' ? attribute.value.value.expression : attribute.value.value || j.booleanLiteral(true);
+      if (attributeName === 'showToolbar') {
+        if (value.type === 'BooleanLiteral' || value.type === 'Literal' && typeof value.value === 'boolean') {
+          value.value = !value.value;
+        } else {
+          value = j.unaryExpression('!', value);
+        }
+      }
+      (0, _addComponentsSlots.transformNestedProp)(path, propsToSlots[attributeName].prop, propsToSlots[attributeName].path, value, j);
+    });
+  });
+  (0, _removeProps.default)({
+    root,
+    componentNames: ['TreeItem'],
+    props: Object.keys(propsToSlots),
+    j
+  });
+  return root.toSource(printOptions);
+}