From 55ca5fc26c4d6558477574feb71acf3221d611fc Mon Sep 17 00:00:00 2001
From: mofeiZ <34200447+mofeiZ@users.noreply.github.com>
Date: Thu, 16 Feb 2023 11:54:27 -0500
Subject: [PATCH] [playground] add flow parsing

I don't think there is a monaco config to parse flow (for IDE integration), but
now we should be able to parse flow for the Forget compiler.

Since typescript and flow has different parsing rules, playground will only use
flow parser if `// @flow` is at the top of the file.

Test:
[link](https://react-forget-playground-j7nd7j8cv-fbopensource.vercel.app/#eyJzb3VyY2UiOiIvLyBAZmxvd1xuZnVuY3Rpb24gQ29tcG9uZW50KHByb3BzKSB7XG4gIGxldCB4ID0gKHByb3BzOiBudW1iZXIpO1xuICByZXR1cm4geDtcbn1cbiJ9)
---
 .../playground/components/Editor/index.tsx       | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/compiler/forget/packages/playground/components/Editor/index.tsx b/compiler/forget/packages/playground/components/Editor/index.tsx
index dd8e8cee3d..3ab6e36ce0 100644
--- a/compiler/forget/packages/playground/components/Editor/index.tsx
+++ b/compiler/forget/packages/playground/components/Editor/index.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { parse } from "@babel/parser";
+import { parse, ParserPlugin } from "@babel/parser";
 import traverse, { NodePath } from "@babel/traverse";
 import * as t from "@babel/types";
 import {
@@ -39,8 +39,18 @@ function parseFunctions(
 ): Array<NodePath<t.FunctionDeclaration>> {
   const items: Array<NodePath<t.FunctionDeclaration>> = [];
   try {
+    const isFlow = source
+      .trim()
+      .split("\n", 1)[0]
+      .match(/\s*\/\/\s*\@flow\s*/);
+    let type_transform: ParserPlugin;
+    if (isFlow) {
+      type_transform = "flow";
+    } else {
+      type_transform = "typescript";
+    }
     const ast = parse(source, {
-      plugins: ["typescript", "jsx"],
+      plugins: [type_transform, "jsx"],
       sourceType: "module",
     });
     traverse(ast, {
@@ -150,7 +160,7 @@ export default function Editor() {
 
   return (
     <>
-      <div className="flex basis relative top-14">
+      <div className="relative flex basis top-14">
         <div
           style={{ minWidth: 650 }}
           className={clsx("relative sm:basis-1/4")}