[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)
mofeiZ committed
Feb 16, 2023 at 11:54 UTC
55ca5fc26c4d6558477574feb71acf3221d611fc
1 file changed
+13
-3
compiler/forget/packages/playground/components/Editor/index.tsx
+13
-3
@@ -5,7 +5,7 @@
5
* LICENSE file in the root directory of this source tree.
6
*/
7
8
-import { parse } from "@babel/parser";
8
+import { parse, ParserPlugin } from "@babel/parser";
9
import traverse, { NodePath } from "@babel/traverse";
10
import * as t from "@babel/types";
11
import {
@@ -39,8 +39,18 @@ function parseFunctions(
39
): Array<NodePath<t.FunctionDeclaration>> {
40
const items: Array<NodePath<t.FunctionDeclaration>> = [];
41
try {
42
+ const isFlow = source
43
+ .trim()
44
+ .split("\n", 1)[0]
45
+ .match(/\s*\/\/\s*\@flow\s*/);
46
+ let type_transform: ParserPlugin;
47
+ if (isFlow) {
48
+ type_transform = "flow";
49
+ } else {
50
+ type_transform = "typescript";
51
+ }
52
const ast = parse(source, {
43
- plugins: ["typescript", "jsx"],
53
+ plugins: [type_transform, "jsx"],
54
sourceType: "module",
55
});
56
traverse(ast, {
@@ -150,7 +160,7 @@ export default function Editor() {
160
161
return (
162
<>
153
- <div className="flex basis relative top-14">
163
+ <div className="relative flex basis top-14">
164
<div
165
style={{ minWidth: 650 }}
166
className={clsx("relative sm:basis-1/4")}