@hkdigital/lib-core 0.3.10 → 0.3.11

package/dist/{classes/svelte → network/loaders}/image/ImageVariantsLoader.svelte.js

@@ -1,152 +1,150 @@
-import { calculateEffectiveWidth } from '../../../util/image/index.js';
-
-import ImageLoader from './ImageLoader.svelte.js';
-
-/** @typedef {import('../../../typedef/image.js').ImageMeta} ImageMeta */
-
-export default class ImageVariantsLoader {
-  /** @type {number} */
-  #devicePixelRatio;
-
-  /** @type {ImageMeta[]} */
-  #imagesMeta;
-
-  /** @type {ImageMeta|null} */
-  #imageVariant = $state(null);
-
-  /** @type {ImageLoader|null} */
-  #imageLoader = $state(null);
-
-  #progress = $derived.by(() => {
-    if (this.#imageLoader) {
-      return this.#imageLoader.progress;
-    } else {
-      return { bytesLoaded: 0, size: 0, loaded: false };
-    }
-  });
-
-  #loaded = $derived.by(() => this.#progress?.loaded || false);
-
-  /**
-   * @param {ImageMeta[]} imagesMeta
-   */
-  constructor(imagesMeta, { devicePixelRatio = 1 } = {}) {
-    this.#devicePixelRatio = devicePixelRatio ?? 1;
-    this.#imagesMeta = [...imagesMeta].sort((a, b) => a.width - b.width);
-    // console.debug("imagesMeta",imagesMeta);
-  }
-
-  /**
-   * Set new optimal image variant or keep current
-   *
-   * @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, 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);
-
-    // console.debug("updateOptimalImageMeta", effectiveWidth, newVariant );
-
-    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();
-    }
-  }
-
-  get loaded() {
-    return this.#loaded;
-  }
-
-  get variant() {
-    return this.#imageVariant;
-  }
-
-  /**
-   * Get object URL that can be used as src parameter of an HTML image
-   *
-   * @note the objectURL should be revoked when no longer used
-   *
-   * @returns {string|null}
-   */
-  getObjectURL() {
-    // Example usage:
-    //
-    // $effect(() => {
-    //   if (variantsLoader.loaded) {
-    //     // @ts-ignore
-    //     imageUrl = variantsLoader.getObjectURL();
-    //   }
-
-    //   return () => {
-    //     if (imageUrl) {
-    //       URL.revokeObjectURL(imageUrl);
-    //       imageUrl = null;
-    //     }
-    //   };
-    // });
-
-    const blob = this.#imageLoader?.getBlob();
-
-    const url = blob ? URL.createObjectURL(blob) : null;
-
-    return url;
-  }
-
-  get progress() {
-    return this.#progress;
-  }
-
-  /**
-   * Get optimal image variant
-   *
-   * @param {number} containerWidth
-   *
-   * @returns {ImageMeta|null}
-   */
-  getOptimalImageMeta(containerWidth) {
-    if (!containerWidth) {
-      return null;
-    }
-
-    // Calculate the required width (container * DPR)
-    const requiredWidth = containerWidth * this.#devicePixelRatio;
-
-    const imagesMeta = this.#imagesMeta;
-
-    // Find the smallest image that's larger than our required width
-
-    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];
-  }
-} // end class
+import { calculateEffectiveWidth } from './utils/index.js';
+
+import ImageLoader from './ImageLoader.svelte.js';
+
+/** @typedef {import('../typedef.js').ImageMeta} ImageMeta */
+
+export default class ImageVariantsLoader {
+  /** @type {number} */
+  #devicePixelRatio;
+
+  /** @type {ImageMeta[]} */
+  #imagesMeta;
+
+  /** @type {ImageMeta|null} */
+  #imageVariant = $state(null);
+
+  /** @type {ImageLoader|null} */
+  #imageLoader = $state(null);
+
+  #progress = $derived.by(() => {
+    if (this.#imageLoader) {
+      return this.#imageLoader.progress;
+    } else {
+      return { bytesLoaded: 0, size: 0, loaded: false };
+    }
+  });
+
+  #loaded = $derived.by(() => this.#progress?.loaded || false);
+
+  /**
+   * @param {ImageMeta[]} imagesMeta
+   */
+  constructor(imagesMeta, { devicePixelRatio = 1 } = {}) {
+    this.#devicePixelRatio = devicePixelRatio ?? 1;
+    this.#imagesMeta = [...imagesMeta].sort((a, b) => a.width - b.width);
+    // console.debug("imagesMeta",imagesMeta);
+  }
+
+  /**
+   * Set new optimal image variant or keep current
+   *
+   * @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, 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);
+
+    // console.debug("updateOptimalImageMeta", effectiveWidth, newVariant );
+
+    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(newVariant);
+
+
+      this.#imageLoader.load();
+    }
+  }
+
+  get loaded() {
+    return this.#loaded;
+  }
+
+  get variant() {
+    return this.#imageVariant;
+  }
+
+  /**
+   * Get object URL that can be used as src parameter of an HTML image
+   *
+   * @note the objectURL should be revoked when no longer used
+   *
+   * @returns {string|null}
+   */
+  getObjectURL() {
+    // Example usage:
+    //
+    // $effect(() => {
+    //   if (variantsLoader.loaded) {
+    //     // @ts-ignore
+    //     imageUrl = variantsLoader.getObjectURL();
+    //   }
+
+    //   return () => {
+    //     if (imageUrl) {
+    //       URL.revokeObjectURL(imageUrl);
+    //       imageUrl = null;
+    //     }
+    //   };
+    // });
+
+    const blob = this.#imageLoader?.getBlob();
+
+    const url = blob ? URL.createObjectURL(blob) : null;
+
+    return url;
+  }
+
+  get progress() {
+    return this.#progress;
+  }
+
+  /**
+   * Get optimal image variant
+   *
+   * @param {number} containerWidth
+   *
+   * @returns {ImageMeta|null}
+   */
+  getOptimalImageMeta(containerWidth) {
+    if (!containerWidth) {
+      return null;
+    }
+
+    // Calculate the required width (container * DPR)
+    const requiredWidth = containerWidth * this.#devicePixelRatio;
+
+    const imagesMeta = this.#imagesMeta;
+
+    // Find the smallest image that's larger than our required width
+
+    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];
+  }
+} // end class

package/dist/{classes/svelte → network/loaders}/image/index.js

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

package/dist/{classes/svelte → network/loaders}/image/mocks.js

@@ -1,35 +1,35 @@
-import { CONTENT_TYPE, CONTENT_LENGTH } from '../../../constants/http/index.js';
-
-import { IMAGE_PNG } from '../../../constants/mime/image.js';
-
-/**
- * A minimal 1x1 black PNG encoded as base64
- * @constant {string}
- */
-const BASE64_PNG =
-  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==';
-
-/**
- * Create a response value that can be used by a mocked
- * fetch function
- *
- * @returns {Response}
- */
-export function createPngResponse(/* data , options */) {
-  // Convert base64 to binary
-  const binaryString = atob(BASE64_PNG);
-  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]: IMAGE_PNG,
-      [CONTENT_LENGTH]: String(bytes.length)
-    })
-  });
-
-  return response;
-}
+import { CONTENT_TYPE, CONTENT_LENGTH } from '../../../constants/http/index.js';
+
+import { IMAGE_PNG } from '../../../constants/mime/image.js';
+
+/**
+ * A minimal 1x1 black PNG encoded as base64
+ * @constant {string}
+ */
+const BASE64_PNG =
+  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==';
+
+/**
+ * Create a response value that can be used by a mocked
+ * fetch function
+ *
+ * @returns {Response}
+ */
+export function createPngResponse(/* data , options */) {
+  // Convert base64 to binary
+  const binaryString = atob(BASE64_PNG);
+  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]: IMAGE_PNG,
+      [CONTENT_LENGTH]: String(bytes.length)
+    })
+  });
+
+  return response;
+}

package/dist/{classes/svelte → network/loaders}/image/typedef.js

@@ -1,8 +1,8 @@
-/**
- * @typedef {Object} ImageMeta
- * @property {string} src - URL of the image
- * @property {number} width - Width of the image
- * @property {number} height - Height of the image
- */
-
-export default {};
+/**
+ * @typedef {Object} ImageMeta
+ * @property {string} src - URL of the image
+ * @property {number} width - Width of the image
+ * @property {number} height - Height of the image
+ */
+
+export default {};

package/dist/{util/image → network/loaders/image/utils}/index.d.ts

@@ -4,9 +4,9 @@
  * of sorted responsive image formats, so it should be the
  * largest image.
  *
- * @param {ImageMeta|ImageMeta[]} imageMeta
+ * @param {import('../../typedef.js').ImageSource} imageSource
  */
-export function toSingleImageMeta(imageMeta: ImageMeta | ImageMeta[]): import("../../typedef").ImageMeta;
+export function toSingleImageMeta(imageSource: import("../../typedef.js").ImageSource): import("../../typedef.js").ImageMeta;
 /**
  * Calculate effective width based on container dimensions and fit mode
  *

package/dist/{util/image → network/loaders/image/utils}/index.js

@@ -1,86 +1,86 @@
-/**
- * Returns the unchanged image meta object or the last item of
- * an array of ImageMeta objects. This is assumed to be a list
- * of sorted responsive image formats, so it should be the
- * largest image.
- *
- * @param {ImageMeta|ImageMeta[]} imageMeta
- */
-export function toSingleImageMeta(imageMeta) {
-  if (Array.isArray(imageMeta)) {
-    if (!imageMeta.length) {
-      throw new Error('List of ImageMeta objects is empty');
-    }
-    imageMeta = imageMeta[imageMeta.length - 1];
-  }
-
-  if (typeof imageMeta === 'object') {
-    return imageMeta;
-  } else if (!imageMeta) {
-    throw new Error('Missing [imageMeta]');
-  }
-
-  throw new Error('Invalid value for parameter [imageMeta]');
-}
-
-/**
- * Calculate effective width based on container dimensions and fit mode
- *
- * @param {object} params
- * @param {number} [params.containerWidth] Container width in pixels
- * @param {number} [params.containerHeight] Container height in pixels
- * @param {number} params.imageAspectRatio Original image aspect ratio (width/height)
- * @param {'cover'|'contain'|'fill'} [params.fit='contain'] Fit mode
- * @returns {number} Effective width needed
- */
-export function calculateEffectiveWidth({
-  containerWidth,
-  containerHeight,
-  imageAspectRatio,
-  fit = 'contain'
-}) {
-  if (containerWidth && !containerHeight) {
-    // If only width is provided, use it
-
-    return containerWidth;
-  }
-
-  if (!containerWidth && containerHeight) {
-    // If only height is provided, calculate width based on aspect ratio
-
-    return containerHeight * imageAspectRatio;
-  }
-
-  if (containerWidth && containerHeight) {
-    // If both dimensions are provided, calculate based on fit mode
-
-    const containerAspectRatio = containerWidth / containerHeight;
-
-    switch (fit) {
-      case 'fill':
-        return containerWidth;
-
-      case 'contain':
-        if (containerAspectRatio > imageAspectRatio) {
-          // Height constrained, scale width accordingly
-
-          return containerHeight * imageAspectRatio;
-        }
-        return containerWidth;
-
-      case 'cover':
-        if (containerAspectRatio < imageAspectRatio) {
-          // Height constrained, scale width accordingly
-
-          return containerHeight * imageAspectRatio;
-        }
-        return containerWidth;
-
-      default:
-        return containerWidth;
-    }
-  }
-
-  // Fallback if neither dimension is provided
-  throw new Error('Either containerWidth or containerHeight must be provided');
-}
+/**
+ * Returns the unchanged image meta object or the last item of
+ * an array of ImageMeta objects. This is assumed to be a list
+ * of sorted responsive image formats, so it should be the
+ * largest image.
+ *
+ * @param {import('../../typedef.js').ImageSource} imageSource
+ */
+export function toSingleImageMeta(imageSource) {
+  if (Array.isArray(imageSource)) {
+    if (!imageSource.length) {
+      throw new Error('List of ImageMeta objects is empty');
+    }
+    imageSource = imageSource[imageSource.length - 1];
+  }
+
+  if (typeof imageSource === 'object') {
+    return imageSource;
+  } else if (!imageSource) {
+    throw new Error('Missing [imageSource]');
+  }
+
+  throw new Error('Invalid value for parameter [imageSource]');
+}
+
+/**
+ * Calculate effective width based on container dimensions and fit mode
+ *
+ * @param {object} params
+ * @param {number} [params.containerWidth] Container width in pixels
+ * @param {number} [params.containerHeight] Container height in pixels
+ * @param {number} params.imageAspectRatio Original image aspect ratio (width/height)
+ * @param {'cover'|'contain'|'fill'} [params.fit='contain'] Fit mode
+ * @returns {number} Effective width needed
+ */
+export function calculateEffectiveWidth({
+  containerWidth,
+  containerHeight,
+  imageAspectRatio,
+  fit = 'contain'
+}) {
+  if (containerWidth && !containerHeight) {
+    // If only width is provided, use it
+
+    return containerWidth;
+  }
+
+  if (!containerWidth && containerHeight) {
+    // If only height is provided, calculate width based on aspect ratio
+
+    return containerHeight * imageAspectRatio;
+  }
+
+  if (containerWidth && containerHeight) {
+    // If both dimensions are provided, calculate based on fit mode
+
+    const containerAspectRatio = containerWidth / containerHeight;
+
+    switch (fit) {
+      case 'fill':
+        return containerWidth;
+
+      case 'contain':
+        if (containerAspectRatio > imageAspectRatio) {
+          // Height constrained, scale width accordingly
+
+          return containerHeight * imageAspectRatio;
+        }
+        return containerWidth;
+
+      case 'cover':
+        if (containerAspectRatio < imageAspectRatio) {
+          // Height constrained, scale width accordingly
+
+          return containerHeight * imageAspectRatio;
+        }
+        return containerWidth;
+
+      default:
+        return containerWidth;
+    }
+  }
+
+  // Fallback if neither dimension is provided
+  throw new Error('Either containerWidth or containerHeight must be provided');
+}

package/dist/network/loaders/image.d.ts

@@ -0,0 +1,5 @@
+export { default as ImageLoader } from "./image/ImageLoader.svelte.js";
+export { default as ImageScene } from "./image/ImageScene.svelte.js";
+export { default as ImageVariantsLoader } from "./image/ImageVariantsLoader.svelte.js";
+export * from "./image/utils/index.js";
+export * from "./image/typedef.js";

package/dist/network/loaders/image.js

@@ -0,0 +1,8 @@
+export { default as ImageLoader } from './image/ImageLoader.svelte.js';
+export { default as ImageScene } from './image/ImageScene.svelte.js';
+export { default as ImageVariantsLoader } from './image/ImageVariantsLoader.svelte.js';
+
+export * from './image/utils/index.js';
+export * from './image/typedef.js';
+
+// export * from './image/constants.js';