Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enabling cache in vite-imagetools does not support custom metadata added through extendTransforms #772

Open
jevvk opened this issue Dec 18, 2024 · 0 comments

Comments

@jevvk
Copy link

jevvk commented Dec 18, 2024

I've been trying to extend imagetools to add some extra information in the metadata from side-loaded yaml files. However, I've been encountering issues with the transformer not working as expected. After trying a few configuration options, I found out that it was due to the caching mechanism in vite-imagetools.

My stack:

  • vite-imagetools 7.0.5
  • vite 6.0.3
  • svelte 5.14.4
  • @sveltejs/kit 2.12.1
  • @sveltejs/adapter-cloudflare 4.7.4

Some options I tried:

  • disabling cache (works)
  • deleting node_modules/.cache/imagetools (doesn't work)
  • switching to @sveltejs/adapter-static (doesn't work)
  • switching between directly importing images and using import.meta.glob (doesn't work)

Vite config:

import { defineConfig } from 'vitest/config';
import { sveltekit } from '@sveltejs/kit/vite';
import { imagetools, setMetadata } from 'vite-imagetools';

import YAML from 'yaml';
import fs from 'fs';

export default defineConfig({
	plugins: [
		imagetools({
			cache: {
				enabled: false, // enabling cache breaks the page
			},
			defaultDirectives: (url) => {
				if (!url.searchParams.has('yaml')) {
					return url.searchParams;
				}

				const params = new URLSearchParams(url.searchParams);
				params.set('as', 'picture');
				params.set('yaml', 'true');

				return params;
			},
			extendOutputFormats: (builtins) => {
				return {
					...builtins,
					picture: (args) => {
						const pictureFormat = builtins.picture(args);
						return (metadata) => {
							/** @type {any}  */
							const picture = pictureFormat(metadata);

							if (!('yaml' in metadata[0])) {
								return picture;
							}

							return { ...picture, yaml: metadata[0].yaml };
						}
					},
				}
			},
			extendTransforms: (transforms) => {
				return [
					/** @type {import('vite-imagetools').TransformFactory} */
					(config, ctx) => {
						if (!('yaml' in config)) {
							return;
						}

						return function addYamlMetadata(image) {
							try {
								// @ts-ignore options apparently doesn't exist in the type definition
								const imagePath = image.options.input.file;
								const yamlPath = imagePath + '.yaml';

								if (!fs.existsSync(yamlPath)) {
									return image;
								}

								const yaml = YAML.parse(fs.readFileSync(yamlPath).toString());
								setMetadata(image, 'yaml', yaml);								
							} catch (e) {
								console.error('Failed to add yaml to metadata', e);
							}

							return image;
						}
					},
					...transforms,
				];
			},
		}),
		sveltekit(),
	],
	logLevel: 'info',
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	}
});

Expected metadata

{
  "img": { h: ..., w: ..., src: ...},
  "sources": {...},
  "yaml": {...}
}

Client-side metadata

{
  "img": { h: ..., w: ..., src: ...},
  "sources": {...}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant