@hkdigital/lib-sveltekit 0.0.83 → 0.0.85

package/dist/classes/svelte/audio/AudioScene.svelte.d.ts

@@ -33,7 +33,7 @@ export default class AudioScene {
      */
     load(audioContext: AudioContext): void;
     /**
-     * Get a source that can be used to plat the audio once
+     * Get a source that can be used to play the audio once
      *
      * @param {string} label
      */

package/dist/classes/svelte/audio/AudioScene.svelte.js

@@ -1,19 +1,19 @@
 import * as expect from '@hkdigital/lib-sveltekit/util/expect/index.js';
 
 import {
-  LoadingStateMachine,
-  STATE_INITIAL,
-  STATE_LOADING,
-  STATE_UNLOADING,
-  STATE_LOADED,
-  STATE_CANCELLED,
-  STATE_ERROR,
-  LOAD,
-  // CANCEL,
-  ERROR,
-  LOADED,
-  UNLOAD,
-  INITIAL
+	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 AudioLoader from './AudioLoader.svelte.js';
@@ -31,252 +31,252 @@ import AudioLoader from './AudioLoader.svelte.js';
  */
 
 export default class AudioScene {
-  #state = new LoadingStateMachine();
-
-  // @note this exported state is set by $effect's
-  state = $state(STATE_INITIAL);
-
-  // @note this exported state is set by $effect's
-  loaded = $derived.by(() => {
-    return this.state === STATE_LOADED;
-  });
-
-  /** @type {AudioContext|null} */
-  #audioContext = null;
-
-  /** @type {MemorySource[]} */
-  #memorySources = $state([]);
-
-  #progress = $derived.by(() => {
-    // console.log('update progress');
-
-    let totalSize = 0;
-    let totalBytesLoaded = 0;
-    let sourcesLoaded = 0;
-
-    const sources = this.#memorySources;
-    const numberOfSources = sources.length;
-
-    for (let j = 0; j < numberOfSources; j++) {
-      const source = sources[j];
-      const { audioLoader } = source;
-
-      const { bytesLoaded, size, loaded } = audioLoader.progress;
-
-      totalSize += size;
-      totalBytesLoaded += bytesLoaded;
-
-      if (loaded) {
-        sourcesLoaded++;
-      }
-    } // end for
-
-    return {
-      totalBytesLoaded,
-      totalSize,
-      sourcesLoaded,
-      numberOfSources
-    };
-  });
-
-  /**
-   * Construct AudioScene
-   *
-   * @param {object} _
-   * @param {AudioContext} _.audioContext
-   */
-  constructor() {
-    const state = this.#state;
-
-    $effect(() => {
-      if (state.current === STATE_LOADING) {
-        // console.log(
-        //   'progress',
-        //   JSON.stringify($state.snapshot(this.#progress))
-        // );
-
-        const { sourcesLoaded, numberOfSources } = this.#progress;
-
-        if (sourcesLoaded === numberOfSources) {
-          console.log(`All [${numberOfSources}] sources loaded`);
-          this.#state.send(LOADED);
-        }
-      }
-    });
-
-    $effect(() => {
-      switch (state.current) {
-        case STATE_LOADING:
-          {
-            console.log('AudioScene:loading');
-            this.#startLoading();
-          }
-          break;
-
-        case STATE_UNLOADING:
-          {
-            // console.log('AudioScene:unloading');
-            // this.#startUnLoading();
-          }
-          break;
-
-        case STATE_LOADED:
-          {
-            console.log('AudioScene:loaded');
-
-            // tODO
-            // this.#abortLoading = null;
-          }
-          break;
-
-        case STATE_CANCELLED:
-          {
-            // console.log('AudioScene:cancelled');
-            // TODO
-          }
-          break;
-
-        case STATE_ERROR:
-          {
-            console.log('AudioScene:error', state.error);
-          }
-          break;
-      } // end switch
-
-      this.state = state.current;
-    });
-  }
-
-  destroy() {
-    // TODO: disconnect all audio sources?
-    // TODO: Unload AUdioLoaders?
-  }
-
-  /**
-   * Add in-memory audio source
-   * - Uses an AudioLoader instance to load audio data from network
-   *
-   * @param {object} _
-   * @param {string} _.label
-   * @param {string} _.url
-   * @param {SourceConfig} [_.config]
-   */
-  defineMemorySource({ label, url, config }) {
-    expect.notEmptyString(label);
-    expect.notEmptyString(url);
-
-    const audioLoader = new AudioLoader({ url });
-
-    this.#memorySources.push({ label, audioLoader, config });
-  }
-
-  /**
-   * Start loading all audio sources
-   *
-   * @param {AudioContext} audioContext
-   */
-  load(audioContext) {
-    this.#audioContext = audioContext;
-    // console.log(123);
-    this.#state.send(LOAD);
-
-    // FIXME: in unit test when moved to startloading it hangs!
-
-    for (const { audioLoader } of this.#memorySources) {
-      audioLoader.load();
-    }
-  }
-
-  async #startLoading() {
-    console.log('#startLoading');
-
-    // FIXME: in unit test when moved to startloading it hangs!
-    // for (const { audioLoader } of this.#memorySources) {
-    //   audioLoader.load();
-    // }
-  }
-
-  /**
-   * Get a source that can be used to plat the audio once
-   *
-   * @param {string} label
-   */
-  async getSourceNode(label) {
-    // @note Gain setup
-    // https://stackoverflow.com/questions/46203191/should-i-disconnect-nodes-that-cant-be-used-anymore
-
-    const { audioLoader /*, config */ } = this.#getMemorySource(label);
-
-    if (!audioLoader.loaded) {
-      throw new Error(`Source [${label}] has not been loaded yet`);
-    }
-
-    const sourceNode = await audioLoader.getAudioBufferSourceNode(
-      // @ts-ignore
-      this.#audioContext
-    );
-
-    // @ts-ignore
-    sourceNode.connect(this.#audioContext.destination);
-
-    // Clean up
-    sourceNode.onended = () => {
-      // console.log(`Source [${label}] ended `);
-      sourceNode.disconnect();
-    };
-
-    return sourceNode;
-  }
-
-  /**
-   * Get memory source
-   *
-   * @param {string} label
-   *
-   * @returns {MemorySource}
-   */
-  #getMemorySource(label) {
-    for (const source of this.#memorySources) {
-      if (label === source.label) {
-        return source;
-      }
-    }
-
-    throw new Error(`Source [${label}] has not been defined`);
-  }
-
-  // connect
-  // play
-
-  // source.connect(audioContext.destination);
-  // source.loop = true;
-  // source.start();
-
-  // /**
-  //  * Get the source identified by the specified label
-  //  *
-  //  * @param {string} label
-  //  */
-  // async getBufferSourceNode(label) {
-  //   // expect.notEmptyString( label );
-
-  //   for (const source of this.#memorySources) {
-  //     if (label === source.label) {
-  //       if (!source.bufferSourceNode) {
-  //         source.bufferSourceNode =
-  //           await source.AudioLoader.transferToBufferSource(this.#audioContext);
-  //       }
-
-  //       return source.bufferSourceNode;
-  //     }
-  //   }
-  // }
-
-  // async connectSourceToDestination(label) {
-  //   const source = await this.getBufferSourceNode(label);
-
-  //   if (source) {
-  //     source.connect(this.#audioContext.destination);
-  //   }
-  // }
+	#state = new LoadingStateMachine();
+
+	// @note this exported state is set by $effect's
+	state = $state(STATE_INITIAL);
+
+	// @note this exported state is set by $effect's
+	loaded = $derived.by(() => {
+		return this.state === STATE_LOADED;
+	});
+
+	/** @type {AudioContext|null} */
+	#audioContext = null;
+
+	/** @type {MemorySource[]} */
+	#memorySources = $state([]);
+
+	#progress = $derived.by(() => {
+		// console.log('update progress');
+
+		let totalSize = 0;
+		let totalBytesLoaded = 0;
+		let sourcesLoaded = 0;
+
+		const sources = this.#memorySources;
+		const numberOfSources = sources.length;
+
+		for (let j = 0; j < numberOfSources; j++) {
+			const source = sources[j];
+			const { audioLoader } = source;
+
+			const { bytesLoaded, size, loaded } = audioLoader.progress;
+
+			totalSize += size;
+			totalBytesLoaded += bytesLoaded;
+
+			if (loaded) {
+				sourcesLoaded++;
+			}
+		} // end for
+
+		return {
+			totalBytesLoaded,
+			totalSize,
+			sourcesLoaded,
+			numberOfSources
+		};
+	});
+
+	/**
+	 * Construct AudioScene
+	 *
+	 * @param {object} _
+	 * @param {AudioContext} _.audioContext
+	 */
+	constructor() {
+		const state = this.#state;
+
+		$effect(() => {
+			if (state.current === STATE_LOADING) {
+				// console.log(
+				//   'progress',
+				//   JSON.stringify($state.snapshot(this.#progress))
+				// );
+
+				const { sourcesLoaded, numberOfSources } = this.#progress;
+
+				if (sourcesLoaded === numberOfSources) {
+					console.log(`All [${numberOfSources}] sources loaded`);
+					this.#state.send(LOADED);
+				}
+			}
+		});
+
+		$effect(() => {
+			switch (state.current) {
+				case STATE_LOADING:
+					{
+						console.log('AudioScene:loading');
+						this.#startLoading();
+					}
+					break;
+
+				case STATE_UNLOADING:
+					{
+						// console.log('AudioScene:unloading');
+						// this.#startUnLoading();
+					}
+					break;
+
+				case STATE_LOADED:
+					{
+						console.log('AudioScene:loaded');
+
+						// tODO
+						// this.#abortLoading = null;
+					}
+					break;
+
+				case STATE_CANCELLED:
+					{
+						// console.log('AudioScene:cancelled');
+						// TODO
+					}
+					break;
+
+				case STATE_ERROR:
+					{
+						console.log('AudioScene:error', state.error);
+					}
+					break;
+			} // end switch
+
+			this.state = state.current;
+		});
+	}
+
+	destroy() {
+		// TODO: disconnect all audio sources?
+		// TODO: Unload AUdioLoaders?
+	}
+
+	/**
+	 * Add in-memory audio source
+	 * - Uses an AudioLoader instance to load audio data from network
+	 *
+	 * @param {object} _
+	 * @param {string} _.label
+	 * @param {string} _.url
+	 * @param {SourceConfig} [_.config]
+	 */
+	defineMemorySource({ label, url, config }) {
+		expect.notEmptyString(label);
+		expect.notEmptyString(url);
+
+		const audioLoader = new AudioLoader({ url });
+
+		this.#memorySources.push({ label, audioLoader, config });
+	}
+
+	/**
+	 * Start loading all audio sources
+	 *
+	 * @param {AudioContext} audioContext
+	 */
+	load(audioContext) {
+		this.#audioContext = audioContext;
+		// console.log(123);
+		this.#state.send(LOAD);
+
+		// FIXME: in unit test when moved to startloading it hangs!
+
+		for (const { audioLoader } of this.#memorySources) {
+			audioLoader.load();
+		}
+	}
+
+	async #startLoading() {
+		console.log('#startLoading');
+
+		// FIXME: in unit test when moved to startloading it hangs!
+		// for (const { audioLoader } of this.#memorySources) {
+		//   audioLoader.load();
+		// }
+	}
+
+	/**
+	 * Get a source that can be used to play the audio once
+	 *
+	 * @param {string} label
+	 */
+	async getSourceNode(label) {
+		// @note Gain setup
+		// https://stackoverflow.com/questions/46203191/should-i-disconnect-nodes-that-cant-be-used-anymore
+
+		const { audioLoader /*, config */ } = this.#getMemorySource(label);
+
+		if (!audioLoader.loaded) {
+			throw new Error(`Source [${label}] has not been loaded yet`);
+		}
+
+		const sourceNode = await audioLoader.getAudioBufferSourceNode(
+			// @ts-ignore
+			this.#audioContext
+		);
+
+		// @ts-ignore
+		sourceNode.connect(this.#audioContext.destination);
+
+		// Clean up
+		sourceNode.onended = () => {
+			// console.log(`Source [${label}] ended `);
+			sourceNode.disconnect();
+		};
+
+		return sourceNode;
+	}
+
+	/**
+	 * Get memory source
+	 *
+	 * @param {string} label
+	 *
+	 * @returns {MemorySource}
+	 */
+	#getMemorySource(label) {
+		for (const source of this.#memorySources) {
+			if (label === source.label) {
+				return source;
+			}
+		}
+
+		throw new Error(`Source [${label}] has not been defined`);
+	}
+
+	// connect
+	// play
+
+	// source.connect(audioContext.destination);
+	// source.loop = true;
+	// source.start();
+
+	// /**
+	//  * Get the source identified by the specified label
+	//  *
+	//  * @param {string} label
+	//  */
+	// async getBufferSourceNode(label) {
+	//   // expect.notEmptyString( label );
+
+	//   for (const source of this.#memorySources) {
+	//     if (label === source.label) {
+	//       if (!source.bufferSourceNode) {
+	//         source.bufferSourceNode =
+	//           await source.AudioLoader.transferToBufferSource(this.#audioContext);
+	//       }
+
+	//       return source.bufferSourceNode;
+	//     }
+	//   }
+	// }
+
+	// async connectSourceToDestination(label) {
+	//   const source = await this.getBufferSourceNode(label);
+
+	//   if (source) {
+	//     source.connect(this.#audioContext.destination);
+	//   }
+	// }
 }

package/dist/config/imagetools-config.d.ts

@@ -4,15 +4,14 @@
  *
  * @param {object} [options]
  * @param {number[]} [options.widths=DEFAULT_WIDTHS]
+ *
  * @returns {(
  *   entries: [string, string[]][]
- * ) => { [key: string]: string | string[] }[]}
+ * ) => (Record<string, string | string[]>[])}
  */
 export function generateResponseConfigs(options?: {
     widths?: number[];
-}): (entries: [string, string[]][]) => {
-    [key: string]: string | string[];
-}[];
+}): (entries: [string, string[]][]) => (Record<string, string | string[]>[]);
 /**
  * Configures and returns a function that can be used as
  * 'defaultDirectives' parameter in imagetools config

package/dist/config/imagetools-config.js

@@ -34,24 +34,20 @@ const DEFAULT_PRESETS = {
  *
  * @param {object} [options]
  * @param {number[]} [options.widths=DEFAULT_WIDTHS]
+ *
  * @returns {(
  *   entries: [string, string[]][]
- * ) => { [key: string]: string | string[] }[]}
+ * ) => (Record<string, string | string[]>[])}
  */
 export function generateResponseConfigs(options) {
+	//
+	// @see https://github.com/JonasKruckenberg/imagetools
+	//      /blob/main/docs/core/src/functions/resolveConfigs.md
+	//
 	return function resolveConfigs(entries /*, outputFormats*/) {
 		// console.log('resolveConfigs:entries', entries);
 
-		// @ts-ignore
-		const responsiveConfig = entries.find(([key]) => key === 'responsive');
-
-		if (!responsiveConfig) {
-			// Directive 'responsive' was not set => do nothing
-			return [];
-		}
-
-		const widths = options?.widths ?? DEFAULT_WIDTHS;
-
+		/** @type {Record<string, string | string[]>} */
 		const configPairs = {};
 
 		for (const current of entries) {
@@ -62,7 +58,20 @@ export function generateResponseConfigs(options) {
 			configPairs[key] = value;
 		}
 
-		/** @type {[key: string]: string | string[] }[]} */
+		// @ts-ignore
+		const responsiveConfig = entries.find(([key]) => key === 'responsive');
+
+		if (!responsiveConfig) {
+			// Directive 'responsive' was not set => return original config
+
+			return [configPairs];
+
+			// Alternative: by returning undefined, the default resolveConfig is used
+			// return undefined;
+		}
+
+		const widths = options?.widths ?? DEFAULT_WIDTHS;
+
 		return widths.map((w) => {
 			return { ...configPairs, w: String(w) };
 		});

package/dist/types/imagetools.d.ts

@@ -1,8 +1,5 @@
 
 
-// Reference the JSDoc types (doesn't work?)
-// export type ImageVariant = import('./imagetools.js').ImageVariant;
-
 interface ImageVariant {
   src: string;
   width?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.0.83",
+	"version": "0.0.85",
 	"author": "Jens Kleinhout, HKdigital (https://hkdigital.nl)",
 	"license": "ISC",
 	"repository": {
@@ -65,18 +65,18 @@
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.2",
 		"prettier-plugin-tailwindcss": "^0.6.9",
-		"publint": "^0.2.12",
+		"publint": "^0.3.0",
 		"standardized-audio-context-mock": "^9.7.15",
-		"svelte": "^5.16.0",
-		"svelte-check": "^4.1.1",
+		"svelte": "^5.17.3",
+		"svelte-check": "^4.1.3",
 		"tailwindcss": "^3.4.17",
-		"typescript": "^5.7.2",
-		"vite": "^6.0.5",
+		"typescript": "^5.7.3",
+		"vite": "^6.0.7",
 		"vitest": "^2.1.8"
 	},
 	"dependencies": {
-		"@sveltejs/kit": "^2.15.0",
-		"runed": "^0.22.0",
+		"@sveltejs/kit": "^2.15.2",
+		"runed": "^0.23.0",
 		"valibot": "^0.42.1",
 		"zod": "^3.24.1"
 	}

package/dist/types/imagetools.js

@@ -1,8 +0,0 @@
-/**
- * @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 {};