Matching React props: strings and expressions

[reidbarber]

Hello! I was trying my hand at writing codemods for React components in ast-grep, and wanted make sure I was doing things the right/best way if possible.

Say I want to transform variant="old" to variant="new" on Component in React (JSX/TSX).

So cases like:

- <Component variant="old">Hello</Component>
+ <Component variant="new">Hello</Component>

and

- <Component variant={condition ? 'old' : 'other'}>Hello</Component>
+ <Component variant={condition ? 'new' : 'other'}>Hello</Component>

This was my best shot at this so far:

id: update-prop-string
rule:
  pattern: <Component $$$PROPS_BEFORE variant="old" $$$PROPS_AFTER>
fix: <Component $$$PROPS_BEFORE variant="new" $$$PROPS_AFTER>

---

id: update-prop-expression
rule:
  pattern: <Component $$$PROPS_BEFORE variant={$VARIANT} $$$PROPS_AFTER>
transform:
  NEW_VARIANT:
    replace:
      by: new
      replace: '\bold\b'
      source: $VARIANT
fix: <Component $$$PROPS_BEFORE variant={$NEW_VARIANT} $$$PROPS_AFTER>

My main questions is:

Is there a way to condense these into one rule? Or any way to make this cleaner or better in general?

Any insight would be appreciated!

I realize that second rule would match if a variable is named old, so that would be nice to fix, but not a big deal.

I was also trying to figure out how to get rid of the extra whitespace character that shows up if there is no $$$PROPS_BEFORE, for instance.

Thanks!

[HerringtonDarkholme]

Hi, I recommend https://dev.to/herrington_darkholme/migrate-to-react-19-with-ast-grep-28op as an example to match JSX attribute.

In your case, the rewriter is also a helpful construct to change string literal "old".

rule:
  all:
  - pattern: 
      context: '<div variant=$A />'
      selector: jsx_attribute
  - pattern: $ATTR
rewriters:
- id: old-to-new
  rule:
    kind: string_fragment
    regex: '^old$'
  fix: new 
transform:
  NEW_ATTR: 
    rewrite:
      rewriters: [old-to-new]
      source: $ATTR
fix: $NEW_ATTR

https://ast-grep.github.io/playground.html#eyJtb2RlIjoiQ29uZmlnIiwibGFuZyI6InRzeCIsInF1ZXJ5IjoiIiwicmV3cml0ZSI6IiIsImNvbmZpZyI6InJ1bGU6XG4gIGFsbDpcbiAgLSBwYXR0ZXJuOiBcbiAgICAgIGNvbnRleHQ6ICc8ZGl2IHZhcmlhbnQ9JEEgLz4nXG4gICAgICBzZWxlY3RvcjoganN4X2F0dHJpYnV0ZVxuICAtIHBhdHRlcm46ICRBVFRSXG5yZXdyaXRlcnM6XG4tIGlkOiBvbGQtdG8tbmV3XG4gIHJ1bGU6XG4gICAga2luZDogc3RyaW5nX2ZyYWdtZW50XG4gICAgcmVnZXg6ICdeb2xkJCdcbiAgZml4OiBuZXcgXG50cmFuc2Zvcm06XG4gIE5FV19BVFRSOiBcbiAgICByZXdyaXRlOlxuICAgICAgcmV3cml0ZXJzOiBbb2xkLXRvLW5ld11cbiAgICAgIHNvdXJjZTogJEFUVFJcbmZpeDogJE5FV19BVFRSIiwic291cmNlIjoidmFyIGEgPSA8Q29tcG9uZW50IHZhcmlhbnQ9XCJvbGRcIj5IZWxsbzwvQ29tcG9uZW50PlxudmFyIGIgPSA8Q29tcG9uZW50IHZhcmlhbnQ9e2NvbmRpdGlvbiA/ICdvbGQnIDogJ290aGVyJ30+SGVsbG88L0NvbXBvbmVudD5cbiJ9

[reidbarber]

Perfect! Thanks, and congrats on building such a great library!