[New] no-unknown-property: support onResize on audio/video tags

HenryBrown0 · Dec 3, 2023 · b95a059 · b95a059
1 parent 48318fa
commit b95a059
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unknown-property`]: add requireDataLowercase option ([#3645][] @HermanBilous)
 * [`no-unknown-property`]: add `displaystyle` on `<math>` ([#3652][] @lounsbrough)
 * [`prefer-read-only-props`], [`prop-types`], component detection: allow components to be async functions ([#3654][] @pnodet)
+* [`no-unknown-property`]: support `onResize` on audio/video tags ([#3662][] @caesar1030)
 
 ### Fixed
 * [`jsx-no-leaked-render`]: preserve RHS parens for multiline jsx elements while fixing ([#3623][] @akulsr0)
@@ -24,6 +25,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [Refactor] [`jsx-props-no-multi-spaces`]: extract type parameters to var ([#3634][] @HenryBrown0)
 * [Docs] [`jsx-key`]: fix correct example ([#3656][] @developer-bandi)
 
+[#3662]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3662
 [#3656]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3656
 [#3654]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3654
 [#3652]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3652

diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
@@ -93,6 +93,7 @@ const ATTRIBUTE_TAGS_MAP = {
   onPlaying: ['audio', 'video'],
   onProgress: ['audio', 'video'],
   onRateChange: ['audio', 'video'],
+  onResize: ['audio', 'video'],
   onSeeked: ['audio', 'video'],
   onSeeking: ['audio', 'video'],
   onStalled: ['audio', 'video'],
@@ -296,7 +297,7 @@ const DOM_PROPERTY_NAMES_TWO_WORDS = [
   'onBeforeInput', 'onChange',
   'onInvalid', 'onReset', 'onTouchCancel', 'onTouchEnd', 'onTouchMove', 'onTouchStart', 'suppressContentEditableWarning', 'suppressHydrationWarning',
   'onAbort', 'onCanPlay', 'onCanPlayThrough', 'onDurationChange', 'onEmptied', 'onEncrypted', 'onEnded',
-  'onLoadedData', 'onLoadedMetadata', 'onLoadStart', 'onPause', 'onPlay', 'onPlaying', 'onProgress', 'onRateChange',
+  'onLoadedData', 'onLoadedMetadata', 'onLoadStart', 'onPause', 'onPlay', 'onPlaying', 'onProgress', 'onRateChange', 'onResize',
   'onSeeked', 'onSeeking', 'onStalled', 'onSuspend', 'onTimeUpdate', 'onVolumeChange', 'onWaiting',
   'onCopyCapture', 'onCutCapture', 'onPasteCapture', 'onCompositionEndCapture', 'onCompositionStartCapture', 'onCompositionUpdateCapture',
   'onFocusCapture', 'onBlurCapture', 'onChangeCapture', 'onBeforeInputCapture', 'onInputCapture', 'onResetCapture', 'onSubmitCapture',

diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
@@ -128,8 +128,8 @@ ruleTester.run('no-unknown-property', rule, {
     { 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: '<line fill="pink" x1="0" y1="80" x2="100" y2="20"></line>' },
     { code: '<link as="audio">Audio content</link>' },
-    { code: '<video controlsList="nodownload" controls={this.controls} loop={true} muted={false} src={this.videoSrc} playsInline={true}></video>' },
-    { code: '<audio controlsList="nodownload" 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>' },
+    { code: '<video controlsList="nodownload" controls={this.controls} loop={true} muted={false} src={this.videoSrc} playsInline={true} onResize={this.onResize}></video>' },
+    { code: '<audio controlsList="nodownload" 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} onResize={this.onResize}></audio>' },
     { code: '<marker id={markerId} viewBox="0 0 2 2" refX="1" refY="1" markerWidth="1" markerHeight="1" orient="auto" />' },
     { code: '<pattern id="pattern" viewBox="0,0,10,10" width="10%" height="10%" />' },
     { code: '<symbol id="myDot" width="10" height="10" viewBox="0 0 2 2" />' },
@@ -413,7 +413,7 @@ ruleTester.run('no-unknown-property', rule, {
       ],
     },
     {
-      code: '<div onAbort={this.abort} onDurationChange={this.durationChange} onEmptied={this.emptied} onEnded={this.end} onError={this.error} />',
+      code: '<div onAbort={this.abort} onDurationChange={this.durationChange} onEmptied={this.emptied} onEnded={this.end} onResize={this.resize} onError={this.error} />',
       errors: [
         {
           messageId: 'invalidPropOnTag',
@@ -447,6 +447,14 @@ ruleTester.run('no-unknown-property', rule, {
             allowedTags: 'audio, video',
           },
         },
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'onResize',
+            tagName: 'div',
+            allowedTags: 'audio, video',
+          },
+        },
         {
           messageId: 'invalidPropOnTag',
           data: {