@material-ui/codemod

@material-ui/codemod

Codemod scripts for Material-UI

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

Setup & Run

• npm install -D @material-ui/codemod@next
• npx jscodeshift -t <path-to-codemod-script> <path>
  • Applies the transform script specified in <path-to-codemod-script> recursively to <path>.
  • Use the -d option for a dry-run and use -p to print the output for comparison.
  • Use the --extensions tsx --parser tsx options to convert TypeScript source code.

Included Scripts

v5.0.0

component-rename-prop

A generic codemod to rename any component prop.

-<Component prop="value" />
-<Component prop />
+<Component newProp="value" />
+<Component newProp />

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/component-rename-prop.js --component=Grid --from=prop --to=newProp <path>

autocomplete-rename-closeicon

Renames fade style utility import and calls from fade to alpha.

-<Grid justify="left">Item</Grid>
+<Grid item justifyContent="left">Item</Grid>

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/autocomplete-rename-closeicon.js  <path>

avatar-circle-circular

Updates the Avatar variant value and classes key from 'circle' to 'circular'.

-<Avatar variant="circle" />
-<Avatar classes={{ circle: 'className' }} />
+<Avatar variant="circular" />
+<Avatar classes={{ circular: 'className' }} />

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/avatar-circle-circular.js <path>

box-borderradius-values

Updates the Box API from separate system props to sx.

-<Box borderRadius="borderRadius">
-<Box borderRadius={16}>
-<Box borderRadius={1}>
-<Box borderRadius="16px">

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/box-borderradius-values.js <path>

button-color-prop

Removes the Chip variant prop if the value is "default".

-<Button color="primary">
-<Button color="default">
+<Button>
+<Button>

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/box-sx-prop.js <path>

box-rename-gap

Renames the Box grid*Gap props.

-<Box gridGap={2}>Item 3</Box>
-<Box gridColumnGap={3}>Item 4</Box>
-<Box gridRowGap={4}>Item 5</Box>
+<Box gap={2}>Item 3</Box>
+<Box columnGap={3}>Item 4</Box>
+<Box rowGap={4}>Item 5</Box>

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/box-rename-gap.js <path>

badge-overlap-value

Renames the Box grid*Gap props.

-<Badge overlap="circle">
-<Badge overlap="rectangle">
+<Badge overlap="circular">
+<Badge overlap="rectangular">
<Badge classes={{
- anchorOriginTopRightRectangle: 'className',
- anchorOriginBottomRightRectangle: 'className',
- anchorOriginTopLeftRectangle: 'className',
- anchorOriginBottomLeftRectangle: 'className',
- anchorOriginTopRightCircle: 'className',
- anchorOriginBottomRightCircle: 'className',
- anchorOriginTopLeftCircle: 'className',
+ anchorOriginTopRightRectangular: 'className',
+ anchorOriginBottomRightRectangular: 'className',
+ anchorOriginTopLeftRectangular: 'className',
+ anchorOriginBottomLeftRectangular: 'className',
+ anchorOriginTopRightCircular: 'className',
+ anchorOriginBottomRightCircular: 'className',
+ anchorOriginTopLeftCircular: 'className',
}}>

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/box-rename-gap.js <path>

chip-variant-prop

Removes the Chip variant prop if the value is "default".

-<Chip variant="default">
+<Chip>

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/chip-variant-prop.js <path>

circularprogress-variant

Rename the CircularPress static variant to determinate.

-<CircularProgress variant="static" classes={{ static: 'className' }} />
+<CircularProgress variant="determinate" classes={{ determinate: 'className' }} />

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/circularprogress-variant.js <path>

collapse-rename-collapsedheight

Rename the CircularPress static variant to determinate.

-<Collapse collapsedHeight={40} />
-<Collapse classes={{ container: 'collapse' }} />
+<Collapse collapsedSize={40} />
+<Collapse classes={{ root: 'collapse' }} />

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/collapse-rename-collapsedheight.js <path>

fade-rename-alpha

Renames fade style utility import and calls frpm fade to alpha.

-import { fade, lighten } from '@material-ui/core/styles';
+import { alpha, lighten } from '@material-ui/core/styles';

-const foo = fade('#aaa');
+const foo = alpha('#aaa');

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/fade-rename-alpha.js <path>

grid-justify-justifycontent

Renames fade style utility import and calls frpm fade to alpha.

-<Grid justify="left">Item</Grid>
+<Grid item justifyContent="left">Item</Grid>

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/grid-justify-justifycontent.js <path>

moved-lab-modules

Updates all imports for @material-ui/lab components that have moved to @material-ui/core.

-import Skeleton from '@material-ui/lab/Skeleton';
+import Skeleton from '@material-ui/core/Skeleton';

or

-import { SpeedDial } from '@material-ui/lab';
+import { SpeedDial } from '@material-ui/core';

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/moved-lab-modules.js <path>

variant-prop

Add the TextField, Select, and FormControl variant="standard" prop when variant is undefined. The diff should look like this:

-<TextField value="Standard" />
-<TextField value="Outlined" variant="outlined" />
-<Select value="Standard" />
-<Select value="Outlined" variant="outlined" />
-<FormControl value="Standard" />
-<FormControl value="Outlined" variant="outlined" />
+<TextField value="Standard" variant="standard" />
+<TextField value="Outlined" />
+<Select value="Standard" variant="standard" />
+<Select value="Outlined" />
+<FormControl value="Standard" variant="standard" />
+<FormControl value="Outlined" />

This codemod is non-idempotent (variant="standard" would be added on a subsequent run, where variant="outlined" was removed), so should only be run once against any particular codebase.

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/variant-prop.js <path>

theme-breakpoints

Updates breakpoint values to match new logic.

-theme.breakpoints.down('sm')
-theme.breakpoints.between('sm', 'md')
+theme.breakpoints.down('md')
+theme.breakpoints.between('sm', 'lg')

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/theme-breakpoints.js <path>

use-transitionprops

Updates Dialog, Menu, Popover and Snackbar to use the TransitionProps prop to replace the onEnter* and onExit* props.

<Dialog
-  onEnter={onEnter}
-  onEntered={onEntered}
-  onEntering={onEntering}
-  onExit={onExit}
-  onExited={onExited}
-  onExiting={onExiting}
+  TransitionProps={{
+    onEnter,
+    onEntered,
+    onEntering,
+    onExit,
+    onExited,
+    onExiting,
+  }}
/>

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/use-transitionprops.js <path>

theme-spacing

Removes the 'px' suffix from some template strings.

`${theme.spacing(2)}px`
`${theme.spacing(2)}px ${theme.spacing(4)}px`
`${theme.spacing(2)}`
`${theme.spacing(2)} ${theme.spacing(4)}`

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v5.0.0/theme-spacing.js <path>

Note that if there are calculations using theme.spacing(), these will need to be resolved manually. Consider using CSS calc:

-`${theme.spacing(2) - 1}px`
+`calc(${theme.spacing(2)} - 1px)`

v4.0.0

theme-spacing-api

Updates the theme-spacing-api from theme.spacing.unit x to theme.spacing(x). The diff should look like this:

-const spacing = theme.spacing.unit;
+const spacing = theme.spacing(1);

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v4.0.0/theme-spacing-api.js <path>

This codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.

-const spacing = theme.spacing.unit / 5;
+const spacing = theme.spacing(0.2);

// Limitation
-const spacing = theme.spacing.unit * 5 * 5;
+const spacing = theme.spacing(5) * 5;

optimal-imports

Converts all @material-ui/core imports more than 1 level deep to the optimal form for tree shaking:

-import withStyles from '@material-ui/core/styles/withStyles';
-import createTheme from '@material-ui/core/styles/createTheme';
+import { withStyles, createTheme } from '@material-ui/core/styles';

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v4.0.0/optimal-imports.js <path>

Head to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.

top-level-imports

Converts all @material-ui/core submodule imports to the root module:

-import List from '@material-ui/core/List';
-import { withStyles } from '@material-ui/core/styles';
+import { List, withStyles } from '@material-ui/core';

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v4.0.0/top-level-imports.js <path>

Head to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.

v1.0.0

import-path

Updates the import-paths for the new location of the components. Material-UI v1.0.0 flatten the import paths. The diff should look like this:

-import { MenuItem } from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v1.0.0/import-path.js <path>

Notice: if you are migrating from pre-v1.0, and your imports use material-ui, you will need to manually find and replace all references to material-ui in your code to @material-ui/core. E.g.:

-import Typography from 'material-ui/Typography';
+import Typography from '@material-ui/core/Typography';

Subsequently, you can run the above find ... command to flatten your imports.

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/styles/colors';
+import blue from '@material-ui/core/colors/blue';
+import teal from '@material-ui/core/colors/teal';
+const teal500 = teal['500'];

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v1.0.0/color-imports.js <path>

additional options

npx 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';

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v1.0.0/svg-icon-imports.js <path>

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';

npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/lib/v0.15.0/import-path.js <path>

Recast Options

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

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