svelte-remote-image 0.2.5 → 0.3.0

package/README.md

@@ -6,7 +6,7 @@ Display optimized, responsive and progressive images for Svelte.
 With remote image URL of CDN or other means.
 
 - Fade-in and blur on image reveal.
-- An image URL can be set to failback if an image cannot be retrieved from the source URL due to an error.
+- An image URL can be set to fallback if an image cannot be retrieved from the source URL due to an error.
 - A pre-rendered low-quality dataURI can be set as a placeholder.
 
 
@@ -47,7 +47,7 @@ Sample code.
 			{ src: `${optimazerPrefix}width=1600,quality=50,format=jpeg/${originalImageUrl}`, w: 1600 },
 			{ src: `${optimazerPrefix}width=800,quality=50,format=jpeg/${originalImageUrl}`, w: 800 }
 		],
-		failback: originalImageUrl,
+		fallback: originalImageUrl,
 		alt: 'blog top',
 		placeholder: { dataUri: '', color: '#c5c5c5' },
 		blur: true
@@ -104,7 +104,7 @@ Image sources for jpeg.
 
 Image sources for png.
 
-#### failback: string[]
+#### fallback: string[]
 
 Failback image urls.
 The order is important because the images are tested in order from the top of the array.

package/dist/components/Img.svelte

@@ -0,0 +1,74 @@
+<script>import { browser } from "$app/environment";
+import { afterUpdate } from "svelte";
+export let src;
+export let style;
+export const alt = "";
+export const title = "";
+const imgId = `svelte-remote-image-${alt.replaceAll(" ", "-")}-${Math.round(Math.random() * 1e7)}`;
+const getImgElement = () => browser ? document.getElementById(imgId) : null;
+afterUpdate(async () => {
+  const img = getImgElement();
+  if (!img) {
+    return;
+  }
+  if (img.naturalWidth !== 0 && img.naturalHeight !== 0) {
+    img.style.visibility = "visible";
+  } else {
+    handleImgError();
+  }
+});
+const handleImgError = (e) => {
+  if (e && e.type !== "error") {
+    return;
+  }
+  if (!src.fallback) {
+    return;
+  }
+  const img = getImgElement();
+  if (!img) {
+    return;
+  }
+  img.style.visibility = "hidden";
+  let fallbackUrl = void 0;
+  const index = src.fallback.findIndex(
+    (url) => new URL(url).toString() === new URL(img.src).toString()
+  );
+  if (index === -1) {
+    fallbackUrl = src.fallback[0];
+  } else {
+    fallbackUrl = src.fallback[index + 1];
+  }
+  if (!fallbackUrl) {
+    return;
+  }
+  src = {
+    ...src,
+    img: fallbackUrl,
+    srssets: []
+  };
+};
+const handleLoaded = (e) => {
+  const img = e.currentTarget;
+  img.style.visibility = "visible";
+};
+</script>
+
+	<img
+		id={imgId}
+		width={src.w}
+		height={src.h}
+		{style}
+		src={src.img}
+		srcset={src.srssets.map((s) => `${s.src} ${s.w}w`).join(', ')}
+		alt={alt}
+		title={title}
+		on:error={handleImgError}
+		on:load={handleLoaded}
+		loading="lazy"
+	/>
+
+<style>
+	img {
+		visibility: hidden;
+	}
+</style>

package/dist/components/Img.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { ImgSrc } from './type.js';
+declare const __propDef: {
+    props: {
+        src: ImgSrc;
+        style: any;
+        alt?: string | undefined;
+        title?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ImgProps = typeof __propDef.props;
+export type ImgEvents = typeof __propDef.events;
+export type ImgSlots = typeof __propDef.slots;
+export default class Img extends SvelteComponent<ImgProps, ImgEvents, ImgSlots> {
+    get alt(): string;
+    get title(): string;
+}
+export {};

package/dist/components/{Image.svelte → Picture.svelte}

@@ -24,7 +24,7 @@ $: {
 }
 afterUpdate(async () => {
   const img = getImgElement();
-  if (!img || !img.complete) {
+  if (!img) {
     return;
   }
   if (img.naturalWidth !== 0 && img.naturalHeight !== 0) {
@@ -38,7 +38,7 @@ const handleImgError = (e) => {
   if (e && e.type !== "error") {
     return;
   }
-  if (!src.failback) {
+  if (!src.fallback) {
     return;
   }
   const img = getImgElement();
@@ -46,19 +46,32 @@ const handleImgError = (e) => {
     return;
   }
   img.style.visibility = "hidden";
-  let failbackUrl = void 0;
-  const index = src.failback.findIndex(
+  if (!img.complete) {
+    return;
+  }
+  let fallbackUrl = void 0;
+  const index = src.fallback.findIndex(
     (url) => new URL(url).toString() === new URL(img.src).toString()
   );
   if (index === -1) {
-    failbackUrl = src.failback[0];
+    fallbackUrl = src.fallback[0];
   } else {
-    failbackUrl = src.failback[index + 1];
+    fallbackUrl = src.fallback[index + 1];
   }
-  if (!failbackUrl) {
+  if (!fallbackUrl) {
     return;
   }
-  img.src = failbackUrl;
+  src = {
+    ...src,
+    img: fallbackUrl,
+    webp: [],
+    jpeg: [],
+    png: [],
+    placeholder: {
+      color: src.placeholder?.color,
+      dataUri: src.placeholder?.dataUri
+    }
+  };
 };
 const handleLoaded = (e) => {
   const img = e.currentTarget;

package/dist/components/{Image.svelte.d.ts → Picture.svelte.d.ts}

@@ -1,8 +1,8 @@
 import { SvelteComponent } from "svelte";
-import type { ImageSrc } from './image.type.js';
+import type { PictureSrc } from './type.js';
 declare const __propDef: {
     props: {
-        src: ImageSrc;
+        src: PictureSrc;
         style?: string | undefined;
         alt?: string | undefined;
         title?: string | undefined;
@@ -14,10 +14,10 @@ declare const __propDef: {
     exports?: {} | undefined;
     bindings?: string | undefined;
 };
-export type ImageProps = typeof __propDef.props;
-export type ImageEvents = typeof __propDef.events;
-export type ImageSlots = typeof __propDef.slots;
-export default class Image extends SvelteComponent<ImageProps, ImageEvents, ImageSlots> {
+export type PictureProps = typeof __propDef.props;
+export type PictureEvents = typeof __propDef.events;
+export type PictureSlots = typeof __propDef.slots;
+export default class Picture extends SvelteComponent<PictureProps, PictureEvents, PictureSlots> {
     get alt(): string;
     get title(): string;
 }

package/dist/components/{image.type.d.ts → type.d.ts}

@@ -2,17 +2,24 @@ export interface Srcset {
     src: string;
     w: number;
 }
-export interface ImageSrc {
+export interface PictureSrc {
     img: string;
     w?: number;
     h?: number;
     webp?: Srcset[];
     jpeg?: Srcset[];
     png?: Srcset[];
-    failback?: string[];
+    fallback?: string[];
     placeholder?: {
         dataUri?: string;
         color?: string;
     };
     blur?: boolean;
 }
+export interface ImgSrc {
+    img: string;
+    srssets: Srcset[];
+    w?: number;
+    h?: number;
+    fallback?: string[];
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-export * from './components/image.type'
-import Image from './components/Image.svelte'
+export * from './components/type'
+import Picture from './components/Picture.svelte'
+import Img from './components/Picture.svelte'
 
-export { Image }
+export { Picture, Img }

package/dist/index.js

@@ -1,3 +1,4 @@
 // Reexport your entry components here
-import Image from './components/Image.svelte';
-export { Image };
+import Picture from './components/Picture.svelte';
+import Img from './components/Img.svelte';
+export { Picture, Img };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-remote-image",
-	"version": "0.2.5",
+	"version": "0.3.0",
 	"license": "MIT",
 	"homepage": "https://github.com/ocknamo/svelte-remote-image",
 	"scripts": {
@@ -27,7 +27,8 @@
 		"!dist/**/*.spec.*"
 	],
 	"peerDependencies": {
-		"svelte": "^4.0.0"
+		"svelte": "^4.0.0",
+		"@sveltejs/kit": "^2.0.0"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^1.8.1",