@hkdigital/lib-core 0.3.10 → 0.3.11

package/dist/config/README.md

@@ -0,0 +1,196 @@
+# Config
+
+Reusable configuration generators for HKdigital projects.
+
+## Vite Configuration
+
+The `vite.js` provides generators for common Vite setups used across HKdigital projects.
+
+### Quick Start
+
+```javascript
+// vite.config.js
+import { defineConfig } from 'vitest/config';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { generateViteConfig } from '@hkdigital/lib-sveltekit/config/vite.js';
+
+export default defineConfig(
+  await generateViteConfig({
+    enableImagetools: true
+  })
+);
+```
+
+### Functions
+
+#### `generateViteConfig(options)`
+
+Generates a complete Vite configuration with HKdigital defaults.
+
+**Options:**
+- `enableImagetools` (boolean, default: `true`) - Include vite-imagetools plugin
+- `enableVitest` (boolean, default: `true`) - Include Vitest test configuration
+- `customDefines` (object, default: `{}`) - Additional define values
+- `customPlugins` (array, default: `[]`) - Additional Vite plugins
+- `imagetoolsOptions` (object, default: `{}`) - Options passed to imagetools config
+- `packageJsonPath` (string, default: `'./package.json'`) - Path to package.json
+
+**Built-in defines:**
+- `import.meta.env.VITE_APP_VERSION` - Version from package.json
+- `import.meta.env.VITE_BUILD_TIMESTAMP` - Build timestamp
+
+**Example:**
+```javascript
+export default defineConfig(
+  await generateViteConfig({
+    enableImagetools: true,
+    enableVitest: true,
+    customDefines: {
+      'import.meta.env.VITE_API_URL': JSON.stringify('https://api.example.com')
+    },
+    imagetoolsOptions: {
+      widths: [640, 1024, 1536, 1920]
+    }
+  })
+);
+```
+
+#### `generateViteDefines(options)`
+
+Generates only the define configuration (no plugins).
+
+**Options:**
+- `packageJsonPath` (string, default: `'./package.json'`) - Path to package.json
+- `customDefines` (object, default: `{}`) - Additional define values
+
+**Example:**
+```javascript
+export default defineConfig({
+  plugins: [sveltekit()],
+  define: generateViteDefines({
+    customDefines: {
+      'import.meta.env.VITE_API_URL': JSON.stringify(process.env.API_URL)
+    }
+  })
+});
+```
+
+#### `generateVitestConfig(options)`
+
+Generates only the Vitest test configuration.
+
+**Options:**
+- `additionalPatterns` (array, default: `[]`) - Additional test file patterns
+
+**Example:**
+```javascript
+export default defineConfig({
+  plugins: [sveltekit()],
+  test: generateVitestConfig({
+    additionalPatterns: ['tests/**/*.integration.js']
+  })
+});
+```
+
+## Imagetools Configuration
+
+When `enableImagetools: true`, the following dependencies are required in your project:
+
+```bash
+pnpm add -D vite-imagetools
+```
+
+### TypeScript Support
+
+For TypeScript and JavaScript projects using VS Code or other TypeScript-aware editors, add to your `app.d.ts`:
+
+```typescript
+import '@hkdigital/lib-sveltekit/config/imagetools.d.ts';
+```
+
+**Why this is needed:**
+- Provides type definitions for image imports with query parameters (e.g., `hero.jpg?preset=photo`)
+- Enables IntelliSense and autocompletion for imagetools directives in your editor
+- Prevents TypeScript errors when importing processed images
+- Works for both TypeScript and JavaScript projects (VS Code uses TypeScript for JS intellisense)
+
+**What it enables:**
+```javascript
+// These imports will have proper typing and editor support
+import heroImage from '$lib/assets/hero.jpg?preset=photo';
+import heroResponsive from '$lib/assets/hero.jpg?preset=photo&responsive';
+```
+
+### Image Usage
+
+With imagetools enabled, you can use images with processing directives:
+
+```javascript
+// Basic usage
+import heroImage from '$lib/assets/hero.jpg?preset=photo';
+
+// Responsive images
+import heroResponsive from '$lib/assets/hero.jpg?preset=photo&responsive';
+```
+
+**Available presets:**
+- `default` - AVIF format, 90% quality
+- `photo` - JPG format, 95% quality, returns metadata
+- `render` - JPG format, 95% quality, returns metadata
+- `gradient` - JPG format, 95% quality, returns metadata
+- `drawing` - AVIF format, 90% quality, returns metadata
+- `savedata` - AVIF format, 85% quality, returns metadata
+- `blur` - AVIF format, 50% quality with blur effect, returns metadata
+
+## Migration from Direct Config
+
+### Before
+```javascript
+// vite.config.js
+import { defineConfig } from 'vitest/config';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { imagetools } from 'vite-imagetools';
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+
+import {
+  generateDefaultDirectives,
+  generateResponseConfigs
+} from '@hkdigital/lib-sveltekit/config/imagetools-config.js';
+
+const packageJson = JSON.parse(
+  readFileSync(resolve('./package.json'), 'utf-8')
+);
+
+export default defineConfig({
+  plugins: [
+    sveltekit(),
+    imagetools({
+      defaultDirectives: generateDefaultDirectives(),
+      resolveConfigs: generateResponseConfigs()
+    })
+  ],
+  define: {
+    'import.meta.env.VITE_APP_VERSION': JSON.stringify(packageJson.version),
+    'import.meta.env.VITE_BUILD_TIMESTAMP': JSON.stringify(new Date().toISOString())
+  },
+  test: {
+    include: [
+      'src/**/*.{test,spec}.{js,ts}',
+      'src/**/*.svelte.{test,spec}.{js,ts}'
+    ]
+  }
+});
+```
+
+### After
+```javascript
+// vite.config.js
+import { defineConfig } from 'vitest/config';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { generateViteConfig } from '@hkdigital/lib-sveltekit/config/vite.js';
+
+export default defineConfig(
+  await generateViteConfig()
+);
+```

package/dist/config/{imagetools-config.js → generators/imagetools.js}

@@ -1,189 +1,189 @@
-const DEFAULT_WIDTHS = [640, 1024, 1536, 1920];
-
-const DEFAULT_PRESETS = {
-	default: {
-		format: 'avif',
-		quality: '90'
-	},
-	render: {
-		format: 'jpg',
-		quality: '95',
-		as: 'metadata'
-	},
-	photo: {
-		format: 'jpg',
-		quality: '95',
-		as: 'metadata'
-	},
-	gradient: {
-		format: 'jpg',
-		quality: '95',
-		as: 'metadata'
-	},
-	drawing: {
-		format: 'avif',
-		quality: '90',
-		as: 'metadata'
-	},
-	savedata: {
-		format: 'avif',
-		quality: '85',
-		as: 'metadata'
-	},
-	blur: {
-		format: 'avif',
-		quality: '50',
-		blur: '75',
-		as: 'metadata'
-	}
-};
-
-/**
- * Configures and returns a function that can be used as
- * 'resolveConfigs' parameter in imagetools config
- *
- * @param {object} [options]
- * @param {number[]} [options.widths=DEFAULT_WIDTHS]
- *
- * @returns {(
- *   entries: [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);
-
-		/** @type {Record<string, string | string[]>} */
-		const configPairs = {};
-
-		for (const current of entries) {
-			const key = current[0];
-			const value = current[1][0];
-
-			// @ts-ignore
-			configPairs[key] = value;
-		}
-
-		// @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) };
-		});
-	};
-}
-
-/**
- * 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;
-	};
-}
+const DEFAULT_WIDTHS = [640, 1024, 1536, 1920];
+
+const DEFAULT_PRESETS = {
+	default: {
+		format: 'avif',
+		quality: '90'
+	},
+	render: {
+		format: 'jpg',
+		quality: '95',
+		as: 'metadata'
+	},
+	photo: {
+		format: 'jpg',
+		quality: '95',
+		as: 'metadata'
+	},
+	gradient: {
+		format: 'jpg',
+		quality: '95',
+		as: 'metadata'
+	},
+	drawing: {
+		format: 'avif',
+		quality: '90',
+		as: 'metadata'
+	},
+	savedata: {
+		format: 'avif',
+		quality: '85',
+		as: 'metadata'
+	},
+	blur: {
+		format: 'avif',
+		quality: '50',
+		blur: '75',
+		as: 'metadata'
+	}
+};
+
+/**
+ * Configures and returns a function that can be used as
+ * 'resolveConfigs' parameter in imagetools config
+ *
+ * @param {object} [options]
+ * @param {number[]} [options.widths=DEFAULT_WIDTHS]
+ *
+ * @returns {(
+ *   entries: [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);
+
+		/** @type {Record<string, string | string[]>} */
+		const configPairs = {};
+
+		for (const current of entries) {
+			const key = current[0];
+			const value = current[1][0];
+
+			// @ts-ignore
+			configPairs[key] = value;
+		}
+
+		// @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) };
+		});
+	};
+}
+
+/**
+ * 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/dist/config/generators/vite.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Generates a Vite configuration object with common HKdigital settings
+ *
+ * @param {object} [options] Configuration options
+ * @param {boolean} [options.enableImagetools=true] Enable vite-imagetools plugin
+ * @param {boolean} [options.enableVitest=true] Include Vitest configuration
+ * @param {boolean} [options.enableSvelteKit=true] Enable SvelteKit plugin
+ * @param {object} [options.customDefines={}] Additional define values
+ * @param {Array} [options.customPlugins=[]] Additional Vite plugins
+ * @param {object} [options.imagetoolsOptions={}] Options for imagetools config
+ * @param {string} [options.packageJsonPath='./package.json'] Path to package.json
+ *
+ * @returns {Promise<object>} Vite configuration object
+ */
+export function generateViteConfig(options?: {
+    enableImagetools?: boolean;
+    enableVitest?: boolean;
+    enableSvelteKit?: boolean;
+    customDefines?: object;
+    customPlugins?: any[];
+    imagetoolsOptions?: object;
+    packageJsonPath?: string;
+}): Promise<object>;
+/**
+ * Generates build-time defines for Vite
+ *
+ * @param {object} [options] Configuration options
+ * @param {string} [options.packageJsonPath='./package.json'] Path to package.json
+ * @param {object} [options.customDefines={}] Additional define values
+ *
+ * @returns {object} Define configuration object
+ */
+export function generateViteDefines(options?: {
+    packageJsonPath?: string;
+    customDefines?: object;
+}): object;
+/**
+ * Generates Vitest configuration
+ *
+ * @param {object} [options] Configuration options
+ * @param {string[]} [options.additionalPatterns=[]] Additional test patterns
+ *
+ * @returns {object} Vitest configuration object
+ */
+export function generateVitestConfig(options?: {
+    additionalPatterns?: string[];
+}): object;