improve readme and exports

This commit is contained in:
Rene Haas
2022-09-14 13:07:40 +02:00
parent c05e9f1d3a
commit 0a1174cc59
16 changed files with 112 additions and 52 deletions
+42 -12
View File
@@ -64,7 +64,7 @@ Embedd OverlayScrollbars manually in your HTML:
## Initialization ## Initialization
> __Note__ During initialization its expected that the <b>CSS file is loaded and parsed</b> by the browser. > __Note__: During initialization its expected that the <b>CSS file is loaded and parsed</b> by the browser.
You can initialize either directly with an `Element` or with an `Object` where you have more control over the initialization process. You can initialize either directly with an `Element` or with an `Object` where you have more control over the initialization process.
@@ -75,7 +75,7 @@ const osInstance = OverlayScrollbars(document.querySelector('#myElement'), {});
<details><summary><h6>Initialization with an Object</h6></summary> <details><summary><h6>Initialization with an Object</h6></summary>
> __Note__ For now please refer to the <b>TypeScript definitions</b> for a more detailed description of all possibilities. > __Note__: For now please refer to the <b>TypeScript definitions</b> for a more detailed description of all possibilities.
The only required field is the `target` field. This is the field to which the plugin is applied to. The only required field is the `target` field. This is the field to which the plugin is applied to.
If you use the object initialization only with the `target` field, the outcome is equivalent to the element initialization: If you use the object initialization only with the `target` field, the outcome is equivalent to the element initialization:
@@ -200,7 +200,7 @@ An array of tuples. The first value in the tuple is an `selector` and the second
| :--- | :--- | | :--- | :--- |
| `[number, number] \| number \| null` | `[0, 33]` | | `[number, number] \| number \| null` | `[0, 33]` |
> __Note__ If 0 is used for the timeout, `requestAnimationFrame` instead of `setTimeout` is used for the debounce. > __Note__: If 0 is used for the timeout, `requestAnimationFrame` instead of `setTimeout` is used for the debounce.
Debounces the `MutationObserver` which tracks changes to the content. If a **tuple** is passed, the first value is the timeout and second is the max wait. If only a **number** is passed you specify only the timeout and there is no max wait. With **null** there is no debounce. **Usefull to fine-tune performance.** Debounces the `MutationObserver` which tracks changes to the content. If a **tuple** is passed, the first value is the timeout and second is the max wait. If only a **number** is passed you specify only the timeout and there is no max wait. With **null** there is no debounce. **Usefull to fine-tune performance.**
@@ -210,7 +210,7 @@ Debounces the `MutationObserver` which tracks changes to the content. If a **tup
| :--- | :--- | | :--- | :--- |
| `string[] \| null` | `null` | | `string[] \| null` | `null` |
> __Note__ There is a base array of attributes that the `MutationObserver` always observes, even if this option is `null`. > __Note__: There is a base array of attributes that the `MutationObserver` always observes, even if this option is `null`.
An array of additional attributes that the `MutationObserver` should observe for the content. An array of additional attributes that the `MutationObserver` should observe for the content.
@@ -228,7 +228,7 @@ A function which receives a [`MutationRecord`](https://developer.mozilla.org/en-
| :--- | :--- | | :--- | :--- |
| `string` | `'scroll'` | | `string` | `'scroll'` |
> __Note__ Valid values are: `'hidden'`, `'scroll'`, `'visible'`, `'visible-hidden'` and `'visible-scroll'`. > __Note__: Valid values are: `'hidden'`, `'scroll'`, `'visible'`, `'visible-hidden'` and `'visible-scroll'`.
The overflow behavior for the horizontal (x) axis. The overflow behavior for the horizontal (x) axis.
@@ -238,7 +238,7 @@ The overflow behavior for the horizontal (x) axis.
| :--- | :--- | | :--- | :--- |
| `string` | `'scroll'` | | `string` | `'scroll'` |
> __Note__ Valid values are: `'hidden'`, `'scroll'`, `'visible'`, `'visible-hidden'` and `'visible-scroll'`. > __Note__: Valid values are: `'hidden'`, `'scroll'`, `'visible'`, `'visible-hidden'` and `'visible-scroll'`.
The overflow behavior for the vertical (y) axis. The overflow behavior for the vertical (y) axis.
@@ -256,7 +256,7 @@ Applies the specified theme (classname) to the scrollbars.
| :--- | :--- | | :--- | :--- |
| `string` | `'auto'` | | `string` | `'auto'` |
> __Note__ Valid values are: `'visible'`, `'hidden'`, and `'auto'`. > __Note__: Valid values are: `'visible'`, `'hidden'`, and `'auto'`.
The base visibility of the scrollbars. The base visibility of the scrollbars.
@@ -266,7 +266,7 @@ The base visibility of the scrollbars.
| :--- | :--- | | :--- | :--- |
| `string` | `'never'` | | `string` | `'never'` |
> __Note__ Valid values are: `'never'`, `'scroll'`, `'leave'` and `'move'`. > __Note__: Valid values are: `'never'`, `'scroll'`, `'leave'` and `'move'`.
The possibility to hide visible scrollbars automatically after a certain user action. The possibility to hide visible scrollbars automatically after a certain user action.
@@ -317,7 +317,7 @@ OverlayScrollbars(document.querySelector('#myElement'), {}, {
<details><summary><h6>Events in depth</h6></summary> <details><summary><h6>Events in depth</h6></summary>
> __Note__ Every event receives the `instance` from which it was fired as the first argument. Always. > __Note__: Every event receives the `instance` from which it was fired as the first argument. Always.
### `initialized` ### `initialized`
@@ -334,7 +334,7 @@ Is fired after all generated elements, observers and events were appended to the
| `instance` | The instance which fired the event. | | `instance` | The instance which fired the event. |
| `onUpdatedArgs` | An `object` which describes the update in detail. | | `onUpdatedArgs` | An `object` which describes the update in detail. |
> __Note__ If an update was triggered but nothing changed, the event won't be fired. > __Note__: If an update was triggered but nothing changed, the event won't be fired.
Is fired after the instace was updated. Is fired after the instace was updated.
@@ -351,7 +351,7 @@ Is fired after all generated elements, observers and events were removed from th
## Instance Methods ## Instance Methods
> __Note__ For now please refer to the <b>TypeScript definitions</b> for a more detailed description. > __Note__: For now please refer to the <b>TypeScript definitions</b> for a more detailed description.
```ts ```ts
interface OverlayScrollbars { interface OverlayScrollbars {
@@ -376,7 +376,7 @@ interface OverlayScrollbars {
## Static Methods ## Static Methods
> __Note__ For now please refer to the <b>TypeScript definitions</b> for a more detailed description. > __Note__: For now please refer to the <b>TypeScript definitions</b> for a more detailed description.
```ts ```ts
interface OverlayScrollbarsStatic { interface OverlayScrollbarsStatic {
@@ -393,6 +393,36 @@ interface OverlayScrollbarsStatic {
} }
``` ```
## Plugins
Everything thats considered not core functionality or old browser compatibility is exposed via a plugin. This is done because all unused plugins are treeshaken and thus won't end up in your final bundle. OverlayScrollbars comes with the following plugins:
- **ScrollbarsHidingPlugin**: Is needed for old browsers which aren't supporting nativ scrollbar styling features. [You can find the list of browsers where you need this plugin here](https://caniuse.com/?search=scrollbar%20styling) (note that even though `iOS Safari >= 14` is marked as unsupported you only need this plugin for `iOS < 7.1`).
- **SizeObserverPlugin**: Is needed for old browsers which aren't supporting the `ResizeObserver` api. [You can find the list of browsers where you need this plugin here](https://caniuse.com/?search=ResizeObserver)
- **ClickScrollPlugin**: If you want to use the option `scrollbars: { clickScroll: true }`.
#### Consuming Plugins
You can consume plugins like:
```ts
import {
OverlayScrollbars,
ScrollbarsHidingPlugin,
SizeObserverPlugin,
ClickScrollPlugin
} from 'overlayscrollbars';
// single plugin
OverlayScrollbars.plugin(ScrollbarsHidingPlugin);
// multiple plugins
OverlayScrollbars.plugin([SizeObserverPlugin, ClickScrollPlugin]);
```
#### Writing Plugins
You can write and publish your own Plugins. This section is a work in progress.
## Sponsors ## Sponsors
<table> <table>
<tr> <tr>
+42 -12
View File
@@ -64,7 +64,7 @@ Embedd OverlayScrollbars manually in your HTML:
## Initialization ## Initialization
> __Note__ During initialization its expected that the <b>CSS file is loaded and parsed</b> by the browser. > __Note__: During initialization its expected that the <b>CSS file is loaded and parsed</b> by the browser.
You can initialize either directly with an `Element` or with an `Object` where you have more control over the initialization process. You can initialize either directly with an `Element` or with an `Object` where you have more control over the initialization process.
@@ -75,7 +75,7 @@ const osInstance = OverlayScrollbars(document.querySelector('#myElement'), {});
<details><summary><h6>Initialization with an Object</h6></summary> <details><summary><h6>Initialization with an Object</h6></summary>
> __Note__ For now please refer to the <b>TypeScript definitions</b> for a more detailed description of all possibilities. > __Note__: For now please refer to the <b>TypeScript definitions</b> for a more detailed description of all possibilities.
The only required field is the `target` field. This is the field to which the plugin is applied to. The only required field is the `target` field. This is the field to which the plugin is applied to.
If you use the object initialization only with the `target` field, the outcome is equivalent to the element initialization: If you use the object initialization only with the `target` field, the outcome is equivalent to the element initialization:
@@ -200,7 +200,7 @@ An array of tuples. The first value in the tuple is an `selector` and the second
| :--- | :--- | | :--- | :--- |
| `[number, number] \| number \| null` | `[0, 33]` | | `[number, number] \| number \| null` | `[0, 33]` |
> __Note__ If 0 is used for the timeout, `requestAnimationFrame` instead of `setTimeout` is used for the debounce. > __Note__: If 0 is used for the timeout, `requestAnimationFrame` instead of `setTimeout` is used for the debounce.
Debounces the `MutationObserver` which tracks changes to the content. If a **tuple** is passed, the first value is the timeout and second is the max wait. If only a **number** is passed you specify only the timeout and there is no max wait. With **null** there is no debounce. **Usefull to fine-tune performance.** Debounces the `MutationObserver` which tracks changes to the content. If a **tuple** is passed, the first value is the timeout and second is the max wait. If only a **number** is passed you specify only the timeout and there is no max wait. With **null** there is no debounce. **Usefull to fine-tune performance.**
@@ -210,7 +210,7 @@ Debounces the `MutationObserver` which tracks changes to the content. If a **tup
| :--- | :--- | | :--- | :--- |
| `string[] \| null` | `null` | | `string[] \| null` | `null` |
> __Note__ There is a base array of attributes that the `MutationObserver` always observes, even if this option is `null`. > __Note__: There is a base array of attributes that the `MutationObserver` always observes, even if this option is `null`.
An array of additional attributes that the `MutationObserver` should observe for the content. An array of additional attributes that the `MutationObserver` should observe for the content.
@@ -228,7 +228,7 @@ A function which receives a [`MutationRecord`](https://developer.mozilla.org/en-
| :--- | :--- | | :--- | :--- |
| `string` | `'scroll'` | | `string` | `'scroll'` |
> __Note__ Valid values are: `'hidden'`, `'scroll'`, `'visible'`, `'visible-hidden'` and `'visible-scroll'`. > __Note__: Valid values are: `'hidden'`, `'scroll'`, `'visible'`, `'visible-hidden'` and `'visible-scroll'`.
The overflow behavior for the horizontal (x) axis. The overflow behavior for the horizontal (x) axis.
@@ -238,7 +238,7 @@ The overflow behavior for the horizontal (x) axis.
| :--- | :--- | | :--- | :--- |
| `string` | `'scroll'` | | `string` | `'scroll'` |
> __Note__ Valid values are: `'hidden'`, `'scroll'`, `'visible'`, `'visible-hidden'` and `'visible-scroll'`. > __Note__: Valid values are: `'hidden'`, `'scroll'`, `'visible'`, `'visible-hidden'` and `'visible-scroll'`.
The overflow behavior for the vertical (y) axis. The overflow behavior for the vertical (y) axis.
@@ -256,7 +256,7 @@ Applies the specified theme (classname) to the scrollbars.
| :--- | :--- | | :--- | :--- |
| `string` | `'auto'` | | `string` | `'auto'` |
> __Note__ Valid values are: `'visible'`, `'hidden'`, and `'auto'`. > __Note__: Valid values are: `'visible'`, `'hidden'`, and `'auto'`.
The base visibility of the scrollbars. The base visibility of the scrollbars.
@@ -266,7 +266,7 @@ The base visibility of the scrollbars.
| :--- | :--- | | :--- | :--- |
| `string` | `'never'` | | `string` | `'never'` |
> __Note__ Valid values are: `'never'`, `'scroll'`, `'leave'` and `'move'`. > __Note__: Valid values are: `'never'`, `'scroll'`, `'leave'` and `'move'`.
The possibility to hide visible scrollbars automatically after a certain user action. The possibility to hide visible scrollbars automatically after a certain user action.
@@ -317,7 +317,7 @@ OverlayScrollbars(document.querySelector('#myElement'), {}, {
<details><summary><h6>Events in depth</h6></summary> <details><summary><h6>Events in depth</h6></summary>
> __Note__ Every event receives the `instance` from which it was fired as the first argument. Always. > __Note__: Every event receives the `instance` from which it was fired as the first argument. Always.
### `initialized` ### `initialized`
@@ -334,7 +334,7 @@ Is fired after all generated elements, observers and events were appended to the
| `instance` | The instance which fired the event. | | `instance` | The instance which fired the event. |
| `onUpdatedArgs` | An `object` which describes the update in detail. | | `onUpdatedArgs` | An `object` which describes the update in detail. |
> __Note__ If an update was triggered but nothing changed, the event won't be fired. > __Note__: If an update was triggered but nothing changed, the event won't be fired.
Is fired after the instace was updated. Is fired after the instace was updated.
@@ -351,7 +351,7 @@ Is fired after all generated elements, observers and events were removed from th
## Instance Methods ## Instance Methods
> __Note__ For now please refer to the <b>TypeScript definitions</b> for a more detailed description. > __Note__: For now please refer to the <b>TypeScript definitions</b> for a more detailed description.
```ts ```ts
interface OverlayScrollbars { interface OverlayScrollbars {
@@ -376,7 +376,7 @@ interface OverlayScrollbars {
## Static Methods ## Static Methods
> __Note__ For now please refer to the <b>TypeScript definitions</b> for a more detailed description. > __Note__: For now please refer to the <b>TypeScript definitions</b> for a more detailed description.
```ts ```ts
interface OverlayScrollbarsStatic { interface OverlayScrollbarsStatic {
@@ -393,6 +393,36 @@ interface OverlayScrollbarsStatic {
} }
``` ```
## Plugins
Everything thats considered not core functionality or old browser compatibility is exposed via a plugin. This is done because all unused plugins are treeshaken and thus won't end up in your final bundle. OverlayScrollbars comes with the following plugins:
- **ScrollbarsHidingPlugin**: Is needed for old browsers which aren't supporting nativ scrollbar styling features. [You can find the list of browsers where you need this plugin here](https://caniuse.com/?search=scrollbar%20styling) (note that even though `iOS Safari >= 14` is marked as unsupported you only need this plugin for `iOS < 7.1`).
- **SizeObserverPlugin**: Is needed for old browsers which aren't supporting the `ResizeObserver` api. [You can find the list of browsers where you need this plugin here](https://caniuse.com/?search=ResizeObserver)
- **ClickScrollPlugin**: If you want to use the option `scrollbars: { clickScroll: true }`.
#### Consuming Plugins
You can consume plugins like:
```ts
import {
OverlayScrollbars,
ScrollbarsHidingPlugin,
SizeObserverPlugin,
ClickScrollPlugin
} from 'overlayscrollbars';
// single plugin
OverlayScrollbars.plugin(ScrollbarsHidingPlugin);
// multiple plugins
OverlayScrollbars.plugin([SizeObserverPlugin, ClickScrollPlugin]);
```
#### Writing Plugins
You can write and publish your own Plugins. This section is a work in progress.
## Sponsors ## Sponsors
<table> <table>
<tr> <tr>
+1 -1
View File
@@ -1,7 +1,7 @@
import 'index.scss'; import 'index.scss';
export { OverlayScrollbars } from 'overlayscrollbars'; export { OverlayScrollbars } from 'overlayscrollbars';
export { scrollbarsHidingPlugin, sizeObserverPlugin } from 'plugins'; export { ScrollbarsHidingPlugin, SizeObserverPlugin, ClickScrollPlugin } from 'plugins';
export type { export type {
Options, Options,
@@ -13,7 +13,7 @@ export type ClickScrollPluginInstance = {
export const clickScrollPluginName = '__osClickScrollPlugin'; export const clickScrollPluginName = '__osClickScrollPlugin';
export const clickScrollPlugin: Plugin<ClickScrollPluginInstance> = /* @__PURE__ */ (() => ({ export const ClickScrollPlugin: Plugin<ClickScrollPluginInstance> = /* @__PURE__ */ (() => ({
[clickScrollPluginName]: { [clickScrollPluginName]: {
_: ( _: (
moveHandleRelative, moveHandleRelative,
@@ -61,7 +61,7 @@ export type OptionsValidationPluginInstance = {
export const optionsValidationPluginName = '__osOptionsValidationPlugin'; export const optionsValidationPluginName = '__osOptionsValidationPlugin';
export const optionsValidationPlugin: Plugin<OptionsValidationPluginInstance> = export const OptionsValidationPlugin: Plugin<OptionsValidationPluginInstance> =
/* @__PURE__ */ (() => ({ /* @__PURE__ */ (() => ({
[optionsValidationPluginName]: { [optionsValidationPluginName]: {
_: (options: DeepPartial<Options>, doWriteErrors?: boolean) => { _: (options: DeepPartial<Options>, doWriteErrors?: boolean) => {
@@ -79,7 +79,7 @@ const diffBiggerThanOne = (valOne: number, valTwo: number): boolean => {
export const scrollbarsHidingPluginName = '__osScrollbarsHidingPlugin'; export const scrollbarsHidingPluginName = '__osScrollbarsHidingPlugin';
export const scrollbarsHidingPlugin: Plugin<ScrollbarsHidingPluginInstance> = export const ScrollbarsHidingPlugin: Plugin<ScrollbarsHidingPluginInstance> =
/* @__PURE__ */ (() => ({ /* @__PURE__ */ (() => ({
[scrollbarsHidingPluginName]: { [scrollbarsHidingPluginName]: {
_createUniqueViewportArrangeElement: (env: InternalEnvironment) => { _createUniqueViewportArrangeElement: (env: InternalEnvironment) => {
@@ -32,7 +32,7 @@ const scrollAmount = 3333333;
const scrollEventName = 'scroll'; const scrollEventName = 'scroll';
export const sizeObserverPluginName = '__osSizeObserverPlugin'; export const sizeObserverPluginName = '__osSizeObserverPlugin';
export const sizeObserverPlugin: Plugin<SizeObserverPluginInstance> = /* @__PURE__ */ (() => ({ export const SizeObserverPlugin: Plugin<SizeObserverPluginInstance> = /* @__PURE__ */ (() => ({
[sizeObserverPluginName]: { [sizeObserverPluginName]: {
_: (listenerElement, onSizeChangedCallback, observeAppearChange) => { _: (listenerElement, onSizeChangedCallback, observeAppearChange) => {
const observerElementChildren = createDOM( const observerElementChildren = createDOM(
@@ -2,7 +2,7 @@ import { DeepPartial } from 'typings';
import { defaultOptions, Options } from 'options'; import { defaultOptions, Options } from 'options';
import { Initialization } from 'initialization'; import { Initialization } from 'initialization';
import { getEnvironment } from 'environment'; import { getEnvironment } from 'environment';
import { scrollbarsHidingPlugin, scrollbarsHidingPluginName } from 'plugins'; import { ScrollbarsHidingPlugin, scrollbarsHidingPluginName } from 'plugins';
const defaultInitialization = { const defaultInitialization = {
elements: { elements: {
@@ -145,7 +145,7 @@ describe('environment', () => {
test('with scrollbarsHidingPlugin registered before environment was created', async () => { test('with scrollbarsHidingPlugin registered before environment was created', async () => {
const { getPlugins } = await import('plugins'); const { getPlugins } = await import('plugins');
(getPlugins as jest.Mock).mockImplementation(() => ({ (getPlugins as jest.Mock).mockImplementation(() => ({
[scrollbarsHidingPluginName]: scrollbarsHidingPlugin[scrollbarsHidingPluginName], [scrollbarsHidingPluginName]: ScrollbarsHidingPlugin[scrollbarsHidingPluginName],
})); }));
const { _addListener } = getEnv(); const { _addListener } = getEnv();
@@ -165,7 +165,7 @@ describe('environment', () => {
const { getPlugins } = await import('plugins'); const { getPlugins } = await import('plugins');
(getPlugins as jest.Mock).mockImplementation(() => ({ (getPlugins as jest.Mock).mockImplementation(() => ({
[scrollbarsHidingPluginName]: scrollbarsHidingPlugin[scrollbarsHidingPluginName], [scrollbarsHidingPluginName]: ScrollbarsHidingPlugin[scrollbarsHidingPluginName],
})); }));
window.dispatchEvent(new Event('resize')); window.dispatchEvent(new Event('resize'));
@@ -1,5 +1,5 @@
import { createSizeObserver as originalCreateSizeObserver } from 'observers'; import { createSizeObserver as originalCreateSizeObserver } from 'observers';
import { sizeObserverPlugin, sizeObserverPluginName } from 'plugins'; import { SizeObserverPlugin, sizeObserverPluginName } from 'plugins';
let createSizeObserver = originalCreateSizeObserver; let createSizeObserver = originalCreateSizeObserver;
@@ -59,7 +59,7 @@ describe('createSizeObserver', () => {
describe('with sizeObserverPlugin', () => { describe('with sizeObserverPlugin', () => {
const mockSizeObserverPlugin = jest.fn((...a) => [ const mockSizeObserverPlugin = jest.fn((...a) => [
// @ts-ignore // @ts-ignore
sizeObserverPlugin[sizeObserverPluginName]._(...a), SizeObserverPlugin[sizeObserverPluginName]._(...a),
]); ]);
beforeEach(() => { beforeEach(() => {
@@ -1,7 +1,7 @@
import { DeepPartial } from 'typings'; import { DeepPartial } from 'typings';
import { defaultOptions, Options } from 'options'; import { defaultOptions, Options } from 'options';
import { assignDeep } from 'support'; import { assignDeep } from 'support';
import { optionsValidationPlugin } from 'plugins'; import { OptionsValidationPlugin } from 'plugins';
import { OverlayScrollbars as originalOverlayScrollbars } from '../../src/overlayscrollbars'; import { OverlayScrollbars as originalOverlayScrollbars } from '../../src/overlayscrollbars';
const bodyElm = document.body; const bodyElm = document.body;
@@ -242,7 +242,7 @@ describe('overlayscrollbars', () => {
describe(`${withValidationPlugin ? 'with' : 'without'} optionsValidationPlugin`, () => { describe(`${withValidationPlugin ? 'with' : 'without'} optionsValidationPlugin`, () => {
beforeEach(() => { beforeEach(() => {
if (withValidationPlugin) { if (withValidationPlugin) {
OverlayScrollbars.plugin(optionsValidationPlugin); OverlayScrollbars.plugin(OptionsValidationPlugin);
} }
}); });
@@ -1,12 +1,12 @@
import { defaultOptions } from 'options'; import { defaultOptions } from 'options';
import { import {
optionsValidationPlugin, OptionsValidationPlugin,
optionsValidationPluginName, optionsValidationPluginName,
} from 'plugins/optionsValidationPlugin'; } from 'plugins/optionsValidationPlugin';
const getValidationFn = () => { const getValidationFn = () => {
const name = Object.keys(optionsValidationPlugin)[0]; const name = Object.keys(OptionsValidationPlugin)[0];
const instance = optionsValidationPlugin[name]; const instance = OptionsValidationPlugin[name];
const validationFn = instance._; const validationFn = instance._;
expect(name).toBe(optionsValidationPluginName); expect(name).toBe(optionsValidationPluginName);
@@ -10,7 +10,7 @@ import {
createStructureSetupElements, createStructureSetupElements,
StructureSetupElementsObj, StructureSetupElementsObj,
} from 'setups/structureSetup/structureSetup.elements'; } from 'setups/structureSetup/structureSetup.elements';
import { addPlugin, scrollbarsHidingPlugin } from 'plugins'; import { addPlugin, ScrollbarsHidingPlugin } from 'plugins';
import type { import type {
Initialization, Initialization,
InitializationTarget, InitializationTarget,
@@ -21,7 +21,7 @@ jest.mock('environment', () => ({
getEnvironment: jest.fn(), getEnvironment: jest.fn(),
})); }));
addPlugin(scrollbarsHidingPlugin); addPlugin(ScrollbarsHidingPlugin);
interface StructureSetupElementsProxy { interface StructureSetupElementsProxy {
input: InitializationTarget; input: InitializationTarget;
@@ -11,11 +11,11 @@ import {
waitForOrFailTest, waitForOrFailTest,
} from '@~local/browser-testing'; } from '@~local/browser-testing';
import { hasDimensions, offsetSize, WH, style } from 'support'; import { hasDimensions, offsetSize, WH, style } from 'support';
import { addPlugin, sizeObserverPlugin } from 'plugins'; import { addPlugin, SizeObserverPlugin } from 'plugins';
import { createSizeObserver } from 'observers'; import { createSizeObserver } from 'observers';
if (!window.ResizeObserver) { if (!window.ResizeObserver) {
addPlugin(sizeObserverPlugin); addPlugin(SizeObserverPlugin);
} }
let sizeIterations = 0; let sizeIterations = 0;
@@ -12,10 +12,10 @@ import {
} from '@~local/browser-testing'; } from '@~local/browser-testing';
import { offsetSize } from 'support'; import { offsetSize } from 'support';
import { createTrinsicObserver } from 'observers'; import { createTrinsicObserver } from 'observers';
import { addPlugin, sizeObserverPlugin } from 'plugins'; import { addPlugin, SizeObserverPlugin } from 'plugins';
if (!window.ResizeObserver) { if (!window.ResizeObserver) {
addPlugin(sizeObserverPlugin); addPlugin(SizeObserverPlugin);
} }
let heightIntrinsic: boolean | undefined; let heightIntrinsic: boolean | undefined;
@@ -4,13 +4,13 @@ import should from 'should';
import { timeout, setTestResult, waitForOrFailTest, resize } from '@~local/browser-testing'; import { timeout, setTestResult, waitForOrFailTest, resize } from '@~local/browser-testing';
import { OverlayScrollbars } from 'overlayscrollbars'; import { OverlayScrollbars } from 'overlayscrollbars';
import { addClass, each, isArray, removeAttr, style } from 'support'; import { addClass, each, isArray, removeAttr, style } from 'support';
import { addPlugin, scrollbarsHidingPlugin, sizeObserverPlugin } from 'plugins'; import { addPlugin, ScrollbarsHidingPlugin, SizeObserverPlugin } from 'plugins';
if (!window.ResizeObserver) { if (!window.ResizeObserver) {
addPlugin(sizeObserverPlugin); addPlugin(SizeObserverPlugin);
} }
if (!OverlayScrollbars.env().scrollbarsHiding) { if (!OverlayScrollbars.env().scrollbarsHiding) {
addPlugin(scrollbarsHidingPlugin); addPlugin(ScrollbarsHidingPlugin);
} }
// @ts-ignore // @ts-ignore
@@ -32,15 +32,15 @@ import {
} from 'support'; } from 'support';
import { Options } from 'options'; import { Options } from 'options';
import { DeepPartial } from 'typings'; import { DeepPartial } from 'typings';
import { addPlugin, scrollbarsHidingPlugin, sizeObserverPlugin, clickScrollPlugin } from 'plugins'; import { addPlugin, ScrollbarsHidingPlugin, SizeObserverPlugin, ClickScrollPlugin } from 'plugins';
addPlugin(clickScrollPlugin); addPlugin(ClickScrollPlugin);
if (!window.ResizeObserver) { if (!window.ResizeObserver) {
addPlugin(sizeObserverPlugin); addPlugin(SizeObserverPlugin);
} }
if (!OverlayScrollbars.env().scrollbarsHiding) { if (!OverlayScrollbars.env().scrollbarsHiding) {
addPlugin(scrollbarsHidingPlugin); addPlugin(ScrollbarsHidingPlugin);
} }
// @ts-ignore // @ts-ignore