@jhubbardsf/svelte-inview/dist/additional-svelte-jsx.d.ts

A Svelte action that monitors an element enters or leaves the viewport or a parent element. Performant and efficient thanks to using Intersection Observer under the hood.

// 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> {
    'on:inview_change'?: (event: CustomEvent<ObserverEventDetails>) => void;
    'on:inview_enter'?: (event: CustomEvent<ObserverEventDetails>) => void;
    'on:inview_leave'?: (event: CustomEvent<ObserverEventDetails>) => void;
    'on:inview_init'?: (event: CustomEvent<LifecycleEventDetails>) => void;
  }
}