Clarify how to address ValidateNoCapitalizedCalls errors

Make it clearer how to address this error by allowlisting globals that
are known to be safe

ghstack-source-id: e7fa6464ebb561a7a1366ff70430842007c6552e
Pull Request resolved: https://github.com/facebook/react-forget/pull/2909

compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoCapitalizedCalls.ts

@@ -28,6 +28,8 @@ export function validateNoCapitalizedCalls(fn: HIRFunction): void {
 
   const capitalLoadGlobals = new Map<IdentifierId, string>();
   const capitalizedProperties = new Map<IdentifierId, string>();
+  const reason =
+    "Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config";
   for (const [, block] of fn.body.blocks) {
     for (const { lvalue, value } of block.instructions) {
       switch (value.kind) {
@@ -49,8 +51,7 @@ export function validateNoCapitalizedCalls(fn: HIRFunction): void {
           const calleeName = capitalLoadGlobals.get(calleeIdentifier);
           if (calleeName != null) {
             CompilerError.throwInvalidReact({
-              reason:
-                "Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter",
+              reason,
               description: `${calleeName} may be a component.`,
               loc: value.loc,
               suggestions: null,
@@ -70,8 +71,7 @@ export function validateNoCapitalizedCalls(fn: HIRFunction): void {
           const propertyName = capitalizedProperties.get(propertyIdentifier);
           if (propertyName != null) {
             CompilerError.throwInvalidReact({
-              reason:
-                "Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter",
+              reason,
               description: `${propertyName} may be a component.`,
               loc: value.loc,
               suggestions: null,

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call-aliased.expect.md

@@ -17,7 +17,7 @@ function Foo() {
   2 | function Foo() {
   3 |   let x = Bar;
 > 4 |   x(); // ERROR
-    |   ^^^ InvalidReact: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Bar may be a component. (4:4)
+    |   ^^^ InvalidReact: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config. Bar may be a component. (4:4)
   5 | }
   6 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call.expect.md

@@ -18,7 +18,7 @@ function Component() {
   1 | // @validateNoCapitalizedCalls
   2 | function Component() {
 > 3 |   const x = SomeFunc();
-    |             ^^^^^^^^^^ InvalidReact: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. SomeFunc may be a component. (3:3)
+    |             ^^^^^^^^^^ InvalidReact: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config. SomeFunc may be a component. (3:3)
   4 |
   5 |   return x;
   6 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-method-call.expect.md

@@ -18,7 +18,7 @@ function Component() {
   1 | // @validateNoCapitalizedCalls
   2 | function Component() {
 > 3 |   const x = someGlobal.SomeFunc();
-    |             ^^^^^^^^^^^^^^^^^^^^^ InvalidReact: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. SomeFunc may be a component. (3:3)
+    |             ^^^^^^^^^^^^^^^^^^^^^ InvalidReact: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config. SomeFunc may be a component. (3:3)
   4 |
   5 |   return x;
   6 | }