svelte-intersection-observer
Advanced tools
svelte-intersection-observer - npm Package Compare versions
Comparing version 0.4.0 to 0.5.0
@@ -8,2 +8,8 @@ # Changelog | ||
| ## [0.4.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.4.0) - 2021-01-20 | ||
| **Features** | ||
| - Add support for Server-Side Rendering (SSR) | ||
| ## [0.4.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.4.0) - 2020-12-20 | ||
@@ -10,0 +16,0 @@ |
@@ -323,3 +323,3 @@ (function (global, factory) { | ||
| /* src/IntersectionObserver.svelte generated by Svelte v3.31.0 */ | ||
| /* src/IntersectionObserver.svelte generated by Svelte v3.31.2 */ | ||
@@ -398,3 +398,3 @@ const get_default_slot_changes = dirty => ({ | ||
| onDestroy(() => { | ||
| observer.disconnect(); | ||
| if (observer) observer.disconnect(); | ||
| }); | ||
@@ -414,9 +414,11 @@ | ||
| if ($$self.$$.dirty & /*root, rootMargin, threshold*/ 56) { | ||
| observer = new IntersectionObserver(entries => { | ||
| entries.forEach(_entry => { | ||
| $$invalidate(0, entry = _entry); | ||
| $$invalidate(1, intersecting = _entry.isIntersecting); | ||
| }); | ||
| }, | ||
| { root, rootMargin, threshold }); | ||
| if (typeof window !== "undefined") { | ||
| observer = new IntersectionObserver(entries => { | ||
| entries.forEach(_entry => { | ||
| $$invalidate(0, entry = _entry); | ||
| $$invalidate(1, intersecting = _entry.isIntersecting); | ||
| }); | ||
| }, | ||
| { root, rootMargin, threshold }); | ||
| } | ||
| } | ||
@@ -423,0 +425,0 @@ }; |
| { | ||
| "name": "svelte-intersection-observer", | ||
| "version": "0.4.0", | ||
| "version": "0.5.0", | ||
| "license": "MIT", | ||
@@ -20,10 +20,5 @@ "description": "Detect if an element is in the viewport using the Intersection Observer API", | ||
| "devDependencies": { | ||
| "@rollup/plugin-node-resolve": "^11.0.1", | ||
| "@tsconfig/svelte": "^1.0.10", | ||
| "rollup": "^2.35.1", | ||
| "rollup-plugin-svelte": "^7.0.0", | ||
| "svelte": "^3.31.0", | ||
| "svelte-check": "^1.1.23", | ||
| "svelte-readme": "^1.1.0", | ||
| "typescript": "^4.1.3" | ||
| "svelte": "^3.31.2", | ||
| "svelte-check": "^1.1.28", | ||
| "svelte-readme": "^3.0.0" | ||
| }, | ||
@@ -30,0 +25,0 @@ "repository": { |
| # svelte-intersection-observer | ||
| [![NPM][npm]][npm-url] | ||
| [![Build][build]][build-badge] | ||
@@ -10,2 +9,4 @@ > Detect if an element is in the viewport using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry). | ||
| <!-- TOC --> | ||
| ## Install | ||
@@ -21,2 +22,3 @@ | ||
| <!-- prettier-ignore-start --> | ||
| ```svelte | ||
@@ -30,16 +32,11 @@ <script> | ||
| <header> | ||
| <strong>Scroll down.</strong> | ||
| <div> | ||
| Element in view? | ||
| <strong class:intersecting>{intersecting ? 'Yes' : 'No'}</strong> | ||
| </div> | ||
| <header class:intersecting> | ||
| {intersecting ? 'Element is in view' : 'Element is not in view'} | ||
| </header> | ||
| <IntersectionObserver {element} bind:intersecting> | ||
| <div bind:this={element}> | ||
| {#if intersecting}Element is in view{/if} | ||
| </div> | ||
| <div bind:this={element}>Hello world</div> | ||
| </IntersectionObserver> | ||
| ``` | ||
| <!-- prettier-ignore-end --> | ||
@@ -56,3 +53,2 @@ ## API | ||
| | 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) | | ||
@@ -69,4 +65,6 @@ | intersecting | `true` if the observed element is intersecting the viewport | `boolean` | | ||
| ## [Changelog](CHANGELOG.md) | ||
| ## Changelog | ||
| [Changelog](CHANGELOG.md) | ||
| ## License | ||
@@ -76,5 +74,3 @@ | ||
| [npm]: https://img.shields.io/npm/v/svelte-intersection-observer.svg?color=%235832c9 | ||
| [npm]: https://img.shields.io/npm/v/svelte-intersection-observer.svg?color=%23ff3e00&style=for-the-badge | ||
| [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 |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-62.5%
3
- Lines of code
- increased by0.46%
879
Worsened metrics
- Total package byte prevSize
- decreased by-0.43%
36578
- Number of lines in readme file
- decreased by-5.33%
71