[compiler] Fix error description inconsistency

compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts

@@ -141,11 +141,10 @@ export class CompilerDiagnostic {
   }
 
   printErrorMessage(source: string, options: PrintErrorMessageOptions): string {
-    const buffer = [
-      printErrorSummary(this.category, this.reason),
-      '\n\n',
-      this.description,
-    ];
+    const buffer = [printErrorSummary(this.category, this.reason)];
+    if (this.description != null) {
+      buffer.push('\n\n', `${this.description}.`);
+    }
     for (const detail of this.options.details) {
       switch (detail.kind) {
         case 'error': {

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Imports.ts

@@ -256,7 +256,7 @@ export function addImportsToProgram(
         {
           reason:
             'Encountered conflicting import specifiers in generated program',
-          description: `Conflict from import ${loweredImport.module}:(${loweredImport.imported} as ${loweredImport.name}).`,
+          description: `Conflict from import ${loweredImport.module}:(${loweredImport.imported} as ${loweredImport.name})`,
           details: [
             {
               kind: 'error',

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/ValidateNoUntransformedReferences.ts

@@ -96,7 +96,7 @@ function assertValidEffectImportReference(
             reason:
               'Cannot infer dependencies of this effect. This will break your build!',
             description:
-              'To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.' +
+              'To resolve, either pass a dependency array or fix reported compiler bailout diagnostics' +
               (maybeErrorDiagnostic ? ` ${maybeErrorDiagnostic}` : ''),
             details: [
               {
@@ -128,9 +128,7 @@ function assertValidFireImportReference(
         reason: '[Fire] Untransformed reference to compiler-required feature.',
         description:
           'Either remove this `fire` call or ensure it is successfully transformed by the compiler' +
-          maybeErrorDiagnostic
-            ? ` ${maybeErrorDiagnostic}`
-            : '',
+          (maybeErrorDiagnostic != null ? ` ${maybeErrorDiagnostic}` : ''),
         details: [
           {
             kind: 'error',

compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts

@@ -109,7 +109,7 @@ export function lower(
           CompilerDiagnostic.create({
             category: ErrorCategory.Invariant,
             reason: 'Could not find binding',
-            description: `[BuildHIR] Could not find binding for param \`${param.node.name}\`.`,
+            description: `[BuildHIR] Could not find binding for param \`${param.node.name}\``,
           }).withDetails({
             kind: 'error',
             loc: param.node.loc ?? null,
@@ -173,7 +173,7 @@ export function lower(
         CompilerDiagnostic.create({
           category: ErrorCategory.Todo,
           reason: `Handle ${param.node.type} parameters`,
-          description: `[BuildHIR] Add support for ${param.node.type} parameters.`,
+          description: `[BuildHIR] Add support for ${param.node.type} parameters`,
         }).withDetails({
           kind: 'error',
           loc: param.node.loc ?? null,
@@ -204,7 +204,7 @@ export function lower(
       CompilerDiagnostic.create({
         category: ErrorCategory.Syntax,
         reason: `Unexpected function body kind`,
-        description: `Expected function body to be an expression or a block statement, got \`${body.type}\`.`,
+        description: `Expected function body to be an expression or a block statement, got \`${body.type}\``,
       }).withDetails({
         kind: 'error',
         loc: body.node.loc ?? null,

compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts

@@ -460,7 +460,7 @@ export function dropManualMemoization(
                       manualMemo.loadInstr.value.kind === 'PropertyLoad'
                         ? 'React.useMemo'
                         : 'useMemo'
-                    } callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects.`,
+                    } callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects`,
                     suggestions: null,
                   }).withDetails({
                     kind: 'error',

compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts

@@ -473,7 +473,7 @@ function applySignature(
             const diagnostic = CompilerDiagnostic.create({
               category: ErrorCategory.Immutability,
               reason: 'This value cannot be modified',
-              description: `${reason}.`,
+              description: reason,
             }).withDetails({
               kind: 'error',
               loc: effect.value.loc,
@@ -1094,7 +1094,7 @@ function applyEffect(
           const diagnostic = CompilerDiagnostic.create({
             category: ErrorCategory.Immutability,
             reason: 'Cannot access variable before it is declared',
-            description: `${variable ?? 'This variable'} is accessed before it is declared, which prevents the earlier access from updating when this value changes over time.`,
+            description: `${variable ?? 'This variable'} is accessed before it is declared, which prevents the earlier access from updating when this value changes over time`,
           });
           if (hoistedAccess != null && hoistedAccess.loc != effect.value.loc) {
             diagnostic.withDetails({
@@ -1133,7 +1133,7 @@ function applyEffect(
           const diagnostic = CompilerDiagnostic.create({
             category: ErrorCategory.Immutability,
             reason: 'This value cannot be modified',
-            description: `${reason}.`,
+            description: reason,
           }).withDetails({
             kind: 'error',
             loc: effect.value.loc,
@@ -2269,7 +2269,7 @@ function computeEffectsForLegacySignature(
           'This API returns functions which cannot be memoized without leading to stale UI. ' +
             'To prevent this, by default React Compiler will skip memoizing this component/hook. ' +
             'However, you may see issues if values from this API are passed to other components/hooks that are ' +
-            'memoized.',
+            'memoized',
         ].join(''),
       }).withDetails({
         kind: 'error',

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AssertScopeInstructionsWithinScope.ts

@@ -83,7 +83,7 @@ class CheckInstructionsAgainstScopesVisitor extends ReactiveFunctionVisitor<
       CompilerError.invariant(false, {
         reason:
           'Encountered an instruction that should be part of a scope, but where that scope has already completed',
-        description: `Instruction [${id}] is part of scope @${scope.id}, but that scope has already completed.`,
+        description: `Instruction [${id}] is part of scope @${scope.id}, but that scope has already completed`,
         details: [
           {
             kind: 'error',

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

@@ -39,7 +39,7 @@ export function validateLocalsNotReassignedAfterRender(fn: HIRFunction): void {
       CompilerDiagnostic.create({
         category: ErrorCategory.Immutability,
         reason: 'Cannot reassign variable after render completes',
-        description: `Reassigning ${variable} after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.`,
+        description: `Reassigning ${variable} after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead`,
       }).withDetails({
         kind: 'error',
         loc: reassignment.loc,

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

@@ -59,7 +59,7 @@ export function validateNoCapitalizedCalls(
             CompilerError.throwInvalidReact({
               category: ErrorCategory.CapitalizedCalls,
               reason,
-              description: `${calleeName} may be a component.`,
+              description: `${calleeName} may be a component`,
               loc: value.loc,
               suggestions: null,
             });
@@ -83,7 +83,7 @@ export function validateNoCapitalizedCalls(
             errors.push({
               category: ErrorCategory.CapitalizedCalls,
               reason,
-              description: `${propertyName} may be a component.`,
+              description: `${propertyName} may be a component`,
               loc: value.loc,
               suggestions: null,
             });

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

@@ -67,7 +67,7 @@ export function validateNoFreezingKnownMutableFunctions(
           CompilerDiagnostic.create({
             category: ErrorCategory.Immutability,
             reason: 'Cannot modify local variables after render completes',
-            description: `This argument is a function which may reassign or mutate ${variable} after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.`,
+            description: `This argument is a function which may reassign or mutate ${variable} after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead`,
           })
             .withDetails({
               kind: 'error',

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

@@ -304,7 +304,7 @@ function validateInferredDep(
               errorDiagnostic
                 ? getCompareDependencyResultDescription(errorDiagnostic)
                 : 'Inferred dependency not present in source'
-            }.`
+            }`
           : '',
       ]
         .join('')
@@ -551,7 +551,7 @@ class Visitor extends ReactiveFunctionVisitor<VisitorState> {
               reason: 'Existing memoization could not be preserved',
               description: [
                 'React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. ',
-                'This dependency may be mutated later, which could cause the value to change unexpectedly.',
+                'This dependency may be mutated later, which could cause the value to change unexpectedly',
               ].join(''),
             }).withDetails({
               kind: 'error',
@@ -603,7 +603,7 @@ class Visitor extends ReactiveFunctionVisitor<VisitorState> {
                   category: ErrorCategory.PreserveManualMemo,
                   reason: 'Existing memoization could not be preserved',
                   description: [
-                    'React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output. ',
+                    'React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output',
                     DEBUG
                       ? `${printIdentifier(identifier)} was not memoized.`
                       : '',

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

@@ -67,7 +67,7 @@ export function validateStaticComponents(
                 CompilerDiagnostic.create({
                   category: ErrorCategory.StaticComponents,
                   reason: 'Cannot create components during render',
-                  description: `Components created during render will reset their state each time they are created. Declare components outside of render. `,
+                  description: `Components created during render will reset their state each time they are created. Declare components outside of render`,
                 })
                   .withDetails({
                     kind: 'error',

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

@@ -77,7 +77,7 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {
                 category: ErrorCategory.UseMemo,
                 reason: 'useMemo() callbacks may not accept parameters',
                 description:
-                  'useMemo() callbacks are called by React to cache calculations across re-renders. They should not take parameters. Instead, directly reference the props, state, or local variables needed for the computation.',
+                  'useMemo() callbacks are called by React to cache calculations across re-renders. They should not take parameters. Instead, directly reference the props, state, or local variables needed for the computation',
                 suggestions: null,
               }).withDetails({
                 kind: 'error',
@@ -94,7 +94,7 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {
                 reason:
                   'useMemo() callbacks may not be async or generator functions',
                 description:
-                  'useMemo() callbacks are called once and must synchronously return a value.',
+                  'useMemo() callbacks are called once and must synchronously return a value',
                 suggestions: null,
               }).withDetails({
                 kind: 'error',

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ecma/error.reserved-words.expect.md

@@ -26,7 +26,7 @@ Found 1 error:
 
 Compilation Skipped: `this` is not supported syntax
 
-React Compiler does not support compiling functions that use `this`
+React Compiler does not support compiling functions that use `this`.
 
 error.reserved-words.ts:8:28
    6 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.expect.md

@@ -19,7 +19,7 @@ Found 1 error:
 
 Error: Cannot reassign variables declared outside of the component/hook
 
-Variable `someGlobal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
+Variable `someGlobal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).
 
 error.assign-global-in-component-tag-function.ts:3:4
   1 | function Component() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.expect.md

@@ -22,7 +22,7 @@ Found 1 error:
 
 Error: Cannot reassign variables declared outside of the component/hook
 
-Variable `someGlobal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
+Variable `someGlobal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).
 
 error.assign-global-in-jsx-children.ts:3:4
   1 | function Component() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-flow-suppression.expect.md

@@ -20,7 +20,7 @@ Found 1 error:
 
 Error: React Compiler has skipped optimizing this component because one or more React rule violations were reported by Flow
 
-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `$FlowFixMe[react-rule-hook]`
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `$FlowFixMe[react-rule-hook]`.
 
 error.bailout-on-flow-suppression.ts:4:2
   2 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.expect.md

@@ -23,7 +23,7 @@ Found 2 errors:
 
 Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
 
-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable my-app/react-rule`
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable my-app/react-rule`.
 
 error.bailout-on-suppression-of-custom-rule.ts:3:0
   1 | // @eslintSuppressionRules:["my-app","react-rule"]
@@ -36,7 +36,7 @@ error.bailout-on-suppression-of-custom-rule.ts:3:0
 
 Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
 
-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable-next-line my-app/react-rule`
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable-next-line my-app/react-rule`.
 
 error.bailout-on-suppression-of-custom-rule.ts:7:2
    5 |   'use forget';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-infer-mutation-aliasing-effects.expect.md

@@ -31,7 +31,7 @@ Found 1 error:
 
 Invariant: [InferMutationAliasingEffects] Expected value kind to be initialized
 
-<unknown> thunk$14
+<unknown> thunk$14.
 
 error.bug-infer-mutation-aliasing-effects.ts:10:22
    8 |     function thunk(action) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-codegen-methodcall.expect.md

@@ -18,8 +18,6 @@ Found 1 error:
 
 Invariant: [Codegen] Internal error: MethodCall::property must be an unpromoted + unmemoized MemberExpression
 
-
-
 error.bug-invariant-codegen-methodcall.ts:3:17
   1 | const YearsAndMonthsSince = () => {
   2 |   const diff = foo();

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-expected-consistent-destructuring.expect.md

@@ -29,7 +29,7 @@ Found 1 error:
 
 Invariant: Expected consistent kind for destructuring
 
-Other places were `Reassign` but 'mutate? #t8$46[7:9]{reactive}' is const
+Other places were `Reassign` but 'mutate? #t8$46[7:9]{reactive}' is const.
 
 error.bug-invariant-expected-consistent-destructuring.ts:9:9
    7 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-local-or-context-references.expect.md

@@ -31,7 +31,7 @@ Found 1 error:
 
 Invariant: Expected all references to a variable to be consistently local or context references
 
-Identifier <unknown> err$7 is referenced as a context variable, but was previously referenced as a local variable
+Identifier <unknown> err$7 is referenced as a context variable, but was previously referenced as a local variable.
 
 error.bug-invariant-local-or-context-references.ts:15:13
   13 |     setState(_prevState => ({

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unexpected-terminal-in-optional.expect.md

@@ -21,8 +21,6 @@ Found 1 error:
 
 Invariant: Unexpected terminal in optional
 
-
-
 error.bug-invariant-unexpected-terminal-in-optional.ts:3:16
   1 | const Foo = ({json}) => {
   2 |   try {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unnamed-temporary.expect.md

@@ -24,7 +24,7 @@ Found 1 error:
 
 Invariant: Expected temporaries to be promoted to named identifiers in an earlier pass
 
-identifier 15 is unnamed
+identifier 15 is unnamed.
 ```
 
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.call-args-destructuring-asignment-complex.expect.md

@@ -18,8 +18,6 @@ Found 1 error:
 
 Invariant: Const declaration cannot be referenced as an expression
 
-
-
 error.call-args-destructuring-asignment-complex.ts:3:9
   1 | function Component(props) {
   2 |   let x = makeObject();

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

@@ -18,7 +18,7 @@ Found 1 error:
 
 Error: 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..
+Bar may be a component.
 
 error.capitalized-function-call-aliased.ts:4:2
   2 | function Foo() {

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

@@ -19,7 +19,7 @@ Found 1 error:
 
 Error: 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..
+SomeFunc may be a component.
 
 error.capitalized-function-call.ts:3:12
   1 | // @validateNoCapitalizedCalls

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

@@ -19,7 +19,7 @@ Found 1 error:
 
 Error: 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..
+SomeFunc may be a component.
 
 error.capitalized-method-call.ts:3:12
   1 | // @validateNoCapitalizedCalls