Open
Description
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
Labels
No labels