mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-05-23 15:04:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

add observers destroy and optimizations

Browse Source
This commit is contained in:
Rene
2021-05-15 00:45:11 +02:00
parent c529d1452c
commit a5da190e76
8 changed files with 89 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts
+9 -10
View File
@@ -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) => {
updateLifecycles(null, changedOptions, force);
};
const update = (changedOptions?: Partial<OSOptions> | 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);
},
};
packages/overlayscrollbars/src/lifecycles/lifecycleHubObservers.ts
+32 -7
View File
@@ -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, {
_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<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
+3 -1
View File
@@ -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
+3 -1
View File
@@ -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
+3 -1
View File
@@ -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
+2 -2
View File
@@ -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);
}
});
packages/overlayscrollbars/tests/browser/observers/domObserver/index.browser.ts
+10 -10
View File
@@ -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
+27 -15
View File
@@ -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"