pf-codemods

Hey PatternFly-React devs! pf-codemods is an eslint wrapper to update @patternfly/react-core@3.x.x code to 4.x.x.

I hope these rules and their autofixers will help you more quickly adopt our breaking changes. These rules are not designed to fix all build errors, but they can help to fix easy ones.

Usage

Simple case

Requires Node.js >= 10.

npx pf-codemods ./src

Giving node more RAM can help for large codebases.

NODE_OPTIONS=--max-old-space-size=4096 npx pf-codemods ./path-to-src

Options

Usage: pf-codemods [options] <path> [otherPaths...]

Run codemods on path using eslint.

Options:
  -V, --version      output the version number
  --only <rules>     Comma-seperated list of rules to run
  --exclude <rules>  Run recommended rules EXCLUDING this comma-seperated list
  --fix              Whether to run fixer
  --format <format>  What eslint report format to use (default: "stylish")
  -h, --help         display help for command

Rules

These rules are based off the breaking change notes for React. Each rule links the breaking change patternfly-react PR in case you want to better understand the change. Also, each rule makes sure you're using a PatternFly component before running.

divider-remove-isVertical (#8199)

We've replaced the isVertical flag with the orientation property that can define verticality on different breakpoints.

Examples

<Divider isVertical />

Out:

<Divider orientation={{ default: "vertical" }} />

toolbar-remove-visiblity (#8212)

We've removed the deprecated visiblity prop. This rule wil replace it with the correct spelled visibility prop.

Examples

In:

<ToolbarContent visiblity={{ default: "hidden" }} />

Out:

<ToolbarContent visibility={{ default: "hidden" }} />