@mui/codemod 5.14.0 → 5.14.4

package/README.md

@@ -62,6 +62,25 @@ npx @mui/codemod <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"
 
 ### v5.0.0
 
+### `base-use-named-exports`
+
+Base UI default exports were changed to named ones. Previously we had a mix of default and named ones.
+This was changed to improve consistency and avoid problems some bundlers have with default exports.
+See https://github.com/mui/material-ui/issues/21862 for more context.
+
+This codemod updates the import and re-export statements.
+
+```diff
+-  import BaseButton from '@mui/base/Button';
++  import { Button as BaseButton } from '@mui/base/Button';
+-  export { default as BaseSlider } from '@mui/base/Slider';
++  export { Slider as BaseSlider } from '@mui/base/Slider';
+```
+
+```bash
+npx @mui/codemod v5.0.0/base-use-named-exports <path>
+```
+
 ### `base-remove-unstyled-suffix`
 
 The `Unstyled` suffix has been removed from all Base UI component names, including names of types and other related identifiers.

package/node/util/propsToObject.js

@@ -42,7 +42,7 @@ function propsToObject({
       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 || (_attr$name = attr.name) == null ? void 0 : _attr$name.name) === propName;
         });
         if (propNameAttr) {
           var _propNameAttr$value$e;

package/node/util/renameClassKey.js

@@ -13,8 +13,8 @@ function renameClassKey({
   const source = root.findJSXElements(componentName).forEach(path => {
     path.node.openingElement.attributes.forEach(node => {
       if (node.type === 'JSXAttribute' && node.name.name === 'classes') {
-        var _node$value, _node$value$expressio, _node$value$expressio2;
-        (_node$value = node.value) == null ? void 0 : (_node$value$expressio = _node$value.expression) == null ? void 0 : (_node$value$expressio2 = _node$value$expressio.properties) == null ? void 0 : _node$value$expressio2.forEach(subNode => {
+        var _node$value;
+        (_node$value = node.value) == null || (_node$value = _node$value.expression) == null || (_node$value = _node$value.properties) == null ? void 0 : _node$value.forEach(subNode => {
           if (Object.keys(classes).includes(subNode.key.name)) {
             subNode.key.name = classes[subNode.key.name];
           }

package/node/v5.0.0/avatar-circle-circular.js

@@ -18,8 +18,8 @@ function transformer(file, api, options) {
         node.value = j.literal('circular');
       }
       if (node.type === 'JSXAttribute' && node.name.name === 'classes') {
-        var _node$value, _node$value$expressio2, _node$value$expressio3;
-        (_node$value = node.value) == null ? void 0 : (_node$value$expressio2 = _node$value.expression) == null ? void 0 : (_node$value$expressio3 = _node$value$expressio2.properties) == null ? void 0 : _node$value$expressio3.forEach(subNode => {
+        var _node$value;
+        (_node$value = node.value) == null || (_node$value = _node$value.expression) == null || (_node$value = _node$value.properties) == null ? void 0 : _node$value.forEach(subNode => {
           if (subNode.key.name === 'circle') {
             subNode.key.name = 'circular';
           }

package/node/v5.0.0/badge-overlap-value.js

@@ -13,7 +13,7 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions;
   const source = j(file.source).findJSXElements('Badge').forEach(path => {
     path.node.openingElement.attributes.forEach(node => {
-      var _node$value, _node$value$expressio3;
+      var _node$value;
       if (node.type === 'JSXAttribute' && node.name.name === 'overlap') {
         var _node$value$expressio, _node$value$expressio2;
         if (node.value.value === 'circle' || ((_node$value$expressio = node.value.expression) == null ? void 0 : _node$value$expressio.value) === 'circle') {
@@ -22,9 +22,9 @@ function transformer(file, api, options) {
           node.value = j.literal('rectangular');
         }
       }
-      if (node.type === 'JSXAttribute' && node.name.name === 'classes' && Array.isArray((_node$value = node.value) == null ? void 0 : (_node$value$expressio3 = _node$value.expression) == null ? void 0 : _node$value$expressio3.properties)) {
-        var _node$value2, _node$value2$expressi, _node$value2$expressi2;
-        (_node$value2 = node.value) == null ? void 0 : (_node$value2$expressi = _node$value2.expression) == null ? void 0 : (_node$value2$expressi2 = _node$value2$expressi.properties) == null ? void 0 : _node$value2$expressi2.forEach(subNode => {
+      if (node.type === 'JSXAttribute' && node.name.name === 'classes' && Array.isArray((_node$value = node.value) == null || (_node$value = _node$value.expression) == null ? void 0 : _node$value.properties)) {
+        var _node$value2;
+        (_node$value2 = node.value) == null || (_node$value2 = _node$value2.expression) == null || (_node$value2 = _node$value2.properties) == null ? void 0 : _node$value2.forEach(subNode => {
           if (subNode.key) {
             if (subNode.key.name.endsWith('Circle')) {
               subNode.key.name = subNode.key.name.replace('Circle', 'Circular');

package/node/v5.0.0/base-use-named-exports.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+// certain exports don't match the directory they are in:
+const nameMapping = {
+  className: 'Unstable_ClassNameGenerator',
+  composeClasses: 'unstable_composeClasses',
+  generateUtilityClass: 'unstable_generateUtilityClass',
+  generateUtilityClasses: 'unstable_generateUtilityClasses',
+  NumberInput: 'Unstable_NumberInput'
+};
+
+// renamed directories to match the export:
+const pathMapping = {
+  '@mui/base/className': '@mui/base/ClassNameGenerator'
+};
+function getExportedIdentifier(importPath) {
+  var _nameMapping$importPa;
+  return (_nameMapping$importPa = nameMapping[importPath]) != null ? _nameMapping$importPa : importPath;
+}
+function getTransformedPath(originalPath) {
+  var _pathMapping$original;
+  return (_pathMapping$original = pathMapping[originalPath]) != null ? _pathMapping$original : originalPath;
+}
+
+/**
+ * Finds the last segment of the path starting with @mui/base.
+ *
+ * @example '@mui/base/Menu' ➔ 'Menu'
+ * @example '@mui/base' ➔ null
+ */
+function getBaseImportIdentifier(path, filePath) {
+  var _path$node, _baseImportPathMatch$, _baseImportPathMatch$2;
+  const source = path == null || (_path$node = path.node) == null || (_path$node = _path$node.source) == null ? void 0 : _path$node.value;
+  if (!source) {
+    return null;
+  }
+  const baseImportPathMatch = source.match(/@mui\/base\/(.+)/);
+  if (baseImportPathMatch == null) {
+    return null;
+  }
+  if ((_baseImportPathMatch$ = baseImportPathMatch[1]) != null && _baseImportPathMatch$.includes('/')) {
+    console.warn(`WARNING: ${filePath}: "${source}" is more than one level deep. This is not supported.`);
+    return null;
+  }
+  return (_baseImportPathMatch$2 = baseImportPathMatch[1]) != null ? _baseImportPathMatch$2 : null;
+}
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const printOptions = options.printOptions;
+  const withTransformedImports = j(file.source).find(j.ImportDeclaration).forEach(path => {
+    const baseImportPath = getBaseImportIdentifier(path, file.path);
+    if (baseImportPath === null) {
+      return;
+    }
+    path.node.specifiers = path.node.specifiers.map(specifier => {
+      if (specifier.type !== 'ImportDefaultSpecifier') {
+        return specifier;
+      }
+
+      // import Y from @mui/base/X ➔ import { X as Y } from @mui/base/X
+      return j.importSpecifier(j.identifier(getExportedIdentifier(baseImportPath)), specifier.local);
+    });
+    path.node.source = j.stringLiteral(getTransformedPath(path.node.source.value));
+  }).toSource(printOptions);
+  return j(withTransformedImports).find(j.ExportNamedDeclaration).forEach(path => {
+    const baseImportPath = getBaseImportIdentifier(path);
+    if (baseImportPath === null) {
+      return;
+    }
+    path.node.specifiers = path.node.specifiers.map(specifier => {
+      if (specifier.local.name !== 'default') {
+        return specifier;
+      }
+      if (specifier.exported.name === 'default') {
+        // export { default } from @mui/base/X ➔ export { X as default } from @mui/base/X
+        return j.exportSpecifier.from({
+          exported: j.identifier('default'),
+          local: j.identifier(baseImportPath)
+        });
+      }
+
+      // export { default as Y } from @mui/base/X ➔ export { X as Y } from @mui/base/X
+      return j.exportSpecifier.from({
+        exported: j.identifier(specifier.exported.name),
+        local: j.identifier(getExportedIdentifier(baseImportPath))
+      });
+    });
+    path.node.source = j.stringLiteral(getTransformedPath(path.node.source.value));
+  }).toSource(printOptions);
+}

package/node/v5.0.0/base-use-named-exports.test/actual-with-warning.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Slider.default;
+  }
+});
+Object.defineProperty(exports, "sliderClasses", {
+  enumerable: true,
+  get: function () {
+    return _Slider.sliderClasses;
+  }
+});
+var _Button = _interopRequireDefault(require("@mui/base/Button"));
+var _ClassNameConfigurator = _interopRequireDefault(require("@mui/base/utils/ClassNameConfigurator"));
+var _Slider = _interopRequireWildcard(require("@mui/base/Slider"));
+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; }

package/node/v5.0.0/base-use-named-exports.test/actual.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BaseOption", {
+  enumerable: true,
+  get: function () {
+    return _Option.default;
+  }
+});
+Object.defineProperty(exports, "BaseTabPanel", {
+  enumerable: true,
+  get: function () {
+    return _TabPanel.default;
+  }
+});
+Object.defineProperty(exports, "NumberInput", {
+  enumerable: true,
+  get: function () {
+    return _NumberInput.default;
+  }
+});
+Object.defineProperty(exports, "Unstable_ClassNameGenerator", {
+  enumerable: true,
+  get: function () {
+    return _className.Unstable_ClassNameGenerator;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Slider.default;
+  }
+});
+Object.defineProperty(exports, "sliderClasses", {
+  enumerable: true,
+  get: function () {
+    return _Slider.sliderClasses;
+  }
+});
+Object.defineProperty(exports, "tabPanelClasses", {
+  enumerable: true,
+  get: function () {
+    return _TabPanel.tabPanelClasses;
+  }
+});
+var _Button = _interopRequireDefault(require("@mui/base/Button"));
+var _Badge = _interopRequireWildcard(require("@mui/base/Badge"));
+var _Switch = _interopRequireDefault(require("@mui/base/Switch"));
+var _Select = _interopRequireWildcard(require("@mui/base/Select"));
+var _base = require("@mui/base");
+var _composeClasses = _interopRequireDefault(require("@mui/base/composeClasses"));
+var _NumberInput = _interopRequireDefault(require("@mui/base/NumberInput"));
+var _className = require("@mui/base/className");
+var _Slider = _interopRequireWildcard(require("@mui/base/Slider"));
+var _Option = _interopRequireDefault(require("@mui/base/Option"));
+var _TabPanel = _interopRequireWildcard(require("@mui/base/TabPanel"));
+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; }

package/node/v5.0.0/base-use-named-exports.test/expected-with-warning.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Slider.Slider;
+  }
+});
+Object.defineProperty(exports, "sliderClasses", {
+  enumerable: true,
+  get: function () {
+    return _Slider.sliderClasses;
+  }
+});
+var _Button = require("@mui/base/Button");
+var _ClassNameConfigurator = _interopRequireDefault(require("@mui/base/utils/ClassNameConfigurator"));
+var _Slider = require("@mui/base/Slider");

package/node/v5.0.0/base-use-named-exports.test/expected.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BaseOption", {
+  enumerable: true,
+  get: function () {
+    return _Option.Option;
+  }
+});
+Object.defineProperty(exports, "BaseTabPanel", {
+  enumerable: true,
+  get: function () {
+    return _TabPanel.TabPanel;
+  }
+});
+Object.defineProperty(exports, "NumberInput", {
+  enumerable: true,
+  get: function () {
+    return _NumberInput.Unstable_NumberInput;
+  }
+});
+Object.defineProperty(exports, "Unstable_ClassNameGenerator", {
+  enumerable: true,
+  get: function () {
+    return _ClassNameGenerator.Unstable_ClassNameGenerator;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Slider.Slider;
+  }
+});
+Object.defineProperty(exports, "sliderClasses", {
+  enumerable: true,
+  get: function () {
+    return _Slider.sliderClasses;
+  }
+});
+Object.defineProperty(exports, "tabPanelClasses", {
+  enumerable: true,
+  get: function () {
+    return _TabPanel.tabPanelClasses;
+  }
+});
+var _Button = require("@mui/base/Button");
+var _Badge = require("@mui/base/Badge");
+var _Switch = require("@mui/base/Switch");
+var _Select = require("@mui/base/Select");
+var _base = require("@mui/base");
+var _composeClasses = require("@mui/base/composeClasses");
+var _NumberInput = require("@mui/base/NumberInput");
+var _ClassNameGenerator = require("@mui/base/ClassNameGenerator");
+var _Slider = require("@mui/base/Slider");
+var _Option = require("@mui/base/Option");
+var _TabPanel = require("@mui/base/TabPanel");

package/node/v5.0.0/circularprogress-variant.js

@@ -18,8 +18,8 @@ function transformer(file, api, options) {
         node.value = j.literal('determinate');
       }
       if (node.type === 'JSXAttribute' && node.name.name === 'classes') {
-        var _node$value, _node$value$expressio2, _node$value$expressio3;
-        (_node$value = node.value) == null ? void 0 : (_node$value$expressio2 = _node$value.expression) == null ? void 0 : (_node$value$expressio3 = _node$value$expressio2.properties) == null ? void 0 : _node$value$expressio3.forEach(subNode => {
+        var _node$value;
+        (_node$value = node.value) == null || (_node$value = _node$value.expression) == null || (_node$value = _node$value.properties) == null ? void 0 : _node$value.forEach(subNode => {
           if (subNode.key.name === 'static') {
             subNode.key.name = 'determinate';
           }

package/node/v5.0.0/fab-variant.js

@@ -20,8 +20,8 @@ function transformer(file, api, options) {
         }
       }
       if (node.type === 'JSXAttribute' && node.name.name === 'classes') {
-        var _node$value, _node$value$expressio2;
-        (((_node$value = node.value) == null ? void 0 : (_node$value$expressio2 = _node$value.expression) == null ? void 0 : _node$value$expressio2.properties) || []).forEach(subNode => {
+        var _node$value;
+        (((_node$value = node.value) == null || (_node$value = _node$value.expression) == null ? void 0 : _node$value.properties) || []).forEach(subNode => {
           if (subNode.key.name === 'round') {
             subNode.key.name = 'circular';
           }

package/node/v5.0.0/joy-rename-row-prop.js

@@ -30,7 +30,7 @@ function transformer(file, api, options) {
           if (attributeNode.name.name === 'row') {
             var _val$expression;
             const val = attributeNode.value;
-            if (val === null || (val == null ? void 0 : (_val$expression = val.expression) == null ? void 0 : _val$expression.value) === true) {
+            if (val === null || (val == null || (_val$expression = val.expression) == null ? void 0 : _val$expression.value) === true) {
               attributeNode.name.name = 'orientation';
               attributeNode.value = j.jsxExpressionContainer(j.literal('horizontal'));
             }

package/node/v5.0.0/link-underline-hover.js

@@ -43,7 +43,7 @@ function transformer(file, api, options) {
     }) => {
       const hasUnderlineProp = node.openingElement.attributes.find(attr => {
         var _attr$name;
-        return (attr == null ? void 0 : (_attr$name = attr.name) == null ? void 0 : _attr$name.name) === 'underline';
+        return (attr == null || (_attr$name = attr.name) == null ? void 0 : _attr$name.name) === 'underline';
       });
       if (!hasUnderlineProp) {
         node.openingElement.attributes.push(j.jsxAttribute(j.jsxIdentifier('underline'), j.literal('hover')));

package/node/v5.0.0/pagination-round-circular.js

@@ -23,8 +23,8 @@ function transformer(file, api, options) {
         node.value = j.literal('circular');
       }
       if (node.type === 'JSXAttribute' && node.name.name === 'classes') {
-        var _node$value, _node$value$expressio2;
-        (((_node$value = node.value) == null ? void 0 : (_node$value$expressio2 = _node$value.expression) == null ? void 0 : _node$value$expressio2.properties) || []).forEach(subNode => {
+        var _node$value;
+        (((_node$value = node.value) == null || (_node$value = _node$value.expression) == null ? void 0 : _node$value.properties) || []).forEach(subNode => {
           if (subNode.key.name === 'round') {
             subNode.key.name = 'circular';
           }

package/node/v5.0.0/skeleton-variant.js

@@ -23,8 +23,8 @@ function transformer(file, api, options) {
         }
       }
       if (node.type === 'JSXAttribute' && node.name.name === 'classes') {
-        var _node$value, _node$value$expressio3, _node$value$expressio4;
-        (_node$value = node.value) == null ? void 0 : (_node$value$expressio3 = _node$value.expression) == null ? void 0 : (_node$value$expressio4 = _node$value$expressio3.properties) == null ? void 0 : _node$value$expressio4.forEach(subNode => {
+        var _node$value;
+        (_node$value = node.value) == null || (_node$value = _node$value.expression) == null || (_node$value = _node$value.properties) == null ? void 0 : _node$value.forEach(subNode => {
           if (subNode.key.name === 'circle') {
             subNode.key.name = 'circular';
           }

package/node/v5.0.0/table-props.js

@@ -21,8 +21,8 @@ function transformer(file, api, options) {
     node
   }) => {
     node.openingElement.attributes.forEach(attr => {
-      var _attr$name, _attr$value, _attr$value2, _attr$value2$expressi;
-      if (((_attr$name = attr.name) == null ? void 0 : _attr$name.name) === 'padding' && (((_attr$value = attr.value) == null ? void 0 : _attr$value.value) === 'default' || ((_attr$value2 = attr.value) == null ? void 0 : (_attr$value2$expressi = _attr$value2.expression) == null ? void 0 : _attr$value2$expressi.value) === 'default')) {
+      var _attr$name, _attr$value, _attr$value2;
+      if (((_attr$name = attr.name) == null ? void 0 : _attr$name.name) === 'padding' && (((_attr$value = attr.value) == null ? void 0 : _attr$value.value) === 'default' || ((_attr$value2 = attr.value) == null || (_attr$value2 = _attr$value2.expression) == null ? void 0 : _attr$value2.value) === 'default')) {
         attr.value = j.literal('normal');
       }
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.14.0",
+  "version": "5.14.4",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -30,9 +30,9 @@
     "url": "https://opencollective.com/mui"
   },
   "dependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/runtime": "^7.22.5",
-    "@babel/traverse": "^7.22.5",
+    "@babel/core": "^7.22.9",
+    "@babel/runtime": "^7.22.6",
+    "@babel/traverse": "^7.22.8",
     "jscodeshift": "^0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
     "yargs": "^17.7.2"