Find elements that are using a given prop

I wanted to find out in what files of a big codebase there is a component rendered with a specific prop.
Like, I want to know all the refs I’ve attached to inputs for example, is there an easy way? Maybe with regexes?

Turns out that parsing html can’t really be done with a regex, but you can restrict the problem’s domain, like we’re doing, to circumvent and find a solution that works most of the times.

Scouting on the web, I managed to find this where I’ve added a little piece to support the usage of the optional chaining operator.

This is the regex: <Input[ \w=\{\}>\(\)\n;?".-:]*ref

Debug it to see how it works (make sure to enable vscode regex search when testing this).

I noticed it fails though when there is another JSX element in a prop that comes before the prop we’re looking for, like this:

<Component
  value="test"
  Slot={<Input value="test" />}
  onClear={() => {
    onChange?.("");
  }}
  prop={"test"}
/>

You could add also the < within the square brackets but when backtracking it stops at the last prop found, causing the merge of multiple components in a single results.

So using a jsx parser would make things definitely easier.