[Fix] add properties onToggle, fill, as and pointer events

Author: sjarva

lib/rules/no-unknown-property.js

@@ -30,9 +30,16 @@ 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', 'path', 'polygon', 'polyline', 'rect', 'text', 'textPath', 'tref',
+    'tspan', 'svg',
+    // Animation final state
+    'animate', 'animateColor', 'animateMotion', 'animateTransform', 'set',
+  ],
   property: ['meta'],
   viewBox: ['svg'],
+  as: ['link'],
 };
 
 const SVGDOM_ATTRIBUTE_NAMES = {
@@ -127,7 +134,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 +175,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
@@ -230,7 +237,12 @@ 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(['onPointerDown', 'onPointerMove', 'onPointerUp', 'onPointerCancel', 'onGotPointerCapture', 'onLostPointerCapture',
+      'onPointerEnter', 'onPointerLeave', 'onPointerOver', 'onPointerOut']);
   }
   return ALL_DOM_PROPERTY_NAMES;
 }

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

@@ -53,6 +53,8 @@ ruleTester.run('no-unknown-property', rule, {
     { 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: '<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 +84,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 +303,18 @@ ruleTester.run('no-unknown-property', rule, {
         },
       ],
     },
+    {
+      code: '<div as="audio" />',
+      errors: [
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'as',
+            tagName: 'div',
+            allowedTags: 'link',
+          },
+        },
+      ],
+    },
   ]),
 });