Craete codemod for Joy renaming components and componentsProps to slots and slotProps

Author: hbjORbj

packages/mui-codemod/src/v5.0.0/joy-rename-components-to-slots.js

@@ -0,0 +1,57 @@
+function transformComponentsProp(attributeNode) {
+    attributeNode.name.name = 'slots';
+  
+    const valueExpression = attributeNode.value.expression;
+    if (valueExpression?.type !== 'ObjectExpression') {
+      return;
+    }
+  
+    valueExpression.properties.forEach((property) => {
+      property.key.name = property.key.name[0].toLowerCase() + property.key.name.slice(1);
+  
+      if (property.shorthand) {
+        property.shorthand = false;
+      }
+    });
+  }
+  
+  function transformComponentsPropsProp(attributeNode) {
+    attributeNode.name.name = 'slotProps';
+  }
+  
+  /**
+   * @param {import('jscodeshift').FileInfo} file
+   * @param {import('jscodeshift').API} api
+   */
+  export default function transformer(file, api, options) {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+    const printOptions = options.printOptions;
+  
+    const transformed = root.findJSXElements().forEach((path) => {
+      if (path.node.type !== "JSXElement") {
+        return;
+      }
+  
+      path.node.openingElement.attributes.forEach((node) => {
+        if (node.type !== 'JSXAttribute') {
+          return;
+        }
+  
+        switch (node.name.name) {
+          case 'components':
+            transformComponentsProp(node);
+            break;
+  
+          case 'componentsProps':
+            transformComponentsPropsProp(node);
+            break;
+  
+          default:
+        }
+      });
+    });
+  
+    return transformed.toSource(printOptions);
+  }
+  

packages/mui-codemod/src/v5.0.0/joy-rename-components-to-slots.test.js

@@ -0,0 +1,29 @@
+import path from 'path';
+import { expect } from 'chai';
+import jscodeshift from 'jscodeshift';
+import transform from './joy-rename-components-to-slots';
+import readFile from '../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('v5.0.0', () => {
+    describe('joy-rename-components-to-slots', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          {
+            source: read('./joy-rename-components-to-slots.test/actual.js'),
+            path: require.resolve('./joy-rename-components-to-slots.test/actual.js'),
+          },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./joy-rename-components-to-slots.test/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});

packages/mui-codemod/src/v5.0.0/joy-rename-components-to-slots.test/actual.js

@@ -0,0 +1,4 @@
+<Autocomplete
+  components={{ Root, Input: CustomInput }}
+  componentsProps={{ root: { className: 'root' }, input: { 'data-testid': 'input' } }}
+/>;

packages/mui-codemod/src/v5.0.0/joy-rename-components-to-slots.test/expected.js

@@ -0,0 +1,4 @@
+<Autocomplete
+  slots={{ root: Root, input: CustomInput }}
+  slotProps={{ root: { className: 'root' }, input: { 'data-testid': 'input' } }}
+/>;