svelte-intersection-observer 1.2.0 → 2.1.0

package/IntersectionObserver.svelte

@@ -1,74 +1,42 @@
 <script>
-  /**
-   * The HTML Element to observe.
-   * @type {null | HTMLElement}
-   */
-  export let element = null;
-
-  /**
-   * Set to `true` to unobserve the element
-   * after it intersects the viewport.
-   * @type {boolean}
-   */
-  export let once = false;
-
-  /**
-   * `true` if the observed element
-   * is intersecting the viewport.
-   */
-  export let intersecting = false;
-
-  /**
-   * Specify the containing element.
-   * Defaults to the browser viewport.
-   * @type {null | HTMLElement}
-   */
-  export let root = null;
-
-  /** Margin offset of the containing element. */
-  export let rootMargin = "0px";
-
-  /**
-   * Percentage of element visibility to trigger an event.
-   * Value must be between 0 and 1.
-   */
-  export let threshold = 0;
-
-  /**
-   * Observed element metadata.
-   * @type {null | IntersectionObserverEntry}
-   */
-  export let entry = null;
-
-  /**
-   * `IntersectionObserver` instance.
-   * @type {null | IntersectionObserver}
-   */
-  export let observer = null;
+  import { untrack } from "svelte";
 
   /**
-   * Set to `true` to pause observing without disconnecting the
-   * observer or losing `entry`/`intersecting` state. Set back to
-   * `false` to resume.
-   * @type {boolean}
+   * @typedef {Object} Props
+   * @property {null | HTMLElement} [element] The HTML Element to observe.
+   * @property {boolean} [once] Set to `true` to unobserve the element after it intersects the viewport.
+   * @property {boolean} [intersecting] `true` if the observed element is intersecting the viewport.
+   * @property {null | HTMLElement} [root] Specify the containing element. Defaults to the browser viewport.
+   * @property {string} [rootMargin] Margin offset of the containing element.
+   * @property {number | number[]} [threshold] Percentage of element visibility to trigger an event. Value must be between 0 and 1.
+   * @property {null | IntersectionObserverEntry} [entry] Observed element metadata.
+   * @property {null | IntersectionObserver} [observer] `IntersectionObserver` instance.
+   * @property {boolean} [skip] Set to `true` to pause observing without disconnecting the observer or losing `entry`/`intersecting` state. Set back to `false` to resume.
+   * @property {(entry: IntersectionObserverEntry) => void} [onobserve] Called when the element is first observed and also whenever an intersection event occurs.
+   * @property {(entry: IntersectionObserverEntry & { isIntersecting: true }) => void} [onintersect] Called only when the observed element is intersecting the viewport.
+   * @property {import("svelte").Snippet<[{ intersecting: boolean, entry: null | IntersectionObserverEntry, observer: null | IntersectionObserver }]>} [children]
    */
-  export let skip = false;
-
-  import { afterUpdate, createEventDispatcher, onMount, tick } from "svelte";
-
-  const dispatch = createEventDispatcher();
-
-  let prevRootMargin = rootMargin;
 
-  let prevThreshold = threshold;
-
-  /** @type {null | HTMLElement} */
-  let prevRoot = root;
+  /** @type {Props} */
+  let {
+    element = null,
+    once = false,
+    intersecting = $bindable(false),
+    root = null,
+    rootMargin = "0px",
+    threshold = 0,
+    entry = $bindable(null),
+    observer = $bindable(null),
+    skip = false,
+    onobserve,
+    onintersect,
+    children,
+  } = $props();
 
   /** @type {null | HTMLElement} */
   let prevElement = null;
 
-  let prevSkip = skip;
+  let prevSkip = untrack(() => skip);
 
   const initialize = () => {
     observer = new IntersectionObserver(
@@ -77,10 +45,14 @@
           entry = _entry;
           intersecting = _entry.isIntersecting;
 
-          dispatch("observe", entry);
+          onobserve?.(_entry);
 
           if (_entry.isIntersecting) {
-            dispatch("intersect", entry);
+            onintersect?.(
+              /** @type {IntersectionObserverEntry & { isIntersecting: true }} */ (
+                _entry
+              ),
+            );
 
             if (element && once) observer?.unobserve(element);
           }
@@ -90,53 +62,34 @@
     );
   };
 
-  onMount(() => {
+  $effect(() => {
+    prevElement = null;
     initialize();
 
     return () => {
-      if (observer) {
-        observer.disconnect();
-        observer = null;
-      }
+      observer?.disconnect();
+      observer = null;
     };
   });
 
-  afterUpdate(async () => {
-    await tick();
-
-    if (element !== null && element !== prevElement) {
-      if (!skip) observer?.observe(element);
+  $effect(() => {
+    const target = element;
+    const isSkipped = skip;
+    const activeObserver = observer;
 
-      if (prevElement !== null) observer?.unobserve(prevElement);
-      prevElement = element;
+    if (target !== null && target !== prevElement) {
+      if (!isSkipped) activeObserver?.observe(target);
+      if (prevElement !== null) activeObserver?.unobserve(prevElement);
+      prevElement = target;
     }
 
-    if (skip !== prevSkip && element !== null) {
-      if (skip) observer?.unobserve(element);
-      else observer?.observe(element);
-    }
-
-    if (
-      rootMargin !== prevRootMargin ||
-      threshold !== prevThreshold ||
-      root !== prevRoot
-    ) {
-      observer?.disconnect();
-      initialize();
-
-      if (element !== null && !skip) observer?.observe(element);
-      prevElement = element;
+    if (isSkipped !== prevSkip && target !== null) {
+      if (isSkipped) activeObserver?.unobserve(target);
+      else activeObserver?.observe(target);
     }
 
-    prevRootMargin = rootMargin;
-    prevThreshold = threshold;
-    prevRoot = root;
-    prevSkip = skip;
+    prevSkip = isSkipped;
   });
 </script>
 
-<slot
-  {intersecting}
-  {entry}
-  {observer}
-/>
+{@render children?.({ intersecting, entry, observer })}

package/IntersectionObserver.svelte.d.ts

@@ -1,87 +1,95 @@
-import type { SvelteComponentTyped } from "svelte";
+import type { Component, Snippet } from "svelte";
 
-export default class extends SvelteComponentTyped<
-  {
-    /**
-     * The HTML Element to observe.
-     * @default null
-     */
-    element?: null | HTMLElement;
+export interface IntersectionObserverProps {
+  /**
+   * The HTML Element to observe.
+   * @default null
+   */
+  element?: null | HTMLElement;
 
-    /**
-     * Set to `true` to unobserve the element
-     * after it intersects the viewport.
-     * @default false
-     */
-    once?: boolean;
+  /**
+   * Set to `true` to unobserve the element
+   * after it intersects the viewport.
+   * @default false
+   */
+  once?: boolean;
 
-    /**
-     * `true` if the observed element
-     * is intersecting the viewport.
-     * @default false
-     */
-    intersecting?: boolean;
+  /**
+   * `true` if the observed element
+   * is intersecting the viewport.
+   * @default false
+   */
+  intersecting?: boolean;
 
-    /**
-     * Specify the containing element.
-     * Defaults to the browser viewport.
-     * @default null
-     */
-    root?: null | HTMLElement;
+  /**
+   * Specify the containing element.
+   * Defaults to the browser viewport.
+   * @default null
+   */
+  root?: null | HTMLElement;
 
-    /**
-     * Margin offset of the containing element.
-     * @default "0px"
-     */
-    rootMargin?: string;
+  /**
+   * Margin offset of the containing element.
+   * @default "0px"
+   */
+  rootMargin?: string;
 
-    /**
-     * Percentage of element visibility to trigger an event.
-     * Value must be a number between 0 and 1, or an array of numbers between 0 and 1.
-     * @default 0
-     */
-    threshold?: number | number[];
+  /**
+   * Percentage of element visibility to trigger an event.
+   * Value must be a number between 0 and 1, or an array of numbers between 0 and 1.
+   * @default 0
+   */
+  threshold?: number | number[];
 
-    /**
-     * Observed element metadata.
-     * @default null
-     */
-    entry?: null | IntersectionObserverEntry;
+  /**
+   * Observed element metadata.
+   * @default null
+   */
+  entry?: null | IntersectionObserverEntry;
 
-    /**
-     * `IntersectionObserver` instance.
-     * @default null
-     */
-    observer?: null | IntersectionObserver;
+  /**
+   * `IntersectionObserver` instance.
+   * @default null
+   */
+  observer?: null | IntersectionObserver;
 
-    /**
-     * Set to `true` to pause observing without disconnecting the
-     * observer or losing `entry`/`intersecting` state. Set back to
-     * `false` to resume.
-     * @default false
-     */
-    skip?: boolean;
-  },
-  {
-    /**
-     * Dispatched when the element is first observed
-     * and also whenever an intersection event occurs.
-     */
-    observe: CustomEvent<IntersectionObserverEntry>;
+  /**
+   * Set to `true` to pause observing without disconnecting the
+   * observer or losing `entry`/`intersecting` state. Set back to
+   * `false` to resume.
+   * @default false
+   */
+  skip?: boolean;
 
-    /**
-     * Dispatched only when the element is intersecting the viewport.
-     * `event.detail.isIntersecting` will only be `true`
-     */
-    intersect: CustomEvent<
-      IntersectionObserverEntry & { isIntersecting: true }
-    >;
-  },
-  {
-    default: {
-      intersecting: boolean;
-      entry: null | IntersectionObserverEntry;
-      observer: IntersectionObserver;
-    };
-  }
-> {}
+  /**
+   * Called when the element is first observed
+   * and also whenever an intersection event occurs.
+   */
+  onobserve?: (entry: IntersectionObserverEntry) => void;
+
+  /**
+   * Called only when the element is intersecting the viewport.
+   * `entry.isIntersecting` will always be `true`.
+   */
+  onintersect?: (
+    entry: IntersectionObserverEntry & { isIntersecting: true },
+  ) => void;
+
+  children?: Snippet<
+    [
+      {
+        intersecting: boolean;
+        entry: null | IntersectionObserverEntry;
+        observer: null | IntersectionObserver;
+      },
+    ]
+  >;
+}
+
+declare const IntersectionObserverComponent: Component<
+  IntersectionObserverProps,
+  Record<string, never>,
+  "intersecting" | "entry" | "observer"
+>;
+
+export default IntersectionObserverComponent;

package/MultipleIntersectionObserver.svelte

@@ -1,75 +1,42 @@
 <script>
-  /**
-   * Array of HTML Elements to observe.
-   * Use this for better performance when observing multiple elements.
-   * @type {(HTMLElement | null)[]}
-   */
-  export let elements = [];
-
-  /**
-   * Set to `true` to unobserve the element
-   * after it intersects the viewport.
-   * @type {boolean}
-   */
-  export let once = false;
-
-  /**
-   * Specify the containing element.
-   * Defaults to the browser viewport.
-   * @type {null | HTMLElement}
-   */
-  export let root = null;
-
-  /** Margin offset of the containing element. */
-  export let rootMargin = "0px";
+  import { untrack } from "svelte";
 
   /**
-   * Percentage of element visibility to trigger an event.
-   * Value must be between 0 and 1.
+   * @typedef {Object} Props
+   * @property {(HTMLElement | null)[]} [elements] Array of HTML Elements to observe. Use this for better performance when observing multiple elements.
+   * @property {boolean} [once] Set to `true` to unobserve the element after it intersects the viewport.
+   * @property {null | HTMLElement} [root] Specify the containing element. Defaults to the browser viewport.
+   * @property {string} [rootMargin] Margin offset of the containing element.
+   * @property {number | number[]} [threshold] Percentage of element visibility to trigger an event. Value must be between 0 and 1.
+   * @property {Map<HTMLElement | null, boolean>} [elementIntersections] Map of element to its intersection state.
+   * @property {Map<HTMLElement | null, IntersectionObserverEntry>} [elementEntries] Map of element to its latest entry.
+   * @property {null | IntersectionObserver} [observer] `IntersectionObserver` instance.
+   * @property {boolean} [skip] Set to `true` to pause observing all elements without disconnecting the observer or losing `elementIntersections`/`elementEntries` state. Set back to `false` to resume.
+   * @property {(detail: { entry: IntersectionObserverEntry, target: HTMLElement }) => void} [onobserve] Called when an element is first observed and also whenever an intersection event occurs.
+   * @property {(detail: { entry: IntersectionObserverEntry & { isIntersecting: true }, target: HTMLElement }) => void} [onintersect] Called only when an element is intersecting the viewport.
+   * @property {import("svelte").Snippet<[{ observer: null | IntersectionObserver, elementIntersections: Map<HTMLElement | null, boolean>, elementEntries: Map<HTMLElement | null, IntersectionObserverEntry> }]>} [children]
    */
-  export let threshold = 0;
 
-  /**
-   * Map of element to its intersection state.
-   * @type {Map<HTMLElement | null, boolean>}
-   */
-  export let elementIntersections = new Map();
-
-  /**
-   * Map of element to its latest entry.
-   * @type {Map<HTMLElement | null, IntersectionObserverEntry>}
-   */
-  export let elementEntries = new Map();
-
-  /**
-   * `IntersectionObserver` instance.
-   * @type {null | IntersectionObserver}
-   */
-  export let observer = null;
-
-  /**
-   * Set to `true` to pause observing all elements without disconnecting
-   * the observer or losing `elementIntersections`/`elementEntries` state.
-   * Set back to `false` to resume.
-   * @type {boolean}
-   */
-  export let skip = false;
-
-  import { afterUpdate, createEventDispatcher, onMount, tick } from "svelte";
-
-  const dispatch = createEventDispatcher();
-
-  let prevRootMargin = rootMargin;
-
-  let prevThreshold = threshold;
-
-  /** @type {null | HTMLElement} */
-  let prevRoot = root;
+  /** @type {Props} */
+  let {
+    elements = [],
+    once = false,
+    root = null,
+    rootMargin = "0px",
+    threshold = 0,
+    elementIntersections = $bindable(new Map()),
+    elementEntries = $bindable(new Map()),
+    observer = $bindable(null),
+    skip = false,
+    onobserve,
+    onintersect,
+    children,
+  } = $props();
 
   /** @type {(HTMLElement | null)[]} */
   let prevElements = [];
 
-  let prevSkip = skip;
+  let prevSkip = untrack(() => skip);
 
   const initialize = () => {
     observer = new IntersectionObserver(
@@ -80,10 +47,16 @@
           elementIntersections.set(target, _entry.isIntersecting);
           elementEntries.set(target, _entry);
 
-          dispatch("observe", { entry: _entry, target });
+          onobserve?.({ entry: _entry, target });
 
           if (_entry.isIntersecting) {
-            dispatch("intersect", { entry: _entry, target });
+            onintersect?.({
+              entry:
+                /** @type {IntersectionObserverEntry & { isIntersecting: true }} */ (
+                  _entry
+                ),
+              target,
+            });
             if (once) observer?.unobserve(target);
           }
         }
@@ -96,73 +69,53 @@
     );
   };
 
-  onMount(() => {
+  $effect(() => {
+    prevElements = [];
     initialize();
 
     return () => {
-      if (observer) {
-        observer.disconnect();
-        observer = null;
-      }
+      observer?.disconnect();
+      observer = null;
     };
   });
 
-  afterUpdate(async () => {
-    await tick();
+  $effect(() => {
+    const currentElements = elements;
+    const isSkipped = skip;
+    const activeObserver = observer;
 
-    if (elements.length > 0) {
-      const newElements = elements.filter(
+    if (currentElements.length > 0) {
+      const newElements = currentElements.filter(
         (el) => el && !prevElements.includes(el),
       );
-      if (!skip) {
+
+      if (!isSkipped) {
         for (const el of newElements) {
-          if (el) observer?.observe(el);
+          if (el) activeObserver?.observe(el);
         }
       }
 
       const removedElements = prevElements.filter(
-        (el) => el && !elements.includes(el),
+        (el) => el && !currentElements.includes(el),
       );
+
       for (const el of removedElements) {
-        if (el) observer?.unobserve(el);
+        if (el) activeObserver?.unobserve(el);
       }
 
-      prevElements = [...elements];
+      prevElements = [...currentElements];
     }
 
-    if (skip !== prevSkip) {
-      for (const el of elements.filter((el) => el)) {
+    if (isSkipped !== prevSkip) {
+      for (const el of currentElements) {
         if (!el) continue;
-        if (skip) observer?.unobserve(el);
-        else observer?.observe(el);
-      }
-    }
-
-    if (
-      rootMargin !== prevRootMargin ||
-      threshold !== prevThreshold ||
-      root !== prevRoot
-    ) {
-      observer?.disconnect();
-      prevElements = [];
-      initialize();
-
-      if (!skip) {
-        for (const el of elements.filter((el) => el)) {
-          if (el) observer?.observe(el);
-        }
+        if (isSkipped) activeObserver?.unobserve(el);
+        else activeObserver?.observe(el);
       }
     }
 
-    prevRootMargin = rootMargin;
-    prevThreshold = threshold;
-    prevRoot = root;
-    prevSkip = skip;
+    prevSkip = isSkipped;
   });
 </script>
 
-<slot
-  {observer}
-  {elementIntersections}
-  {elementEntries}
-/>
+{@render children?.({ observer, elementIntersections, elementEntries })}