How would you match jsx returning expressions only?

[skoch13]

Thank you for the great tool! Imagine we have the following:

const FirstComponent = (a) => {
  return <div>123</div>
}

const SecoundComponent = () => (<div>123</div>);

const notAComponent = () => {};

What would be the YAML configuration here to match only the components?
Thank you in advance

[HerringtonDarkholme]

Hi! Thanks for trying ast-grep.
Matching JSX element in return position isn't trivial! Even eslint-plugin-react uses some heuristics to approximate the matching algorithm.

In ast-grep, you can use the advanced utils rule. https://ast-grep.github.io/guide/rule-config/utility-rule.html

I have broken down the rule into self-explanatory sub util rules.

utils:
  isFunc:
    any:
      - kind: arrow_function
      - kind: function
      - kind: function_declaration
  isJSX:
    any:
      - kind: jsx_element
      - kind: jsx_fragment
      - kind: parenthesized_expression  # if jsx inside ()
        has:
          matches: isJSX
  hasJSXReturn:
    any:
      - matches: isJSX  # () => <></>
      - kind: statement_block # () => { return <></> }
        has:
          kind: return_statement
          has:
            matches: hasJSXReturn
          stopBy: end
rule:
  matches: isFunc
  has:
    field: body
    matches: hasJSXReturn

See the playground in action

Hope this help!

[skoch13]

Man, this is just crazy! Appreciate your work(and donated :D)

[HerringtonDarkholme]

You’re welcome, @skoch13. I’m glad you found ast-grep useful and interesting. Thank you for your question and your generous donation. It means a lot to me and the project. I hope you enjoy using ast-grep and find it helpful for your needs. Have a great day! 😊