svelte-remote-image 0.2.6 → 0.3.1

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.
 
 
@@ -21,13 +21,15 @@ $ npm i svelte-remote-image
 And import components and types. 
 
 ```
-	import { Image, type ImageSrc } from "svelte-remote-image";
+	import { Img, Picture, type ImgSrc, type PictureSrc } from "svelte-remote-image";
 ```
 
 ## How to use
 
 Sample code.
 
+### Img
+
 ```
 <script lang="ts">
 	import { Image, type ImageSrc } from "svelte-remote-image";
@@ -36,46 +38,39 @@ Sample code.
   const optimazerPrefix = 'https://nostr-image-optimizer.ocknamo.com/image/';
   const originalImageUrl = 'https://ocknamo.com/static/b84d6366deec053ff3fa77df01a54464/dccd3/cat.webp'
 
-	let src: ImageSrc = {
-		w: 800,
-		img: `${optimazerPrefix}width=1600,quality=70,format=webp/${originalImageUrl}`,
-		webp: [
-			{ src: `${optimazerPrefix}width=1600,quality=50,format=webp/${originalImageUrl}`, w: 1600 },
-			{ src: `${optimazerPrefix}width=800,quality=50,format=webp/${originalImageUrl}`, w: 800 }
-		],
-		jpeg: [
-			{ src: `${optimazerPrefix}width=1600,quality=50,format=jpeg/${originalImageUrl}`, w: 1600 },
-			{ src: `${optimazerPrefix}width=800,quality=50,format=jpeg/${originalImageUrl}`, w: 800 }
-		],
-		failback: originalImageUrl,
-		alt: 'blog top',
-		placeholder: { dataUri: '', color: '#c5c5c5' },
-		blur: true
-	};
+const imgSrc: ImgSrc = {
+	w: 800,
+	img: `https://ocknamo.com/cat.jpg`,
+	srssets: [
+		{
+			src: `https://ocknamo.com/cat_1600.jpg`,
+			w: 1600,
+		},
+		{
+			src: `https://ocknamo.com/cat_800.jpg`,
+			w: 800,
+		},
+	],
+	fallback: ['https://ocknamo.com/cat_fallback.jpg'],
+}
 </script>
 
-<Image {src} />
+<Img src={imgSrc} style='max-width: 400px; max-width: 80%;' />
 ```
 
 The image component renders into:
 
 ```
-<picture>
-	<source
-		srcset="https://nostr-image-optimizer.ocknamo.com/image/width=1600,quality=50,format=webp/https://ocknamo.com/static/b84d6366deec053ff3fa77df01a54464/dccd3/cat.webp 1600w, https://nostr-image-optimizer.ocknamo.com/image/width=800,quality=50,format=webp/https://ocknamo.com/static/b84d6366deec053ff3fa77df01a54464/dccd3/cat.webp 800w"
-		type="image/webp">
-	<source
-		srcset="https://nostr-image-optimizer.ocknamo.com/image/width=1600,quality=50,format=jpeg/https://ocknamo.com/static/b84d6366deec053ff3fa77df01a54464/dccd3/cat.webp 1600w, https://nostr-image-optimizer.ocknamo.com/image/width=800,quality=50,format=jpeg/https://ocknamo.com/static/b84d6366deec053ff3fa77df01a54464/dccd3/cat.webp 800w"
-		type="image/jpeg"> <img width="800"
-		style="max-width: 100%; background-color: '#c5c5c5'; display: inline;"
-		class="image-blur-loaded"
-		src="https://nostr-image-optimizer.ocknamo.com/image/width=1600,quality=70,format=webp/https://ocknamo.com/static/b84d6366deec053ff3fa77df01a54464/dccd3/cat.webp"
-		alt="blog top" loading="lazy">
-</picture>
+<img id="svelte-remote-image--6188058" width="800" style="max-width: 80%; visibility: hidden;"
+	src="https://ocknamo.com/cat_fallback.jpg" srcset="" alt="" title="" loading="lazy" class="s-6LbhuE7J5MgN">
 ```
 
 Inspired by [svelte-img](https://github.com/zerodevx/svelte-img?tab=readme-ov-file#remote-images-from-an-api).
 
+### Picture
+
+TBD
+
 ## Config
 
 ### ImageSrc
@@ -92,6 +87,10 @@ Image width.
 
 Image height.
 
+#### srssets: Srcset[]
+
+Image sources for Img component.
+
 #### webp?: Srcset[]
 
 Image sources for webp.
@@ -104,7 +103,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,
+    srcsets: []
+  };
+};
+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.srcsets ? src.srcsets.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}

@@ -38,7 +38,7 @@ const handleImgError = (e) => {
   if (e && e.type !== "error") {
     return;
   }
-  if (!src.failback) {
+  if (!src.fallback) {
     return;
   }
   const img = getImgElement();
@@ -49,21 +49,21 @@ const handleImgError = (e) => {
   if (!img.complete) {
     return;
   }
-  let failbackUrl = void 0;
-  const index = src.failback.findIndex(
+  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;
   }
   src = {
     ...src,
-    img: failbackUrl,
+    img: fallbackUrl,
     webp: [],
     jpeg: [],
     png: [],

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;
+    srcsets?: 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.6",
+	"version": "0.3.1",
 	"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",