[Fix] add touch and media event related properties

Author: sjarva

lib/rules/no-unknown-property.js

@@ -40,6 +40,30 @@ const ATTRIBUTE_TAGS_MAP = {
   property: ['meta'],
   viewBox: ['svg'],
   as: ['link'],
+  // Media events allowed only on audio and video tags, see https://github.com/facebook/react/blob/256aefbea1449869620fb26f6ec695536ab453f5/CHANGELOG.md#notable-enhancements
+  onAbort: ['audio', 'video'],
+  onCanPlay: ['audio', 'video'],
+  onCanPlayThrough: ['audio', 'video'],
+  onDurationChange: ['audio', 'video'],
+  onEmptied: ['audio', 'video'],
+  onEncrypted: ['audio', 'video'],
+  onEnded: ['audio', 'video'],
+  onError: ['audio', 'video'],
+  onLoadedData: ['audio', 'video'],
+  onLoadedMetadata: ['audio', 'video'],
+  onLoadStart: ['audio', 'video'],
+  onPause: ['audio', 'video'],
+  onPlay: ['audio', 'video'],
+  onPlaying: ['audio', 'video'],
+  onProgress: ['audio', 'video'],
+  onRateChange: ['audio', 'video'],
+  onSeeked: ['audio', 'video'],
+  onSeeking: ['audio', 'video'],
+  onStalled: ['audio', 'video'],
+  onSuspend: ['audio', 'video'],
+  onTimeUpdate: ['audio', 'video'],
+  onVolumeChange: ['audio', 'video'],
+  onWaiting: ['audio', 'video'],
 };
 
 const SVGDOM_ATTRIBUTE_NAMES = {
@@ -211,7 +235,11 @@ const DOM_PROPERTY_NAMES_TWO_WORDS = [
   'autoCorrect', // https://stackoverflow.com/questions/47985384/html-autocorrect-for-text-input-is-not-working
   'autoSave', // https://stackoverflow.com/questions/25456396/what-is-autosave-attribute-supposed-to-do-how-do-i-use-it
   // React specific attributes https://reactjs.org/docs/dom-elements.html#differences-in-attributes
-  'className', 'dangerouslySetInnerHTML', 'defaultValue', 'defaultChecked', 'htmlFor', 'onChange', 'suppressContentEditableWarning', 'suppressHydrationWarning',
+  'className', 'dangerouslySetInnerHTML', 'defaultValue', 'defaultChecked', 'htmlFor', 'onChange',
+  'onInvalid', 'onReset', 'onTouchCancel', 'onTouchEnd', 'onTouchMove', 'onTouchStart', 'suppressContentEditableWarning', 'suppressHydrationWarning',
+  'onAbort', 'onCanPlay', 'onCanPlayThrough', 'onDurationChange', 'onEmptied', 'onEncrypted', 'onEnded',
+  'onLoadedData', 'onLoadedMetadata', 'onLoadStart', 'onPause', 'onPlay', 'onPlaying', 'onProgress', 'onRateChange',
+  'onSeeked', 'onSeeking', 'onStalled', 'onSuspend', 'onTimeUpdate', 'onVolumeChange', 'onWaiting',
 ];
 
 const DOM_PROPERTIES_IGNORE_CASE = ['charset'];

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

@@ -56,6 +56,7 @@ ruleTester.run('no-unknown-property', rule, {
     // React related attributes
     { code: '<div onPointerDown={this.onDown} onPointerUp={this.onUp} />' },
     { code: '<input type="checkbox" defaultChecked={this.state.checkbox} />' },
+    { code: '<div onTouchStart={this.startAnimation} onTouchEnd={this.stopAnimation} onTouchCancel={this.cancel} onTouchMove={this.move} />' },
     // 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" />;' },
@@ -88,6 +89,7 @@ ruleTester.run('no-unknown-property', rule, {
     { 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>' },
+    { code: '<audio onAbort={this.abort} onDurationChange={this.durationChange} onEmptied={this.emptied} onEnded={this.end} onError={this.error}></audio>' },
   ]),
   invalid: parsers.all([
     {
@@ -317,5 +319,50 @@ ruleTester.run('no-unknown-property', rule, {
         },
       ],
     },
+    {
+      code: '<div onAbort={this.abort} onDurationChange={this.durationChange} onEmptied={this.emptied} onEnded={this.end} onError={this.error} />',
+      errors: [
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'onAbort',
+            tagName: 'div',
+            allowedTags: 'audio, video',
+          },
+        },
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'onDurationChange',
+            tagName: 'div',
+            allowedTags: 'audio, video',
+          },
+        },
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'onEmptied',
+            tagName: 'div',
+            allowedTags: 'audio, video',
+          },
+        },
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'onEnded',
+            tagName: 'div',
+            allowedTags: 'audio, video',
+          },
+        },
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'onError',
+            tagName: 'div',
+            allowedTags: 'audio, video',
+          },
+        },
+      ],
+    },
   ]),
 });