add observers destroy and optimizations

packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts

@@ -10,6 +10,12 @@ import { StyleObject } from 'typings';
 
 export type LifecycleCheckOption = <T>(path: string) => LifecycleOptionInfo<T>;
 
+export type Lifecycle = (
+  updateHints: LifecycleUpdateHints,
+  checkOption: LifecycleCheckOption,
+  force: boolean
+) => Partial<LifecycleAdaptiveUpdateHints> | void;
+
 export interface LifecycleOptionInfo<T> {
   readonly _value: T;
   _changed: boolean;
@@ -37,12 +43,6 @@ export interface LifecycleUpdateHints extends LifecycleAdaptiveUpdateHints {
   _heightIntrinsic: CacheValues<boolean>;
 }
 
-export type Lifecycle = (
-  updateHints: LifecycleUpdateHints,
-  checkOption: LifecycleCheckOption,
-  force: boolean
-) => Partial<LifecycleAdaptiveUpdateHints> | void;
-
 export interface LifecycleHubState {
   _overflowAmount: WH<number>;
 }
@@ -185,11 +185,9 @@ export const createLifecycleHub = (options: OSOptions, structureSetup: Structure
       options.callbacks.onUpdated();
     }
   };
-  const { _sizeObserver, _trinsicObserver, _updateObserverOptions } = lifecycleHubOservers(instance, updateLifecycles);
+  const { _sizeObserver, _trinsicObserver, _updateObserverOptions, _destroy: destroyObservers } = lifecycleHubOservers(instance, updateLifecycles);
 
-  const update = (changedOptions?: Partial<OSOptions> | null, force?: boolean) => {
+  const update = (changedOptions?: Partial<OSOptions> | null, force?: boolean) => updateLifecycles(null, changedOptions, force);
-    updateLifecycles(null, changedOptions, force);
-  };
   const envUpdateListener = update.bind(null, null, true);
   addEnvironmentListener(envUpdateListener);
 
@@ -201,6 +199,7 @@ export const createLifecycleHub = (options: OSOptions, structureSetup: Structure
       _overflowAmount: lifecycleCommunication._viewportOverflowAmount,
     }),
     _destroy() {
+      destroyObservers();
       removeEnvironmentListener(envUpdateListener);
     },
   };

packages/overlayscrollbars/src/lifecycles/lifecycleHubObservers.ts

@@ -1,4 +1,4 @@
-import { CacheValues, diffClass, debounce, isArray, isNumber } from 'support';
+import { CacheValues, diffClass, debounce, isArray, isNumber, each, indexOf, isString, attr, removeAttr } from 'support';
 import { getEnvironment } from 'environment';
 import { createSizeObserver, SizeObserverCallbackParams } from 'observers/sizeObserver';
 import { createTrinsicObserver } from 'observers/trinsicObserver';
@@ -8,7 +8,6 @@ import { LifecycleHub, LifecycleCheckOption, LifecycleUpdateHints } from 'lifecy
 //const hostSelector = `.${classNameHost}`;
 
 // TODO: observer textarea attrs if textarea
-// TODO: tabindex, etc. attributes for viewport
 // TODO: test _ignoreContentChange & _ignoreNestedTargetChange for content dom observer
 // TODO: test _ignoreTargetChange for target dom observer
 
@@ -30,6 +29,7 @@ const ignoreTargetChange = (target: Node, attrName: string, oldValue: string | n
 export const lifecycleHubOservers = (instance: LifecycleHub, updateLifecycles: (updateHints?: Partial<LifecycleUpdateHints> | null) => unknown) => {
   let debounceTimeout: number | false | undefined;
   let debounceMaxDelay: number | false | undefined;
+  let contentMutationObserver: DOMObserver | undefined;
   const { _structureSetup } = instance;
   const { _targetObj, _targetCtx } = _structureSetup;
   const { _host, _viewport, _content } = _targetObj;
@@ -54,6 +54,18 @@ export const lifecycleHubOservers = (instance: LifecycleHub, updateLifecycles: (
     },
   });
 
+  const updateViewportAttrsFromHost = (attributes?: string[]) => {
+    each(attributes || viewportAttrsFromTarget, (attribute) => {
+      if (indexOf(viewportAttrsFromTarget, attribute) > -1) {
+        const hostAttr = attr(_host, attribute);
+        if (isString(hostAttr)) {
+          attr(_viewport, attribute, hostAttr);
+        } else {
+          removeAttr(_viewport, attribute);
+        }
+      }
+    });
+  };
   const onTrinsicChanged = (heightIntrinsic: CacheValues<boolean>) => {
     updateLifecycles({
       _heightIntrinsic: heightIntrinsic,
@@ -73,18 +85,23 @@ export const lifecycleHubOservers = (instance: LifecycleHub, updateLifecycles: (
       _contentMutation: true,
     });
   };
-  const onHostMutation = updateLifecyclesWithDebouncedAdaptiveUpdateHints.bind(0, {
+  const onHostMutation = (targetChangedAttrs: string[], targetStyleChanged: boolean) => {
-    _hostMutation: true,
+    if (targetStyleChanged) {
-  }) as () => any;
+      updateLifecyclesWithDebouncedAdaptiveUpdateHints({
+        _hostMutation: true,
+      });
+    } else {
+      updateViewportAttrsFromHost(targetChangedAttrs);
+    }
+  };
 
   const trinsicObserver = (_content || !_flexboxGlue) && createTrinsicObserver(_host, onTrinsicChanged);
   const sizeObserver = createSizeObserver(_host, onSizeChanged, { _appear: true, _direction: !_nativeScrollbarStyling });
   const hostMutationObserver = createDOMObserver(_host, false, onHostMutation, {
     _styleChangingAttributes: baseStyleChangingAttrs,
-    _attributes: baseStyleChangingAttrs,
+    _attributes: baseStyleChangingAttrs.concat(viewportAttrsFromTarget),
     _ignoreTargetChange: ignoreTargetChange,
   });
-  let contentMutationObserver: DOMObserver | undefined;
 
   const updateOptions = (checkOption: LifecycleCheckOption) => {
     const { _value: elementEvents, _changed: elementEventsChanged } = checkOption<Array<[string, string]> | null>('updating.elementEvents');
@@ -133,9 +150,17 @@ export const lifecycleHubOservers = (instance: LifecycleHub, updateLifecycles: (
     }
   };
 
+  updateViewportAttrsFromHost();
+
   return {
     _trinsicObserver: trinsicObserver,
     _sizeObserver: sizeObserver,
     _updateObserverOptions: updateOptions,
+    _destroy() {
+      contentMutationObserver && contentMutationObserver._destroy();
+      trinsicObserver && trinsicObserver._destroy();
+      sizeObserver._destroy();
+      hostMutationObserver._destroy();
+    },
   };
 };

packages/overlayscrollbars/src/observers/domObserver.ts

@@ -77,7 +77,9 @@ const createEventContentChange = (target: Element, eventContentChange: DOMObserv
   let map: Map<Node, string> | undefined;
   const _destroy = () => {
     if (map) {
-      map.forEach((eventName: string, elm: Node) => off(elm, eventName, callback));
+      map.forEach((eventName: string, elm: Node) => {
+        off(elm, eventName, callback);
+      });
       map.clear();
     }
   };

packages/overlayscrollbars/src/observers/sizeObserver.ts

@@ -146,7 +146,9 @@ export const createSizeObserver = (
   if (ResizeObserverConstructor) {
     const resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallbackProxy);
     resizeObserverInstance.observe(listenerElement);
-    push(offListeners, () => resizeObserverInstance.disconnect());
+    push(offListeners, () => {
+      resizeObserverInstance.disconnect();
+    });
   } else {
     const observerElementChildren = createDOM(
       `<div class="${classNameSizeObserverListenerItem}" dir="ltr"><div class="${classNameSizeObserverListenerItem}"><div class="${classNameSizeObserverListenerItemFinal}"></div></div><div class="${classNameSizeObserverListenerItem}"><div class="${classNameSizeObserverListenerItemFinal}" style="width: 200%; height: 200%"></div></div></div>`

packages/overlayscrollbars/src/observers/trinsicObserver.ts

@@ -64,7 +64,9 @@ export const createTrinsicObserver = (
       { root: target }
     );
     intersectionObserverInstance.observe(trinsicObserver);
-    push(offListeners, () => intersectionObserverInstance.disconnect());
+    push(offListeners, () => {
+      intersectionObserverInstance.disconnect();
+    });
   } else {
     const onSizeChanged = () => {
       const newSize = offsetSize(trinsicObserver);

packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts

@@ -285,8 +285,8 @@ const checkMetrics = async (checkComparison: CheckComparisonObj) => {
 
     await timeout(1);
 
-    // steady pace for ie11 or it will freeze progressively
+    // steady pace for ie11 / edge or it will freeze progressively
-    if (msie11) {
+    if (msie11 || msedge) {
       await timeout(25);
     }
   });

packages/overlayscrollbars/tests/browser/observers/domObserver/index.browser.ts

@@ -632,17 +632,17 @@ const start = async () => {
 
   await addRemoveImgElmsFn();
 
+  targetDomObserver._update();
+  targetDomObserver._destroy();
+  targetDomObserver._destroy();
+  targetDomObserver._update();
+
+  contentDomObserver._update();
+  contentDomObserver._destroy();
+  contentDomObserver._destroy();
+  contentDomObserver._update();
+
   setTestResult(true);
-
-  targetDomObserver._update();
-  targetDomObserver._destroy();
-  targetDomObserver._destroy();
-  targetDomObserver._update();
-
-  contentDomObserver._update();
-  contentDomObserver._destroy();
-  contentDomObserver._destroy();
-  contentDomObserver._update();
 };
 
 startBtn?.addEventListener('click', start);

yarn.lock

@@ -6702,9 +6702,9 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
     find-up "^4.0.0"
 
 playwright-chromium@^1.10.0:
-  version "1.10.0"
+  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/playwright-chromium/-/playwright-chromium-1.10.0.tgz#df0e65e42cdda66b599df38d062d9cd8c2dea09c"
+  resolved "https://registry.yarnpkg.com/playwright-chromium/-/playwright-chromium-1.11.0.tgz#fcd2a86baca011c758288f246a84304453c4ab42"
-  integrity sha512-ry/60/YKGJfrnaS7j5C3+xmA2DAMv6pBE351FoTHe4Llq0WU92IL0rBYK3TkK3PzSHYtp1KdCRsRjDnJhImA3g==
+  integrity sha512-CNV58vXoyItAXOuK9rgyESBmnwVMnQg12TBJEDq1IksJo9m2Gi1maReiMOOJAFduMhicvLGgRsQfdzm44KCcxA==
   dependencies:
     commander "^6.1.0"
     debug "^4.1.1"
@@ -6719,6 +6719,7 @@ playwright-chromium@^1.10.0:
     rimraf "^3.0.2"
     stack-utils "^2.0.3"
     ws "^7.3.1"
+    yazl "^2.5.1"
 
 playwright-core@>=1.2.0:
   version "1.8.0"
@@ -6739,9 +6740,9 @@ playwright-core@>=1.2.0:
     ws "^7.3.1"
 
 playwright-core@^1.10.0:
-  version "1.10.0"
+  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.10.0.tgz#0ed3590ddf97ec4a5fd4baef40346e2d8e2f19ba"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.11.0.tgz#992c24303ff84cc66022a3327c24026fc433a66a"
-  integrity sha512-SDA5KPwnJJSfnNX/b7h8y0ChwBmcbbcCofYXkZGMVuzXZsmHPGLOBRhgkwN2nzJ10Ezf4cd1OcVOeOLKPxjeRg==
+  integrity sha512-P5+FzindrR0wI48WVRBiJ59D1wgladPA7KzODAC+EZkwlrCQ6Pj2L0JkrKMCst/3g/x/nSLYcM+QXk2O3HJ/VQ==
   dependencies:
     commander "^6.1.0"
     debug "^4.1.1"
@@ -6756,11 +6757,12 @@ playwright-core@^1.10.0:
     rimraf "^3.0.2"
     stack-utils "^2.0.3"
     ws "^7.3.1"
+    yazl "^2.5.1"
 
 playwright-firefox@^1.10.0:
-  version "1.10.0"
+  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/playwright-firefox/-/playwright-firefox-1.10.0.tgz#842f6f93ebdced83eecbd23d6820cad930686728"
+  resolved "https://registry.yarnpkg.com/playwright-firefox/-/playwright-firefox-1.11.0.tgz#f73fd2dbca5178d148ef389241ca1ab0e5354787"
-  integrity sha512-TR7Vyw9PgS4KtbSOIUGqNa20gJxjpRHK6IQv4oDhgehpW/YnCjqxe5ylI9eLrzzYPUPsoyD7bZRxSZDtrcCTLA==
+  integrity sha512-mKmTFXRgr91pmXC8FHHdNlLzoBVcdTAcjYxzNGPzc97AcjLDYczwQkxw5i60k+4UuooayX9dHLq45oI/4j9+Pg==
   dependencies:
     commander "^6.1.0"
     debug "^4.1.1"
@@ -6775,11 +6777,12 @@ playwright-firefox@^1.10.0:
     rimraf "^3.0.2"
     stack-utils "^2.0.3"
     ws "^7.3.1"
+    yazl "^2.5.1"
 
 playwright-webkit@^1.10.0:
-  version "1.10.0"
+  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/playwright-webkit/-/playwright-webkit-1.10.0.tgz#0d32f73c5ab3296fb9114b053b0cd1d35597b2c4"
+  resolved "https://registry.yarnpkg.com/playwright-webkit/-/playwright-webkit-1.11.0.tgz#6fab9ffc5b030cc4370bd1ae55d5e96f2cfd7fa1"
-  integrity sha512-Dql/wJQ+aFgL3/HHMv9UfVAd3+pzQluLdDHnG7eX8PWLK80ly4idyQO0HYRjwwvoZuyx1G1rA+kuh7jtn7OfHg==
+  integrity sha512-/LiyWkuMNPvRpdXQ6h69WTqiYzVwAriEEZMROjOJWAYVfuRHmyUtp5vs8utbDiJBBgYOAta0+jCr1feoTMmi5g==
   dependencies:
     commander "^6.1.0"
     debug "^4.1.1"
@@ -6794,11 +6797,12 @@ playwright-webkit@^1.10.0:
     rimraf "^3.0.2"
     stack-utils "^2.0.3"
     ws "^7.3.1"
+    yazl "^2.5.1"
 
 playwright@^1.10.0:
-  version "1.10.0"
+  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.10.0.tgz#a14d295f1ad886caf4cc5e674afe03ac832066bc"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.11.0.tgz#0796cf08f4756e8187e01c705315d8e1fb48e25f"
-  integrity sha512-b7SGBcCPq4W3pb4ImEDmNXtO0ZkJbZMuWiShsaNJd+rGfY/6fqwgllsAojmxGSgFmijYw7WxCoPiAIEDIH16Kw==
+  integrity sha512-s3FQBRpu/pW/vZ/lFYhG/Q3WBUbT2rvMgrgy1PHDA7QtPN910C2rj9Ovd6A/m8yxuLnltd/OKqvlAGevWISHKw==
   dependencies:
     commander "^6.1.0"
     debug "^4.1.1"
@@ -6813,6 +6817,7 @@ playwright@^1.10.0:
     rimraf "^3.0.2"
     stack-utils "^2.0.3"
     ws "^7.3.1"
+    yazl "^2.5.1"
 
 pngjs@^5.0.0:
   version "5.0.0"
@@ -9261,3 +9266,10 @@ yauzl@^2.10.0:
   dependencies:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
+
+yazl@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/yazl/-/yazl-2.5.1.tgz#a3d65d3dd659a5b0937850e8609f22fffa2b5c35"
+  integrity sha512-phENi2PLiHnHb6QBVot+dJnaAZ0xosj7p3fWl+znIjBDlnMI2PsZCJZ306BPTFOaHf5qdDEI8x5qFrSOBN5vrw==
+  dependencies:
+    buffer-crc32 "~0.2.3"