@juggle/resize-observer - npm Package Compare versions

Comparing version 1.3.0 to 2.0.0

lib/algorithms/calculateBoxSize.d.ts

@@ -7,4 +7,2 @@ import { ResizeObserverBoxOptions } from '../ResizeObserverBoxOptions';
     contentBoxSize: ResizeObserverSize;
-    scrollBoxSize: ResizeObserverSize;
-    devicePixelBorderBoxSize: ResizeObserverSize;
     contentRect: DOMRectReadOnly;
@@ -11,0 +9,0 @@ }

lib/algorithms/calculateBoxSize.js

@@ -14,4 +14,2 @@ import { ResizeObserverBoxOptions } from '../ResizeObserverBoxOptions';
     contentBoxSize: size(),
-    scrollBoxSize: size(),
-    devicePixelBorderBoxSize: size(),
     contentRect: new DOMRectReadOnly(0, 0, 0, 0)
@@ -28,3 +26,2 @@ });
     const cs = getComputedStyle(target);
-    const dpr = window.devicePixelRatio;
     const svg = isSVG(target) && target.getBBox();
@@ -57,4 +54,2 @@ const removePadding = !IE && cs.boxSizing === 'border-box';
         contentBoxSize: size(contentWidth, contentHeight),
-        scrollBoxSize: size(contentWidth + horizontalPadding, contentHeight + verticalPadding),
-        devicePixelBorderBoxSize: size(borderBoxWidth * dpr, borderBoxHeight * dpr),
         contentRect: new DOMRectReadOnly(paddingLeft, paddingTop, contentWidth, contentHeight)
@@ -66,15 +61,5 @@ });
 const calculateBoxSize = (target, observedBox) => {
-    const boxes = calculateBoxSizes(target);
-    switch (observedBox) {
-        case ResizeObserverBoxOptions.BORDER_BOX:
-            return boxes.borderBoxSize;
-        case ResizeObserverBoxOptions.SCROLL_BOX:
-            return boxes.scrollBoxSize;
-        case ResizeObserverBoxOptions.DEVICE_PIXEL_BORDER_BOX:
-            return boxes.devicePixelBorderBoxSize;
-        case ResizeObserverBoxOptions.CONTENT_BOX:
-        default:
-            return boxes.contentBoxSize;
-    }
+    const { borderBoxSize, contentBoxSize } = calculateBoxSizes(target);
+    return observedBox === ResizeObserverBoxOptions.BORDER_BOX ? borderBoxSize : contentBoxSize;
 };
 export { calculateBoxSize, calculateBoxSizes, cache };

lib/ResizeObservation.js

@@ -13,7 +13,10 @@ import { ResizeObserverBoxOptions } from './ResizeObserverBoxOptions';
     isActive() {
+        const last = this.lastReportedSize;
         const size = calculateBoxSize(this.target, this.observedBox);
-        return this.lastReportedSize.inlineSize !== size.inlineSize
-            || this.lastReportedSize.blockSize !== size.blockSize;
+        if (last.inlineSize !== size.inlineSize || last.blockSize !== size.blockSize) {
+            return true;
+        }
+        return false;
     }
 }
 export { ResizeObservation };

lib/ResizeObserver.js

 import { ResizeObserverController } from './ResizeObserverController';
-import { ResizeObserverBoxOptions } from './ResizeObserverBoxOptions';
 import { POLYFILL_CONSOLE_OUTPUT } from './utils/prettify';
-const DPPB = ResizeObserverBoxOptions.DEVICE_PIXEL_BORDER_BOX;
 class ResizeObserver {
@@ -22,5 +20,2 @@ constructor(callback) {
         }
-        if (options && options.box === DPPB && target.tagName !== 'CANVAS') {
-            throw new Error(`Can only watch ${options.box} on canvas elements.`);
-        }
         ResizeObserverController.observe(this, target, options);
@@ -27,0 +22,0 @@ }

lib/ResizeObserverBoxOptions.d.ts

 declare enum ResizeObserverBoxOptions {
     BORDER_BOX = "border-box",
-    CONTENT_BOX = "content-box",
-    SCROLL_BOX = "scroll-box",
-    DEVICE_PIXEL_BORDER_BOX = "device-pixel-border-box"
+    CONTENT_BOX = "content-box"
 }
 export { ResizeObserverBoxOptions };

lib/ResizeObserverBoxOptions.js

@@ -5,5 +5,3 @@ var ResizeObserverBoxOptions;
     ResizeObserverBoxOptions["CONTENT_BOX"] = "content-box";
-    ResizeObserverBoxOptions["SCROLL_BOX"] = "scroll-box";
-    ResizeObserverBoxOptions["DEVICE_PIXEL_BORDER_BOX"] = "device-pixel-border-box";
 })(ResizeObserverBoxOptions || (ResizeObserverBoxOptions = {}));
 export { ResizeObserverBoxOptions };

lib/ResizeObserverEntry.d.ts

@@ -7,7 +7,5 @@ import { DOMRectReadOnly } from './DOMRectReadOnly';
     borderBoxSize: ResizeObserverSize;
-    contentSize: ResizeObserverSize;
-    scrollSize: ResizeObserverSize;
-    devicePixelBorderBoxSize: ResizeObserverSize;
+    contentBoxSize: ResizeObserverSize;
     constructor(target: Element);
 }
 export { ResizeObserverEntry };

lib/ResizeObserverEntry.js

@@ -8,7 +8,5 @@ import { calculateBoxSizes } from './algorithms/calculateBoxSize';
         this.borderBoxSize = boxes.borderBoxSize;
-        this.contentSize = boxes.contentBoxSize;
-        this.scrollSize = boxes.scrollBoxSize;
-        this.devicePixelBorderBoxSize = boxes.devicePixelBorderBoxSize;
+        this.contentBoxSize = boxes.contentBoxSize;
     }
 }
 export { ResizeObserverEntry };

lib/utils/prettify.js

 const POLYFILL_CONSOLE_OUTPUT = 'function ResizeObserver () { [polyfill code] }';
 const prettifyConsoleOutput = (fn) => {
-    fn.toString = function () {
-        return POLYFILL_CONSOLE_OUTPUT;
-    };
+    Object.defineProperty(fn, 'toString', {
+        value: () => POLYFILL_CONSOLE_OUTPUT
+    });
     return fn;
 };
 export { POLYFILL_CONSOLE_OUTPUT, prettifyConsoleOutput };

lib/utils/scheduler.js

@@ -34,4 +34,4 @@ import { process } from '../ResizeObserverController';
         const resizeObserverCallbacks = [];
-        rafSlot.forEach(callback => frameCallbacks.push(callback));
-        resizeObserverSlot.forEach(callback => resizeObserverCallbacks.push(callback));
+        rafSlot.forEach((callback) => frameCallbacks.push(callback));
+        resizeObserverSlot.forEach((callback) => resizeObserverCallbacks.push(callback));
         rafSlot.clear();
@@ -94,3 +94,3 @@ resizeObserverSlot.clear();
             }
-            events.forEach(name => window.addEventListener(name, this.listener, true));
+            events.forEach((name) => window.addEventListener(name, this.listener, true));
         }
@@ -101,3 +101,3 @@ }
             this.observer && this.observer.disconnect();
-            events.forEach(name => window.removeEventListener(name, this.listener, true));
+            events.forEach((name) => window.removeEventListener(name, this.listener, true));
             this.stopped = true;
@@ -104,0 +104,0 @@ }

package.json

 {
   "name": "@juggle/resize-observer",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "Polyfills the ResizeObserver API and supports box size options from the latest spec",
@@ -11,5 +11,7 @@ "main": "./lib/ResizeObserver.js",
     "build": "rm -rf lib && tsc",
+    "build-docs": "rm -f docs/*.* && parcel build docs/src/index.html --out-dir docs --public-url ./",
     "ci-tests": "npm test -- --ci --runInBand && cat coverage/lcov.info | coveralls",
     "test": "npm run lint && jest --coverage",
     "lint": "eslint '{src,test}/**/*.ts'",
+    "preVersion": "npm run build-docs",
     "prepublishOnly": "npm run build"
@@ -46,3 +48,3 @@ },
   },
-  "homepage": "https://github.com/juggle/resize-observer#readme",
+  "homepage": "https://juggle.studio/resize-observer/",
   "devDependencies": {
@@ -52,2 +54,3 @@ "@types/jest": "^23.3.12",
     "@typescript-eslint/parser": "^1.1.1",
+    "core-js": "^3.1.3",
     "coveralls": "^3.0.2",
@@ -59,2 +62,3 @@ "eslint": "^5.12.1",
     "jsdom": "^13.1.0",
+    "parcel-bundler": "^1.12.3",
     "ts-jest": "^23.10.5",
@@ -61,0 +65,0 @@ "typescript": "^3.2.2"

README.md

@@ -8,7 +8,11 @@ # Resize Observer Polyfill
 
-A minimal library which polyfills the **ResizeObserver** API and is entirely based on the latest [Draft Specification](https://drafts.csswg.org/resize-observer-1/). Essentially, it detects when an element's size changes, allowing you to deal with it!
+A minimal library which polyfills the **ResizeObserver** API and is entirely based on the latest [Draft Specification](https://drafts.csswg.org/resize-observer-1/).
 
-Check out the [Box Demo](https://codesandbox.io/embed/l2vow0z6lq?hidenavigation=1&module=%2Fsrc%2Findex.js&view=preview) and [Animation Demo](https://codesandbox.io/embed/myqzvpmmy9?hidenavigation=1&module=%2Fsrc%2Findex.js&view=preview)
+It immediately detects when an element resizes and provides accurate sizing information back to the handler. Check out the [Example Playground](//juggle.studio/resize-observer) for more information on usage and performance.
 
+> **Warning:**<br/>
+> The latest Resize Observer specification is not yet finalised and is subject to change.
+> Any drastic changes to the specification will bump the major version of this library, as there will likely be breaking changes.
 
+
 ## Installation
@@ -39,8 +43,8 @@ ``` shell
   entries.forEach((entry, index) => {
-    const { width, height } = entry.contentRect;
-    console.log(`Element ${index + 1}:`, `${width}x${height}`);
+    const { inlineSize, blockSize } = entry.contentBoxSize;
+    console.log(`Element ${index + 1}:`, `${inlineSize}x${blockSize}`);
   });
 });
 
-const els = docuent.querySelectorAll('.resizes');
+const els = document.querySelectorAll('.resizes');
 [...els].forEach(el => ro.observe(el)); // Watch multiple!
@@ -51,5 +55,3 @@ ```
 
-The latest standards allow for watching different box sizes. The box size option can be specified when observing an element. Options inlcude `border-box`, `content-box`, `scroll-box`, `device-pixel-border-box`.
-
-`device-pixel-border-box` can only be used on `canvas` elements.
+The latest standards allow for watching different box sizes. The box size option can be specified when observing an element. Options include `border-box` and `content-box` (default).
 ``` js
@@ -66,2 +68,3 @@ import ResizeObserver from '@juggle/resize-observer';
 
+// Watch border-box
 const observerOptions = {
@@ -71,18 +74,37 @@ box: 'border-box'
 
-const els = docuent.querySelectorAll('.resizes');
-[...els].forEach(el => ro.observe(el, observerOptions)); // Watch multiple!
+const els = document.querySelectorAll('.resizes');
+[...els].forEach(el => ro.observe(el, observerOptions));
 ```
 
-> **Warning:** The latest Resize Observer specification is not yet finalised and is subject to change.
-> Any drastic changes to the specification will bump the major version of this library, as there will likely be breaking changes.
+## Using the legacy version (`contentRect`)
 
+Early versions of the API return a `contentRect`. This is still made available for backwards compatibility.
 
+``` js
+import ResizeObserver from '@juggle/resize-observer';
+
+const ro = new ResizeObserver((entries, observer) => {
+  console.log('Elements resized:', entries.length);
+  entries.forEach((entry, index) => {
+    const { width, height } = entry.contentRect;
+    console.log(`Element ${index + 1}:`, `${width}x${height}`);
+  });
+});
+
+const els = document.querySelectorAll('.resizes');
+[...els].forEach(el => ro.observe(el));
+```
+
+> **Warning:**<br/>
+> This is a **deprecated** feature and will possibly be removed in later versions.
+
+
 ## Switching between native and polyfilled versions
 
-You can check to see if the native version is available and switch between this and the polyfill to improve porformance on browsers with native support.
+You can check to see if the native version is available and switch between this and the polyfill to improve performance on browsers with native support.
 
 ``` js
-import ResizeObserverPolyfill from '@juggle/resize-observer';
+import { ResizeObserver as Polyfill } from '@juggle/resize-observer';
 
-const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
+const ResizeObserver = window.ResizeObserver || Polyfill;
 
@@ -95,3 +117,5 @@ // Uses native or polyfill, depending on browser support
 
-> **Warning:** Browsers with native support may be behind on the latest specification.
+> **Warning:**<br/>
+> Browsers with native support may be behind on the latest specification.
+> Use `entry.contentRect` when switching between native and polyfilled versions.
 
@@ -122,3 +146,3 @@
 ## Notification Schedule
-Notifications are scheduled after all other changes have occured and all other animation callbacks have been called. This allows the observer callback to get the most accurate size of an element, as no other changes should occur in the same frame.
+Notifications are scheduled after all other changes have occurred and all other animation callbacks have been called. This allows the observer callback to get the most accurate size of an element, as no other changes should occur in the same frame.
 
@@ -144,3 +168,4 @@ ![resize observer notification schedule](https://user-images.githubusercontent.com/1519516/52825568-20433500-30b5-11e9-9854-4cee13a09a7d.jpg)
 - Locking scroll position to the bottom of elements - useful for chat windows and logs.
-- Canvas rendering (including HDPI).
+- Resizing iframes to match their content.
+- Canvas rendering.
 - Many other things!
@@ -162,3 +187,3 @@
 
-- No support for **IE10** and below. **IE11** is supported.
+- No support for **IE10** and below. **IE11** is supported, when bundled and transpiled into ES5.
 - Dynamic stylesheet changes may not be noticed.*
@@ -186,2 +211,2 @@ - Transitions with initial delays cannot be detected.*
 
-This library is written in TypeScript, however, it's compiled into JavaScript during release. Definition files are included in the package and should be picked up automatically to re-enable support in TypeScript projects.
+This library is written in TypeScript and contains all definition files for support in TypeScript applications.

No alert changes

Improved metrics

Number of lines in readme file

203

increased by14.04%

Worsened metrics

Total package byte prevSize

44141

decreased by-1.33%

Dev dependency count

13

increased by18.18%

Lines of code

603

decreased by-4.29%

No dependency changes