pf-codemods

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

We 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 as well as point out the more complicated ones and offer suggestions on how you might go about fixing them.

If you have any hardcoded Patternfly class names in your project (i.e. pf-c-button) you also might want to see if our class-name-updater package would be helpful for you.

Usage

Simple case

Requires Node.js >= 10.

npx @patternfly/pf-codemods ./path-to-src

Giving node more RAM can help for large codebases.

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

These commands will show you places in your code that may have issues with our breaking changes similar to linting. Add the --fix flag to allow us to autofix issues where possible.

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.

Some rules will add either a comment (/* data-codemods */) or data attribute (data-codemods="true") in order to prevent certain other rules from applying an unnecessary fix.

masthead-remove-background-color (#9774)

We've removed the backgroundColor prop from Masthead as theming is no longer handled React-side.

Examples

In:

import { Masthead } from "@patternfly/react-core";

export const MastheadRemoveBackgroundColorInput = () => <Masthead backgroundColor />

Out:

import { Masthead } from "@patternfly/react-core";

export const MastheadRemoveBackgroundColorInput = () => <Masthead  />