Support multiple values of the same key in defaultDirectives about imagetools

[JonasKruckenberg]

Sooo, I thought this was gonna come up at some point ;)
The way imagetools works is it first parses the url and generates an object from that. It then generates what I call targets, one for each image that is gonna be produced.
The issue is that in your case the defaultDirectives get applied after the last step above. That's why it's not working.
I am however very unhappy with the way the API works right now so I'm doing (yet another sigh) rewrite and I'll make sure to address this issue too!

[jugglingcats]

@JonasKruckenberg, I don't know if my requirement is exactly the same as @QElix, but definitely in the same general area.

I would like to be able to generate multiple images with a single preset, eg:

import info from "./img.png?mypreset"

It seems at the moment looking at the code that it's one param --> one transformed image, and this seems a bit limited when we want to standardise the breakpoints for srcset.

Ultimately I want an author to be able to write:

import meta from "./img.png?default&meta"
...
<ImageSrcsetAndOtherSmarts meta={meta} blurrup/>

If there is a way to do this today or get close to it that would be amazing, and thanks for what is already a great lib.

[jugglingcats]

I think if there was a way to intercept/override the call to resolveConfigs that might provide what we need.

[JonasKruckenberg]

Alright let's think about this again, back in June I promised an API redesign that sadly went nowhere (for different reason but mostly time 😕) so lets move this forward and think of a way we can approach this without a redesign.
My first idea was to change defaultDorectives from

type defaultDirectives = Record<string, string> | ((id: string) => Record<string, string>)

to this

type defaultDirectives =  URLSearchParams | ((id: string) =>  URLSearchParams)

and merge them with the URLSearchParams from the actual Url. This would resolve #216 since configs would be applied before resolving and allow for multiple values for the same key.
wdyt @Porges @QElix @jugglingcats would that solve you use case?

[Porges]

My use-case is I want to set one config for every single image to resize it to a set of standard sizes, which I then use in srcset to pick a different one depending on window size. I think what you’re describing will solve it.

(Another ability I need for this is to only resize downwards and never up-scale, but that’s another topic.)

[jugglingcats]

@JonasKruckenberg, I think default directives are nice and having them able to generate multiple images would be a common requirement. Our requirement is to be able to have multiple custom presets that might generate a single image or multiple. The pull request I made achieves this reasonably cleanly 🤞.

One change you might (also) consider is to default to returning metadata rather than just url when there are multiple images being generated. I can't really see a scenario where you'd generate multiple images but not need the metadata? At the moment I am using the following as well as our custom resolveConfigs:

export function glowsiteOutputFormats(builtinOutputFormats) {
    // all this does is ensure that when we write image.png?glowsite we get the metadata back not the urls
    // (it means we don't have to write image.png?glowsite&meta all the time)
    //
    // we also filter out a lot of the redundant metadata from the json as it ends up in the bundle
    return {
        ...builtinOutputFormats, glowsite: () => {
            const defaultFormat = metadataFormat()
            return (metadatas) => {
                // just return the metadata we need
                return defaultFormat(metadatas).map(({format, width, height, src}) => ({format, width, height, src}))
            }
        }
    }
}

[JonasKruckenberg]

Alright, the custom resolveConfig hook got released in [email protected] and [email protected] respectively.
The direct fix for this issue will also be released soon!