angular 8 update

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ex-helpers/element",
-  "version": "0.1.18",
+  "version": "8.1.1",
   "description": "Several element wrapper helpers",
   "scripts": {
     "build": "exb",
@@ -18,7 +18,7 @@
     "@types/lodash-es": "^4.17.1",
     "rimraf": "^2.6.2",
     "rxjs": "^6.0.0",
-    "typescript": "^2",
+    "typescript": "3.2",
     "zone.js": "~0.8.26"
   }
 }

src/watch.ts

@@ -3,25 +3,6 @@ import extend from 'lodash-es/extend';
 import {IncrementalStackManager} from '@ex-helpers/stack';
 import {bounds} from './bounds';
 
-declare module '@angular/core' {
-
-    class ElementRef<T = any> {
-        private _watchSizeCollection?: any;
-
-        nativeElement: T;
-
-        constructor(nativeElement: T);
-
-        watchSize?: (callback: (height: number, width: number) => void,
-                     options?: { attributes: boolean, childList: boolean, characterData: boolean },
-                     params?: { legacy: boolean, timeout?: number }) => () => void;
-
-        watchChanges?: (callback: MutationCallback, options: MutationObserverInit) => () => void;
-
-        triggerSizeCheck?: () => void;
-    }
-}
-
 interface SizeCollectionItem {
     triggerCheck: () => void;
     startCountdown: () => void;
@@ -37,73 +18,85 @@ const DEFAULT_OPTIONS = {
     characterData: true
 };
 
-ElementRef.prototype.watchSize = function
-(callback: (height: number, width: number) => void,
- options?: { attributes?: boolean, childList?: boolean, characterData?: boolean },
- params: { timeout?: number, legacy: boolean } = {legacy: false}) {
-    if (!this._watchSizeCollection) {
-        Object.defineProperty(this, '_watchSizeCollection', {
-            enumerable: false,
-            configurable: true,
-            writable: false,
-            value: new IncrementalStackManager<SizeCollectionItem>('id')
-        });
+export class ElementWatcher {
+    private _watchSizeCollection: any;
+    public nativeElement: HTMLElement;
+
+    constructor(ref: HTMLElement | ElementRef) {
+        this.nativeElement = ref instanceof ElementRef ? ref.nativeElement : ref;
     }
-    options = extend(DEFAULT_OPTIONS, options);
-    let timeout: any;
-    let lastHeight: number;
-    let lastWidth: number;
-    const triggerCheck = () => {
-        const sizes = bounds(this.nativeElement).size;
-        if (lastWidth === sizes.width && lastHeight === sizes.height) {
-            return;
+
+    watchSize(callback: (height: number, width: number) => void,
+              options?: { attributes?: boolean, childList?: boolean, characterData?: boolean },
+              params: { timeout?: number, legacy: boolean } = {legacy: false}) {
+        if (!this._watchSizeCollection) {
+            Object.defineProperty(this, '_watchSizeCollection', {
+                enumerable: false,
+                configurable: true,
+                writable: false,
+                value: new IncrementalStackManager<SizeCollectionItem>('id')
+            });
         }
-        lastHeight = sizes.height;
-        lastWidth = sizes.width;
-        callback(sizes.height, sizes.width);
-    };
-    const startCountdown = () => {
-        clearTimeout(timeout);
-        timeout = setTimeout(() => {
-            triggerCheck();
-        }, params.timeout || 100);
-    };
-    const item = this._watchSizeCollection.add({
-        callback,
-        startCountdown,
-        triggerCheck
-    });
-    if (MutationObserver && params.legacy === false) {
-        const observer = new MutationObserver(mutations => {
-            startCountdown();
+        options = extend(DEFAULT_OPTIONS, options);
+        let timeout: any;
+        let lastHeight: number;
+        let lastWidth: number;
+        const triggerCheck = () => {
+            const sizes = bounds(this.nativeElement).size;
+            if (lastWidth === sizes.width && lastHeight === sizes.height) {
+                return;
+            }
+            lastHeight = sizes.height;
+            lastWidth = sizes.width;
+            callback(sizes.height, sizes.width);
+        };
+        const startCountdown = () => {
+            clearTimeout(timeout);
+            timeout = setTimeout(() => {
+                triggerCheck();
+            }, params.timeout || 100);
+        };
+        const item = this._watchSizeCollection.add({
+            callback,
+            startCountdown,
+            triggerCheck
         });
-        item.observer = observer;
-        item.legacy = false;
-        startCountdown();
-        observer.observe(this.nativeElement, options);
-        return () => observer.disconnect();
-    } else {
-        item.legacy = true;
-        const checkInterval = setInterval(() => {
-            triggerCheck();
-        }, 200);
-        startCountdown();
-        return () => clearInterval(checkInterval);
+        if (MutationObserver && params.legacy === false) {
+            const observer = new MutationObserver(mutations => {
+                startCountdown();
+            });
+            item.observer = observer;
+            item.legacy = false;
+            startCountdown();
+            observer.observe(this.nativeElement, options);
+            return () => observer.disconnect();
+        } else {
+            item.legacy = true;
+            const checkInterval = setInterval(() => {
+                triggerCheck();
+            }, 200);
+            startCountdown();
+            return () => clearInterval(checkInterval);
+        }
     }
-};
 
-ElementRef.prototype.triggerSizeCheck = function () {
-    if (this._watchSizeCollection) {
-        this._watchSizeCollection.execute('triggerCheck');
+    triggerSizeCheck() {
+        if (this._watchSizeCollection) {
+            this._watchSizeCollection.execute('triggerCheck');
+        }
     }
-};
 
-ElementRef.prototype.watchChanges = function (callback: MutationCallback, options: MutationObserverInit) {
-    if (MutationObserver) {
-        const observer = new MutationObserver(callback);
-        observer.observe(this.nativeElement, options);
-        return () => observer.disconnect();
+    watchChanges(callback: MutationCallback, options: MutationObserverInit) {
+        if (MutationObserver) {
+            const observer = new MutationObserver(callback);
+            observer.observe(this.nativeElement, options);
+            return () => observer.disconnect();
+        }
+        return () => {
+        };
     }
-    return () => {
-    };
-};
+}
+
+export function watchElement(ref: HTMLElement | ElementRef) {
+    return new ElementWatcher(ref);
+}

yarn.lock

@@ -432,9 +432,10 @@ tslib@^1.9.0:
   version "1.9.3"
   resolved "https://registry.desudesu.ru/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
 
-typescript@^2:
-  version "2.9.2"
-  resolved "https://registry.desudesu.ru/typescript/-/typescript-2.9.2.tgz#1cbf61d05d6b96269244eb6a3bce4bd914e0f00c"
+typescript@3.2:
+  version "3.2.4"
+  resolved "https://registry.fv.ee/typescript/-/typescript-3.2.4.tgz#c585cb952912263d915b462726ce244ba510ef3d"
+  integrity sha512-0RNDbSdEokBeEAkgNbxJ+BLwSManFy9TeXz8uW+48j/xhEXv1ePME60olyzw2XzUqUBNAYFeJadIqAgNqIACwg==
 
 which-module@^2.0.0:
   version "2.0.0"