Intersection Observer を使った侵入監視クラス。default export でシングルトンに使えるインスタンスを提供。

enter-observer.ts

export type EnterObserverListener = (
  entry: IntersectionObserverEntry
) => void | Promise<void>;

export interface EnterObserverEntry {
  listener: EnterObserverListener;
  once: boolean;
}

export class EnterObserver {
  protected observer: IntersectionObserver;
  protected entries: Map<Element, EnterObserverEntry>;

  constructor(options?: IntersectionObserverInit) {
    this.entries = new Map();
    this.observer = new IntersectionObserver(this.onEnter.bind(this), options);
  }

  protected onEnter(
    entries: IntersectionObserverEntry[],
    observer: IntersectionObserver
  ) {
    entries.forEach(entry => {
      const targetEntry = this.entries.get(entry.target);

      if (!targetEntry) return;

      targetEntry.listener(entry);

      if (targetEntry.once) {
        this.remove(entry.target);
      }
    });
  }

  add(el: Element, listener: EnterObserverListener, once?: boolean) {
    if (this.entries.has(el)) return;

    this.entries.set(el, {
      listener,
      once: once || false,
    });
    this.observer.observe(el);
  }

  remove(el: Element) {
    if (!this.entries.has(el)) return;

    this.entries.delete(el);
    this.observer.unobserve(el);
  }

  destroy() {
    this.observer.disconnect();
  }
}

export default new EnterObserver({
  root: null,
  rootMargin: '128px',
});