fix: imgs not being served in dev

This commit is contained in:
2026-06-04 22:57:04 +01:00
parent 15027c5231
commit 557c3166bb
5 changed files with 34 additions and 15 deletions
+27 -8
View File
@@ -1,9 +1,9 @@
diff --git a/src/animated-cache.js b/src/animated-cache.js
new file mode 100644
index 0000000000000000000000000000000000000000..362391ef59253b466b94e729ebeb2c6cf907b821
index 0000000000000000000000000000000000000000..7826a8d85a2ad9d6ae1a780d0fdbceb2ebd8cb52
--- /dev/null
+++ b/src/animated-cache.js
@@ -0,0 +1,203 @@
@@ -0,0 +1,205 @@
+import { createHash } from 'node:crypto';
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'node:fs';
+import path from 'node:path';
@@ -147,7 +147,9 @@ index 0000000000000000000000000000000000000000..362391ef59253b466b94e729ebeb2c6c
+ * @param {string} id
+ */
+ async function cached_load(id) {
+ // Only intercept ?enhanced build-time requests (not dev/resolve queries).
+ // Skip cache entirely in dev/watch mode — emitFile semantics differ there.
+ if (this.meta?.watchMode) return original_fn.call(this, id);
+
+ const q = id.indexOf('?');
+ if (q < 0) return original_fn.call(this, id);
+ const query = id.slice(q + 1);
@@ -309,7 +311,7 @@ index 013b9405436dd61d02d947a49c56ae1d2cad9f57..fc314fa1a2ed9f2d4776cc0f201ef2ec
* @param {import('sharp').Metadata} meta
* @returns {string}
diff --git a/src/vite-plugin.js b/src/vite-plugin.js
index c8ccb26b3f17cb69eb1e725bab1cde02c88c36cf..61bf0debfb6ba7d8c14dbaeb3ebfc601eecf4117 100644
index c8ccb26b3f17cb69eb1e725bab1cde02c88c36cf..3a52193c249edb0ccf60e2733fb360c21cce73b7 100644
--- a/src/vite-plugin.js
+++ b/src/vite-plugin.js
@@ -1,6 +1,7 @@
@@ -378,7 +380,7 @@ index c8ccb26b3f17cb69eb1e725bab1cde02c88c36cf..61bf0debfb6ba7d8c14dbaeb3ebfc601
/**
* Creates the Svelte image plugin.
@@ -110,6 +162,19 @@ export function image_plugin(imagetools_plugin) {
@@ -110,8 +162,21 @@ export function image_plugin(imagetools_plugin) {
);
}
@@ -396,19 +398,36 @@ index c8ccb26b3f17cb69eb1e725bab1cde02c88c36cf..61bf0debfb6ba7d8c14dbaeb3ebfc601
+ }
+
if (OPTIMIZABLE.test(url)) {
const image = await process_id(resolved_id, plugin_context, imagetools_plugin);
- const image = await process_id(resolved_id, plugin_context, imagetools_plugin);
+ const image = await process_id(resolved_id, plugin_context, imagetools_plugin, vite_config);
s.update(node.start, node.end, img_to_picture(content, node, image));
@@ -200,12 +265,57 @@ async function process_id(resolved_id, plugin_context, imagetools_plugin) {
} else {
const metadata = await sharp(resolved_id).metadata();
@@ -194,18 +259,70 @@ export function image_plugin(imagetools_plugin) {
* @param {import('vite').Plugin} imagetools_plugin
* @returns {Promise<import('vite-imagetools').Picture>}
*/
-async function process_id(resolved_id, plugin_context, imagetools_plugin) {
+async function process_id(resolved_id, plugin_context, imagetools_plugin, vite_config) {
if (!imagetools_plugin.load) {
throw new Error('Invalid instance of vite-imagetools. Could not find load method.');
}
const hook = imagetools_plugin.load;
const handler = typeof hook === 'object' ? hook.handler : hook;
- const module_info = await handler.call(plugin_context, resolved_id);
+
+ // Cache keyed by file content + query params.
+ // Cache keyed by file content + query params (build only).
+ const q = resolved_id.indexOf('?');
+ const filepath = q >= 0 ? resolved_id.slice(0, q) : resolved_id;
+ const query = q >= 0 ? resolved_id.slice(q + 1) : '';
+
+ if (vite_config?.command === 'serve') {
+ const module_info = await handler.call(plugin_context, resolved_id);
+ if (!module_info) throw new Error(`Could not load ${resolved_id}`);
+ const code = typeof module_info === 'string' ? module_info : module_info.code;
+ return parse_object(code.replace('export default', '').replace(/;$/, '').trim());
+ }
+
+ const cached = read_img_cache(filepath, query);
+ if (cached) {
+ /** @type {Record<string, string>} */