svelte-intersection-observer 1.2.0 → 2.1.0

package/MultipleIntersectionObserver.svelte.d.ts

@@ -1,90 +1,98 @@
-import type { SvelteComponentTyped } from "svelte";
+import type { Component, Snippet } from "svelte";
 
-export default class extends SvelteComponentTyped<
-  {
-    /**
-     * Array of HTML Elements to observe.
-     * Use this for better performance when observing multiple elements.
-     * @default []
-     */
-    elements?: (HTMLElement | null)[];
+export interface MultipleIntersectionObserverProps {
+  /**
+   * Array of HTML Elements to observe.
+   * Use this for better performance when observing multiple elements.
+   * @default []
+   */
+  elements?: (HTMLElement | null)[];
 
-    /**
-     * 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;
 
-    /**
-     * 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[];
 
-    /**
-     * Map of element to its intersection state.
-     * @default new Map()
-     */
-    elementIntersections?: Map<HTMLElement | null, boolean>;
+  /**
+   * Map of element to its intersection state.
+   * @default new Map()
+   */
+  elementIntersections?: Map<HTMLElement | null, boolean>;
 
-    /**
-     * Map of element to its latest entry.
-     * @default new Map()
-     */
-    elementEntries?: Map<HTMLElement | null, IntersectionObserverEntry>;
+  /**
+   * Map of element to its latest entry.
+   * @default new Map()
+   */
+  elementEntries?: Map<HTMLElement | null, IntersectionObserverEntry>;
 
-    /**
-     * `IntersectionObserver` instance.
-     * @default null
-     */
-    observer?: null | IntersectionObserver;
+  /**
+   * `IntersectionObserver` instance.
+   * @default null
+   */
+  observer?: null | IntersectionObserver;
 
-    /**
-     * Set to `true` to pause observing all elements without disconnecting
-     * the observer or losing `elementIntersections`/`elementEntries` state.
-     * Set back to `false` to resume.
-     * @default false
-     */
-    skip?: boolean;
-  },
-  {
-    /**
-     * Dispatched when an element is first observed
-     * and also whenever an intersection event occurs.
-     */
-    observe: CustomEvent<{
-      entry: IntersectionObserverEntry;
-      target: HTMLElement;
-    }>;
+  /**
+   * Set to `true` to pause observing all elements without disconnecting
+   * the observer or losing `elementIntersections`/`elementEntries` state.
+   * Set back to `false` to resume.
+   * @default false
+   */
+  skip?: boolean;
 
-    /**
-     * Dispatched only when an element is intersecting the viewport.
-     */
-    intersect: CustomEvent<{
-      entry: IntersectionObserverEntry & { isIntersecting: true };
-      target: HTMLElement;
-    }>;
-  },
-  {
-    default: {
-      observer: IntersectionObserver;
-      elementIntersections: Map<HTMLElement | null, boolean>;
-      elementEntries: Map<HTMLElement | null, IntersectionObserverEntry>;
-    };
-  }
-> {}
+  /**
+   * Called when an element is first observed
+   * and also whenever an intersection event occurs.
+   */
+  onobserve?: (detail: {
+    entry: IntersectionObserverEntry;
+    target: HTMLElement;
+  }) => void;
+
+  /**
+   * Called only when an element is intersecting the viewport.
+   */
+  onintersect?: (detail: {
+    entry: IntersectionObserverEntry & { isIntersecting: true };
+    target: HTMLElement;
+  }) => void;
+
+  children?: Snippet<
+    [
+      {
+        observer: null | IntersectionObserver;
+        elementIntersections: Map<HTMLElement | null, boolean>;
+        elementEntries: Map<HTMLElement | null, IntersectionObserverEntry>;
+      },
+    ]
+  >;
+}
+
+declare const MultipleIntersectionObserverComponent: Component<
+  MultipleIntersectionObserverProps,
+  Record<string, never>,
+  "elementIntersections" | "elementEntries" | "observer"
+>;
+
+export default MultipleIntersectionObserverComponent;