improve code and eslint

package.json

@@ -33,6 +33,7 @@
     "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-json": "^2.1.2",
     "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.8",
     "glob": "^7.1.6",

packages/overlayscrollbars/dist/overlayscrollbars.esm.js

@@ -2164,19 +2164,14 @@ const createOverflowLifecycle = lifecycleHub => {
       const prevStyle = style(_viewport, keys(finalPaddingStyle));
       removeClass(_viewport, classNameViewportArrange);
       style(_viewport, finalPaddingStyle);
-      return {
+      return [() => {
-        _redoViewportArrange: () => {
+        hideNativeScrollbars(finalViewportOverflowState, directionIsRTL, _doViewportArrange, prevStyle);
-          hideNativeScrollbars(finalViewportOverflowState, directionIsRTL, _doViewportArrange, prevStyle);
+        style(_viewport, prevStyle);
-          style(_viewport, prevStyle);
+        addClass(_viewport, classNameViewportArrange);
-          addClass(_viewport, classNameViewportArrange);
+      }, finalViewportOverflowState];
-        },
-        _viewportOverflowState: finalViewportOverflowState
-      };
     }
 
-    return {
+    return [noop];
-      _redoViewportArrange: noop
-    };
   };
 
   return (updateHints, checkOption, force) => {
@@ -2217,17 +2212,13 @@ const createOverflowLifecycle = lifecycleHub => {
     }
 
     if (_sizeChanged || _paddingStyleChanged || _contentMutation || showNativeOverlaidScrollbarsChanged || directionChanged) {
-      const {
+      const [redoViewportArrange, undoViewportArrangeOverflowState] = undoViewportArrange(showNativeOverlaidScrollbars, directionIsRTL, preMeasureViewportOverflowState);
-        _redoViewportArrange,
-        _viewportOverflowState: undoViewportArrangeOverflowState
-      } = undoViewportArrange(showNativeOverlaidScrollbars, directionIsRTL, preMeasureViewportOverflowState);
       const [_viewportSizeFraction, viewportSizeFractionCahnged] = viewportSizeFractionCache = updateViewportSizeFraction(force);
       const [_viewportScrollSize, _viewportScrollSizeChanged] = viewportScrollSizeCache = updateViewportScrollSizeCache(force);
       const viewportContentSize = clientSize(_viewport);
       let arrangedViewportScrollSize = _viewportScrollSize;
       let arrangedViewportClientSize = viewportContentSize;
-
+      redoViewportArrange();
-      _redoViewportArrange();
 
       if ((_viewportScrollSizeChanged || viewportSizeFractionCahnged || showNativeOverlaidScrollbarsChanged) && undoViewportArrangeOverflowState && !showNativeOverlaidScrollbars && arrangeViewport(undoViewportArrangeOverflowState, _viewportScrollSize, _viewportSizeFraction, directionIsRTL)) {
         arrangedViewportClientSize = clientSize(_viewport);

packages/overlayscrollbars/dist/overlayscrollbars.js

@@ -2233,19 +2233,14 @@
         var prevStyle = style(_viewport, keys(finalPaddingStyle));
         removeClass(_viewport, classNameViewportArrange);
         style(_viewport, finalPaddingStyle);
-        return {
+        return [function () {
-          _redoViewportArrange: function _redoViewportArrange() {
+          hideNativeScrollbars(finalViewportOverflowState, directionIsRTL, _doViewportArrange, prevStyle);
-            hideNativeScrollbars(finalViewportOverflowState, directionIsRTL, _doViewportArrange, prevStyle);
+          style(_viewport, prevStyle);
-            style(_viewport, prevStyle);
+          addClass(_viewport, classNameViewportArrange);
-            addClass(_viewport, classNameViewportArrange);
+        }, finalViewportOverflowState];
-          },
-          _viewportOverflowState: finalViewportOverflowState
-        };
       }
 
-      return {
+      return [noop];
-        _redoViewportArrange: noop
-      };
     };
 
     return function (updateHints, checkOption, force) {
@@ -2292,8 +2287,8 @@
 
       if (_sizeChanged || _paddingStyleChanged || _contentMutation || showNativeOverlaidScrollbarsChanged || directionChanged) {
         var _undoViewportArrange = undoViewportArrange(showNativeOverlaidScrollbars, directionIsRTL, preMeasureViewportOverflowState),
-            _redoViewportArrange = _undoViewportArrange._redoViewportArrange,
+            redoViewportArrange = _undoViewportArrange[0],
-            undoViewportArrangeOverflowState = _undoViewportArrange._viewportOverflowState;
+            undoViewportArrangeOverflowState = _undoViewportArrange[1];
 
         var _viewportSizeFraction2 = viewportSizeFractionCache = updateViewportSizeFraction(force),
             _viewportSizeFraction = _viewportSizeFraction2[0],
@@ -2306,8 +2301,7 @@
         var viewportContentSize = clientSize(_viewport);
         var arrangedViewportScrollSize = _viewportScrollSize;
         var arrangedViewportClientSize = viewportContentSize;
-
+        redoViewportArrange();
-        _redoViewportArrange();
 
         if ((_viewportScrollSizeChanged || viewportSizeFractionCahnged || showNativeOverlaidScrollbarsChanged) && undoViewportArrangeOverflowState && !showNativeOverlaidScrollbars && arrangeViewport(undoViewportArrangeOverflowState, _viewportScrollSize, _viewportSizeFraction, directionIsRTL)) {
           arrangedViewportClientSize = clientSize(_viewport);

packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts

@@ -183,19 +183,18 @@ export const createLifecycleHub = (
         _hostMutation: adaptiveHostMutation,
         _contentMutation: adaptiveContentMutation,
         _paddingStyleChanged: adaptivePaddingStyleChanged,
-      } =
+      } = lifecycle(
-        lifecycle(
+        {
-          {
+          _directionIsRTL: finalDirectionIsRTL,
-            _directionIsRTL: finalDirectionIsRTL,
+          _heightIntrinsic: finalHeightIntrinsic,
-            _heightIntrinsic: finalHeightIntrinsic,
+          _sizeChanged,
-            _sizeChanged,
+          _hostMutation,
-            _hostMutation,
+          _contentMutation,
-            _contentMutation,
+          _paddingStyleChanged,
-            _paddingStyleChanged,
+        },
-          },
+        checkOption,
-          checkOption,
+        !!force
-          !!force
+      ) || {};
-        ) || {};
 
       _sizeChanged = adaptiveSizeChanged || _sizeChanged;
       _hostMutation = adaptiveHostMutation || _hostMutation;

packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts

@@ -28,16 +28,16 @@ interface ViewportOverflowState {
   _overflowScroll: XY<boolean>;
 }
 
-interface UndoViewportArrangeResult {
-  _redoViewportArrange: () => void;
-  _viewportOverflowState?: ViewportOverflowState;
-}
-
 interface OverflowOption {
   x: OverflowBehavior;
   y: OverflowBehavior;
 }
 
+type UndoViewportArrangeResult = [
+  () => void, // redoViewportArrange
+  ViewportOverflowState?
+];
+
 const { max, abs, round } = Math;
 const overlaidScrollbarsHideOffset = 42;
 const whCacheOptions = {
@@ -123,9 +123,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
     WH<number>
   >(whCacheOptions, scrollSize.bind(0, _viewport));
 
-  const [updateOverflowAmountCache, getCurrentOverflowAmountCache] = createCache<WH<number>>(
+  const [updateOverflowAmountCache, getCurrentOverflowAmountCache] =
-    whCacheOptions
+    createCache<WH<number>>(whCacheOptions);
-  );
 
   /**
    * Applies a fixed height to the viewport so it can't overflow or underflow the host element.
@@ -142,10 +141,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
 
     if (heightIntrinsic) {
       const { _nativeScrollbarIsOverlaid } = getEnvironment();
-      const {
+      const { _absolute: paddingAbsolute, _padding: padding } =
-        _absolute: paddingAbsolute,
+        _getLifecycleCommunication()._paddingInfo;
-        _padding: padding,
-      } = _getLifecycleCommunication()._paddingInfo;
       const { _overflowScroll, _scrollbarsHideOffset } = viewportOverflowState;
       const hostSizeFraction = sizeFraction(_host);
       const hostClientSize = clientSize(_host);
@@ -175,11 +172,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
     showNativeOverlaidScrollbars: boolean,
     viewportStyleObj?: StyleObject
   ): ViewportOverflowState => {
-    const {
+    const { _nativeScrollbarSize, _nativeScrollbarIsOverlaid, _nativeScrollbarStyling } =
-      _nativeScrollbarSize,
+      getEnvironment();
-      _nativeScrollbarIsOverlaid,
-      _nativeScrollbarStyling,
-    } = getEnvironment();
     const { x: overlaidX, y: overlaidY } = _nativeScrollbarIsOverlaid;
     const determineOverflow = !viewportStyleObj;
     const arrangeHideOffset =
@@ -400,8 +394,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
       removeClass(_viewport, classNameViewportArrange);
       style(_viewport, finalPaddingStyle);
 
-      return {
+      return [
-        _redoViewportArrange: () => {
+        () => {
           hideNativeScrollbars(
             finalViewportOverflowState,
             directionIsRTL,
@@ -411,12 +405,10 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
           style(_viewport, prevStyle);
           addClass(_viewport, classNameViewportArrange);
         },
-        _viewportOverflowState: finalViewportOverflowState,
+        finalViewportOverflowState,
-      };
+      ];
     }
-    return {
+    return [noop];
-      _redoViewportArrange: noop,
-    };
   };
 
   return (updateHints, checkOption, force) => {
@@ -431,9 +423,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
     const { _flexboxGlue, _nativeScrollbarStyling, _nativeScrollbarIsOverlaid } = getEnvironment();
     const [heightIntrinsic, heightIntrinsicChanged] = _heightIntrinsic;
     const [directionIsRTL, directionChanged] = _directionIsRTL;
-    const [showNativeOverlaidScrollbarsOption, showNativeOverlaidScrollbarsChanged] = checkOption<
+    const [showNativeOverlaidScrollbarsOption, showNativeOverlaidScrollbarsChanged] =
-      boolean
+      checkOption<boolean>('nativeScrollbarsOverlaid.show');
-    >('nativeScrollbarsOverlaid.show');
     const showNativeOverlaidScrollbars =
       showNativeOverlaidScrollbarsOption &&
       _nativeScrollbarIsOverlaid.x &&
@@ -471,27 +462,20 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
       showNativeOverlaidScrollbarsChanged ||
       directionChanged
     ) {
-      const {
+      const [redoViewportArrange, undoViewportArrangeOverflowState] = undoViewportArrange(
-        _redoViewportArrange,
-        _viewportOverflowState: undoViewportArrangeOverflowState,
-      } = undoViewportArrange(
         showNativeOverlaidScrollbars,
         directionIsRTL,
         preMeasureViewportOverflowState
       );
-      const [
+      const [viewportSizeFraction, viewportSizeFractionCahnged] = (viewportSizeFractionCache =
-        viewportSizeFraction,
+        updateViewportSizeFraction(force));
-        viewportSizeFractionCahnged,
+      const [viewportScrollSize, viewportScrollSizeChanged] = (viewportScrollSizeCache =
-      ] = (viewportSizeFractionCache = updateViewportSizeFraction(force));
+        updateViewportScrollSizeCache(force));
-      const [
-        viewportScrollSize,
-        viewportScrollSizeChanged,
-      ] = (viewportScrollSizeCache = updateViewportScrollSizeCache(force));
       const viewportContentSize = clientSize(_viewport);
       let arrangedViewportScrollSize = viewportScrollSize;
       let arrangedViewportClientSize = viewportContentSize;
 
-      _redoViewportArrange();
+      redoViewportArrange();
 
       // if re measure is required (only required if content arrange strategy is used)
       if (

packages/overlayscrollbars/src/support/cache/cache.ts

@@ -10,7 +10,7 @@ export interface CacheOptions<Value> {
 export type CacheValues<T> = [
   T, // value
   boolean, // changed
-  T? // previous
+  T | undefined // previous
 ];
 
 export type EqualCachePropFunction<Value> = (currentVal: Value, newVal: Value) => boolean;

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

@@ -42,9 +42,8 @@ const contentElmAttrChange: HTMLElement | null = document.querySelector('#target
 const contentBetweenElmAttrChange: HTMLElement | null = document.querySelector(
   '#content-host .padding-nest-item'
 );
-const contentHostElmAttrChange: HTMLElement | null = document.querySelector(
+const contentHostElmAttrChange: HTMLElement | null =
-  '#content-nest-item-host'
+  document.querySelector('#content-nest-item-host');
-);
 
 const targetElmsSlot = document.querySelector('#target .host-nest-item');
 const targetContentElmsSlot = document.querySelector('#target .content .content-nest');
@@ -52,9 +51,8 @@ const targetContentBetweenElmsSlot = document.querySelector('#content-host');
 const imgElmsSlot = document.querySelector('#target .content-nest');
 const transitionElmsSlot = document.querySelector('#content-host .content');
 
-const addRemoveTargetElms: HTMLButtonElement | null = document.querySelector(
+const addRemoveTargetElms: HTMLButtonElement | null =
-  '#addRemoveTargetElms'
+  document.querySelector('#addRemoveTargetElms');
-);
 const addRemoveTargetContentElms: HTMLButtonElement | null = document.querySelector(
   '#addRemoveTargetContentElms'
 );
@@ -67,22 +65,18 @@ const addRemoveTransitionElms: HTMLButtonElement | null = document.querySelector
 );
 const ignoreTargetChange: HTMLButtonElement | null = document.querySelector('#ignoreTargetChange');
 const setTargetAttr: HTMLSelectElement | null = document.querySelector('#setTargetAttr');
-const setFilteredTargetAttr: HTMLSelectElement | null = document.querySelector(
+const setFilteredTargetAttr: HTMLSelectElement | null =
-  '#setFilteredTargetAttr'
+  document.querySelector('#setFilteredTargetAttr');
-);
 const setContentAttr: HTMLSelectElement | null = document.querySelector('#setContentAttr');
-const setFilteredContentAttr: HTMLSelectElement | null = document.querySelector(
+const setFilteredContentAttr: HTMLSelectElement | null =
-  '#setFilteredContentAttr'
+  document.querySelector('#setFilteredContentAttr');
-);
+const setContentBetweenAttr: HTMLSelectElement | null =
-const setContentBetweenAttr: HTMLSelectElement | null = document.querySelector(
+  document.querySelector('#setContentBetweenAttr');
-  '#setContentBetweenAttr'
-);
 const setFilteredContentBetweenAttr: HTMLSelectElement | null = document.querySelector(
   '#setFilteredContentBetweenAttr'
 );
-const setContentHostElmAttr: HTMLSelectElement | null = document.querySelector(
+const setContentHostElmAttr: HTMLSelectElement | null =
-  '#setContentHostElmAttr'
+  document.querySelector('#setContentHostElmAttr');
-);
 const setFilteredContentHostElmAttr: HTMLSelectElement | null = document.querySelector(
   '#setFilteredContentHostElmAttr'
 );
@@ -415,7 +409,7 @@ const addRemoveTargetContentElmsFn = async () => {
 const addRemoveTargetContentBetweenElmsFn = async () => {
   await addRemoveElementsTest(targetContentBetweenElmsSlot, domContentObserverObservations);
 };
-const addRemoveImgElmsFn = async () => {
+const addRemoveImgElmsFn = async (changeless = false) => {
   const add = async () => {
     const img = new Image(1, 1);
     img.src = 'www.something.com/something/sometest';
@@ -434,21 +428,23 @@ const addRemoveImgElmsFn = async () => {
 
     await waitForOrFailTest(() => {
       after();
-      compare(2);
+      compare(changeless ? 0 : 2);
 
-      const previousContentChanged = getLast(domContentObserverObservations, 1);
+      if (!changeless) {
-      should.deepEqual(
+        const previousContentChanged = getLast(domContentObserverObservations, 1);
-        previousContentChanged,
+        should.deepEqual(
-        { contentChange: true, troughEvent: false },
+          previousContentChanged,
-        'Adding an content image must result in a content change.'
+          { contentChange: true, troughEvent: false },
-      );
+          'Adding an content image must result in a content change.'
+        );
 
-      const lastContentChanged = getLast(domContentObserverObservations);
+        const lastContentChanged = getLast(domContentObserverObservations);
-      should.deepEqual(
+        should.deepEqual(
-        lastContentChanged,
+          lastContentChanged,
-        { contentChange: true, troughEvent: true },
+          { contentChange: true, troughEvent: true },
-        'The images load event must result in a content change.'
+          'The images load event must result in a content change.'
-      );
+        );
+      }
     });
   };
 
@@ -481,21 +477,23 @@ const addRemoveImgElmsFn = async () => {
 
     await waitForOrFailTest(() => {
       after();
-      compare(2);
+      compare(changeless ? 0 : 2);
 
-      const previousContentChanged = getLast(domContentObserverObservations, 1);
+      if (!changeless) {
-      should.deepEqual(
+        const previousContentChanged = getLast(domContentObserverObservations, 1);
-        previousContentChanged,
+        should.deepEqual(
-        { contentChange: true, troughEvent: false },
+          previousContentChanged,
-        'Adding mutliple content images must result in a single content change. (debounced)'
+          { contentChange: true, troughEvent: false },
-      );
+          'Adding mutliple content images must result in a single content change. (debounced)'
+        );
 
-      const lastContentChanged = getLast(domContentObserverObservations);
+        const lastContentChanged = getLast(domContentObserverObservations);
-      should.deepEqual(
+        should.deepEqual(
-        lastContentChanged,
+          lastContentChanged,
-        { contentChange: true, troughEvent: true },
+          { contentChange: true, troughEvent: true },
-        'Multiple images load events must result in a single cintent change. (debounced)'
+          'Multiple images load events must result in a single cintent change. (debounced)'
-      );
+        );
+      }
     });
   };
 
@@ -529,17 +527,19 @@ const addRemoveImgElmsFn = async () => {
     contentDomObserver = createContentDomOserver(contentChange);
   };
 
-  await addChanged([
+  if (!changeless) {
-    ['img', 'something'],
+    await addChanged([
-    ['img', 'something2'],
+      ['img', 'something'],
-    ['img', ''],
+      ['img', 'something2'],
-    ['img', undefined],
+      ['img', ''],
-    ['', ''],
+      ['img', undefined],
-    [undefined, undefined],
+      ['', ''],
-    null,
+      [undefined, undefined],
-    undefined,
+      null,
-  ]);
+      undefined,
-  await addChanged([]);
+    ]);
+    await addChanged([]);
+  }
 
   removeElements(document.querySelectorAll('.img'));
 
@@ -696,7 +696,7 @@ const triggerBetweenSummaryChange = async () => {
 addRemoveTargetElms?.addEventListener('click', addRemoveTargetElmsFn);
 addRemoveTargetContentElms?.addEventListener('click', addRemoveTargetContentElmsFn);
 addRemoveTargetContentBetweenElms?.addEventListener('click', addRemoveTargetContentBetweenElmsFn);
-addRemoveImgElms?.addEventListener('click', addRemoveImgElmsFn);
+addRemoveImgElms?.addEventListener('click', () => addRemoveImgElmsFn());
 addRemoveTransitionElms?.addEventListener('click', addRemoveTransitionElmsFn);
 ignoreTargetChange?.addEventListener('click', ignoreTargetChangeFn);
 setTargetAttr?.addEventListener('change', attrChangeListener(targetElm));
@@ -744,6 +744,8 @@ const start = async () => {
   contentDomObserver._destroy();
   contentDomObserver._update();
 
+  await addRemoveImgElmsFn(true); // won't trigger changes after destroy
+
   setTestResult(true);
 };
 

packages/overlayscrollbars/types/domobserver.d.ts

@@ -1,2 +0,0 @@
-declare const start: () => Promise<void>;
-export { start };

packages/overlayscrollbars/types/sizeobserver.d.ts

@@ -1,2 +0,0 @@
-declare const start: () => Promise<void>;
-export { start };

packages/overlayscrollbars/types/structurelifecycle.d.ts

@@ -1 +0,0 @@
-export {};

packages/overlayscrollbars/types/trinsicobserver.d.ts

@@ -1,2 +0,0 @@
-declare const start: () => Promise<void>;
-export { start };

yarn.lock

@@ -3656,6 +3656,13 @@ eslint-plugin-jsx-a11y@^6.3.1:
     jsx-ast-utils "^2.4.1"
     language-tags "^1.0.5"
 
+eslint-plugin-prettier@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz#8b99d1e4b8b24a762472b4567992023619cb98e0"
+  integrity sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 eslint-plugin-react-hooks@^4.0.8:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.1.0.tgz#6323fbd5e650e84b2987ba76370523a60f4e7925"
@@ -3870,6 +3877,11 @@ fast-deep-equal@^3.1.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-glob@^3.0.3:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.4.tgz#d20aefbf99579383e7f3cc66529158c9b98554d3"
@@ -6527,6 +6539,13 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
 prettier@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"