image utils | cache | components

packages/imagetools_3/api/utils/getFilteredProps.js

@@ -36,8 +36,8 @@ const NonProperties = {
 };
 
 const ImgProperties = NonGlobalSupportedConfigs.filter(
-    (key) => !NonProperties.Img.includes(key)
-  ),
+  (key) => !NonProperties.Img.includes(key)
+),
   PictureProperties = NonGlobalSupportedConfigs.filter(
     (key) => !NonProperties.Picture.includes(key)
   ),
@@ -65,14 +65,33 @@ export default function getFilteredProps(type, props) {
 
   const { search, searchParams } = new URL(props.src, "file://");
 
+  const paramOptions = Object.fromEntries(searchParams);
+
+  // Separate supported config params from others (like cache busters)
+  const supportedKeys = SupportedProperties[type] || [];
+  const configParams = {};
+  const otherParams = new URLSearchParams();
+
+  for (const [key, value] of searchParams) {
+    if (supportedKeys.includes(key) || GlobalConfigOptions[key]) {
+      configParams[key] = value;
+    } else {
+      otherParams.append(key, value);
+    }
+  }
+
+  // Remove ALL params from src initially
   props.src = props.src.replace(search, "");
 
-  const paramOptions = Object.fromEntries(searchParams);
+  // Re-append ONLY the non-config params to src
+  if (otherParams.toString()) {
+    props.src += `?${otherParams.toString()}`;
+  }
 
   const filteredLocalProps = filterConfigs(
     type,
     {
-      ...paramOptions,
+      ...configParams,
       ...props,
     },
     SupportedProperties[type]

packages/imagetools_3/api/utils/getSrcset.js

@@ -18,24 +18,39 @@ export default async function getSrcset(
 
   const params = keys.length
     ? keys
-        .map((key) =>
-          Array.isArray(options[key])
-            ? `&${key}=${options[key].join(";")}`
-            : `&${key}=${options[key]}`
-        )
-        .join("")
+      .map((key) =>
+        Array.isArray(options[key])
+          ? `&${key}=${options[key].join(";")}`
+          : `&${key}=${options[key]}`
+      )
+      .join("")
     : "";
 
-  const [cleanSrc] = src.split("?");
-  const id = `${cleanSrc}?${params.slice(1)}`;
+  // Extract existing search params from src
+  const [cleanSrc, search] = src.split("?");
+
+  // Combine existing params (like s=...) with options
+  // Existing params come first so they can be overridden by options if needed, 
+  // though 's' should typically be unique.
+  const searchParams = new URLSearchParams(search);
+
+  // Add options to searchParams
+  keys.forEach(key => {
+    const value = Array.isArray(options[key])
+      ? options[key].join(";")
+      : options[key];
+    searchParams.set(key, value);
+  });
+
+  const id = `${cleanSrc}?${searchParams.toString()}`;
   // @todo : remove this
   const fullPath = await getSrcPath(id);
   const { default: load } = await import("../../plugin/hooks/load.js");
   // @ts-ignore
   let srcset = null
-  
+
   try {
-    
+
     const loaded = await load(fullPath, base);
     if (loaded) {
       srcset = loaded.slice(16, -1);