Find and replace only if imported from specific module

[ild0tt0re]

In a react/tsx project I would like "find and replace" a property of a react component only if it is imported from a specific module.

Is It possible?

[HerringtonDarkholme]

While I don’t have a direct answer, I suggest experimenting with the ast-grep playground to test out your patterns and replacements. It’s a great way to see how ast-grep behaves with different code snippets. You can also get inspiration from examples

Also, consider posting your question on Stack Overflow with the tag ast-grep for a broader audience. There’s a chance that other developers might have encountered a similar issue and can provide insights or solutions. https://stackoverflow.com/questions/tagged/ast-grep

[reidbarber]

Here's a utility that works pretty well for this:

id: on-my-component
language: tsx
utils:
  component-import:
    kind: import_statement
    all:
      - has:
          field: source
          has:
            kind: string_fragment
            regex: ^my-package$
      - has:
          kind: import_clause
          has:
            kind: identifier
            regex: ^MyComponent$
            stopBy: end
rule:
  all:
    - inside:
        kind: jsx_opening_element
        has:
          field: name
          regex: ^MyComponent$
    - inside:
        kind: program
        stopBy: end
        has:
          kind: import_statement
          matches: my-component-import

Where matches: on-my-component would match if the prop is on MyComponent imported from my-package. This won't work for some cases like import aliases or require imports though, so it could probably be improved.