svelte-intersection-observer 1.2.0 → 2.1.0

package/README.md

@@ -1,13 +1,29 @@
 # svelte-intersection-observer
 
+<!-- HIDE_START -->
 [![NPM][npm]][npm-url]
+<!-- HIDE_END -->
 
 > Detect if an element is in the viewport using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
 
-<!-- REPO_URL -->
+Use it to lazy-load images, trigger scroll animations, implement infinite scroll, autoplay video when visible, track ad or analytics impressions, or detect when a user has scrolled to the end of a list.
+
+This zero-dependency library offers several ways to observe elements:
+
+- `IntersectionObserver`: component for observing a single element
+- `MultipleIntersectionObserver`: component for observing multiple elements (shared observer for better performance)
+- `intersect`: action for observing an element directly with `use:`
+- `intersectAttachment`: attachment for observing an element directly with `{@attach}` (Svelte 5.29+)
 
 Try it in the [Svelte REPL](https://svelte.dev/repl/8cd2327a580c4f429c71f7df999bd51d).
 
+## Compatibility
+
+| Package version | Svelte version    | Notes                                     |
+| :--------------- | :----------------- | :----------------------------------------- |
+| 1.x              | 3, 4, 5 (non-runes) | Uses `export let`, slots, and `on:` events |
+| 2.x              | 5 (runes mode only) | Uses `$props()`, snippets, and callback props |
+
 <!-- TOC -->
 
 ## Installation
@@ -39,8 +55,8 @@ Then, simply bind to the reactive `intersecting` prop to determine if the elemen
 <script>
   import IntersectionObserver from "svelte-intersection-observer";
 
-  let element;
-  let intersecting;
+  let element = $state();
+  let intersecting = $state(false);
 </script>
 
 <header class:intersecting>
@@ -52,6 +68,33 @@ Then, simply bind to the reactive `intersecting` prop to determine if the elemen
 </IntersectionObserver>
 ```
 
+### `children` snippet
+
+An alternative to binding to the `intersecting` prop is to use the `children` snippet, which receives `intersecting`, `entry`, and `observer`.
+
+In the following example, the "Hello world" element fades in when its containing element intersects the viewport.
+
+```svelte
+<script>
+  import IntersectionObserver from "svelte-intersection-observer";
+  import { fade } from "svelte/transition";
+
+  let node = $state();
+</script>
+
+<header></header>
+
+<IntersectionObserver element={node}>
+  {#snippet children({ intersecting })}
+    <div bind:this={node}>
+      {#if intersecting}
+        <div transition:fade={{ delay: 200 }}>Hello world</div>
+      {/if}
+    </div>
+  {/snippet}
+</IntersectionObserver>
+```
+
 ### Once
 
 Set `once` to `true` for the intersection event to occur only once. The `element` will be unobserved after the first intersection event occurs.
@@ -60,8 +103,8 @@ Set `once` to `true` for the intersection event to occur only once. The `element
 <script>
   import IntersectionObserver from "svelte-intersection-observer";
 
-  let elementOnce;
-  let intersectOnce;
+  let elementOnce = $state();
+  let intersectOnce = $state(false);
 </script>
 
 <header class:intersecting={intersectOnce}>
@@ -79,78 +122,55 @@ Set `once` to `true` for the intersection event to occur only once. The `element
 
 ### Pausing with `skip`
 
-Set `skip` to `true` to unobserve without disconnecting the underlying observer or losing `entry`/`intersecting` state — useful for pausing tracking on an off-screen carousel panel or a closed modal. Set `skip` back to `false` to resume; unlike `once`, this can be toggled back and forth. `MultipleIntersectionObserver` and the `intersect` action support the same `skip` option.
+Set `skip` to `true` to unobserve without disconnecting the underlying observer or losing `entry`/`intersecting` state. This is useful for pausing tracking on an off-screen carousel panel or a closed modal. Set `skip` back to `false` to resume; unlike `once`, this can be toggled back and forth. `MultipleIntersectionObserver` and the `intersect` action support the same `skip` option.
 
 ```svelte no-eval
 <script>
   import IntersectionObserver from "svelte-intersection-observer";
 
-  let elementSkip;
-  let paused = false;
+  let elementSkip = $state();
+  let paused = $state(false);
 </script>
 
-<button on:click={() => (paused = !paused)}>
+<button onclick={() => (paused = !paused)}>
   {paused ? "Resume" : "Pause"}
 </button>
 
-<IntersectionObserver element={elementSkip} skip={paused} let:intersecting>
-  <div bind:this={elementSkip}>{intersecting ? "In view" : "Not in view"}</div>
+<IntersectionObserver element={elementSkip} skip={paused}>
+  {#snippet children({ intersecting })}
+    <div bind:this={elementSkip}>{intersecting ? "In view" : "Not in view"}</div>
+  {/snippet}
 </IntersectionObserver>
 ```
 
-### `let:intersecting`
-
-An alternative to binding to the `intersecting` prop is to use the `let:` directive.
+### `onobserve` callback prop
 
-In the following example, the "Hello world" element will fade in when its containing element intersects the viewport.
-
-```svelte
-<script>
-  import IntersectionObserver from "svelte-intersection-observer";
-  import { fade } from "svelte/transition";
-
-  let node;
-</script>
-
-<header></header>
-
-<IntersectionObserver element={node} let:intersecting>
-  <div bind:this={node}>
-    {#if intersecting}
-      <div transition:fade={{ delay: 200 }}>Hello world</div>
-    {/if}
-  </div>
-</IntersectionObserver>
-```
-
-### `on:observe` event
-
-The `observe` event is dispatched when the element is first observed and also whenever an intersection event occurs.
+`onobserve` is called when the element is first observed and also whenever an intersection event occurs.
 
 ```svelte no-eval
 <IntersectionObserver
   {element}
-  on:observe={(e) => {
-    console.log(e.detail); // IntersectionObserverEntry
-    console.log(e.detail.isIntersecting); // true | false
+  onobserve={(entry) => {
+    console.log(entry); // IntersectionObserverEntry
+    console.log(entry.isIntersecting); // true | false
   }}
 >
   <div bind:this={element}>Hello world</div>
 </IntersectionObserver>
 ```
 
-### `on:intersect` event
+### `onintersect` callback prop
 
-As an alternative to binding the `intersecting` prop, you can listen to the `intersect` event that is dispatched if the observed element is intersecting the viewport.
+As an alternative to binding the `intersecting` prop, you can pass an `onintersect` callback that is called if the observed element is intersecting the viewport.
 
-**Note**: Compared to `on:observe`, `on:intersect` is dispatched only when the element is _intersecting the viewport_. In other words, `e.detail.isIntersecting` will only be `true`.
+**Note**: Compared to `onobserve`, `onintersect` is called only when the element is _intersecting the viewport_. In other words, `entry.isIntersecting` will only be `true`.
 
 ```svelte no-eval
 <IntersectionObserver
   {element}
-  on:intersect={(e) => {
-    console.log(e.detail); // IntersectionObserverEntry
-    console.log(e.detail.isIntersecting); // true
+  onintersect={(entry) => {
+    console.log(entry); // IntersectionObserverEntry
+    console.log(entry.isIntersecting); // true
   }}
 >
   <div bind:this={element}>Hello world</div>
@@ -167,9 +187,9 @@ To detect when a user has scrolled to the end of a scrollable container, place a
 <script>
   import IntersectionObserver from "svelte-intersection-observer";
 
-  let container;
-  let sentinel;
-  let reachedEnd;
+  let container = $state();
+  let sentinel = $state();
+  let reachedEnd = $state(false);
 </script>
 
 <header class:intersecting={reachedEnd}>
@@ -191,15 +211,49 @@ To detect when a user has scrolled to the end of a scrollable container, place a
 </div>
 ```
 
+### Scrolling to a conditionally revealed element
+
+Keep the `bind:this` element outside the `{#if intersecting}` block, and only gate the animated content inside it. The bound element then stays in the DOM, so you can call `scrollIntoView()` on it whenever you want, whether or not its reveal animation has played yet.
+
+```svelte
+<script>
+  import IntersectionObserver from "svelte-intersection-observer";
+  import { fly } from "svelte/transition";
+
+  let revealNode = $state();
+  let revealIntersecting = $state(false);
+</script>
+
+<header class:intersecting={revealIntersecting}>
+  <button
+    onclick={() => {
+      revealNode.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }}
+  >
+    Scroll to section
+  </button>
+</header>
+
+<IntersectionObserver element={revealNode} once bind:intersecting={revealIntersecting}>
+  <div bind:this={revealNode}>
+    {#if revealIntersecting}
+      <section transition:fly={{ y: 50, delay: 200, duration: 300 }}>
+        Hello world
+      </section>
+    {/if}
+  </div>
+</IntersectionObserver>
+```
+
 ### `use:intersect` action
 
-As an alternative to the `IntersectionObserver` component, use the `intersect` action to observe an element directly with `use:`, without a `bind:this` reference or wrapper markup. Listen for `on:observe`/`on:intersect` on the observed element itself.
+As an alternative to the `IntersectionObserver` component, use the `intersect` action to observe an element directly with `use:`, without a `bind:this` reference or wrapper markup. Listen for `onobserve`/`onintersect` on the observed element itself.
 
 ```svelte
 <script>
   import { intersect } from "svelte-intersection-observer";
 
-  let actionIntersecting = false;
+  let actionIntersecting = $state(false);
 </script>
 
 <header class:intersecting={actionIntersecting}>
@@ -208,92 +262,123 @@ As an alternative to the `IntersectionObserver` component, use the `intersect` a
 
 <div
   use:intersect={{ once: true }}
-  on:observe={(e) => (actionIntersecting = e.detail.isIntersecting)}
+  onobserve={(e) => (actionIntersecting = e.detail.isIntersecting)}
 >
   Hello world
 </div>
 ```
 
-Options passed to `use:intersect` are reactive — updating `root`, `rootMargin`, or `threshold` re-initializes the underlying observer. Updating `skip` toggles observing on the existing observer without re-initializing it.
+Options passed to `use:intersect` are reactive: updating `root`, `rootMargin`, or `threshold` re-initializes the underlying observer. Updating `skip` toggles observing on the existing observer without re-initializing it.
 
-### Multiple elements
+### `intersectAttachment` attachment
+
+As of Svelte 5.29, [attachments](https://svelte.dev/docs/svelte/svelte-attachments) are the preferred replacement for actions. `intersectAttachment` wraps the `intersect` action with `svelte/attachments`'s `fromAction`, reusing the same observer logic but plugging into `{@attach ...}` instead of `use:`.
+
+Attachments have a few architectural advantages over actions:
+
+- No separate `update()` lifecycle method; they rerun reactively like a `$effect`
+- Just plain functions, so they're easier to compose and generate dynamically
+- Can be forwarded through components as ordinary props, unlike actions
+
+```svelte
+<script>
+  import { intersectAttachment } from "svelte-intersection-observer";
+
+  let attachmentIntersecting = $state(false);
+</script>
+
+<header class:intersecting={attachmentIntersecting}>
+  {attachmentIntersecting ? "Element is in view" : "Element is not in view"}
+</header>
+
+<div
+  {@attach intersectAttachment(() => ({ once: true }))}
+  onobserve={(e) => (attachmentIntersecting = e.detail.isIntersecting)}
+>
+  Hello world
+</div>
+```
 
-For performance, use `MultipleIntersectionObserver` to observe multiple elements.
+**Note**: unlike `use:intersect`, which takes the options object directly, `intersectAttachment` takes a function that _returns_ the options object (this is how `fromAction` tracks reactive dependencies). `intersect` remains fully supported; use whichever fits your codebase.
 
-This avoids instantiating a new observer for every element.
+### Multiple elements
+
+For performance, use `MultipleIntersectionObserver` to observe multiple elements with a single shared observer instead of instantiating a new one for every element.
 
 ```svelte
 <script>
   import { MultipleIntersectionObserver } from "svelte-intersection-observer";
 
-  let ref1;
-  let ref2;
+  let ref1 = $state();
+  let ref2 = $state();
 
-  $: elements = [ref1, ref2];
+  let elements = $derived([ref1, ref2]);
 </script>
 
-<MultipleIntersectionObserver {elements} let:elementIntersections>
-  <header>
-    <div class:intersecting={elementIntersections.get(ref1)}>
-      Item 1: {elementIntersections.get(ref1) ? "✓" : "✗"}
-    </div>
-    <div class:intersecting={elementIntersections.get(ref2)}>
-      Item 2: {elementIntersections.get(ref2) ? "✓" : "✗"}
-    </div>
-  </header>
+<MultipleIntersectionObserver {elements}>
+  {#snippet children({ elementIntersections })}
+    <header>
+      <div class:intersecting={elementIntersections.get(ref1)}>
+        Item 1: {elementIntersections.get(ref1) ? "✓" : "✗"}
+      </div>
+      <div class:intersecting={elementIntersections.get(ref2)}>
+        Item 2: {elementIntersections.get(ref2) ? "✓" : "✗"}
+      </div>
+    </header>
 
-  <div bind:this={ref1}>Item 1</div>
-  <div bind:this={ref2}>Item 2</div>
+    <div bind:this={ref1}>Item 1</div>
+    <div bind:this={ref2}>Item 2</div>
+  {/snippet}
 </MultipleIntersectionObserver>
 ```
 
 ### Using with `#each`
 
-`MultipleIntersectionObserver` also handles a dynamic, `#each`-driven list — give every item its own slot in an array/object instead of one shared variable.
+`MultipleIntersectionObserver` also handles a dynamic, `#each`-driven list: give every item its own slot in an array/object instead of one shared variable.
 
 ```svelte
 <script>
   import { MultipleIntersectionObserver } from "svelte-intersection-observer";
 
-  let items = [
-    { id: 1, text: "Item 1" },
-    { id: 2, text: "Item 2" },
-    { id: 3, text: "Item 3" },
-  ];
+  let items = Array.from({ length: 10 }, (_, i) => ({
+    id: i + 1,
+    text: `Item ${i + 1}`,
+  }));
 
-  let refs = [];
-  let itemsContainer;
+  let refs = $state([]);
+  let itemsContainer = $state();
 
-  $: itemElements = refs;
+  let itemElements = $derived(refs);
 </script>
 
-<MultipleIntersectionObserver
-  elements={itemElements}
-  root={itemsContainer}
-  let:elementIntersections
->
-  <header>
-    {#each items as item, i (item.id)}
-      <div class:intersecting={elementIntersections.get(refs[i])}>
-        {item.text}: {elementIntersections.get(refs[i]) ? "✓" : "✗"}
-      </div>
-    {/each}
-  </header>
-
-  <div bind:this={itemsContainer} style="height: 150px; overflow-y: auto;">
-    {#each items as item, i (item.id)}
-      <div
-        bind:this={refs[i]}
-        style="height: 100px; display: flex; align-items: center;"
-      >
-        {item.text}
-      </div>
-    {/each}
-  </div>
+<MultipleIntersectionObserver elements={itemElements} root={itemsContainer}>
+  {#snippet children({ elementIntersections })}
+    <header>
+      {#each items as item, i (item.id)}
+        <div class:intersecting={elementIntersections.get(refs[i])}>
+          {item.text}: {elementIntersections.get(refs[i]) ? "✓" : "✗"}
+        </div>
+      {/each}
+    </header>
+
+    <div
+      bind:this={itemsContainer}
+      style="height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem;"
+    >
+      {#each items as item, i (item.id)}
+        <div
+          bind:this={refs[i]}
+          style="height: 100px; display: flex; align-items: center; flex-shrink: 0;"
+        >
+          {item.text}
+        </div>
+      {/each}
+    </div>
+  {/snippet}
 </MultipleIntersectionObserver>
 ```
 
-As with the scroll-to-end example, `root` must be an element that scrolls on its own — here, `itemsContainer` has an explicit `height` and `overflow-y: auto`.
+As with the scroll-to-end example, `root` must be an element that scrolls on its own; here, `itemsContainer` has an explicit `height` and `overflow-y: auto`.
 
 **Avoid** using the single-element `IntersectionObserver` component inside an `#each` block with one variable shared across iterations (e.g. `let node;` declared outside the loop and bound via `bind:this={node}` inside it). Every iteration overwrites the same `node`, so each observer instance keeps re-observing a moving target, which can produce an infinite update loop. Use `MultipleIntersectionObserver` with a per-item ref, as shown above, instead.
 
@@ -315,16 +400,16 @@ As with the scroll-to-end example, `root` must be an element that scrolls on its
 | observer     | `IntersectionObserver` instance                             | `null` or [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)           | `null`        |
 | skip         | Pause observing without losing `entry`/`intersecting` state | `boolean`                                                                                                           | `false`       |
 
-**Note**: the observed `element` must render with a non-zero width and height for `threshold` values greater than `0` to have any effect — this is a constraint of the underlying [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API), not something this component controls.
+**Note**: the observed `element` must render with a non-zero width and height for `threshold` values greater than `0` to have any effect. This is a constraint of the underlying [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API), not something this component controls.
 
-#### Dispatched events
+#### Callback props
 
-- **on:observe**: fired when the element is first observed or whenever an intersection change occurs
-- **on:intersect**: fired when the element is intersecting the viewport
+- **onobserve**: called when the element is first observed or whenever an intersection change occurs
+- **onintersect**: called when the element is intersecting the viewport
 
-The `e.detail` dispatched by the `observe` and `intersect` events is an [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) interface.
+Both callbacks are called with an [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).
 
-#### Slot props
+#### `children` snippet props
 
 | Name         | Type                                                                                                                |
 | :----------- | :------------------------------------------------------------------------------------------------------------------ |
@@ -348,12 +433,12 @@ The `e.detail` dispatched by the `observe` and `intersect` events is an [`Inters
 | observer             | `IntersectionObserver` instance                       | `null` or [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)                               | `null`        |
 | skip                 | Pause observing all elements without losing state     | `boolean`                                                                                                                               | `false`       |
 
-#### Dispatched events
+#### Callback props
 
-- **on:observe**: fired when an element is first observed or whenever an intersection change occurs
-- **on:intersect**: fired when an element is intersecting the viewport
+- **onobserve**: called when an element is first observed or whenever an intersection change occurs
+- **onintersect**: called when an element is intersecting the viewport
 
-The `e.detail` for both events includes:
+Both callbacks are called with:
 
 ```ts
 {
@@ -362,7 +447,7 @@ The `e.detail` for both events includes:
 }
 ```
 
-#### Slot props
+#### `children` snippet props
 
 | Name                 | Type                                                                                                                                    |
 | :------------------- | :-------------------------------------------------------------------------------------------------------------------------------------- |
@@ -370,22 +455,24 @@ The `e.detail` for both events includes:
 | elementIntersections | `Map<HTMLElement \| null, boolean>`                                                                                                     |
 | elementEntries       | `Map<HTMLElement \| null,` [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)`>` |
 
-### `intersect` action
+### `intersect` action / `intersectAttachment` attachment
+
+`intersectAttachment` is a thin wrapper around the `intersect` action (see [above](#intersectattachment-attachment)), so both share the same options and dispatched events.
 
 #### Options
 
-| Name       | Description                                                  | Type                                                                | Default value |
-| :--------- | :------------------------------------------------------------ | :------------------------------------------------------------------- | :------------- |
-| root       | Containing element                                            | `null` or `HTMLElement`                                             | `null`         |
-| rootMargin | Margin offset of the containing element                       | `string`                                                            | `"0px"`        |
-| threshold  | Percentage of element visibility to trigger an event          | `number` between 0 and 1, or an array of `number`s between 0 and 1 | `0`            |
-| once       | Unobserve the element after the first intersection event      | `boolean`                                                           | `false`        |
-| skip       | Pause observing without disconnecting the observer            | `boolean`                                                           | `false`        |
+| Name       | Description                                              | Type                                                               | Default value |
+| :--------- | :------------------------------------------------------- | :----------------------------------------------------------------- | :------------ |
+| root       | Containing element                                       | `null` or `HTMLElement`                                            | `null`        |
+| rootMargin | Margin offset of the containing element                  | `string`                                                           | `"0px"`       |
+| threshold  | Percentage of element visibility to trigger an event     | `number` between 0 and 1, or an array of `number`s between 0 and 1 | `0`           |
+| once       | Unobserve the element after the first intersection event | `boolean`                                                          | `false`       |
+| skip       | Pause observing without disconnecting the observer       | `boolean`                                                          | `false`       |
 
 #### Dispatched events
 
-- **on:observe**: fired on the element when it is first observed or whenever an intersection change occurs
-- **on:intersect**: fired on the element when it is intersecting the viewport
+- **onobserve**: fired on the element when it is first observed or whenever an intersection change occurs
+- **onintersect**: fired on the element when it is intersecting the viewport
 
 The `e.detail` dispatched by the `observe` and `intersect` events is an [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) interface.
 
@@ -438,13 +525,5 @@ interface IntersectionObserverEntry {
 
 </details>
 
-## Changelog
-
-[Changelog](CHANGELOG.md)
-
-## License
-
-[MIT](LICENSE)
-
 [npm]: https://img.shields.io/npm/v/svelte-intersection-observer.svg?color=%23ff3e00&style=for-the-badge
 [npm-url]: https://npmjs.com/package/svelte-intersection-observer

package/index.d.ts

@@ -1,4 +1,4 @@
 export { default } from "./IntersectionObserver.svelte";
-export type { IntersectActionOptions } from "./intersect.js";
-export { intersect } from "./intersect.js";
+export type { IntersectActionOptions } from "./intersect.svelte.js";
+export { intersect, intersectAttachment } from "./intersect.svelte.js";
 export { default as MultipleIntersectionObserver } from "./MultipleIntersectionObserver.svelte";

package/index.js

@@ -1,3 +1,3 @@
 export { default } from "./IntersectionObserver.svelte";
-export { intersect } from "./intersect.js";
+export { intersect, intersectAttachment } from "./intersect.svelte.js";
 export { default as MultipleIntersectionObserver } from "./MultipleIntersectionObserver.svelte";

package/{intersect.d.ts → intersect.svelte.d.ts}

@@ -1,4 +1,5 @@
 import type { Action } from "svelte/action";
+import type { Attachment } from "svelte/attachments";
 
 export interface IntersectActionOptions {
   /**
@@ -39,15 +40,32 @@ export interface IntersectActionOptions {
 /**
  * Svelte action that observes the element with the Intersection Observer API.
  * Dispatches `observe` (on every change) and `intersect` (on entering the
- * viewport) `CustomEvent`s on the element — listen with `on:observe`/`on:intersect`.
+ * viewport) `CustomEvent`s on the element — listen with `onobserve`/`onintersect`.
  */
 export const intersect: Action<
   HTMLElement,
   IntersectActionOptions | undefined,
   {
-    "on:observe"?: (event: CustomEvent<IntersectionObserverEntry>) => void;
-    "on:intersect"?: (
+    onobserve?: (event: CustomEvent<IntersectionObserverEntry>) => void;
+    onintersect?: (
       event: CustomEvent<IntersectionObserverEntry & { isIntersecting: true }>,
     ) => void;
   }
 >;
+
+/**
+ * Svelte attachment that observes the element with the Intersection Observer
+ * API. Equivalent to `intersect`, for use with `{@attach}` instead of `use:`.
+ */
+export function intersectAttachment(
+  getOptions?: () => IntersectActionOptions,
+): Attachment<HTMLElement>;
+
+declare module "svelte/elements" {
+  export interface HTMLAttributes<T> {
+    onobserve?: (event: CustomEvent<IntersectionObserverEntry>) => void;
+    onintersect?: (
+      event: CustomEvent<IntersectionObserverEntry & { isIntersecting: true }>,
+    ) => void;
+  }
+}

package/{intersect.js → intersect.svelte.js}

@@ -1,9 +1,11 @@
+import { fromAction } from "svelte/attachments";
+
 /**
  * Svelte action that observes `node` with the Intersection Observer API.
  * Dispatches `observe` (on every change) and `intersect` (on entering the
- * viewport) `CustomEvent`s on `node` — listen with `on:observe`/`on:intersect`.
+ * viewport) `CustomEvent`s on `node` — listen with `onobserve`/`onintersect`.
  * @param {HTMLElement} node
- * @param {import("./intersect.d.ts").IntersectActionOptions} [options]
+ * @param {import("./intersect.svelte.d.ts").IntersectActionOptions} [options]
  */
 export function intersect(node, options = {}) {
   let {
@@ -36,7 +38,7 @@ export function intersect(node, options = {}) {
   if (!skip) observer.observe(node);
 
   return {
-    /** @param {import("./intersect.d.ts").IntersectActionOptions} [newOptions] */
+    /** @param {import("./intersect.svelte.d.ts").IntersectActionOptions} [newOptions] */
     update(newOptions = {}) {
       once = newOptions.once ?? false;
 
@@ -67,3 +69,13 @@ export function intersect(node, options = {}) {
     },
   };
 }
+
+/**
+ * Svelte attachment that observes the element with the Intersection Observer
+ * API. Equivalent to the `intersect` action, for use with `{@attach}` instead
+ * of `use:`. Wraps `intersect` via `svelte/attachments`'s `fromAction`.
+ * @param {() => import("./intersect.svelte.d.ts").IntersectActionOptions} [getOptions]
+ */
+export function intersectAttachment(getOptions = () => ({})) {
+  return fromAction(intersect, getOptions);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-intersection-observer",
-  "version": "1.2.0",
+  "version": "2.1.0",
   "license": "MIT",
   "description": "Detect if an element is in the viewport using the Intersection Observer API",
   "author": "Eric Liu (https://github.com/metonym)",