improve build flow

This commit is contained in:
Rene Haas
2022-08-01 16:43:45 +02:00
parent cb992fea85
commit 30a9123cd2
16 changed files with 402 additions and 246 deletions
+7 -6
View File
@@ -6,17 +6,18 @@
"files": [
"src",
"dist",
"types/overlayscrollbars.d.ts"
"types",
"styles"
],
"main": "dist/overlayscrollbars.js",
"module": "dist/overlayscrollbars.esm.js",
"types": "types/overlayscrollbars.d.ts",
"scripts": {
"test:jsdom": "jest --coverage --runInBand --detectOpenHandles --testPathPattern",
"posttest:jsdom": "full-coverage",
"build": "rollup -c",
"test:playwright": "playwright test --quiet",
"test:playwright:dev": "playwright test",
"posttest:playwright": "playwright-merge-coverage && full-coverage"
"jest": "jest --coverage --runInBand --detectOpenHandles --testPathPattern",
"postjest": "full-coverage",
"playwright": "playwright test --quiet",
"playwright:dev": "playwright test",
"postplaywright": "playwright-merge-coverage && full-coverage"
}
}
+15 -1
View File
@@ -1,10 +1,13 @@
const { terser: rollupTerser } = require('rollup-plugin-terser');
const { summary } = require('rollup-plugin-summary');
const createRollupConfig = require('@local/rollup');
const { devDependencies, peerDependencies } = require('./package.json');
module.exports = createRollupConfig({
project: 'OverlayScrollbars',
extractStyle: true,
verbose: true,
extractStyles: true,
extractTypes: true,
rollup: {
external: Object.keys(devDependencies || {}).concat(Object.keys(peerDependencies || {})),
output: {
@@ -32,5 +35,16 @@ module.exports = createRollupConfig({
}),
],
},
plugins: [
summary({
showGzippedSize: true,
showBrotliSize: true,
showMinifiedSize: false,
warnLow: 33000,
totalLow: 33000,
warnHigh: 36000,
totalHigh: 36000,
}),
],
},
});
@@ -2,7 +2,7 @@ import { addInstance, removeInstance, getInstance } from 'instances';
import { OverlayScrollbars } from 'overlayscrollbars';
const testElm = document.body;
const testInstance = OverlayScrollbars(document.body);
const testInstance = OverlayScrollbars(document.body, {});
describe('instances', () => {
afterEach(() => {
+1 -1
View File
@@ -1,6 +1,6 @@
{
"extends": "@local/tsconfig",
"compilerOptions": {
"baseUrl": "./src",
"baseUrl": "./src"
}
}
+69 -82
View File
@@ -1,50 +1,46 @@
type CacheValues<T> = [
value: T,
changed: boolean,
previous?: T
];
type UpdateCache<Value> = (force?: boolean) => CacheValues<Value>;
interface WH<T> {
declare type CacheValues<T> = [value: T, changed: boolean, previous?: T];
declare type UpdateCache<Value> = (force?: boolean) => CacheValues<Value>;
interface WH<T = number> {
w: T;
h: T;
}
type DeepPartial<T> = {
declare type DeepPartial<T> = {
[P in keyof T]?: T[P] extends Record<string, unknown> ? DeepPartial<T[P]> : T[P];
};
type StyleObject<CustomCssProps> = {
[Key in keyof CSSStyleDeclaration | (CustomCssProps extends string ? CustomCssProps : "")]?: string | number;
declare type StyleObject<CustomCssProps = ''> = {
[Key in keyof CSSStyleDeclaration | (CustomCssProps extends string ? CustomCssProps : '')]?: string | number;
};
type OverflowStyle = "scroll" | "hidden" | "visible";
declare type OverflowStyle = 'scroll' | 'hidden' | 'visible';
interface TRBL {
t: number;
r: number;
b: number;
l: number;
}
interface XY<T> {
interface XY<T = number> {
x: T;
y: T;
}
type EventListener<EventMap extends Record<string, any[]>, Name extends keyof EventMap> = (...args: EventMap[Name]) => void;
type InitialEventListeners<EventMap extends Record<string, any[]>> = {
[K in keyof EventMap]?: EventListener<EventMap> | EventListener<EventMap>[];
declare type EventListener$1<EventMap extends Record<string, any[]>, Name extends keyof EventMap = keyof EventMap> = (...args: EventMap[Name]) => void;
declare type InitialEventListeners<EventMap extends Record<string, any[]>> = {
[K in keyof EventMap]?: EventListener$1<EventMap> | EventListener$1<EventMap>[];
};
type OverflowBehavior = "hidden" | "scroll" | "visible" | "visible-hidden" | "visible-scroll";
type ScrollbarVisibilityBehavior = "visible" | "hidden" | "auto";
type ScrollbarAutoHideBehavior = "never" | "scroll" | "leave" | "move";
declare type OverflowBehavior = 'hidden' | 'scroll' | 'visible' | 'visible-hidden' | 'visible-scroll';
declare type ScrollbarVisibilityBehavior = 'visible' | 'hidden' | 'auto';
declare type ScrollbarAutoHideBehavior = 'never' | 'scroll' | 'leave' | 'move';
interface Options {
paddingAbsolute: boolean;
showNativeOverlaidScrollbars: boolean;
updating: {
elementEvents: Array<[
elementSelector: string,
eventNames: string
]> | null;
elementEvents: Array<[elementSelector: string, eventNames: string]> | null;
attributes: string[] | null;
debounce: [
timeout: number,
maxWait: number
] | number | null; // (if tuple: [timeout: 0, maxWait: 33], if number: [timeout: number, maxWait: false]) debounce for content Changes
debounce: [timeout: number, maxWait: number] | number | null;
ignoreMutation: ((mutation: MutationRecord) => any) | null;
};
overflow: {
@@ -61,41 +57,42 @@ interface Options {
pointers: string[] | null;
};
}
type PluginInstance = Record<string, unknown> | ((staticObj: OverlayScrollbarsStatic, instanceObj: OverlayScrollbars) => void);
type Plugin<T extends PluginInstance> = {
declare type PluginInstance = Record<string, unknown> | ((staticObj: OverlayScrollbarsStatic, instanceObj: OverlayScrollbars) => void);
declare type Plugin<T extends PluginInstance = PluginInstance> = {
[pluginName: string]: T;
};
type SizeObserverPluginInstance = {
_: (listenerElement: HTMLElement, onSizeChangedCallback: (appear: boolean) => any, observeAppearChange: boolean) => [
appearCallback: () => any,
offFns: (() => any)[]
];
declare type SizeObserverPluginInstance = {
_: (listenerElement: HTMLElement, onSizeChangedCallback: (appear: boolean) => any, observeAppearChange: boolean) => [appearCallback: () => any, offFns: (() => any)[]];
};
declare const sizeObserverPlugin: Plugin<SizeObserverPluginInstance>;
type StaticInitialization = HTMLElement | false | null;
type DynamicInitialization = HTMLElement | boolean | null;
type InitializationTargetElement = HTMLElement | HTMLTextAreaElement;
type Initialization = Omit<StructureInitialization, "target"> & ScrollbarsInitialization & {
declare type StaticInitialization = HTMLElement | false | null;
declare type DynamicInitialization = HTMLElement | boolean | null;
declare type InitializationTargetElement = HTMLElement | HTMLTextAreaElement;
declare type Initialization = Omit<StructureInitialization, 'target'> & ScrollbarsInitialization & {
cancel: {
nativeScrollbarsOverlaid: boolean;
body: boolean | null;
};
};
type InitializationTargetObject = DeepPartial<Initialization> & Pick<StructureInitialization, "target">;
type InitializationTarget = InitializationTargetElement | InitializationTargetObject;
declare type InitializationTargetObject = DeepPartial<Initialization> & Pick<StructureInitialization, 'target'>;
declare type InitializationTarget = InitializationTargetElement | InitializationTargetObject;
/**
* Static elements MUST be present.
* With false, null or undefined the element will be generated, otherwise the specified element is taken.
*/
type StaticInitializationElement<Args extends any[]> = ((...args: Args) => StaticInitialization) | StaticInitialization;
declare type StaticInitializationElement<Args extends any[]> = ((...args: Args) => StaticInitialization) | StaticInitialization;
/**
* Dynamic element CAN be present.
* If its a element the element will be taken as the repsective element.
* With true the element will be generated.
* With false, null or undefined the element won't be generated.
*/
type DynamicInitializationElement<Args extends any[]> = ((...args: Args) => DynamicInitialization) | DynamicInitialization;
type ScrollbarsDynamicInitializationElement = DynamicInitializationElement<[
declare type DynamicInitializationElement<Args extends any[]> = ((...args: Args) => DynamicInitialization) | DynamicInitialization;
declare type ScrollbarsDynamicInitializationElement = DynamicInitializationElement<[
target: InitializationTargetElement,
host: HTMLElement,
viewport: HTMLElement
@@ -111,6 +108,7 @@ type ScrollbarsDynamicInitializationElement = DynamicInitializationElement<[
interface ScrollbarsInitialization {
scrollbarsSlot: ScrollbarsDynamicInitializationElement;
}
interface StructureSetupState {
_padding: TRBL;
_paddingAbsolute: boolean;
@@ -122,10 +120,11 @@ interface StructureSetupState {
_heightIntrinsic: boolean;
_directionIsRTL: boolean;
}
type StructureStaticInitializationElement = StaticInitializationElement<[
declare type StructureStaticInitializationElement = StaticInitializationElement<[
target: InitializationTargetElement
]>;
type StructureDynamicInitializationElement = DynamicInitializationElement<[
declare type StructureDynamicInitializationElement = DynamicInitializationElement<[
target: InitializationTargetElement
]>;
/**
@@ -140,22 +139,23 @@ type StructureDynamicInitializationElement = DynamicInitializationElement<[
*/
interface StructureInitialization {
target: InitializationTargetElement;
host: StructureStaticInitializationElement; // only relevant for textarea
host: StructureStaticInitializationElement;
viewport: StructureStaticInitializationElement;
padding: StructureDynamicInitializationElement;
content: StructureDynamicInitializationElement;
}
interface ViewportOverflowState {
_scrollbarsHideOffset: XY<number>;
_scrollbarsHideOffsetArrange: XY<boolean>;
_overflowScroll: XY<boolean>;
_overflowStyle: XY<OverflowStyle>;
}
type GetViewportOverflowState = (showNativeOverlaidScrollbars: boolean, viewportStyleObj?: StyleObject) => ViewportOverflowState;
type HideNativeScrollbars = (viewportOverflowState: ViewportOverflowState, directionIsRTL: boolean, viewportArrange: boolean, viewportStyleObj: StyleObject) => void;
type EnvironmentEventMap = {
_: [
];
declare type GetViewportOverflowState = (showNativeOverlaidScrollbars: boolean, viewportStyleObj?: StyleObject) => ViewportOverflowState;
declare type HideNativeScrollbars = (viewportOverflowState: ViewportOverflowState, directionIsRTL: boolean, viewportArrange: boolean, viewportStyleObj: StyleObject) => void;
declare type EnvironmentEventMap = {
_: [];
};
interface InternalEnvironment {
readonly _nativeScrollbarsSize: XY;
@@ -169,34 +169,29 @@ interface InternalEnvironment {
readonly _cssCustomProperties: boolean;
readonly _staticDefaultInitialization: Initialization;
readonly _staticDefaultOptions: Options;
_addListener(listener: EventListener<EnvironmentEventMap, "_">): () => void;
_addListener(listener: EventListener$1<EnvironmentEventMap, '_'>): () => void;
_getDefaultInitialization(): Initialization;
_setDefaultInitialization(newInitialization: DeepPartial<Initialization>): void;
_getDefaultOptions(): Options;
_setDefaultOptions(newDefaultOptions: DeepPartial<Options>): void;
}
type ArrangeViewport = (viewportOverflowState: ViewportOverflowState, viewportScrollSize: WH<number>, sizeFraction: WH<number>, directionIsRTL: boolean) => boolean;
type UndoViewportArrangeResult = [
declare type ArrangeViewport = (viewportOverflowState: ViewportOverflowState, viewportScrollSize: WH<number>, sizeFraction: WH<number>, directionIsRTL: boolean) => boolean;
declare type UndoViewportArrangeResult = [
redoViewportArrange: () => void,
overflowState?: ViewportOverflowState
];
type UndoArrangeViewport = (showNativeOverlaidScrollbars: boolean, directionIsRTL: boolean, viewportOverflowState?: ViewportOverflowState) => UndoViewportArrangeResult;
type ScrollbarsHidingPluginInstance = {
declare type UndoArrangeViewport = (showNativeOverlaidScrollbars: boolean, directionIsRTL: boolean, viewportOverflowState?: ViewportOverflowState) => UndoViewportArrangeResult;
declare type ScrollbarsHidingPluginInstance = {
_createUniqueViewportArrangeElement(env: InternalEnvironment): HTMLStyleElement | false;
_overflowUpdateSegment(doViewportArrange: boolean, flexboxGlue: boolean, viewport: HTMLElement, viewportArrange: HTMLStyleElement | false | null | undefined, getState: () => StructureSetupState, getViewportOverflowState: GetViewportOverflowState, hideNativeScrollbars: HideNativeScrollbars): [
ArrangeViewport,
UndoArrangeViewport
];
_overflowUpdateSegment(doViewportArrange: boolean, flexboxGlue: boolean, viewport: HTMLElement, viewportArrange: HTMLStyleElement | false | null | undefined, getState: () => StructureSetupState, getViewportOverflowState: GetViewportOverflowState, hideNativeScrollbars: HideNativeScrollbars): [ArrangeViewport, UndoArrangeViewport];
_envWindowZoom(): (envInstance: InternalEnvironment, updateNativeScrollbarSizeCache: UpdateCache<XY<number>>, triggerEvent: () => void) => void;
};
declare const scrollbarsHidingPlugin: Plugin<ScrollbarsHidingPluginInstance>;
type GeneralInitialEventListeners = InitialEventListeners;
type GeneralEventListener = EventListener;
// Notes:
// Height intrinsic detection use "content: true" init strategy - or open ticket for custom height intrinsic observer
interface OverlayScrollbarsStatic {
(target: InitializationTarget): OverlayScrollbars | undefined;
(target: InitializationTarget, options: DeepPartial<Options>, eventListeners?: GeneralInitialEventListeners<EventListenerMap>): OverlayScrollbars;
(target: InitializationTarget, options: DeepPartial<Options>, eventListeners?: InitialEventListeners<EventListenerMap>): OverlayScrollbars;
plugin(plugin: Plugin | Plugin[]): void;
valid(osInstance: any): boolean;
env(): Environment;
@@ -261,29 +256,21 @@ interface OnUpdatedEventListenerArgs {
changedOptions: DeepPartial<Options>;
force: boolean;
}
type EventListenerMap = {
declare type EventListenerMap = {
/**
* Triggered after all elements are initialized and appended.
*/
initialized: [
instance: OverlayScrollbars
];
initialized: [instance: OverlayScrollbars];
/**
* Triggered after an update.
*/
updated: [
instance: OverlayScrollbars,
onUpdatedArgs: OnUpdatedEventListenerArgs
];
updated: [instance: OverlayScrollbars, onUpdatedArgs: OnUpdatedEventListenerArgs];
/**
* Triggered after all elements, observers and events are destroyed.
*/
destroyed: [
instance: OverlayScrollbars,
canceled: boolean
];
destroyed: [instance: OverlayScrollbars, canceled: boolean];
};
type EventListener$0<Name extends keyof EventListenerMap> = GeneralEventListener<EventListenerMap, Name>;
declare type EventListener<Name extends keyof EventListenerMap> = EventListener$1<EventListenerMap, Name>;
interface OverlayScrollbars {
options(): Options;
options(newOptions?: DeepPartial<Options>): Options;
@@ -291,11 +278,11 @@ interface OverlayScrollbars {
destroy(): void;
state(): State;
elements(): Elements;
on<Name extends keyof EventListenerMap>(name: Name, listener: EventListener$0<Name>): () => void;
on<Name extends keyof EventListenerMap>(name: Name, listener: EventListener$0<Name>[]): () => void;
off<Name extends keyof EventListenerMap>(name: Name, listener: EventListener$0<Name>): void;
off<Name extends keyof EventListenerMap>(name: Name, listener: EventListener$0<Name>[]): void;
on<Name extends keyof EventListenerMap>(name: Name, listener: EventListener<Name>): () => void;
on<Name extends keyof EventListenerMap>(name: Name, listener: EventListener<Name>[]): () => void;
off<Name extends keyof EventListenerMap>(name: Name, listener: EventListener<Name>): void;
off<Name extends keyof EventListenerMap>(name: Name, listener: EventListener<Name>[]): void;
}
// eslint-disable-next-line @typescript-eslint/no-redeclare
declare const OverlayScrollbars: OverlayScrollbarsStatic;
export { OverlayScrollbars, scrollbarsHidingPlugin, sizeObserverPlugin };