svelte-intersection-observer - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1

CHANGELOG.md

@@ -8,2 +8,8 @@ # Changelog
 
+## [0.6.1](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.6.1) - 2021-04-03
+
+**Fixes**
+
+- move intersection observer instantiation to `onMount` to work in hydration use cases
+
 ## [0.6.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.6.0) - 2021-02-24
@@ -10,0 +16,0 @@

lib/index.js

@@ -89,8 +89,8 @@ (function (global, factory) {
     }
+    function onMount(fn) {
+        get_current_component().$$.on_mount.push(fn);
+    }
     function afterUpdate(fn) {
         get_current_component().$$.after_update.push(fn);
     }
-    function onDestroy(fn) {
-        get_current_component().$$.on_destroy.push(fn);
-    }
     function createEventDispatcher() {
@@ -202,18 +202,20 @@ const component = get_current_component();
     }
-    function mount_component(component, target, anchor) {
+    function mount_component(component, target, anchor, customElement) {
         const { fragment, on_mount, on_destroy, after_update } = component.$$;
         fragment && fragment.m(target, anchor);
-        // onMount happens before the initial afterUpdate
-        add_render_callback(() => {
-            const new_on_destroy = on_mount.map(run).filter(is_function);
-            if (on_destroy) {
-                on_destroy.push(...new_on_destroy);
-            }
-            else {
-                // Edge case - component was destroyed immediately,
-                // most likely as a result of a binding initialising
-                run_all(new_on_destroy);
-            }
-            component.$$.on_mount = [];
-        });
+        if (!customElement) {
+            // onMount happens before the initial afterUpdate
+            add_render_callback(() => {
+                const new_on_destroy = on_mount.map(run).filter(is_function);
+                if (on_destroy) {
+                    on_destroy.push(...new_on_destroy);
+                }
+                else {
+                    // Edge case - component was destroyed immediately,
+                    // most likely as a result of a binding initialising
+                    run_all(new_on_destroy);
+                }
+                component.$$.on_mount = [];
+            });
+        }
         after_update.forEach(add_render_callback);
@@ -243,3 +245,2 @@ }
         set_current_component(component);
-        const prop_values = options.props || {};
         const $$ = component.$$ = {
@@ -256,2 +257,3 @@ fragment: null,
             on_destroy: [],
+            on_disconnect: [],
             before_update: [],
@@ -267,3 +269,3 @@ after_update: [],
         $$.ctx = instance
-            ? instance(component, prop_values, (i, ret, ...rest) => {
+            ? instance(component, options.props || {}, (i, ret, ...rest) => {
                 const value = rest.length ? rest[0] : ret;
@@ -297,3 +299,3 @@ if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
                 transition_in(component.$$.fragment);
-            mount_component(component, options.target, options.anchor);
+            mount_component(component, options.target, options.anchor, options.customElement);
             flush();
@@ -329,3 +331,3 @@ }
 
-    /* src/IntersectionObserver.svelte generated by Svelte v3.31.2 */
+    /* src/IntersectionObserver.svelte generated by Svelte v3.35.0 */
 
@@ -414,4 +416,14 @@ const get_default_slot_changes = dirty => ({
 
-    	onDestroy(() => {
-    		if (observer) observer.disconnect();
+    	onMount(() => {
+    		$$invalidate(2, observer = new IntersectionObserver(entries => {
+    				entries.forEach(_entry => {
+    					$$invalidate(0, entry = _entry);
+    					$$invalidate(1, intersecting = _entry.isIntersecting);
+    				});
+    			},
+    		{ root, rootMargin, threshold }));
+
+    		return () => {
+    			if (observer) observer.disconnect();
+    		};
     	});
@@ -431,16 +443,2 @@
 
-    	$$self.$$.update = () => {
-    		if ($$self.$$.dirty & /*root, rootMargin, threshold*/ 224) {
-    			 if (typeof window !== "undefined") {
-    				$$invalidate(2, observer = new IntersectionObserver(entries => {
-    						entries.forEach(_entry => {
-    							$$invalidate(0, entry = _entry);
-    							$$invalidate(1, intersecting = _entry.isIntersecting);
-    						});
-    					},
-    				{ root, rootMargin, threshold }));
-    			}
-    		}
-    	};
-
     	return [
@@ -447,0 +445,0 @@ entry,

package.json

 {
   "name": "svelte-intersection-observer",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "license": "MIT",
@@ -17,8 +17,8 @@ "description": "Detect if an element is in the viewport using the Intersection Observer API",
     "prepack": "BUNDLE=true rollup -c",
-    "svelte-check": "svelte-check"
+    "test": "svelte-check"
   },
   "devDependencies": {
-    "svelte": "^3.31.2",
-    "svelte-check": "^1.1.28",
-    "svelte-readme": "^3.0.0"
+    "svelte": "^3.35.0",
+    "svelte-check": "^1.2.6",
+    "svelte-readme": "^3.1.0"
   },
@@ -25,0 +25,0 @@ "repository": {

README.md

@@ -7,4 +7,6 @@ # svelte-intersection-observer
 
-Try it in the [Svelte REPL](https://svelte.dev/repl/8cd2327a580c4f429c71f7df999bd51d?version=3.29.7).
+<!-- REPO_URL -->
 
+Try it in the [Svelte REPL](https://svelte.dev/repl/8cd2327a580c4f429c71f7df999bd51d).
+
 <!-- TOC -->
@@ -68,4 +70,4 @@
 | 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`)                                                                   |
+| rootMargin   | Margin offset of the containing element                           | `string` (default: `"0px"`)                                                                               |
+| threshold    | Percentage of element visibility 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) |
@@ -72,0 +74,0 @@ | once         | If `true`, the observed element will be unobserved upon intersect | `boolean` (default: `false`)                                                                              |

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

39978

increased by1.72%

Number of lines in readme file

95

increased by2.15%

Worsened metrics

Lines of code

937

decreased by-0.43%

No dependency changes