[Fix] no-unknown-property: avoid warning on fbt nodes entirely

Fixes #3391
jsx-eslint · Sep 4, 2022 · d2c9bef · mrtnzlml · Sep 4, 2022 · d2c9bef
1 parent 18b2b59
commit d2c9bef
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 38 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,11 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ## Unreleased
 
+### Fixed
+* [`no-unknown-property`]: avoid warning on `fbt` nodes entirely ([#3391][] @ljharb)
+
+[#3391]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3391
+
 ## [7.31.6] - 2022.09.04
 
 ### Fixed

diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
@@ -502,60 +502,63 @@ module.exports = {
 
         const tagName = getTagName(node);
 
-        // Let's dive deeper into tags that are HTML/DOM elements (`<button>`), and not React components (`<Button />`)
-        if (isValidHTMLTagInJSX(node)) {
-          // Some attributes are allowed on some tags only
-          const allowedTags = has(ATTRIBUTE_TAGS_MAP, name) ? ATTRIBUTE_TAGS_MAP[name] : null;
-          if (tagName && allowedTags) {
-            // Scenario 1A: Allowed attribute found where not supposed to, report it
-            if (allowedTags.indexOf(tagName) === -1) {
-              report(context, messages.invalidPropOnTag, 'invalidPropOnTag', {
-                node,
-                data: {
-                  name,
-                  tagName,
-                  allowedTags: allowedTags.join(', '),
-                },
-              });
-            }
-            // Scenario 1B: There are allowed attributes on allowed tags, no need to report it
-            return;
-          }
-
-          // Let's see if the attribute is a close version to some standard property name
-          const standardName = getStandardName(name, context);
+        if (tagName === 'fbt') { return; } // fbt nodes are bonkers, let's not go there
 
-          const hasStandardNameButIsNotUsed = standardName && standardName !== name;
-          const usesStandardName = standardName && standardName === name;
+        if (!isValidHTMLTagInJSX(node)) { return; }
 
-          if (usesStandardName) {
-            // Scenario 2A: The attribute name is the standard name, no need to report it
-            return;
-          }
+        // Let's dive deeper into tags that are HTML/DOM elements (`<button>`), and not React components (`<Button />`)
 
-          if (hasStandardNameButIsNotUsed) {
-            // Scenario 2B: The name of the attribute is close to a standard one, report it with the standard name
-            report(context, messages.unknownPropWithStandardName, 'unknownPropWithStandardName', {
+        // Some attributes are allowed on some tags only
+        const allowedTags = has(ATTRIBUTE_TAGS_MAP, name) ? ATTRIBUTE_TAGS_MAP[name] : null;
+        if (tagName && allowedTags) {
+          // Scenario 1A: Allowed attribute found where not supposed to, report it
+          if (allowedTags.indexOf(tagName) === -1) {
+            report(context, messages.invalidPropOnTag, 'invalidPropOnTag', {
               node,
               data: {
                 name,
-                standardName,
-              },
-              fix(fixer) {
-                return fixer.replaceText(node.name, standardName);
+                tagName,
+                allowedTags: allowedTags.join(', '),
               },
             });
-            return;
           }
+          // Scenario 1B: There are allowed attributes on allowed tags, no need to report it
+          return;
+        }
+
+        // Let's see if the attribute is a close version to some standard property name
+        const standardName = getStandardName(name, context);
 
-          // Scenario 3: We have an attribute that is unknown, report it
-          report(context, messages.unknownProp, 'unknownProp', {
+        const hasStandardNameButIsNotUsed = standardName && standardName !== name;
+        const usesStandardName = standardName && standardName === name;
+
+        if (usesStandardName) {
+          // Scenario 2A: The attribute name is the standard name, no need to report it
+          return;
+        }
+
+        if (hasStandardNameButIsNotUsed) {
+          // Scenario 2B: The name of the attribute is close to a standard one, report it with the standard name
+          report(context, messages.unknownPropWithStandardName, 'unknownPropWithStandardName', {
             node,
             data: {
               name,
+              standardName,
+            },
+            fix(fixer) {
+              return fixer.replaceText(node.name, standardName);
             },
           });
+          return;
         }
+
+        // Scenario 3: We have an attribute that is unknown, report it
+        report(context, messages.unknownProp, 'unknownProp', {
+          node,
+          data: {
+            name,
+          },
+        });
       },
     };
   },

diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
@@ -112,6 +112,9 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<link as="audio">Audio content</link>' },
     { code: '<video controls={this.controls} loop={true} muted={false} src={this.videoSrc} playsInline={true}></video>' },
     { code: '<audio controls={this.controls} crossOrigin="anonymous" disableRemotePlayback loop muted preload="none" src="something" onAbort={this.abort} onDurationChange={this.durationChange} onEmptied={this.emptied} onEnded={this.end} onError={this.error}></audio>' },
+
+    // fbt
+    { code: '<fbt desc="foo" doNotExtract />;' },
   ]),
   invalid: parsers.all([
     {