@mui/codemod 5.11.7 → 5.11.11

package/README.md

@@ -62,6 +62,19 @@ npx @mui/codemod <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"
 
 ### v5.0.0
 
+#### `base-hook-imports`
+
+Updates the sources of the imports of the MUI Base hooks to adapt to the new directories of the hooks.
+
+```diff
+-  import { useBadge } from '@mui/base/BadgeUnstyled';
++  import useBadge from '@mui/base/useBadge';
+```
+
+```sh
+npx @mui/codemod v5.0.0/base-hook-imports <path>
+```
+
 #### `joy-rename-classname-prefix`
 
 Renames the classname prefix from `'Joy'` to `'Mui'` for Joy UI components.

package/node/v5.0.0/base-hook-imports.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+const capitalize = str => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+const movedTypeExports = [
+// Slider
+'Mark',
+// Select
+'SelectOption', 'SelectChild', 'isOptionGroup', 'SelectOptionGroup', 'SelectChangeEventType',
+// Listbox
+'OptionState', 'UseListboxPropsWithDefaults', 'FocusManagementType', 'ListboxState', 'ListboxAction', 'ListboxReducer', 'ListboxReducerAction',
+// Autocomplete
+'createFilterOptions', 'FilterOptionsState', 'AutocompleteFreeSoloValueMapping', 'AutocompleteValue', 'UseAutocompleteProps', 'AutocompleteGroupedOption', 'CreateFilterOptionsConfig', 'FilterOptionsState', 'AutocompleteInputChangeReason', 'AutocompleteCloseReason', 'AutocompleteGetTagProps'];
+
+/**
+ * @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 || {
+    quote: 'single'
+  };
+  root.find(j.ImportDeclaration).filter(path => {
+    const sourceVal = path.node.source.value;
+    return sourceVal.startsWith('@mui/base/') && sourceVal.match('Unstyled');
+  }) // Process only Base components
+  .forEach(path => {
+    // scenario 1: `@mui/base/<Component>Unstyled/use<Component>`
+    // e.g., `@mui/base/SelectUnstyled/useSelect`
+    const sourceVal = path.node.source.value;
+    // replace `@mui/base/SelectUnstyled/useSelect` with `@mui/base/useSelect`
+    if (sourceVal.replace(/@mui\/base\/([a-zA-Z]+)Unstyled/, '') !== '') {
+      path.node.source.value = sourceVal.replace(/@mui\/base\/([a-zA-Z]+)Unstyled\/([a-zA-Z]+)/, '@mui/base/$2');
+      return;
+    }
+
+    // scenario 2: @mui/base/<Component>Unstyled
+    const specifiersForHook = [];
+    const filteredSpecifiers = [];
+    const hookName = sourceVal.replace(/@mui\/base\/([a-zA-Z]+)Unstyled/, 'use$1');
+    path.node.specifiers.forEach(elementNode => {
+      var _elementNode$imported;
+      if (elementNode.type !== 'ImportSpecifier' || !((_elementNode$imported = elementNode.imported) != null && _elementNode$imported.name)) {
+        filteredSpecifiers.push(elementNode);
+        return;
+      }
+      const importName = elementNode.imported.name;
+      const localName = elementNode.local.name;
+      if (hookName === importName) {
+        // hook
+        specifiersForHook.push(j.importDefaultSpecifier(j.identifier(localName)));
+      } else if (
+      // types that no longer exist in `...Unstyled`
+      movedTypeExports.includes(importName) || importName.startsWith(capitalize(hookName)) && (importName.endsWith('SlotProps') || importName.endsWith('Parameters') || importName.endsWith('ReturnValue'))) {
+        specifiersForHook.push(j.importSpecifier(j.identifier(importName), elementNode.local));
+      } else {
+        filteredSpecifiers.push(elementNode);
+      }
+    });
+    path.node.specifiers = filteredSpecifiers;
+    if (specifiersForHook.length === 0) {
+      return;
+    }
+    const hookImportDeclaration = j.importDeclaration(specifiersForHook, j.literal(`@mui/base/${hookName}`));
+    if (filteredSpecifiers.length > 0) {
+      path.insertAfter(hookImportDeclaration);
+    } else {
+      path.replace(hookImportDeclaration);
+    }
+  });
+  return root.toSource(printOptions);
+}

package/node/v5.0.0/base-hook-imports.test/actual.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _AutocompleteUnstyled = require("@mui/base/AutocompleteUnstyled");
+var _BadgeUnstyled = require("@mui/base/BadgeUnstyled");
+var _ButtonUnstyled = require("@mui/base/ButtonUnstyled");
+var _InputUnstyled = require("@mui/base/InputUnstyled");
+var _SelectUnstyled = _interopRequireWildcard(require("@mui/base/SelectUnstyled"));
+var _OptionUnstyled = require("@mui/base/OptionUnstyled");
+var _useListbox = _interopRequireDefault(require("@mui/base/ListboxUnstyled/useListbox"));
+var _SwitchUnstyled = require("@mui/base/SwitchUnstyled");
+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-hook-imports.test/expected.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _useAutocomplete = _interopRequireDefault(require("@mui/base/useAutocomplete"));
+var _useBadge = _interopRequireDefault(require("@mui/base/useBadge"));
+var _useButton = _interopRequireDefault(require("@mui/base/useButton"));
+var _useInput = _interopRequireDefault(require("@mui/base/useInput"));
+var _SelectUnstyled = _interopRequireWildcard(require("@mui/base/SelectUnstyled"));
+var _useSelect = _interopRequireWildcard(require("@mui/base/useSelect"));
+var _useOption = require("@mui/base/useOption");
+var _useListbox = _interopRequireDefault(require("@mui/base/useListbox"));
+var _useSwitch = _interopRequireDefault(require("@mui/base/useSwitch"));
+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/theme-spacing.test/large-actual.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _helpers = require("docs/src/modules/utils/helpers");
-var _server = _interopRequireDefault(require("react-dom/server"));
+var ReactDOMServer = _interopRequireWildcard(require("react-dom/server"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _link = _interopRequireDefault(require("next/link"));
 var _router = require("next/router");
@@ -289,7 +289,7 @@ function AppSearch() {
       const dropDown = document.querySelector('.DocSearch-Dropdown');
       const isExisting = document.querySelector('.DocSearch-NewStartScreen');
       if (dropDown && !isExisting) {
-        dropDown.insertAdjacentHTML('beforeend', _server.default.renderToStaticMarkup(_NewStartScreen || (_NewStartScreen = /*#__PURE__*/(0, _jsxRuntime.jsx)(NewStartScreen, {}))));
+        dropDown.insertAdjacentHTML('beforeend', ReactDOMServer.renderToStaticMarkup(_NewStartScreen || (_NewStartScreen = /*#__PURE__*/(0, _jsxRuntime.jsx)(NewStartScreen, {}))));
       }
     };
     // add transition to Modal

package/node/v5.0.0/theme-spacing.test/large-expected.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _helpers = require("docs/src/modules/utils/helpers");
-var _server = _interopRequireDefault(require("react-dom/server"));
+var ReactDOMServer = _interopRequireWildcard(require("react-dom/server"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _link = _interopRequireDefault(require("next/link"));
 var _router = require("next/router");
@@ -289,7 +289,7 @@ function AppSearch() {
       const dropDown = document.querySelector('.DocSearch-Dropdown');
       const isExisting = document.querySelector('.DocSearch-NewStartScreen');
       if (dropDown && !isExisting) {
-        dropDown.insertAdjacentHTML('beforeend', _server.default.renderToStaticMarkup(_NewStartScreen || (_NewStartScreen = /*#__PURE__*/(0, _jsxRuntime.jsx)(NewStartScreen, {}))));
+        dropDown.insertAdjacentHTML('beforeend', ReactDOMServer.renderToStaticMarkup(_NewStartScreen || (_NewStartScreen = /*#__PURE__*/(0, _jsxRuntime.jsx)(NewStartScreen, {}))));
       }
     };
     // add transition to Modal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.11.7",
+  "version": "5.11.11",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -30,12 +30,12 @@
     "url": "https://opencollective.com/mui"
   },
   "dependencies": {
-    "@babel/core": "^7.20.7",
-    "@babel/runtime": "^7.20.7",
-    "@babel/traverse": "^7.20.10",
+    "@babel/core": "^7.21.0",
+    "@babel/runtime": "^7.21.0",
+    "@babel/traverse": "^7.21.2",
     "jscodeshift": "^0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
-    "yargs": "^17.6.2"
+    "yargs": "^17.7.1"
   },
   "devDependencies": {
     "@types/jscodeshift": "0.11.5"