Mutation Observer to clean up after Containers automatically

Author: ZeeCoder

package.json

@@ -25,8 +25,10 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "es6-weak-map": "^2.0.2",
     "lodash.camelcase": "^4.3.0",
     "lodash.trim": "^4.5.1",
+    "mutation-observer": "^1.0.2",
     "object-assign": "^4.1.1",
     "postcss": "^6.0.0",
     "raf": "^3.3.2",
@@ -65,7 +67,7 @@
     "prepublish": "yarn run build",
     "precommit": "lint-staged",
     "eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
-    "prettify": "prettier --write --tab-width=4 '{src|__mocks__}/**/*.js'",
+    "prettify": "prettier --write --tab-width 4 '{src,__mocks__}/**/*.js'",
     "release": "yarn run build && git tag $npm_package_version && git push --follow-tags && yarn publish"
   },
   "lint-staged": {

src/runtime/Container.js

@@ -2,22 +2,22 @@ import processConfig from "./processConfig";
 import adjustContainer from "./adjustContainer";
 import objectAssign from "object-assign";
 import ResizeObserver from "resize-observer-polyfill";
-import {
-    getContainerByElement,
-    addContainerToRegistry
-} from "./ContainerRegistry";
+import MutationObserver from "mutation-observer";
+import WeakMap from "es6-weak-map";
 import raf from "raf";
 
-const observer = new ResizeObserver(entries => {
+const containerRegistry = new WeakMap();
+
+const resizeObserver = new ResizeObserver(entries => {
     if (!Array.isArray(entries)) {
         return;
     }
 
     entries.forEach(entry => {
-        const container = getContainerByElement(entry.target);
+        const container = containerRegistry.get(entry.target);
 
         if (
-            container === null ||
+            typeof container === "undefined" ||
             typeof container !== "object" ||
             typeof container.adjust !== "function"
         ) {
@@ -35,6 +35,20 @@ const observer = new ResizeObserver(entries => {
     });
 });
 
+const mutationObserver = new MutationObserver(mutationsRecords => {
+    mutationsRecords.forEach(mutationsRecord => {
+        // Remove container element from registry and unobserve resize changes
+        mutationsRecord.removedNodes.forEach(node => {
+            if (containerRegistry.has(node) === false) {
+                return;
+            }
+
+            resizeObserver.unobserve(node);
+            containerRegistry.delete(node);
+        });
+    });
+});
+
 /**
  * @class
  * @property {Element} containerElement
@@ -58,7 +72,10 @@ export default class Container {
         this.unobserveResize = this.unobserveResize.bind(this);
         this.adjust = this.adjust.bind(this);
 
-        addContainerToRegistry(containerElement, this);
+        containerRegistry.set(containerElement, this);
+        mutationObserver.observe(this.containerElement.parentNode, {
+            childList: true
+        });
 
         if (this.opts.adjustOnResize) {
             this.observeResize();
@@ -73,14 +90,14 @@ export default class Container {
      * Starts observing resize changes.
      */
     observeResize() {
-        observer.observe(this.containerElement);
+        resizeObserver.observe(this.containerElement);
     }
 
     /**
      * Stops observing resize changes.
      */
     unobserveResize() {
-        observer.unobserve(this.containerElement);
+        resizeObserver.unobserve(this.containerElement);
     }
 
     /**

src/runtime/Container.spec.js

@@ -4,13 +4,33 @@ console.warn = jest.fn();
 jest.mock("./processConfig", () => jest.fn(config => config));
 jest.mock("./adjustContainer", () => jest.fn());
 jest.mock("raf", () => jest.fn(cb => cb()));
+jest.mock("es6-weak-map", () => {
+    const mock = jest.fn();
+
+    mock.prototype.set = jest.fn();
+    mock.prototype.get = jest.fn();
+    mock.prototype.has = jest.fn();
+    mock.prototype.delete = jest.fn();
+
+    return mock;
+});
 
 jest.mock("resize-observer-polyfill", () => {
     const mock = jest.fn(cb => {
-        mock.triggerResizeEvent = cb;
+        mock.triggerEvent = cb;
+    });
+
+    mock.prototype.observe = jest.fn();
+    mock.prototype.unobserve = jest.fn();
+
+    return mock;
+});
+
+jest.mock("mutation-observer", () => {
+    const mock = jest.fn(cb => {
+        mock.triggerEvent = cb;
     });
 
-    // mock.default = mock;
     mock.prototype.observe = jest.fn();
     mock.prototype.unobserve = jest.fn();
 
@@ -28,7 +48,10 @@ test("should instantiate properly", () => {
     const adjustContainer = require("./adjustContainer");
     const raf = require("raf");
 
-    const containerElement = {};
+    const containerElement = {
+        parentNode: document.createElement("div")
+    };
+
     const config = {};
     const processedConfig = {};
 
@@ -54,7 +77,9 @@ test("should be able to observe resize events and switch off initial adjust call
     const raf = require("raf");
     const adjustContainer = require("./adjustContainer");
 
-    const containerElement = {};
+    const containerElement = {
+        parentNode: document.createElement("div")
+    };
     const config = {};
 
     const containerInstance = new Container(containerElement, config, {
@@ -85,19 +110,34 @@ test("should be able to observe resize events and switch off initial adjust call
 });
 
 test("should call adjust() on resize changes", () => {
+    const WeakMap = require("es6-weak-map");
+    WeakMap.prototype.set = jest.fn();
+    WeakMap.prototype.get.mockImplementationOnce(() => undefined);
+    WeakMap.prototype.get.mockImplementationOnce(element => {
+        expect(element).toBe(containerElement);
+
+        return containerInstance;
+    });
     const ResizeObserver = require("resize-observer-polyfill");
-    const containerElement = "<ContainerElement>";
+    const parentElement = document.createElement("div");
+    const containerElement = document.createElement("div");
+    parentElement.appendChild(containerElement);
     const config = {};
     const containerInstance = new Container(containerElement, config, {
         adjustOnInstantiation: false,
         adjustOnResize: true
     });
+    expect(WeakMap.prototype.set).toHaveBeenCalledTimes(1);
+    expect(WeakMap.prototype.set).toHaveBeenCalledWith(
+        containerElement,
+        containerInstance
+    );
 
     expect(ResizeObserver).toHaveBeenCalledTimes(1);
-    expect(typeof ResizeObserver.triggerResizeEvent).toBe("function");
-    expect(() => ResizeObserver.triggerResizeEvent()).not.toThrow();
+    expect(typeof ResizeObserver.triggerEvent).toBe("function");
+    expect(() => ResizeObserver.triggerEvent()).not.toThrow();
     expect(() => {
-        ResizeObserver.triggerResizeEvent([
+        ResizeObserver.triggerEvent([
             {
                 target: "<HTMLElement>"
             }
@@ -107,7 +147,7 @@ test("should call adjust() on resize changes", () => {
 
     containerInstance.adjust = jest.fn();
     expect(() => {
-        ResizeObserver.triggerResizeEvent([
+        ResizeObserver.triggerEvent([
             {
                 target: containerElement,
                 contentRect: {
@@ -118,9 +158,62 @@ test("should call adjust() on resize changes", () => {
         ]);
     }).not.toThrow();
     expect(console.warn).toHaveBeenCalledTimes(1);
+    expect(WeakMap.prototype.get).toHaveBeenCalledTimes(2);
     expect(containerInstance.adjust).toHaveBeenCalledTimes(1);
     expect(containerInstance.adjust).toHaveBeenCalledWith({
         width: 1,
         height: 2
     });
 });
+
+test("should clean up after container element is detached from the DOM", () => {
+    const WeakMap = require("es6-weak-map");
+    WeakMap.prototype.set = jest.fn();
+    WeakMap.prototype.has = jest.fn(() => true);
+    const MutationObserver = require("mutation-observer");
+    const ResizeObserver = require("resize-observer-polyfill");
+    ResizeObserver.prototype.unobserve = jest.fn();
+    const parentElement = document.createElement("div");
+    const containerElement = document.createElement("div");
+    parentElement.appendChild(containerElement);
+    const config = {};
+    const containerInstance = new Container(containerElement, config, {
+        adjustOnInstantiation: false,
+        adjustOnResize: false
+    });
+    expect(WeakMap.prototype.set).toHaveBeenCalledTimes(1);
+    expect(WeakMap.prototype.set).toHaveBeenCalledWith(
+        containerElement,
+        containerInstance
+    );
+
+    let mutationRecords = [
+        {
+            removedNodes: [containerElement]
+        }
+    ];
+
+    MutationObserver.triggerEvent(mutationRecords);
+
+    expect(WeakMap.prototype.has).toHaveBeenCalledTimes(1);
+    expect(WeakMap.prototype.delete).toHaveBeenCalledTimes(1);
+    expect(ResizeObserver.prototype.unobserve).toHaveBeenCalledTimes(1);
+    expect(WeakMap.prototype.delete).toHaveBeenCalledWith(containerElement);
+    expect(ResizeObserver.prototype.unobserve).toHaveBeenCalledWith(
+        containerElement
+    );
+
+    // Should not clean up after non-container elements
+    mutationRecords = [
+        {
+            removedNodes: [document.createElement("div")]
+        }
+    ];
+
+    WeakMap.prototype.has = jest.fn(() => false);
+    MutationObserver.triggerEvent(mutationRecords);
+
+    expect(WeakMap.prototype.has).toHaveBeenCalledTimes(1);
+    expect(WeakMap.prototype.delete).toHaveBeenCalledTimes(1);
+    expect(ResizeObserver.prototype.unobserve).toHaveBeenCalledTimes(1);
+});

src/runtime/ContainerRegistry.js

@@ -1065,7 +1065,7 @@ [email protected], es6-symbol@^3.1, es6-symbol@^3.1.1, es6-symbol@~3.1, es6-symbo
     d "1"
     es5-ext "~0.10.14"
 
-es6-weak-map@^2.0.1:
+es6-weak-map@^2.0.1, es6-weak-map@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.2.tgz#5e3ab32251ffd1538a1f8e5ffa1357772f92d96f"
   dependencies:
@@ -2407,6 +2407,10 @@ [email protected]:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
 
+mutation-observer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/mutation-observer/-/mutation-observer-1.0.2.tgz#5059b3836180cced1d8f74efd7b3aaf7fa678841"
+
 [email protected]:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"