svelte-lazy-image - npm Package Compare versions

Comparing version 0.0.3 to 0.1.1

index.js

 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('svelte/internal'), require('svelte')) :
   typeof define === 'function' && define.amd ? define(['svelte/internal', 'svelte'], factory) :
-  (global = global || self, global.LazyImage = factory(global.internal, global.svelte));
-}(this, function (internal, svelte) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.LazyImage = factory(global.internal, global.svelte));
+}(this, (function (internal, svelte) { 'use strict';
 
-  /* src/index.svelte generated by Svelte v3.6.5 */
+  /* src/index.svelte generated by Svelte v3.37.0 */
 
   function create_fragment(ctx) {
-  	var img, dispose;
+  	let img;
+  	let img_src_value;
+  	let mounted;
+  	let dispose;
 
+  	let img_levels = [
+  		{ src: img_src_value = /*path*/ ctx[2] },
+  		{ alt: /*alt*/ ctx[0] },
+  		/*$$restProps*/ ctx[5],
+  		{ class: "svelte-lazy-image" }
+  	];
+
+  	let img_data = {};
+
+  	for (let i = 0; i < img_levels.length; i += 1) {
+  		img_data = internal.assign(img_data, img_levels[i]);
+  	}
+
   	return {
   		c() {
   			img = internal.element("img");
-  			internal.attr(img, "src", ctx.path);
-  			internal.attr(img, "alt", ctx.alt);
-  			internal.attr(img, "class", "svelte-lazy-image");
-  			internal.toggle_class(img, "svelte-lazy-image--loaded", ctx.loaded);
-  			dispose = internal.listen(img, "load", ctx.handleLoad);
+  			internal.set_attributes(img, img_data);
+  			internal.toggle_class(img, "svelte-lazy-image--loaded", /*loaded*/ ctx[3]);
   		},
-
   		m(target, anchor) {
   			internal.insert(target, img, anchor);
-  			ctx.img_binding(img);
-  		},
+  			/*img_binding*/ ctx[9](img);
 
-  		p(changed, ctx) {
-  			if (changed.path) {
-  				internal.attr(img, "src", ctx.path);
+  			if (!mounted) {
+  				dispose = internal.listen(img, "load", /*handleLoad*/ ctx[4]);
+  				mounted = true;
   			}
+  		},
+  		p(ctx, [dirty]) {
+  			internal.set_attributes(img, img_data = internal.get_spread_update(img_levels, [
+  				dirty & /*path*/ 4 && img.src !== (img_src_value = /*path*/ ctx[2]) && { src: img_src_value },
+  				dirty & /*alt*/ 1 && { alt: /*alt*/ ctx[0] },
+  				dirty & /*$$restProps*/ 32 && /*$$restProps*/ ctx[5],
+  				{ class: "svelte-lazy-image" }
+  			]));
 
-  			if (changed.alt) {
-  				internal.attr(img, "alt", ctx.alt);
-  			}
-
-  			if (changed.loaded) {
-  				internal.toggle_class(img, "svelte-lazy-image--loaded", ctx.loaded);
-  			}
+  			internal.toggle_class(img, "svelte-lazy-image--loaded", /*loaded*/ ctx[3]);
   		},
-
   		i: internal.noop,
   		o: internal.noop,
-
   		d(detaching) {
-  			if (detaching) {
-  				internal.detach(img);
-  			}
-
-  			ctx.img_binding(null);
+  			if (detaching) internal.detach(img);
+  			/*img_binding*/ ctx[9](null);
+  			mounted = false;
   			dispose();
@@ -56,54 +65,60 @@ }
   function instance($$self, $$props, $$invalidate) {
-  	let observerCallback = function(entries, observer) {
-      entries.forEach(entry => {
-        if (entry.isIntersecting) {
-          $$invalidate('intersected', intersected = true);
-          observer.unobserve(imgElement);
-        }
-      });
-    };
+  	const omit_props_names = ["placeholder","src","alt"];
+  	let $$restProps = internal.compute_rest_props($$props, omit_props_names);
 
-    let { placeholder, src, alt } = $$props;
+  	let observerCallback = function (entries, observer) {
+  		entries.forEach(entry => {
+  			if (entry.isIntersecting) {
+  				$$invalidate(8, intersected = true);
+  				observer.unobserve(imgElement);
+  			}
+  		});
+  	};
 
-    let imgElement;
-    let path;
+  	let { placeholder } = $$props;
+  	let { src } = $$props;
+  	let { alt } = $$props;
+  	let imgElement;
+  	let path;
+  	let observer;
+  	let intersected = false;
+  	let loaded = false;
 
-    let observer;
-    let intersected = false;
-    let loaded = false;
+  	svelte.onMount(() => {
+  		observer = new IntersectionObserver(observerCallback);
+  		observer.observe(imgElement);
 
-    svelte.onMount(() => {
-      observer = new IntersectionObserver(observerCallback);
-      observer.observe(imgElement);
+  		return () => {
+  			observer.unobserve(imgElement);
+  		};
+  	});
 
-      return () => {
-        observer.unobserve(imgElement);
-      };
-    });
+  	function handleLoad() {
+  		if (!loaded && path === src) {
+  			$$invalidate(3, loaded = true);
+  		}
+  	}
 
-    function handleLoad() {
-      if (!loaded && path === src) {
-        $$invalidate('loaded', loaded = true);
-      }
-    }
-
   	function img_binding($$value) {
-  		internal.binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-  			$$invalidate('imgElement', imgElement = $$value);
+  		internal.binding_callbacks[$$value ? "unshift" : "push"](() => {
+  			imgElement = $$value;
+  			$$invalidate(1, imgElement);
   		});
   	}
 
-  	$$self.$set = $$props => {
-  		if ('placeholder' in $$props) $$invalidate('placeholder', placeholder = $$props.placeholder);
-  		if ('src' in $$props) $$invalidate('src', src = $$props.src);
-  		if ('alt' in $$props) $$invalidate('alt', alt = $$props.alt);
+  	$$self.$$set = $$new_props => {
+  		$$props = internal.assign(internal.assign({}, $$props), internal.exclude_internal_props($$new_props));
+  		$$invalidate(5, $$restProps = internal.compute_rest_props($$props, omit_props_names));
+  		if ("placeholder" in $$new_props) $$invalidate(6, placeholder = $$new_props.placeholder);
+  		if ("src" in $$new_props) $$invalidate(7, src = $$new_props.src);
+  		if ("alt" in $$new_props) $$invalidate(0, alt = $$new_props.alt);
   	};
 
-  	$$self.$$.update = ($$dirty = { intersected: 1, src: 1, placeholder: 1 }) => {
-  		if ($$dirty.intersected || $$dirty.src || $$dirty.placeholder) { $$invalidate('path', path = intersected ? src : placeholder); }
+  	$$self.$$.update = () => {
+  		if ($$self.$$.dirty & /*intersected, src, placeholder*/ 448) {
+  			$$invalidate(2, path = intersected ? src : placeholder);
+  		}
   	};
 
-  	return {
-  		placeholder,
-  		src,
+  	return [
   		alt,
@@ -114,15 +129,19 @@ imgElement,
   		handleLoad,
+  		$$restProps,
+  		placeholder,
+  		src,
+  		intersected,
   		img_binding
-  	};
+  	];
   }
 
-  class Index extends internal.SvelteComponent {
+  class Src extends internal.SvelteComponent {
   	constructor(options) {
   		super();
-  		internal.init(this, options, instance, create_fragment, internal.safe_not_equal, ["placeholder", "src", "alt"]);
+  		internal.init(this, options, instance, create_fragment, internal.safe_not_equal, { placeholder: 6, src: 7, alt: 0 });
   	}
   }
 
-  return Index;
+  return Src;
 
-}));
+})));

package.json

@@ -22,4 +22,4 @@ {
     "git-cz": "^3.3.0",
-    "rollup": "^1.16.7",
-    "rollup-plugin-svelte": "^5.1.0",
+    "rollup": "^2.45.2",
+    "rollup-plugin-svelte": "^7.1.0",
     "svelte": "^3.6.5"
@@ -35,3 +35,3 @@ },
   ],
-  "version": "0.0.3"
+  "version": "0.1.1"
 }

README.md

@@ -23,2 +23,18 @@ # svelte-lazy-image
 />
+```
+
+The component uses `$$restProps` to pass props other than `placeholder`, `src`, or `alt` to the underlying `img` element. An example using `img` attributes `srcset` and `sizes`:
+
+```html
+<script>
+  import LazyImage from 'svelte-lazy-image';
+</script>
+
+<LazyImage
+  src="https://via.placeholder.com/250?text=src"
+  placeholder="https://via.placeholder.com/250?text=placeholder"
+  alt="Lorem Ipsum"
+  srcset="https://via.placeholder.com/480 480w, https://via.placeholder.com/800 800w"
+  sizes="(max-width: 600px) 480px, 800px"
+/>
 ```

No alert changes

Improved metrics

Total package byte prevSize

10288

increased by27.79%

Lines of code

244

increased by22%

Number of lines in readme file

39

increased by69.57%

No dependency changes