fix!: use URLSearchParams as default formatter (#1813)

Author: danielroe

src/runtime/providers/aliyun.ts

@@ -1,13 +1,13 @@
-import { joinURL } from 'ufo'
+import { joinURL, encodePath } from 'ufo'
 import { defineProvider, createOperationsGenerator } from '#image'
 
 const operationsGenerator = createOperationsGenerator({
   joinWith: '/',
   formatter: (key: string | number, value: string | number | ReturnType<typeof getResizeValue>) => {
     if (typeof value === 'object') {
-      return `${key},${Object.entries(value).map(([k, v]) => `${k}_${v}`).join(',')}`
+      return `${key},${encodePath(Object.entries(value).map(([k, v]) => `${k}_${v}`).join(','))}`
     }
-    return `${key},${value}`
+    return encodePath(`${key},${value}`)
   },
 })
 

src/runtime/providers/awsAmplify.ts

@@ -45,8 +45,6 @@ const operationsGenerator = createOperationsGenerator({
       left: 'left',
     },
   },
-  joinWith: '&',
-  formatter: (key, value) => `${key}=${value}`,
 })
 
 interface AmplifyOptions {

src/runtime/providers/bunny.ts

@@ -20,8 +20,6 @@ const operationsGenerator = createOperationsGenerator({
     autoOptimize: 'auto_optimize',
     sepia: 'sepia',
   },
-  joinWith: '&',
-  formatter: (key, value) => `${key}=${value}`,
 })
 
 interface BunnyOptions {

src/runtime/providers/caisy.ts

@@ -7,8 +7,6 @@ const operationsGenerator = createOperationsGenerator({
     height: 'h',
     quality: 'q',
   },
-  joinWith: '&',
-  formatter: (key, value) => `${key}=${value}`,
 })
 
 export default defineProvider({

src/runtime/providers/cloudflare.ts

@@ -1,4 +1,4 @@
-import { joinURL, encodeQueryItem } from 'ufo'
+import { encodeQueryItem, joinURL } from 'ufo'
 import { defineProvider, createOperationsGenerator } from '#image'
 
 const operationsGenerator = createOperationsGenerator({
@@ -26,7 +26,7 @@ const operationsGenerator = createOperationsGenerator({
     },
   },
   joinWith: ',',
-  formatter: (key, val) => encodeQueryItem(key, val),
+  formatter: (key, value) => encodeQueryItem(key, value),
 })
 
 const defaultModifiers = {}

src/runtime/providers/cloudimage.ts

@@ -16,8 +16,6 @@ const operationsGenerator = createOperationsGenerator({
       outside: 'boundmin',
     },
   },
-  joinWith: '&',
-  formatter: (key, value) => `${key}=${value}`,
 })
 
 interface CloudimageOptions {

src/runtime/providers/cloudinary.ts

@@ -103,7 +103,7 @@ const operationsGenerator = createOperationsGenerator({
     },
   },
   joinWith: ',',
-  formatter: (key, value) => key.includes('_') ? `${key}:${value}` : `${key}_${value}`,
+  formatter: (key, value) => encodePath(key.includes('_') ? `${key}:${value}` : `${key}_${value}`),
 })
 
 const defaultModifiers = {

src/runtime/providers/contentful.ts

@@ -25,8 +25,6 @@ const operationsGenerator = createOperationsGenerator({
       thumbnail: 'thumb',
     },
   },
-  joinWith: '&',
-  formatter: (key, value) => `${key}=${value}`,
 })
 
 interface ContentfulOptions {

src/runtime/providers/directus.ts

@@ -1,9 +1,7 @@
 import { joinURL } from 'ufo'
 import { defineProvider, createOperationsGenerator } from '#image'
 
-const operationsGenerator = createOperationsGenerator({
-  joinWith: '&',
-})
+const operationsGenerator = createOperationsGenerator()
 
 interface DirectusOptions {
   baseURL: string
@@ -16,15 +14,15 @@ export default defineProvider<DirectusOptions>({
   getImage: (src, { modifiers, baseURL }) => {
     // Separating the transforms from the rest of the modifiers
     const transforms = modifiers.transforms && Array.isArray(modifiers.transforms) && modifiers.transforms.length > 0
-      ? new URLSearchParams(JSON.stringify(Array.from(new Set(modifiers.transforms.map(obj => JSON.stringify(obj)))).map(value => JSON.parse(value)))).toString().replace(/=+$/, '')
+      ? JSON.stringify(Array.from(new Set(modifiers.transforms.map(obj => JSON.stringify(obj)))).map(value => JSON.parse(value)))
       : undefined
 
     const operations = operationsGenerator({
       ...modifiers,
       transforms,
     })
     return {
-      url: joinURL(baseURL, src + (operations ? ('?' + operations) : '')),
+      url: joinURL(baseURL, src + (operations ? ('?' + operations.replace(/=+$/, '')) : '')),
     }
   },
 })

src/runtime/providers/fastly.ts

@@ -11,8 +11,6 @@ const operationsGenerator = createOperationsGenerator({
       contain: 'bounds',
     },
   },
-  joinWith: '&',
-  formatter: (key, value) => `${key}=${value}`,
 })
 
 interface FastlyOptions {

src/runtime/providers/filerobot.ts

@@ -18,8 +18,6 @@ const operationsGenerator = createOperationsGenerator({
       outside: 'boundmin',
     },
   },
-  joinWith: '&',
-  formatter: (key, value) => `${key}=${value}`,
 })
 
 interface FilerobotOptions {

src/runtime/providers/glide.ts

@@ -1,6 +1,6 @@
 // https://glide.thephpleague.com/2.0/api/quick-reference/
 
-import { joinURL, encodeQueryItem, encodePath, withBase } from 'ufo'
+import { joinURL, encodePath, withBase } from 'ufo'
 import { defineProvider, createOperationsGenerator } from '#image'
 
 const operationsGenerator = createOperationsGenerator({
@@ -41,8 +41,6 @@ const operationsGenerator = createOperationsGenerator({
       contain: 'contain',
     },
   },
-  joinWith: '&',
-  formatter: (key, val) => encodeQueryItem(key, val),
 })
 
 interface GlideOptions {

src/runtime/providers/gumlet.ts

@@ -65,8 +65,6 @@ const operationsGenerator = createOperationsGenerator({
       auto: 'auto',
     },
   },
-  joinWith: '&',
-  formatter: (key, value) => `${key}=${value}`,
 })
 
 interface GumletOptions {

src/runtime/providers/imageengine.ts

@@ -1,4 +1,4 @@
-import { joinURL } from 'ufo'
+import { joinURL, encodePath } from 'ufo'
 import { defineProvider, createOperationsGenerator } from '#image'
 
 const operationsGenerator = createOperationsGenerator({
@@ -44,7 +44,7 @@ const operationsGenerator = createOperationsGenerator({
     },
   },
   joinWith: '/',
-  formatter: (key, value: string | number) => `${key}_${value}`,
+  formatter: (key, value: string | number) => encodePath(`${key}_${value}`),
 })
 
 interface ImageEngineOptions {

src/runtime/providers/imagekit.ts

@@ -1,4 +1,4 @@
-import { joinURL, withQuery } from 'ufo'
+import { joinURL, withQuery, encodePath } from 'ufo'
 import { defineProvider, createOperationsGenerator } from '#image'
 
 const operationsGenerator = createOperationsGenerator({
@@ -99,7 +99,7 @@ const operationsGenerator = createOperationsGenerator({
     },
   },
   joinWith: ',',
-  formatter: (key, value: string | number) => `${key}-${value}`,
+  formatter: (key, value: string | number) => encodePath(`${key}-${value}`),
 })
 
 interface ImagekitOptions {

src/runtime/providers/imgix.ts

@@ -159,8 +159,6 @@ export const operationsGenerator = createOperationsGenerator({
       blurhash: 'blurhash',
     },
   },
-  joinWith: '&',
-  formatter: (key, value) => `${key}=${value}`,
 })
 
 interface ImgixOptions {

src/runtime/providers/ipx.ts

@@ -48,7 +48,6 @@ export const operationsGenerator = createOperationsGenerator({
     quality: 'q',
     background: 'b',
   },
-  joinWith: '&',
   formatter: (key, val: string | number | boolean) => encodeParam(key) + '_' + encodeParam(val.toString()),
 })
 

src/runtime/providers/netlifyImageCdn.ts

@@ -1,4 +1,3 @@
-import { encodeQueryItem } from 'ufo'
 import { defineProvider, createOperationsGenerator } from '#image'
 
 // https://docs.netlify.com/image-cdn/overview/
@@ -33,8 +32,6 @@ const operationsGenerator = createOperationsGenerator({
       center: 'center',
     },
   },
-  joinWith: '&',
-  formatter: (key, value) => encodeQueryItem(key, value),
 })
 
 interface NetlifyImageCDNOptions {

src/runtime/providers/netlifyLargeMedia.ts

@@ -1,4 +1,4 @@
-import { encodeQueryItem, joinURL } from 'ufo'
+import { joinURL } from 'ufo'
 import { defineProvider, createOperationsGenerator } from '#image'
 
 const operationsGenerator = createOperationsGenerator({
@@ -13,8 +13,6 @@ const operationsGenerator = createOperationsGenerator({
       contain: 'fit',
     },
   },
-  joinWith: '&',
-  formatter: (key, value) => encodeQueryItem(key, value),
 })
 
 interface NetlifyLargeMediaOptions {

src/runtime/providers/sanity.ts

@@ -1,4 +1,4 @@
-import { joinURL } from 'ufo'
+import { joinURL, encodePath } from 'ufo'
 import { defineProvider, createOperationsGenerator } from '#image'
 
 const sanityCDN = 'https://cdn.sanity.io/images'
@@ -37,8 +37,7 @@ const operationsGenerator = createOperationsGenerator({
       outside: 'max',
     },
   },
-  joinWith: '&',
-  formatter: (key, value: string | true | number | Record<string, unknown>) => String(value) === 'true' ? key : `${key}=${value}`,
+  formatter: (key, value: string | true | number | Record<string, unknown>) => String(value) === 'true' ? key : encodePath(`${key}=${value}`),
 })
 
 const getMetadata = (id: string) => {

src/runtime/providers/sirv.ts

@@ -98,8 +98,6 @@ const operationsGenerator = createOperationsGenerator({
     },
     ...generateColorKeys(),
   },
-  joinWith: '&',
-  formatter: (key: any, value: any) => `${key}=${value}`,
 })
 
 interface SirvOptions {

src/runtime/providers/twicpics.ts

@@ -1,4 +1,4 @@
-import { joinURL } from 'ufo'
+import { encodeQueryItem, joinURL } from 'ufo'
 import { defineProvider } from '#image'
 import { createMapper, createOperationsGenerator, type InferModifiers } from '#image'
 
@@ -47,13 +47,14 @@ const operationsGenerator = createOperationsGenerator({
     },
   },
   joinWith: '/',
-  formatter: (key, value: string | number) => `${key}=${value}`,
-})
+  formatter: (key: 'output' | 'format' | 'fit' | 'quality' | 'background' | 'focus' | 'zoom', value) => encodeQueryItem(key, value),
+} as const)
 
 interface TwicpicsOptions {
   baseURL?: string
   modifiers?: InferModifiers<typeof operationsGenerator>
     & { fit?: 'fill' | 'inside' | 'outside' | 'cover' | 'contain' }
+    & Partial<Record<'resize' | 'fill' | 'contain' | 'inside' | 'outside' | 'cover' | 'missingValue', string>>
     & Partial<Record<typeof fits extends (fit: string) => infer Fit ? NonNullable<Fit> : string, string>>
 }
 

src/runtime/providers/weserv.ts

@@ -58,8 +58,6 @@ const operationsGenerator = createOperationsGenerator({
       'heart': 'heart',
     },
   },
-  joinWith: '&',
-  formatter: (key, value) => `${key}=${value}`,
 })
 
 export interface WeservOptions {

src/runtime/utils/index.ts

@@ -32,13 +32,8 @@ export function createMapper<Key extends string, Value>(map: Partial<Record<Key,
   return (key => key !== undefined ? map[key as Extract<Key, string>] || key : map.missingValue) as Mapper<Key, Value>
 }
 
-type Formatter<Key, Value> = (key: Key, value: Value) => string
-
-const defaultFormatter = (key: string, value: string | number) => `${key}=${value}`
-
-export function createOperationsGenerator<ModifierKey extends string, ModifierValue = string | number, FinalKey = ModifierKey, FinalValue = ModifierValue>(config: OperationGeneratorConfig<ModifierKey, ModifierValue, FinalKey, FinalValue>) {
-  const formatter = config.formatter || (defaultFormatter as Formatter<FinalKey, FinalValue>)
-
+export function createOperationsGenerator<ModifierKey extends string, ModifierValue = string | number, FinalKey = ModifierKey, FinalValue = ModifierValue>(config: OperationGeneratorConfig<ModifierKey, ModifierValue, FinalKey, FinalValue> = {}) {
+  const formatter = config.formatter
   const keyMap = config.keyMap && typeof config.keyMap !== 'function' ? createMapper<ModifierKey, FinalKey>(config.keyMap) : config.keyMap
 
   const map: Record<string, Mapper<ModifierValue, FinalValue>> = {}
@@ -51,7 +46,7 @@ export function createOperationsGenerator<ModifierKey extends string, ModifierVa
   }
 
   return (modifiers: Partial<Record<Extract<ModifierKey | FinalKey, string>, ModifierValue | FinalValue>>): string => {
-    const operations: string[] = []
+    const operations: [key: FinalKey, value: FinalValue][] = []
     for (const _key in modifiers) {
       const key = _key as keyof typeof modifiers
       if (typeof modifiers[key] === 'undefined') {
@@ -61,10 +56,14 @@ export function createOperationsGenerator<ModifierKey extends string, ModifierVa
         ? map[key](modifiers[key] as ModifierValue)
         : modifiers[key]
 
-      operations.push(formatter(((keyMap ? keyMap(key as ModifierKey) : key) as FinalKey), value as FinalValue))
+      operations.push([(keyMap ? keyMap(key as ModifierKey) : key) as FinalKey, value as FinalValue])
+    }
+
+    if (formatter) {
+      return operations.map(entry => formatter(...entry)).join(config.joinWith ?? '&')
     }
 
-    return operations.join(config.joinWith ?? '/')
+    return new URLSearchParams(operations as [string, string][]).toString()
   }
 }
 

src/types/image.ts

@@ -93,12 +93,16 @@ export interface ImageCTX {
 
 export type OperationMapper<From, To> = Record<string | Extract<From, string | number>, To> | ((key?: From) => To | From | undefined)
 
-export interface OperationGeneratorConfig<Key extends string, Value, FinalKey, FinalValue> {
+export type OperationGeneratorConfig<Key extends string, Value, FinalKey, FinalValue> = {
   keyMap?: Partial<Record<Key, FinalKey>>
+  valueMap?: Partial<Record<Key, Partial<Record<Extract<Value, string>, FinalValue>> | ((key: Value) => Value | FinalValue)>>
+} & ({
   formatter?: (key: FinalKey, value: FinalValue) => string
-  joinWith?: string
-  valueMap?: Partial<Record<Key, Record<Extract<Value, string>, FinalValue> | ((key: Value) => Value | FinalValue)>>
-}
+  joinWith?: undefined
+} | {
+  formatter: (key: FinalKey, value: FinalValue) => string
+  joinWith: string
+})
 
 export interface ImageSizesVariant {
   size?: string

test/e2e/__snapshots__/bunny.json5

@@ -1,12 +1,12 @@
 {
   "requests": [
-    "https://bunnyoptimizerdemo.b-cdn.net/bunny1.jpg?sharpen=true&aspect_ratio=16:9&width=1000&quality=80",
-    "https://bunnyoptimizerdemo.b-cdn.net/bunny2.jpg?crop=750,750&crop_gravity=north",
+    "https://bunnyoptimizerdemo.b-cdn.net/bunny1.jpg?sharpen=true&aspect_ratio=16%3A9&width=1000&quality=80",
+    "https://bunnyoptimizerdemo.b-cdn.net/bunny2.jpg?crop=750%2C750&crop_gravity=north",
     "https://bunnyoptimizerdemo.b-cdn.net/bunny3.jpg?flop=true&auto_optimize=high",
   ],
   "sources": [
-    "https://bunnyoptimizerdemo.b-cdn.net/bunny1.jpg?sharpen=true&aspect_ratio=16:9&width=1000&quality=80",
-    "https://bunnyoptimizerdemo.b-cdn.net/bunny2.jpg?crop=750,750&crop_gravity=north",
+    "https://bunnyoptimizerdemo.b-cdn.net/bunny1.jpg?sharpen=true&aspect_ratio=16%3A9&width=1000&quality=80",
+    "https://bunnyoptimizerdemo.b-cdn.net/bunny2.jpg?crop=750%2C750&crop_gravity=north",
     "https://bunnyoptimizerdemo.b-cdn.net/bunny3.jpg?flop=true&auto_optimize=high",
   ],
 }

test/e2e/__snapshots__/sirv.json5

@@ -6,7 +6,7 @@
     "https://demo.sirv.com/look-big.jpg?crop.type=face&h=500",
     "https://demo.sirv.com/look-big.jpg?h=500&scale.option=fit",
     "https://demo.sirv.com/look-big.jpg?text=Hello&text.align=center&text.position.gravity=south&text.background.color=ffff&text.size=60&text.font.family=Arial&text.color=white&h=500",
-    "https://demo.sirv.com/t-shirt-man.jpg?watermark=/watermark-v1.png&watermark.position=center&watermark.scale.width=30%&h=500",
+    "https://demo.sirv.com/t-shirt-man.jpg?watermark=%2Fwatermark-v1.png&watermark.position=center&watermark.scale.width=30%25&h=500",
     "https://demo.sirv.com/test.png?w=750&q=75",
   ],
   "sources": [
@@ -17,6 +17,6 @@
     "https://demo.sirv.com/look-big.jpg?crop.type=face&h=500",
     "https://demo.sirv.com/QW.pdf?page=1&w=500",
     "https://demo.sirv.com/look-big.jpg?text=Hello&text.align=center&text.position.gravity=south&text.background.color=ffff&text.size=60&text.font.family=Arial&text.color=white&h=500",
-    "https://demo.sirv.com/t-shirt-man.jpg?watermark=/watermark-v1.png&watermark.position=center&watermark.scale.width=30%&h=500",
+    "https://demo.sirv.com/t-shirt-man.jpg?watermark=%2Fwatermark-v1.png&watermark.position=center&watermark.scale.width=30%25&h=500",
   ],
 }