svelte-intersection-observer 0.9.2 → 0.10.0

package/CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.10.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.10.0) - 2021-12-29
+
+**Features**
+
+- mark `observer` for garbage collection after disconnecting
+
+**Documentation**
+
+- make prop descriptions consistent with docs
+
+**Refactoring**
+
+- omit redundant `null` from `element` and `root` types as `HTMLElement` is already nullable
+
 ## [0.9.2](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.9.2) - 2021-11-26
 
 **Documentation**

package/README.md

@@ -161,7 +161,7 @@ As an alternative to binding the `intersecting` prop, you can listen to the `int
 
 The `e.detail` dispatched by the `observe` and `intersect` events is an [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) interface.
 
-Note that all properties in `IntersectionObserverEntry` are read only.
+Note that all properties in `IntersectionObserverEntry` are read-only.
 
 <details>
  <summary><code>IntersectionObserverEntry</code></summary>

package/lib/index.js

@@ -337,14 +337,14 @@
     /* src/IntersectionObserver.svelte generated by Svelte v3.44.2 */
 
     const get_default_slot_changes = dirty => ({
-    	intersecting: dirty & /*intersecting*/ 2,
-    	entry: dirty & /*entry*/ 1,
+    	intersecting: dirty & /*intersecting*/ 1,
+    	entry: dirty & /*entry*/ 2,
     	observer: dirty & /*observer*/ 4
     });
 
     const get_default_slot_context = ctx => ({
-    	intersecting: /*intersecting*/ ctx[1],
-    	entry: /*entry*/ ctx[0],
+    	intersecting: /*intersecting*/ ctx[0],
+    	entry: /*entry*/ ctx[1],
     	observer: /*observer*/ ctx[2]
     });
 
@@ -399,11 +399,11 @@
     	let { $$slots: slots = {}, $$scope } = $$props;
     	let { element = null } = $$props;
     	let { once = false } = $$props;
+    	let { intersecting = false } = $$props;
     	let { root = null } = $$props;
     	let { rootMargin = "0px" } = $$props;
     	let { threshold = 0 } = $$props;
     	let { entry = null } = $$props;
-    	let { intersecting = false } = $$props;
     	let { observer = null } = $$props;
     	const dispatch = createEventDispatcher();
     	let prevRootMargin = null;
@@ -412,8 +412,8 @@
     	const initialize = () => {
     		$$invalidate(2, observer = new IntersectionObserver(entries => {
     				entries.forEach(_entry => {
-    					$$invalidate(0, entry = _entry);
-    					$$invalidate(1, intersecting = _entry.isIntersecting);
+    					$$invalidate(1, entry = _entry);
+    					$$invalidate(0, intersecting = _entry.isIntersecting);
     				});
     			},
     		{ root, rootMargin, threshold }));
@@ -423,7 +423,10 @@
     		initialize();
 
     		return () => {
-    			if (observer) observer.disconnect();
+    			if (observer) {
+    				observer.disconnect();
+    				$$invalidate(2, observer = null);
+    			}
     		};
     	});
 
@@ -457,18 +460,18 @@
     	$$self.$$set = $$props => {
     		if ('element' in $$props) $$invalidate(3, element = $$props.element);
     		if ('once' in $$props) $$invalidate(4, once = $$props.once);
+    		if ('intersecting' in $$props) $$invalidate(0, intersecting = $$props.intersecting);
     		if ('root' in $$props) $$invalidate(5, root = $$props.root);
     		if ('rootMargin' in $$props) $$invalidate(6, rootMargin = $$props.rootMargin);
     		if ('threshold' in $$props) $$invalidate(7, threshold = $$props.threshold);
-    		if ('entry' in $$props) $$invalidate(0, entry = $$props.entry);
-    		if ('intersecting' in $$props) $$invalidate(1, intersecting = $$props.intersecting);
+    		if ('entry' in $$props) $$invalidate(1, entry = $$props.entry);
     		if ('observer' in $$props) $$invalidate(2, observer = $$props.observer);
     		if ('$$scope' in $$props) $$invalidate(8, $$scope = $$props.$$scope);
     	};
 
     	return [
-    		entry,
     		intersecting,
+    		entry,
     		observer,
     		element,
     		once,
@@ -487,11 +490,11 @@
     		init(this, options, instance, create_fragment, safe_not_equal, {
     			element: 3,
     			once: 4,
+    			intersecting: 0,
     			root: 5,
     			rootMargin: 6,
     			threshold: 7,
-    			entry: 0,
-    			intersecting: 1,
+    			entry: 1,
     			observer: 2
     		});
     	}

package/lib/index.mjs

@@ -331,14 +331,14 @@ class SvelteComponent {
 /* src/IntersectionObserver.svelte generated by Svelte v3.44.2 */
 
 const get_default_slot_changes = dirty => ({
-	intersecting: dirty & /*intersecting*/ 2,
-	entry: dirty & /*entry*/ 1,
+	intersecting: dirty & /*intersecting*/ 1,
+	entry: dirty & /*entry*/ 2,
 	observer: dirty & /*observer*/ 4
 });
 
 const get_default_slot_context = ctx => ({
-	intersecting: /*intersecting*/ ctx[1],
-	entry: /*entry*/ ctx[0],
+	intersecting: /*intersecting*/ ctx[0],
+	entry: /*entry*/ ctx[1],
 	observer: /*observer*/ ctx[2]
 });
 
@@ -393,11 +393,11 @@ function instance($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { element = null } = $$props;
 	let { once = false } = $$props;
+	let { intersecting = false } = $$props;
 	let { root = null } = $$props;
 	let { rootMargin = "0px" } = $$props;
 	let { threshold = 0 } = $$props;
 	let { entry = null } = $$props;
-	let { intersecting = false } = $$props;
 	let { observer = null } = $$props;
 	const dispatch = createEventDispatcher();
 	let prevRootMargin = null;
@@ -406,8 +406,8 @@ function instance($$self, $$props, $$invalidate) {
 	const initialize = () => {
 		$$invalidate(2, observer = new IntersectionObserver(entries => {
 				entries.forEach(_entry => {
-					$$invalidate(0, entry = _entry);
-					$$invalidate(1, intersecting = _entry.isIntersecting);
+					$$invalidate(1, entry = _entry);
+					$$invalidate(0, intersecting = _entry.isIntersecting);
 				});
 			},
 		{ root, rootMargin, threshold }));
@@ -417,7 +417,10 @@ function instance($$self, $$props, $$invalidate) {
 		initialize();
 
 		return () => {
-			if (observer) observer.disconnect();
+			if (observer) {
+				observer.disconnect();
+				$$invalidate(2, observer = null);
+			}
 		};
 	});
 
@@ -451,18 +454,18 @@ function instance($$self, $$props, $$invalidate) {
 	$$self.$$set = $$props => {
 		if ('element' in $$props) $$invalidate(3, element = $$props.element);
 		if ('once' in $$props) $$invalidate(4, once = $$props.once);
+		if ('intersecting' in $$props) $$invalidate(0, intersecting = $$props.intersecting);
 		if ('root' in $$props) $$invalidate(5, root = $$props.root);
 		if ('rootMargin' in $$props) $$invalidate(6, rootMargin = $$props.rootMargin);
 		if ('threshold' in $$props) $$invalidate(7, threshold = $$props.threshold);
-		if ('entry' in $$props) $$invalidate(0, entry = $$props.entry);
-		if ('intersecting' in $$props) $$invalidate(1, intersecting = $$props.intersecting);
+		if ('entry' in $$props) $$invalidate(1, entry = $$props.entry);
 		if ('observer' in $$props) $$invalidate(2, observer = $$props.observer);
 		if ('$$scope' in $$props) $$invalidate(8, $$scope = $$props.$$scope);
 	};
 
 	return [
-		entry,
 		intersecting,
+		entry,
 		observer,
 		element,
 		once,
@@ -481,11 +484,11 @@ class IntersectionObserver_1 extends SvelteComponent {
 		init(this, options, instance, create_fragment, safe_not_equal, {
 			element: 3,
 			once: 4,
+			intersecting: 0,
 			root: 5,
 			rootMargin: 6,
 			threshold: 7,
-			entry: 0,
-			intersecting: 1,
+			entry: 1,
 			observer: 2
 		});
 	}

package/package.json

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

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 between 0 and 1.
    * @default 0
    */
   threshold?: 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<