From 7d0292e3bb5b479a1cda7ab74f00b997b85732ad Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 7 Jul 2021 14:21:00 -0400
Subject: [PATCH] DevTools named hooks: Support FLow syntax

Detect Flow pragma (@flow) and use Flow plug-in instead of TypeScript (default)
---
 packages/react-devtools-extensions/src/parseHookNames.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-extensions/src/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames.js
index dc2b8b3c4bc92..07ef08f810628 100644
--- a/packages/react-devtools-extensions/src/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames.js
@@ -560,10 +560,15 @@ async function parseSourceAST(
       hookSourceData.originalSourceAST = sourceMetadata.originalSourceAST;
       hookSourceData.originalSourceCode = sourceMetadata.originalSourceCode;
     } else {
+      // TypeScript is the most commonly used typed JS variant so let's default to it
+      // unless we detect explicit Flow usage via the "@flow" pragma.
+      const plugin =
+        originalSourceCode.indexOf('@flow') > 0 ? 'flow' : 'typescript';
+
       // TODO (named hooks) Parsing should ideally be done off of the main thread.
       const originalSourceAST = parse(originalSourceCode, {
         sourceType: 'unambiguous',
-        plugins: ['jsx', 'typescript'],
+        plugins: ['jsx', plugin],
       });
       hookSourceData.originalSourceAST = originalSourceAST;
       if (__DEBUG__) {