An eslint plugin (with an extra CLI utility) to help ease products transitioning to our new major @patternfly/react-core 5.0.0 release.
-
We want to minimize code changes and respect existing code
-
We only want to make safe modifications
- Don't touch code that might not be PatternFly
-
Most consumers are using JSX, so we can write rules that target JSXElements
- When they're using React.createElement or React.cloneElement that introduces unsafe complications
- Use a JSX parser that leaves formatting alone as much as possible
- Add basic ESM import parsing to make sure we're only modifying PatternFly components
- Run
node generate-replace-prop-v5 [componentName] [oldPropName] [newPropName] [referencePR]
to create the rule/test files and update from there - Don't forget to document the change/rule within the readme file https://github.com/patternfly/pf-codemods/blob/main/packages/pf-codemods/README.md
- Run
yarn test:v5
to run tests - You can also update the
test.tsx
file and runyarn test:v5:single
to see what a consumer would see if they were to run our codemods
If you're having trouble writing a rule, you can:
- Put code into an AST explorer like https://astexplorer.net/ to inspect all the AST nodes
console.dir(node, { depth: 5 })
to better inspect anode
you're dealing with- Write rule targeting an AST node that has all the information you need. Confirm AST node exists in
lib/rules/ast-node-types.d.ts
. - Ask in PF slack channels
- See eslint rule docs https://eslint.org/docs/latest/developer-guide/working-with-rules
- Look at similar existing rules as examples
If the rule you're adding should have a severity of warning
rather than error
, add the rule name to the warningRules
array in eslint-plugin-pf-codemods/index.js
.