@hkdigital/lib-sveltekit 0.0.86 → 0.0.88

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

@@ -1,7 +1,7 @@
 import {
-  NetworkLoader,
-  ERROR_NOT_LOADED,
-  ERROR_TRANSFERRED
+  NetworkLoader
+  // ERROR_NOT_LOADED,
+  // ERROR_TRANSFERRED
 } from '../network-loader/index.js';
 
 /**
@@ -9,4 +9,14 @@ import {
  * - Loads image data from network
  * - The loading process can be monitored
  */
-export default class ImageLoader extends NetworkLoader {} // end class
+export default class ImageLoader extends NetworkLoader {
+  // > Inherited methods
+  //
+  // /**
+  //  * Get object URL that can be used as src parameter of an HTML image
+  //  *
+  //  * @note the objectURL should be revoked when no longer used
+  //  */
+  // getObjectUrl() {}
+  //
+} // end class

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/classes/svelte/network-loader/NetworkLoader.svelte.d.ts

@@ -80,6 +80,14 @@ export default class NetworkLoader {
      * @returns {Blob}
      */
     getBlob(): Blob;
+    /**
+     * Get object URL
+     *
+     * @note the objectURL should be revoked when no longer used
+     *
+     * @returns {string|null}
+     */
+    getObjectUrl(): string | null;
     #private;
 }
 import { LoadingStateMachine } from '../loading-state-machine/index.js';

package/dist/classes/svelte/network-loader/NetworkLoader.svelte.js

@@ -18,10 +18,7 @@ import {
 
 import * as expect from '@hkdigital/lib-sveltekit/util/expect/index.js';
 
-import {
-  httpGet,
-  loadResponseBuffer
-} from '@hkdigital/lib-sveltekit/util/http/index.js';
+import { httpGet, loadResponseBuffer } from '@hkdigital/lib-sveltekit/util/http/index.js';
 
 import { ERROR_NOT_LOADED, ERROR_TRANSFERRED } from './constants.js';
 
@@ -214,6 +211,36 @@ export default class NetworkLoader {
     return new Blob([this.getArrayBuffer()], options);
   }
 
+  /**
+   * Get object URL
+   *
+   * @note the objectURL should be revoked when no longer used
+   *
+   * @returns {string|null}
+   */
+  getObjectUrl() {
+    //
+    // Example usage:
+    //
+    // $effect(() => {
+    //   if (loader.loaded) {
+    //     // @ts-ignore
+    //     objectUrl = loader.getObjectUrl();
+    //   }
+    //
+    //   return () => {
+    //     if (objectUrl) {
+    //       URL.revokeObjectURL(objectUrl);
+    //       objectUrl = null;
+    //     }
+    //   };
+    // });
+
+    const blob = this.getBlob();
+
+    return blob ? URL.createObjectURL(blob) : null;
+  }
+
   /**
    * Internal method that initializes the loading process
    * and transitions to state LOADED when done

package/dist/classes/svelte/network-loader/mocks.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Create a response value that can be used by a mocked
+ * fetch function
+ *
+ * @returns {Response}
+ */
+export function createDataResponse(): Response;

package/dist/classes/svelte/network-loader/mocks.js

@@ -0,0 +1,30 @@
+import { CONTENT_TYPE, CONTENT_LENGTH } from '@hkdigital/lib-sveltekit/constants/http/index.js';
+
+import { OCTET_STREAM } from '@hkdigital/lib-sveltekit/constants/mime/application.js';
+
+const BASE64_DATA =
+  'UklGRnwAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YVgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+
+/**
+ * Create a response value that can be used by a mocked
+ * fetch function
+ *
+ * @returns {Response}
+ */
+export function createDataResponse(/* data , options */) {
+  const binaryString = atob(BASE64_DATA);
+  const bytes = new Uint8Array(binaryString.length);
+
+  for (let i = 0; i < binaryString.length; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+
+  const response = new Response(bytes, {
+    headers: new Headers({
+      [CONTENT_TYPE]: OCTET_STREAM,
+      [CONTENT_LENGTH]: String(bytes.length)
+    })
+  });
+
+  return response;
+}

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/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.86",
+	"version": "0.0.88",
 	"author": "Jens Kleinhout, HKdigital (https://hkdigital.nl)",
 	"license": "ISC",
 	"repository": {