Introduce no-visibility, deprecate no-show, no-hide, no-toggle (

#166)

* Introduce `no-visibility`, deprecate `no-show`, `no-hide`, `no-toggle`

See #163

* Update test-all/methods.js

README.md

@@ -97,7 +97,6 @@ The following global settings can be used under the "no-jquery" property to conf
 * [no-jquery/no-global-eval](docs/no-global-eval.md)
 * [no-jquery/no-grep](docs/no-grep.md)
 * [no-jquery/no-has](docs/no-has.md)
-* [no-jquery/no-hide](docs/no-hide.md)
 * [no-jquery/no-hold-ready](docs/no-hold-ready.md)
 * [no-jquery/no-html](docs/no-html.md)
 * [no-jquery/no-in-array](docs/no-in-array.md)
@@ -132,15 +131,13 @@ The following global settings can be used under the "no-jquery" property to conf
 * [no-jquery/no-global-selector](docs/no-global-selector.md)
 * [no-jquery/no-selector-prop](docs/no-selector-prop.md)
 * [no-jquery/no-serialize](docs/no-serialize.md)
-* [no-jquery/no-show](docs/no-show.md)
 * [no-jquery/no-size](docs/no-size.md)
 * [no-jquery/no-sizzle](docs/no-sizzle.md)
 * [no-jquery/no-slide](docs/no-slide.md)
 * [no-jquery/no-sub](docs/no-sub.md)
 * [no-jquery/no-submit](docs/no-submit.md)
 * [no-jquery/no-support](docs/no-support.md)
 * [no-jquery/no-text](docs/no-text.md)
-* [no-jquery/no-toggle](docs/no-toggle.md)
 * [no-jquery/no-trigger](docs/no-trigger.md)
 * [no-jquery/no-trim](docs/no-trim.md)
 * [no-jquery/no-type](docs/no-type.md)
@@ -149,9 +146,15 @@ The following global settings can be used under the "no-jquery" property to conf
 * [no-jquery/no-unique](docs/no-unique.md)
 * [no-jquery/no-unload-shorthand](docs/no-unload-shorthand.md)
 * [no-jquery/no-val](docs/no-val.md)
+* [no-jquery/no-visibility](docs/no-visibility.md)
 * [no-jquery/no-when](docs/no-when.md)
 * [no-jquery/no-wrap](docs/no-wrap.md)
 
+### Deprecated
+* [no-jquery/no-hide](docs/no-hide.md)
+* [no-jquery/no-show](docs/no-show.md)
+* [no-jquery/no-toggle](docs/no-toggle.md)
+
 ## Development
 
 ```sh

docs/no-hide.md

@@ -2,6 +2,8 @@
 
 Disallows the .hide method.
 
+⚠️ This rule is deprecated. Use [no-visibility](no-visibility.md) instead.
+
 ## Rule details
 
 ❌ The following patterns are considered errors:

docs/no-show.md

@@ -2,6 +2,8 @@
 
 Disallows the .show method.
 
+⚠️ This rule is deprecated. Use [no-visibility](no-visibility.md) instead.
+
 ## Rule details
 
 ❌ The following patterns are considered errors:

docs/no-toggle.md

@@ -2,6 +2,8 @@
 
 Disallows the .toggle method.
 
+⚠️ This rule is deprecated. Use [no-visibility](no-visibility.md) instead.
+
 ## Rule details
 
 ❌ The following patterns are considered errors:

docs/no-visibility.md

@@ -0,0 +1,40 @@
+# no-visibility
+
+Disallows the .show/hide/toggle methods.
+
+## Rule details
+
+❌ The following patterns are considered errors:
+```js
+$( 'div' ).show();
+$div.show();
+$( 'div' ).first().show();
+$( 'div' ).append( $( 'input' ).show() );
+$( 'div' ).hide();
+$div.hide();
+$( 'div' ).first().hide();
+$( 'div' ).append( $( 'input' ).hide() );
+$( 'div' ).toggle();
+$div.toggle();
+$( 'div' ).first().toggle();
+$( 'div' ).append( $( 'input' ).toggle() );
+```
+
+✔️ The following patterns are not considered errors:
+```js
+show();
+[].show();
+div.show();
+div.show;
+hide();
+[].hide();
+div.hide();
+div.hide;
+toggle();
+[].toggle();
+div.toggle();
+div.toggle;
+```
+## Rule source
+
+* [rules/no-visibility.js](../rules/no-visibility.js)

index.js

@@ -91,6 +91,7 @@ module.exports = {
 		'no-unique': require( './rules/no-unique' ),
 		'no-unload-shorthand': require( './rules/no-unload-shorthand' ),
 		'no-val': require( './rules/no-val' ),
+		'no-visibility': require( './rules/no-visibility' ),
 		'no-when': require( './rules/no-when' ),
 		'no-wrap': require( './rules/no-wrap' )
 	},

rule-tester-and-docs.js

@@ -101,6 +101,16 @@ class RuleTesterAndDocs extends RuleTester {
 				console.warn( 'Rule ' + name + ' has no description.' );
 			}
 
+			if ( rule.meta.docs.deprecated ) {
+				output += '⚠️ This rule is deprecated.';
+				if ( rule.meta.docs.replacedBy ) {
+					output += ' Use ' +
+						rule.meta.docs.replacedBy.map( ( name ) => '[' + name + '](' + name + '.md)' ).join( ', ' ) +
+						' instead.';
+				}
+				output += '\n\n';
+			}
+
 			if ( name in rulesData ) {
 				const data = rulesData[ name ];
 				output += 'This rule is enabled in `plugin:no-jquery/' + data.ruleset + '`';

rules/no-hide.js

@@ -2,4 +2,9 @@
 
 const utils = require( './utils.js' );
 
-module.exports = utils.createCollectionMethodRule( 'hide' );
+const rule = utils.createCollectionMethodRule( 'hide' );
+
+rule.meta.docs.deprecated = true;
+rule.meta.docs.replacedBy = [ 'no-visibility' ];
+
+module.exports = rule;

rules/no-show.js

@@ -2,4 +2,9 @@
 
 const utils = require( './utils.js' );
 
-module.exports = utils.createCollectionMethodRule( 'show' );
+const rule = utils.createCollectionMethodRule( 'show' );
+
+rule.meta.docs.deprecated = true;
+rule.meta.docs.replacedBy = [ 'no-visibility' ];
+
+module.exports = rule;

rules/no-toggle.js

@@ -2,4 +2,9 @@
 
 const utils = require( './utils.js' );
 
-module.exports = utils.createCollectionMethodRule( 'toggle' );
+const rule = utils.createCollectionMethodRule( 'toggle' );
+
+rule.meta.docs.deprecated = true;
+rule.meta.docs.replacedBy = [ 'no-visibility' ];
+
+module.exports = rule;

rules/no-visibility.js

@@ -0,0 +1,8 @@
+'use strict';
+
+const utils = require( './utils.js' );
+
+module.exports = utils.createCollectionMethodRule(
+	[ 'show', 'hide', 'toggle' ],
+	( node ) => `$.${node.callee.property.name} is not allowed`
+);

test-all/methods.js

@@ -135,7 +135,7 @@ $x.focusout();
 $x.has();
 // eslint-disable-next-line rulesdir/no-class, rulesdir/no-class-state
 $x.hasClass();
-// eslint-disable-next-line rulesdir/no-hide
+// eslint-disable-next-line rulesdir/no-hide, rulesdir/no-visibility
 $x.hide();
 // eslint-disable-next-line rulesdir/no-event-shorthand
 $x.hover();
@@ -193,7 +193,7 @@ $x.select();
 $x.serialize();
 // eslint-disable-next-line rulesdir/no-serialize
 $x.serializeArray();
-// eslint-disable-next-line rulesdir/no-show
+// eslint-disable-next-line rulesdir/no-show, rulesdir/no-visibility
 $x.show();
 // eslint-disable-next-line rulesdir/no-slide
 $x.slideDown();
@@ -205,7 +205,7 @@ $x.slideUp();
 $x.submit();
 // eslint-disable-next-line rulesdir/no-text
 $x.text();
-// eslint-disable-next-line rulesdir/no-toggle
+// eslint-disable-next-line rulesdir/no-toggle, rulesdir/no-visibility
 $x.toggle();
 // eslint-disable-next-line rulesdir/no-class
 $x.toggleClass();

tests/no-visibility.js

@@ -0,0 +1,78 @@
+'use strict';
+
+const rule = require( '../rules/no-visibility' );
+const RuleTesterAndDocs = require( '../rule-tester-and-docs' );
+
+const errorShow = '$.show is not allowed';
+const errorHide = '$.hide is not allowed';
+const errorToggle = '$.toggle is not allowed';
+
+const ruleTester = new RuleTesterAndDocs();
+ruleTester.run( 'no-visibility', rule, {
+	valid: [
+		'show()',
+		'[].show()',
+		'div.show()',
+		'div.show',
+
+		'hide()',
+		'[].hide()',
+		'div.hide()',
+		'div.hide',
+
+		'toggle()',
+		'[].toggle()',
+		'div.toggle()',
+		'div.toggle'
+	],
+	invalid: [
+		{
+			code: '$("div").show()',
+			errors: [ { message: errorShow, type: 'CallExpression' } ]
+		},
+		{
+			code: '$div.show()',
+			errors: [ { message: errorShow, type: 'CallExpression' } ]
+		},
+		{
+			code: '$("div").first().show()',
+			errors: [ { message: errorShow, type: 'CallExpression' } ]
+		},
+		{
+			code: '$("div").append($("input").show())',
+			errors: [ { message: errorShow, type: 'CallExpression' } ]
+		},
+		{
+			code: '$("div").hide()',
+			errors: [ { message: errorHide, type: 'CallExpression' } ]
+		},
+		{
+			code: '$div.hide()',
+			errors: [ { message: errorHide, type: 'CallExpression' } ]
+		},
+		{
+			code: '$("div").first().hide()',
+			errors: [ { message: errorHide, type: 'CallExpression' } ]
+		},
+		{
+			code: '$("div").append($("input").hide())',
+			errors: [ { message: errorHide, type: 'CallExpression' } ]
+		},
+		{
+			code: '$("div").toggle()',
+			errors: [ { message: errorToggle, type: 'CallExpression' } ]
+		},
+		{
+			code: '$div.toggle()',
+			errors: [ { message: errorToggle, type: 'CallExpression' } ]
+		},
+		{
+			code: '$("div").first().toggle()',
+			errors: [ { message: errorToggle, type: 'CallExpression' } ]
+		},
+		{
+			code: '$("div").append($("input").toggle())',
+			errors: [ { message: errorToggle, type: 'CallExpression' } ]
+		}
+	]
+} );