material-ui-codemod

Codemod scripts for Material-UI.

Usage no npm install needed!

<script type="module">
  import materialUiCodemod from 'https://cdn.skypack.dev/material-ui-codemod';
</script>

README

material-ui-codemod

Codemod scripts for Material-UI

npm version npm downloads

This repository contains a collection of codemod scripts based for use with JSCodeshift that help update Material-UI APIs.

Setup & Run

  • npm install -g jscodeshift
  • npm install material-ui-codemod
  • jscodeshift -t <codemod-script> <path>
  • Use the -d option for a dry-run and use -p to print the output for comparison

Included Scripts

v1.0.0

color-imports

Updates the color-imports for the new location of Material-UI color palettes. The diff should look like this:

-import { blue, teal500 } from 'material-ui/src/styles/colors';
+import blue from 'material-ui/src/colors/blue';
+import teal from 'material-ui/src/colors/teal';
+const teal500 = teal['500'];

find src -name '*.js' -print | xargs jscodeshift -t node_modules/material-ui-codemod/lib/v1.0.0/color-imports.js

additional options

jscodeshift -t <color-imports.js> <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 package. The diff should look like this:

-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';
-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';
+import AccessAlarmIcon from 'material-ui-icons/AccessAlarm';
+import ThreeDRotation from 'material-ui-icons/ThreeDRotation';

find src -name '*.js' -print | xargs jscodeshift -t node_modules/material-ui-codemod/lib/v1.0.0/svg-icon-imports.js

v0.15.0

import-path

Updates the import-paths for the new location of the components. Material-UI v0.15.0 is reorganizing the folder distribution of the project. The diff should look like this:

// From the source
-import FlatButton from 'material-ui/src/flat-button';
+import FlatButton from 'material-ui/src/FlatButton';

// From npm
-import RaisedButton from 'material-ui/lib/raised-button';
+import RaisedButton from 'material-ui/RaisedButton';

find src -name '*.js' -print | xargs jscodeshift -t node_modules/material-ui-codemod/lib/v0.15.0/import-path.js

Recast Options

Options to recast's printer can be provided through the printOptions command line argument

jscodeshift -t transform.js <path> --printOptions='{"quote":"double"}'