svelte-intersection-observer - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

CHANGELOG.md

@@ -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 @@

lib/index.js

@@ -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 @@ };

package.json

 {
   "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": {

README.md

 # 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

No alert changes

Improved metrics

Dev dependency count

3

-62.5%

Lines of code

879

0.46%

Worsened metrics

Total package byte prevSize

36578

-0.43%

Number of lines in readme file

71

-5.33%

No dependency changes