From 38a16246f0ff0da865de2bc58139ecb6cbf4721f Mon Sep 17 00:00:00 2001
From: hustcc <i@hust.cc>
Date: Wed, 30 Aug 2023 14:25:46 +0800
Subject: [PATCH] fix: memory leak when unbind

---
 __tests__/issue-17.spec.js    | 29 +++++++++++++++++++++++++++++
 __tests__/unbind.spec.js      |  2 +-
 dist/size-sensor.min.js       |  2 +-
 package.json                  |  2 +-
 src/sensorPool.js             | 22 +++++++++++++---------
 src/sensors/object.js         |  6 ++++--
 src/sensors/resizeObserver.js |  5 ++++-
 7 files changed, 53 insertions(+), 15 deletions(-)
 create mode 100644 __tests__/issue-17.spec.js

diff --git a/__tests__/issue-17.spec.js b/__tests__/issue-17.spec.js
new file mode 100644
index 0000000..5086be7
--- /dev/null
+++ b/__tests__/issue-17.spec.js
@@ -0,0 +1,29 @@
+import { clear, bind } from '../src';
+import { Sensors } from '../src/sensorPool';
+
+describe('#17', () => {
+  // 创建 div
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  div.innerHTML = `<div id="wrapper"></div>`;
+
+  const wrapper = document.getElementById('wrapper');
+
+  test('memory leak', () => {
+    const unbind1 = bind(wrapper, () => {});
+    const unbind2 = bind(wrapper, () => {});
+
+    const id = wrapper.getAttribute('size-sensor-id');
+
+    expect(Object.keys(Sensors).length).toBe(1);
+    expect(Sensors[id]).not.toBeUndefined();
+
+    unbind1();
+    expect(Object.keys(Sensors).length).toBe(1);
+    expect(Sensors[id]).not.toBeNull();
+
+    unbind2();
+    expect(Object.keys(Sensors).length).toBe(0);
+    expect(Sensors[id]).toBeUndefined();
+  });
+});
diff --git a/__tests__/unbind.spec.js b/__tests__/unbind.spec.js
index 6892e11..a704887 100644
--- a/__tests__/unbind.spec.js
+++ b/__tests__/unbind.spec.js
@@ -21,6 +21,6 @@ describe('unbind', () => {
     expect(wrapper.getAttribute('size-sensor-id')).not.toBeNull();
 
     unbind();
-    expect(wrapper.getAttribute('size-sensor-id')).not.toBeNull();
+    expect(wrapper.getAttribute('size-sensor-id')).toBeNull();
   });
 });
diff --git a/dist/size-sensor.min.js b/dist/size-sensor.min.js
index 4ef1d95..46bb48b 100644
--- a/dist/size-sensor.min.js
+++ b/dist/size-sensor.min.js
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).sizeSensor={})}(this,function(e){"use strict";function s(o){var r=1<arguments.length&&void 0!==arguments[1]?arguments[1]:60,u=null;return function(){for(var e=this,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];clearTimeout(u),u=setTimeout(function(){o.apply(e,n)},r)}}function o(e){var t=e.getAttribute(u);if(t&&c[t])return c[t];var n="".concat(r++);e.setAttribute(u,n);var i=d(e);return c[n]=i}var r=1,u="size-sensor-id",d="undefined"!=typeof ResizeObserver?function(n){function i(){o.disconnect(),r=[],o=void 0}var o=void 0,r=[],u=s(function(){r.forEach(function(e){e(n)})});return{element:n,bind:function(e){var t;o||((t=new ResizeObserver(u)).observe(n),u(),o=t),-1===r.indexOf(e)&&r.push(e)},destroy:i,unbind:function(e){var t=r.indexOf(e);-1!==t&&r.splice(t,1),0===r.length&&o&&i()}}}:function(t){function n(){i&&i.parentNode&&(i.contentDocument&&i.contentDocument.defaultView.removeEventListener("resize",r),i.parentNode.removeChild(i),i=void 0,o=[])}var i=void 0,o=[],r=s(function(){o.forEach(function(e){e(t)})});return{element:t,bind:function(e){i=i||function(){"static"===getComputedStyle(t).position&&(t.style.position="relative");var e=document.createElement("object");return e.onload=function(){e.contentDocument.defaultView.addEventListener("resize",r),r()},e.style.display="block",e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.height="100%",e.style.width="100%",e.style.overflow="hidden",e.style.pointerEvents="none",e.style.zIndex="-1",e.style.opacity="0",e.setAttribute("class","size-sensor-object"),e.setAttribute("tabindex","-1"),e.type="text/html",t.appendChild(e),e.data="about:blank",e}(),-1===o.indexOf(e)&&o.push(e)},destroy:n,unbind:function(e){var t=o.indexOf(e);-1!==t&&o.splice(t,1),0===o.length&&i&&n()}}},c={};e.bind=function(e,t){var n=o(e);return n.bind(t),function(){n.unbind(t)}},e.clear=function(e){var t,n,i=o(e);n=(t=i).element.getAttribute(u),t.element.removeAttribute(u),t.destroy(),n&&c[n]&&delete c[n]},e.ver="1.0.1",Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).sizeSensor={})}(this,function(e){"use strict";function u(o){var r=1<arguments.length&&void 0!==arguments[1]?arguments[1]:60,u=null;return function(){for(var e=this,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];clearTimeout(u),u=setTimeout(function(){o.apply(e,n)},r)}}var t=1,i=function(){return"".concat(t++)},s="size-sensor-id",o="undefined"!=typeof ResizeObserver?function(n,e){function t(){i.disconnect(),o=[],i=void 0,n.removeAttribute(s),e&&e()}var i=void 0,o=[],r=u(function(){o.forEach(function(e){e(n)})});return{element:n,bind:function(e){var t;i||((t=new ResizeObserver(r)).observe(n),r(),i=t),-1===o.indexOf(e)&&o.push(e)},destroy:t,unbind:function(e){e=o.indexOf(e);-1!==e&&o.splice(e,1),0===o.length&&i&&t()}}}:function(n,e){function t(){i&&i.parentNode&&(i.contentDocument&&i.contentDocument.defaultView.removeEventListener("resize",r),i.parentNode.removeChild(i),n.removeAttribute(s),i=void 0,o=[],e)&&e()}var i=void 0,o=[],r=u(function(){o.forEach(function(e){e(n)})});return{element:n,bind:function(e){var t;i||("static"===getComputedStyle(n).position&&(n.style.position="relative"),(t=document.createElement("object")).onload=function(){t.contentDocument.defaultView.addEventListener("resize",r),r()},t.style.display="block",t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.height="100%",t.style.width="100%",t.style.overflow="hidden",t.style.pointerEvents="none",t.style.zIndex="-1",t.style.opacity="0",t.setAttribute("class","size-sensor-object"),t.setAttribute("tabindex","-1"),t.type="text/html",n.appendChild(t),t.data="about:blank",i=t),-1===o.indexOf(e)&&o.push(e)},destroy:t,unbind:function(e){e=o.indexOf(e);-1!==e&&o.splice(e,1),0===o.length&&i&&t()}}},r={};function c(e){e&&r[e]&&delete r[e]}function d(e){var t,n=e.getAttribute(s);return n&&r[n]?r[n]:(t=i(),e.setAttribute(s,t),n=o(e,function(){return c(t)}),r[t]=n)}e.bind=function(e,t){var n=d(e);return n.bind(t),function(){n.unbind(t)}},e.clear=function(e){var t,e=d(e);t=(e=e).element.getAttribute(s),e.destroy(),c(t)},e.ver="1.0.2",Object.defineProperty(e,"__esModule",{value:!0})});
diff --git a/package.json b/package.json
index 8683645..39faaae 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "size-sensor",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "DOM element size sensor which will callback when size changed.",
   "main": "lib/index.js",
   "types": "index.d.ts",
diff --git a/src/sensorPool.js b/src/sensorPool.js
index 71015cf..5fad93e 100644
--- a/src/sensorPool.js
+++ b/src/sensorPool.js
@@ -11,7 +11,17 @@ import { SizeSensorId } from './constant';
  * all the sensor objects.
  * sensor pool
  */
-const Sensors = {};
+export const Sensors = {};
+
+/**
+ * When destroy the sensor, remove it from the pool
+ */
+function clean(sensorId) {
+  // exist, then remove from pool
+  if (sensorId && Sensors[sensorId]) {
+    delete Sensors[sensorId];
+  }
+}
 
 /**
  * get one sensor
@@ -30,7 +40,7 @@ export const getSensor = element => {
   const newId = id();
   element.setAttribute(SizeSensorId, newId);
 
-  const sensor = createSensor(element);
+  const sensor = createSensor(element, () => clean(newId));
   // add sensor into pool
   Sensors[newId] = sensor;
 
@@ -43,14 +53,8 @@ export const getSensor = element => {
  */
 export const removeSensor = sensor => {
   const sensorId = sensor.element.getAttribute(SizeSensorId);
-
-  // remove attribute
-  sensor.element.removeAttribute(SizeSensorId);
   // remove event, dom of the sensor used
   sensor.destroy();
 
-  // exist, then remove from pool
-  if (sensorId && Sensors[sensorId]) {
-    delete Sensors[sensorId];
-  }
+  clean(sensorId);
 };
diff --git a/src/sensors/object.js b/src/sensors/object.js
index a39834a..01415aa 100644
--- a/src/sensors/object.js
+++ b/src/sensors/object.js
@@ -4,9 +4,9 @@
  */
 
 import debounce from '../debounce';
-import { SensorClassName, SensorTabIndex } from '../constant';
+import { SensorClassName, SensorTabIndex, SizeSensorId } from '../constant';
 
-export const createSensor = element => {
+export const createSensor = (element, whenDestroy) => {
   let sensor = undefined;
   // callback
   let listeners = [];
@@ -85,8 +85,10 @@ export const createSensor = element => {
       // remove dom
       sensor.parentNode.removeChild(sensor);
       // initial variable
+      element.removeAttribute(SizeSensorId);
       sensor = undefined;
       listeners = [];
+      whenDestroy && whenDestroy();
     }
   };
 
diff --git a/src/sensors/resizeObserver.js b/src/sensors/resizeObserver.js
index 4cd3602..9a4ac5e 100644
--- a/src/sensors/resizeObserver.js
+++ b/src/sensors/resizeObserver.js
@@ -3,9 +3,10 @@
  * Contract: i@hust.cc
  */
 
+import { SizeSensorId } from '../constant';
 import debounce from '../debounce';
 
-export const createSensor = element => {
+export const createSensor = (element, whenDestroy) => {
   let sensor = undefined;
   // callback
   let listeners = [];
@@ -56,6 +57,8 @@ export const createSensor = element => {
 
     listeners = [];
     sensor = undefined;
+    element.removeAttribute(SizeSensorId);
+    whenDestroy && whenDestroy();
   };
 
   /**