@patternfly/pf-codemods
v2.0.14
Published
Codemods for v4 breaking change release 2020.07
Downloads
367
Maintainers
Keywords
Readme
pf-codemods
Hey PatternFly-React devs! pf-codemods
is an eslint wrapper to update @patternfly/[email protected] 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 />