@hkdigital/lib-core 0.5.26 → 0.5.28

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,16 +137,20 @@ 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,
 					w: String(w),
 					format: 'png',
-					ensureAlpha: 'true'
+					ensureAlpha: 'true',
+					density: '300'
 				};
 			});
-			// console.log('Returning apple-touch-icon configs:', appleTouchConfigs);
+			// console.log('**** Returning apple-touch-icon configs:', appleTouchConfigs);
 			return appleTouchConfigs;
 		}
 
@@ -178,6 +195,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

@@ -63,31 +63,57 @@ export async function generateViteConfig(options = {}) {
   if (enableImagetools) {
     try {
       const { imagetools } = await import('vite-imagetools');
-      const { 
-        generateDefaultDirectives, 
-        generateResponseConfigs 
-      } = await import('./imagetools.js');
+      const { generateDefaultDirectives, generateResponseConfigs } =
+        await import('./imagetools.js');
 
-      // Custom transform to ensure alpha channel for all PNGs
-      const ensureAlphaTransform = (config) => {
-        // Apply to all PNG images (harmless no-op if alpha exists)
-        if (config.format !== 'png') return undefined;
-
-        return (image) => {
-          return image.ensureAlpha();
-        };
-      };
+      const sharp = (await import('sharp')).default;
 
       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
+          // extendOutputFormats(builtins) {
+          //   return {
+          //     ...builtins,
+          //     png: (config) => ({
+          //       format: 'png',
+          //       transform: (image) => image.withMetadata({ density: 300 })
+          //     })
+          //   };
+          // },
+          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()
+                  .withMetadata({ xmp: '' });
+              };
+            };
+
+            // Return an ARRAY with builtins + your custom transform
+            return [...builtins, ensureAlphaTransform];
+          }
         })
       );
+
+      // eslint-disable-next-line no-unused-vars
     } catch (error) {
       const errorMessage = `
 ╭─────────────────────────────────────────────────────────────╮
@@ -98,7 +124,9 @@ export async function generateViteConfig(options = {}) {
 │  Or set enableImagetools: false                             │
 ╰─────────────────────────────────────────────────────────────╯`;
       console.error(errorMessage);
-      throw new Error('vite-imagetools is required when enableImagetools: true');
+      throw new Error(
+        'vite-imagetools is required when enableImagetools: true'
+      );
     }
   }
 
@@ -110,10 +138,11 @@ export async function generateViteConfig(options = {}) {
         new Date().toISOString()
       ),
       ...customDefines
-    },
+    }
   };
 
   if (enableVitest && !enableVitestWorkspace) {
+    // @ts-ignore
     config.test = {
       include: [
         'src/**/*.{test,spec}.{js,ts}',
@@ -127,6 +156,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: [
@@ -169,10 +199,7 @@ export async function generateViteConfig(options = {}) {
  * @returns {object} Define configuration object
  */
 export function generateViteDefines(options = {}) {
-  const {
-    packageJsonPath = './package.json',
-    customDefines = {}
-  } = options;
+  const { packageJsonPath = './package.json', customDefines = {} } = options;
 
   const packageJson = JSON.parse(
     readFileSync(resolve(packageJsonPath), 'utf-8')

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-core",
-	"version": "0.5.26",
+	"version": "0.5.28",
 	"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",