svelte-intersection-observer - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

CHANGELOG.md

@@ -8,2 +8,6 @@ # Changelog
 
+## [0.3.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.3.0) - 2020-11-23
+
+- Export `entry` as a reactive prop
+
 ## [0.2.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.2.0) - 2020-11-18
@@ -10,0 +14,0 @@

lib/index.js

@@ -378,4 +378,4 @@ (function (global, factory) {
     	let { threshold = 0 } = $$props;
+    	let { entry = null } = $$props;
     	const dispatch = createEventDispatcher();
-    	let entry = null;
     	let intersecting = false;
@@ -404,2 +404,3 @@ let prevElement = null;
     		if ("threshold" in $$props) $$invalidate(5, threshold = $$props.threshold);
+    		if ("entry" in $$props) $$invalidate(0, entry = $$props.entry);
     		if ("$$scope" in $$props) $$invalidate(6, $$scope = $$props.$$scope);
@@ -431,3 +432,4 @@ };
     			rootMargin: 4,
-    			threshold: 5
+    			threshold: 5,
+    			entry: 0
     		});
@@ -434,0 +436,0 @@ }

package.json

 {
   "name": "svelte-intersection-observer",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
@@ -13,6 +13,6 @@ "description": "Detect if an element is in the viewport using the Intersection Observer API",
   "scripts": {
-    "dev": "rollup -c rollup.config.client.js -w",
-    "build": "rollup -c rollup.config.client.js",
+    "dev": "rollup -cw",
+    "build": "rollup -c",
     "deploy": "npx gh-pages -d public",
-    "prepack": "rollup -c"
+    "prepack": "BUNDLE=true rollup -c"
   },
@@ -25,2 +25,3 @@ "devDependencies": {
     "svelte": "^3.29.7",
+    "svelte-readme": "^0.3.1",
     "typescript": "^4.0.5"
@@ -27,0 +28,0 @@ },

README.md

@@ -8,6 +8,14 @@ # svelte-intersection-observer
 
+This module ships with [TypeScript definitions](./types).
+
+Try it in the [Svelte REPL](https://svelte.dev/repl/8cd2327a580c4f429c71f7df999bd51d?version=3.29.7).
+
+## [Demo](https://metonym.github.io/svelte-intersection-observer/)
+
 ## Install
 
-```sh
+```bash
 yarn add -D svelte-intersection-observer
+# OR
+npm i -D svelte-intersection-observer
 ```
@@ -21,8 +29,19 @@
 
+  let entry = {};
   let element;
+
+  $: inView = entry.isIntersecting;
 </script>
 
-<IntersectionObserver {element} let:intersecting>
-  <div bind:this="{element}">
-    {#if intersecting}
+<header>
+  <strong>Scroll down.</strong>
+  <div>
+    Element in view?
+    <strong class="answer" class:inView>{inView ? 'Yes' : 'No'}</strong>
+  </div>
+</header>
+
+<IntersectionObserver {element} bind:entry>
+  <div class="element" bind:this="{element}">
+    {#if inView}
       Element is in view
@@ -38,30 +57,15 @@ {/if}
 
-| Property 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`)                                                                             |
-| intersecting  | If the element is intersecting            | `boolean`                                                                                                           |
-| entry         | Observed element metadata                 | `null` or [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) |
+| Property 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`)                                                                   |
+| intersecting  | If the element is intersecting            | `boolean`                                                                                                 |
+| entry         | Observed element metadata                 | [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) |
 
 ### Dispatched Events
 
-The `observe` event is dispatched when an intersection change occurs.
+- **on:observe**: fired when an intersection change occurs (type `IntersectionObserverEntry`)
 
-```jsx
-<IntersectionObserver
-  {element}
-  on:observe={({ detail: entry }) => {
-    console.log(entry);
-    // entry.boundingClientRect
-    // entry.intersectionRatio
-    // entry.intersectionRect
-    // entry.isIntersecting
-    // entry.rootBounds
-    // entry.target
-    // entry.time
-  }} />
-```
-
 ## [Changelog](CHANGELOG.md)
@@ -73,5 +77,5 @@
 
-[npm]: https://img.shields.io/npm/v/svelte-intersection-observer.svg?color=blue
+[npm]: https://img.shields.io/npm/v/svelte-intersection-observer.svg?color=%235832c9
 [npm-url]: https://npmjs.com/package/svelte-intersection-observer
 [build]: https://travis-ci.com/metonym/svelte-intersection-observer.svg?branch=master
 [build-badge]: https://travis-ci.com/metonym/svelte-intersection-observer

types/index.d.ts

@@ -1,1 +0,1 @@
-export { default } from "./IntersectionObserver";
+export { default as default } from "./IntersectionObserver";

types/IntersectionObserver.d.ts

@@ -25,2 +25,7 @@ /// <reference types="svelte" />
   threshold?: number;
+
+  /**
+   * @default null
+   */
+  entry?: {} | Entry;
 }
@@ -27,0 +32,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35791

increased by1.63%

Lines of code

863

increased by0.94%

Number of lines in readme file

78

increased by5.41%

Worsened metrics

Dev dependency count

7

increased by16.67%

No dependency changes