fix: mutationobserver memory leak - use weakmap for bookkeeping

packages/@lwc/synthetic-shadow/src/polyfills/mutation-observer/polyfill.ts

@@ -6,11 +6,13 @@
  */
 import {
     ArrayIndexOf,
-    ArrayReduce,
     ArrayPush,
+    ArrayReduce,
+    ArraySplice,
     create,
     defineProperty,
     defineProperties,
+    forEach,
     isUndefined,
     isNull,
 } from '../../shared/language';
@@ -28,6 +30,8 @@ const {
 const wrapperLookupField = '$$lwcObserverCallbackWrapper$$';
 const observerLookupField = '$$lwcNodeObservers$$';
 
+const observerToNodesMap: WeakMap<MutationObserver, Array<Node>> = new WeakMap();
+
 /**
  * Retarget the mutation record's target value to its shadowRoot
  * @param {MutationRecord} originalRecord
@@ -199,6 +203,21 @@ function PatchedMutationObserver(
 
 function patchedDisconnect(this: MutationObserver): void {
     originalDisconnect.call(this);
+
+    // Clear the node to observer reference which is a strong references
+    const observedNodes = observerToNodesMap.get(this);
+    if (!isUndefined(observedNodes)) {
+        forEach.call(observedNodes, observedNode => {
+            const observers = observedNode[observerLookupField];
+            if (!isUndefined(observers)) {
+                const index = ArrayIndexOf.call(observers, this);
+                if (index !== -1) {
+                    ArraySplice.call(observers, index, 1);
+                }
+            }
+        });
+        observedNodes.length = 0;
+    }
 }
 
 /**
@@ -216,11 +235,26 @@ function patchedObserve(
     if (isUndefined(target[observerLookupField])) {
         defineProperty(target, observerLookupField, { value: [] });
     }
-    ArrayPush.call(target[observerLookupField], this);
+    // Same observer trying to observe the same node
+    if (ArrayIndexOf.call(target[observerLookupField], this) === -1) {
+        ArrayPush.call(target[observerLookupField], this);
+    } // else There is more bookkeeping to do here https://dom.spec.whatwg.org/#dom-mutationobserver-observe Step #7
+
     // If the target is a SyntheticShadowRoot, observe the host since the shadowRoot is an empty documentFragment
     if (target instanceof SyntheticShadowRoot) {
         target = (target as ShadowRoot).host;
     }
+
+    // maintain a list of all nodes observed by this observer
+    if (observerToNodesMap.has(this)) {
+        const observedNodes = observerToNodesMap.get(this)!;
+        if (ArrayIndexOf.call(observedNodes, target) === -1) {
+            ArrayPush.call(observedNodes, target);
+        }
+    } else {
+        observerToNodesMap.set(this, [target]);
+    }
+
     return originalObserve.call(this, target, options);
 }
 

packages/integration-karma/test/shadow-dom/MutationObserver/MutationObserver.spec.js

@@ -423,4 +423,62 @@ describe('MutationObserver is synthetic shadow dom aware.', () => {
             });
         });
     });
+    if (!process.env.NATIVE_SHADOW) {
+        describe('References to mutation observers are not leaked', () => {
+            let container;
+            beforeEach(() => {
+                container = document.createElement('div');
+                document.body.appendChild(container);
+            });
+            it('should not leak after disconnect', () => {
+                const node = document.createElement('div');
+                container.appendChild(node);
+                const observer = new MutationObserver(() => {});
+                observer.observe(node, observerConfig);
+                expect(node.$$lwcNodeObservers$$.length).toBe(1);
+                observer.disconnect();
+                expect(node.$$lwcNodeObservers$$.length).toBe(0);
+            });
+
+            it('should not leak after disconnect - multiple nodes', () => {
+                const node1 = document.createElement('div');
+                const node2 = document.createElement('div');
+                container.appendChild(node1);
+                container.appendChild(node2);
+                const observer = new MutationObserver(() => {});
+                observer.observe(node1, observerConfig);
+                observer.observe(node2, observerConfig);
+                expect(node1.$$lwcNodeObservers$$.length).toBe(1);
+                expect(node2.$$lwcNodeObservers$$.length).toBe(1);
+                observer.disconnect();
+                expect(node1.$$lwcNodeObservers$$.length).toBe(0);
+                expect(node2.$$lwcNodeObservers$$.length).toBe(0);
+            });
+
+            it('should not leak after disconnect - multiple observers', () => {
+                const node = document.createElement('div');
+                container.appendChild(node);
+                const observer1 = new MutationObserver(() => {});
+                const observer2 = new MutationObserver(() => {});
+                observer1.observe(node, observerConfig);
+                expect(node.$$lwcNodeObservers$$.length).toBe(1);
+                observer2.observe(node, observerConfig);
+                expect(node.$$lwcNodeObservers$$.length).toBe(2);
+                observer1.disconnect();
+                expect(node.$$lwcNodeObservers$$.length).toBe(1);
+                observer2.disconnect();
+                expect(node.$$lwcNodeObservers$$.length).toBe(0);
+            });
+
+            it('should not leak after disconnect - duplicate observe()s', () => {
+                const node = document.createElement('div');
+                container.appendChild(node);
+                const observer = new MutationObserver(() => {});
+                observer.observe(node, observerConfig);
+                observer.observe(node, observerConfig);
+                observer.disconnect();
+                expect(node.$$lwcNodeObservers$$.length).toBe(0);
+            });
+        });
+    }
 });