@hkdigital/lib-sveltekit 0.0.81 → 0.0.83

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

@@ -0,0 +1,295 @@
+import { CONTENT_TYPE } from '@hkdigital/lib-sveltekit/constants/http/index.js';
+
+import {
+  LoadingStateMachine,
+  STATE_INITIAL,
+  STATE_LOADING,
+  STATE_UNLOADING,
+  STATE_LOADED,
+  STATE_CANCELLED,
+  STATE_ERROR,
+  LOAD,
+  // CANCEL,
+  ERROR,
+  LOADED,
+  UNLOAD,
+  INITIAL
+} from '../loading-state-machine/index.js';
+
+import * as expect from '@hkdigital/lib-sveltekit/util/expect/index.js';
+
+import {
+  httpGet,
+  loadResponseBuffer
+} from '@hkdigital/lib-sveltekit/util/http/index.js';
+
+import { ERROR_NOT_LOADED, ERROR_TRANSFERRED } from './constants.js';
+
+/**
+ * NetworkLoader instance
+ * - Loads network data from network into an ArrayBuffer
+ * - Loaded data can be transferred to an AudioBufferSourceNode
+ */
+export default class NetworkLoader {
+  _state = new LoadingStateMachine();
+
+  // @note this exported state is set by $effect's
+  state = $state(STATE_INITIAL);
+
+  loaded = $derived.by(() => {
+    return this.state === STATE_LOADED;
+  });
+
+  /** @type {string|null} */
+  _url = null;
+
+  /** @type {number}  */
+  _bytesLoaded = $state(0);
+
+  /** @type {number}  */
+  _size = $state(0);
+
+  /**
+   * Response headers
+   * @type {Headers|null}
+   */
+  _headers = $state(null);
+
+  /** @type {ArrayBuffer|null} */
+  _buffer = null;
+
+  // Export state property as readonly
+  progress = $derived.by(() => {
+    return {
+      bytesLoaded: this._bytesLoaded,
+      size: this._size,
+      loaded: this.loaded
+    };
+  });
+
+  /** @type {null|(()=>void)} */
+  _abortLoading = null;
+
+  /**
+   * Construct NetworkLoader
+   *
+   * @param {object} _
+   * @param {string} _.url
+   */
+  constructor({ url }) {
+    expect.absOrRelUrl(url);
+
+    this._url = url;
+
+    const state = this._state;
+
+    $effect(() => {
+      switch (state.current) {
+        case STATE_LOADING:
+          {
+            // console.log('NetworkLoader:loading');
+            this.#load();
+          }
+          break;
+
+        case STATE_UNLOADING:
+          {
+            // console.log('NetworkLoader:unloading');
+            this.#unload();
+          }
+          break;
+
+        case STATE_LOADED:
+          {
+            // console.error(
+            //   'NetworkLoader:loaded',
+            //   $state.snapshot({ bytes: this.size })
+            // );
+
+            // Abort function is no longer needed
+            this._abortLoading = null;
+          }
+          break;
+
+        case STATE_CANCELLED:
+          {
+            // console.log('NetworkLoader:cancelled');
+            // TODO
+          }
+          break;
+
+        case STATE_ERROR:
+          {
+            console.log('NetworkLoader:error', state.error);
+          }
+          break;
+      } // end switch
+
+      this.state = state.current;
+    });
+  }
+
+  /**
+   * Start loading all network data
+   */
+  load() {
+    this._state.send(LOAD);
+  }
+
+  /**
+   * Unoad all network data
+   */
+  unload() {
+    this._state.send(UNLOAD);
+  }
+
+  /**
+   * Get network data size in bytes
+   * - Info comes from the content length response header
+   *
+   * @returns {number}
+   */
+  get size() {
+    return this._size;
+  }
+
+  /**
+   * Get content type from response header
+   *
+   * @returns {string|null}
+   */
+  getContentType() {
+    if (!this._headers) {
+      throw new Error(ERROR_NOT_LOADED);
+    }
+
+    return this._headers.get(CONTENT_TYPE);
+  }
+
+  /**
+   * Get data as array buffer
+   *
+   * @note If the data has been transferred, the data is
+   *       no longer available as ArrayBuffer
+   *
+   * @returns {ArrayBuffer}
+   */
+  getArrayBuffer() {
+    if (!this._buffer) {
+      throw new Error(ERROR_NOT_LOADED);
+    }
+
+    if (this._buffer.detached) {
+      throw new Error(ERROR_TRANSFERRED);
+    }
+
+    return this._buffer;
+  }
+
+  /**
+   * Get data as Uint8Array
+   *
+   * @returns {Uint8Array}
+   */
+  getUint8Array() {
+    return new Uint8Array(this.getArrayBuffer());
+  }
+
+  /**
+   * Get data as Blob
+   * - The Blob type is set using the response header
+   *   content type
+   *
+   * @returns {Blob}
+   */
+  getBlob() {
+    const type = this.getContentType();
+
+    const options = {};
+
+    if (type) {
+      options.type = type;
+    }
+
+    return new Blob([this.getArrayBuffer()], options);
+  }
+
+  /**
+   * Internal method that initializes the loading process
+   * and transitions to state LOADED when done
+   */
+  async #load() {
+    try {
+      // console.log('#load', this._url);
+
+      if (this._abortLoading) {
+        // console.log('Abort loading');
+        this._abortLoading();
+        this._abortLoading = null;
+      }
+
+      /** @type {()=>void} */
+      let abortRequest;
+
+      /**
+       * @param {object} _
+       * @param {()=>void} _.abort
+       */
+      const requestHandler = ({ abort }) => {
+        abortRequest = abort;
+      };
+
+      this._bytesLoaded = 0;
+      this._size = 0;
+
+      // @ts-ignore
+      const response = await httpGet({ url: this._url, requestHandler });
+
+      this._headers = response.headers;
+
+      // console.log('headers', this._headers);
+      // console.log('response', response);
+
+      const { bufferPromise, abort: abortLoadBody } = loadResponseBuffer(
+        response,
+        ({ bytesLoaded, size }) => {
+          this._bytesLoaded = bytesLoaded;
+          this._size = size;
+        }
+      );
+
+      this._abortLoading = () => {
+        abortRequest();
+        abortLoadBody();
+      };
+
+      this._buffer = await bufferPromise;
+
+      this._state.send(LOADED);
+    } catch (e) {
+      this._state.send(ERROR, e);
+    }
+  }
+
+  /**
+   * Internal method that initializes the unloading process
+   * and transitions to state INITIAL when done
+   */
+  async #unload() {
+    try {
+      if (this._abortLoading) {
+        this._abortLoading();
+        this._abortLoading = null;
+      }
+
+      this._bytesLoaded = 0;
+      this._size = 0;
+      this._headers = null;
+      this._buffer = null;
+
+      this._state.send(INITIAL);
+    } catch (e) {
+      this._state.send(ERROR, e);
+    }
+  }
+} // end class

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

@@ -0,0 +1,2 @@
+export const ERROR_NOT_LOADED: "No data loaded yet";
+export const ERROR_TRANSFERRED: "Buffer data has been transferred and is no longer available";

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

@@ -0,0 +1,3 @@
+export const ERROR_NOT_LOADED = 'No data loaded yet';
+export const ERROR_TRANSFERRED =
+  'Buffer data has been transferred and is no longer available';

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

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

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

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

package/dist/components/image/ResponsiveImage.svelte

@@ -0,0 +1,103 @@
+<script>
+	/** @typedef {import('../../types/imagetools.js').ImageVariant} ImageVariant */
+
+	import { ImageVariantsLoader } from '../../classes/svelte/image/index.js';
+
+	/**
+	 * @type {{
+	 *   base?: string,
+	 *   classes?: string
+	 *   boxBase?: string,
+	 *   boxClasses?: string
+	 *   boxAttrs?: { [attr: string]: * },
+	 *   images: ImageVariant[],
+	 *   alt?: string
+	 * } & { [attr: string]: * }}
+	 */
+	const {
+		base,
+		classes,
+		boxBase,
+		boxClasses,
+		boxAttrs,
+
+		// Functional
+		images,
+		alt = '',
+
+		// Attributes
+		...attrs
+	} = $props();
+
+	let variantsLoader = new ImageVariantsLoader(images);
+
+	let containerWidth = $state(0);
+
+	/** @type {ImageVariant|null} */
+	let imageVariant = $state(null);
+
+	$effect(() => {
+		variantsLoader.updateOptimalImageVariant(containerWidth);
+	});
+
+	// $effect(() => {
+	//   console.log('imageVariant', $state.snapshot(imageVariant));
+	// });
+
+	/** @type {string|null} */
+	let imageUrl = $state(null);
+
+	$effect(() => {
+		let image;
+
+		if (variantsLoader.loaded) {
+			// @ts-ignore
+			imageUrl = variantsLoader.getObjectUrl();
+
+			// image = new Image();
+			// image.src = url;
+
+			// image.onload = () => {
+			//   console.log('loaded');
+			//   imageUrl = url;
+			// };
+		}
+
+		return () => {
+			// if (image) {
+			//   image.onload = null;
+			//   image = undefined;
+			// }
+
+			if (imageUrl) {
+				URL.revokeObjectURL(imageUrl);
+				imageUrl = null;
+			}
+		};
+	});
+
+	let variant = $derived(variantsLoader.variant);
+
+	// let image = $derived(variantsLoader.image);
+</script>
+
+<div
+	bind:clientWidth={containerWidth}
+	data-hk--responsive-image-box
+	class="{boxBase} {boxClasses}"
+	{...boxAttrs}
+>
+	<!-- <p class="p text-white">variant: {JSON.stringify(variant)}</p> -->
+
+	{#if variant}
+		<img
+			data-responsive-image
+			src={imageUrl ? imageUrl : ''}
+			width={variant.width}
+			height={variant.height}
+			{alt}
+			class="{boxBase} {boxClasses}"
+			{...attrs}
+		/>
+	{/if}
+</div>

package/dist/components/image/ResponsiveImage.svelte.d.ts

@@ -0,0 +1,15 @@
+export default ResponsiveImage;
+export type ImageVariant = any;
+declare const ResponsiveImage: import("svelte").Component<{
+    base?: string;
+    classes?: string;
+    boxBase?: string;
+    boxClasses?: string;
+    boxAttrs?: {
+        [attr: string]: any;
+    };
+    images: ImageVariant[];
+    alt?: string;
+} & {
+    [attr: string]: any;
+}, {}, "">;

package/dist/components/image/index.d.ts

@@ -1 +1,4 @@
-export { default as EnhancedImage } from "./EnhancedImage.svelte";
+export { default as ResponsiveImage } from "./ResponsiveImage.svelte";
+declare const _default: {};
+export default _default;
+export type ImageVariant = any;

package/dist/components/image/index.js

@@ -1 +1,5 @@
-export { default as EnhancedImage } from './EnhancedImage.svelte';
+/** @typedef {import('../../types/imagetools.js').ImageVariant} ImageVariant */
+
+export { default as ResponsiveImage } from './ResponsiveImage.svelte';
+
+export default {};

package/dist/types/imagetools.d.ts

@@ -1,68 +1,71 @@
 
+
+// Reference the JSDoc types (doesn't work?)
+// export type ImageVariant = import('./imagetools.js').ImageVariant;
+
 interface ImageVariant {
   src: string;
   width?: number;
   height?: number;
-
 }
 
 declare module '*?responsive' {
-  const out: Promise<ImageVariant[]|string[]|string>;
+  const out: ImageVariant[];
   export default out;
 }
 
 declare module '*&responsive' {
-  const out: Promise<ImageVariant[]|string[]|string>;
+  const out: ImageVariant[];
   export default out;
 }
 
 declare module '*?preset=gradient' {
-  const out: Promise<ImageVariant[]|string[]|string>;
+  const out: ImageVariant[]|string[]|string;
   export default out;
 }
 
 declare module '*&preset=gradient' {
-  const out: Promise<ImageVariant[]|string[]|string>;
+  const out: ImageVariant[]|string[]|string;
   export default out;
 }
 
 declare module '*?preset=photo' {
-  const out: Promise<ImageVariant[]|string[]|string>;
+  const out: ImageVariant[]|string[]|string;
   export default out;
 }
 
 declare module '*&preset=photo' {
-  const out: Promise<ImageVariant[]|string[]|string>;
+  const out: ImageVariant[]|string[]|string;
   export default out;
 }
 
 declare module '*?preset=drawing' {
-  const out: Promise<ImageVariant[]|string[]|string>;
+  const out: ImageVariant[]|string[]|string;
   export default out;
 }
 
 declare module '*&preset=drawing' {
-  const out: Promise<ImageVariant[]|string[]|string>;
+  const out: ImageVariant[]|string[]|string;
   export default out;
 }
 
 declare module '*?preset=savedata' {
-  const out: Promise<ImageVariant[]|string[]|string>;
+  const out: ImageVariant[]|string[]|string;
   export default out;
 }
 
 declare module '*&preset=savedata' {
-  const out: Promise<ImageVariant[]|string[]|string>;
+  const out: ImageVariant[]|string[]|string;
   export default out;
 }
 
 declare module '*?preset=blur' {
-  const out: Promise<ImageVariant[]|string[]|string>;
+  const out: ImageVariant[]|string[]|string;
   export default out;
 }
 
 declare module '*&preset=blur' {
-  const out: Promise<ImageVariant[]|string[]|string>;
+  const out: ImageVariant[]|string[]|string;
   export default out;
 }
 

package/dist/types/imagetools.js

@@ -0,0 +1,8 @@
+/**
+ * @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/util/expect/arrays.d.ts

@@ -10,6 +10,10 @@ export function stringArray(value: any): void;
  * @param {any} value
  */
 export function objectArray(value: any): void;
+/**
+ * Throws an exception if the value is not an Array or the array is empty
+ */
+export function notEmptyArray(value: any): void;
 /**
  * Throws a validation error if value is not array like
  * - Checks if the value is an object and has a property `length`

package/dist/util/expect/arrays.js

@@ -29,7 +29,12 @@ export function objectArray(value) {
 	v.parse(v.array(v.looseObject({})), value);
 }
 
-// notEmptyArray
+/**
+ * Throws an exception if the value is not an Array or the array is empty
+ */
+export function notEmptyArray(value) {
+	v.parse(v.pipe(v.instance(Array), v.nonEmpty()), value);
+}
 
 /**
  * Throws a validation error if value is not array like

package/dist/util/http/response.js

@@ -143,6 +143,7 @@ export async function waitForAndCheckResponse(responsePromise, url) {
  */
 export function loadResponseBuffer(response, onProgress) {
 	// @note size might be 0
+	// @note might not be send by server in dev mode
 	const size = getResponseSize(response);
 
 	let bytesLoaded = 0;

package/dist/util/svelte/wait/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Waits for a state condition to be met by running the checkFn
+ * function after each Svelte tick
+ *
+ * @param {() => boolean} checkFn -
+ *   Should return true when desired state is reached
+ *
+ * @param {number} [maxWaitMs=1000]
+ *
+ * @returns {Promise<void>} Promise that resolves when the check
+ *   function returns true
+ * @throws {Error} if maxAttempts is reached before
+ * predicate returns true
+ */
+export function waitForState(checkFn: () => boolean, maxWaitMs?: number): Promise<void>;

package/dist/util/svelte/wait/index.js

@@ -0,0 +1,38 @@
+import { tick } from 'svelte';
+
+/**
+ * Waits for a state condition to be met by running the checkFn
+ * function after each Svelte tick
+ *
+ * @param {() => boolean} checkFn -
+ *   Should return true when desired state is reached
+ *
+ * @param {number} [maxWaitMs=1000]
+ *
+ * @returns {Promise<void>} Promise that resolves when the check
+ *   function returns true
+ * @throws {Error} if maxAttempts is reached before
+ * predicate returns true
+ */
+export function waitForState(checkFn, maxWaitMs = 1000) {
+  let startedAt = Date.now();
+
+  return new Promise((resolve, reject) => {
+    async function checkLoop() {
+      if (checkFn()) {
+        resolve();
+        return;
+      }
+
+      if (Date.now() - startedAt >= maxWaitMs) {
+        reject(new Error(`State change timeout`));
+        return;
+      }
+
+      await tick();
+      checkLoop();
+    }
+
+    checkLoop();
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.0.81",
+	"version": "0.0.83",
 	"author": "Jens Kleinhout, HKdigital (https://hkdigital.nl)",
 	"license": "ISC",
 	"repository": {
@@ -61,10 +61,12 @@
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.46.1",
 		"globals": "^15.14.0",
+		"jsdom": "^26.0.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.2",
 		"prettier-plugin-tailwindcss": "^0.6.9",
 		"publint": "^0.2.12",
+		"standardized-audio-context-mock": "^9.7.15",
 		"svelte": "^5.16.0",
 		"svelte-check": "^4.1.1",
 		"tailwindcss": "^3.4.17",