fix(runtime): rename size prop to fit

close #16

docs/content/en/custom-provider.md

@@ -42,7 +42,7 @@ The runtime will recieve a src, image modifiers and its provider options and gen
 ```js
 export default {
   generateURL(src, modifiers, options) {
-    const { width, height, format, size, ...providerModifiers } = modifiers;
+    const { width, height, format, fit, ...providerModifiers } = modifiers;
     const operations = []
 
    // process modifiers

docs/content/en/nuxt-image.md

@@ -83,7 +83,7 @@ Presets are predefined sets of image modifiers that can be used create unified f
         {
           name: 'jpg-cover',
           modifiers: {
-            size: 'cover',
+            fit: 'cover',
             format: 'jpg',
             width: 300,
             height: 300
@@ -128,7 +128,7 @@ As you may notice providers and presets has a different in their usage, and it i
         {
           name: 'jpg-cover',
           modifiers: {
-            size: 'cover',
+            fit: 'cover',
             format: 'jpg',
             width: 300,
             height: 300
@@ -181,7 +181,7 @@ Legacy mode is just and `<img>` tag with `srcsets`, no fixed size and no lazy lo
         {
           name: 'jpg-cover',
           modifiers: {
-            size: 'cover',
+            fit: 'cover',
             format: 'jpg',
             width: 300,
             height: 300
@@ -280,9 +280,9 @@ In case you want to serve images in specific format, use this prop.
 </template>
 ```
 
-## `size`
+## `fit`
 
-The `size` property specifies the size of the images.  
+The `fit` property specifies the size of the images.  
 There are five standard values you can use with this property.
 
 - `cover`: (default) Preserving aspect ratio, ensure the image covers both provided dimensions by cropping/clipping to fit
@@ -297,15 +297,15 @@ There are five standard values you can use with this property.
 
   ```vue{}[index.vue]
   <template>
-    <nuxt-image size="cover" src="/nuxt-icon.png" width="200" height="100" />
+    <nuxt-image fit="cover" src="/nuxt-icon.png" width="200" height="100" />
   </template>
   ```
 
   </code-block>
   <code-block label="Preview">
 
   <div class="text-center p-4 bg-gray-800 rounded-b-md">
-  <nuxt-image size="cover" src="/nuxt-icon.png" width="200" height="100" />
+  <nuxt-image fit="cover" src="/nuxt-icon.png" width="200" height="100" />
   </div>
 
   </code-block>

docs/nuxt.config.js

@@ -21,7 +21,7 @@ export default theme({
       {
         name: 'jpg-cover',
         modifiers: {
-          size: 'cover',
+          fit: 'cover',
           format: 'jpg',
           width: 300,
           height: 300

playground/nuxt.config.ts

@@ -12,7 +12,8 @@ export default {
       {
         name: 's50',
         modifiers: {
-          contain: '50x50'
+          width: 50,
+          height: 50
         }
       }
     ],

src/providers/cloudinary/runtime.ts

@@ -1,15 +1,15 @@
 import { RuntimeProvider, ImageModifiers } from 'types'
-import { createOperationsGenerator } from '../../runtime/provider-utils'
+import { cleanDoubleSlashes, createOperationsGenerator } from '../../runtime/provider-utils'
 
 const operationsGenerator = createOperationsGenerator({
   keyMap: {
-    size: 'c',
+    fit: 'c',
     width: 'w',
     height: 'h',
     format: 'f'
   },
   valueMap: {
-    size: {
+    fit: {
       fill: 'fill',
       inside: 'pad',
       outside: 'lpad',
@@ -26,7 +26,7 @@ export default <RuntimeProvider> {
     const operations = operationsGenerator(modifiers)
 
     return {
-      url: options.baseURL + '/' + operations + src
+      url: cleanDoubleSlashes(options.baseURL + '/' + operations + src)
     }
   }
 }

src/providers/fastly/runtime.ts

@@ -1,12 +1,9 @@
 import { RuntimeProvider, ImageModifiers } from 'types'
-import { createOperationsGenerator } from '../../runtime/provider-utils'
+import { cleanDoubleSlashes, createOperationsGenerator } from '../../runtime/provider-utils'
 
 const operationsGenerator = createOperationsGenerator({
-  keyMap: {
-    size: 'fit'
-  },
   valueMap: {
-    size: {
+    fit: {
       fill: 'crop',
       inside: 'crop',
       outside: 'crop',
@@ -22,7 +19,7 @@ export default <RuntimeProvider> {
   generateURL (src: string, modifiers: ImageModifiers, options: any) {
     const operations = operationsGenerator(modifiers)
     return {
-      url: options.baseURL + src + '?' + operations
+      url: cleanDoubleSlashes(options.baseURL + src + '?' + operations)
     }
   }
 }

src/providers/local/runtime.ts

@@ -1,21 +1,22 @@
 import { RuntimeProvider, ImageModifiers } from 'types'
+import { cleanDoubleSlashes } from '../../runtime/provider-utils'
 
 export default <RuntimeProvider> {
   generateURL (src: string, modifiers: ImageModifiers) {
     const operations = []
 
-    const size = modifiers.size ? `_${modifiers.size}` : ''
+    const fit = modifiers.fit ? `_${modifiers.fit}` : ''
     if (modifiers.width && modifiers.height) {
-      operations.push(`s_${modifiers.width}_${modifiers.height}${size}`)
+      operations.push(`s_${modifiers.width}_${modifiers.height}${fit}`)
     } else if (modifiers.width) {
-      operations.push(`w_${modifiers.width}${size}`)
+      operations.push(`w_${modifiers.width}${fit}`)
     } else if (modifiers.height) {
-      operations.push(`h_${modifiers.height}${size}`)
+      operations.push(`h_${modifiers.height}${fit}`)
     }
 
     const operationsString = operations.length ? operations.join(',') : '_'
     return {
-      url: `/_image/local/${modifiers.format || '_'}/${operationsString}/${src}`,
+      url: cleanDoubleSlashes(`/_image/local/${modifiers.format || '_'}/${operationsString}/${src}`),
       isStatic: true
     }
   }

src/providers/twicpics/runtime.ts

@@ -1,12 +1,12 @@
 import { RuntimeProvider, ImageModifiers } from 'types'
-import { createMapper, createOperationsGenerator } from '../../runtime/provider-utils'
+import { createMapper, createOperationsGenerator, cleanDoubleSlashes } from '../../runtime/provider-utils'
 
-const sizes = createMapper({
+const fits = createMapper({
   fill: 'fill',
   inside: 'pad',
   outside: 'lpad',
-  cover: 'fit',
-  contain: 'scale',
+  cover: 'cover',
+  contain: 'contain',
   missingValue: 'cover'
 })
 
@@ -20,15 +20,15 @@ const operationsGenerator = createOperationsGenerator({
 
 export default <RuntimeProvider> {
   generateURL (src: string, modifiers: ImageModifiers, options: any) {
-    const { width, height, size, ...providerModifiers } = modifiers
+    const { width, height, fit, ...providerModifiers } = modifiers
 
-    const operations = operationsGenerator({
-      ...providerModifiers,
-      [sizes(size)]: `${width || '-'}x${height || '-'}`
-    })
+    if (width || height) {
+      providerModifiers[fits(fit)] = `${width || '-'}x${height || '-'}`
+    }
+    const operations = operationsGenerator(providerModifiers)
 
     return {
-      url: options.baseURL + src + '?twic=v1/' + operations
+      url: cleanDoubleSlashes(options.baseURL + src + '?twic=v1/' + operations)
     }
   }
 }

src/runtime/image.ts

@@ -1,5 +1,4 @@
 import type { CreateImageOptions, ImageModifiers } from 'types'
-import { cleanDoubleSlashes } from './provider-utils'
 
 function processSource (src: string) {
   if (!src.includes(':') || src.match('^https?://')) {
@@ -39,12 +38,11 @@ export function createImage (context, { providers, defaultProvider, presets }: C
       throw new Error('Unsupported preset ' + preset)
     }
 
-    const generatedURL = provider.provider.generateURL(
+    const { url: providerUrl, isStatic } = provider.provider.generateURL(
       src,
       presetMap[preset] ? presetMap[preset].modifiers : modifiers,
       { ...provider.defaults, ...options }
     )
-    const providerUrl = cleanDoubleSlashes(generatedURL.url)
 
     // @ts-ignore
     if (typeof window !== 'undefined' && typeof window.$nuxt._pagePayload !== 'undefined') {
@@ -70,7 +68,7 @@ export function createImage (context, { providers, defaultProvider, presets }: C
     } else if (context.ssrContext && typeof context.ssrContext.mapImage === 'function') {
       // Full Static
       const originalURL = url
-      url = context.ssrContext.mapImage({ url, isStatic: generatedURL.isStatic, format: modifiers.format, src })
+      url = context.ssrContext.mapImage({ url, isStatic, format: modifiers.format, src })
 
       if (url) {
         data.images[providerUrl] = url

src/runtime/nuxt-image-mixins.ts

@@ -25,7 +25,7 @@ export default {
       type: String,
       default: undefined
     },
-    size: {
+    fit: {
       type: String,
       default: 'cover'
     },
@@ -142,7 +142,7 @@ export default {
         width,
         height,
         format,
-        size: this.size,
+        fit: this.fit,
         ...this.operations
       })
       return encodeURI(image)

test/plugin.test.ts

@@ -50,7 +50,7 @@ describe('Plugin', () => {
 
   test('Generate Circle Image with Cloudinary', () => {
     const image = nuxtContext.$img('cloudinary+circle:/test.png', {})
-    expect(image).toEqual('https://res.cloudinary.com/nuxt/image/upload/c_fit,r_100/test.png')
+    expect(image).toEqual('https://res.cloudinary.com/nuxt/image/upload/r_100/test.png')
   })
 
   test('Deny Invalid Images', () => {

test/providers.test.ts

@@ -8,44 +8,44 @@ const images = [
   {
     args: ['/test.png', {}],
     local: { isStatic: true, url: '/_image/local/_/_/test.png' },
-    cloudinary: { url: '/c_fit/test.png' },
+    cloudinary: { url: '/test.png' },
     twicpics: { url: '/test.png?twic=v1/' },
-    fastly: { url: '/test.png?fit=bounds' }
+    fastly: { url: '/test.png?' }
   },
   {
     args: ['/test.png', { width: 200 }],
     local: { isStatic: true, url: '/_image/local/_/w_200/test.png' },
-    cloudinary: { url: '/w_200,c_fit/test.png' },
+    cloudinary: { url: '/w_200/test.png' },
     twicpics: { url: '/test.png?twic=v1/cover=200x-' },
-    fastly: { url: '/test.png?width=200&fit=bounds' }
+    fastly: { url: '/test.png?width=200' }
   },
   {
     args: ['/test.png', { height: 200 }],
     local: { isStatic: true, url: '/_image/local/_/h_200/test.png' },
-    cloudinary: { url: '/h_200,c_fit/test.png' },
+    cloudinary: { url: '/h_200/test.png' },
     twicpics: { url: '/test.png?twic=v1/cover=-x200' },
-    fastly: { url: '/test.png?height=200&fit=bounds' }
+    fastly: { url: '/test.png?height=200' }
   },
   {
     args: ['/test.png', { width: 200, height: 200 }],
     local: { isStatic: true, url: '/_image/local/_/s_200_200/test.png' },
-    cloudinary: { url: '/w_200,h_200,c_fit/test.png' },
+    cloudinary: { url: '/w_200,h_200/test.png' },
     twicpics: { url: '/test.png?twic=v1/cover=200x200' },
-    fastly: { url: '/test.png?width=200&height=200&fit=bounds' }
+    fastly: { url: '/test.png?width=200&height=200' }
   },
   {
-    args: ['/test.png', { width: 200, height: 200, size: 'contain' }],
+    args: ['/test.png', { width: 200, height: 200, fit: 'contain' }],
     local: { isStatic: true, url: '/_image/local/_/s_200_200_contain/test.png' },
     cloudinary: { url: '/w_200,h_200,c_scale/test.png' },
     twicpics: { url: '/test.png?twic=v1/contain=200x200' },
     fastly: { url: '/test.png?width=200&height=200&fit=bounds' }
   },
   {
-    args: ['/test.png', { width: 200, height: 200, size: 'contain', format: 'jpeg' }],
+    args: ['/test.png', { width: 200, height: 200, fit: 'contain', format: 'jpeg' }],
     local: { isStatic: true, url: '/_image/local/jpeg/s_200_200_contain/test.png' },
-    cloudinary: { url: '/w_200,h_200,f_jpeg,c_scale/test.png' },
-    twicpics: { url: '/test.png?twic=v1/contain=200x200/format=jpeg' },
-    fastly: { url: '/test.png?width=200&height=200&format=jpeg&fit=bounds' }
+    cloudinary: { url: '/w_200,h_200,c_scale,f_jpeg/test.png' },
+    twicpics: { url: '/test.png?twic=v1/format=jpeg/contain=200x200' },
+    fastly: { url: '/test.png?width=200&height=200&fit=bounds&format=jpeg' }
   }
 ]
 

types/runtime.d.ts

@@ -27,7 +27,7 @@ export interface ImagePreset {
 export interface ImageModifiers {
   width: number
   height: number
-  size: string
+  fit: string
   format: string
   [key: string]: any;
 }
@@ -50,3 +50,16 @@ export interface RuntimeProvider {
   // Do modifier mapping
   generateURL: (src: string, modifiers: ImageModifiers, providerOptions: any) => { url: string, isStatic?: boolean }
 }
+
+export type RuntimeOperationFormatter = (key: string, value: string) => string
+
+export type RuntimeOperationMapper = { [key: string]: string } | ((key: string) => string)
+
+export interface OperationGeneratorConfig {
+  keys?: RuntimeOperationMapper
+  formatter?: RuntimeOperationFormatter
+  joinWith?: string
+  values?: {
+    [key: string]: RuntimeOperationMapper
+  }
+}