[DevTools] Support Flow syntax for named hooks parsing

[bvaughn]

DevTools tells Babel to parse the source code using "jsx" and "typescript" plug-ins:

react/packages/react-devtools-extensions/src/parseHookNames.js

Lines 446 to 462 in ed6c091

	// TODO Parsing should ideally be done off of the main thread.
	hookSourceData.originalSourceAST = parse(originalSourceCode, {
	sourceType: 'unambiguous',
	plugins: ['jsx', 'typescript'],
	});
	},
	),
	);
	} else {
	// There's no source map to parse here so we can just parse the original source itself.
	hookSourceData.originalSourceCode = runtimeSourceCode;
	// TODO Parsing should ideally be done off of the main thread.
	hookSourceData.originalSourceAST = parse(runtimeSourceCode, {
	sourceType: 'unambiguous',
	plugins: ['jsx', 'typescript'],
	});

This will work for some simple usages of Flow, but syntax may diverge and cause the parsing to fail.

Let's scan the source code for a @flow pragma and pass "flow" instead of "typescript" if one is found.

---

We should also add tests for both Flow and TypeScript to the test component pool:
https://github.com/facebook/react/tree/main/packages/react-devtools-extensions/src/__tests__/__source__

[bvaughn]

I think something as basic as this should work:

function getBabelPluginsList(originalSourceCode: string): Array<string> {
  const plugin = originalSourceCode.indexOf('@flow') > 0 ? 'flow' : 'typescript';
  return ['jsx', plugin];
}