@mui/codemod 5.12.0 → 5.12.2

package/README.md

@@ -62,6 +62,21 @@ npx @mui/codemod <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"
 
 ### v5.0.0
 
+#### `base-remove-component-prop`
+
+Remove `component` prop from all Base UI components by transferring its value into `slots.root`.
+
+This change only affects Base UI components.
+
+```diff
+-  <Input component={CustomRoot} />
++  <Input slots={{ root: CustomRoot }} />
+```
+
+```sh
+npx @mui/codemod v5.0.0/base-remove-component-prop <path>
+```
+
 #### `rename-css-variables`
 
 Updates the names of the CSS variables of the Joy UI components to adapt to the new naming standards of the CSS variables for components.

package/node/v5.0.0/base-remove-component-prop.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+/**
+ * @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;
+  const transformed = root.find(j.ImportDeclaration)
+  // Process only Base UI components
+  .filter(({
+    node
+  }) => node.source.value.startsWith('@mui/base')).forEach(path => {
+    path.node.specifiers.forEach(elementNode => {
+      root.findJSXElements(elementNode.local.name).forEach(elementPath => {
+        if (elementPath.node.type !== 'JSXElement') {
+          return;
+        }
+        const attributeNodes = [];
+        let slotPropNodeInserted = false;
+        let slotsPropNode;
+        elementPath.node.openingElement.attributes.forEach(attributeNode => {
+          if (attributeNode.type !== 'JSXAttribute' && attributeNode.type !== 'JSXSpreadAttribute') {
+            return;
+          }
+          if (attributeNode.type === 'JSXSpreadAttribute') {
+            attributeNodes.push(attributeNode);
+            return;
+          }
+          const attributeName = attributeNode.name.name;
+          if (attributeName !== 'component' && attributeName !== 'slots') {
+            attributeNodes.push(attributeNode);
+            return;
+          }
+          if (attributeName === 'component') {
+            const valueNode = attributeNode.value.expression || attributeNode.value;
+            const rootObject = j.objectProperty(j.identifier('root'), valueNode);
+            if (slotsPropNode && slotsPropNode.value.expression) {
+              slotsPropNode.value.expression.properties.push(rootObject);
+            } else {
+              slotsPropNode = j.jsxAttribute(j.jsxIdentifier('slots'), j.jsxExpressionContainer(j.objectExpression([rootObject])));
+              if (!slotPropNodeInserted) {
+                slotPropNodeInserted = true;
+                attributeNodes.push(slotsPropNode);
+              }
+            }
+            if (file.path.endsWith('.ts') || file.path.endsWith('.tsx')) {
+              if (valueNode.type === 'Literal' && valueNode.value && valueNode.raw) {
+                elementPath.node.openingElement.name.name += `<${valueNode.raw}>`;
+              } else if (valueNode.type === 'Identifier' && valueNode.name) {
+                elementPath.node.openingElement.name.name += `<typeof ${valueNode.name}>`;
+              }
+            }
+          }
+          if (attributeName === 'slots') {
+            if (slotsPropNode && slotsPropNode.value.expression && attributeNode.value.expression) {
+              slotsPropNode.value.expression.properties = [...slotsPropNode.value.expression.properties, ...attributeNode.value.expression.properties];
+            } else {
+              slotsPropNode = attributeNode;
+            }
+            if (!slotPropNodeInserted) {
+              slotPropNodeInserted = true;
+              attributeNodes.push(slotsPropNode);
+            }
+          }
+        });
+        elementPath.node.openingElement.attributes = attributeNodes;
+      });
+    });
+  });
+  return transformed.toSource(printOptions);
+}

package/node/v5.0.0/base-remove-component-prop.test/actual.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _Input = _interopRequireDefault(require("@mui/material/Input"));
+var _Input2 = _interopRequireDefault(require("@mui/base/Input"));
+var _Switch = _interopRequireDefault(require("@mui/base/Switch"));
+var _Badge = _interopRequireDefault(require("@mui/base/Badge"));
+var _jsxRuntime = require("react/jsx-runtime");
+// @ts-nocheck
+
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
+  component: CustomRoot
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input2.default, {
+  component: CustomRoot
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input2.default, (0, _extends2.default)({
+  component: CustomRoot
+}, others));
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, {
+  component: CustomRoot,
+  randomProp: "1",
+  randomProp2: "2",
+  randomProp3: "3",
+  slotProps: {
+    root: {
+      className: 'root'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+  slots: {
+    badge: CustomBadge
+  },
+  component: CustomRoot,
+  randomProp: "1",
+  randomProp2: "2",
+  randomProp3: "3",
+  slotProps: {
+    badge: {
+      className: 'badge'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input2.default, {
+  component: "a",
+  href: "url"
+});

package/node/v5.0.0/base-remove-component-prop.test/expected.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _Input = _interopRequireDefault(require("@mui/material/Input"));
+var _Input2 = _interopRequireDefault(require("@mui/base/Input"));
+var _Switch = _interopRequireDefault(require("@mui/base/Switch"));
+var _Badge = _interopRequireDefault(require("@mui/base/Badge"));
+var _jsxRuntime = require("react/jsx-runtime");
+// @ts-nocheck
+
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
+  component: CustomRoot
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input2.default, {
+  slots: {
+    root: CustomRoot
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input2.default, (0, _extends2.default)({
+  slots: {
+    root: CustomRoot
+  }
+}, others));
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, {
+  slots: {
+    root: CustomRoot
+  },
+  randomProp: "1",
+  randomProp2: "2",
+  randomProp3: "3",
+  slotProps: {
+    root: {
+      className: 'root'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+  slots: {
+    badge: CustomBadge,
+    root: CustomRoot
+  },
+  randomProp: "1",
+  randomProp2: "2",
+  randomProp3: "3",
+  slotProps: {
+    badge: {
+      className: 'badge'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input2.default, {
+  slots: {
+    root: 'a'
+  },
+  href: "url"
+});

package/node/v5.0.0/base-remove-unstyled-suffix.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const transformed = root.find(j.ImportDeclaration).filter(({
+    node
+  }) => {
+    const sourceVal = node.source.value;
+    if (sourceVal.startsWith('@mui/base')) {
+      node.source.value = sourceVal.replace(/unstyled/im, '');
+      node.source.raw = sourceVal.replace(/unstyled/im, '');
+    }
+    return sourceVal.startsWith('@mui/base');
+  }).forEach(path => {
+    const specifiers = [];
+    path.node.specifiers.forEach(elementNode => {
+      var _elementNode$imported;
+      const importedName = ((_elementNode$imported = elementNode.imported) == null ? void 0 : _elementNode$imported.name) || '';
+      if (elementNode.type === 'ImportSpecifier' && importedName.match(/unstyled/im)) {
+        elementNode.imported.name = importedName.replace(/unstyled/im, '');
+        if (elementNode.local.name === importedName) {
+          // specifier must be newly created to add "as";
+          // e.g., import { SwitchUnstyled } to import { Switch as SwitchUnstyled}
+          specifiers.push(j.importSpecifier(elementNode.imported, elementNode.local));
+          return;
+        }
+      }
+      specifiers.push(elementNode);
+    });
+    path.node.specifiers = specifiers;
+  }).toSource();
+  return transformed;
+}

package/node/v5.0.0/base-remove-unstyled-suffix.test/actual.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _ButtonUnstyled2 = _interopRequireWildcard(require("@mui/base/ButtonUnstyled"));
+var _base = require("@mui/base");
+var _Slider = _interopRequireDefault(require("@mui/base/Slider"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _ButtonUnstyled, _SwitchUnstyled, _BaseInput, _BaseSlider;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function App() {
+  return;
+  /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [_ButtonUnstyled || (_ButtonUnstyled = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonUnstyled2.default, {})), ";", _SwitchUnstyled || (_SwitchUnstyled = /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.SwitchUnstyled, {})), ";", _BaseInput || (_BaseInput = /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.InputUnstyled, {})), ";", _BaseSlider || (_BaseSlider = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {})), ";"]
+  });
+}

package/node/v5.0.0/base-remove-unstyled-suffix.test/expected.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Button = _interopRequireWildcard(require("@mui/base/Button"));
+var _base = require("@mui/base");
+var _Slider = _interopRequireDefault(require("@mui/base/Slider"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _ButtonUnstyled, _SwitchUnstyled, _BaseInput, _BaseSlider;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function App() {
+  return;
+  /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [_ButtonUnstyled || (_ButtonUnstyled = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {})), ";", _SwitchUnstyled || (_SwitchUnstyled = /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.Switch, {})), ";", _BaseInput || (_BaseInput = /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.Input, {})), ";", _BaseSlider || (_BaseSlider = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {})), ";"]
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.12.0",
+  "version": "5.12.2",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",