[dx] Update capitalized call error messages
ghstack-source-id: dbc012018ecc73007dfb3e745615605512ab6867 Pull Request resolved: https://github.com/facebook/react-forget/pull/2870
Joe Savona committed
Apr 18, 2024 at 11:07 UTC
682f5a920a238ff87a317689d3f7e20fb3117fa6
4 files changed
+7
-5
compiler/packages/babel-plugin-react-forget/src/Validation/ValidateNoCapitalizedCalls.ts
+4
-2
@@ -49,7 +49,8 @@ export function validateNoCapitalizedCalls(fn: HIRFunction): void {
49
const calleeName = capitalLoadGlobals.get(calleeIdentifier);
50
if (calleeName != null) {
51
CompilerError.throwInvalidReact({
52
- reason: `Capitalized function calls may be calling components that use hooks, which make them dangerous to memoize. Ensure there are no hook calls in the function and rename it to begin with a lowercase letter to fix this error`,
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
description: `${calleeName} may be a component.`,
55
loc: value.loc,
56
suggestions: null,
@@ -69,7 +70,8 @@ export function validateNoCapitalizedCalls(fn: HIRFunction): void {
70
const propertyName = capitalizedProperties.get(propertyIdentifier);
71
if (propertyName != null) {
72
CompilerError.throwInvalidReact({
72
- reason: `Capitalized method calls may be calling components that use hooks, which make them dangerous to memoize. Ensure there are no hook calls in the function and rename it to begin with a lowercase letter to fix this error`,
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",
75
description: `${propertyName} may be a component.`,
76
loc: value.loc,
77
suggestions: null,
compiler/packages/babel-plugin-react-forget/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 function calls may be calling components that use hooks, which make them dangerous to memoize. Ensure there are no hook calls in the function and rename it to begin with a lowercase letter to fix this error. 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. Bar may be a component. (4:4)
21
5 | }
22
6 |
23
```
compiler/packages/babel-plugin-react-forget/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 function calls may be calling components that use hooks, which make them dangerous to memoize. Ensure there are no hook calls in the function and rename it to begin with a lowercase letter to fix this error. 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. SomeFunc may be a component. (3:3)
22
4 |
23
5 | return x;
24
6 | }
compiler/packages/babel-plugin-react-forget/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 method calls may be calling components that use hooks, which make them dangerous to memoize. Ensure there are no hook calls in the function and rename it to begin with a lowercase letter to fix this error. 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. SomeFunc may be a component. (3:3)
22
4 |
23
5 | return x;
24
6 | }