@samitouri / QOS-React-1 / commits / b28c53dcf1

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

Lauren Tan committed May 6, 2024 at 20:13 UTC b28c53dcf10cdd0164aa860248be8305c0cda4c9
4 files changed +7 -7
compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoCapitalizedCalls.ts
+4 -4
@@ -28,6 +28,8 @@ export function validateNoCapitalizedCalls(fn: HIRFunction): void {
28
29 const capitalLoadGlobals = new Map<IdentifierId, string>();
30 const capitalizedProperties = new Map<IdentifierId, string>();
31 + const reason =
32 + "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";
33 for (const [, block] of fn.body.blocks) {
34 for (const { lvalue, value } of block.instructions) {
35 switch (value.kind) {
@@ -49,8 +51,7 @@ export function validateNoCapitalizedCalls(fn: HIRFunction): void {
51 const calleeName = capitalLoadGlobals.get(calleeIdentifier);
52 if (calleeName != null) {
53 CompilerError.throwInvalidReact({
52 - reason:
53 - "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",
54 + reason,
55 description: `${calleeName} may be a component.`,
56 loc: value.loc,
57 suggestions: null,
@@ -70,8 +71,7 @@ export function validateNoCapitalizedCalls(fn: HIRFunction): void {
71 const propertyName = capitalizedProperties.get(propertyIdentifier);
72 if (propertyName != null) {
73 CompilerError.throwInvalidReact({
73 - reason:
74 - "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",
74 + reason,
75 description: `${propertyName} may be a component.`,
76 loc: value.loc,
77 suggestions: null,
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call-aliased.expect.md
+1 -1
@@ -17,7 +17,7 @@ function Foo() {
17 2 | function Foo() {
18 3 | let x = Bar;
19 > 4 | x(); // ERROR
20 - | ^^^ 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)
20 + | ^^^ 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)
21 5 | }
22 6 |
23 ```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call.expect.md
+1 -1
@@ -18,7 +18,7 @@ function Component() {
18 1 | // @validateNoCapitalizedCalls
19 2 | function Component() {
20 > 3 | const x = SomeFunc();
21 - | ^^^^^^^^^^ 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)
21 + | ^^^^^^^^^^ 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)
22 4 |
23 5 | return x;
24 6 | }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-method-call.expect.md
+1 -1
@@ -18,7 +18,7 @@ function Component() {
18 1 | // @validateNoCapitalizedCalls
19 2 | function Component() {
20 > 3 | const x = someGlobal.SomeFunc();
21 - | ^^^^^^^^^^^^^^^^^^^^^ 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)
21 + | ^^^^^^^^^^^^^^^^^^^^^ 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)
22 4 |
23 5 | return x;
24 6 | }