@hkdigital/lib-core 0.5.25 → 0.5.27

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

@@ -4,7 +4,9 @@
  *
  * @param {object} [options]
  * @param {number[]} [options.widths=DEFAULT_WIDTHS]
- * @param {number[]} [options.thumbnailWidth=DEFAULT_THUMBNAIL_WIDTH]
+ * @param {number} [options.thumbnailWidth=DEFAULT_THUMBNAIL_WIDTH]
+ * @param {number[]} [options.faviconSizes=FAVICON_SIZES]
+ * @param {number[]} [options.appleTouchSizes=APPLE_TOUCH_SIZES]
  *
  * @returns {(
  *   entries: [string, string[]][]
@@ -12,7 +14,9 @@
  */
 export function generateResponseConfigs(options?: {
     widths?: number[] | undefined;
-    thumbnailWidth?: number[] | undefined;
+    thumbnailWidth?: number | undefined;
+    faviconSizes?: number[] | undefined;
+    appleTouchSizes?: number[] | undefined;
 }): (entries: [string, string[]][]) => (Record<string, string | string[]>[]);
 /**
  * Configures and returns a function that can be used as

package/dist/config/generators/imagetools.js

@@ -66,7 +66,9 @@ const DEFAULT_PRESETS = {
  *
  * @param {object} [options]
  * @param {number[]} [options.widths=DEFAULT_WIDTHS]
- * @param {number[]} [options.thumbnailWidth=DEFAULT_THUMBNAIL_WIDTH]
+ * @param {number} [options.thumbnailWidth=DEFAULT_THUMBNAIL_WIDTH]
+ * @param {number[]} [options.faviconSizes=FAVICON_SIZES]
+ * @param {number[]} [options.appleTouchSizes=APPLE_TOUCH_SIZES]
  *
  * @returns {(
  *   entries: [string, string[]][]
@@ -91,12 +93,23 @@ export function generateResponseConfigs(options) {
 			configPairs[key] = value;
 		}
 
+		// console.log('entries', entries);
+		// e.g.
+		// entries [
+		//   [ 'apple-touch-icons', [ '' ] ],
+		//   [ 'as', [ 'metadata' ] ],
+		//   [ 'format', [ 'avif' ] ],
+		//   [ 'quality', [ '90' ] ]
+		// ]
+
 		// @ts-ignore
 		const responsiveConfig = entries.find(([key]) => key === 'responsive');
+
 		// @ts-ignore
-		const faviconsConfig = entries.find(([key]) => key === 'favicons');
+		const isFavicon = !!entries.find(([key]) => key === 'favicons');
+
 		// @ts-ignore
-		const appleTouchIconsConfig = entries.find(([key]) => key === 'apple-touch-icons');
+		const isAppleTouchIcon = !!entries.find(([key]) => key === 'apple-touch-icons');
 		// console.log('responsiveConfig found:', !!responsiveConfig);
 
 		const widths = options?.widths ?? DEFAULT_WIDTHS;
@@ -110,7 +123,7 @@ export function generateResponseConfigs(options) {
 		};
 
 		// Handle favicons directive - generate all favicon sizes as PNG
-		if (faviconsConfig) {
+		if (isFavicon) {
 			const faviconConfigs = faviconSizes.map((w) => {
 				return {
 					...configPairs,
@@ -124,7 +137,10 @@ export function generateResponseConfigs(options) {
 		}
 
 		// Handle apple-touch-icons directive - generate Apple touch icon sizes as PNG
-		if (appleTouchIconsConfig) {
+
+		// console.log('**** Check:isAppleTouchIcon', isAppleTouchIcon);
+
+		if (isAppleTouchIcon) {
 			const appleTouchConfigs = appleTouchSizes.map((w) => {
 				return {
 					...configPairs,
@@ -133,7 +149,7 @@ export function generateResponseConfigs(options) {
 					ensureAlpha: 'true'
 				};
 			});
-			// console.log('Returning apple-touch-icon configs:', appleTouchConfigs);
+			// console.log('**** Returning apple-touch-icon configs:', appleTouchConfigs);
 			return appleTouchConfigs;
 		}
 
@@ -178,6 +194,9 @@ export function generateDefaultDirectives(options) {
 
 		// > Return metadata if directive 'responsive' is set
 
+		// @see https://github.com/JonasKruckenberg/
+		//      imagetools/blob/main/docs/directives.md#metadata
+
 		if (params.has('responsive')) {
 			params.set('as', 'metadata');
 		}

package/dist/config/generators/vite.js

@@ -68,38 +68,42 @@ export async function generateViteConfig(options = {}) {
         generateResponseConfigs 
       } = await import('./imagetools.js');
 
-      // Custom transform to ensure alpha channel based on directive
-      const ensureAlphaTransform = (config) => {
-        // Only apply if ensureAlpha directive is present
-        if (!config.ensureAlpha) return undefined;
-
-        return async (image) => {
-          // Force RGBA output by making one pixel slightly transparent
-          // This prevents Sharp from optimizing back to RGB palette
-          const metadata = await image.metadata();
-
-          return image
-            .ensureAlpha()
-            .composite([{
-              input: Buffer.from([0, 0, 0, 254]), // RGBA: black with 254 alpha (nearly opaque)
-              raw: { width: 1, height: 1, channels: 4 },
-              top: 0,
-              left: 0,
-              blend: 'over'
-            }]);
-        };
-      };
-
       plugins.push(
         imagetools({
           defaultDirectives: generateDefaultDirectives(imagetoolsOptions),
           resolveConfigs: generateResponseConfigs(imagetoolsOptions),
-          extendTransforms: (builtins) => [
-            ...builtins,
-            ensureAlphaTransform
-          ]
+          cache: {
+            // @note disable caching to test custom transforms
+            enabled: false,
+            // enabled: true,
+            dir: './node_modules/.cache/imagetools',
+            retention: 60 * 60 * 24 * 10  // 10 days
+          },
+          // @see https://www.npmjs.com/package/vite-imagetools?activeTab=readme
+          extendTransforms(builtins) {
+            const ensureAlphaTransform = (config, ctx) => {
+                // Check if 'ensureAlpha' directive is in the URL
+                if (!('ensureAlpha' in config)) {
+                  return undefined // This transform doesn't apply
+                }
+
+                // Mark the parameter as used
+                ctx.useParam('ensureAlpha')
+
+                // Return the actual transformation function
+                return (image) => {
+                  return image.ensureAlpha();
+                }
+              }
+
+              // Return an ARRAY with builtins + your custom transform
+              return [...builtins, ensureAlphaTransform]
+
+          }
         })
       );
+
+    // eslint-disable-next-line no-unused-vars
     } catch (error) {
       const errorMessage = `
 ╭─────────────────────────────────────────────────────────────╮
@@ -126,6 +130,7 @@ export async function generateViteConfig(options = {}) {
   };
 
   if (enableVitest && !enableVitestWorkspace) {
+    // @ts-ignore
     config.test = {
       include: [
         'src/**/*.{test,spec}.{js,ts}',
@@ -139,6 +144,7 @@ export async function generateViteConfig(options = {}) {
     // Workspace mode: separate projects for jsdom and node tests
     // jsdom tests: *.svelte.test.js (component tests with jsdom)
     // node tests: *.test.js, *.spec.js (server-side tests)
+    // @ts-ignore
     config.test = {
       ...vitestOptions,
       projects: [

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-core",
-	"version": "0.5.25",
+	"version": "0.5.27",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"
@@ -38,6 +38,7 @@
 		"check:run": "svelte-check --tsconfig ./jsconfig.json",
 		"check:watch-run": "svelte-check --tsconfig ./jsconfig.json --watch",
 		"git:push": "git push",
+		"imagetools:clean": "rm -rf node_modules/.cache/imagetools",
 		"lint:prettier": "prettier --check .",
 		"lint:eslint": "eslint .",
 		"test:unit": "vitest",