@samitouri / QOS-React / commits / b28c53dcf1
Fork 0

The library for web and native user interfaces.

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 | }