perf(react): improve react compiler preset so that slightly more modules are filtered out

[sapphi-red]

I noticed that we can add [A-Z0-9] to filter out a bit more modules.

https://github.com/facebook/react/blob/9c0323e2cf9be543d6eaa44419598af56922603f/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L897-L899

[ArnaudBarre]

I think the only way to define a function without a whitespace before is const A,B= ... which I don't know why you would do that in anyworld for defining hooks or components

Suggested change

	: /\b[A-Z]|\buse[A-Z0-9]/,
	: /\s[A-Z]|\suse[A-Z0-9]/,

But I think the better tradeoff is always running on jsx|tsx|mdx (in a normal codebase, you have like 98/99% of jsx files that contrains components, so not sure trying to get a 2% improvement with a regex is worth it) and run on js|ts only with when code matches \suse[A-Z0-9] (Vite always ban using JSX inside JS, nobody writes manual jsx calls and plugin should not rename file ids once transform from jsx to js

The only issue with the approach if for people having custom DSL that compile to React, but I think these frameworks should provide their own react compiler preset

Also can you put the link from the PR into the source code? I think it's good to have it as a reference if someone challenges it later

[sapphi-red]

If it's possible to have , before the name, I think we can use [\s,]. I guess \s and [\s,] won't have much perf difference.

I think the better tradeoff is always running on jsx|tsx|mdx (in a normal codebase, you have like 98/99% of jsx files that contrains components, so not sure trying to get a 2% improvement with a regex is worth it) and run on js|ts only with when code matches \suse[A-Z0-9] (Vite always ban using JSX inside JS, nobody writes manual jsx calls and plugin should not rename file ids once transform from jsx to js

It's currently difficult to achieve, but it would be easier to do once Vite implements composable filters (vitejs/rolldown-vite#605).

[ArnaudBarre]

After some AI checking, I think this is pretty safe and code not matching this regex will certainly break a lot a React rules:
(?:const|let|var|function)\s+(?:[A-Z]|use[A-Z0-9])

(The way to break it is using new Function or putting your component in a class method, both sounds horrible)

Speaking of classes, I checked and the playground doesn't touch class component, so no need to match this

Edit: Ok no actually this would be valid IMO but the playground doesn't touch it:

import { useState } from "react";

const hooks = {
  useTest: () => {
    const [state, setState] = useState(0);
    if (state === 0) return <div>Nothing</div>
    else return <div>{state}</div>
  }
}

I think the React compiler is only looking for top-level functions, and this sounds reasonable, so we can make an more aggressive regex