@hkdigital/lib-sveltekit 0.0.76 → 0.0.77

package/dist/components/image/{EnhancedImage.svelte → EnhancedImage.svelte__}

@@ -4,7 +4,7 @@
   /**
    * @example
    * import { EnhancedImage }
-   *   from '../EnhancedImage/index.js';
+   *   from '$lib/components/EnhancedImage/index.js';
    *
    * <EnhancedImage
    *   classes="aspect-video max-h-svh w-full border-8 border-pink-500"
@@ -24,7 +24,7 @@
    *   aspect?: string,
    *   fit?: string,
    *   position?: string,
-   *   src: string | import('../../typedef/image.js').Picture,
+   *   src: string | import('$lib/typedef/image.js').Picture,
    *   alt?: string,
    *   onload?: ( e: (Event|{ type: string, target: HTMLImageElement }) ) => void,
    *   onerror?: ( e: (Event|{ type: string, target: HTMLImageElement }) ) => void,
@@ -61,7 +61,7 @@
   /** @type {HTMLImageElement|undefined} */
   let imgElem = $state();
 
-  /** @type {string | import('../../typedef/image.js').Picture} */
+  /** @type {string | import('$lib/typedef/image.js').Picture} */
   let src_;
 
   $effect(() => {

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

@@ -0,0 +1,26 @@
+/**
+ * Configures and returns a function that can be used as
+ * 'resolveConfigs' parameter in imagetools config
+ *
+ * - This function runs after 'defaultDirectives'
+ *
+ * @param {object} [options]
+ * @param {number[]} [options.widths=DEFAULT_WIDTHS]
+ *
+ * @returns {(config: [ key:string, [ value: string] ][]) => Record<string, string>[]|undefined}
+ */
+export function generateResponseConfigs(options?: {
+    widths?: number[];
+}): (config: [key: string, [value: string]][]) => Record<string, string>[] | undefined;
+/**
+ * Configures and returns a function that can be used as
+ * 'defaultDirectives' parameter in imagetools config
+ *
+ * - This function runs before 'resolveConfigs'
+ *
+ * @param {object} [options]
+ * @param {number[]} [options.presets=DEFAULT_PRESETS]
+ */
+export function generateDefaultDirectives(options?: {
+    presets?: number[];
+}): (url: URL) => URLSearchParams;

package/dist/config/imagetools-config.js

@@ -0,0 +1,178 @@
+const DEFAULT_WIDTHS = [640, 1024, 1536, 1920];
+
+const DEFAULT_PRESETS = {
+	default: {
+		format: 'avif',
+		quality: '90'
+	},
+	gradient: {
+		format: 'jpg',
+		quality: '95'
+	},
+	photo: {
+		format: 'jpg',
+		quality: '95'
+	},
+	drawing: {
+		format: 'avif',
+		quality: '90'
+	},
+	savedata: {
+		format: 'avif',
+		quality: '85'
+	},
+	blur: {
+		format: 'avif',
+		quality: '50',
+		blur: '75'
+	}
+};
+
+/**
+ * Configures and returns a function that can be used as
+ * 'resolveConfigs' parameter in imagetools config
+ *
+ * - This function runs after 'defaultDirectives'
+ *
+ * @param {object} [options]
+ * @param {number[]} [options.widths=DEFAULT_WIDTHS]
+ *
+ * @returns {(config: [ key:string, [ value: string] ][]) => Record<string, string>[]|undefined}
+ */
+export function generateResponseConfigs(options) {
+	/**
+	 * Function that returns a list that specifies the image
+	 * widths for the image variants that should be generated
+	 * when the directive 'responsive' is set.
+	 *
+	 * @param {[ key:string, [ value: string] ][]} config
+	 *
+	 * @returns {Record<string, string>[]|undefined}
+	 */
+	return function resolveConfigs(config) {
+		console.log('resolveConfigs:config', config);
+
+		// @ts-ignore
+		const responsiveConfig = config.find(([key]) => key === 'responsive');
+
+		if (!responsiveConfig) {
+			// Driective 'responsive' was not set => do nothing
+			return undefined;
+		}
+
+		const widths = options?.widths ?? DEFAULT_WIDTHS;
+
+		const configPairs = {};
+
+		for (const current of config) {
+			const key = current[0];
+			const value = current[1][0];
+
+			// @ts-ignore
+			configPairs[key] = value;
+		}
+
+		return widths.map((w) => {
+			return { ...configPairs, w: String(w) };
+		});
+	};
+}
+
+/**
+ * Configures and returns a function that can be used as
+ * 'defaultDirectives' parameter in imagetools config
+ *
+ * - This function runs before 'resolveConfigs'
+ *
+ * @param {object} [options]
+ * @param {number[]} [options.presets=DEFAULT_PRESETS]
+ */
+export function generateDefaultDirectives(options) {
+	/**
+	 * Function that sets a.o. format and quality directives if
+	 * the 'preset' driective is set
+	 *
+	 * @param {URL} url
+	 */
+	return function defaultDirectives(url) {
+		// Check the directive in the URL to determine which preset to use
+		const params = url.searchParams;
+
+		let presetName = params.get('preset');
+
+		// > Return metadata if directive 'responsive' is set
+
+		if (params.has('responsive')) {
+			params.set('as', 'metadata');
+		}
+		// > Process presets
+
+		if (presetName) {
+			params.delete('preset');
+		} else {
+			presetName = 'default';
+		}
+
+		const presets = options?.presets || DEFAULT_PRESETS;
+
+		// @ts-ignore
+		let preset = presets[presetName];
+
+		console.log(`defaultDirectives [url=${url}]`, preset);
+
+		if (!preset) {
+			preset = DEFAULT_PRESETS.default;
+		}
+
+		for (const key in preset) {
+			params.set(key, preset[key]);
+		}
+
+		// TODO: process directive 'w''
+		// - generate only allowed widths
+		// - support width presets such as 'hd'
+
+		// let width = params.get('w');
+
+		// if (!width) {
+		// 	// Set max allowed width by default
+		// 	// width = 'hd';
+		// }
+
+		// let presets = {
+		//   sm: '640',
+		//   md: '1024',
+		//   lg: '1536',
+		//   hd: '1920'
+		// };
+
+		// // @ts-ignore
+		// let presetWidth = presets[width];
+		// console.log({ width, presetWidth });
+
+		// if (presetWidth) {
+		//   params.set('w', presetWidth);
+		// } else if (responsive || width === null) {
+		//   params.set('as', 'metadata');
+		//   params.delete('w');
+		//   // } else if (width === null) {
+		//   // 	// Set largest size is width parameter is missing
+		//   // 	params.set('w', presets.hd);
+		// } else {
+		//   throw new Error(
+		//     `Directive [w=${width}] is should be a preset value {sm,md,lg,hd,responsive}`
+		//   );
+
+		//   // let allowedWidths = new Set(['640', '1024', '1536', '1920']);
+		//   // if (!allowedWidths.has(width)) {
+		//   // 	throw new Error(`Width [${width}] is not in list of allowed widths`);
+		//   // }
+		// }
+
+		// params.set('withoutEnlargement', 'true');
+
+		console.log('defaultDirectives:output params', params);
+
+		return params;
+	};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.0.76",
+	"version": "0.0.77",
 	"author": "Jens Kleinhout, HKdigital (https://hkdigital.nl)",
 	"license": "ISC",
 	"repository": {

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

@@ -1,23 +0,0 @@
-export default EnhancedImage;
-declare const EnhancedImage: import("svelte").Component<{
-    base?: string;
-    bg?: string;
-    classes?: string;
-    overflow?: string;
-    aspect?: string;
-    fit?: string;
-    position?: string;
-    src: string | any;
-    alt?: string;
-    onload?: (e: (Event | {
-        type: string;
-        target: HTMLImageElement;
-    })) => void;
-    onerror?: (e: (Event | {
-        type: string;
-        target: HTMLImageElement;
-    })) => void;
-    loading?: string;
-} & {
-    [attr: string]: any;
-}, {}, "">;