@dimfeld/svelte-lazyload - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/index.js

 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
     typeof define === 'function' && define.amd ? define(factory) :
-    (global = global || self, global.Lazyload = factory());
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Lazyload = factory());
 }(this, (function () { 'use strict';
@@ -29,2 +29,5 @@
     }
+    function is_empty(obj) {
+        return Object.keys(obj).length === 0;
+    }
     function create_slot(definition, ctx, $$scope, fn) {
@@ -102,3 +105,3 @@ if (definition) {
         if (!current_component)
-            throw new Error(`Function called outside component initialization`);
+            throw new Error('Function called outside component initialization');
         return current_component;
@@ -150,2 +153,3 @@ }
             }
+            set_current_component(null);
             dirty_components.length = 0;
@@ -278,3 +282,4 @@ while (binding_callbacks.length)
             callbacks: blank_object(),
-            dirty
+            dirty,
+            skip_bound: false
         };
@@ -286,3 +291,3 @@ let ready = false;
                 if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
-                    if ($$.bound[i])
+                    if (!$$.skip_bound && $$.bound[i])
                         $$.bound[i](value);
@@ -318,2 +323,5 @@ if (ready)
     }
+    /**
+     * Base class for Svelte components. Used when dev=false.
+     */
     class SvelteComponent {
@@ -333,8 +341,12 @@ $destroy() {
         }
-        $set() {
-            // overridden by instance, if it has props
+        $set($$props) {
+            if (this.$$set && !is_empty($$props)) {
+                this.$$.skip_bound = true;
+                this.$$set($$props);
+                this.$$.skip_bound = false;
+            }
         }
     }
 
-    /* src/LazyLoad.svelte generated by Svelte v3.23.2 */
+    /* src/LazyLoad.svelte generated by Svelte v3.31.0 */
 
@@ -360,7 +372,7 @@ function create_else_block(ctx) {
 
-    // (43:2) {#if visible}
+    // (78:2) {#if visible}
     function create_if_block(ctx) {
     	let current;
-    	const default_slot_template = /*$$slots*/ ctx[6].default;
-    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[5], null);
+    	const default_slot_template = /*#slots*/ ctx[10].default;
+    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[9], null);
 
@@ -380,4 +392,4 @@ return {
     			if (default_slot) {
-    				if (default_slot.p && dirty & /*$$scope*/ 32) {
-    					update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[5], dirty, null, null);
+    				if (default_slot.p && dirty & /*$$scope*/ 512) {
+    					update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[9], dirty, null, null);
     				}
@@ -424,3 +436,5 @@ }
     			if_block.c();
-    			attr(div, "style", /*heightStyle*/ ctx[1]);
+    			attr(div, "id", /*id*/ ctx[1]);
+    			attr(div, "style", /*styleAttr*/ ctx[3]);
+    			attr(div, "class", /*classNames*/ ctx[2]);
     		},
@@ -433,3 +447,3 @@ m(target, anchor) {
     			if (!mounted) {
-    				dispose = action_destroyer(observe_action = /*observe*/ ctx[2].call(null, div));
+    				dispose = action_destroyer(observe_action = /*observe*/ ctx[4].call(null, div));
     				mounted = true;
@@ -457,2 +471,4 @@ }
     					if_block.c();
+    				} else {
+    					if_block.p(ctx, dirty);
     				}
@@ -464,5 +480,13 @@
 
-    			if (!current || dirty & /*heightStyle*/ 2) {
-    				attr(div, "style", /*heightStyle*/ ctx[1]);
+    			if (!current || dirty & /*id*/ 2) {
+    				attr(div, "id", /*id*/ ctx[1]);
     			}
+
+    			if (!current || dirty & /*styleAttr*/ 8) {
+    				attr(div, "style", /*styleAttr*/ ctx[3]);
+    			}
+
+    			if (!current || dirty & /*classNames*/ 4) {
+    				attr(div, "class", /*classNames*/ ctx[2]);
+    			}
     		},
@@ -487,3 +511,41 @@ i(local) {
 
+    const observers = new Map();
+    const entryMap = new WeakMap();
+
+    function makeObserver(rootMargin) {
+    	return new IntersectionObserver((entries, observer) => {
+    			for (let entry of entries) {
+    				if (entry.intersectionRatio > 0) {
+    					let entryData = entryMap.get(entry.target);
+
+    					if (entryData) {
+    						entryData(entry);
+    						entryMap.delete(entry.target);
+    					}
+
+    					observer.unobserve(entry.target);
+    				}
+    			}
+    		},
+    	{ rootMargin });
+    }
+
+    function listen(rootMargin, element, callback) {
+    	let observer = observers.get(rootMargin);
+
+    	if (!observer) {
+    		observer = makeObserver(rootMargin);
+    	}
+
+    	entryMap.set(element, callback);
+    	observer.observe(element);
+
+    	return () => {
+    		observer.unobserve(node);
+    		entryMap.delete(node);
+    	};
+    }
+
     function instance($$self, $$props, $$invalidate) {
+    	let { $$slots: slots = {}, $$scope } = $$props;
     	const dispatch = createEventDispatcher();
@@ -493,6 +555,11 @@ let { visible = false } = $$props;
     	let { rootMargin = "20%" } = $$props;
+    	let { id = undefined } = $$props;
+    	let { style = undefined } = $$props;
+    	let { class: classNames = undefined } = $$props;
 
     	function observe(node) {
-    		if (visible || !window.IntersectionObserver) {
+    		if (visible || typeof window === "undefined" || !window.IntersectionObserver) {
+    			// Handle when visible is externally set to true, or InterserctionObserver is not available.
     			dispatch("visible");
+
     			$$invalidate(0, visible = true);
@@ -502,42 +569,46 @@ return {};
 
-    		let observer = new IntersectionObserver(entries => {
-    				if (entries[0].isIntersecting) {
-    					$$invalidate(0, visible = true);
-    					dispatch("visible");
+    		let destroy = listen(rootMargin, node, () => {
+    			dispatch("visible");
+    			$$invalidate(0, visible = true);
+    		});
 
-    					// Unobserve since there's nothing left to do.
-    					observer.unobserve(node);
-
-    					observer = null;
-    				}
-    			},
-    		{ rootMargin });
-
-    		observer.observe(node);
-
-    		return {
-    			destroy() {
-    				if (observer) observer.unobserve(node);
-    			}
-    		};
+    		return { destroy };
     	}
 
-    	let { $$slots = {}, $$scope } = $$props;
-
-    	$$self.$set = $$props => {
+    	$$self.$$set = $$props => {
     		if ("visible" in $$props) $$invalidate(0, visible = $$props.visible);
-    		if ("height" in $$props) $$invalidate(3, height = $$props.height);
-    		if ("rootMargin" in $$props) $$invalidate(4, rootMargin = $$props.rootMargin);
-    		if ("$$scope" in $$props) $$invalidate(5, $$scope = $$props.$$scope);
+    		if ("height" in $$props) $$invalidate(5, height = $$props.height);
+    		if ("rootMargin" in $$props) $$invalidate(6, rootMargin = $$props.rootMargin);
+    		if ("id" in $$props) $$invalidate(1, id = $$props.id);
+    		if ("style" in $$props) $$invalidate(7, style = $$props.style);
+    		if ("class" in $$props) $$invalidate(2, classNames = $$props.class);
+    		if ("$$scope" in $$props) $$invalidate(9, $$scope = $$props.$$scope);
     	};
 
     	let heightStyle;
+    	let styleAttr;
 
     	$$self.$$.update = () => {
-    		if ($$self.$$.dirty & /*height*/ 8) {
-    			 $$invalidate(1, heightStyle = height ? `height:${height}` : undefined);
+    		if ($$self.$$.dirty & /*height*/ 32) {
+    			 $$invalidate(8, heightStyle = height ? `height:${height}` : undefined);
     		}
+
+    		if ($$self.$$.dirty & /*heightStyle, style*/ 384) {
+    			 $$invalidate(3, styleAttr = [heightStyle, style].filter(Boolean).join(";"));
+    		}
     	};
 
-    	return [visible, heightStyle, observe, height, rootMargin, $$scope, $$slots];
+    	return [
+    		visible,
+    		id,
+    		classNames,
+    		styleAttr,
+    		observe,
+    		height,
+    		rootMargin,
+    		style,
+    		heightStyle,
+    		$$scope,
+    		slots
+    	];
     }
@@ -548,3 +619,11 @@
     		super();
-    		init(this, options, instance, create_fragment, safe_not_equal, { visible: 0, height: 3, rootMargin: 4 });
+
+    		init(this, options, instance, create_fragment, safe_not_equal, {
+    			visible: 0,
+    			height: 5,
+    			rootMargin: 6,
+    			id: 1,
+    			style: 7,
+    			class: 2
+    		});
     	}
@@ -551,0 +630,0 @@ }

package.json

 {
   "name": "@dimfeld/svelte-lazyload",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "license": "MIT",
@@ -22,9 +22,10 @@ "author": "Daniel Imfeld",
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^8.0.0",
-    "rollup": "^2.11.2",
-    "rollup-plugin-svelte": "^5.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "rollup": "^2.35.0",
+    "rollup-plugin-svelte": "^7.0.0",
     "svelte": "^3.0.0"
   },
   "keywords": [
-    "svelte", "lazyload"
+    "svelte",
+    "lazyload"
   ],
@@ -31,0 +32,0 @@ "files": [

README.md

 # svelte-lazyload
 
-This is a small component that uses an `IntersectionObserver` to delay loading some element of a page until it is coming near the viewport.
+This is a small component that uses an `IntersectionObserver` to delay loading some element of a page until it is about to enter the viewport. It exposes a property `visible` indicating if the element has been created, and also fires an event named `visible` when it loads the element.
 
-```
+```svelte
 <script>
-	import { fade } from 'svelte/transition';
-	import LazyLoad from '@dimfeld/svelte-lazyload';
-
-	let visible = false;
+  import { fade } from 'svelte/transition';
+  import LazyLoad from '@dimfeld/svelte-lazyload';
+  let visible = false;
 </script>
 
 <div style="position:fixed;top:0">
-	Visible: {visible}
+  Visible: {visible}
 </div>
@@ -20,4 +19,4 @@ <div style="height:150vh">
 
-<LazyLoad height="4rem" bind:visible>
-	<h1 in:fade={{duration: 2000 }}>Hello!</h1>
+<LazyLoad height="4rem" bind:visible on:visible={() => console.log('visible!')}>
+  <h1 in:fade={{duration: 2000 }}>Hello!</h1>
 </LazyLoad>
@@ -24,0 +23,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

40217

increased by18.31%

Number of package files

7

increased by16.67%

Lines of code

1141

increased by13.99%

Worsened metrics

Number of lines in readme file

25

decreased by-3.85%

No dependency changes