@hkdigital/lib-core 0.3.11 → 0.3.13

package/dist/network/loaders/image/ImageVariantsLoader.svelte.js

@@ -1,150 +1,150 @@
-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
+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/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/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/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/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 {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');
-}
+/**
+ * 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.js

@@ -1,8 +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 { 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';

package/dist/network/loaders/typedef.js

@@ -1,38 +1,38 @@
-/**
- * @typedef {object} ImageMeta
- * @property {string} src
- * @property {number} width
- * @property {number} height
- */
-
-/**
- * @typedef {ImageMeta | ImageMeta[]} ImageSource
- * Single ImageMeta object or array of ImageMeta objects
- */
-
-/**
- * @typedef {"center" | "top" | "bottom" | "left" | "right" |
- *          "left top" | "left center" | "left bottom" |
- *          "center top" | "center center" | "center bottom" |
- *          "right top" | "right center" | "right bottom" |
- *          string} ObjectPosition
- *
- * @description Accepts valid CSS object-position values including:
- * - Keywords: "center", "top", "bottom", "left", "right"
- * - Length values: "10px", "2em", "50%", etc.
- * - Percentage values: "25%", "100%", etc.
- * - Two-value combinations: "left top", "center bottom", "25% 75%"
- * - Mixed units: "left 20px", "10% center", "2em 50%"
- *
- * @example
- * "center"           // Single keyword (centers both axes)
- * "top"              // Single keyword
- * "left center"      // Two keywords
- * "25% 75%"          // Two percentages
- * "10px 20px"        // Two lengths
- * "left 25%"         // Keyword + percentage
- * "50% top"          // Percentage + keyword
- * "2em center"       // Length + keyword
- */
-
-export default {};
+/**
+ * @typedef {object} ImageMeta
+ * @property {string} src
+ * @property {number} width
+ * @property {number} height
+ */
+
+/**
+ * @typedef {ImageMeta | ImageMeta[]} ImageSource
+ * Single ImageMeta object or array of ImageMeta objects
+ */
+
+/**
+ * @typedef {"center" | "top" | "bottom" | "left" | "right" |
+ *          "left top" | "left center" | "left bottom" |
+ *          "center top" | "center center" | "center bottom" |
+ *          "right top" | "right center" | "right bottom" |
+ *          string} ObjectPosition
+ *
+ * @description Accepts valid CSS object-position values including:
+ * - Keywords: "center", "top", "bottom", "left", "right"
+ * - Length values: "10px", "2em", "50%", etc.
+ * - Percentage values: "25%", "100%", etc.
+ * - Two-value combinations: "left top", "center bottom", "25% 75%"
+ * - Mixed units: "left 20px", "10% center", "2em 50%"
+ *
+ * @example
+ * "center"           // Single keyword (centers both axes)
+ * "top"              // Single keyword
+ * "left center"      // Two keywords
+ * "25% 75%"          // Two percentages
+ * "10px 20px"        // Two lengths
+ * "left 25%"         // Keyword + percentage
+ * "50% top"          // Percentage + keyword
+ * "2em center"       // Length + keyword
+ */
+
+export default {};

package/dist/network/loaders.js

@@ -1,2 +1,2 @@
-export * from './loaders/audio.js';
-export * from './loaders/image.js';
+export * from './loaders/audio.js';
+export * from './loaders/image.js';