svelte-imgix - npm Package Compare versions

Comparing version 2.4.1 to 3.0.0

dist/index.d.ts

@@ -1,6 +0,14 @@
-export declare function srcset(src: string): string;
-export declare function placeholder(src: string): string;
-export default function imgix(img: HTMLImageElement, src: string): {
+export declare type ImgixProps = {
+    [key: string]: string;
+};
+export declare type SvelteImgixOptions = {
+    src: string;
+    lazyload: boolean;
+    imgixProps: ImgixProps;
+} | string;
+export default function imgix(img: HTMLImageElement, opts: SvelteImgixOptions): {
     update(newSrc: string): void;
     destroy(): void;
 };
+export { placeholder } from './lib/placeholder';
+export { srcset } from './lib/srcset';

dist/index.js

@@ -591,3 +591,8 @@ (function (global, factory) {
 	}
-	function srcset(src) {
+
+	function placeholder(src, imgixProps = {}) {
+	    return `${trimSrc(src)}?w=0.5&blur=200&px=16&auto=format&colorquant=150&${queryString.stringify(imgixProps)}`;
+	}
+
+	function srcset(src, imgixProps = {}) {
 	    const resolutions = [], sets = [];
@@ -601,3 +606,4 @@ let prev = 100;
 	        const params = {
-	            w: resolutions[i]
+	            w: resolutions[i],
+	            ...imgixProps
 	        };
@@ -608,24 +614,45 @@ sets.push(`${trimSrc(src)}?${queryString.stringify(params)} ${resolutions[i]}w`);
 	}
-	function placeholder(src) {
-	    return `${trimSrc(src)}?w=0.5&blur=200&px=16&auto=format&colorquant=150`;
-	}
-	function lazyImg(img, src) {
-	    const observer = new IntersectionObserver((entries, observer) => {
-	        if (entries[0].isIntersecting) {
-	            img.src = src;
-	            img.srcset = srcset(src);
-	            observer.unobserve(img);
-	        }
-	    });
-	    img.srcset = '';
-	    img.src = placeholder(src);
-	    observer.observe(img);
-	    return observer;
-	}
-	function imgix(img, src) {
-	    let observer = lazyImg(img, src);
+
+	const DEFAULTS = {
+	    src: '',
+	    lazyload: false,
+	    imgixProps: {}
+	};
+	function imgix(img, opts) {
+	    const src = typeof opts === 'string' ? opts : opts.src, { imgixProps, lazyload } = Object.assign(DEFAULTS, typeof opts === 'object' ? opts : {});
+	    function hydrate(s) {
+	        img.src = s;
+	        img.srcset = srcset(s, imgixProps);
+	    }
+	    function reset(s) {
+	        img.srcset = '';
+	        img.src = placeholder(s, imgixProps);
+	    }
+	    function lazyImg(s) {
+	        const observer = new IntersectionObserver((entries, observer) => {
+	            if (entries[0].isIntersecting) {
+	                hydrate(s);
+	                observer.unobserve(img);
+	            }
+	        });
+	        return observer;
+	    }
+	    let observer = lazyImg(src);
+	    if (lazyload) {
+	        reset(src);
+	        observer.observe(img);
+	    }
+	    else {
+	        hydrate(src);
+	    }
 	    return {
 	        update(newSrc) {
-	            observer.unobserve(img);
-	            observer = lazyImg(img, newSrc);
+	            if (lazyload) {
+	                reset(src);
+	                observer.unobserve(img);
+	                observer = lazyImg(newSrc);
+	            }
+	            else {
+	                hydrate(newSrc);
+	            }
 	        },
@@ -632,0 +659,0 @@ destroy() {

package.json

 {
   "name": "svelte-imgix",
   "description": "Svelte action for responsive, lazily-loaded images with Imgix",
-  "version": "2.4.1",
+  "version": "3.0.0",
   "license": "MIT",
@@ -6,0 +6,0 @@ "author": "Madeleine Ostoja",

README.md

@@ -5,8 +5,8 @@ # Svelt Imgix
 
-Svelte action for responsive, lazily-loaded images with Imgix
+Svelte action for generating responsive, lazily-loaded images with Imgix
 
 ### Features
 
-- Lazy loading with automatic LQIP placeholders
 - Generate responsive image `srcsets` automatically
+- Optional lazy loading with automatic LQIP placeholders
 
@@ -24,8 +24,29 @@ ### Basic Usage
 
-<img use:imgix="some-imgix-img.jpeg" />
+<img use:imgix="https://assets.imgix.net/unsplash/vintagecameras.jpg" />
 ```
 
+### With config
+
+Rather than passing a `src` image to `use:imgix`, you can pass a full configuration object with the following properties
+
+| Property     | Default | Description                                         |
+| ------------ | ------- | --------------------------------------------------- |
+| `src`        | `''`    | Src of the image                                    |
+| `lazyload`   | `false` | Delay loading the full res image until it's in view |
+| `imgixProps` | `{}`    | Additional imgix properties to pass to the image    |
+
+```svelte
+<img use:imgix={{
+  src: 'https://assets.imgix.net/unsplash/vintagecameras.jpg',
+  lazyload: false,
+  imgixParams: {
+    fit: 'crop',
+    ar:  '16:9'
+  }
+}} />
+```
+
 ### Helper functions
 
-Svelte Imgix exports 2 additional helper functions that you can use to create LQIP placeholders and responsive srcsets yourself, `placeholder(src)` and `srcset(src`;
+Svelte Imgix exports 2 additional helpers that you can use to create responsive source sets and LQIP placeholders yourself, `srcset(src)` and `placeholder(src)`;
 
@@ -37,6 +58,7 @@ ```svelte
 
+  let src = '';
   let intersected = false;
 </script>
 
-<img src={intersected ? srcset(imgixImg) : placeholder(imgixImg)} use:invew on:enter={() => intersected = true} />
+<img src={intersected ? src : placeholder(src)} srcset={intersected ? srcset(src} : ''} use:invew on:enter={() => intersected = true} />
 ```
@@ -43,0 +65,0 @@

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

38007

increased by7.51%

Number of package files

9

increased by50%

Lines of code

1083

increased by5.97%

Number of lines in readme file

76

increased by40.74%

No dependency changes