@mui/x-codemod 6.0.0-alpha.11

package/README.md

@@ -0,0 +1,128 @@
+# @mui/x-codemod
+
+> Codemod scripts for MUI X
+
+[![npm version](https://img.shields.io/npm/v/@mui/x-codemod.svg?style=flat-square)](https://www.npmjs.com/package/@mui/x-codemod)
+[![npm downloads](https://img.shields.io/npm/dm/@mui/x-codemod.svg?style=flat-square)](https://www.npmjs.com/package/@mui/x-codemod)
+
+This repository contains a collection of codemod scripts based for use with
+[jscodeshift](https://github.com/facebook/jscodeshift) that help update MUI X APIs.
+
+## Setup & run
+
+<!-- #default-branch-switch -->
+
+```bash
+npx @mui/x-codemod <codemod> <paths...>
+
+Applies a `@mui/x-codemod` to the specified paths
+
+Positionals:
+  codemod  The name of the codemod                                [string]
+  paths    Paths forwarded to `jscodeshift`                       [string]
+
+Options:
+  --version     Show version number                                 [boolean]
+  --help        Show help                                           [boolean]
+  --parser      which parser for jscodeshift to use.
+                                                    [string] [default: 'tsx']
+  --jscodeshift Pass options directly to jscodeshift                  [array]
+
+Examples:
+  npx @mui/x-codemod v6.0.0/preset-safe src
+  npx @mui/x-codemod v6.0.0/component-rename-prop src --
+  --component=DataGrid --from=prop --to=newProp
+```
+
+### `jscodeshift` options
+
+To pass more options directly to jscodeshift, use `--jscodeshift=...`. For example:
+
+```sh
+// single option
+npx @mui/x-codemod --jscodeshift=--run-in-band
+// multiple options
+npx @mui/x-codemod --jscodeshift=--cpus=1 --jscodeshift=--print --jscodeshift=--dry --jscodeshift=--verbose=2
+```
+
+See all available options [here](https://github.com/facebook/jscodeshift#usage-cli).
+
+### `Recast` Options
+
+Options to [recast](https://github.com/benjamn/recast)'s printer can be provided
+through jscodeshift's `printOptions` command line argument
+
+```sh
+npx @mui/x-codemod <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"double\"}'"
+```
+
+## Included scripts
+
+### v6.0.0
+
+#### 🚀 `preset-safe`
+
+A combination of all important transformers for migrating v5 to v6. ⚠️ This codemod should be run only once.
+
+```sh
+npx @mui/x-codemod v6.0.0/preset-safe <path|folder>
+```
+
+The list includes these transformers
+
+- [`localization-provider-rename-locale`](#localization-provider-rename-locale)
+- [`text-props-to-localeText`](#text-props-to-localeText)
+
+#### `localization-provider-rename-locale`
+
+Renames `locale` into `adapterLocale` (or `LocalizationProvider`)
+
+```diff
+ <LocalizationProvider
+   dateAdapter={AdapterDayjs}
+-  locale="fr"
++  adapterLocale="fr"
+ >
+   {children}
+ </LocalizationProvider
+
+```
+
+```sh
+npx @mui/x-codemod v6.0.0/localization-provider-rename-locale <path>
+```
+
+#### `text-props-to-localeText`
+
+Replace props used for localization such as `cancelText` to their corresponding `localeText` key.
+
+```diff
+ <DatePicker
+-  cancelText="Cancelar"
++  localeText={{
++    cancelButtonLabel: "Cancelar"
++  }}
+ />
+```
+
+```sh
+npx @mui/x-codemod v6.0.0/text-props-to-localeText <path>
+```
+
+If you were always using the same text value in all your components, consider moving those translation from the component to the `LocalizationProvider` by hand.
+
+```diff
+ <LocalizationProvider
+   dateAdapter={AdapterDayjs}
++ localeText={{ cancelButtonLabel: "Cancelar" }}
+ >
+   <DatePicker
+-    localeText={{ cancelButtonLabel: "Cancelar" }}
+   />
+   <DateTimePicker
+-    localeText={{ cancelButtonLabel: "Cancelar" }}
+   />
+ </LocalizationProvider>
+```
+
+You can find more details about this breaking change in [the migration guide](https://next.mui.com/x/migration/migration-pickers-v5/#rename-the-locale-prop-on-localizationprovider).

package/codemod.js

@@ -0,0 +1,80 @@
+#!/usr/bin/env node
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _child_process = _interopRequireDefault(require("child_process"));
+var _fs = require("fs");
+var _path = _interopRequireDefault(require("path"));
+var _yargs = _interopRequireDefault(require("yargs"));
+const jscodeshiftPackage = require('jscodeshift/package.json');
+const jscodeshiftDirectory = _path.default.dirname(require.resolve('jscodeshift'));
+const jscodeshiftExecutable = _path.default.join(jscodeshiftDirectory, jscodeshiftPackage.bin.jscodeshift);
+async function runTransform(transform, files, flags, codemodFlags) {
+  const transformerSrcPath = _path.default.resolve(__dirname, './src', transform);
+  const transformerBuildPath = _path.default.resolve(__dirname, transform);
+  let transformerPath;
+  try {
+    await _fs.promises.stat(transformerSrcPath);
+    transformerPath = transformerSrcPath;
+  } catch (srcPathError) {
+    try {
+      await _fs.promises.stat(transformerBuildPath);
+      transformerPath = transformerBuildPath;
+    } catch (buildPathError) {
+      if (buildPathError.code === 'ENOENT') {
+        throw new Error(`Transform '${transform}' not found. Check out ${_path.default.resolve(__dirname, './README.md for a list of available codemods.')}`);
+      }
+      throw buildPathError;
+    }
+  }
+  const args = [
+  // can't directly spawn `jscodeshiftExecutable` due to https://github.com/facebook/jscodeshift/issues/424
+  jscodeshiftExecutable, '--transform', transformerPath, ...codemodFlags, '--extensions', 'js,ts,jsx,tsx', '--parser', flags.parser || 'tsx', '--ignore-pattern', '**/node_modules/**', ...flags.jscodeshift];
+  args.push(...files);
+
+  // eslint-disable-next-line no-console -- debug information
+  console.log(`Executing command: jscodeshift ${args.join(' ')}`);
+  const jscodeshiftProcess = _child_process.default.spawnSync('node', args, {
+    stdio: 'inherit'
+  });
+  if (jscodeshiftProcess.error) {
+    throw jscodeshiftProcess.error;
+  }
+}
+function run(argv) {
+  const {
+    codemod,
+    paths,
+    _: other,
+    jscodeshift,
+    parser
+  } = argv;
+  return runTransform(codemod, paths.map(filePath => _path.default.resolve(filePath)), {
+    jscodeshift,
+    parser
+  }, other || []);
+}
+_yargs.default.command({
+  command: '$0 <codemod> <paths...>',
+  describe: 'Applies a `@mui/x-codemod` to the specified paths',
+  // @ts-expect-error
+  builder: command => {
+    return command.positional('codemod', {
+      description: 'The name of the codemod',
+      type: 'string'
+    }).positional('paths', {
+      array: true,
+      description: 'Paths forwarded to `jscodeshift`',
+      type: 'string'
+    }).option('parser', {
+      description: 'which parser for jscodeshift to use',
+      default: 'tsx',
+      type: 'string'
+    }).option('jscodeshift', {
+      description: '(Advanced) Pass options directly to jscodeshift',
+      default: [],
+      type: 'array'
+    });
+  },
+  handler: run
+}).scriptName('npx @mui/x-codemod').example('$0 v6.0.0/localization-provider-rename-locale src', 'Run "localization-provider-rename-locale" codemod on "src" path').example('$0 v6.0.0/component-rename-prop src -- --component=DataGrid --from=prop --to=newProp', 'Run "component-rename-prop" codemod in "src" path on "DataGrid" component with custom "from" and "to" arguments').help().parse();

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@mui/x-codemod",
+  "version": "6.0.0-alpha.11",
+  "bin": "./codemod.js",
+  "private": false,
+  "author": "MUI Team",
+  "description": "Codemod scripts for MUI X.",
+  "keywords": [
+    "react",
+    "react-component",
+    "mui",
+    "codemod",
+    "jscodeshift"
+  ],
+  "scripts": {
+    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/x-codemod/**/*.test.ts'",
+    "typescript": "tsc -p tsconfig.json",
+    "prebuild": "rimraf build",
+    "copy-files": "cpy README.md build && cpy package.json build",
+    "build": "node ../../scripts/build.mjs node --ignore 'src/types.ts' && yarn copy-files"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mui/mui-x.git",
+    "directory": "packages/x-codemod"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/mui/mui-x/tree/next/packages/x-codemod",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/mui"
+  },
+  "dependencies": {
+    "@babel/core": "^7.20.2",
+    "@babel/runtime": "^7.20.1",
+    "@babel/traverse": "^7.20.1",
+    "jscodeshift": "0.13.1",
+    "jscodeshift-add-imports": "^1.0.10",
+    "yargs": "^17.6.2"
+  },
+  "devDependencies": {
+    "@types/jscodeshift": "^0.11.5"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}

package/util/propsToObject.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = propsToObject;
+function propsToObject({
+  j,
+  root,
+  componentName,
+  aliasName,
+  propName,
+  props
+}) {
+  function buildObject(node, value) {
+    const shorthand = node.value.expression && node.value.expression.name === node.name.name;
+    const property = j.objectProperty(j.identifier(node.name.name), node.value.expression ? node.value.expression : node.value);
+    property.shorthand = shorthand;
+    value.push(property);
+    return value;
+  }
+  const result = aliasName ? root.find(j.JSXElement, {
+    openingElement: {
+      name: {
+        property: {
+          name: componentName
+        }
+      }
+    }
+  }) : root.findJSXElements(componentName);
+  return result.forEach(path => {
+    // @ts-expect-error
+    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 => attr.type === 'JSXAttribute' && attr.name.name === propName);
+        if (propNameAttr && propNameAttr.type === 'JSXAttribute') {
+          // @ts-expect-error
+          (propNameAttr.value.expression?.properties || []).push(...j.objectExpression(propValue).properties);
+        } else {
+          attributes?.push(j.jsxAttribute(j.jsxIdentifier(propName), j.jsxExpressionContainer(j.objectExpression(propValue))));
+        }
+      }
+    }
+  });
+}

package/util/readFile.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = readFile;
+var _fs = _interopRequireDefault(require("fs"));
+var _os = require("os");
+function readFile(filePath) {
+  const fileContents = _fs.default.readFileSync(filePath, 'utf8').toString();
+  if (_os.EOL !== '\n') {
+    return fileContents.replace(/\n/g, _os.EOL);
+  }
+  return fileContents;
+}

package/util/renameClassKey.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = renameClassKey;
+function renameClassKey({
+  root,
+  componentName,
+  classes,
+  printOptions
+}) {
+  const source = root.findJSXElements(componentName).forEach(path => {
+    path.node.openingElement.attributes?.forEach(node => {
+      if (node.type === 'JSXAttribute' && node.name.name === 'classes') {
+        // @ts-expect-error
+        node.value?.expression?.properties?.forEach(subNode => {
+          if (Object.keys(classes).includes(subNode.key.name)) {
+            subNode.key.name = classes[subNode.key.name];
+          }
+        });
+      }
+    });
+  }).toSource(printOptions);
+  return Object.entries(classes).reduce((result, [currentKey, newKey]) => {
+    const regex = new RegExp(`.Mui${componentName}-${currentKey}`, 'gm');
+    return result.replace(regex, `.Mui${componentName}-${newKey}`);
+  }, source);
+}

package/util/renameProps.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = renameProps;
+function renameProps({
+  root,
+  componentName,
+  props
+}) {
+  return root.findJSXElements(componentName).forEach(path => {
+    path.node.openingElement.attributes?.forEach(node => {
+      if (node.type === 'JSXAttribute' && Object.keys(props).includes(node.name.name)) {
+        node.name.name = props[node.name.name];
+      }
+    });
+  });
+}

package/v6.0.0/component-rename-prop/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameProps = _interopRequireDefault(require("../../util/renameProps"));
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  return (0, _renameProps.default)({
+    root,
+    componentName: options.component,
+    props: {
+      [options.from]: options.to
+    }
+  }).toSource(printOptions);
+}

package/v6.0.0/localization-provider-rename-locale/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameProps = _interopRequireDefault(require("../../util/renameProps"));
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  return (0, _renameProps.default)({
+    root,
+    componentName: 'LocalizationProvider',
+    props: {
+      locale: 'adapterLocale'
+    }
+  }).toSource(printOptions);
+}

package/v6.0.0/preset-safe/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _localizationProviderRenameLocale = _interopRequireDefault(require("../localization-provider-rename-locale"));
+var _textPropsToLocaleText = _interopRequireDefault(require("../text-props-to-localeText"));
+function transformer(file, api, options) {
+  file.source = (0, _localizationProviderRenameLocale.default)(file, api, options);
+
+  // Should be run before the renaming of components such as `ClockPicker` to `TimeClock`.
+  file.source = (0, _textPropsToLocaleText.default)(file, api, options);
+  return file.source;
+}

package/v6.0.0/text-props-to-localeText/index.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+const defaultPropsToKey = {
+  cancelText: ['cancelButtonLabel'],
+  okText: ['okButtonLabel'],
+  todayText: ['todayButtonLabel'],
+  clearText: ['clearButtonLabel'],
+  endText: ['end'],
+  getClockLabelText: ['clockLabelText'],
+  getHoursClockNumberText: ['hoursClockNumberText'],
+  getMinutesClockNumberText: ['minutesClockNumberText'],
+  getSecondsClockNumberText: ['secondsClockNumberText'],
+  getViewSwitchingButtonText: ['calendarViewSwitchingButtonAriaLabel'],
+  startText: ['start']
+};
+const isMonthSwitchComponent = {
+  DatePicker: true,
+  StaticDatePicker: true,
+  MobileDatePicker: true,
+  DesktopDatePicker: true,
+  DateRangePicker: true,
+  StaticDateRangePicker: true,
+  MobileDateRangePicker: true,
+  DesktopDateRangePicker: true,
+  CalendarPicker: true,
+  // Special cases of DateTimePickers present in both
+  DateTimePicker: true,
+  StaticDateTimePicker: true,
+  MobileDateTimePicker: true,
+  DesktopDateTimePicker: true
+};
+const isViewSwitchComponent = {
+  TimePicker: true,
+  StaticTimePicker: true,
+  MobileTimePicker: true,
+  DesktopTimePicker: true,
+  DateTimePicker: true,
+  ClockPicker: true,
+  // Special cases of DateTimePickers present in both
+  StaticDateTimePicker: true,
+  MobileDateTimePicker: true,
+  DesktopDateTimePicker: true
+};
+const needsWrapper = {
+  ClockPicker: true,
+  CalendarPicker: true
+};
+const impactedComponents = ['DateRangePicker', 'CalendarPicker', 'ClockPicker', 'DatePicker', 'DateRangePicker', 'DateRangePickerDay', 'DateTimePicker', 'DesktopDatePicker', 'DesktopDateRangePicker', 'DesktopDateTimePicker', 'DesktopTimePicker', 'MobileDatePicker', 'MobileDateRangePicker', 'MobileDateTimePicker', 'MobileTimePicker', 'StaticDatePicker', 'StaticDateRangePicker', 'StaticDateTimePicker', 'StaticTimePicker', 'TimePicker'];
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const printOptions = options.printOptions;
+  const root = j(file.source);
+  impactedComponents.forEach(componentName => {
+    const propsToKey = (0, _extends2.default)({}, defaultPropsToKey, {
+      leftArrowButtonText: [...(isViewSwitchComponent[componentName] ? ['openPreviousView'] : []), ...(isMonthSwitchComponent[componentName] ? ['previousMonth'] : [])],
+      rightArrowButtonText: [...(isViewSwitchComponent[componentName] ? ['openNextView'] : []), ...(isMonthSwitchComponent[componentName] ? ['nextMonth'] : [])]
+    });
+    root.findJSXElements(componentName).forEach(path => {
+      const newLocaleText = [];
+      const attributes = path.node.openingElement.attributes;
+      attributes.forEach((node, index) => {
+        if (node.type === 'JSXAttribute' && propsToKey[node.name.name] !== undefined) {
+          const newNames = propsToKey[node.name.name];
+          newNames.forEach(newName => {
+            const property = j.objectProperty(j.identifier(newName), node.value.expression ? node.value.expression : j.literal(node.value.value));
+            property.shorthand = node.value.expression && node.value.expression.name === newName;
+            newLocaleText.push(property);
+          });
+          delete attributes[index];
+        }
+      });
+      if (newLocaleText.length > 0) {
+        if (needsWrapper[componentName]) {
+          // From : https://www.codeshiftcommunity.com/docs/react/#wrapping-components
+
+          // Create a new JSXElement called "LocalizationProvider" and use the original component as children
+          const wrappedComponent = j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier('LocalizationProvider'), [
+          // Add the new localeText prop
+          j.jsxAttribute(j.jsxIdentifier('localeText'), j.jsxExpressionContainer(j.objectExpression(newLocaleText)))]), j.jsxClosingElement(j.jsxIdentifier('LocalizationProvider')), [path.value] // Pass in the original component as children
+          );
+
+          j(path).replaceWith(wrappedComponent);
+        } else {
+          attributes.push(j.jsxAttribute(j.jsxIdentifier('localeText'), j.jsxExpressionContainer(j.objectExpression(newLocaleText))));
+        }
+      }
+    });
+  });
+  return root.toSource(printOptions);
+}