Use single ResizeObserver for better performance

addon/modifiers/did-resize.js

@@ -6,23 +6,41 @@ export default class DidResizeModifier extends Modifier {
   options = {};
 
   // Private API
-  observer = null;
+  _didInstall = false;
+  static observer = null;
+  static handlers = [];
+
+  addHandler() {
+    DidResizeModifier.handlers.push({
+      element: this.element,
+      handler: this.handler,
+    });
+  }
+
+  removeHandler() {
+    DidResizeModifier.handlers.splice(
+      DidResizeModifier.handlers.findIndex((h) => h.element === this.element),
+      1
+    );
+  }
 
   observe() {
-    if (this.observer) {
-      this.observer.observe(this.element, this.options);
+    if (DidResizeModifier.observer) {
+      this.addHandler();
+      DidResizeModifier.observer.observe(this.element, this.options);
     }
   }
 
   unobserve() {
-    if (this.observer) {
-      this.observer.unobserve();
+    if (DidResizeModifier.observer) {
+      DidResizeModifier.observer.unobserve(this.element);
     }
   }
 
   disconnect() {
-    if (this.observer) {
-      this.observer.disconnect();
+    if (DidResizeModifier.observer) {
+      DidResizeModifier.observer.disconnect();
+      this.removeHandler();
     }
   }
 
@@ -38,19 +56,30 @@ export default class DidResizeModifier extends Modifier {
     this.handler = handler;
     this.options = options || this.options;
 
-    this.observe();
+    // Only observe if the modifier is installed
+    if (this._didInstall) {
+      this.observe();
+    }
   }
 
   didInstall() {
     if (!('ResizeObserver' in window)) {
       return;
     }
 
-    this.observer = new ResizeObserver((entries, observer) => {
-      this.handler(entries[0], observer);
-    });
+    if (!DidResizeModifier.observer) {
+      DidResizeModifier.observer = new ResizeObserver((entries, observer) => {
+        for (let entry of entries) {
+          const lookup = DidResizeModifier.handlers.find(
+            (h) => h.element === entry.target
+          );
+          if (lookup) lookup.handler(entry, observer);
+        }
+      });
+    }
 
     this.observe();
+    this._didInstall = true;
   }
 
   willRemove() {

tests/integration/modifiers/did-resize-test.js

@@ -1,40 +1,33 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { find, render } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import sinon from 'sinon';
 
-let resizeCallback;
-let observeStub;
-let unobserveStub;
-let disconnectStub;
-let MockResizeObserver;
-
 module('Integration | Modifier | did-resize', function (hooks) {
   setupRenderingTest(hooks);
 
-  let resizeObserver;
+  let resizeCallback = null;
+  const observeStub = sinon.stub();
+  const unobserveStub = sinon.stub();
+  const disconnectStub = sinon.stub();
+  const resizeObserver = window.ResizeObserver;
+  const mockResizeObserver = class MockResizeObserver {
+    constructor(callback) {
+      resizeCallback = callback;
+    }
+
+    observe = observeStub;
+    unobserve = unobserveStub;
+    disconnect = disconnectStub;
+  };
 
   hooks.beforeEach(function () {
-    resizeCallback = null;
-    observeStub = sinon.stub();
-    unobserveStub = sinon.stub();
-    disconnectStub = sinon.stub();
-
-    MockResizeObserver = class MockResizeObserver {
-      constructor(callback) {
-        resizeCallback = callback;
-      }
-
-      observe = observeStub;
-      unobserve = unobserveStub;
-      disconnect = disconnectStub;
-    };
-
-    resizeObserver = window.ResizeObserver;
-    window.ResizeObserver = MockResizeObserver;
-
+    observeStub.reset();
+    unobserveStub.reset();
+    disconnectStub.reset();
     this.resizeStub = sinon.stub();
+    window.ResizeObserver = mockResizeObserver;
   });
 
   hooks.afterEach(function () {
@@ -58,15 +51,16 @@ module('Integration | Modifier | did-resize', function (hooks) {
   });
 
   test('modifier triggers handler when ResizeObserver fires callback', async function (assert) {
-    await render(hbs`<div {{did-resize this.resizeStub}}></div>`);
-
-    let fakeEntry = { target: {} };
+    await render(
+      hbs`<div id="test-element" {{did-resize this.resizeStub}}></div>`
+    );
+    let entry = { target: find('#test-element') };
     let fakeObserver = { observe: {} };
 
-    resizeCallback([fakeEntry], fakeObserver);
+    resizeCallback([entry], fakeObserver);
 
     assert.ok(
-      this.resizeStub.calledOnceWith(fakeEntry, fakeObserver),
+      this.resizeStub.calledOnceWith(entry, fakeObserver),
       'handler fired with correct parameters'
     );
   });
@@ -87,7 +81,6 @@ module('Integration | Modifier | did-resize', function (hooks) {
 
     await render(hbs`<div {{did-resize this.resizeStub}}></div>`);
 
-    assert.notOk(resizeCallback, 'no callback received');
     assert.notOk(observeStub.calledOnce, 'observe was not called');
   });