svelte-lazy - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

index.js

@@ -562,3 +562,92 @@ (function (global, factory) {
 
-    function create_if_block_1(ctx) {
+    function create_if_block(ctx) {
+    	let div;
+    	let show_if;
+    	let current_block_type_index;
+    	let if_block;
+    	let current;
+    	const if_block_creators = [create_if_block_1, create_if_block_2];
+    	const if_blocks = [];
+
+    	function select_block_type(ctx, dirty) {
+    		if (typeof /*placeholder*/ ctx[0] === "string") return 0;
+    		if (dirty & /*placeholder*/ 1) show_if = !!["function", "object"].includes(typeof /*placeholder*/ ctx[0]);
+    		if (show_if) return 1;
+    		return -1;
+    	}
+
+    	if (~(current_block_type_index = select_block_type(ctx, -1))) {
+    		if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+    	}
+
+    	return {
+    		c() {
+    			div = element("div");
+    			if (if_block) if_block.c();
+    			attr(div, "class", placeholderClass);
+    		},
+    		m(target, anchor) {
+    			insert(target, div, anchor);
+
+    			if (~current_block_type_index) {
+    				if_blocks[current_block_type_index].m(div, null);
+    			}
+
+    			current = true;
+    		},
+    		p(ctx, dirty) {
+    			let previous_block_index = current_block_type_index;
+    			current_block_type_index = select_block_type(ctx, dirty);
+
+    			if (current_block_type_index === previous_block_index) {
+    				if (~current_block_type_index) {
+    					if_blocks[current_block_type_index].p(ctx, dirty);
+    				}
+    			} else {
+    				if (if_block) {
+    					group_outros();
+
+    					transition_out(if_blocks[previous_block_index], 1, 1, () => {
+    						if_blocks[previous_block_index] = null;
+    					});
+
+    					check_outros();
+    				}
+
+    				if (~current_block_type_index) {
+    					if_block = if_blocks[current_block_type_index];
+
+    					if (!if_block) {
+    						if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+    						if_block.c();
+    					}
+
+    					transition_in(if_block, 1);
+    					if_block.m(div, null);
+    				} else {
+    					if_block = null;
+    				}
+    			}
+    		},
+    		i(local) {
+    			if (current) return;
+    			transition_in(if_block);
+    			current = true;
+    		},
+    		o(local) {
+    			transition_out(if_block);
+    			current = false;
+    		},
+    		d(detaching) {
+    			if (detaching) detach(div);
+
+    			if (~current_block_type_index) {
+    				if_blocks[current_block_type_index].d();
+    			}
+    		}
+    	};
+    }
+
+    // (5:66) 
+    function create_if_block_2(ctx) {
     	let switch_instance;
@@ -642,4 +731,4 @@ let switch_instance_anchor;
 
-    // (2:2) {#if typeof placeholder === 'string'}
-    function create_if_block(ctx) {
+    // (3:4) {#if typeof placeholder === 'string'}
+    function create_if_block_1(ctx) {
     	let div;
@@ -669,68 +758,38 @@ let t;
     function create_fragment(ctx) {
-    	let div;
-    	let show_if;
-    	let current_block_type_index;
-    	let if_block;
+    	let if_block_anchor;
     	let current;
-    	const if_block_creators = [create_if_block, create_if_block_1];
-    	const if_blocks = [];
+    	let if_block = /*placeholder*/ ctx[0] && create_if_block(ctx);
 
-    	function select_block_type(ctx, dirty) {
-    		if (typeof /*placeholder*/ ctx[0] === "string") return 0;
-    		if (dirty & /*placeholder*/ 1) show_if = !!["function", "object"].includes(typeof /*placeholder*/ ctx[0]);
-    		if (show_if) return 1;
-    		return -1;
-    	}
-
-    	if (~(current_block_type_index = select_block_type(ctx, -1))) {
-    		if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
-    	}
-
     	return {
     		c() {
-    			div = element("div");
     			if (if_block) if_block.c();
-    			attr(div, "class", placeholderClass);
+    			if_block_anchor = empty();
     		},
     		m(target, anchor) {
-    			insert(target, div, anchor);
-
-    			if (~current_block_type_index) {
-    				if_blocks[current_block_type_index].m(div, null);
-    			}
-
+    			if (if_block) if_block.m(target, anchor);
+    			insert(target, if_block_anchor, anchor);
     			current = true;
     		},
     		p(ctx, [dirty]) {
-    			let previous_block_index = current_block_type_index;
-    			current_block_type_index = select_block_type(ctx, dirty);
-
-    			if (current_block_type_index === previous_block_index) {
-    				if (~current_block_type_index) {
-    					if_blocks[current_block_type_index].p(ctx, dirty);
-    				}
-    			} else {
+    			if (/*placeholder*/ ctx[0]) {
     				if (if_block) {
-    					group_outros();
+    					if_block.p(ctx, dirty);
 
-    					transition_out(if_blocks[previous_block_index], 1, 1, () => {
-    						if_blocks[previous_block_index] = null;
-    					});
-
-    					check_outros();
+    					if (dirty & /*placeholder*/ 1) {
+    						transition_in(if_block, 1);
+    					}
+    				} else {
+    					if_block = create_if_block(ctx);
+    					if_block.c();
+    					transition_in(if_block, 1);
+    					if_block.m(if_block_anchor.parentNode, if_block_anchor);
     				}
+    			} else if (if_block) {
+    				group_outros();
 
-    				if (~current_block_type_index) {
-    					if_block = if_blocks[current_block_type_index];
+    				transition_out(if_block, 1, 1, () => {
+    					if_block = null;
+    				});
 
-    					if (!if_block) {
-    						if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
-    						if_block.c();
-    					}
-
-    					transition_in(if_block, 1);
-    					if_block.m(div, null);
-    				} else {
-    					if_block = null;
-    				}
+    				check_outros();
     			}
@@ -748,7 +807,4 @@ },
     		d(detaching) {
-    			if (detaching) detach(div);
-
-    			if (~current_block_type_index) {
-    				if_blocks[current_block_type_index].d();
-    			}
+    			if (if_block) if_block.d(detaching);
+    			if (detaching) detach(if_block_anchor);
     		}
@@ -781,3 +837,3 @@ };
 
-    function create_else_block(ctx) {
+    function create_if_block_2$1(ctx) {
     	let placeholder_1;
@@ -832,3 +888,3 @@ let current;
     	const default_slot_or_fallback = default_slot || fallback_block();
-    	let if_block = /*contentDisplay*/ ctx[4] === "hide" && create_if_block_1$1(ctx);
+    	let if_block = /*contentDisplay*/ ctx[4] === "hide" && /*placeholder*/ ctx[1] && create_if_block_1$1(ctx);
 
@@ -868,7 +924,7 @@ return {
 
-    			if (/*contentDisplay*/ ctx[4] === "hide") {
+    			if (/*contentDisplay*/ ctx[4] === "hide" && /*placeholder*/ ctx[1]) {
     				if (if_block) {
     					if_block.p(ctx, dirty);
 
-    					if (dirty & /*contentDisplay*/ 16) {
+    					if (dirty & /*contentDisplay, placeholder*/ 18) {
     						transition_in(if_block, 1);
@@ -938,3 +994,3 @@ }
 
-    // (10:4) {#if contentDisplay === 'hide'}
+    // (10:4) {#if contentDisplay === 'hide' && placeholder}
     function create_if_block_1$1(ctx) {
@@ -988,3 +1044,3 @@ let placeholder_1;
     	let dispose;
-    	const if_block_creators = [create_if_block$1, create_else_block];
+    	const if_block_creators = [create_if_block$1, create_if_block_2$1];
     	const if_blocks = [];
@@ -994,7 +1050,9 @@
     		if (/*loaded*/ ctx[3]) return 0;
-    		return 1;
+    		if (/*placeholder*/ ctx[1]) return 1;
+    		return -1;
     	}
 
-    	current_block_type_index = select_block_type(ctx);
-    	if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+    	if (~(current_block_type_index = select_block_type(ctx))) {
+    		if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+    	}
 
@@ -1004,3 +1062,3 @@ return {
     			div = element("div");
-    			if_block.c();
+    			if (if_block) if_block.c();
     			attr(div, "class", /*rootClass*/ ctx[6]);
@@ -1010,3 +1068,7 @@ },
     			insert(target, div, anchor);
-    			if_blocks[current_block_type_index].m(div, null);
+
+    			if (~current_block_type_index) {
+    				if_blocks[current_block_type_index].m(div, null);
+    			}
+
     			current = true;
@@ -1024,20 +1086,29 @@
     			if (current_block_type_index === previous_block_index) {
-    				if_blocks[current_block_type_index].p(ctx, dirty);
+    				if (~current_block_type_index) {
+    					if_blocks[current_block_type_index].p(ctx, dirty);
+    				}
     			} else {
-    				group_outros();
+    				if (if_block) {
+    					group_outros();
 
-    				transition_out(if_blocks[previous_block_index], 1, 1, () => {
-    					if_blocks[previous_block_index] = null;
-    				});
+    					transition_out(if_blocks[previous_block_index], 1, 1, () => {
+    						if_blocks[previous_block_index] = null;
+    					});
 
-    				check_outros();
-    				if_block = if_blocks[current_block_type_index];
+    					check_outros();
+    				}
 
-    				if (!if_block) {
-    					if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
-    					if_block.c();
+    				if (~current_block_type_index) {
+    					if_block = if_blocks[current_block_type_index];
+
+    					if (!if_block) {
+    						if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+    						if_block.c();
+    					}
+
+    					transition_in(if_block, 1);
+    					if_block.m(div, null);
+    				} else {
+    					if_block = null;
     				}
-
-    				transition_in(if_block, 1);
-    				if_block.m(div, null);
     			}
@@ -1056,3 +1127,7 @@ },
     			if (detaching) detach(div);
-    			if_blocks[current_block_type_index].d();
+
+    			if (~current_block_type_index) {
+    				if_blocks[current_block_type_index].d();
+    			}
+
     			mounted = false;
@@ -1059,0 +1134,0 @@ dispose();

package.json

@@ -6,3 +6,3 @@ {
   "main": "index.js",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "types": "index.d.ts",
@@ -9,0 +9,0 @@ "repository": "leafOfTree/svelte-lazy",

README.md

 # svelte-lazy [![Build Status][1]][2] [![npm version][3]][4]
 
-A svelte component to lazyload any content including images. 
+A svelte component to lazyload any content including images. [Demo on svelte.dev/repl][5]. 
 
@@ -13,3 +13,3 @@ <p align="center">
 
-For sapper server-side rendering and [using external components][6], install it to `devDependencies`:
+For sapper server-side rendering which requires [using external components][6], install it to `devDependencies`:
 
@@ -30,4 +30,2 @@ npm i -D svelte-lazy
 
-[Demo on svelte.dev/repl][5].
-
 ## Props
@@ -39,5 +37,5 @@
 
-- `offset: Number` Default: `150`. Offset to the bottom of the viewport that triggers loading when the component is in the scope.
+- `offset: Number` Default: `150`. Offset from the top of the component to the bottom of the viewport that triggers loading when in it.
 
-> The Number value uses `px` as unit.
+    > Number values use `px` as unit.
 
@@ -66,6 +64,7 @@ - `placeholder: String|Component` Default: `null`. Placeholder before load.
 ```
-            enter viewport  /                 no image -> loaded
-not loaded --------------->
+            enter viewport  / no image                 -> loaded
+not loaded  -------------->
                             \ with image -> load event -> loaded
                                                 |
+                                                |
             show placeholder                    |     show content
@@ -103,3 +102,3 @@ ```
 
-For the maintainer, bump the version in `package.json` then run `npm publish`.
+For maintenance, bump the version in `package.json` then run `npm publish`.
 
@@ -106,0 +105,0 @@ ## Refs

No alert changes

Improved metrics

Total package byte prevSize

84009

increased by4.3%

Lines of code

2452

increased by5.6%

Worsened metrics

Number of lines in readme file

110

decreased by-0.9%

No dependency changes