@d3fc/d3fc-element - npm Package Compare versions

Comparing version 5.0.8 to 5.0.9

build/d3fc-element.js

@@ -291,2 +291,28 @@ (function (global, factory) {
 
+var updateAutoResize = function updateAutoResize(element) {
+    if (element.autoResize) {
+        addAutoResizeListener(element);
+    } else {
+        removeAutoResizeListener(element);
+    }
+};
+
+var addAutoResizeListener = function addAutoResizeListener(element) {
+    if (element.__autoResizeListener__ != null) {
+        return;
+    }
+    element.__autoResizeListener__ = function () {
+        return _requestRedraw(element);
+    };
+    addEventListener('resize', element.__autoResizeListener__);
+};
+
+var removeAutoResizeListener = function removeAutoResizeListener(element) {
+    if (element.__autoResizeListener__ == null) {
+        return;
+    }
+    removeEventListener('resize', element.__autoResizeListener__);
+    element.__autoResizeListener__ = null;
+};
+
 var _class = function (_CustomElement2) {
@@ -301,2 +327,12 @@ inherits(_class, _CustomElement2);
     createClass(_class, [{
+        key: 'connectedCallback',
+        value: function connectedCallback() {
+            updateAutoResize(this);
+        }
+    }, {
+        key: 'disconnectedCallback',
+        value: function disconnectedCallback() {
+            removeAutoResizeListener(this);
+        }
+    }, {
         key: 'requestRedraw',
@@ -307,18 +343,2 @@ value: function requestRedraw() {
     }, {
-        key: 'updateAutoResize',
-        value: function updateAutoResize() {
-            var _this2 = this;
-
-            if (this.autoResize) {
-                if (this.__autoResizeListener__ == null) {
-                    this.__autoResizeListener__ = function () {
-                        return _requestRedraw(_this2);
-                    };
-                }
-                addEventListener('resize', this.__autoResizeListener__);
-            } else {
-                removeEventListener('resize', this.__autoResizeListener__);
-            }
-        }
-    }, {
         key: 'attributeChangedCallback',
@@ -328,3 +348,3 @@ value: function attributeChangedCallback(name) {
                 case 'auto-resize':
-                    this.updateAutoResize();
+                    updateAutoResize(this);
                     break;
@@ -344,3 +364,3 @@ }
             }
-            this.updateAutoResize();
+            updateAutoResize(this);
         }
@@ -347,0 +367,0 @@ }], [{

build/d3fc-element.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("d3-selection")):"function"==typeof define&&define.amd?define(["d3-selection"],t):t(e.d3)}(this,function(e){"use strict";function t(){return Reflect.construct(HTMLElement,[],this.__proto__.constructor)}function n(){return Reflect.construct(HTMLElement,[],this.__proto__.constructor)}var o="__d3fc-elements__",r=function(e){return e[o]||{}},i=function(e,t){return void(e[o]=t)},u=function(e){return delete e[o]},s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},c=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},a=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),f=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},l=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},d=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},p=function(e){return"D3FC-GROUP"===e.tagName?[e].concat(d(e.querySelectorAll("d3fc-canvas, d3fc-group, d3fc-svg"))):[e]},h=function(e){if("D3FC-GROUP"!==e.tagName){var t=r(e),n=t.width,o=t.height,u=e.clientWidth,s=e.clientHeight;i(e,{width:u,height:s,resized:u!==n||s!==o})}};if("function"!=typeof CustomEvent)throw new Error("d3fc-element depends on CustomEvent. Make sure that you load a polyfill in older browsers. See README.");var y=function(e){if("D3FC-GROUP"!==e.tagName){var t=r(e),n=e.childNodes[0];n.setAttribute("width",t.width),n.setAttribute("height",t.height);var o=new CustomEvent("measure",{detail:t});e.dispatchEvent(o)}},m=function(e){var t=r(e),n=new CustomEvent("draw",{detail:t});e.dispatchEvent(n)},v=function(e){var t=e.map(p).reduce(function(e,t){return e.concat(t)});t.forEach(h),t.forEach(y),t.forEach(m)},b=function(e){return r(e.ownerDocument).queue||[]},E=function(e,t){var n=r(e.ownerDocument),o=n.requestId;null==o&&(o=requestAnimationFrame(function(){var t=b(e);v(t),_(e)})),i(e.ownerDocument,{queue:t,requestId:o})},_=function(e){return u(e.ownerDocument)},w=function(e,t){var n=e;do{if(n.parentNode===t)return!0}while(n=n.parentNode);return!1},g=function(e){var t=b(e);if(!(t.indexOf(e)>-1)&&!t.some(function(t){return w(e,t)})){var n=t.filter(function(t){return!w(t,e)});n.push(e),E(e,n)}};if(Object.setPrototypeOf(t.prototype,HTMLElement.prototype),Object.setPrototypeOf(t,HTMLElement),"function"!=typeof HTMLElement)throw new Error("d3fc-element depends on Custom Elements (v1). Make sure that you load a polyfill in older browsers. See README.");var O=function(e){return function(t){function n(){return c(this,n),l(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return f(n,t),a(n,[{key:"connectedCallback",value:function(){0===this.childNodes.length&&this.appendChild(e())}},{key:"requestRedraw",value:function(){g(this)}}]),n}(t)},R=O(function(){return document.createElement("canvas")});Object.setPrototypeOf(n.prototype,HTMLElement.prototype),Object.setPrototypeOf(n,HTMLElement);var z=function(e){function t(){return c(this,t),l(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return f(t,e),a(t,[{key:"requestRedraw",value:function(){g(this)}},{key:"updateAutoResize",value:function(){var e=this;this.autoResize?(null==this.__autoResizeListener__&&(this.__autoResizeListener__=function(){return g(e)}),addEventListener("resize",this.__autoResizeListener__)):removeEventListener("resize",this.__autoResizeListener__)}},{key:"attributeChangedCallback",value:function(e){switch(e){case"auto-resize":this.updateAutoResize()}}},{key:"autoResize",get:function(){return this.hasAttribute("auto-resize")&&"false"!==this.getAttribute("auto-resize")},set:function(e){e&&!this.autoResize?this.setAttribute("auto-resize",""):!e&&this.autoResize&&this.removeAttribute("auto-resize"),this.updateAutoResize()}}],[{key:"observedAttributes",get:function(){return["auto-resize"]}}]),t}(n),A=O(function(){return document.createElementNS("http://www.w3.org/2000/svg","svg")}),C="d3fc-canvas,d3fc-svg{position:relative;display:block}d3fc-canvas>canvas,d3fc-svg>svg{position:absolute;top:0;right:0;left:0;bottom: 0}d3fc-svg>svg{overflow:visible}",k=document.createElement("style");if(k.setAttribute("type","text/css"),document.querySelector("head").appendChild(k),k.styleSheet?k.styleSheet.cssText+=C:k.textContent+=C,"object"!==("undefined"==typeof customElements?"undefined":s(customElements))||"function"!=typeof customElements.define)throw new Error("d3fc-element depends on Custom Elements (v1). Make sure that you load a polyfill in older browsers. See README.");customElements.define("d3fc-canvas",R),customElements.define("d3fc-group",z),customElements.define("d3fc-svg",A)});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("d3-selection")):"function"==typeof define&&define.amd?define(["d3-selection"],t):t(e.d3)}(this,function(e){"use strict";function t(){return Reflect.construct(HTMLElement,[],this.__proto__.constructor)}function n(){return Reflect.construct(HTMLElement,[],this.__proto__.constructor)}var o="__d3fc-elements__",r=function(e){return e[o]||{}},i=function(e,t){return void(e[o]=t)},u=function(e){return delete e[o]},c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},f=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),a=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},l=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},d=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},p=function(e){return"D3FC-GROUP"===e.tagName?[e].concat(d(e.querySelectorAll("d3fc-canvas, d3fc-group, d3fc-svg"))):[e]},h=function(e){if("D3FC-GROUP"!==e.tagName){var t=r(e),n=t.width,o=t.height,u=e.clientWidth,c=e.clientHeight;i(e,{width:u,height:c,resized:u!==n||c!==o})}};if("function"!=typeof CustomEvent)throw new Error("d3fc-element depends on CustomEvent. Make sure that you load a polyfill in older browsers. See README.");var y=function(e){if("D3FC-GROUP"!==e.tagName){var t=r(e),n=e.childNodes[0];n.setAttribute("width",t.width),n.setAttribute("height",t.height);var o=new CustomEvent("measure",{detail:t});e.dispatchEvent(o)}},m=function(e){var t=r(e),n=new CustomEvent("draw",{detail:t});e.dispatchEvent(n)},v=function(e){var t=e.map(p).reduce(function(e,t){return e.concat(t)});t.forEach(h),t.forEach(y),t.forEach(m)},b=function(e){return r(e.ownerDocument).queue||[]},_=function(e,t){var n=r(e.ownerDocument),o=n.requestId;null==o&&(o=requestAnimationFrame(function(){var t=b(e);v(t),E(e)})),i(e.ownerDocument,{queue:t,requestId:o})},E=function(e){return u(e.ownerDocument)},w=function(e,t){var n=e;do{if(n.parentNode===t)return!0}while(n=n.parentNode);return!1},g=function(e){var t=b(e);if(!(t.indexOf(e)>-1)&&!t.some(function(t){return w(e,t)})){var n=t.filter(function(t){return!w(t,e)});n.push(e),_(e,n)}};if(Object.setPrototypeOf(t.prototype,HTMLElement.prototype),Object.setPrototypeOf(t,HTMLElement),"function"!=typeof HTMLElement)throw new Error("d3fc-element depends on Custom Elements (v1). Make sure that you load a polyfill in older browsers. See README.");var O=function(e){return function(t){function n(){return s(this,n),l(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return a(n,t),f(n,[{key:"connectedCallback",value:function(){0===this.childNodes.length&&this.appendChild(e())}},{key:"requestRedraw",value:function(){g(this)}}]),n}(t)},R=O(function(){return document.createElement("canvas")});Object.setPrototypeOf(n.prototype,HTMLElement.prototype),Object.setPrototypeOf(n,HTMLElement);var z=function(e){e.autoResize?C(e):k(e)},C=function(e){null==e.__autoResizeListener__&&(e.__autoResizeListener__=function(){return g(e)},addEventListener("resize",e.__autoResizeListener__))},k=function(e){null!=e.__autoResizeListener__&&(removeEventListener("resize",e.__autoResizeListener__),e.__autoResizeListener__=null)},A=function(e){function t(){return s(this,t),l(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return a(t,e),f(t,[{key:"connectedCallback",value:function(){z(this)}},{key:"disconnectedCallback",value:function(){k(this)}},{key:"requestRedraw",value:function(){g(this)}},{key:"attributeChangedCallback",value:function(e){switch(e){case"auto-resize":z(this)}}},{key:"autoResize",get:function(){return this.hasAttribute("auto-resize")&&"false"!==this.getAttribute("auto-resize")},set:function(e){e&&!this.autoResize?this.setAttribute("auto-resize",""):!e&&this.autoResize&&this.removeAttribute("auto-resize"),z(this)}}],[{key:"observedAttributes",get:function(){return["auto-resize"]}}]),t}(n),L=O(function(){return document.createElementNS("http://www.w3.org/2000/svg","svg")}),S="d3fc-canvas,d3fc-svg{position:relative;display:block}d3fc-canvas>canvas,d3fc-svg>svg{position:absolute;top:0;right:0;left:0;bottom: 0}d3fc-svg>svg{overflow:visible}",j=document.createElement("style");if(j.setAttribute("type","text/css"),document.querySelector("head").appendChild(j),j.styleSheet?j.styleSheet.cssText+=S:j.textContent+=S,"object"!==("undefined"==typeof customElements?"undefined":c(customElements))||"function"!=typeof customElements.define)throw new Error("d3fc-element depends on Custom Elements (v1). Make sure that you load a polyfill in older browsers. See README.");customElements.define("d3fc-canvas",R),customElements.define("d3fc-group",A),customElements.define("d3fc-svg",L)});

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+<a name="5.0.9"></a>
+## [5.0.9](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-element@5.0.8...@d3fc/d3fc-element@5.0.9) (2018-08-23)
+
+
+### Bug Fixes
+
+* remove resize listener to fix memory leak ([61cc4cd](https://github.com/d3fc/d3fc/commit/61cc4cd)), closes [#1152](https://github.com/d3fc/d3fc/issues/1152)
+
+
+
+
 <a name="5.0.8"></a>
@@ -8,0 +19,0 @@ ## [5.0.8](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-element@5.0.7...@d3fc/d3fc-element@5.0.8) (2018-08-22)

package.json

 {
   "name": "@d3fc/d3fc-element",
-  "version": "5.0.8",
+  "version": "5.0.9",
   "description": "Custom HTML elements that make it easier to create responsive visualisations that integrate easily with other UI frameworks (e.g. React, Angular)",
@@ -5,0 +5,0 @@ "license": "MIT",

src/group.js

@@ -5,4 +5,35 @@ /* eslint-env browser */
 
+const updateAutoResize = (element) => {
+    if (element.autoResize) {
+        addAutoResizeListener(element);
+    } else {
+        removeAutoResizeListener(element);
+    }
+};
+
+const addAutoResizeListener = (element) => {
+    if (element.__autoResizeListener__ != null) {
+        return;
+    }
+    element.__autoResizeListener__ = () => requestRedraw(element);
+    addEventListener('resize', element.__autoResizeListener__);
+};
+
+const removeAutoResizeListener = (element) => {
+    if (element.__autoResizeListener__ == null) {
+        return;
+    }
+    removeEventListener('resize', element.__autoResizeListener__);
+    element.__autoResizeListener__ = null;
+};
+
 export default class extends HTMLElement {
+    connectedCallback() {
+        updateAutoResize(this);
+    }
 
+    disconnectedCallback() {
+        removeAutoResizeListener(this);
+    }
+
     requestRedraw() {
@@ -22,16 +53,5 @@ requestRedraw(this);
         }
-        this.updateAutoResize();
+        updateAutoResize(this);
     }
 
-    updateAutoResize() {
-        if (this.autoResize) {
-            if (this.__autoResizeListener__ == null) {
-                this.__autoResizeListener__ = () => requestRedraw(this);
-            }
-            addEventListener('resize', this.__autoResizeListener__);
-        } else {
-            removeEventListener('resize', this.__autoResizeListener__);
-        }
-    }
-
     static get observedAttributes() {
@@ -44,3 +64,3 @@ return ['auto-resize'];
         case 'auto-resize':
-            this.updateAutoResize();
+            updateAutoResize(this);
             break;
@@ -47,0 +67,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

48291

9.36%

Number of package files

27

3.85%

Lines of code

806

14%

No dependency changes