Skip to content

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

Open
@jevvk

Description

@jevvk

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": {...}
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions