Merge pull request #67 from ember-best-practices/fix-no-global-jquery

[Bugfix] - Fixes #47 - const { $ } = Ember; still triggers no-global-jquery

Author: rwjblue

guides/rules/no-global-jquery.md

@@ -1,6 +1,6 @@
 # No Global jQuery
 
-**TL;DR** Do not use global `$` or `jQuery`. Use `Ember.$` instead.
+**TL;DR** Do not use global `$` or `jQuery`.
 
 In general, we want application code to reference the version of jQuery that's been directly pinned
 to the version of Ember used. This helps avoid version conflicts, and ensures that code inside modules

lib/rules/no-global-jquery.js

@@ -3,6 +3,10 @@
  */
 'use strict';
 
+const { getEmberImportBinding } = require('../utils/imports');
+const { collectObjectPatternBindings } = require('../utils/destructed-binding');
+
+const MESSAGE = 'Do not use global `$` or `jQuery`.';
 const ALIASES = ['$', 'jQuery'];
 
 /**
@@ -14,8 +18,6 @@ function isGlobalJquery(node) {
   return node.callee && ALIASES.includes(node.callee.name);
 }
 
-const MESSAGE = 'Do not use global `$` or `jQuery`. Use `Ember.$` instead. Please see the following guide for more information: https://github.com/ember-best-practices/eslint-plugin-ember-best-practices/blob/master/guides/rules/no-global-jquery.md';
-
 module.exports = {
   docs: {
     description: 'Disallow the use of global `$`',
@@ -26,9 +28,28 @@ module.exports = {
     message: MESSAGE
   },
   create(context) {
+    let emberImportBinding;
+    let destructuredAssignment = null;
+
+    function isDestructured(node) {
+      return node && node.callee && node.callee.name === destructuredAssignment;
+    }
+
     return {
+      ImportDefaultSpecifier(node) {
+        emberImportBinding = getEmberImportBinding(node);
+      },
+
+      ObjectPattern(node) {
+        if (emberImportBinding) {
+          destructuredAssignment = collectObjectPatternBindings(node, {
+            [emberImportBinding]: ['$']
+          }).pop();
+        }
+      },
+
       CallExpression(node) {
-        if (isGlobalJquery(node)) {
+        if (!isDestructured(node) && isGlobalJquery(node)) {
           context.report(node, MESSAGE);
         }
       }

tests/lib/rules/no-global-jquery.js

@@ -2,6 +2,10 @@ const rule = require('../../../lib/rules/no-global-jquery');
 const MESSAGE = rule.meta.message;
 const RuleTester = require('eslint').RuleTester;
 const ruleTester = new RuleTester();
+const parserOptions = {
+  ecmaVersion: 6,
+  sourceType: 'module'
+};
 
 ruleTester.run('no-global-jquery', rule, {
   valid: [
@@ -12,10 +16,7 @@ ruleTester.run('no-global-jquery', rule, {
             this.v1 = Ember.$('.v1');
           },
         });`,
-      parserOptions: {
-        ecmaVersion: 6,
-        sourceType: 'module'
-      }
+      parserOptions
     },
     {
       code: `
@@ -24,10 +25,7 @@ ruleTester.run('no-global-jquery', rule, {
             this.v2 = this.$();
           },
         });`,
-      parserOptions: {
-        ecmaVersion: 6,
-        sourceType: 'module'
-      }
+      parserOptions
     },
     {
       code: `
@@ -38,10 +36,7 @@ ruleTester.run('no-global-jquery', rule, {
             }
           }
         });`,
-      parserOptions: {
-        ecmaVersion: 6,
-        sourceType: 'module'
-      }
+      parserOptions
     },
     {
       code: `
@@ -52,10 +47,75 @@ ruleTester.run('no-global-jquery', rule, {
             }
           }
         });`,
-      parserOptions: {
-        ecmaVersion: 6,
-        sourceType: 'module'
-      }
+      parserOptions
+    },
+    {
+      code: `
+        import Ember from 'ember';
+
+        const { $ } = Ember;
+
+        export default Ember.Component({
+          init() {
+            this.el = $('.test');
+          }
+        });`,
+      parserOptions,
+      errors: [{
+        message: MESSAGE
+      }]
+    },
+    {
+      code: `
+        import Ember from 'ember';
+
+        const { $ } = Ember;
+
+        export default Ember.Component({
+          actions: {
+            valid() {
+              this.inv1 = $('.invalid1');
+            }
+          }
+        });`,
+      parserOptions,
+      errors: [{
+        message: MESSAGE
+      }]
+    },
+    {
+      code: `
+        import Ember from 'ember';
+
+        const { $: foo } = Ember;
+
+        export default Ember.Component({
+          init() {
+            this.el = foo('.test');
+          }
+        });`,
+      parserOptions,
+      errors: [{
+        message: MESSAGE
+      }]
+    },
+    {
+      code: `
+        import Ember from 'ember';
+
+        const { $: foo } = Ember;
+
+        export default Ember.Component({
+          actions: {
+            valid() {
+              this.inv1 = foo('.invalid1');
+            }
+          }
+        });`,
+      parserOptions,
+      errors: [{
+        message: MESSAGE
+      }]
     }
   ],
   invalid: [
@@ -66,10 +126,7 @@ ruleTester.run('no-global-jquery', rule, {
             this.el = $('.test');
           }
         });`,
-      parserOptions: {
-        ecmaVersion: 6,
-        sourceType: 'module'
-      },
+      parserOptions,
       errors: [{
         message: MESSAGE
       }]
@@ -83,10 +140,7 @@ ruleTester.run('no-global-jquery', rule, {
             }
           }
         });`,
-      parserOptions: {
-        ecmaVersion: 6,
-        sourceType: 'module'
-      },
+      parserOptions,
       errors: [{
         message: MESSAGE
       }]
@@ -98,10 +152,7 @@ ruleTester.run('no-global-jquery', rule, {
             this.el = jQuery('.test');
           }
         });`,
-      parserOptions: {
-        ecmaVersion: 6,
-        sourceType: 'module'
-      },
+      parserOptions,
       errors: [{
         message: MESSAGE
       }]
@@ -115,10 +166,7 @@ ruleTester.run('no-global-jquery', rule, {
             }
           }
         });`,
-      parserOptions: {
-        ecmaVersion: 6,
-        sourceType: 'module'
-      },
+      parserOptions,
       errors: [{
         message: MESSAGE
       }]