@hkdigital/lib-sveltekit 0.0.85 → 0.0.87

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

@@ -1,8 +1,8 @@
-export default class ImageVariantsLoader {
+export default class ImageMetasLoader {
     /**
-     * @param {ImageVariant[]} imagesMeta
+     * @param {ImageMeta[]} imagesMeta
      */
-    constructor(imagesMeta: ImageVariant[], { devicePixelRatio }?: {
+    constructor(imagesMeta: ImageMeta[], { devicePixelRatio }?: {
         devicePixelRatio?: number;
     });
     /**
@@ -10,9 +10,9 @@ export default class ImageVariantsLoader {
      *
      * @param {number} containerWidth
      */
-    updateOptimalImageVariant(containerWidth: number): void;
+    updateOptimalImageMeta(containerWidth: number): void;
     get loaded(): boolean;
-    get variant(): import("./typedef.js").ImageVariant;
+    get variant(): import("./typedef.js").ImageMeta;
     /**
      * Get object URL that can be used as src parameter of an HTML image
      *
@@ -31,9 +31,9 @@ export default class ImageVariantsLoader {
      *
      * @param {number} containerWidth
      *
-     * @returns {ImageVariant|null}
+     * @returns {ImageMeta|null}
      */
-    getOptimalImageVariant(containerWidth: number): ImageVariant | null;
+    getOptimalImageMeta(containerWidth: number): ImageMeta | null;
     #private;
 }
-export type ImageVariant = import("./typedef.js").ImageVariant;
+export type ImageMeta = import("./typedef.js").ImageMeta;

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

@@ -1,4 +1,4 @@
-/** @typedef {import('./typedef.js').ImageVariant} ImageVariant */
+/** @typedef {import('./typedef.js').ImageMeta} ImageMeta */
 
 // import * as expect from '@hkdigital/lib-sveltekit/util/expect/index.js';
 
@@ -6,14 +6,14 @@ import { untrack } from 'svelte';
 
 import ImageLoader from './ImageLoader.svelte.js';
 
-export default class ImageVariantsLoader {
+export default class ImageMetasLoader {
   /** @type {number} */
   #devicePixelRatio;
 
-  /** @type {ImageVariant[]} */
+  /** @type {ImageMeta[]} */
   #imagesMeta;
 
-  /** @type {ImageVariant|null} */
+  /** @type {ImageMeta|null} */
   #imageVariant = $state(null);
 
   /** @type {ImageLoader|null} */
@@ -32,7 +32,7 @@ export default class ImageVariantsLoader {
   #loaded = $derived(this.#progress.loaded);
 
   /**
-   * @param {ImageVariant[]} imagesMeta
+   * @param {ImageMeta[]} imagesMeta
    */
   constructor(imagesMeta, { devicePixelRatio = 1 } = {}) {
     // expect.notEmptyArray( imagesMeta );
@@ -66,8 +66,8 @@ export default class ImageVariantsLoader {
    *
    * @param {number} containerWidth
    */
-  updateOptimalImageVariant(containerWidth) {
-    const newVariant = this.getOptimalImageVariant(containerWidth);
+  updateOptimalImageMeta(containerWidth) {
+    const newVariant = this.getOptimalImageMeta(containerWidth);
 
     if (
       !newVariant ||
@@ -127,9 +127,9 @@ export default class ImageVariantsLoader {
    *
    * @param {number} containerWidth
    *
-   * @returns {ImageVariant|null}
+   * @returns {ImageMeta|null}
    */
-  getOptimalImageVariant(containerWidth) {
+  getOptimalImageMeta(containerWidth) {
     if (!containerWidth) {
       return null;
     }

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

@@ -1,2 +1,2 @@
 export { default as ImageLoader } from "./ImageLoader.svelte";
-export { default as ImageVariantsLoader } from "./ImageVariantsLoader.svelte";
+export { default as ImageMetasLoader } from "./ImageMetasLoader.svelte";

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

@@ -1,4 +1,4 @@
 export { default as ImageLoader } from './ImageLoader.svelte';
-export { default as ImageVariantsLoader } from './ImageVariantsLoader.svelte';
+export { default as ImageMetasLoader } from './ImageMetasLoader.svelte';
 
 // export * from './constants.js';

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

@@ -1,6 +1,6 @@
 declare const _default: {};
 export default _default;
-export type ImageVariant = {
+export type ImageMeta = {
     /**
      * - URL of the image
      */

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

@@ -1,7 +1,7 @@
-// /** @typedef {import('@hkdigital/lib-sveltekit/types/imagetools.js').ImageVariant} ImageVariant */
+// /** @typedef {import('@hkdigital/lib-sveltekit/types/imagetools.js').ImageMeta} ImageMeta */
 
 /**
- * @typedef {Object} ImageVariant
+ * @typedef {Object} ImageMeta
  * @property {string} src - URL of the image
  * @property {number} width - Width of the image
  * @property {number} height - Height of the image

package/dist/components/image/ResponsiveImage.svelte

@@ -1,7 +1,7 @@
 <script>
-	/** @typedef {import('../../types/imagetools.js').ImageVariant} ImageVariant */
+	/** @typedef {import('../../types/imagetools.js').ImageMeta} ImageMeta */
 
-	import { ImageVariantsLoader } from '../../classes/svelte/image/index.js';
+	import { ImageMetasLoader } from '../../classes/svelte/image/index.js';
 
 	/**
 	 * @type {{
@@ -10,7 +10,7 @@
 	 *   boxBase?: string,
 	 *   boxClasses?: string
 	 *   boxAttrs?: { [attr: string]: * },
-	 *   images: ImageVariant[],
+	 *   images: ImageMeta[],
 	 *   alt?: string
 	 * } & { [attr: string]: * }}
 	 */
@@ -29,15 +29,15 @@
 		...attrs
 	} = $props();
 
-	let variantsLoader = new ImageVariantsLoader(images);
+	let variantsLoader = new ImageMetasLoader(images);
 
 	let containerWidth = $state(0);
 
-	/** @type {ImageVariant|null} */
+	/** @type {ImageMeta|null} */
 	let imageVariant = $state(null);
 
 	$effect(() => {
-		variantsLoader.updateOptimalImageVariant(containerWidth);
+		variantsLoader.updateOptimalImageMeta(containerWidth);
 	});
 
 	// $effect(() => {

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

@@ -1,5 +1,5 @@
 export default ResponsiveImage;
-export type ImageVariant = any;
+export type ImageMeta = any;
 declare const ResponsiveImage: import("svelte").Component<{
     base?: string;
     classes?: string;
@@ -8,7 +8,7 @@ declare const ResponsiveImage: import("svelte").Component<{
     boxAttrs?: {
         [attr: string]: any;
     };
-    images: ImageVariant[];
+    images: ImageMeta[];
     alt?: string;
 } & {
     [attr: string]: any;

package/dist/components/image/index.d.ts

@@ -1,4 +1,4 @@
 export { default as ResponsiveImage } from "./ResponsiveImage.svelte";
 declare const _default: {};
 export default _default;
-export type ImageVariant = any;
+export type ImageMeta = any;

package/dist/components/image/index.js

@@ -1,4 +1,4 @@
-/** @typedef {import('../../types/imagetools.js').ImageVariant} ImageVariant */
+/** @typedef {import('../../types/imagetools.js').ImageMeta} ImageMeta */
 
 export { default as ResponsiveImage } from './ResponsiveImage.svelte';
 

package/dist/config/imagetools-config.js

@@ -7,24 +7,29 @@ const DEFAULT_PRESETS = {
 	},
 	gradient: {
 		format: 'jpg',
-		quality: '95'
+		quality: '95',
+		as: 'metadata'
 	},
 	photo: {
 		format: 'jpg',
-		quality: '95'
+		quality: '95',
+		as: 'metadata'
 	},
 	drawing: {
 		format: 'avif',
-		quality: '90'
+		quality: '90',
+		as: 'metadata'
 	},
 	savedata: {
 		format: 'avif',
-		quality: '85'
+		quality: '85',
+		as: 'metadata'
 	},
 	blur: {
 		format: 'avif',
 		quality: '50',
-		blur: '75'
+		blur: '75',
+		as: 'metadata'
 	}
 };
 
@@ -105,6 +110,7 @@ export function generateDefaultDirectives(options) {
 		if (params.has('responsive')) {
 			params.set('as', 'metadata');
 		}
+
 		// > Process presets
 
 		if (presetName) {

package/dist/types/imagetools.d.ts

@@ -1,87 +1,67 @@
 
 
-interface ImageVariant {
+interface ImageMeta {
   src: string;
   width?: number;
   height?: number;
 }
 
 declare module '*?responsive' {
-  const out: ImageVariant[];
+  const out: ImageMeta[];
   export default out;
 }
 
 declare module '*&responsive' {
-  const out: ImageVariant[];
+  const out: ImageMeta[];
   export default out;
 }
 
 declare module '*?preset=gradient' {
-  const out: ImageVariant[]|string[]|string;
+  const out: ImageMeta|ImageMeta[];
   export default out;
 }
 
 declare module '*&preset=gradient' {
-  const out: ImageVariant[]|string[]|string;
+  const out: ImageMeta|ImageMeta[];
   export default out;
 }
 
 declare module '*?preset=photo' {
-  const out: ImageVariant[]|string[]|string;
+  const out: ImageMeta|ImageMeta[];
   export default out;
 }
 
 declare module '*&preset=photo' {
-  const out: ImageVariant[]|string[]|string;
+  const out: ImageMeta|ImageMeta[];
   export default out;
 }
 
 declare module '*?preset=drawing' {
-  const out: ImageVariant[]|string[]|string;
+  const out: ImageMeta|ImageMeta[];
   export default out;
 }
 
 declare module '*&preset=drawing' {
-  const out: ImageVariant[]|string[]|string;
+  const out: ImageMeta|ImageMeta[];
   export default out;
 }
 
 declare module '*?preset=savedata' {
-  const out: ImageVariant[]|string[]|string;
+  const out: ImageMeta|ImageMeta[];
   export default out;
 }
 
 declare module '*&preset=savedata' {
-  const out: ImageVariant[]|string[]|string;
+  const out: ImageMeta|ImageMeta[];
   export default out;
 }
 
 declare module '*?preset=blur' {
-  const out: ImageVariant[]|string[]|string;
+  const out: ImageMeta|ImageMeta[];
   export default out;
 }
 
 declare module '*&preset=blur' {
-  const out: ImageVariant[]|string[]|string;
+  const out: ImageMeta|ImageMeta[];
   export default out;
-}
-
-// declare module '*&w=sm' {
-//   const src: string;
-//   export default src;
-// }
-
-// declare module '*&w=md' {
-//   const src: string;
-//   export default src;
-// }
-
-// declare module '*&w=lg' {
-//   const src: string;
-//   export default src;
-// }
-
-// declare module '*&w=hd' {
-//   const src: string;
-//   export default src;
-// }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.0.85",
+	"version": "0.0.87",
 	"author": "Jens Kleinhout, HKdigital (https://hkdigital.nl)",
 	"license": "ISC",
 	"repository": {