[compiler] Option to only compile component syntax
Summary: Projects which have heavily adopted Flow component syntax may wish to enable the compiler only for components and hooks that use the syntax, rather than trying to guess which functions are components and hooks. This provides that option. ghstack-source-id: 579ac9f0fa01d8cdb6a0b8f9923906a0b37662f3 Pull Request resolved: https://github.com/facebook/react/pull/29864
Mike Vitousek committed
Jun 11, 2024 at 14:08 UTC
3cd3735515e5efe8f0e2a73e3e241d436cd7aa41
2 files changed
+18
-11
compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts
+2
@@ -131,6 +131,8 @@ const CompilationModeSchema = z.enum([
131
* This is the default mode
132
*/
133
"infer",
134
+ // Compile only components using Flow component syntax and hooks using hook syntax.
135
+ "syntax",
136
// Compile only functions which are explicitly annotated with "use forget"
137
"annotation",
138
// Compile all top-level functions
compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
+16
-11
@@ -499,23 +499,28 @@ function getReactFunctionType(
499
return getComponentOrHookLike(fn, hookPattern) ?? "Other";
500
}
501
}
502
+
503
+ // Component and hook declarations are known components/hooks
504
+ let componentSyntaxType: ReactFunctionType | null = null;
505
+ if (fn.isFunctionDeclaration()) {
506
+ if (isComponentDeclaration(fn.node)) {
507
+ componentSyntaxType = "Component";
508
+ } else if (isHookDeclaration(fn.node)) {
509
+ componentSyntaxType = "Hook";
510
+ }
511
+ }
512
+
513
switch (pass.opts.compilationMode) {
514
case "annotation": {
515
// opt-ins are checked above
516
return null;
517
}
518
case "infer": {
508
- // Component and hook declarations are known components/hooks
509
- if (fn.isFunctionDeclaration()) {
510
- if (isComponentDeclaration(fn.node)) {
511
- return "Component";
512
- } else if (isHookDeclaration(fn.node)) {
513
- return "Hook";
514
- }
515
- }
516
-
517
- // Otherwise check if this is a component or hook-like function
518
- return getComponentOrHookLike(fn, hookPattern);
519
+ // Check if this is a component or hook-like function
520
+ return componentSyntaxType ?? getComponentOrHookLike(fn, hookPattern);
521
+ }
522
+ case "syntax": {
523
+ return componentSyntaxType;
524
}
525
case "all": {
526
// Compile only top level functions