svelte-intersection-observer 0.8.0 → 0.10.0

package/CHANGELOG.md

@@ -5,6 +5,46 @@ 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**
+
+- add `let:` directive example
+- update component prop descriptions
+- use Svelte syntax highlighting for `on:observe`, `on:intersect` examples
+
+## [0.9.1](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.9.1) - 2021-10-25
+
+**Documentation**
+
+- update the "Once" example to include the `"svelte-intersection-observer"` import
+- rename example `svite` to `vite`
+
+**Refactoring**
+
+- inline `entry` prop typedef
+- remove `@event`, `@slot` artifacts used by sveld to generate initial TypeScript definitions
+
+## [0.9.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.9.0) - 2021-10-05
+
+- improve TypeScript definitions for dispatched events
+  - `on:observe`: `event.detail.isIntersecting` is a `boolean`
+  - `on:intersect`: `event.detail.isIntersecting` can only be `true`
+
 ## [0.8.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.8.0) - 2021-09-02
 
 - use `.svelte.d.ts` extension for component TypeScript definition

package/README.md

@@ -24,6 +24,12 @@ yarn add -D svelte-intersection-observer
 npm i -D svelte-intersection-observer
 ```
 
+**pnpm**
+
+```bash
+pnpm i -D svelte-intersection-observer
+```
+
 ## Usage
 
 ### Basic
@@ -55,7 +61,9 @@ Set `once` to `true` for the intersection event to occur only once. The `element
 
 ```svelte
 <script>
-  let element2;
+  import IntersectionObserver from "svelte-intersection-observer";
+
+  let elementOnce;
   let intersectOnce;
 </script>
 
@@ -63,42 +71,71 @@ Set `once` to `true` for the intersection event to occur only once. The `element
   {intersectOnce ? "Element is in view" : "Element is not in view"}
 </header>
 
-<IntersectionObserver once element={element2} bind:intersecting={intersectOnce}>
-  <div bind:this={element2}>Hello world</div>
+<IntersectionObserver
+  once
+  element={elementOnce}
+  bind:intersecting={intersectOnce}
+>
+  <div bind:this={elementOnce}>Hello world</div>
 </IntersectionObserver>
 ```
 
-### on:observe event
+### `let:intersecting`
+
+An alternative to binding to the `intersecting` prop is to use the `let:` directive.
+
+In the following example, the "Hello world" element will fade in when its containing element intersects the viewport.
+
+```svelte
+<script>
+  import IntersectionObserver from "svelte-intersection-observer";
+  import { fade } from "svelte/transition";
+
+  let node;
+</script>
+
+<header />
+
+<IntersectionObserver element={node} let:intersecting>
+  <div bind:this={node}>
+    {#if intersecting}
+      <div transition:fade={{ delay: 200 }}>Hello world</div>
+    {/if}
+  </div>
+</IntersectionObserver>
+```
+
+### `on:observe` event
 
 The `observe` event is dispatched when the element is first observed and also whenever an intersection event occurs.
 
-```html
+```svelte no-eval
 <IntersectionObserver
   {element}
-  on:observe="{(e) => {
+  on:observe={(e) => {
     console.log(e.detail); // IntersectionObserverEntry
     console.log(e.detail.isIntersecting); // true | false
-  }}"
+  }}
 >
-  <div bind:this="{element}">Hello world</div>
+  <div bind:this={element}>Hello world</div>
 </IntersectionObserver>
 ```
 
-### on:intersect event
+### `on:intersect` event
 
 As an alternative to binding the `intersecting` prop, you can listen to the `intersect` event that is dispatched if the observed element is intersecting the viewport.
 
 **Note**: Compared to `on:observe`, `on:intersect` is dispatched only when the element is _intersecting the viewport_. In other words, `e.detail.isIntersecting` will only be `true`.
 
-```html
+```svelte no-eval
 <IntersectionObserver
   {element}
-  on:intersect="{(e) => {
+  on:intersect={(e) => {
     console.log(e.detail); // IntersectionObserverEntry
     console.log(e.detail.isIntersecting); // true
-  }}"
+  }}
 >
-  <div bind:this="{element}">Hello world</div>
+  <div bind:this={element}>Hello world</div>
 </IntersectionObserver>
 ```
 
@@ -106,16 +143,16 @@ As an alternative to binding the `intersecting` prop, you can listen to the `int
 
 ### Props
 
-| Name         | Description                                                          | Type                                                                                                      | Default value |
-| :----------- | :------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------- | :------------ |
-| element      | Element observed for intersection                                    | `HTMLElement`                                                                                             | `null`        |
-| once         | If `true`, the observed element will be unobserved upon intersection | `boolean`                                                                                                 | `false`       |
-| intersecting | `true` if the observed element is intersecting the viewport          | `boolean`                                                                                                 | `false`       |
-| root         | Containing element                                                   | `null` or `HTMLElement`                                                                                   | `null`        |
-| rootMargin   | Margin offset of the containing element                              | `string`                                                                                                  | `"0px"`       |
-| threshold    | Percentage of element visibility to trigger an event                 | `number` between 0 and 1                                                                                  | `0`           |
-| entry        | Observed element metadata                                            | [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) | `null`        |
-| observer     | IntersectionObserver instance                                        | [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)           | `null`        |
+| Name         | Description                                                 | Type                                                                                                      | Default value |
+| :----------- | :---------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------- | :------------ |
+| element      | Observed element                                            | `HTMLElement`                                                                                             | `null`        |
+| once         | Unobserve the element after the first intersection event    | `boolean`                                                                                                 | `false`       |
+| intersecting | `true` if the observed element is intersecting the viewport | `boolean`                                                                                                 | `false`       |
+| root         | Containing element                                          | `null` or `HTMLElement`                                                                                   | `null`        |
+| rootMargin   | Margin offset of the containing element                     | `string`                                                                                                  | `"0px"`       |
+| threshold    | Percentage of element visibile to trigger an event          | `number` between 0 and 1                                                                                  | `0`           |
+| entry        | Observed element metadata                                   | [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) | `null`        |
+| observer     | `IntersectionObserver` instance                             | [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)           | `null`        |
 
 ### Dispatched events
 
@@ -124,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>
@@ -176,7 +213,7 @@ interface IntersectionObserverEntry {
 The [examples folder](examples/) contains sample set-ups.
 
 - [examples/sveltekit](examples/sveltekit)
-- [examples/svite](examples/svite)
+- [examples/vite](examples/vite)
 - [examples/sapper](examples/sapper)
 - [examples/snowpack](examples/snowpack)
 - [examples/rollup](examples/rollup)

package/lib/index.js

@@ -264,7 +264,7 @@
             on_disconnect: [],
             before_update: [],
             after_update: [],
-            context: new Map(parent_component ? parent_component.$$.context : options.context || []),
+            context: new Map(options.context || (parent_component ? parent_component.$$.context : [])),
             // everything else
             callbacks: blank_object(),
             dirty,
@@ -334,17 +334,17 @@
         }
     }
 
-    /* src/IntersectionObserver.svelte generated by Svelte v3.42.4 */
+    /* 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

@@ -258,7 +258,7 @@ function init(component, options, instance, create_fragment, not_equal, props, a
         on_disconnect: [],
         before_update: [],
         after_update: [],
-        context: new Map(parent_component ? parent_component.$$.context : options.context || []),
+        context: new Map(options.context || (parent_component ? parent_component.$$.context : [])),
         // everything else
         callbacks: blank_object(),
         dirty,
@@ -328,17 +328,17 @@ class SvelteComponent {
     }
 }
 
-/* src/IntersectionObserver.svelte generated by Svelte v3.42.4 */
+/* 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.8.0",
+  "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)",
@@ -17,11 +17,11 @@
     "format": "prettier --write '.'"
   },
   "devDependencies": {
-    "prettier": "^2.3.2",
-    "prettier-plugin-svelte": "^2.4.0",
-    "svelte": "^3.42.4",
-    "svelte-check": "^2.2.5",
-    "svelte-readme": "^3.3.1"
+    "prettier": "^2.5.0",
+    "prettier-plugin-svelte": "^2.5.0",
+    "svelte": "^3.44.2",
+    "svelte-check": "^2.2.10",
+    "svelte-readme": "^3.6.1"
   },
   "repository": {
     "type": "git",

package/src/IntersectionObserver.svelte

@@ -1,48 +1,49 @@
 <script>
   /**
-   * @typedef {null | IntersectionObserverEntry} Entry
-   * @event {Entry} observe
-   * @event {Entry} intersect
-   * @slot {{ intersecting: boolean; entry: Entry; observer: IntersectionObserver }}
-   */
-
-  /**
-   * 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 | Entry} */
+  /**
+   * 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";
@@ -68,7 +69,10 @@
     initialize();
 
     return () => {
-      if (observer) observer.disconnect();
+      if (observer) {
+        observer.disconnect();
+        observer = null;
+      }
     };
   });
 

package/types/IntersectionObserver.svelte.d.ts

@@ -5,49 +5,75 @@ 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<
   IntersectionObserverProps,
-  { observe: CustomEvent<Entry>; intersect: CustomEvent<Entry> },
+  {
+    /**
+     * Dispatched when the element is first observed
+     * and also whenever an intersection event occurs.
+     */
+    observe: CustomEvent<IntersectionObserverEntry>;
+
+    /**
+     * Dispatched only when the element is intersecting the viewport.
+     * `event.detail.isIntersecting` will only be `true`
+     */
+    intersect: CustomEvent<
+      IntersectionObserverEntry & { isIntersecting: true }
+    >;
+  },
   {
     default: {
       intersecting: boolean;