Svelte Viewport Action

viewport.ts

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    let eventType: string;

    if (entry.isIntersecting) {
      eventType = 'viewportenter';
    } else {
      eventType = 'viewportleave';
    }

    entry.target.dispatchEvent(new CustomEvent(eventType));
  });
});

export default function viewport(element: Element) {
  observer.observe(element);

  return {
    destroy() {
      observer.unobserve(element);
    },
  };
}

// Usage:
//
// <div use:viewport on:viewportenter={...} on:viewportleave={...}>
//   ...
// </div>

// TypeScript extension:
declare namespace svelte.JSX {
  interface HTMLAttributes<T> {
    onviewportenter: () => void
    onviewportleave: () => void
  }
}