svelte-intersection-observer

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)

Fixes

• move intersection observer instantiation to onMount to work in hydration use cases (#13, contributed by @nosovk)

Features

• export observer prop (type IntersectionObserver)
• dispatch "intersect" event if the observed element isIntersecting the viewport

Features

• Add support for Server-Side Rendering (SSR)

Features

• Export intersecting prop

Fixes

• Remove observer from module context to allow multiple component instantiations (#7)
• Fix prop type for entry

Documentation

• Bind the intersecting prop in the demo / Svelte REPL, which is more concise than binding to entry

  <script>
    import IntersectionObserver from "svelte-intersection-observer";
  
    let element;
    let intersecting;
  </script>
  
  <header>
    <strong>Scroll down.</strong>
    <div>
      Element in view?
      <strong class:intersecting>{intersecting ? 'Yes' : 'No'}</strong>
    </div>
  </header>
  
  <IntersectionObserver {element} bind:intersecting>
    <div bind:this={element}>
      {#if intersecting}Element is in view{/if}
    </div>
  </IntersectionObserver>
  

Features

• Export entry (IntersectionObserverEntry) as a reactive prop

This allows for more concise code:

<IntersectionObserver {element} bind:entry>
  <div class="element" bind:this="{element}">
    {#if entry && entry.isIntersecting}
      Element is in view
    {/if}
  </div>
</IntersectionObserver>

• add TypeScript definitions