@mui/codemod 5.12.0 → 5.12.3

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/node/v5.0.0/grid-list-component.test/actual.js

@@ -7,7 +7,6 @@ var _other = _interopRequireDefault(require("./other"));
 var _jsxRuntime = require("react/jsx-runtime");
 // import GridList from '@material-ui/core/GridList';
 // import GridListTile from '@material-ui/core/GridListTile';
-
 /*#__PURE__*/(0, _jsxRuntime.jsxs)(_core.GridList, {
   cellHeight: "auto",
   cols: numOfCols,

package/node/v5.0.0/grid-list-component.test/expected.js

@@ -7,7 +7,6 @@ var _other = _interopRequireDefault(require("./other"));
 var _jsxRuntime = require("react/jsx-runtime");
 // import ImageList from '@material-ui/core/ImageList';
 // import ImageListItem from '@material-ui/core/ImageListItem';
-
 /*#__PURE__*/(0, _jsxRuntime.jsxs)(_core.ImageList, {
   cellHeight: "auto",
   cols: numOfCols,

package/node/v5.0.0/jss-to-tss-react.test/actual-from-material-ui-core-styles.js

@@ -14,7 +14,6 @@ Sandboxes for verifying correct behavior:
 JSS - https://codesandbox.io/s/case1-jss-dedp2f?file=/src/App.js
 TSS - https://codesandbox.io/s/case1-tss-s0z7tx?file=/src/App.js
  */
-
 const useStyles = (0, _styles.makeStyles)({
   test: {
     backgroundColor: "purple",

package/node/v5.0.0/jss-to-tss-react.test/actual-from-material-ui-core.js

@@ -10,6 +10,13 @@ var _core = require("@material-ui/core");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _InnerComponent;
+/*
+Test makeStyles comment
+ */
+/*
+clsx comment that will not be preserved since the import is being removed (not just replaced)
+and is not at the beginning of the file.
+ */
 const useStyles = (0, _core.makeStyles)(() => ({
   test: {
     backgroundColor: "purple",

package/node/v5.0.0/jss-to-tss-react.test/actual-todo-comments.js

@@ -10,6 +10,13 @@ var React = _interopRequireWildcard(require("react"));
 var _core = require("@material-ui/core");
 var _jsxRuntime = require("react/jsx-runtime");
 var _InnerComponent;
+/*
+Comments to be preserved when clsx import is removed. These comments should come before
+any comments that they get combined with.
+ */
+/*
+Comments that should not be lost when the clsx import comments are preserved.
+ */
 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 useStyles = (0, _core.makeStyles)(() => ({

package/node/v5.0.0/jss-to-tss-react.test/actual-typescript.js

@@ -14,9 +14,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 Sandboxes for verifying correct behavior:
 JSS - https://codesandbox.io/s/typescript-case-bt065c?file=/demo.tsx
 TSS - https://codesandbox.io/s/typescript-case-7jwpms?file=/demo.tsx
- */
-
-const useStyles = (0, _styles.makeStyles)(theme => (0, _styles.createStyles)({
+ */const useStyles = (0, _styles.makeStyles)(theme => (0, _styles.createStyles)({
   test: {
     backgroundColor: "purple",
     color: "white",

package/node/v5.0.0/jss-to-tss-react.test/expected-from-material-ui-core-styles.js

@@ -14,7 +14,6 @@ Sandboxes for verifying correct behavior:
 JSS - https://codesandbox.io/s/case1-jss-dedp2f?file=/src/App.js
 TSS - https://codesandbox.io/s/case1-tss-s0z7tx?file=/src/App.js
  */
-
 const useStyles = (0, _mui.makeStyles)({
   name: "TestName"
 })({

package/node/v5.0.0/jss-to-tss-react.test/expected-from-material-ui-core.js

@@ -9,6 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 var _mui = require("tss-react/mui");
 var _jsxRuntime = require("react/jsx-runtime");
 var _InnerComponent;
+/*
+Test makeStyles comment
+ */
 const useStyles = (0, _mui.makeStyles)()((_theme, _params, classes) => ({
   test: {
     backgroundColor: "purple",

package/node/v5.0.0/jss-to-tss-react.test/expected-todo-comments.js

@@ -8,9 +8,16 @@ var React = _interopRequireWildcard(require("react"));
 var _mui = require("tss-react/mui");
 var _jsxRuntime = require("react/jsx-runtime");
 var _InnerComponent;
+/*
+Comments to be preserved when clsx import is removed. These comments should come before
+any comments that they get combined with.
+ */
+/*
+Comments that should not be lost when the clsx import comments are preserved.
+ */
+// TODO jss-to-tss-react codemod: Unable to handle style definition reliably. ArrowFunctionExpression in CSS prop.
 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; }
-// TODO jss-to-tss-react codemod: Unable to handle style definition reliably. ArrowFunctionExpression in CSS prop.
 const useStyles = (0, _mui.makeStyles)()((_theme, _params, classes) => ({
   test: {
     backgroundColor: "purple",

package/node/v5.0.0/mui-replace.test/actual.js

@@ -55,4 +55,10 @@ const tsconfig = {
   }
 };
 
-// types
+// types
+
+// private-theming
+
+// Pickers does not change
+
+// DataGrid does not change

package/node/v5.0.0/mui-replace.test/expected.js

@@ -55,4 +55,10 @@ const tsconfig = {
   }
 };
 
-// types
+// types
+
+// private-theming
+
+// Pickers does not change
+
+// DataGrid does not change

package/node/v5.0.0/preset-safe.test/expected.js

@@ -31,8 +31,7 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _colors = require("@mui/material/colors");
 var _jsxRuntime = require("react/jsx-runtime");
-var _Box, _Box2, _CssBaseline, _Header, _Box3, _Grid, _DialogTitle, _DialogContent;
-// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+var _Box, _Box2, _CssBaseline, _Header, _Box3, _Grid, _DialogTitle, _DialogContent; // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
 const withWidth = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, (0, _extends2.default)({}, props, {
   width: "xs"
 }));

package/node/v5.0.0/root-ref.test/actual.js

@@ -3,11 +3,9 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _RootRef = _interopRequireDefault(require("@material-ui/core/RootRef"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _Typography, _CssBaseline;
-// import { RootRef } from '@material-ui/core';
+var _Typography, _CssBaseline; // import { RootRef } from '@material-ui/core';
 // import { RootRef, Button } from '@material-ui/core';
 // import { Tooltip, RootRef, Button } from '@material-ui/core';
-
 function App() {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_RootRef.default, {
     rootRef: this.container,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.12.0",
+  "version": "5.12.3",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -30,9 +30,9 @@
     "url": "https://opencollective.com/mui"
   },
   "dependencies": {
-    "@babel/core": "^7.21.3",
+    "@babel/core": "^7.21.4",
     "@babel/runtime": "^7.21.0",
-    "@babel/traverse": "^7.21.3",
+    "@babel/traverse": "^7.21.4",
     "jscodeshift": "^0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
     "yargs": "^17.7.1"