svelte-intersection-observer - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

CHANGELOG.md

@@ -8,6 +8,13 @@ # Changelog
 
-## [0.4.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.4.0) - 2021-01-20
+## [0.6.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.6.0) - 2021-02-24
 
 **Features**
 
+- export `observer` prop (type `IntersectionObserver`)
+- dispatch "intersect" event if the observed element `isIntersecting` the viewport
+
+## [0.5.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.5.0) - 2021-01-20
+
+**Features**
+
 - Add support for Server-Side Rendering (SSR)
@@ -14,0 +21,0 @@

lib/index.js

@@ -327,3 +327,4 @@ (function (global, factory) {
     	intersecting: dirty & /*intersecting*/ 2,
-    	entry: dirty & /*entry*/ 1
+    	entry: dirty & /*entry*/ 1,
+    	observer: dirty & /*observer*/ 4
     });
@@ -333,3 +334,4 @@
     	intersecting: /*intersecting*/ ctx[1],
-    	entry: /*entry*/ ctx[0]
+    	entry: /*entry*/ ctx[0],
+    	observer: /*observer*/ ctx[2]
     });
@@ -339,4 +341,4 @@
     	let current;
-    	const default_slot_template = /*#slots*/ ctx[7].default;
-    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[6], get_default_slot_context);
+    	const default_slot_template = /*#slots*/ ctx[9].default;
+    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[8], get_default_slot_context);
 
@@ -356,4 +358,4 @@ return {
     			if (default_slot) {
-    				if (default_slot.p && dirty & /*$$scope, intersecting, entry*/ 67) {
-    					update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[6], dirty, get_default_slot_changes, get_default_slot_context);
+    				if (default_slot.p && dirty & /*$$scope, intersecting, entry, observer*/ 263) {
+    					update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[8], dirty, get_default_slot_changes, get_default_slot_context);
     				}
@@ -380,2 +382,3 @@ }
     	let { element = null } = $$props;
+    	let { once = false } = $$props;
     	let { root = null } = $$props;
@@ -386,13 +389,21 @@ let { rootMargin = "0px" } = $$props;
     	let { intersecting = false } = $$props;
+    	let { observer = null } = $$props;
     	const dispatch = createEventDispatcher();
     	let prevElement = null;
-    	let observer = undefined;
 
     	afterUpdate(async () => {
-    		if (entry != null) dispatch("observe", entry);
+    		if (entry !== null) {
+    			dispatch("observe", entry);
+
+    			if (entry.isIntersecting) {
+    				dispatch("intersect", entry);
+    				if (once) observer.unobserve(entry.target);
+    			}
+    		}
+
     		await tick();
 
-    		if (element != null && element != prevElement) {
+    		if (element !== null && element !== prevElement) {
     			observer.observe(element);
-    			if (prevElement != null) observer.unobserve(prevElement);
+    			if (prevElement !== null) observer.unobserve(prevElement);
     			prevElement = element;
@@ -407,15 +418,17 @@ }
     	$$self.$$set = $$props => {
-    		if ("element" in $$props) $$invalidate(2, element = $$props.element);
-    		if ("root" in $$props) $$invalidate(3, root = $$props.root);
-    		if ("rootMargin" in $$props) $$invalidate(4, rootMargin = $$props.rootMargin);
-    		if ("threshold" in $$props) $$invalidate(5, threshold = $$props.threshold);
+    		if ("element" in $$props) $$invalidate(3, element = $$props.element);
+    		if ("once" in $$props) $$invalidate(4, once = $$props.once);
+    		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 ("$$scope" in $$props) $$invalidate(6, $$scope = $$props.$$scope);
+    		if ("observer" in $$props) $$invalidate(2, observer = $$props.observer);
+    		if ("$$scope" in $$props) $$invalidate(8, $$scope = $$props.$$scope);
     	};
 
     	$$self.$$.update = () => {
-    		if ($$self.$$.dirty & /*root, rootMargin, threshold*/ 56) {
+    		if ($$self.$$.dirty & /*root, rootMargin, threshold*/ 224) {
     			 if (typeof window !== "undefined") {
-    				observer = new IntersectionObserver(entries => {
+    				$$invalidate(2, observer = new IntersectionObserver(entries => {
     						entries.forEach(_entry => {
@@ -426,3 +439,3 @@ $$invalidate(0, entry = _entry);
     					},
-    				{ root, rootMargin, threshold });
+    				{ root, rootMargin, threshold }));
     			}
@@ -432,3 +445,14 @@ }
 
-    	return [entry, intersecting, element, root, rootMargin, threshold, $$scope, slots];
+    	return [
+    		entry,
+    		intersecting,
+    		observer,
+    		element,
+    		once,
+    		root,
+    		rootMargin,
+    		threshold,
+    		$$scope,
+    		slots
+    	];
     }
@@ -441,8 +465,10 @@
     		init(this, options, instance, create_fragment, safe_not_equal, {
-    			element: 2,
-    			root: 3,
-    			rootMargin: 4,
-    			threshold: 5,
+    			element: 3,
+    			once: 4,
+    			root: 5,
+    			rootMargin: 6,
+    			threshold: 7,
     			entry: 0,
-    			intersecting: 1
+    			intersecting: 1,
+    			observer: 2
     		});
@@ -449,0 +475,0 @@ }

package.json

 {
   "name": "svelte-intersection-observer",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "Detect if an element is in the viewport using the Intersection Observer API",

README.md

@@ -21,2 +21,4 @@ # svelte-intersection-observer
 
+### Basic
+
 <!-- prettier-ignore-start -->
@@ -41,2 +43,19 @@ ```svelte
 
+### on:intersect event
+
+The "intersect" event is dispatched only if the observed element is intersecting the viewport.
+
+<!-- prettier-ignore-start -->
+```html
+<IntersectionObserver
+  {element}
+  on:intersect="{(e) => {
+    console.log(e.detail); // IntersectionObserverEntry
+  }}"
+>
+  <div bind:this={element}>Hello world</div>
+</IntersectionObserver>
+```
+<!-- prettier-ignore-end -->
+
 ## API
@@ -46,10 +65,12 @@
 
-| Prop name    | Description                                                 | Value                                                                                                     |
-| :----------- | :---------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------- |
-| element      | Element observed for intersection                           | `HTMLElement`                                                                                             |
-| root         | Containing element                                          | `null` or `HTMLElement` (default: `null`)                                                                 |
-| rootMargin   | Offset of the containing element                            | `string` (default: `"0px"`)                                                                               |
-| threshold    | Percentage of element to trigger an event                   | `number` between 0 and 1 (default: `0`)                                                                   |
-| entry        | Observed element metadata                                   | [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) |
-| intersecting | `true` if the observed element is intersecting the viewport | `boolean`                                                                                                 |
+| Prop name    | Description                                                       | Value                                                                                                     |
+| :----------- | :---------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------- |
+| element      | Element observed for intersection                                 | `HTMLElement`                                                                                             |
+| root         | Containing element                                                | `null` or `HTMLElement` (default: `null`)                                                                 |
+| rootMargin   | Offset of the containing element                                  | `string` (default: `"0px"`)                                                                               |
+| threshold    | Percentage of element to trigger an event                         | `number` between 0 and 1 (default: `0`)                                                                   |
+| entry        | Observed element metadata                                         | [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) |
+| once         | If `true`, the observed element will be unobserved upon intersect | `boolean` (default: `false`)                                                                              |
+| intersecting | `true` if the observed element is intersecting the viewport       | `boolean` (default: `false`)                                                                              |
+| observer     | IntersectionObserver instance                                     | [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)           |
 
@@ -59,2 +80,3 @@ ### Dispatched events
 - **on:observe**: fired when an intersection change occurs (type `IntersectionObserverEntry`)
+- **on:intersect**: fired when an intersection change occurs and the element is intersecting (type `IntersectionObserverEntry`)
 
@@ -61,0 +83,0 @@ ## TypeScript support

types/IntersectionObserver.d.ts

@@ -36,8 +36,24 @@ /// <reference types="svelte" />
   intersecting?: boolean;
+
+  /**
+   * @default null
+   */
+  observer?: null | IntersectionObserver;
+
+  /**
+   * @default false
+   */
+  once?: boolean;
 }
 
-export default class IntersectionObserver extends SvelteComponentTyped<
+export default class SvelteIntersectionObserver extends SvelteComponentTyped<
   IntersectionObserverProps,
-  { observe: CustomEvent<Entry> },
-  { default: { intersecting: boolean; entry: Entry } }
+  { observe: CustomEvent<Entry>; intersect: CustomEvent<Entry> },
+  {
+    default: {
+      intersecting: boolean;
+      entry: Entry;
+      observer: IntersectionObserver;
+    };
+  }
 > {}

No alert changes

Improved metrics

Total package byte prevSize

39302

7.45%

Lines of code

941

7.05%

Number of lines in readme file

93

30.99%

No dependency changes