[Fix] no-unknown-property: add properties onToggle, fill, as, and pointer events

Author: sjarva

CHANGELOG.md

@@ -5,6 +5,11 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ## Unreleased
 
+### Fixed
+* [`no-unknown-property`]: add properties `onToggle`, `fill`, `as`, and pointer events ([#3385][] @sjarva)
+
+[#3385]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3385
+
 ## [7.31.4] - 2022.09.04
 
 ### Fixed

lib/rules/no-unknown-property.js

@@ -30,9 +30,31 @@ const ATTRIBUTE_TAGS_MAP = {
   checked: ['input'],
   // image is required for SVG support, all other tags are HTML.
   crossOrigin: ['script', 'img', 'video', 'audio', 'link', 'image'],
-  fill: ['svg'],
+  fill: [ // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill
+    // Fill color
+    'altGlyph',
+    'circle',
+    'ellipse',
+    'g',
+    'path',
+    'polygon',
+    'polyline',
+    'rect',
+    'svg',
+    'text',
+    'textPath',
+    'tref',
+    'tspan',
+    // Animation final state
+    'animate',
+    'animateColor',
+    'animateMotion',
+    'animateTransform',
+    'set',
+  ],
   property: ['meta'],
   viewBox: ['svg'],
+  as: ['link'],
 };
 
 const SVGDOM_ATTRIBUTE_NAMES = {
@@ -127,7 +149,7 @@ const DOM_PROPERTY_NAMES_ONE_WORD = [
   // Element specific attributes
   // See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes (includes global attributes too)
   // To be considered if these should be added also to ATTRIBUTE_TAGS_MAP
-  'accept', 'action', 'allow', 'alt', 'async', 'buffered', 'capture', 'challenge', 'cite', 'code', 'cols',
+  'accept', 'action', 'allow', 'alt', 'as', 'async', 'buffered', 'capture', 'challenge', 'cite', 'code', 'cols',
   'content', 'coords', 'csp', 'data', 'decoding', 'default', 'defer', 'disabled', 'form',
   'headers', 'height', 'high', 'href', 'icon', 'importance', 'integrity', 'kind', 'label',
   'language', 'loading', 'list', 'loop', 'low', 'max', 'media', 'method', 'min', 'multiple', 'muted',
@@ -168,7 +190,7 @@ const DOM_PROPERTY_NAMES_TWO_WORDS = [
   'onCompositionUpdate', 'onCut', 'onDoubleClick', 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragExit', 'onDragLeave',
   'onError', 'onFocus', 'onInput', 'onKeyDown', 'onKeyPress', 'onKeyUp', 'onLoad', 'onWheel', 'onDragOver',
   'onDragStart', 'onDrop', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver',
-  'onMouseUp', 'onPaste', 'onScroll', 'onSelect', 'onSubmit', 'onTransitionEnd', 'radioGroup', 'readOnly', 'referrerPolicy',
+  'onMouseUp', 'onPaste', 'onScroll', 'onSelect', 'onSubmit', 'onToggle', 'onTransitionEnd', 'radioGroup', 'readOnly', 'referrerPolicy',
   'rowSpan', 'srcDoc', 'srcLang', 'srcSet', 'useMap',
   // SVG attributes
   // See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
@@ -226,11 +248,28 @@ const ARIA_PROPERTIES = [
   'aria-posinset', 'aria-rowcount', 'aria-rowindex', 'aria-rowindextext', 'aria-rowspan', 'aria-setsize',
 ];
 
+const REACT_ON_PROPS = [
+  'onGotPointerCapture',
+  'onLostPointerCapture',
+  'onPointerCancel',
+  'onPointerDown',
+  'onPointerEnter',
+  'onPointerLeave',
+  'onPointerMove',
+  'onPointerOut',
+  'onPointerOver',
+  'onPointerUp',
+];
+
 function getDOMPropertyNames(context) {
   const ALL_DOM_PROPERTY_NAMES = DOM_PROPERTY_NAMES_TWO_WORDS.concat(DOM_PROPERTY_NAMES_ONE_WORD);
   // this was removed in React v16.1+, see https://github.com/facebook/react/pull/10823
   if (!testReactVersion(context, '>= 16.1.0')) {
-    return ['allowTransparency'].concat(ALL_DOM_PROPERTY_NAMES);
+    return ALL_DOM_PROPERTY_NAMES.concat('allowTransparency');
+  }
+  // these were added in React v16.4.0, see https://reactjs.org/blog/2018/05/23/react-v-16-4.html and https://github.com/facebook/react/pull/12507
+  if (testReactVersion(context, '>= 16.4.0')) {
+    return ALL_DOM_PROPERTY_NAMES.concat(REACT_ON_PROPS);
   }
   return ALL_DOM_PROPERTY_NAMES;
 }

tests/lib/rules/no-unknown-property.js

@@ -51,8 +51,11 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<input key="bar" type="radio" />' },
     { code: '<button disabled>You cannot click me</button>;' },
     { code: '<svg key="lock" viewBox="box" fill={10} d="d" stroke={1} strokeWidth={2} strokeLinecap={3} strokeLinejoin={4} transform="something" clipRule="else" x1={5} x2="6" y1="7" y2="8"></svg>' },
+    { code: '<g fill="#7B82A0" fillRule="evenodd"></g>' },
     { code: '<meta property="og:type" content="website" />' },
     { code: '<input type="checkbox" checked={checked} disabled={disabled} id={id} onChange={onChange} />' },
+    // React related attributes
+    { code: '<div onPointerDown={this.onDown} onPointerUp={this.onUp} />' },
     // Case ignored attributes, for `charset` discussion see https://github.com/jsx-eslint/eslint-plugin-react/pull/1863
     { code: '<meta charset="utf-8" />;' },
     { code: '<meta charSet="utf-8" />;' },
@@ -82,6 +85,9 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<script crossOrigin />' },
     { code: '<audio crossOrigin />' },
     { code: '<svg><image crossOrigin /></svg>' },
+    { code: '<details onToggle={this.onToggle}>Some details</details>' },
+    { code: '<path fill="pink" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"></path>' },
+    { code: '<link as="audio">Audio content</link>' },
   ]),
   invalid: parsers.all([
     {
@@ -298,5 +304,18 @@ ruleTester.run('no-unknown-property', rule, {
         },
       ],
     },
+    {
+      code: '<div as="audio" />',
+      errors: [
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'as',
+            tagName: 'div',
+            allowedTags: 'link',
+          },
+        },
+      ],
+    },
   ]),
 });