@hkdigital/lib-sveltekit 0.0.81 → 0.0.83

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

@@ -0,0 +1,39 @@
+export default class ImageVariantsLoader {
+    /**
+     * @param {ImageVariant[]} imagesMeta
+     */
+    constructor(imagesMeta: ImageVariant[], { devicePixelRatio }?: {
+        devicePixelRatio?: number;
+    });
+    /**
+     * Set new optimal image variant or keep current
+     *
+     * @param {number} containerWidth
+     */
+    updateOptimalImageVariant(containerWidth: number): void;
+    get loaded(): boolean;
+    get variant(): import("./typedef.js").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(): string | null;
+    get progress(): {
+        bytesLoaded: number;
+        size: number;
+        loaded: boolean;
+    };
+    /**
+     * Get optimal image variant
+     *
+     * @param {number} containerWidth
+     *
+     * @returns {ImageVariant|null}
+     */
+    getOptimalImageVariant(containerWidth: number): ImageVariant | null;
+    #private;
+}
+export type ImageVariant = import("./typedef.js").ImageVariant;

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

@@ -0,0 +1,151 @@
+/** @typedef {import('./typedef.js').ImageVariant} ImageVariant */
+
+// import * as expect from '@hkdigital/lib-sveltekit/util/expect/index.js';
+
+import { untrack } from 'svelte';
+
+import ImageLoader from './ImageLoader.svelte.js';
+
+export default class ImageVariantsLoader {
+  /** @type {number} */
+  #devicePixelRatio;
+
+  /** @type {ImageVariant[]} */
+  #imagesMeta;
+
+  /** @type {ImageVariant|null} */
+  #imageVariant = $state(null);
+
+  /** @type {ImageLoader|null} */
+  #imageLoader = $state(null);
+
+  #progress = $derived.by(() => {
+    if (this.#imageLoader) {
+      // const progress = this.#imageLoader.progress;
+
+      return this.#imageLoader.progress;
+    } else {
+      return { bytesLoaded: 0, size: 0, loaded: false };
+    }
+  });
+
+  #loaded = $derived(this.#progress.loaded);
+
+  /**
+   * @param {ImageVariant[]} imagesMeta
+   */
+  constructor(imagesMeta, { devicePixelRatio = 1 } = {}) {
+    // expect.notEmptyArray( imagesMeta );
+
+    this.#devicePixelRatio = devicePixelRatio ?? 1;
+
+    // Sort images meta by width ascending
+    this.#imagesMeta = [...imagesMeta].sort((a, b) => a.width - b.width);
+
+    $effect(() => {
+      const variant = this.#imageVariant;
+
+      if (variant) {
+        // console.log('Load new variant', $state.snapshot(variant));
+
+        // TODO: abort loading if imageLoader exists
+
+        untrack(() => {
+          const loader = (this.#imageLoader = new ImageLoader({
+            url: variant.src
+          }));
+
+          loader.load();
+        });
+      }
+    });
+  }
+
+  /**
+   * Set new optimal image variant or keep current
+   *
+   * @param {number} containerWidth
+   */
+  updateOptimalImageVariant(containerWidth) {
+    const newVariant = this.getOptimalImageVariant(containerWidth);
+
+    if (
+      !newVariant ||
+      !this.#imageVariant ||
+      newVariant.width > this.#imageVariant.width
+    ) {
+      // Only update imageVariant is width is larger
+      this.#imageVariant = newVariant;
+    }
+  }
+
+  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 {ImageVariant|null}
+   */
+  getOptimalImageVariant(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.d.ts

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+import {
+  CONTENT_TYPE,
+  CONTENT_LENGTH
+} from '@hkdigital/lib-sveltekit/constants/http/index.js';
+
+import { IMAGE_PNG } from '@hkdigital/lib-sveltekit/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.d.ts

@@ -0,0 +1,16 @@
+declare const _default: {};
+export default _default;
+export type ImageVariant = {
+    /**
+     * - URL of the image
+     */
+    src: string;
+    /**
+     * - Width of the image
+     */
+    width: number;
+    /**
+     * - Height of the image
+     */
+    height: number;
+};

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

@@ -0,0 +1,10 @@
+// /** @typedef {import('@hkdigital/lib-sveltekit/types/imagetools.js').ImageVariant} ImageVariant */
+
+/**
+ * @typedef {Object} ImageVariant
+ * @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/loading-state-machine/LoadingStateMachine.svelte.d.ts

@@ -0,0 +1,12 @@
+/**
+ * extends FiniteStateMachine<StatesT, EventsT>
+ */
+export default class LoadingStateMachine extends FiniteStateMachine {
+    constructor();
+    /** @type {(( state: string )=>void)|null} */
+    onenter: ((state: string) => void) | null;
+    /** The last error */
+    get error(): Error;
+    #private;
+}
+import { FiniteStateMachine } from '../final-state-machine/index.js';

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

@@ -0,0 +1,107 @@
+//import { FiniteStateMachine } from 'runed';
+
+import { FiniteStateMachine } from '../final-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: () => {
+          this.onenter?.(STATE_LOADING);
+        },
+        [CANCEL]: STATE_CANCELLED,
+        [ERROR]: STATE_ERROR,
+        [LOADED]: STATE_LOADED
+      },
+      [STATE_LOADED]: {
+        _enter: () => {
+          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;
+  }
+}

package/dist/classes/svelte/loading-state-machine/constants.d.ts

@@ -0,0 +1,12 @@
+export const STATE_INITIAL: "initial";
+export const STATE_LOADING: "loading";
+export const STATE_UNLOADING: "unloading";
+export const STATE_LOADED: "loaded";
+export const STATE_CANCELLED: "cancelled";
+export const STATE_ERROR: "error";
+export const INITIAL: "initial";
+export const LOAD: "load";
+export const CANCEL: "cancel";
+export const ERROR: "error";
+export const LOADED: "loaded";
+export const UNLOAD: "unload";

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

@@ -0,0 +1,16 @@
+export const STATE_INITIAL = 'initial';
+export const STATE_LOADING = 'loading';
+export const STATE_UNLOADING = 'unloading';
+export const STATE_LOADED = 'loaded';
+
+export const STATE_CANCELLED = 'cancelled';
+export const STATE_ERROR = 'error';
+
+// > Signals
+
+export const INITIAL = 'initial';
+export const LOAD = 'load';
+export const CANCEL = 'cancel';
+export const ERROR = 'error';
+export const LOADED = 'loaded';
+export const UNLOAD = 'unload';

package/dist/classes/svelte/loading-state-machine/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LoadingStateMachine } from "./LoadingStateMachine.svelte.js";
+export * from "./constants.js";

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

@@ -0,0 +1,3 @@
+export { default as LoadingStateMachine } from './LoadingStateMachine.svelte.js';
+
+export * from './constants.js';

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

@@ -0,0 +1,85 @@
+/**
+ * NetworkLoader instance
+ * - Loads network data from network into an ArrayBuffer
+ * - Loaded data can be transferred to an AudioBufferSourceNode
+ */
+export default class NetworkLoader {
+    /**
+     * Construct NetworkLoader
+     *
+     * @param {object} _
+     * @param {string} _.url
+     */
+    constructor({ url }: {
+        url: string;
+    });
+    _state: LoadingStateMachine;
+    state: string;
+    loaded: boolean;
+    /** @type {string|null} */
+    _url: string | null;
+    /** @type {number}  */
+    _bytesLoaded: number;
+    /** @type {number}  */
+    _size: number;
+    /**
+     * Response headers
+     * @type {Headers|null}
+     */
+    _headers: Headers | null;
+    /** @type {ArrayBuffer|null} */
+    _buffer: ArrayBuffer | null;
+    progress: {
+        bytesLoaded: number;
+        size: number;
+        loaded: boolean;
+    };
+    /** @type {null|(()=>void)} */
+    _abortLoading: null | (() => void);
+    /**
+     * Start loading all network data
+     */
+    load(): void;
+    /**
+     * Unoad all network data
+     */
+    unload(): void;
+    /**
+     * Get network data size in bytes
+     * - Info comes from the content length response header
+     *
+     * @returns {number}
+     */
+    get size(): number;
+    /**
+     * Get content type from response header
+     *
+     * @returns {string|null}
+     */
+    getContentType(): string | null;
+    /**
+     * Get data as array buffer
+     *
+     * @note If the data has been transferred, the data is
+     *       no longer available as ArrayBuffer
+     *
+     * @returns {ArrayBuffer}
+     */
+    getArrayBuffer(): ArrayBuffer;
+    /**
+     * Get data as Uint8Array
+     *
+     * @returns {Uint8Array}
+     */
+    getUint8Array(): Uint8Array;
+    /**
+     * Get data as Blob
+     * - The Blob type is set using the response header
+     *   content type
+     *
+     * @returns {Blob}
+     */
+    getBlob(): Blob;
+    #private;
+}
+import { LoadingStateMachine } from '../loading-state-machine/index.js';