svelte-intersection-observer 2.1.0 → 2.2.0

package/IntersectionObserver.svelte

@@ -1,23 +1,6 @@
 <script>
   import { untrack } from "svelte";
 
-  /**
-   * @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]
-   */
-
-  /** @type {Props} */
   let {
     element = null,
     once = false,
@@ -33,12 +16,20 @@
     children,
   } = $props();
 
-  /** @type {null | HTMLElement} */
   let prevElement = null;
 
   let prevSkip = untrack(() => skip);
 
+  const configKey = $derived(
+    `${root}|${rootMargin}|${JSON.stringify(threshold)}`,
+  );
+
   const initialize = () => {
+    if (typeof IntersectionObserver === "undefined") {
+      observer = null;
+      return;
+    }
+
     observer = new IntersectionObserver(
       (entries) => {
         for (const _entry of entries) {
@@ -49,7 +40,7 @@
 
           if (_entry.isIntersecting) {
             onintersect?.(
-              /** @type {IntersectionObserverEntry & { isIntersecting: true }} */ (
+ (
                 _entry
               ),
             );
@@ -63,8 +54,12 @@
   };
 
   $effect(() => {
-    prevElement = null;
-    initialize();
+    configKey;
+
+    untrack(() => {
+      prevElement = null;
+      initialize();
+    });
 
     return () => {
       observer?.disconnect();
@@ -77,10 +72,15 @@
     const isSkipped = skip;
     const activeObserver = observer;
 
-    if (target !== null && target !== prevElement) {
-      if (!isSkipped) activeObserver?.observe(target);
+    if (target !== prevElement) {
       if (prevElement !== null) activeObserver?.unobserve(prevElement);
+      if (target !== null && !isSkipped) activeObserver?.observe(target);
       prevElement = target;
+
+      if (target === null) {
+        intersecting = false;
+        entry = null;
+      }
     }
 
     if (isSkipped !== prevSkip && target !== null) {

package/MultipleIntersectionObserver.svelte

@@ -1,23 +1,6 @@
 <script>
   import { untrack } from "svelte";
 
-  /**
-   * @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]
-   */
-
-  /** @type {Props} */
   let {
     elements = [],
     once = false,
@@ -33,16 +16,24 @@
     children,
   } = $props();
 
-  /** @type {(HTMLElement | null)[]} */
-  let prevElements = [];
+  let prevElements = new Set();
 
   let prevSkip = untrack(() => skip);
 
+  const configKey = $derived(
+    `${root}|${rootMargin}|${JSON.stringify(threshold)}`,
+  );
+
   const initialize = () => {
+    if (typeof IntersectionObserver === "undefined") {
+      observer = null;
+      return;
+    }
+
     observer = new IntersectionObserver(
       (entries) => {
         for (const _entry of entries) {
-          const target = /** @type {HTMLElement} */ (_entry.target);
+          const target =  (_entry.target);
 
           elementIntersections.set(target, _entry.isIntersecting);
           elementEntries.set(target, _entry);
@@ -52,7 +43,7 @@
           if (_entry.isIntersecting) {
             onintersect?.({
               entry:
-                /** @type {IntersectionObserverEntry & { isIntersecting: true }} */ (
+ (
                   _entry
                 ),
               target,
@@ -61,7 +52,6 @@
           }
         }
 
-        // Trigger reactivity once per batch, not once per entry.
         elementIntersections = new Map(elementIntersections);
         elementEntries = new Map(elementEntries);
       },
@@ -70,8 +60,12 @@
   };
 
   $effect(() => {
-    prevElements = [];
-    initialize();
+    configKey;
+
+    untrack(() => {
+      prevElements = new Set();
+      initialize();
+    });
 
     return () => {
       observer?.disconnect();
@@ -84,28 +78,35 @@
     const isSkipped = skip;
     const activeObserver = observer;
 
-    if (currentElements.length > 0) {
-      const newElements = currentElements.filter(
-        (el) => el && !prevElements.includes(el),
-      );
-
-      if (!isSkipped) {
-        for (const el of newElements) {
-          if (el) activeObserver?.observe(el);
-        }
-      }
+    const currentSet = new Set(currentElements);
 
-      const removedElements = prevElements.filter(
-        (el) => el && !currentElements.includes(el),
-      );
+    const newElements = currentElements.filter(
+      (el) => el && !prevElements.has(el),
+    );
+    const removedElements = [...prevElements].filter(
+      (el) => el && !currentSet.has(el),
+    );
 
-      for (const el of removedElements) {
-        if (el) activeObserver?.unobserve(el);
+    if (!isSkipped) {
+      for (const el of newElements) {
+        if (el) activeObserver?.observe(el);
       }
+    }
 
-      prevElements = [...currentElements];
+    for (const el of removedElements) {
+      if (!el) continue;
+      activeObserver?.unobserve(el);
+      elementIntersections.delete(el);
+      elementEntries.delete(el);
     }
 
+    if (removedElements.length > 0) {
+      elementIntersections = new Map(elementIntersections);
+      elementEntries = new Map(elementEntries);
+    }
+
+    prevElements = currentSet;
+
     if (isSkipped !== prevSkip) {
       for (const el of currentElements) {
         if (!el) continue;