Svelte Intersection Observer Action

intersectionObserver.ts

import type { Action } from 'svelte/action';

interface IntersectionObserverParams {
  threshold?: number;
  root?: Element | Document | null;
  rootMargin?: string;
  visibilityToggle?: boolean;
}

export const observe: Action<HTMLElement, IntersectionObserverParams> = (node, params = {}) => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          if (params.visibilityToggle) {
            node.style.visibility = 'visible';
            node.classList.remove('opacity-0');
          }
          node.dispatchEvent(new CustomEvent('enterview'));
        } else {
          if (params.visibilityToggle) {
            node.style.visibility = 'hidden';
            node.classList.add('opacity-0');
          }
          node.dispatchEvent(new CustomEvent('exitview'));
        }
      });
    },
    {
      threshold: params.threshold ?? 0.1,
      root: params.root ?? null,
      rootMargin: params.rootMargin ?? '0px',
    }
  );

  observer.observe(node);

  return {
    destroy() {
      observer.disconnect();
    },
    update(newParams) {
      observer.disconnect();
      observer.observe(node);
    }
  };
};