@hkdigital/lib-sveltekit 0.0.97 → 0.0.99

package/dist/classes/svelte/image/ImageVariantsLoader.svelte.d.ts

@@ -8,9 +8,16 @@ export default class ImageVariantsLoader {
     /**
      * Set new optimal image variant or keep current
      *
-     * @param {number} containerWidth
+     * @param {object} params
+     * @param {number} [params.containerWidth] Container width
+     * @param {number} [params.containerHeight] Container height
+     * @param {'cover'|'contain'|'fill'} [params.fit='contain'] Fit mode
      */
-    updateOptimalImageMeta(containerWidth: number): void;
+    updateOptimalImageMeta({ containerWidth, containerHeight, fit }: {
+        containerWidth?: number;
+        containerHeight?: number;
+        fit?: "cover" | "contain" | "fill";
+    }): void;
     get loaded(): boolean;
     get variant(): import("./typedef.js").ImageMeta;
     /**

package/dist/classes/svelte/image/ImageVariantsLoader.svelte.js

@@ -2,6 +2,8 @@
 
 // import * as expect from '../../../util/expect/index.js';
 
+import { calculateEffectiveWidth } from '../../../util/image/index.js';
+
 import { untrack } from 'svelte';
 
 import ImageLoader from './ImageLoader.svelte.js';
@@ -21,57 +23,60 @@ export default class ImageVariantsLoader {
 
   #progress = $derived.by(() => {
     if (this.#imageLoader) {
-      // const progress = this.#imageLoader.progress;
-
       return this.#imageLoader.progress;
     } else {
       return { bytesLoaded: 0, size: 0, loaded: false };
     }
   });
 
-  #loaded = $derived(this.#progress.loaded);
+  #loaded = $derived.by(() => this.#progress?.loaded || false);
 
   /**
    * @param {ImageMeta[]} imagesMeta
    */
   constructor(imagesMeta, { devicePixelRatio = 1 } = {}) {
-    // expect.notEmptyArray( imagesMeta );
-
     this.#devicePixelRatio = devicePixelRatio ?? 1;
-
-    // Sort images meta by width ascending
     this.#imagesMeta = [...imagesMeta].sort((a, b) => a.width - b.width);
-
-    $effect(() => {
-      const variant = this.#imageVariant;
-
-      if (variant) {
-        // console.log('Load new variant', $state.snapshot(variant));
-
-        // TODO: abort loading if imageLoader exists
-
-        untrack(() => {
-          const loader = (this.#imageLoader = new ImageLoader({
-            url: variant.src
-          }));
-
-          loader.load();
-        });
-      }
-    });
   }
 
   /**
    * Set new optimal image variant or keep current
    *
-   * @param {number} containerWidth
+   * @param {object} params
+   * @param {number} [params.containerWidth] Container width
+   * @param {number} [params.containerHeight] Container height
+   * @param {'cover'|'contain'|'fill'} [params.fit='contain'] Fit mode
    */
-  updateOptimalImageMeta(containerWidth) {
-    const newVariant = this.getOptimalImageMeta(containerWidth);
+  updateOptimalImageMeta({ containerWidth, containerHeight, fit = 'contain' }) {
+    const baseImage = this.#imagesMeta[0];
+    const imageAspectRatio = baseImage.width / baseImage.height;
+
+    const effectiveWidth = calculateEffectiveWidth({
+      containerWidth,
+      containerHeight,
+      imageAspectRatio,
+      fit
+    });
+
+    const newVariant = this.getOptimalImageMeta(effectiveWidth);
 
-    if (!newVariant || !this.#imageVariant || newVariant.width > this.#imageVariant.width) {
-      // Only update imageVariant is width is larger
+    if (
+      !newVariant ||
+      !this.#imageVariant ||
+      newVariant.width > this.#imageVariant.width
+    ) {
       this.#imageVariant = newVariant;
+
+      // Create and start loader here directly when variant changes
+      if (this.#imageLoader?.initial) {
+        this.#imageLoader.unload();
+      }
+
+      this.#imageLoader = new ImageLoader({
+        imageMeta: newVariant
+      });
+
+      this.#imageLoader.load();
     }
   }
 
@@ -137,7 +142,9 @@ export default class ImageVariantsLoader {
 
     // Find the smallest image that's larger than our required width
 
-    const optimal = imagesMeta.find((current) => current.width >= requiredWidth);
+    const optimal = imagesMeta.find(
+      (current) => current.width >= requiredWidth
+    );
 
     // Fall back to the largest image if nothing is big enough
     return optimal || imagesMeta[imagesMeta.length - 1];

package/dist/components/image/EnhancedImage.svelte__

@@ -0,0 +1,162 @@
+<script>
+  import { onMount } from 'svelte';
+
+  /**
+   * @example
+   * import { EnhancedImage }
+   *   from '$lib/components/EnhancedImage/index.js';
+   *
+   * <EnhancedImage
+   *   classes="aspect-video max-h-svh w-full border-8 border-pink-500"
+   *   src={NeonLightsOff}
+   *   onload={() => {
+   *     console.log('loaded');
+   *   }}
+   * />
+   */
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   classes?: string,
+   *   overflow?: string,
+   *   aspect?: string,
+   *   fit?: string,
+   *   position?: string,
+   *   src: string | import('$lib/typedef/image.js').Picture,
+   *   alt?: string,
+   *   onload?: ( e: (Event|{ type: string, target: HTMLImageElement }) ) => void,
+   *   onerror?: ( e: (Event|{ type: string, target: HTMLImageElement }) ) => void,
+   *   loading?: string
+   * } & { [attr: string]: * }}
+   */
+  let {
+    // Style
+    base,
+    bg,
+    classes,
+
+    overflow = 'overflow-clip',
+    aspect,
+
+    fit = 'contain',
+    position = 'left top',
+
+    src,
+    alt = '',
+    onload,
+    onerror,
+    loading,
+
+    // Attributes
+    ...attrs
+  } = $props();
+
+  // let show = $state(false);
+
+  /** @type {HTMLDivElement|undefined} */
+  let imgBoxElem = $state();
+
+  /** @type {HTMLImageElement|undefined} */
+  let imgElem = $state();
+
+  /** @type {string | import('$lib/typedef/image.js').Picture} */
+  let src_;
+
+  $effect(() => {
+    if (src_ && src !== src_) {
+      throw new Error('Property [src] change is not supported');
+    }
+  });
+
+  let aspectStyle = $state('');
+
+  // > Event names
+  const LOAD = 'load';
+  const ERROR = 'error';
+
+  // > onMount
+
+  onMount(() => {
+    // show = true;
+
+    imgElem = imgBoxElem?.getElementsByTagName('img')[0];
+
+    if (!imgElem) {
+      throw new Error('Missing IMG element');
+    }
+
+    // > Auto set box aspect to same as image aspect if not set
+
+    if (!aspect) {
+      aspectStyle = `${imgElem.width / imgElem.height}`;
+    } else {
+      aspectStyle = '';
+    }
+
+    // > Register image onload and onerror handlers
+
+    /** @type {( e: Event ) => void} */
+    let onloadFn;
+
+    if (onload) {
+      if (imgElem?.complete) {
+        onload({ type: LOAD, target: imgElem });
+      } else {
+        onloadFn = onload;
+        imgElem?.addEventListener(LOAD, onloadFn);
+      }
+    }
+
+    /** @type {( e: Event ) => void} */
+    let onerrorFn;
+
+    if (onerror) {
+      onerrorFn = onerror;
+      imgElem?.addEventListener(ERROR, onerrorFn);
+    }
+
+    return () => {
+      if (onloadFn) {
+        imgElem?.removeEventListener(LOAD, onloadFn);
+      }
+
+      if (onerrorFn) {
+        imgElem?.removeEventListener(ERROR, onerrorFn);
+      }
+    };
+  });
+</script>
+
+<div
+  data-hk-enhanced-image
+  bind:this={imgBoxElem}
+  class="{base} {bg} {aspect} {overflow} {classes}"
+  style:--fit={fit}
+  style:--pos={position}
+  style:aspect-ratio={aspectStyle}
+  {...attrs}
+>
+  <enhanced:img {src} {alt} />
+</div>
+
+<style>
+  [data-hk-enhanced-image],
+  :global([data-hk-enhanced-image] picture),
+  :global([data-hk-enhanced-image] img) {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  :global([data-hk-enhanced-image] picture),
+  :global([data-hk-enhanced-image] img) {
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  :global([data-hk-enhanced-image] img) {
+    object-fit: var(--fit);
+    object-position: var(--pos);
+  }
+</style>

package/dist/components/image/ImageBox.svelte

@@ -1,93 +1,26 @@
 <script>
-	import { onMount } from 'svelte';
-
 	import { ImageLoader } from '../../classes/svelte/image/index.js';
-
+	import { ImageVariantsLoader } from '../../classes/svelte/image/index.js';
 	import { toSingleImageMeta } from '../../util/image/index.js';
 
 	/**
-	 * @example
-	 * import { ImageBox } from '/path/to/ImageBox/index.js';
-	 *
-	 * // @note 'as=metadata' is set by the preset
-	 * import NeonLightsOff from '../../img/NeonLightsOff.jpg?preset=gradient';
-	 *
-   * <!-- Example that fits in an outer-box -->
-   *
-   * <div class="outer-box">
-   *   <ImageBox image={ArmyGreen} fit="contain" position="center center" />
-   * </div>
-   *
-   * <!-- Examples that has have width, height or aspect set -->
-   *
-   * <ImageBox
-   *   image={ArmyGreen}
-   *   fit="contain"
-   *   position="center center"
-   *   width="w-[200px]"
-   *   height="h-[200px]"
-   *   classes="border-8 border-green-500"
-   * />
-   *
-   * <ImageBox
-   *   image={ArmyGreen}
-   *   fit="contain"
-   *   position="center center"
-   *   width="w-[200px]"
-   *   aspect="aspect-square"
-   *   classes="border-8 border-green-500"
-   * />
-   *
-   * <ImageBox
-   *   image={ArmyGreen}
-   *   fit="contain"
-   *   position="center center"
-   *   height="h-[200px]"
-   *   aspect="aspect-square"
-   *   classes="border-8 border-green-500"
-   * />
-   *
-   * <!-- Or hack it using !important -->
-   *
-   * <ImageBox
-   *   image={ArmyGreen}
-   *   fit="contain"
-   *   position="center center"
-   *   classes="!w-[200px] !h-[200px] border-8 border-green-500"
-   * />
+	 * @type {{
+	 *   base?: string,
+	 *   bg?: string,
+	 *   classes?: string,
+	 *   width?: string,
+	 *   height?: string,
+	 *   aspect?: string,
+	 *   overflow?: string,
+	 *   fit?: 'contain' | 'cover' | 'fill',
+	 *   position?: string,
+	 *   imageMeta: import('../../config/typedef.js').ImageMeta | import('../../config/typedef.js').ImageMeta[],
+	 *   imageLoader?: import('../../classes/svelte/image/index.js').ImageLoader,
+	 *   alt?: string,
+	 *   onProgress?: (progress: import('../../classes/svelte/network-loader/typedef.js').LoadingProgress) => void,
+	 *   [attr: string]: any
+	 * }}
 	 */
-
-	/**
-   * @typedef {import('./typedef.js').ObjectFit} ObjectFit
-   * @typedef {import('./typedef.js').ObjectPosition} ObjectPosition
-   *
-   * @typedef {import('../../classes/svelte/network-loader/typedef.js').LoadingProgress} LoadingProgress
-   *
-   * @typedef {import('../../config/typedef.js').ImageMeta} ImageMeta
-   *
-   * @typedef {Object} Props
-   * @property {string} [base] - Base styling class
-   * @property {string} [bg] - Background styling class
-   * @property {string} [classes] - Additional CSS classes
-   * @property {string} [width] - Width of the image container
-   * @property {string} [height] - Height of the image container
-   * @property {string} [aspect] - Aspect ratio of the image container
-   * @property {string} [overflow] - Overflow behavior
-   * @property {ObjectFit} [fit] - Object-fit property
-   * @property {ObjectPosition} [position] - Object-position property
-   *
-   * @property {ImageMeta|ImageMeta[]} [imageMeta]
-   *   Image metadata, TODO: array of image metadata for responsive image
-   *
-   * @property {ImageLoader} [imageLoader]
-   *   Image loader
-   *
-   * @property {string} [alt] - Alternative text for the image
-   * @property {() => LoadingProgress} [onProgress] - Progress callback function
-   * @property {*} [attr] - Additional arbitrary attributes
-   */
-
-	/** @type {Props} */
 	let {
 		// Style
 		base,
@@ -95,111 +28,101 @@
 		classes,
 		width,
 		height,
-    aspect,
+		aspect,
 		overflow = 'overflow-clip',
 
-    // Fitting and positioning of image in its container
+		// Fitting and positioning of image in its container
 		fit = 'contain',
 		position = 'left top',
 
-    // Image meta data
+		// Image data
 		imageMeta,
-
 		imageLoader,
 
+		// Accessibility
 		alt = '',
 
-		// Attributes
+		// Events
+		onProgress,
+
+		// Additional attributes
 		...attrs
 	} = $props();
 
-  if( !imageMeta )
-  {
-    throw new Error('Missing [imageMeta]');
-  }
-
-	// let show = $state(false);
+	if (!imageMeta) {
+		throw new Error('Missing [imageMeta]');
+	}
 
 	/** @type {HTMLDivElement|undefined} */
-	let imgBoxElem = $state();
-
-	/** @type {HTMLImageElement|undefined} */
-	let imgElem = $state();
+	let containerElem = $state();
 
-	let aspectStyle = $state('');
-
-	// > Loading
+	let imageMeta_ = $state();
+	let variantsLoader = $state();
+	let variantObjectUrl = $state(null);
+	let objectUrl = $state(null);
 
+	// For single image meta
 	let metaWidth = $state(0);
 	let metaHeight = $state(0);
 
-	let imageMeta_ = $state();
+	/** @type {ImageLoader|undefined} */
+	let imageLoader_ = $state();
 
 	$effect(() => {
-		if( imageMeta )
-		{
-			imageMeta_ = toSingleImageMeta( imageMeta );
+		// Setup variants loader for responsive images
+		if (Array.isArray(imageMeta) && !imageLoader && !variantsLoader) {
+			variantsLoader = new ImageVariantsLoader(imageMeta, {
+				devicePixelRatio: window.devicePixelRatio
+			});
+		}
+		// Handle single image meta
+		else if (imageMeta && !variantsLoader) {
+			imageMeta_ = toSingleImageMeta(imageMeta);
 		}
 	});
 
+	// Handle progress reporting
 	$effect(() => {
-		//
-		// Set meta width and height
-		//
-		if (imageMeta_) {
-			if (imageMeta_.width) {
-				metaWidth = imageMeta_.width;
-			}
+		if (!onProgress) return;
 
-			if (imageMeta_.height) {
-				metaHeight = imageMeta_.height;
-			}
+		// Report progress from variants loader
+		if (variantsLoader) {
+			onProgress(variantsLoader.progress);
+		}
+		// Report progress from single image loader
+		else if (imageLoader_) {
+			onProgress(imageLoader_.progress);
 		}
 	});
 
-	/** @type {ImageLoader|undefined} */
-	let imageLoader_ = $state();
+	$effect(() => {
+		if (imageMeta_) {
+			metaWidth = imageMeta_.width ?? 0;
+			metaHeight = imageMeta_.height ?? 0;
+		}
+	});
 
-	$effect( () => {
-		//
-		// User supplied imageLoader instead of imageMeta
-		//
-		if( !imageMeta && imageLoader && !imageLoader_ )
-		{
+	$effect(() => {
+		if (!imageMeta && imageLoader && !imageLoader_) {
 			imageLoader_ = imageLoader;
 			imageMeta_ = imageLoader.imageMeta;
 		}
-	} );
-
-	/** @type {string|null} */
-	let objectUrl = $state(null);
+	});
 
 	$effect(() => {
-		//
-		// Create image loader
-		//
 		if (imageMeta_ && !imageLoader_) {
 			imageLoader_ = new ImageLoader({ imageMeta: imageMeta_ });
 		}
 	});
 
 	$effect(() => {
-		//
-		// Start loading if imageLoader_ is in state 'initial'
-		//
-		// TODO: implement lazy flag
-		//
 		if (imageLoader_?.initial) {
 			imageLoader_.load();
 		}
 	});
 
 	$effect(() => {
-		//
-		// Get objectUrl when the image has finished loading
-		//
-		if (imageLoader_.loaded) {
-			// @ts-ignore
+		if (imageLoader_?.loaded) {
 			objectUrl = imageLoader_.getObjectURL();
 		}
 
@@ -211,26 +134,62 @@
 		};
 	});
 
+	$effect(() => {
+		if (!containerElem || !variantsLoader) return;
+
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const { width, height } = entry.contentRect;
+				variantsLoader.updateOptimalImageMeta({
+					containerWidth: width,
+					containerHeight: height,
+					fit
+				});
+			}
+		});
+
+		resizeObserver.observe(containerElem);
+		return () => resizeObserver.disconnect();
+	});
+
+	$effect(() => {
+		if (variantsLoader?.loaded) {
+			variantObjectUrl = variantsLoader.getObjectURL();
+		}
+
+		return () => {
+			if (variantObjectUrl) {
+				URL.revokeObjectURL(variantObjectUrl);
+				variantObjectUrl = null;
+			}
+		};
+	});
 </script>
 
 <div
 	data-image="box"
-	bind:this={imgBoxElem}
+	bind:this={containerElem}
 	class="{base} {bg} {aspect} {overflow} {width} {height} {classes}"
 	style:--fit={fit}
 	style:--pos={position}
-	style:aspect-ratio={aspectStyle}
 	style:width={width || (height && aspect) ? undefined : '100%'}
 	style:height={height || (width && aspect) ? undefined : '100%'}
 	{...attrs}
 >
-	{#if metaWidth && metaHeight}
+	{#if variantsLoader?.loaded && variantObjectUrl}
+		<img
+			src={variantObjectUrl}
+			{alt}
+			width={variantsLoader.variant.width}
+			height={variantsLoader.variant.height}
+		/>
+	{:else if objectUrl && metaWidth && metaHeight}
 		<img src={objectUrl} {alt} width={metaWidth} height={metaHeight} />
 	{/if}
 </div>
 
 <style>
-	[data-image="box"] {
+	[data-image='box'] {
 		max-width: 100%;
 		max-height: 100%;
 	}

package/dist/components/image/ImageBox.svelte.d.ts

@@ -1,60 +1,17 @@
 export default ImageBox;
 declare const ImageBox: import("svelte").Component<{
-    /**
-     * - Base styling class
-     */
+    [attr: string]: any;
     base?: string;
-    /**
-     * - Background styling class
-     */
     bg?: string;
-    /**
-     * - Additional CSS classes
-     */
     classes?: string;
-    /**
-     * - Width of the image container
-     */
     width?: string;
-    /**
-     * - Height of the image container
-     */
     height?: string;
-    /**
-     * - Aspect ratio of the image container
-     */
     aspect?: string;
-    /**
-     * - Overflow behavior
-     */
     overflow?: string;
-    /**
-     * - Object-fit property
-     */
-    fit?: import("./typedef.js").ObjectFit;
-    /**
-     * - Object-position property
-     */
-    position?: import("./typedef.js").ObjectPosition;
-    /**
-     * Image metadata, TODO: array of image metadata for responsive image
-     */
-    imageMeta?: import("../../config/typedef.js").ImageMeta | import("../../config/typedef.js").ImageMeta[];
-    /**
-     * Image loader
-     */
-    imageLoader?: ImageLoader;
-    /**
-     * - Alternative text for the image
-     */
+    fit?: "contain" | "cover" | "fill";
+    position?: string;
+    imageMeta: import("../../config/typedef.js").ImageMeta | import("../../config/typedef.js").ImageMeta[];
+    imageLoader?: import("../../classes/svelte/image/index.js").ImageLoader;
     alt?: string;
-    /**
-     * - Progress callback function
-     */
-    onProgress?: () => import("../../classes/svelte/network-loader/typedef.js").LoadingProgress;
-    /**
-     * - Additional arbitrary attributes
-     */
-    attr?: any;
+    onProgress?: (progress: import("../../classes/svelte/network-loader/typedef.js").LoadingProgress) => void;
 }, {}, "">;
-import { ImageLoader } from '../../classes/svelte/image/index.js';