From a5da190e76ec4b6fe780b78a313a0c9ae8d5c4fc Mon Sep 17 00:00:00 2001 From: Rene Date: Sat, 15 May 2021 00:45:11 +0200 Subject: [PATCH] add observers destroy and optimizations --- .../src/lifecycles/lifecycleHub.ts | 19 ++++----- .../src/lifecycles/lifecycleHubObservers.ts | 39 +++++++++++++---- .../src/observers/domObserver.ts | 4 +- .../src/observers/sizeObserver.ts | 4 +- .../src/observers/trinsicObserver.ts | 4 +- .../structureLifecycle/index.browser.ts | 4 +- .../observers/domObserver/index.browser.ts | 20 ++++----- yarn.lock | 42 ++++++++++++------- 8 files changed, 89 insertions(+), 47 deletions(-) diff --git a/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts b/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts index 0b25eb8..aa1527e 100644 --- a/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts +++ b/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts @@ -10,6 +10,12 @@ import { StyleObject } from 'typings'; export type LifecycleCheckOption = (path: string) => LifecycleOptionInfo; +export type Lifecycle = ( + updateHints: LifecycleUpdateHints, + checkOption: LifecycleCheckOption, + force: boolean +) => Partial | void; + export interface LifecycleOptionInfo { readonly _value: T; _changed: boolean; @@ -37,12 +43,6 @@ export interface LifecycleUpdateHints extends LifecycleAdaptiveUpdateHints { _heightIntrinsic: CacheValues; } -export type Lifecycle = ( - updateHints: LifecycleUpdateHints, - checkOption: LifecycleCheckOption, - force: boolean -) => Partial | void; - export interface LifecycleHubState { _overflowAmount: WH; } @@ -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 | null, force?: boolean) => { - updateLifecycles(null, changedOptions, force); - }; + const update = (changedOptions?: Partial | null, force?: boolean) => 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); }, }; diff --git a/packages/overlayscrollbars/src/lifecycles/lifecycleHubObservers.ts b/packages/overlayscrollbars/src/lifecycles/lifecycleHubObservers.ts index 9b13dd0..a7b4788 100644 --- a/packages/overlayscrollbars/src/lifecycles/lifecycleHubObservers.ts +++ b/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 | 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) => { updateLifecycles({ _heightIntrinsic: heightIntrinsic, @@ -73,18 +85,23 @@ export const lifecycleHubOservers = (instance: LifecycleHub, updateLifecycles: ( _contentMutation: true, }); }; - const onHostMutation = updateLifecyclesWithDebouncedAdaptiveUpdateHints.bind(0, { - _hostMutation: true, - }) as () => any; + const onHostMutation = (targetChangedAttrs: string[], targetStyleChanged: boolean) => { + if (targetStyleChanged) { + 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 | 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(); + }, }; }; diff --git a/packages/overlayscrollbars/src/observers/domObserver.ts b/packages/overlayscrollbars/src/observers/domObserver.ts index fc826a3..992e658 100644 --- a/packages/overlayscrollbars/src/observers/domObserver.ts +++ b/packages/overlayscrollbars/src/observers/domObserver.ts @@ -77,7 +77,9 @@ const createEventContentChange = (target: Element, eventContentChange: DOMObserv let map: Map | 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(); } }; diff --git a/packages/overlayscrollbars/src/observers/sizeObserver.ts b/packages/overlayscrollbars/src/observers/sizeObserver.ts index b8d7dd4..663b9fc 100644 --- a/packages/overlayscrollbars/src/observers/sizeObserver.ts +++ b/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( `
` diff --git a/packages/overlayscrollbars/src/observers/trinsicObserver.ts b/packages/overlayscrollbars/src/observers/trinsicObserver.ts index f70d7de..7861deb 100644 --- a/packages/overlayscrollbars/src/observers/trinsicObserver.ts +++ b/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); diff --git a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts index 512f3e5..73cc829 100644 --- a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts +++ b/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 - if (msie11) { + // steady pace for ie11 / edge or it will freeze progressively + if (msie11 || msedge) { await timeout(25); } }); diff --git a/packages/overlayscrollbars/tests/browser/observers/domObserver/index.browser.ts b/packages/overlayscrollbars/tests/browser/observers/domObserver/index.browser.ts index a9b31b1..901bcca 100644 --- a/packages/overlayscrollbars/tests/browser/observers/domObserver/index.browser.ts +++ b/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); diff --git a/yarn.lock b/yarn.lock index 73522ba..61cd5b5 100644 --- a/yarn.lock +++ b/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" - resolved "https://registry.yarnpkg.com/playwright-chromium/-/playwright-chromium-1.10.0.tgz#df0e65e42cdda66b599df38d062d9cd8c2dea09c" - integrity sha512-ry/60/YKGJfrnaS7j5C3+xmA2DAMv6pBE351FoTHe4Llq0WU92IL0rBYK3TkK3PzSHYtp1KdCRsRjDnJhImA3g== + version "1.11.0" + resolved "https://registry.yarnpkg.com/playwright-chromium/-/playwright-chromium-1.11.0.tgz#fcd2a86baca011c758288f246a84304453c4ab42" + 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" - resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.10.0.tgz#0ed3590ddf97ec4a5fd4baef40346e2d8e2f19ba" - integrity sha512-SDA5KPwnJJSfnNX/b7h8y0ChwBmcbbcCofYXkZGMVuzXZsmHPGLOBRhgkwN2nzJ10Ezf4cd1OcVOeOLKPxjeRg== + version "1.11.0" + resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.11.0.tgz#992c24303ff84cc66022a3327c24026fc433a66a" + 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" - resolved "https://registry.yarnpkg.com/playwright-firefox/-/playwright-firefox-1.10.0.tgz#842f6f93ebdced83eecbd23d6820cad930686728" - integrity sha512-TR7Vyw9PgS4KtbSOIUGqNa20gJxjpRHK6IQv4oDhgehpW/YnCjqxe5ylI9eLrzzYPUPsoyD7bZRxSZDtrcCTLA== + version "1.11.0" + resolved "https://registry.yarnpkg.com/playwright-firefox/-/playwright-firefox-1.11.0.tgz#f73fd2dbca5178d148ef389241ca1ab0e5354787" + 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" - resolved "https://registry.yarnpkg.com/playwright-webkit/-/playwright-webkit-1.10.0.tgz#0d32f73c5ab3296fb9114b053b0cd1d35597b2c4" - integrity sha512-Dql/wJQ+aFgL3/HHMv9UfVAd3+pzQluLdDHnG7eX8PWLK80ly4idyQO0HYRjwwvoZuyx1G1rA+kuh7jtn7OfHg== + version "1.11.0" + resolved "https://registry.yarnpkg.com/playwright-webkit/-/playwright-webkit-1.11.0.tgz#6fab9ffc5b030cc4370bd1ae55d5e96f2cfd7fa1" + 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" - resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.10.0.tgz#a14d295f1ad886caf4cc5e674afe03ac832066bc" - integrity sha512-b7SGBcCPq4W3pb4ImEDmNXtO0ZkJbZMuWiShsaNJd+rGfY/6fqwgllsAojmxGSgFmijYw7WxCoPiAIEDIH16Kw== + version "1.11.0" + resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.11.0.tgz#0796cf08f4756e8187e01c705315d8e1fb48e25f" + 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"