[NEW RULE] avoid-leaking-callbacks-in-ember-objects

README.md

@@ -104,6 +104,15 @@ The `--fix` option on the command line automatically fixes problems reported by
 | :wrench: | [use-ember-get-and-set](./docs/rules/use-ember-get-and-set.md) | Enforces usage of Ember.get and Ember.set |
 
 
+### Ember Object
+
+|    | Rule ID | Description |
+|:---|:--------|:------------|
+| :white_check_mark: | [avoid-leaking-callbacks-in-ember-objects](./docs/rules/avoid-leaking-callbacks-in-ember-objects.md) | Avoids callback memory leaks |
+| :white_check_mark: | [avoid-leaking-state-in-ember-objects](./docs/rules/avoid-leaking-state-in-ember-objects.md) | Avoids state leakage |
+|  | [computed-property-getters](./docs/rules/computed-property-getters.md) | Enforce the consistent use of getters in computed properties |
+
+
 ### Possible Errors
 
 |    | Rule ID | Description |
@@ -123,14 +132,6 @@ The `--fix` option on the command line automatically fixes problems reported by
 | :white_check_mark: | [routes-segments-snake-case](./docs/rules/routes-segments-snake-case.md) | Enforces usage of snake_cased dynamic segments in routes |
 
 
-### Ember Object
-
-|    | Rule ID | Description |
-|:---|:--------|:------------|
-| :white_check_mark: | [avoid-leaking-state-in-ember-objects](./docs/rules/avoid-leaking-state-in-ember-objects.md) | Avoids state leakage |
-|  | [computed-property-getters](./docs/rules/computed-property-getters.md) | Enforce the consistent use of getters in computed properties |
-
-
 ### Testing
 
 |    | Rule ID | Description |

docs/rules/avoid-leaking-callbacks-in-ember-objects.md

@@ -0,0 +1,41 @@
+
+# Avoid callback leaks in Ember objects
+## Rule `avoid-leaking-callbacks-in-ember-objects`
+
+Callback leaks are memory leaks that occur due to state being caught in a callback function that is never released from memory.
+
+Since callback functions for things like event listeners and interval timers are retained by reference elsewhere, you must be careful to unregister them when no longer needed or ensure that the context they're registered with is destroyed.
+
+
+Examples of **incorrect** code for this rule:
+
+```js
+export default Ember.Component.extend({
+  didInsertElement() {
+    if (this.get('onScroll')) {
+      window.addEventListener('scroll', (...args) => this.get('onScroll')(...args));
+    }
+  }
+});
+```
+
+Examples of **correct** code for this rule:
+
+```js
+export default Ember.Component.extend({
+  didInsertElement() {
+    if (this.get('onScroll')) {
+      this._onScrollHandler = (...args) => this.get('onScroll')(...args);
+      window.addEventListener('scroll', this._onScrollHandler);
+    }
+  },
+
+  willDestroy() {
+    window.removeEventListener('scroll', this._onScrollHandler);
+  }
+});
+```
+
+## Further Reading
+
+https://github.com/ember-best-practices/memory-leak-examples/blob/master/exercises/exercise-2.md

lib/index.js

@@ -47,6 +47,7 @@ module.exports = {
     'routes-segments-snake-case': require('./rules/routes-segments-snake-case'),
     'use-brace-expansion': require('./rules/use-brace-expansion'),
     'use-ember-get-and-set': require('./rules/use-ember-get-and-set'),
+    'avoid-leaking-callbacks-in-ember-objects': require('./rules/avoid-leaking-callbacks-in-ember-objects'),
   },
   configs: {
     base: require('./config/base'),

lib/recommended-rules.js

@@ -6,6 +6,7 @@
  */
 module.exports = {
   "ember/alias-model-in-controller": "off",
+  "ember/avoid-leaking-callbacks-in-ember-objects": "error",
   "ember/avoid-leaking-state-in-components": "off",
   "ember/avoid-leaking-state-in-ember-objects": "error",
   "ember/avoid-using-needs-in-controllers": "error",
@@ -50,4 +51,4 @@ module.exports = {
   "ember/routes-segments-snake-case": "error",
   "ember/use-brace-expansion": "error",
   "ember/use-ember-get-and-set": "off"
-}
+}

lib/rules/avoid-leaking-callbacks-in-ember-objects.js

@@ -0,0 +1,67 @@
+'use strict';
+
+// const ember = require('../utils/ember');
+const utils = require('../utils/utils');
+
+const ERROR_MESSAGE = 'All `addEventListener` calls should have a corresponding `removeEventListener` to avoid leaking callbacks.';
+//------------------------------------------------------------------------------
+// Ember object rule - Avoid callback memory leaks
+// Callback leaks are memory leaks that occur due to state being caught
+// in a callback function that is never released from memory.
+//------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Avoids callback memory leaks',
+      category: 'Ember Object',
+      recommended: true,
+      url: 'https://github.com/ember-best-practices/memory-leak-examples/blob/master/exercises/exercise-2.md'
+    },
+    fixable: null, // or "code" or "whitespace"
+    ERROR_MESSAGE,
+  },
+
+
+  create(context) {
+    const report = function (node) {
+      context.report(node, ERROR_MESSAGE);
+    };
+
+    const addedListeners = [];
+    const removedListeners = [];
+    return {
+      'Program:exit': function () {
+        addedListeners.forEach((a) => {
+          const idx = removedListeners.findIndex(r => r.el === a.el && r.event === a.event);
+
+          if (idx < 0) {
+            // No removeEventListener
+            report(a.node);
+          }
+        });
+      },
+
+      CallExpression(node) {
+        if (utils.getPropertyValue(node, 'callee.property.name') === 'addEventListener') {
+          const listener = {
+            el: node.callee.object.name,
+            event: node.arguments[0].value,
+            node
+          };
+
+          addedListeners.push(listener);
+        }
+
+        if (utils.getPropertyValue(node, 'callee.property.name') === 'removeEventListener') {
+          const listener = {
+            el: node.callee.object.name,
+            event: node.arguments[0].value
+          };
+
+          removedListeners.push(listener);
+        }
+      }
+    };
+  },
+};

tests/__snapshots__/recommended.js.snap

@@ -22,5 +22,6 @@ Array [
   "require-super-in-init",
   "routes-segments-snake-case",
   "use-brace-expansion",
+  "avoid-leaking-callbacks-in-ember-objects",
 ]
 `;

tests/lib/rules/avoid-leaking-callbacks-in-ember-objects.js

@@ -0,0 +1,157 @@
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/avoid-leaking-callbacks-in-ember-objects');
+const RuleTester = require('eslint').RuleTester;
+
+const { ERROR_MESSAGE } = rule;
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+
+const eslintTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module'
+  }
+});
+eslintTester.run('avoid-leaking-callbacks-in-ember-objects', rule, {
+  valid: [
+    {
+      code: `
+export default Ember.Component.extend({
+  didInsertElement() {
+    if (this.get('onScroll')) {
+      this._onScrollHandler = (...args) => this.get('onScroll')(...args);
+      window.addEventListener('scroll', this._onScrollHandler);
+    }
+  },
+
+  willDestroyElement() {
+    window.removeEventListener("scroll", this._onScrollHandler);
+    this._super(...arguments);
+  }
+});`,
+    },
+    {
+      code: `
+import Component from '@ember/component';
+
+export default Component.extend({
+  didInsertElement() {
+    if (this.get('onScroll')) {
+      this._onScrollHandler = (...args) => this.get('onScroll')(...args);
+      window.addEventListener('scroll', this._onScrollHandler);
+    }
+  },
+
+  willDestroyElement() {
+    window.removeEventListener("scroll", this._onScrollHandler);
+    this._super(...arguments);
+  }
+});
+      `,
+    },
+    {
+      code: `
+import Component from '@ember/component';
+
+export default Component.extend({});`,
+    },
+    {
+      code: `
+export default Ember.Service.extend({
+  init() {
+    if (this.get('onScroll')) {
+      this._onScrollHandler = (...args) => this.get('onScroll')(...args);
+      window.addEventListener('scroll', this._onScrollHandler);
+    }
+  },
+
+  willDestroy() {
+    window.removeEventListener("scroll", this._onScrollHandler);
+    this._super(...arguments);
+  }
+});`,
+    },
+  ],
+  invalid: [
+    {
+      code: `
+import Component from '@ember/component';
+
+export default Component.extend({
+  didInsertElement() {
+    if (this.get('onScroll')) {
+      window.addEventListener('scroll', (...args) => this.get('onScroll')(...args));
+    }
+  }
+});`,
+      output: null,
+      errors: [{
+        message: ERROR_MESSAGE,
+      }],
+    },
+    {
+      code: `
+import Component from '@ember/component';
+export default Component.extend({
+  init() {
+    if (this.get('onScroll')) {
+      window.addEventListener('scroll', (...args) => this.get('onScroll')(...args));
+    }
+  },
+
+  didInsertElement() { 
+    if (this.get("onResize")) { 
+      window.addEventListener("resize", (...args) => this.get("onResize")(...args)); 
+    } 
+  } 
+
+});
+      `,
+      output: null,
+      errors: [{
+        message: ERROR_MESSAGE,
+      },
+      {
+        message: ERROR_MESSAGE,
+      }],
+    },
+    {
+      code: `
+import Component from '@ember/component';
+
+export default Component.extend({
+  init() {
+    if (this.get('onScroll')) {
+      this._onScrollHandler = (...args) => this.get('onScroll')(...args);
+      window.addEventListener('scroll', this._onScrollHandler);
+    }
+  },
+
+
+  didInsertElement() {
+    if (this.get('onResize')) {
+      window.addEventListener('resize', (...args) => this.get('onResize')(...args));
+    }
+  },
+
+  willDestroyElement() {
+    window.removeEventListener("scroll", this._onScrollHandler);
+    this._super(...arguments);
+  }
+
+});
+      `,
+      output: null,
+      errors: [{
+        message: ERROR_MESSAGE,
+      }],
+    },
+
+
+  ],
+});