svelte-intersection-observer 0.9.2 → 0.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-intersection-observer",
-  "version": "0.9.2",
+  "version": "0.10.1",
   "license": "MIT",
   "description": "Detect if an element is in the viewport using the Intersection Observer API",
   "author": "Eric Liu (https://github.com/metonym)",
@@ -8,20 +8,20 @@
   "main": "./lib/index.js",
   "module": "./lib/index.mjs",
   "types": "./types/index.d.ts",
-  "sideEffects": false,
   "scripts": {
     "dev": "rollup -cw",
     "build": "rollup -c",
     "prepack": "BUNDLE=true rollup -c",
-    "test": "svelte-check --workspace test",
-    "format": "prettier --write '.'"
+    "test:types": "svelte-check --workspace test",
+    "test:examples": "node test/examples",
+    "format": "prettier --ignore-path .gitignore --write '.'"
   },
   "devDependencies": {
-    "prettier": "^2.5.0",
-    "prettier-plugin-svelte": "^2.5.0",
-    "svelte": "^3.44.2",
-    "svelte-check": "^2.2.10",
-    "svelte-readme": "^3.6.1"
+    "prettier": "^3.0.0",
+    "prettier-plugin-svelte": "^3.0.0",
+    "svelte": "^4.1.0",
+    "svelte-check": "^3.4.6",
+    "svelte-readme": "^3.6.3"
   },
   "repository": {
     "type": "git",

package/src/IntersectionObserver.svelte

@@ -1,41 +1,49 @@
 <script>
   /**
-   * The HTML Element to observe
-   * @type {null | HTMLElement}
+   * The HTML Element to observe.
+   * @type {HTMLElement}
    */
   export let element = null;
 
   /**
-   * Set to `true` to unobserve the element after it intersects the viewport
+   * Set to `true` to unobserve the element
+   * after it intersects the viewport.
    * @type {boolean}
    */
   export let once = false;
 
   /**
-   * Containing element
-   * Defaults to the browser viewport
-   * @type {null | HTMLElement}
+   * `true` if the observed element
+   * is intersecting the viewport.
+   */
+  export let intersecting = false;
+
+  /**
+   * Specify the containing element.
+   * Defaults to the browser viewport.
+   * @type {HTMLElement}
    */
   export let root = null;
 
-  /** Margin offset of the containing element */
+  /** 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
+   * Percentage of element visibility to trigger an event.
+   * Value must be between 0 and 1.
    */
   export let threshold = 0;
 
-  /** @type {null | IntersectionObserverEntry} */
+  /**
+   * Observed element metadata.
+   * @type {null | IntersectionObserverEntry}
+   */
   export let entry = null;
 
   /**
-   * `true` is the observed element is intersecting the element
+   * `IntersectionObserver` instance.
+   * @type {null | IntersectionObserver}
    */
-  export let intersecting = false;
-
-  /** @type {null | IntersectionObserver} */
   export let observer = null;
 
   import { tick, createEventDispatcher, afterUpdate, onMount } from "svelte";
@@ -61,7 +69,10 @@
     initialize();
 
     return () => {
-      if (observer) observer.disconnect();
+      if (observer) {
+        observer.disconnect();
+        observer = null;
+      }
     };
   });
 

package/types/IntersectionObserver.svelte.d.ts

@@ -5,44 +5,56 @@ export type Entry = null | IntersectionObserverEntry;
 
 export interface IntersectionObserverProps {
   /**
+   * The HTML Element to observe.
    * @default null
    */
-  element?: null | HTMLElement;
+  element?: HTMLElement;
 
   /**
+   * 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;
+
+  /**
+   * Specify the containing element.
+   * Defaults to the browser viewport.
    * @default null
    */
-  root?: null | HTMLElement;
+  root?: HTMLElement;
 
   /**
+   * 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;
+  threshold?: number | number[];
 
   /**
+   * Observed element metadata.
    * @default null
    */
   entry?: null | Entry;
 
   /**
-   * @default false
-   */
-  intersecting?: boolean;
-
-  /**
+   * `IntersectionObserver` instance.
    * @default null
    */
   observer?: null | IntersectionObserver;
-
-  /**
-   * @default false
-   */
-  once?: boolean;
 }
 
 export default class SvelteIntersectionObserver extends SvelteComponentTyped<