[Feat] no-danger: allow custom components as option for no-danger

Author: akulsr0

lib/rules/no-danger.js

@@ -43,7 +43,6 @@ const messages = {
   dangerousProp: 'Dangerous property \'{{name}}\' found',
 };
 
-/** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
   meta: {
     docs: {
@@ -55,13 +54,39 @@ module.exports = {
 
     messages,
 
-    schema: [],
+    schema: [{
+      type: 'object',
+      properties: {
+        checkCustomComponents: {
+          default: false,
+          type: 'boolean',
+        },
+        customComponentNames: {
+          items: {
+            type: 'string',
+          },
+          minItems: 1,
+          type: 'array',
+          uniqueItems: true,
+        },
+      },
+    }],
   },
 
   create(context) {
+    const configuration = context.options[0] || {};
+    const checkCustomComponents = configuration.checkCustomComponents;
+    const customComponentNames = configuration.customComponentNames;
+
     return {
       JSXAttribute(node) {
-        if (jsxUtil.isDOMComponent(node.parent) && isDangerous(node.name.name)) {
+        const functionName = node.parent.name.name;
+
+        const enableCheckingCustomComponent = customComponentNames
+          ? checkCustomComponents && customComponentNames.some((name) => functionName === name)
+          : checkCustomComponents;
+
+        if ((enableCheckingCustomComponent || jsxUtil.isDOMComponent(node.parent)) && isDangerous(node.name.name)) {
           report(context, messages.dangerousProp, 'dangerousProp', {
             node,
             data: {

tests/lib/rules/no-danger.js

@@ -32,6 +32,18 @@ ruleTester.run('no-danger', rule, {
     { code: '<App />;' },
     { code: '<App dangerouslySetInnerHTML={{ __html: "" }} />;' },
     { code: '<div className="bar"></div>;' },
+    { code: '<div className="bar"></div>;', options: [{ checkCustomComponents: false }] },
+    { code: '<div className="bar"></div>;', options: [{ checkCustomComponents: true }] },
+    { code: '<App />;', options: [{ checkCustomComponents: false }] },
+    { code: '<App dangerouslySetInnerHTML={{ __html: "" }} />;', options: [{ checkCustomComponents: false }] },
+    {
+      code: `
+        function App() {
+          return <Title dangerouslySetInnerHTML={{ __html: "<span>hello</span>" }} />;
+        }
+      `,
+      options: [{ checkCustomComponents: true, customComponentNames: ['Home'] }],
+    },
   ]),
   invalid: parsers.all([
     {
@@ -43,5 +55,29 @@ ruleTester.run('no-danger', rule, {
         },
       ],
     },
+    {
+      code: '<App dangerouslySetInnerHTML={{ __html: "<span>hello</span>" }} />;',
+      errors: [
+        {
+          messageId: 'dangerousProp',
+          data: { name: 'dangerouslySetInnerHTML' },
+        },
+      ],
+      options: [{ checkCustomComponents: true }],
+    },
+    {
+      code: `
+        function App() {
+          return <Title dangerouslySetInnerHTML={{ __html: "<span>hello</span>" }} />;
+        }
+      `,
+      errors: [
+        {
+          messageId: 'dangerousProp',
+          data: { name: 'dangerouslySetInnerHTML' },
+        },
+      ],
+      options: [{ checkCustomComponents: true, customComponentNames: ['Title'] }],
+    },
   ]),
 });