@mui/codemod 6.0.0-alpha.0 → 6.0.0-alpha.10

package/node/deprecations/tooltip-props/test-cases/actual.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  components: {
+    Arrow: ComponentsArrow,
+    Popper: ComponentsPopper,
+    Tooltip: ComponentsTooltip,
+    Transition: ComponentsTransition
+  },
+  componentsProps: {
+    arrow: componentsArrowProps,
+    popper: componentsPopperProps,
+    tooltip: componentsTooltipProps,
+    transition: componentsTransitionProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slots: {
+    tooltip: SlotsTooltip
+  },
+  components: {
+    Arrow: ComponentsArrow
+  },
+  slotProps: {
+    tooltip: slotsTooltipProps
+  },
+  componentsProps: {
+    arrow: componentsArrowProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slots: {
+    tooltip: SlotsTooltip,
+    arrow: SlotsArrow
+  },
+  components: {
+    Arrow: ComponentsArrow
+  },
+  slotProps: {
+    tooltip: slotsTooltipProps,
+    arrow: slotsArrowProps
+  },
+  componentsProps: {
+    arrow: componentsArrowProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slots: {
+    tooltip: SlotsTooltip,
+    arrow: SlotsArrow
+  },
+  components: {
+    Arrow: ComponentsArrow
+  },
+  slotProps: {
+    tooltip: slotsTooltipProps,
+    arrow: slotsArrowProps
+  },
+  componentsProps: {
+    arrow: componentsArrowProps,
+    tooltip: componentsTooltipProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slots: {
+    arrow: SlotsArrow,
+    popper: SlotsPopper,
+    tooltip: SlotsTooltip,
+    transition: SlotsTransition
+  },
+  components: {
+    Arrow: ComponentsArrow,
+    Popper: ComponentsPopper,
+    Tooltip: ComponentsTooltip,
+    Transition: ComponentsTransition
+  },
+  slotProps: {
+    arrow: slotsArrowProps,
+    popper: slotsPopperProps,
+    tooltip: slotsTooltipProps,
+    transition: slotsTransitionProps
+  },
+  componentsProps: {
+    arrow: componentsArrowProps,
+    popper: componentsPopperProps,
+    tooltip: componentsTooltipProps,
+    transition: componentsTransitionProps
+  }
+});

package/node/deprecations/tooltip-props/test-cases/expected.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slots: {
+    arrow: ComponentsArrow,
+    popper: ComponentsPopper,
+    tooltip: ComponentsTooltip,
+    transition: ComponentsTransition
+  },
+  slotProps: {
+    arrow: componentsArrowProps,
+    popper: componentsPopperProps,
+    tooltip: componentsTooltipProps,
+    transition: componentsTransitionProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slots: {
+    tooltip: SlotsTooltip,
+    arrow: ComponentsArrow
+  },
+  slotProps: {
+    tooltip: slotsTooltipProps,
+    arrow: componentsArrowProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slots: {
+    tooltip: SlotsTooltip,
+    arrow: SlotsArrow
+  },
+  slotProps: {
+    tooltip: slotsTooltipProps,
+    arrow: {
+      ...componentsArrowProps,
+      ...slotsArrowProps
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slots: {
+    tooltip: SlotsTooltip,
+    arrow: SlotsArrow
+  },
+  slotProps: {
+    arrow: {
+      ...componentsArrowProps,
+      ...slotsArrowProps
+    },
+    tooltip: {
+      ...componentsTooltipProps,
+      ...slotsTooltipProps
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slots: {
+    arrow: SlotsArrow,
+    popper: SlotsPopper,
+    tooltip: SlotsTooltip,
+    transition: SlotsTransition
+  },
+  slotProps: {
+    arrow: {
+      ...componentsArrowProps,
+      ...slotsArrowProps
+    },
+    popper: {
+      ...componentsPopperProps,
+      ...slotsPopperProps
+    },
+    tooltip: {
+      ...componentsTooltipProps,
+      ...slotsTooltipProps
+    },
+    transition: {
+      ...componentsTransitionProps,
+      ...slotsTransitionProps
+    }
+  }
+});

package/node/deprecations/tooltip-props/test-cases/theme.actual.js

@@ -0,0 +1,73 @@
+"use strict";
+
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      components: {
+        Arrow: ComponentsArrow
+      },
+      componentsProps: {
+        arrow: componentsArrowProps
+      }
+    }
+  }
+});
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      components: {
+        Arrow: ComponentsArrow
+      },
+      slots: {
+        tooltip: SlotsTooltip
+      },
+      componentsProps: {
+        arrow: componentsArrowProps
+      },
+      slotProps: {
+        tooltip: slotsTooltipProps
+      }
+    }
+  }
+});
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      components: {
+        Arrow: ComponentsArrow
+      },
+      slots: {
+        tooltip: SlotsTooltip,
+        arrow: SlotsArrow
+      },
+      componentsProps: {
+        arrow: componentsArrowProps
+      },
+      slotProps: {
+        tooltip: slotsTooltipProps,
+        arrow: slotsArrowProps
+      }
+    }
+  }
+});
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      components: {
+        Arrow: ComponentsArrow
+      },
+      slots: {
+        tooltip: SlotsTooltip,
+        arrow: SlotsArrow
+      },
+      componentsProps: {
+        arrow: componentsArrowProps,
+        tooltip: componentsTooltipProps
+      },
+      slotProps: {
+        tooltip: slotsTooltipProps,
+        arrow: slotsArrowProps
+      }
+    }
+  }
+});

package/node/deprecations/tooltip-props/test-cases/theme.expected.js

@@ -0,0 +1,65 @@
+"use strict";
+
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      slots: {
+        arrow: ComponentsArrow
+      },
+      slotProps: {
+        arrow: componentsArrowProps
+      }
+    }
+  }
+});
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      slots: {
+        arrow: ComponentsArrow,
+        tooltip: SlotsTooltip
+      },
+      slotProps: {
+        arrow: componentsArrowProps,
+        tooltip: slotsTooltipProps
+      }
+    }
+  }
+});
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      slots: {
+        arrow: SlotsArrow,
+        tooltip: SlotsTooltip
+      },
+      slotProps: {
+        arrow: {
+          ...componentsArrowProps,
+          ...slotsArrowProps
+        },
+        tooltip: slotsTooltipProps
+      }
+    }
+  }
+});
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      slots: {
+        arrow: SlotsArrow,
+        tooltip: SlotsTooltip
+      },
+      slotProps: {
+        arrow: {
+          ...componentsArrowProps,
+          ...slotsArrowProps
+        },
+        tooltip: {
+          ...componentsTooltipProps,
+          ...slotsTooltipProps
+        }
+      }
+    }
+  }
+});

package/node/deprecations/tooltip-props/tooltip-props.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _replaceComponentsWithSlots = _interopRequireDefault(require("../utils/replaceComponentsWithSlots"));
+/**
+ * @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;
+  (0, _replaceComponentsWithSlots.default)(j, {
+    root,
+    componentName: 'Tooltip'
+  });
+  return root.toSource(printOptions);
+}

package/node/deprecations/utils/movePropIntoSlotProps.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = movePropIntoSlotProps;
+var _findComponentJSX = _interopRequireDefault(require("../../util/findComponentJSX"));
+var _findComponentDefaultProps = _interopRequireDefault(require("../../util/findComponentDefaultProps"));
+var _assignObject = _interopRequireDefault(require("../../util/assignObject"));
+var _appendAttribute = _interopRequireDefault(require("../../util/appendAttribute"));
+function moveJsxPropIntoSlotProps(j, element, propName, slotName) {
+  const propIndex = element.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === propName);
+  if (propIndex !== -1) {
+    const removedValue = element.openingElement.attributes.splice(propIndex, 1)[0].value.expression;
+    let hasSlotProps = false;
+    element.openingElement.attributes.forEach(attr => {
+      var _attr$name;
+      if (((_attr$name = attr.name) == null ? void 0 : _attr$name.name) === 'slotProps') {
+        hasSlotProps = true;
+        const slots = attr.value.expression;
+        const slotIndex = slots.properties.findIndex(prop => {
+          var _prop$key;
+          return (prop == null || (_prop$key = prop.key) == null ? void 0 : _prop$key.name) === slotName;
+        });
+        if (slotIndex === -1) {
+          (0, _assignObject.default)(j, {
+            target: attr,
+            key: slotName,
+            expression: removedValue
+          });
+        } else {
+          const slotPropsSlotValue = slots.properties.splice(slotIndex, 1)[0].value;
+          (0, _assignObject.default)(j, {
+            target: attr,
+            key: slotName,
+            expression: j.objectExpression([j.spreadElement(removedValue), j.spreadElement(slotPropsSlotValue)])
+          });
+        }
+      }
+    });
+    if (!hasSlotProps) {
+      (0, _appendAttribute.default)(j, {
+        target: element,
+        attributeName: 'slotProps',
+        expression: j.objectExpression([j.objectProperty(j.identifier(slotName), removedValue)])
+      });
+    }
+  }
+}
+function moveDefaultPropsPropIntoslotProps(j, defaultPropsPathCollection, propName, slotName) {
+  defaultPropsPathCollection.find(j.ObjectProperty, {
+    key: {
+      name: propName
+    }
+  }).forEach(path => {
+    const removedValue = path.value.value;
+    const defaultProps = path.parent.value;
+    let hasSlotProps = false;
+    defaultProps.properties.forEach(property => {
+      var _property$key;
+      if (((_property$key = property.key) == null ? void 0 : _property$key.name) === 'slotProps') {
+        hasSlotProps = true;
+        const slotIndex = property.value.properties.findIndex(prop => {
+          var _prop$key2;
+          return (prop == null || (_prop$key2 = prop.key) == null ? void 0 : _prop$key2.name) === slotName;
+        });
+        if (slotIndex === -1) {
+          property.value.properties.push(j.objectProperty(j.identifier(slotName), removedValue));
+        } else {
+          const slotPropsSlotValue = property.value.properties.splice(slotIndex, 1)[0].value;
+          property.value.properties.push(j.objectProperty(j.identifier(slotName), j.objectExpression([j.spreadElement(removedValue), j.spreadElement(slotPropsSlotValue)])));
+        }
+      }
+    });
+    if (!hasSlotProps) {
+      defaultProps.properties.push(j.objectProperty(j.identifier('slotProps'), j.objectExpression([j.objectProperty(j.identifier(slotName), removedValue)])));
+    }
+    path.prune();
+  });
+}
+
+/**
+ * Moves prop into slotProps.
+ * If the slotProps prop exists, it will merge the prop into the slotProps.
+ * If there are duplicated values, the values will be spread.
+ *
+ * @param {import('jscodeshift')} j
+ * @param {{ root: import('jscodeshift').Collection; componentName: string, propName: string, slotName: string }} options
+ *
+ * @example <Component TransitionProps={value} /> => <Component slotProps={{ transition: value }} />
+ */
+function movePropIntoSlotProps(j, options) {
+  const {
+    root,
+    componentName,
+    propName,
+    slotName
+  } = options;
+  (0, _findComponentJSX.default)(j, {
+    root,
+    componentName
+  }, elementPath => {
+    moveJsxPropIntoSlotProps(j, elementPath.node, propName, slotName);
+  });
+  const defaultPropsPathCollection = (0, _findComponentDefaultProps.default)(j, {
+    root,
+    componentName
+  });
+  moveDefaultPropsPropIntoslotProps(j, defaultPropsPathCollection, propName, slotName);
+}

package/node/deprecations/utils/movePropIntoSlots.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = movePropIntoSlots;
+var _findComponentJSX = _interopRequireDefault(require("../../util/findComponentJSX"));
+var _findComponentDefaultProps = _interopRequireDefault(require("../../util/findComponentDefaultProps"));
+var _assignObject = _interopRequireDefault(require("../../util/assignObject"));
+var _appendAttribute = _interopRequireDefault(require("../../util/appendAttribute"));
+function moveJsxPropIntoSlots(j, element, propName, slotName) {
+  const index = element.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === propName);
+  if (index !== -1) {
+    const removedValue = element.openingElement.attributes.splice(index, 1)[0].value.expression;
+    let hasSlots = false;
+    element.openingElement.attributes.forEach(attr => {
+      var _attr$name;
+      if (((_attr$name = attr.name) == null ? void 0 : _attr$name.name) === 'slots') {
+        hasSlots = true;
+        const slotIndex = attr.value.expression.properties.findIndex(prop => {
+          var _prop$key;
+          return (prop == null || (_prop$key = prop.key) == null ? void 0 : _prop$key.name) === slotName;
+        });
+        if (slotIndex === -1) {
+          (0, _assignObject.default)(j, {
+            target: attr,
+            key: slotName,
+            expression: removedValue
+          });
+        }
+      }
+    });
+    if (!hasSlots) {
+      (0, _appendAttribute.default)(j, {
+        target: element,
+        attributeName: 'slots',
+        expression: j.objectExpression([j.objectProperty(j.identifier(slotName), removedValue)])
+      });
+    }
+  }
+}
+function moveDefaultPropsPropIntoSlots(j, defaultPropsPathCollection, propName, slotName) {
+  defaultPropsPathCollection.find(j.ObjectProperty, {
+    key: {
+      name: propName
+    }
+  }).forEach(path => {
+    const removedValue = path.value.value;
+    const defaultProps = path.parent.value;
+    let hasSlots = false;
+    defaultProps.properties.forEach(property => {
+      var _property$key;
+      if (((_property$key = property.key) == null ? void 0 : _property$key.name) === 'slots') {
+        hasSlots = true;
+        const slots = property.value;
+        const slotIndex = slots.properties.findIndex(prop => {
+          var _prop$key2;
+          return (prop == null || (_prop$key2 = prop.key) == null ? void 0 : _prop$key2.name) === slotName;
+        });
+        if (slotIndex === -1) {
+          slots.properties.push(j.objectProperty(j.identifier(slotName), removedValue));
+        }
+      }
+    });
+    if (!hasSlots) {
+      defaultProps.properties.push(j.property('init', j.identifier('slots'), j.objectExpression([j.objectProperty(j.identifier(slotName), removedValue)])));
+    }
+    path.prune();
+  });
+}
+
+/**
+ * Moves prop into slots.
+ * If the slots prop exists, it will add the prop to the slots.
+ * If there are duplicated values, the slots values will be used.
+ *
+ * @param {import('jscodeshift')} j
+ * @param {{ root: import('jscodeshift').Collection; componentName: string, propName: string, slotName: string }} options
+ *
+ * @example <Component TransitionComponent={CustomTransition} /> => <Component slots={{ transition: CustomTransition }} />
+ */
+function movePropIntoSlots(j, options) {
+  const {
+    root,
+    componentName,
+    propName,
+    slotName
+  } = options;
+  (0, _findComponentJSX.default)(j, {
+    root,
+    componentName
+  }, elementPath => {
+    moveJsxPropIntoSlots(j, elementPath.node, propName, slotName);
+  });
+  const defaultPropsPathCollection = (0, _findComponentDefaultProps.default)(j, {
+    root,
+    componentName
+  });
+  moveDefaultPropsPropIntoSlots(j, defaultPropsPathCollection, propName, slotName);
+}

package/node/deprecations/utils/replaceComponentsWithSlots.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = replaceComponentsWithSlots;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _findComponentJSX = _interopRequireDefault(require("../../util/findComponentJSX"));
 var _findComponentDefaultProps = _interopRequireDefault(require("../../util/findComponentDefaultProps"));
 var _assignObject = _interopRequireDefault(require("../../util/assignObject"));
@@ -19,9 +18,10 @@ function replaceJsxComponentsProp(j, elementPath) {
   if (index !== -1) {
     const removed = element.openingElement.attributes.splice(index, 1);
     const camelCaseComponents = removed[0].value.expression.properties.reduce((acc, prop) => {
-      return (0, _extends2.default)({}, acc, {
+      return {
+        ...acc,
         [componentsKeyToSlotsKey(prop.key.name)]: prop.value
-      });
+      };
     }, {});
     let hasNode = false;
     element.openingElement.attributes.forEach(attr => {
@@ -29,9 +29,10 @@ function replaceJsxComponentsProp(j, elementPath) {
       if (((_attr$name = attr.name) == null ? void 0 : _attr$name.name) === 'slots') {
         hasNode = true;
         const slots = attr.value.expression.properties.reduce((acc, prop) => {
-          return (0, _extends2.default)({}, acc, {
+          return {
+            ...acc,
             [prop.key.name]: prop.value
-          });
+          };
         }, {});
         Object.entries(camelCaseComponents).forEach(([slot, value]) => {
           if (!slots[slot]) {
@@ -65,9 +66,10 @@ function replaceJsxComponentsPropsProp(j, element) {
       if (((_attr$name2 = attr.name) == null ? void 0 : _attr$name2.name) === 'slotProps') {
         hasNode = true;
         const slotProps = attr.value.expression.properties.reduce((acc, prop) => {
-          return (0, _extends2.default)({}, acc, {
+          return {
+            ...acc,
             [prop.key.name]: prop.value
-          });
+          };
         }, {});
         removed[0].value.expression.properties.forEach(prop => {
           if (!slotProps[prop.key.name]) {
@@ -109,17 +111,22 @@ function replaceDefaultPropsComponentsProp(j, defaultPropsPathCollection) {
       properties: defaultPropsProperties
     } = path.parent.value;
     const components = path.value.value.properties.reduce((acc, prop) => {
-      return (0, _extends2.default)({}, acc, {
+      return {
+        ...acc,
         [componentsKeyToSlotsKey(prop.key.name)]: prop.value
-      });
+      };
     }, {});
     const existingSlots = defaultPropsProperties.find(prop => prop.key.name === 'slots');
     const slots = existingSlots ? existingSlots.value.properties.reduce((acc, prop) => {
-      return (0, _extends2.default)({}, acc, {
+      return {
+        ...acc,
         [prop.key.name]: prop.value
-      });
+      };
     }, {}) : {};
-    const updatedSlots = j.objectExpression(Object.entries((0, _extends2.default)({}, components, slots)).map(([slot, value]) => {
+    const updatedSlots = j.objectExpression(Object.entries({
+      ...components,
+      ...slots
+    }).map(([slot, value]) => {
       return j.objectProperty(j.identifier(slot), value);
     }));
     if (existingSlots) {
@@ -140,17 +147,22 @@ function replaceDefaultPropsComponentsPropsProp(j, defaultPropsPathCollection) {
       properties: defaultPropsProperties
     } = path.parent.value;
     const components = path.value.value.properties.reduce((acc, prop) => {
-      return (0, _extends2.default)({}, acc, {
+      return {
+        ...acc,
         [prop.key.name]: prop.value
-      });
+      };
     }, {});
     const existingSlots = defaultPropsProperties.find(prop => prop.key.name === 'slotProps');
     const slots = existingSlots ? existingSlots.value.properties.reduce((acc, prop) => {
-      return (0, _extends2.default)({}, acc, {
+      return {
+        ...acc,
         [prop.key.name]: components[prop.key.name] ? j.objectExpression([j.spreadElement(components[prop.key.name]), j.spreadElement(prop.value)]) : prop.value
-      });
+      };
     }, {}) : {};
-    const updatedSlots = j.objectExpression(Object.entries((0, _extends2.default)({}, components, slots)).map(([slot, value]) => {
+    const updatedSlots = j.objectExpression(Object.entries({
+      ...components,
+      ...slots
+    }).map(([slot, value]) => {
       return j.objectProperty(j.identifier(slot), value);
     }));
     if (existingSlots) {

package/node/util/getReturnExpression.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getReturnExpression;
+/**
+ * @param {import('ast-types').namedTypes.ArrowFunctionExpression | import('ast-types').namedTypes.FunctionExpression} node
+ */
+function getReturnExpression(node) {
+  let body = node.body;
+  if (body === 'BlockStatement') {
+    body = body.body;
+  }
+  if (Array.isArray(body)) {
+    var _body$find;
+    return (_body$find = body.find(statement => statement.type === 'ReturnStatement')) == null ? void 0 : _body$find.argument;
+  }
+  return body;
+}