svelte-imgix - npm Package Compare versions

Comparing version 2.3.0 to 2.4.0

dist/index.d.ts

 export declare function srcset(src: string): string;
 export declare function placeholder(src: string): string;
 export default function imgix(img: HTMLImageElement, src: string): {
+    update(newSrc: string): void;
     destroy(): void;
 };

dist/index.js

@@ -609,3 +609,3 @@ (function (global, factory) {
 	}
-	function imgix(img, src) {
+	function lazyImg(img, src) {
 	    let intersected = false;
@@ -624,3 +624,11 @@ const observer = new IntersectionObserver((entries, observer) => {
 	    observer.observe(img);
+	    return observer;
+	}
+	function imgix(img, src) {
+	    let observer = lazyImg(img, src);
 	    return {
+	        update(newSrc) {
+	            observer.unobserve(img);
+	            observer = lazyImg(img, newSrc);
+	        },
 	        destroy() {
@@ -627,0 +635,0 @@ observer.unobserve(img);

package.json

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

README.md

@@ -41,2 +41,10 @@ # Svelt Imgix
 
+### SSR Support
+
+Until Svelte supports actions running in SSR, you might notice images don't have a src at all until `svelte-imgix` has hydrated. As a workaround, use the `placeholder` helper function to SSR an LQIP placeholder image manually. Svelte-imgix will then hydrate from there, with the same placeholder image, and load your full srcset once the image enters the viewport.
+
+```svelte
+<img use:imgix={src} src={placeholder(src)} />
+```
+
 ### Adding Sizes
@@ -43,0 +51,0 @@

No alert changes

Improved metrics

Total package byte prevSize

35506

increased by2.61%

Lines of code

1028

increased by1.68%

Number of lines in readme file

54

increased by17.39%

No dependency changes