Svelte Intersection Observer Versions Save

Breaking Changes

• Drop support for bundled ESM/UMD; code is only distributed as Svelte files
• Remove IntersectionObserverProps or Entry TypeScript interfaces from IntersectionObserver.svelte.d.ts

Use the Svelte ComponentProps utility to extract component props.

import IntersectionObserver from "svelte-intersection-observer";
import type { ComponentProps } from "svelte";

type Props = ComponentProps<IntersectionObserver>;

Fixes

• element and root prop types should be null | HTMLElement to support TypeScript strict mode
• Add exports field to package.json

Fixes

• add exports field to package.json to resolve Vite development warnings (8b2f824, branch)

Fixes

• fix threshold prop type to be number | number[] (6992399, #70 by @kevinkace)

Features

• mark observer for garbage collection after disconnecting (b961e16)

Documentation

• make prop descriptions consistent with docs (5944a6b)

Refactoring

• omit redundant null from element and root types as HTMLElement is already nullable (41a3609)

This is a patch release to refresh the documentation published to NPM/Yarn.

Documentation

• add let: directive example
• update component prop descriptions
• use Svelte syntax highlighting for on:observe, on:intersect examples

Documentation

• update the "Once" example to include the "svelte-intersection-observer" import
• rename example svite to vite

Refactoring

• inline entry prop typedef
• remove @event, @slot artifacts used by sveld to generate initial TypeScript definitions

• improve TypeScript definitions for dispatched events
  • on:observe: event.detail.isIntersecting is a boolean
  • on:intersect: event.detail.isIntersecting can only be true

<IntersectionObserver
  on:observe={(e) => {
    console.log(e.detail.isIntersecting); // boolean
  }}
  on:intersect={(e) => {
    console.log(e.detail.isIntersecting); // true
  }}
/>

• use .svelte.d.ts as the extension for the component TypeScript definition

This is a patch release to refresh the documentation published to NPM/Yarn.

Documentation

• add description for basic usage
• add on:observe example
• explain difference between on:observe and on:intersect
• document IntersectionObserverEntry interface
• re-order prop table so that once and intersecting are more prominent

Features

• re-initialize observer if rootMargin changes (https://github.com/metonym/svelte-intersection-observer/pull/12, contributed by @dysfunc)