@hkdigital/lib-sveltekit 0.2.7 → 0.2.8

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

@@ -1,152 +1,152 @@
-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 '../../../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

package/dist/classes/svelte/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/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/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/classes/svelte/index.js

@@ -1,14 +1,14 @@
-
-export { default as AudioScene } from './audio/AudioScene.svelte.js';
-export { default as AudioLoader } from './audio/AudioLoader.svelte.js';
-
-export { default as FiniteStateMachine } from './finite-state-machine/FiniteStateMachine.svelte.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 { default as NetworkLoader } from './network-loader/NetworkLoader.svelte.js';
-
-export * from './image/typedef.js';
-export * from './network-loader/typedef.js';
+
+export { default as AudioScene } from './audio/AudioScene.svelte.js';
+export { default as AudioLoader } from './audio/AudioLoader.svelte.js';
+
+export { default as FiniteStateMachine } from './finite-state-machine/FiniteStateMachine.svelte.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 { default as NetworkLoader } from './network-loader/NetworkLoader.svelte.js';
+
+export * from './image/typedef.js';
+export * from './network-loader/typedef.js';

package/dist/classes/svelte/loading-state-machine/LoadingStateMachine.svelte.js

@@ -1,109 +1,109 @@
-//import { FiniteStateMachine } from 'runed';
-
-import { FiniteStateMachine } from '../finite-state-machine/index.js';
-
-import {
-  // > States
-  STATE_INITIAL,
-  STATE_LOADING,
-  STATE_UNLOADING,
-  STATE_LOADED,
-  STATE_CANCELLED,
-  STATE_ERROR,
-
-  // > Signals
-  INITIAL,
-  LOAD,
-  CANCEL,
-  ERROR,
-  LOADED,
-  UNLOAD
-} from './constants.js';
-
-/**
- * extends FiniteStateMachine<StatesT, EventsT>
- */
-export default class LoadingStateMachine extends FiniteStateMachine {
-  // Inherited from parent class (getter)
-  // current = $state(<string>)
-
-  /** @type {Error|null} */
-  #error = null;
-
-  /** @type {(( state: string )=>void)|null} */
-  onenter = null;
-
-  constructor() {
-    let superCalled = false;
-    super(STATE_INITIAL, {
-      [STATE_INITIAL]: {
-        _enter: () => {
-          if (superCalled) {
-            this.onenter?.(STATE_INITIAL);
-          }
-          superCalled = true;
-        },
-        [LOAD]: STATE_LOADING
-      },
-      [STATE_LOADING]: {
-        _enter: () => {
-          // console.log('LoadingStateMachine: enter LOADING');
-          this.onenter?.(STATE_LOADING);
-        },
-        [CANCEL]: STATE_CANCELLED,
-        [ERROR]: STATE_ERROR,
-        [LOADED]: STATE_LOADED
-      },
-      [STATE_LOADED]: {
-        _enter: () => {
-          // console.log('LoadingStateMachine: enter LOADED');
-          this.onenter?.(STATE_LOADED);
-        },
-        [LOAD]: STATE_LOADING,
-        [UNLOAD]: STATE_UNLOADING
-      },
-      [STATE_UNLOADING]: {
-        _enter: () => {
-          this.onenter?.(STATE_UNLOADING);
-        },
-        [ERROR]: STATE_ERROR,
-        [INITIAL]: STATE_INITIAL
-      },
-      [STATE_CANCELLED]: {
-        _enter: () => {
-          this.onenter?.(STATE_CANCELLED);
-        },
-        [LOAD]: STATE_LOADING,
-        [UNLOAD]: STATE_UNLOADING
-      },
-      [STATE_ERROR]: {
-        _enter: ({ /*from, to, event,*/ args }) => {
-          if (args[0] instanceof Error) {
-            this.#error = args[0];
-          } else {
-            const tmp = args[0]?.error;
-            if (tmp instanceof Error) {
-              this.#error = tmp;
-            } else if (typeof tmp === 'string') {
-              this.#error = new Error(tmp);
-            } else {
-              this.#error = new Error('The state machine entered STATE_ERROR');
-            }
-          }
-
-          this.onenter?.(STATE_CANCELLED);
-        },
-        _leave: () => {
-          this.#error = null;
-        },
-        [LOAD]: STATE_LOADING,
-        [UNLOAD]: STATE_UNLOADING
-      }
-    });
-  }
-
-  /** The last error */
-  get error() {
-    return this.#error;
-  }
-}
+//import { FiniteStateMachine } from 'runed';
+
+import { FiniteStateMachine } from '../finite-state-machine/index.js';
+
+import {
+  // > States
+  STATE_INITIAL,
+  STATE_LOADING,
+  STATE_UNLOADING,
+  STATE_LOADED,
+  STATE_CANCELLED,
+  STATE_ERROR,
+
+  // > Signals
+  INITIAL,
+  LOAD,
+  CANCEL,
+  ERROR,
+  LOADED,
+  UNLOAD
+} from './constants.js';
+
+/**
+ * extends FiniteStateMachine<StatesT, EventsT>
+ */
+export default class LoadingStateMachine extends FiniteStateMachine {
+  // Inherited from parent class (getter)
+  // current = $state(<string>)
+
+  /** @type {Error|null} */
+  #error = null;
+
+  /** @type {(( state: string )=>void)|null} */
+  onenter = null;
+
+  constructor() {
+    let superCalled = false;
+    super(STATE_INITIAL, {
+      [STATE_INITIAL]: {
+        _enter: () => {
+          if (superCalled) {
+            this.onenter?.(STATE_INITIAL);
+          }
+          superCalled = true;
+        },
+        [LOAD]: STATE_LOADING
+      },
+      [STATE_LOADING]: {
+        _enter: () => {
+          // console.log('LoadingStateMachine: enter LOADING');
+          this.onenter?.(STATE_LOADING);
+        },
+        [CANCEL]: STATE_CANCELLED,
+        [ERROR]: STATE_ERROR,
+        [LOADED]: STATE_LOADED
+      },
+      [STATE_LOADED]: {
+        _enter: () => {
+          // console.log('LoadingStateMachine: enter LOADED');
+          this.onenter?.(STATE_LOADED);
+        },
+        [LOAD]: STATE_LOADING,
+        [UNLOAD]: STATE_UNLOADING
+      },
+      [STATE_UNLOADING]: {
+        _enter: () => {
+          this.onenter?.(STATE_UNLOADING);
+        },
+        [ERROR]: STATE_ERROR,
+        [INITIAL]: STATE_INITIAL
+      },
+      [STATE_CANCELLED]: {
+        _enter: () => {
+          this.onenter?.(STATE_CANCELLED);
+        },
+        [LOAD]: STATE_LOADING,
+        [UNLOAD]: STATE_UNLOADING
+      },
+      [STATE_ERROR]: {
+        _enter: ({ /*from, to, event,*/ args }) => {
+          if (args[0] instanceof Error) {
+            this.#error = args[0];
+          } else {
+            const tmp = args[0]?.error;
+            if (tmp instanceof Error) {
+              this.#error = tmp;
+            } else if (typeof tmp === 'string') {
+              this.#error = new Error(tmp);
+            } else {
+              this.#error = new Error('The state machine entered STATE_ERROR');
+            }
+          }
+
+          this.onenter?.(STATE_CANCELLED);
+        },
+        _leave: () => {
+          this.#error = null;
+        },
+        [LOAD]: STATE_LOADING,
+        [UNLOAD]: STATE_UNLOADING
+      }
+    });
+  }
+
+  /** The last error */
+  get error() {
+    return this.#error;
+  }
+}