@juggle/resize-observer - npm Package Compare versions

Comparing version 0.7.3 to 0.8.0

lib/algorithms/calculateBoxSize.d.ts

 import { ResizeObserverBoxOptions } from '../ResizeObserverBoxOptions';
 import { ResizeObserverSize } from '../ResizeObserverSize';
+import { DOMRectReadOnly } from '../DOMRectReadOnly';
+interface ResizeObserverSizeCollection {
+    borderBoxSize: ResizeObserverSize;
+    contentBoxSize: ResizeObserverSize;
+    scrollBoxSize: ResizeObserverSize;
+    devicePixelBorderBoxSize: ResizeObserverSize;
+    contentRect: DOMRectReadOnly;
+}
 declare const cache: Map<any, any>;
-declare const calculateBoxSizes: (target: Element) => any;
+declare const calculateBoxSizes: (target: Element) => ResizeObserverSizeCollection;
 declare const calculateBoxSize: (target: Element, observedBox: ResizeObserverBoxOptions) => ResizeObserverSize;
 export { calculateBoxSize, calculateBoxSizes, cache };

lib/algorithms/calculateBoxSize.js

@@ -54,4 +54,3 @@ import { ResizeObserverBoxOptions } from '../ResizeObserverBoxOptions';
         devicePixelBorderBoxSize,
-        contentRect,
-        hidden
+        contentRect
     };
@@ -58,0 +57,0 @@ cache.set(target, boxes);

lib/DOMInteractions.d.ts

@@ -1,2 +0,2 @@
-declare type StandardCallback = () => any;
+declare type StandardCallback = () => void;
 declare class DOMInteractions {
@@ -3,0 +3,0 @@ static watch(callback: StandardCallback): void;

lib/ResizeObserverCallback.d.ts

 import { ResizeObserver } from './ResizeObserver';
 import { ResizeObserverEntry } from './ResizeObserverEntry';
-declare type ResizeObserverCallback = (entries: ResizeObserverEntry[], observer: ResizeObserver) => any;
+declare type ResizeObserverCallback = (entries: ResizeObserverEntry[], observer: ResizeObserver) => void;
 export { ResizeObserverCallback };

lib/ResizeObserverController.d.ts

@@ -5,5 +5,2 @@ import { ResizeObserver } from './ResizeObserver';
 import { ResizeObserverOptions } from './ResizeObserverOptions';
-declare const ObservationLoop: {
-    loop: number;
-};
 declare const resizeObservers: ResizeObserverDetail[];
@@ -16,2 +13,2 @@ export default class ResizeObserverController {
 }
-export { ResizeObserverController, ObservationLoop, resizeObservers };
+export { ResizeObserverController, resizeObservers };

lib/ResizeObserverController.js

@@ -9,8 +9,14 @@ import { ResizeObservation } from './ResizeObservation';
 import { gatherActiveObservationsAtDepth } from './algorithms/gatherActiveObservationsAtDepth';
-import { find, findIndex } from './utils/array';
-const ObservationLoop = { loop: 0 };
 const resizeObservers = [];
+const observerMap = new Map();
+const getObservationIndex = (observationTargets, target) => {
+    for (let i = 0; i < observationTargets.length; i += 1) {
+        if (observationTargets[i].target === target) {
+            return i;
+        }
+    }
+    return -1;
+};
 const process = () => {
     let depth = 0;
-    ObservationLoop.loop += 1;
     gatherActiveObservationsAtDepth(depth);
@@ -45,9 +51,8 @@ while (hasActiveObservations()) {
         resizeObservers.push(detail);
+        observerMap.set(resizeObserver, detail);
     }
     static observe(resizeObserver, target, options) {
-        const detail = find.call(resizeObservers, (detail) => detail.observer === resizeObserver);
-        if (detail) {
-            const index = findIndex
-                .call(detail.observationTargets, (item) => item.target === target);
-            if (index === -1) {
+        if (observerMap.has(resizeObserver)) {
+            const detail = observerMap.get(resizeObserver);
+            if (getObservationIndex(detail.observationTargets, target) < 0) {
                 detail.observationTargets.push(new ResizeObservation(target, options && options.box));
@@ -59,7 +64,6 @@ notify();
     static unobserve(resizeObserver, target) {
-        const detail = find.call(resizeObservers, (detail) => detail.observer === resizeObserver);
-        if (detail) {
-            const index = findIndex
-                .call(detail.observationTargets, (item) => item.target === target);
-            if (index > -1) {
+        if (observerMap.has(resizeObserver)) {
+            const detail = observerMap.get(resizeObserver);
+            const index = getObservationIndex(detail.observationTargets, target);
+            if (index >= 0) {
                 detail.observationTargets.splice(index, 1);
@@ -70,6 +74,6 @@ }
     static disconnect(resizeObserver) {
-        const index = findIndex
-            .call(resizeObservers, (detail) => detail.observer === resizeObserver);
-        if (index > -1) {
-            resizeObservers.splice(index, 1);
+        if (observerMap.has(resizeObserver)) {
+            const detail = observerMap.get(resizeObserver);
+            resizeObservers.splice(resizeObservers.indexOf(detail), 1);
+            observerMap.delete(resizeObserver);
         }
@@ -79,2 +83,2 @@ }
 DOMInteractions.watch(notify);
-export { ResizeObserverController, ObservationLoop, resizeObservers };
+export { ResizeObserverController, resizeObservers };

package.json

 {
   "name": "@juggle/resize-observer",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "description": "ResizeObserver - Based on the official draft specification",
@@ -13,3 +13,4 @@ "main": "./lib/ResizeObserver.js",
     "ci-tests": "npm test -- --ci --runInBand && cat coverage/lcov.info | coveralls",
-    "test": "jest --coverage",
+    "test": "npm run lint && jest --coverage",
+    "lint": "eslint '{src,test}/**/*.ts'",
     "prepublishOnly": "npm run build"
@@ -48,3 +49,6 @@ },
     "@types/jest": "^23.3.12",
+    "@typescript-eslint/eslint-plugin": "^1.1.1",
+    "@typescript-eslint/parser": "^1.1.1",
     "coveralls": "^3.0.2",
+    "eslint": "^5.12.1",
     "jest": "^23.6.0",
@@ -51,0 +55,0 @@ "jest-cli": "^23.6.0",

src/algorithms/broadcastActiveObservations.ts

@@ -9,3 +9,3 @@ import { resizeObservers } from '../ResizeObserverController';
 const broadcastActiveObservations = (): number => {
-  let shallowestDepth: number = Infinity;
+  let shallowestDepth = Infinity;
   const callbacks: (() => void)[] = [];
@@ -12,0 +12,0 @@ resizeObservers.forEach((ro: ResizeObserverDetail) => {

src/algorithms/calculateBoxSize.ts

@@ -5,4 +5,12 @@ import { ResizeObserverBoxOptions } from '../ResizeObserverBoxOptions';
 
+interface ResizeObserverSizeCollection {
+  borderBoxSize: ResizeObserverSize;
+  contentBoxSize: ResizeObserverSize;
+  scrollBoxSize: ResizeObserverSize;
+  devicePixelBorderBoxSize: ResizeObserverSize;
+  contentRect: DOMRectReadOnly;
+}
+
 const IE = (/msie|trident/i).test(navigator.userAgent);
-const parseDimension = (pixel: string | null) => parseFloat(pixel || '0');
+const parseDimension = (pixel: string | null): number => parseFloat(pixel || '0');
 
@@ -14,3 +22,3 @@ const isSVG = (target: Element): boolean => 'SVGGraphicsElement' in window
 
-const calculateBoxSizes = (target: Element) => {
+const calculateBoxSizes = (target: Element): ResizeObserverSizeCollection => {
 
@@ -70,4 +78,3 @@ if (cache.has(target)) {
     devicePixelBorderBoxSize,
-    contentRect,
-    hidden
+    contentRect
   };
@@ -91,3 +98,3 @@
     default:
-     return boxes.contentBoxSize;
+      return boxes.contentBoxSize;
   }
@@ -94,0 +101,0 @@ };

src/algorithms/deliverResizeLoopError.ts

 const msg = 'ResizeObserver loop completed with undelivered notifications.';
 
+interface LegacyEvent extends Event {
+  message: string;
+}
+
 const deliverResizeLoopError = (): void => {
@@ -12,3 +16,3 @@ let event;
   else { // Fallback to old style of event creation
-    event = document.createEvent('Event') as any;
+    event = document.createEvent('Event') as LegacyEvent;
     event.initEvent('error', false, false);
@@ -15,0 +19,0 @@ event.message = msg;

src/DOMInteractions.ts

@@ -1,2 +0,2 @@
-type StandardCallback = () => any;
+type StandardCallback = () => void;
 const watchers: StandardCallback[] = [];
@@ -23,3 +23,3 @@
 // Dispatcher for interactions
-const dispatch: StandardCallback = () => {
+const dispatch: StandardCallback = (): void => {
   watchers.forEach((watcher: StandardCallback) => watcher());
@@ -33,3 +33,3 @@ }
 // Listen for any other DOM changes which could affect sizes
-const createObserver = () => {
+const createObserver = (): void => {
   if ('MutationObserver' in window) {
@@ -43,3 +43,3 @@ const observerConfig = { attributes: true, characterData: true, childList: true, subtree: true };
 class DOMInteractions {
-  public static watch (callback: StandardCallback) {
+  public static watch (callback: StandardCallback): void {
     watchers.push(callback);
@@ -46,0 +46,0 @@ }

src/DOMRectReadOnly.ts

@@ -9,11 +9,11 @@ interface Rectangle {
 class DOMRectReadOnly {
-  readonly x: number;
-  readonly y: number;
-  readonly width: number;
-  readonly height: number;
-  readonly top: number;
-  readonly left: number;
-  readonly bottom: number;
-  readonly right: number;
-  constructor (x: number, y: number, width: number, height: number) {
+  public readonly x: number;
+  public readonly y: number;
+  public readonly width: number;
+  public readonly height: number;
+  public readonly top: number;
+  public readonly left: number;
+  public readonly bottom: number;
+  public readonly right: number;
+  public constructor (x: number, y: number, width: number, height: number) {
     this.x = x;
@@ -29,3 +29,3 @@ this.y = y;
   }
-  static fromRect (rectangle: Rectangle): Readonly<DOMRectReadOnly> {
+  public static fromRect (rectangle: Rectangle): Readonly<DOMRectReadOnly> {
     return new DOMRectReadOnly(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
@@ -32,0 +32,0 @@ }

src/ResizeObservation.ts

@@ -11,3 +11,3 @@ import { ResizeObserverSize } from './ResizeObserverSize';
 
-  constructor (target: Element, observedBox?: ResizeObserverBoxOptions) {
+  public constructor (target: Element, observedBox?: ResizeObserverBoxOptions) {
     this.target = target;
@@ -21,3 +21,3 @@ this.observedBox = observedBox || ResizeObserverBoxOptions.CONTENT_BOX;
 
-  isActive() {
+  public isActive (): boolean {
     const size = calculateBoxSize(this.target, this.observedBox);
@@ -24,0 +24,0 @@ return this.lastReportedSize.inlineSize !== size.inlineSize

src/ResizeObserver.ts

@@ -14,3 +14,3 @@ import { ResizeObserverController } from './ResizeObserverController';
 
-  public observe (target: Element, options?: ResizeObserverOptions) {
+  public observe (target: Element, options?: ResizeObserverOptions): void {
     if (options && options.box === DPPB && target.tagName !== 'CANVAS') {
@@ -22,7 +22,7 @@ throw new Error(`Can only watch ${options.box} on canvas elements.`);
 
-  public unobserve (target: Element) {
+  public unobserve (target: Element): void {
     ResizeObserverController.unobserve(this, target);
   }
 
-  public disconnect () {
+  public disconnect (): void {
     ResizeObserverController.disconnect(this);
@@ -29,0 +29,0 @@ }

src/ResizeObserverCallback.ts

 import { ResizeObserver } from './ResizeObserver';
 import { ResizeObserverEntry } from './ResizeObserverEntry';
 
-type ResizeObserverCallback = (entries: ResizeObserverEntry[], observer: ResizeObserver) => any;
+type ResizeObserverCallback = (entries: ResizeObserverEntry[], observer: ResizeObserver) => void;
 
 export { ResizeObserverCallback };

src/ResizeObserverController.ts

@@ -14,10 +14,16 @@ import { ResizeObserver } from './ResizeObserver';
 
-import { find, findIndex } from './utils/array';
-
-const ObservationLoop: { loop: number } = { loop: 0 };
 const resizeObservers: ResizeObserverDetail[] = [];
+const observerMap = new Map();
 
+const getObservationIndex = (observationTargets: ResizeObservation[], target: Element): number => {
+  for (let i = 0; i < observationTargets.length; i+= 1) {
+    if (observationTargets[i].target === target) {
+      return i;
+    }
+  }
+  return -1;
+}
+
 const process = (): boolean => {
   let depth = 0;
-  ObservationLoop.loop += 1;
   gatherActiveObservationsAtDepth(depth);
@@ -35,4 +41,4 @@ while (hasActiveObservations()) {
 let frameId: number;
-let extraFrames: number = 0;
-const notify = () => {
+let extraFrames = 0;
+const notify = (): void => {
   cancelAnimationFrame(frameId);
@@ -52,12 +58,11 @@ frameId = requestAnimationFrame(() => {
 export default class ResizeObserverController {
-  static connect (resizeObserver: ResizeObserver, callback: ResizeObserverCallback) {
+  public static connect (resizeObserver: ResizeObserver, callback: ResizeObserverCallback): void {
     const detail = new ResizeObserverDetail(resizeObserver, callback);
     resizeObservers.push(detail);
+    observerMap.set(resizeObserver, detail);
   }
-  static observe (resizeObserver: ResizeObserver, target: Element, options?: ResizeObserverOptions) {
-    const detail = find.call(resizeObservers, (detail: ResizeObserverDetail) => detail.observer === resizeObserver);
-    if (detail) {
-      const index = findIndex
-      .call(detail.observationTargets, (item: ResizeObservation) => item.target === target);
-      if (index === -1) {
+  public static observe (resizeObserver: ResizeObserver, target: Element, options?: ResizeObserverOptions): void {
+    if (observerMap.has(resizeObserver)) {
+      const detail = observerMap.get(resizeObserver) as ResizeObserverDetail;
+      if (getObservationIndex(detail.observationTargets, target) < 0) {
         detail.observationTargets.push(new ResizeObservation(target, options && options.box));
@@ -68,8 +73,7 @@ notify(); // Notify new observation
   }
-  static unobserve (resizeObserver: ResizeObserver, target: Element) {
-    const detail = find.call(resizeObservers, (detail: ResizeObserverDetail) => detail.observer === resizeObserver);
-    if (detail) {
-      const index = findIndex
-      .call(detail.observationTargets, (item: ResizeObservation) => item.target === target);
-      if (index > -1) {
+  public static unobserve (resizeObserver: ResizeObserver, target: Element): void {
+    if (observerMap.has(resizeObserver)) {
+      const detail = observerMap.get(resizeObserver) as ResizeObserverDetail;
+      const index = getObservationIndex(detail.observationTargets, target);
+      if (index >= 0) {
         detail.observationTargets.splice(index, 1);
@@ -79,7 +83,7 @@ }
   }
-  static disconnect (resizeObserver: ResizeObserver) {
-    const index = findIndex
-    .call(resizeObservers, (detail: ResizeObserverDetail) => detail.observer === resizeObserver);
-    if (index > -1) {
-      resizeObservers.splice(index, 1);
+  public static disconnect (resizeObserver: ResizeObserver): void {
+    if (observerMap.has(resizeObserver)) {
+      const detail = observerMap.get(resizeObserver) as ResizeObserverDetail;
+      resizeObservers.splice(resizeObservers.indexOf(detail), 1);
+      observerMap.delete(resizeObserver);
     }
@@ -91,2 +95,2 @@ }
 
-export { ResizeObserverController, ObservationLoop, resizeObservers };
+export { ResizeObserverController, resizeObservers };

src/ResizeObserverDetail.ts

@@ -12,3 +12,3 @@ import { ResizeObserver } from './ResizeObserver';
 
-  constructor (resizeObserver: ResizeObserver, callback: ResizeObserverCallback) {
+  public constructor (resizeObserver: ResizeObserver, callback: ResizeObserverCallback) {
     this.observer = resizeObserver;
@@ -15,0 +15,0 @@ this.callback = callback;

src/ResizeObserverEntry.ts

@@ -12,3 +12,3 @@ import { DOMRectReadOnly } from './DOMRectReadOnly';
   public devicePixelBorderBoxSize: ResizeObserverSize;
-  constructor (target: Element) {
+  public constructor (target: Element) {
     const boxes = calculateBoxSizes(target);
@@ -15,0 +15,0 @@ this.target = target;

No alert changes

Improved metrics

Total package byte prevSize

53860

increased by27.01%

Worsened metrics

Dev dependency count

11

increased by37.5%

Number of package files

57

decreased by-3.39%

Lines of code

913

decreased by-1.72%

No dependency changes