@juggle/resize-observer - npm Package Compare versions

Comparing version 3.1.3 to 3.2.0

lib/algorithms/calculateBoxSize.d.ts

@@ -10,5 +10,4 @@ import { ResizeObserverBoxOptions } from '../ResizeObserverBoxOptions';
 }
-declare const cache: Map<any, any>;
-declare const calculateBoxSizes: (target: Element) => ResizeObserverSizeCollection;
-declare const calculateBoxSize: (target: Element, observedBox: ResizeObserverBoxOptions) => ResizeObserverSize;
-export { calculateBoxSize, calculateBoxSizes, cache };
+declare const calculateBoxSizes: (target: Element, forceRecalculation?: boolean) => ResizeObserverSizeCollection;
+declare const calculateBoxSize: (target: Element, observedBox: ResizeObserverBoxOptions, forceRecalculation?: boolean | undefined) => ResizeObserverSize;
+export { calculateBoxSize, calculateBoxSizes };

lib/algorithms/calculateBoxSize.js

@@ -5,3 +5,3 @@ import { ResizeObserverBoxOptions } from '../ResizeObserverBoxOptions';
 import { global } from '../utils/global';
-var cache = new Map();
+var cache = new WeakMap();
 var scrollRegexp = /auto|scroll/;
@@ -26,4 +26,5 @@ var verticalRegexp = /^tb|vertical/;
 });
-var calculateBoxSizes = function (target) {
-    if (cache.has(target)) {
+var calculateBoxSizes = function (target, forceRecalculation) {
+    if (forceRecalculation === void 0) { forceRecalculation = false; }
+    if (cache.has(target) && !forceRecalculation) {
         return cache.get(target);
@@ -70,4 +71,4 @@ }
 };
-var calculateBoxSize = function (target, observedBox) {
-    var _a = calculateBoxSizes(target), borderBoxSize = _a.borderBoxSize, contentBoxSize = _a.contentBoxSize, devicePixelContentBoxSize = _a.devicePixelContentBoxSize;
+var calculateBoxSize = function (target, observedBox, forceRecalculation) {
+    var _a = calculateBoxSizes(target, forceRecalculation), borderBoxSize = _a.borderBoxSize, contentBoxSize = _a.contentBoxSize, devicePixelContentBoxSize = _a.devicePixelContentBoxSize;
     switch (observedBox) {
@@ -82,2 +83,2 @@ case ResizeObserverBoxOptions.DEVICE_PIXEL_CONTENT_BOX:
 };
-export { calculateBoxSize, calculateBoxSizes, cache };
+export { calculateBoxSize, calculateBoxSizes };

lib/algorithms/gatherActiveObservationsAtDepth.js

 import { resizeObservers } from '../utils/resizeObservers';
 import { calculateDepthForNode } from './calculateDepthForNode';
-import { cache as sizeCache } from './calculateBoxSize';
 var gatherActiveObservationsAtDepth = function (depth) {
-    sizeCache.clear();
     resizeObservers.forEach(function processObserver(ro) {
@@ -7,0 +5,0 @@ ro.activeTargets.splice(0, ro.activeTargets.length);

lib/DOMRectReadOnly.d.ts

@@ -7,2 +7,12 @@ interface Rectangle {
 }
+declare type DOMRectJSON = {
+    x: number;
+    y: number;
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    width: number;
+    height: number;
+};
 declare class DOMRectReadOnly {
@@ -18,5 +28,5 @@ readonly x: number;
     constructor(x: number, y: number, width: number, height: number);
-    toJSON(): object;
+    toJSON(): DOMRectJSON;
     static fromRect(rectangle: Rectangle): Readonly<DOMRectReadOnly>;
 }
 export { DOMRectReadOnly };

lib/exports/resize-observer.umd.js

@@ -96,3 +96,3 @@ (function (global, factory) {
 
-    var cache = new Map();
+    var cache = new WeakMap();
     var scrollRegexp = /auto|scroll/;
@@ -117,4 +117,5 @@ var verticalRegexp = /^tb|vertical/;
     });
-    var calculateBoxSizes = function (target) {
-        if (cache.has(target)) {
+    var calculateBoxSizes = function (target, forceRecalculation) {
+        if (forceRecalculation === void 0) { forceRecalculation = false; }
+        if (cache.has(target) && !forceRecalculation) {
             return cache.get(target);
@@ -161,4 +162,4 @@ }
     };
-    var calculateBoxSize = function (target, observedBox) {
-        var _a = calculateBoxSizes(target), borderBoxSize = _a.borderBoxSize, contentBoxSize = _a.contentBoxSize, devicePixelContentBoxSize = _a.devicePixelContentBoxSize;
+    var calculateBoxSize = function (target, observedBox, forceRecalculation) {
+        var _a = calculateBoxSizes(target, forceRecalculation), borderBoxSize = _a.borderBoxSize, contentBoxSize = _a.contentBoxSize, devicePixelContentBoxSize = _a.devicePixelContentBoxSize;
         switch (observedBox) {
@@ -229,3 +230,2 @@ case ResizeObserverBoxOptions.DEVICE_PIXEL_CONTENT_BOX:
     var gatherActiveObservationsAtDepth = function (depth) {
-        cache.clear();
         resizeObservers.forEach(function processObserver(ro) {
@@ -283,3 +283,3 @@ ro.activeTargets.splice(0, ro.activeTargets.length);
     var isWatching = function () { return !!watching; };
-    var CATCH_FRAMES = 60 / 5;
+    var CATCH_PERIOD = 250;
     var observerConfig = { attributes: true, characterData: true, childList: true, subtree: true };
@@ -302,2 +302,6 @@ var events = [
     ];
+    var time = function (timeout) {
+        if (timeout === void 0) { timeout = 0; }
+        return Date.now() + timeout;
+    };
     var scheduled = false;
@@ -310,4 +314,5 @@ var Scheduler = (function () {
         }
-        Scheduler.prototype.run = function (frames) {
+        Scheduler.prototype.run = function (timeout) {
             var _this = this;
+            if (timeout === void 0) { timeout = CATCH_PERIOD; }
             if (scheduled) {
@@ -317,2 +322,3 @@ return;
             scheduled = true;
+            var until = time(timeout);
             queueResizeObserver(function () {
@@ -325,2 +331,3 @@ var elementsHaveResized = false;
                     scheduled = false;
+                    timeout = until - time();
                     if (!isWatching()) {
@@ -330,6 +337,6 @@ return;
                     if (elementsHaveResized) {
-                        _this.run(60);
+                        _this.run(1000);
                     }
-                    else if (frames) {
-                        _this.run(frames - 1);
+                    else if (timeout > 0) {
+                        _this.run(timeout);
                     }
@@ -344,3 +351,3 @@ else {
             this.stop();
-            this.run(CATCH_FRAMES);
+            this.run();
         };
@@ -393,3 +400,3 @@ Scheduler.prototype.observe = function () {
         ResizeObservation.prototype.isActive = function () {
-            var size = calculateBoxSize(this.target, this.observedBox);
+            var size = calculateBoxSize(this.target, this.observedBox, true);
             if (skipNotifyOnElement(this.target)) {
@@ -418,3 +425,3 @@ this.lastReportedSize = size;
 
-    var observerMap = new Map();
+    var observerMap = new WeakMap();
     var getObservationIndex = function (observationTargets, target) {
@@ -433,32 +440,29 @@ for (var i = 0; i < observationTargets.length; i += 1) {
             var detail = new ResizeObserverDetail(resizeObserver, callback);
-            resizeObservers.push(detail);
             observerMap.set(resizeObserver, detail);
         };
         ResizeObserverController.observe = function (resizeObserver, target, options) {
-            if (observerMap.has(resizeObserver)) {
-                var detail = observerMap.get(resizeObserver);
-                if (getObservationIndex(detail.observationTargets, target) < 0) {
-                    detail.observationTargets.push(new ResizeObservation(target, options && options.box));
-                    updateCount(1);
-                    scheduler.schedule();
-                }
+            var detail = observerMap.get(resizeObserver);
+            var firstObservation = detail.observationTargets.length === 0;
+            if (getObservationIndex(detail.observationTargets, target) < 0) {
+                firstObservation && resizeObservers.push(detail);
+                detail.observationTargets.push(new ResizeObservation(target, options && options.box));
+                updateCount(1);
+                scheduler.schedule();
             }
         };
         ResizeObserverController.unobserve = function (resizeObserver, target) {
-            if (observerMap.has(resizeObserver)) {
-                var detail = observerMap.get(resizeObserver);
-                var index = getObservationIndex(detail.observationTargets, target);
-                if (index >= 0) {
-                    detail.observationTargets.splice(index, 1);
-                    updateCount(-1);
-                }
+            var detail = observerMap.get(resizeObserver);
+            var index = getObservationIndex(detail.observationTargets, target);
+            var lastObservation = detail.observationTargets.length === 1;
+            if (index >= 0) {
+                lastObservation && resizeObservers.splice(resizeObservers.indexOf(detail), 1);
+                detail.observationTargets.splice(index, 1);
+                updateCount(-1);
             }
         };
         ResizeObserverController.disconnect = function (resizeObserver) {
-            if (observerMap.has(resizeObserver)) {
-                var detail = observerMap.get(resizeObserver);
-                resizeObservers.splice(resizeObservers.indexOf(detail), 1);
-                observerMap.delete(resizeObserver);
-                updateCount(-detail.observationTargets.length);
-            }
+            var _this = this;
+            var detail = observerMap.get(resizeObserver);
+            detail.observationTargets.slice().forEach(function (ot) { return _this.unobserve(resizeObserver, ot.target); });
+            detail.activeTargets.splice(0, detail.activeTargets.length);
         };
@@ -465,0 +469,0 @@ return ResizeObserverController;

lib/ResizeObservation.js

@@ -19,3 +19,3 @@ import { ResizeObserverBoxOptions } from './ResizeObserverBoxOptions';
     ResizeObservation.prototype.isActive = function () {
-        var size = calculateBoxSize(this.target, this.observedBox);
+        var size = calculateBoxSize(this.target, this.observedBox, true);
         if (skipNotifyOnElement(this.target)) {
@@ -22,0 +22,0 @@ this.lastReportedSize = size;

lib/ResizeObserverController.js

@@ -5,3 +5,3 @@ import { scheduler, updateCount } from './utils/scheduler';
 import { resizeObservers } from './utils/resizeObservers';
-var observerMap = new Map();
+var observerMap = new WeakMap();
 var getObservationIndex = function (observationTargets, target) {
@@ -20,32 +20,29 @@ for (var i = 0; i < observationTargets.length; i += 1) {
         var detail = new ResizeObserverDetail(resizeObserver, callback);
-        resizeObservers.push(detail);
         observerMap.set(resizeObserver, detail);
     };
     ResizeObserverController.observe = function (resizeObserver, target, options) {
-        if (observerMap.has(resizeObserver)) {
-            var detail = observerMap.get(resizeObserver);
-            if (getObservationIndex(detail.observationTargets, target) < 0) {
-                detail.observationTargets.push(new ResizeObservation(target, options && options.box));
-                updateCount(1);
-                scheduler.schedule();
-            }
+        var detail = observerMap.get(resizeObserver);
+        var firstObservation = detail.observationTargets.length === 0;
+        if (getObservationIndex(detail.observationTargets, target) < 0) {
+            firstObservation && resizeObservers.push(detail);
+            detail.observationTargets.push(new ResizeObservation(target, options && options.box));
+            updateCount(1);
+            scheduler.schedule();
         }
     };
     ResizeObserverController.unobserve = function (resizeObserver, target) {
-        if (observerMap.has(resizeObserver)) {
-            var detail = observerMap.get(resizeObserver);
-            var index = getObservationIndex(detail.observationTargets, target);
-            if (index >= 0) {
-                detail.observationTargets.splice(index, 1);
-                updateCount(-1);
-            }
+        var detail = observerMap.get(resizeObserver);
+        var index = getObservationIndex(detail.observationTargets, target);
+        var lastObservation = detail.observationTargets.length === 1;
+        if (index >= 0) {
+            lastObservation && resizeObservers.splice(resizeObservers.indexOf(detail), 1);
+            detail.observationTargets.splice(index, 1);
+            updateCount(-1);
         }
     };
     ResizeObserverController.disconnect = function (resizeObserver) {
-        if (observerMap.has(resizeObserver)) {
-            var detail = observerMap.get(resizeObserver);
-            resizeObservers.splice(resizeObservers.indexOf(detail), 1);
-            observerMap.delete(resizeObserver);
-            updateCount(-detail.observationTargets.length);
-        }
+        var _this = this;
+        var detail = observerMap.get(resizeObserver);
+        detail.observationTargets.slice().forEach(function (ot) { return _this.unobserve(resizeObserver, ot.target); });
+        detail.activeTargets.splice(0, detail.activeTargets.length);
     };
@@ -52,0 +49,0 @@ return ResizeObserverController;

lib/utils/scheduler.d.ts

@@ -6,3 +6,3 @@ declare class Scheduler {
     constructor();
-    run(frames: number): void;
+    private run;
     schedule(): void;
@@ -9,0 +9,0 @@ private observe;

lib/utils/scheduler.js

@@ -6,3 +6,3 @@ import { process } from './process';
 var isWatching = function () { return !!watching; };
-var CATCH_FRAMES = 60 / 5;
+var CATCH_PERIOD = 250;
 var observerConfig = { attributes: true, characterData: true, childList: true, subtree: true };
@@ -25,2 +25,6 @@ var events = [
 ];
+var time = function (timeout) {
+    if (timeout === void 0) { timeout = 0; }
+    return Date.now() + timeout;
+};
 var scheduled = false;
@@ -33,4 +37,5 @@ var Scheduler = (function () {
     }
-    Scheduler.prototype.run = function (frames) {
+    Scheduler.prototype.run = function (timeout) {
         var _this = this;
+        if (timeout === void 0) { timeout = CATCH_PERIOD; }
         if (scheduled) {
@@ -40,2 +45,3 @@ return;
         scheduled = true;
+        var until = time(timeout);
         queueResizeObserver(function () {
@@ -48,2 +54,3 @@ var elementsHaveResized = false;
                 scheduled = false;
+                timeout = until - time();
                 if (!isWatching()) {
@@ -53,6 +60,6 @@ return;
                 if (elementsHaveResized) {
-                    _this.run(60);
+                    _this.run(1000);
                 }
-                else if (frames) {
-                    _this.run(frames - 1);
+                else if (timeout > 0) {
+                    _this.run(timeout);
                 }
@@ -67,3 +74,3 @@ else {
         this.stop();
-        this.run(CATCH_FRAMES);
+        this.run();
     };
@@ -70,0 +77,0 @@ Scheduler.prototype.observe = function () {

package.json

 {
   "name": "@juggle/resize-observer",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "description": "Polyfills the ResizeObserver API and supports box size options from the latest spec",
@@ -53,18 +53,18 @@ "main": "lib/exports/resize-observer.umd.js",
   "devDependencies": {
-    "@types/jest": "^24.9.1",
-    "@typescript-eslint/eslint-plugin": "^1.13.0",
-    "@typescript-eslint/parser": "^1.13.0",
-    "core-js": "^3.6.4",
-    "coveralls": "^3.0.11",
+    "@types/jest": "^25.2.3",
+    "@typescript-eslint/eslint-plugin": "^3.0.2",
+    "@typescript-eslint/parser": "^3.0.2",
+    "core-js": "^3.6.5",
+    "coveralls": "^3.1.0",
     "cssnano": "^4.1.10",
-    "eslint": "^6.8.0",
-    "jest": "^24.9.0",
-    "jest-cli": "^24.9.0",
-    "jest-junit": "^6.4.0",
-    "jsdom": "^15.2.1",
+    "eslint": "^7.1.0",
+    "jest": "^26.0.1",
+    "jest-cli": "^26.0.1",
+    "jest-junit": "^10.0.0",
+    "jsdom": "^16.2.2",
     "parcel-bundler": "^1.12.4",
-    "rollup": "^1.32.1",
-    "ts-jest": "^24.3.0",
-    "typescript": "^3.8.3"
+    "rollup": "^2.12.0",
+    "ts-jest": "^26.1.0",
+    "typescript": "^3.9.3"
   }
 }

README.md

@@ -67,4 +67,4 @@ <p align="center">
   entries.forEach((entry, index) => {
-    const { inlineSize: width, blockSize: height } = entry.borderBoxSize[0];
-    console.log(`Element ${index + 1}:`, `${width}x${height}`);
+    const [size] = entry.borderBoxSize;
+    console.log(`Element ${index + 1}:`, `${size.inlineSize}x${size.blockSize}`);
   });
@@ -81,2 +81,4 @@ });
 ```
+*From the spec:*
+> The box size properties are exposed as sequences in order to support elements that have multiple fragments, which occur in [multi-column](https://www.w3.org/TR/css3-multicol/#) scenarios. However the current definitions of content rect and border box do not mention how those boxes are affected by multi-column layout. In this spec, there will only be a single ResizeObserverSize returned in the sequences, which will correspond to the dimensions of the first column. A future version of this spec will extend the returned sequences to contain the per-fragment size information.
 
@@ -83,0 +85,0 @@ ## Using the legacy version (`contentRect`)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

72222

increased by2.32%

Lines of code

1162

increased by1.4%

Number of lines in readme file

222

increased by0.91%

No dependency changes