40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
// Due to an ambivalent nature of .d.ts files, we can't import or export
|
|
// anything in this file. That is the cause we need to manually put ScrollDirection, ObserverEventDetails
|
|
// and LifecycleEventDetails types to ensure correct typings in the app.
|
|
|
|
type Direction = 'up' | 'down' | 'left' | 'right';
|
|
|
|
type ScrollDirection = {
|
|
vertical?: Direction;
|
|
horizontal?: Direction;
|
|
};
|
|
|
|
type ObserverEventDetails = {
|
|
inView: boolean;
|
|
entry: IntersectionObserverEntry;
|
|
scrollDirection: ScrollDirection;
|
|
node: HTMLElement;
|
|
observer: IntersectionObserver;
|
|
};
|
|
|
|
type LifecycleEventDetails = {
|
|
node: HTMLElement;
|
|
observer: IntersectionObserver;
|
|
};
|
|
|
|
declare namespace svelteHTML {
|
|
interface HTMLAttributes<T> {
|
|
// Backwards compatibility
|
|
'on:inview_change'?: (e: CustomEvent<ObserverEventDetails>) => void;
|
|
'on:inview_enter'?: (e: CustomEvent<ObserverEventDetails>) => void;
|
|
'on:inview_leave'?: (e: CustomEvent<ObserverEventDetails>) => void;
|
|
'on:inview_init'?: (e: CustomEvent<LifecycleEventDetails>) => void;
|
|
|
|
// Svelte5 Syntax
|
|
oninview_change?: (e: CustomEvent<ObserverEventDetails>) => void;
|
|
oninview_enter?: (e: CustomEvent<ObserverEventDetails>) => void;
|
|
oninview_leave?: (e: CustomEvent<ObserverEventDetails>) => void;
|
|
oninview_init?: (e: CustomEvent<LifecycleEventDetails>) => void;
|
|
}
|
|
}
|