Improve S6478 (no-unstable-nested-components): Replace message and refine location

its/ruling/src/test/expected/jsts/eigen/typescript-S6478.json

@@ -35,8 +35,8 @@
 62
 ],
 "eigen:src/app/Components/ReadMore.tsx": [
-59,
-75
+63,
+79
 ],
 "eigen:src/app/Components/RetryErrorBoundary.tsx": [
 39

packages/jsts/src/rules/S6478/cb.fixture.jsx

@@ -1,41 +1,26 @@
-function Component() {
-    function UnstableNestedComponent() { // Noncompliant {{Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state. Instead, move this component definition out of the parent component “Component” and pass data as props.}}
+function Component1() {
+    function NestedComponent1() { // Noncompliant {{Move this component definition out of the parent component and pass data as props.}}
+//           ^^^^^^^^^^^^^^^^
         return <div />;
     }
     return (
         <div>
-            <UnstableNestedComponent />
+            <NestedComponent1 />
         </div>
     );
 }
 
-function SomeComponent({ footer: Footer }) {
-    return (
-        <div>
-            <Footer />
-        </div>
-    );
-}
-
-function Component() {
-    return (
-        <div>
-            <SomeComponent footer={ () => <div /> } /> { /* Noncompliant {{Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state. Instead, move this component definition out of the parent component “Component” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true.}} */ }
-        </div>
-    );
-}
-
-class Component extends React.Component {
-    render() {
-        function UnstableNestedComponent() { { /* Noncompliant {{Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state. Instead, move this component definition out of the parent component “Component” and pass data as props.}} */ }
+function Component2() {
+    class NestedComponent2 extends React.Component { // Noncompliant
+//        ^^^^^^^^^^^^^^^^
+        render() {
             return <div />;
         }
+    };
 
-        return (
-            <div>
-                <UnstableNestedComponent />
-            </div>
-        );
-    }
+    return (
+      <div>
+        <NestedComponent2 />
+      </div>
+    );
 }
-

packages/jsts/src/rules/S6478/decorator.ts

@@ -20,23 +20,42 @@
 // https://sonarsource.github.io/rspec/#/rspec/S6478/javascript
 
 import { Rule } from 'eslint';
-import { interceptReportForReact } from '../helpers';
+import * as estree from 'estree';
+import { RuleContext, functionLike, interceptReportForReact } from '../helpers';
+import { getMainFunctionTokenLocation } from 'eslint-plugin-sonarjs/lib/utils/locations';
+import { TSESTree } from '@typescript-eslint/experimental-utils';
 
 export function decorate(rule: Rule.RuleModule): Rule.RuleModule {
-  return interceptReportForReact(rule, changeMessageWith(urlRemover()));
-}
+  return interceptReportForReact(rule, (context, report) => {
+    const message =
+      'Move this component definition out of the parent component and pass data as props.';
+    const { node } = report as { node: estree.Node };
+    const loc = getMainNodeLocation(node, context);
+    if (loc) {
+      context.report({ ...report, loc, message });
+    } else {
+      context.report({ ...report, message });
+    }
+  });
 
-function changeMessageWith(messageChanger: (message: string) => string) {
-  return (context: Rule.RuleContext, reportDescriptor: Rule.ReportDescriptor) => {
-    const report = reportDescriptor as { message?: string };
-    if (report.message) {
-      report.message = messageChanger(report.message);
+  function getMainNodeLocation(node: estree.Node, context: Rule.RuleContext) {
+    /* class components */
+    if (node.type === 'ClassDeclaration' || node.type === 'ClassExpression') {
+      if (node.id) {
+        return node.id.loc;
+      } else {
+        return context.sourceCode.getFirstToken(node, token => token.value === 'class')?.loc;
+      }
+    }
+
+    /* functional components */
+    if (functionLike.has(node.type)) {
+      const fun = node as unknown as TSESTree.FunctionLike;
+      const ctx = context as unknown as RuleContext;
+      return getMainFunctionTokenLocation(fun, fun.parent, ctx) as estree.SourceLocation;
     }
-    context.report(reportDescriptor);
-  };
-}
 
-function urlRemover() {
-  const urlRegexp = / \(https:[^)]+\)/;
-  return (message: string) => message.replace(urlRegexp, '');
+    /* should not happen */
+    return node.loc;
+  }
 }