fix: memory leak when unbind (#19)

__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();
+  });
+});

__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();
   });
 });

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",

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);
 };

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();
     }
   };
 

src/sensors/resizeObserver.js

@@ -3,9 +3,10 @@
  * Contract: [email protected]
  */
 
+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();
   };
 
   /**