From 682f5a920a238ff87a317689d3f7e20fb3117fa6 Mon Sep 17 00:00:00 2001 From: Joe Savona Date: Thu, 18 Apr 2024 11:07:10 -0700 Subject: [PATCH] [dx] Update capitalized call error messages ghstack-source-id: dbc012018ecc73007dfb3e745615605512ab6867 Pull Request resolved: https://github.com/facebook/react-forget/pull/2870 --- .../src/Validation/ValidateNoCapitalizedCalls.ts | 6 ++++-- .../error.capitalized-function-call-aliased.expect.md | 2 +- .../compiler/error.capitalized-function-call.expect.md | 2 +- .../compiler/error.capitalized-method-call.expect.md | 2 +- 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/compiler/packages/babel-plugin-react-forget/src/Validation/ValidateNoCapitalizedCalls.ts b/compiler/packages/babel-plugin-react-forget/src/Validation/ValidateNoCapitalizedCalls.ts index 17c156267d..96ec3cf899 100644 --- a/compiler/packages/babel-plugin-react-forget/src/Validation/ValidateNoCapitalizedCalls.ts +++ b/compiler/packages/babel-plugin-react-forget/src/Validation/ValidateNoCapitalizedCalls.ts @@ -49,7 +49,8 @@ export function validateNoCapitalizedCalls(fn: HIRFunction): void { const calleeName = capitalLoadGlobals.get(calleeIdentifier); if (calleeName != null) { CompilerError.throwInvalidReact({ - 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`, + 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", description: `${calleeName} may be a component.`, loc: value.loc, suggestions: null, @@ -69,7 +70,8 @@ export function validateNoCapitalizedCalls(fn: HIRFunction): void { const propertyName = capitalizedProperties.get(propertyIdentifier); if (propertyName != null) { CompilerError.throwInvalidReact({ - 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`, + 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", description: `${propertyName} may be a component.`, loc: value.loc, suggestions: null, diff --git a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.capitalized-function-call-aliased.expect.md b/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.capitalized-function-call-aliased.expect.md index 66aca1702a..3fb394fb2e 100644 --- a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.capitalized-function-call-aliased.expect.md +++ b/compiler/packages/babel-plugin-react-forget/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 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) + | ^^^ 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) 5 | } 6 | ``` diff --git a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.capitalized-function-call.expect.md b/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.capitalized-function-call.expect.md index 9add8315db..e6e6d1b924 100644 --- a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.capitalized-function-call.expect.md +++ b/compiler/packages/babel-plugin-react-forget/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 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) + | ^^^^^^^^^^ 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) 4 | 5 | return x; 6 | } diff --git a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.capitalized-method-call.expect.md b/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.capitalized-method-call.expect.md index 813c6dab5e..a5c5fb842a 100644 --- a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.capitalized-method-call.expect.md +++ b/compiler/packages/babel-plugin-react-forget/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 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) + | ^^^^^^^^^^^^^^^^^^^^^ 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) 4 | 5 | return x; 6 | }