@mui/codemod 5.15.9 → 5.15.11

package/node/deprecations/utils/replaceComponentsWithSlots.js

@@ -0,0 +1,184 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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"));
+var _appendAttribute = _interopRequireDefault(require("../../util/appendAttribute"));
+function componentsKeyToSlotsKey(str) {
+  return str[0].toLowerCase() + str.slice(1);
+}
+function replaceJsxComponentsProp(j, elementPath) {
+  const element = elementPath.node;
+  const index = element.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'components');
+  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, {
+        [componentsKeyToSlotsKey(prop.key.name)]: prop.value
+      });
+    }, {});
+    let hasNode = false;
+    element.openingElement.attributes.forEach(attr => {
+      var _attr$name;
+      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, {
+            [prop.key.name]: prop.value
+          });
+        }, {});
+        Object.entries(camelCaseComponents).forEach(([slot, value]) => {
+          if (!slots[slot]) {
+            (0, _assignObject.default)(j, {
+              target: attr,
+              key: slot,
+              expression: value
+            });
+          }
+        });
+      }
+    });
+    if (!hasNode) {
+      (0, _appendAttribute.default)(j, {
+        target: element,
+        attributeName: 'slots',
+        expression: j.objectExpression(Object.entries(camelCaseComponents).map(([slot, value]) => {
+          return j.objectProperty(j.identifier(slot), value);
+        }))
+      });
+    }
+  }
+}
+function replaceJsxComponentsPropsProp(j, element) {
+  const index = element.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'componentsProps');
+  if (index !== -1) {
+    const removed = element.openingElement.attributes.splice(index, 1);
+    let hasNode = false;
+    element.openingElement.attributes.forEach(attr => {
+      var _attr$name2;
+      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, {
+            [prop.key.name]: prop.value
+          });
+        }, {});
+        removed[0].value.expression.properties.forEach(prop => {
+          if (!slotProps[prop.key.name]) {
+            (0, _assignObject.default)(j, {
+              target: attr,
+              key: prop.key.name,
+              expression: prop.value
+            });
+          }
+        });
+      }
+    });
+    if (!hasNode) {
+      (0, _appendAttribute.default)(j, {
+        target: element,
+        attributeName: 'slotProps',
+        expression: removed[0].value.expression
+      });
+    }
+  }
+}
+function replaceDefaultPropsComponentsProp(j, defaultPropsPathCollection) {
+  defaultPropsPathCollection.find(j.ObjectProperty, {
+    key: {
+      name: 'components'
+    }
+  }).forEach(path => {
+    const {
+      properties: defaultPropsProperties
+    } = path.parent.value;
+    const components = path.value.value.properties.reduce((acc, prop) => {
+      return (0, _extends2.default)({}, 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, {
+        [prop.key.name]: prop.value
+      });
+    }, {}) : {};
+    const updatedSlots = j.objectExpression(Object.entries((0, _extends2.default)({}, components, slots)).map(([slot, value]) => {
+      return j.objectProperty(j.identifier(slot), value);
+    }));
+    if (existingSlots) {
+      existingSlots.value = updatedSlots;
+    } else {
+      defaultPropsProperties.push(j.property('init', j.identifier('slots'), updatedSlots));
+    }
+    path.prune();
+  });
+}
+function replaceDefaultPropsComponentsPropsProp(j, defaultPropsPathCollection) {
+  defaultPropsPathCollection.find(j.ObjectProperty, {
+    key: {
+      name: 'componentsProps'
+    }
+  }).forEach(path => {
+    const {
+      properties: defaultPropsProperties
+    } = path.parent.value;
+    const components = path.value.value.properties.reduce((acc, prop) => {
+      return (0, _extends2.default)({}, 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, {
+        [prop.key.name]: prop.value
+      });
+    }, {}) : {};
+    const updatedSlots = j.objectExpression(Object.entries((0, _extends2.default)({}, components, slots)).map(([slot, value]) => {
+      return j.objectProperty(j.identifier(slot), value);
+    }));
+    if (existingSlots) {
+      existingSlots.value = updatedSlots;
+    } else {
+      defaultPropsProperties.push(j.property('init', j.identifier('slotProps'), updatedSlots));
+    }
+    path.prune();
+  });
+}
+
+/**
+ * Replaces components and componentsProps props with slots and slotProps.
+ * Handles local object and variable declaration.
+ * If the slots prop exists, it will add the components to the slots.
+ * If there are duplicated values, the slots values will be used.
+ *
+ * @param {import('jscodeshift')} j
+ * @param {{ element: import('jscodeshift').JSXElement }} options
+ *
+ * @example <Component componentsProps={{ root: { 'testid': 'root-id'} }} /> => <Component slotProps={{ root: { 'testid': 'root-id'} }} />
+ */
+function replaceComponentsWithSlots(j, options) {
+  const {
+    root,
+    componentName
+  } = options;
+  (0, _findComponentJSX.default)(j, {
+    root,
+    componentName
+  }, elementPath => {
+    replaceJsxComponentsProp(j, elementPath);
+    replaceJsxComponentsPropsProp(j, elementPath.node);
+  });
+  const defaultPropsPathCollection = (0, _findComponentDefaultProps.default)(j, {
+    root,
+    componentName
+  });
+  replaceDefaultPropsComponentsProp(j, defaultPropsPathCollection);
+  replaceDefaultPropsComponentsPropsProp(j, defaultPropsPathCollection);
+}

package/node/util/findComponentDefaultProps.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = findComponentDefaultProps;
+/**
+ * Find all the default props path of a given component name.
+ *
+ * @param {import('jscodeshift')} j
+ * @param {{ root: import('jscodeshift').Collection; componentName: string }} options
+ * @returns {import('jscodeshift').Collection}
+ *
+ */
+function findComponentDefaultProps(j, options) {
+  const {
+    root,
+    componentName
+  } = options;
+  const defaultPropsPathCollection = root.find(j.ObjectProperty, {
+    key: {
+      name: `Mui${componentName}`
+    }
+  }).find(j.ObjectProperty, {
+    key: {
+      name: 'defaultProps'
+    }
+  });
+  return defaultPropsPathCollection;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.15.9",
+  "version": "5.15.11",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -29,6 +29,8 @@
     "@babel/traverse": "^7.23.9",
     "jscodeshift": "^0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
+    "postcss": "^8.4.33",
+    "postcss-cli": "^8.0.0",
     "yargs": "^17.7.2"
   },
   "devDependencies": {