@mui/codemod 5.2.0 → 5.4.1

package/README.md

@@ -39,7 +39,7 @@ Examples:
   npx @mui/codemod v5.0.0/preset-safe src --parser=flow
 ```
 
-#### jscodeshift options
+### jscodeshift options
 
 To pass more options directly to jscodeshift, use `--jscodeshift="..."`. For example:
 
@@ -49,7 +49,7 @@ npx @mui/codemod --jscodeshift="--run-in-band --verbose=2"
 
 See all available options [here](https://github.com/facebook/jscodeshift#usage-cli).
 
-#### Recast Options
+### Recast Options
 
 Options to [recast](https://github.com/benjamn/recast)'s printer can be provided
 through jscodeshift's `printOptions` command line argument
@@ -1073,7 +1073,7 @@ You can find more details about this breaking change in [the migration guide](ht
 
 #### `mui-replace`
 
-Replace every occurrence of `material-ui` related package with the new package names (listed below) except these packages (`@material-ui/pickers`, `@material-ui/data-grid`, `@material-ui/x-grid` & `@material-ui/x-grid-data-generator`). [More details about why package names are changed](https://github.com/mui-org/material-ui/issues/27666)
+Replace every occurrence of `material-ui` related package with the new package names (listed below) except these packages (`@material-ui/pickers`, `@material-ui/data-grid`, `@material-ui/x-grid` & `@material-ui/x-grid-data-generator`). [More details about why package names are changed](https://github.com/mui/material-ui/issues/27666)
 
 **Material Design components**
 
@@ -1247,13 +1247,13 @@ npx @mui/codemod v1.0.0/color-imports <path>
 
 <!-- #default-branch-switch -->
 
-```
+```sh
 npx @mui/codemod v1.0.0/color-imports <path> -- --importPath='mui/styles/colors' --targetPath='mui/colors'
 ```
 
 #### `svg-icon-imports`
 
-Updates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/mui-material-icons) package.
+Updates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new `@material-ui/icons` package.
 The diff should look like this:
 
 ```diff

package/node/util/propsToObject.js

@@ -9,6 +9,7 @@ function propsToObject({
   j,
   root,
   componentName,
+  aliasName,
   propName,
   props
 }) {
@@ -20,30 +21,41 @@ function propsToObject({
     return value;
   }
 
-  return root.findJSXElements(componentName).forEach(path => {
-    let propValue = [];
-    const attributes = path.node.openingElement.attributes;
-    attributes.forEach((node, index) => {
-      // Only transform whitelisted props
-      if (node.type === 'JSXAttribute' && props.includes(node.name.name)) {
-        propValue = buildObject(node, propValue);
-        delete attributes[index];
+  const result = aliasName ? root.find(j.JSXElement, {
+    openingElement: {
+      name: {
+        property: {
+          name: componentName
+        }
       }
-    });
+    }
+  }) : root.findJSXElements(componentName);
+  return result.forEach(path => {
+    if (!aliasName || aliasName && path.node.openingElement.name.object.name === aliasName) {
+      let propValue = [];
+      const attributes = path.node.openingElement.attributes;
+      attributes.forEach((node, index) => {
+        // Only transform whitelisted props
+        if (node.type === 'JSXAttribute' && props.includes(node.name.name)) {
+          propValue = buildObject(node, propValue);
+          delete attributes[index];
+        }
+      });
 
-    if (propValue.length > 0) {
-      const propNameAttr = attributes.find(attr => {
-        var _attr$name;
+      if (propValue.length > 0) {
+        const propNameAttr = attributes.find(attr => {
+          var _attr$name;
 
-        return (attr == null ? void 0 : (_attr$name = attr.name) == null ? void 0 : _attr$name.name) === propName;
-      });
+          return (attr == null ? void 0 : (_attr$name = attr.name) == null ? void 0 : _attr$name.name) === propName;
+        });
 
-      if (propNameAttr) {
-        var _propNameAttr$value$e;
+        if (propNameAttr) {
+          var _propNameAttr$value$e;
 
-        (((_propNameAttr$value$e = propNameAttr.value.expression) == null ? void 0 : _propNameAttr$value$e.properties) || []).push(...j.objectExpression(propValue).properties);
-      } else {
-        attributes.push(j.jsxAttribute(j.jsxIdentifier(propName), j.jsxExpressionContainer(j.objectExpression(propValue))));
+          (((_propNameAttr$value$e = propNameAttr.value.expression) == null ? void 0 : _propNameAttr$value$e.properties) || []).push(...j.objectExpression(propValue).properties);
+        } else {
+          attributes.push(j.jsxAttribute(j.jsxIdentifier(propName), j.jsxExpressionContainer(j.objectExpression(propValue))));
+        }
       }
     }
   });

package/node/v1.0.0/color-imports.js

@@ -1,7 +1,7 @@
 "use strict";
 
 // This codemod attempts to fix the color imports breaking change introduced in
-// https://github.com/mui-org/material-ui/releases/tag/v1.0.0-alpha.21
+// https://github.com/mui/material-ui/releases/tag/v1.0.0-alpha.21
 // List of colors that are in the `common` module
 const commonColors = ['black', 'white', 'transparent', 'fullBlack', 'darkBlack', 'lightBlack', 'minBlack', 'faintBlack', 'fullWhite', 'darkWhite', 'lightWhite'];
 /**

package/node/v1.0.0/svg-icon-imports.js

@@ -21,7 +21,6 @@ function pascalize(iconName) {
  * Update all `svg-icons` import references to use `@material-ui/icons` package.
  * Find and replace string literal AST nodes to ensure all svg-icon paths get updated, regardless
  * of being in an import declaration, or a require() call, etc.
- * https://github.com/mui-org/material-ui/tree/next/packages/@material-ui/icons
  * @param {jscodeshift_api_object} j
  * @param {jscodeshift_ast_object} root
  */

package/node/v5.0.0/box-sx-prop.js

@@ -21,9 +21,20 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions || {
     quote: 'single'
   };
+  let aliasName;
+  root.find(j.ImportDeclaration).forEach(path => {
+    if (path.node.source.value.match(/^(@mui\/material|@material-ui\/core)$/)) {
+      var _path$node$specifiers;
+
+      if (((_path$node$specifiers = path.node.specifiers[0]) == null ? void 0 : _path$node$specifiers.type) === 'ImportNamespaceSpecifier') {
+        aliasName = path.node.specifiers[0].local.name;
+      }
+    }
+  });
   return (0, _propsToObject.default)({
     j,
     root,
+    aliasName,
     componentName: 'Box',
     propName: 'sx',
     props

package/node/v5.0.0/box-sx-prop.test/alias-actual.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var UI = _interopRequireWildcard(require("@material-ui/core"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _UI$Box;
+
+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; }
+
+const Foo = () => _UI$Box || (_UI$Box = /*#__PURE__*/(0, _jsxRuntime.jsx)(UI.Box, {
+  px: 2
+}));

package/node/v5.0.0/box-sx-prop.test/alias-expected.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var UI = _interopRequireWildcard(require("@material-ui/core"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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; }
+
+const Foo = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(UI.Box, {
+  sx: {
+    px: 2
+  }
+});

package/node/v5.0.0/jss-to-styled.test/fifth.actual.js

@@ -79,14 +79,14 @@ function SellHero() {
         align: "center",
         variant: "h3",
         color: "textSecondary",
-        children: 'Build your React themes business on the official MUI store.'
+        children: 'Build your React themes business on the official MUI Store.'
       })), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: classes.actions,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button2.default, {
           variant: "contained",
           component: _Link.default,
           naked: true,
-          to: "https://material-ui.zendesk.com/hc/en-us/articles/360008775380-How-do-I-apply-to-be-a-contributor-",
+          to: "https://support.mui.com/hc/en-us/articles/360008775380-How-do-I-apply-to-be-a-contributor-",
           target: "_blank",
           rel: "noopener",
           className: classes.apply,

package/node/v5.0.0/jss-to-styled.test/fifth.expected.js

@@ -88,14 +88,14 @@ function SellHero() {
         align: "center",
         variant: "h3",
         color: "textSecondary",
-        children: 'Build your React themes business on the official MUI store.'
+        children: 'Build your React themes business on the official MUI Store.'
       })), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: classes.actions,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button2.default, {
           variant: "contained",
           component: _Link.default,
           naked: true,
-          to: "https://material-ui.zendesk.com/hc/en-us/articles/360008775380-How-do-I-apply-to-be-a-contributor-",
+          to: "https://support.mui.com/hc/en-us/articles/360008775380-How-do-I-apply-to-be-a-contributor-",
           target: "_blank",
           rel: "noopener",
           className: classes.apply,

package/node/v5.0.0/jss-to-styled.test/first.actual.js

@@ -208,7 +208,7 @@ class AppAppBar extends _react.default.Component {
           }), essential ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
             className: classes.item,
             component: _Link.default,
-            to: "https://material-ui.zendesk.com/hc/en-us",
+            to: "https://support.mui.com/hc/en-us",
             target: "_blank",
             children: 'Help'
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_NoSsr.default, {

package/node/v5.0.0/jss-to-styled.test/first.expected.js

@@ -223,7 +223,7 @@ class AppAppBar extends _react.default.Component {
           }), essential ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
             className: classes.item,
             component: _Link.default,
-            to: "https://material-ui.zendesk.com/hc/en-us",
+            to: "https://support.mui.com/hc/en-us",
             target: "_blank",
             children: 'Help'
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_NoSsr.default, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.2.0",
+  "version": "5.4.1",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -20,18 +20,22 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui-org/material-ui.git",
+    "url": "https://github.com/mui/material-ui.git",
     "directory": "packages/mui-codemod"
   },
   "license": "MIT",
-  "homepage": "https://github.com/mui-org/material-ui/tree/master/packages/mui-codemod",
+  "homepage": "https://github.com/mui/material-ui/tree/master/packages/mui-codemod",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/mui"
+  },
   "dependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/runtime": "^7.16.3",
-    "@babel/traverse": "^7.16.3",
-    "jscodeshift": "^0.13.0",
+    "@babel/core": "^7.17.0",
+    "@babel/runtime": "^7.17.0",
+    "@babel/traverse": "^7.17.0",
+    "jscodeshift": "^0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
-    "yargs": "^17.2.1"
+    "yargs": "^17.3.1"
   },
   "devDependencies": {
     "@types/jscodeshift": "0.11.3"