feat: add fastly provider (#15)

docs/content/en/providers.md

@@ -43,8 +43,6 @@ export default {
 }
 ```
 
-
-
 ## `twicpics`
 
 Integration between [Twicpics](https://www.twicpics.com) and the image module.  
@@ -60,4 +58,22 @@ export default {
     }
   }
 }
-```
+```
+
+## `fastly`
+
+Integration between [Fastly](https://docs.fastly.com/en/guides/image-optimization-api)
+and the image module. To use this provider you just need to specify the base url
+of your service in Fastly.
+
+```js{}[nuxt.config.js]
+export default {
+  image: {
+    providers: {
+      fastly: {
+        baseURL: 'https://www.fastly.io'
+      }
+    }
+  }
+}
+```

playground/nuxt.config.ts

@@ -23,6 +23,9 @@ export default {
       },
       cloudinary: {
         baseURL: 'https://res.cloudinary.com/farnabaz/image/upload'
+      },
+      fastly: {
+        baseURL: 'https://www.fastly.io'
       }
     }
   }

src/providers/fastly/index.ts

@@ -0,0 +1,8 @@
+import { ProviderFactory } from 'types'
+
+export default <ProviderFactory> function (providerOptions) {
+  return {
+    runtime: require.resolve('./runtime'),
+    runtimeOptions: providerOptions
+  }
+}

src/providers/fastly/runtime.ts

@@ -0,0 +1,44 @@
+import { RuntimeProvider, ImageModifiers } from 'types'
+
+function getSizeOperator (size) {
+  if (!size) {
+    return 'bounds'
+  }
+  switch (size) {
+    case 'contain':
+      return 'bounds'
+    case 'fill':
+    case 'inside':
+    case 'outside':
+      return 'crop'
+    default:
+      return size
+  }
+}
+
+export default <RuntimeProvider> {
+  generateURL (src: string, modifiers: ImageModifiers, options: any) {
+    const { width, height, format, size, ...providerModifiers } = modifiers
+    const operations = []
+
+    if (width) {
+      operations.push('width=' + encodeURIComponent(width))
+    }
+    if (height) {
+      operations.push('height=' + encodeURIComponent(height))
+    }
+    if (format) {
+      operations.push('format=' + encodeURIComponent(format))
+    }
+    operations.push('fit=' + encodeURIComponent(getSizeOperator(size)))
+
+    Object.entries(providerModifiers).forEach(([key, value]) => {
+      operations.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+    })
+
+    const operationsString = operations.join('&')
+    return {
+      url: (options.baseURL + src + '?' + operationsString).replace(/(https?:\/\/)|(\/)+/g, '$1$2')
+    }
+  }
+}

test/providers.test.ts

@@ -2,43 +2,50 @@ import fs from 'fs-extra'
 import local from '../src/providers/local'
 import cloudinary from '../src/providers/cloudinary'
 import twicpics from '../src/providers/twicpics'
+import fastly from '../src/providers/fastly'
 
 const images = [
   {
     args: ['/test.png', {}],
     local: { isStatic: true, url: '/_image/local/_/_/test.png' },
     cloudinary: { url: '/c_fit/test.png' },
-    twicpics: { url: '/test.png?twic=v1/' }
+    twicpics: { url: '/test.png?twic=v1/' },
+    fastly: { url: '/test.png?fit=bounds' }
   },
   {
     args: ['/test.png', { width: 200 }],
     local: { isStatic: true, url: '/_image/local/_/w_200/test.png' },
     cloudinary: { url: '/w_200,c_fit/test.png' },
-    twicpics: { url: '/test.png?twic=v1/cover=200x-' }
+    twicpics: { url: '/test.png?twic=v1/cover=200x-' },
+    fastly: { url: '/test.png?width=200&fit=bounds' }
   },
   {
     args: ['/test.png', { height: 200 }],
     local: { isStatic: true, url: '/_image/local/_/h_200/test.png' },
     cloudinary: { url: '/h_200,c_fit/test.png' },
-    twicpics: { url: '/test.png?twic=v1/cover=-x200' }
+    twicpics: { url: '/test.png?twic=v1/cover=-x200' },
+    fastly: { url: '/test.png?height=200&fit=bounds' }
   },
   {
     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' },
-    twicpics: { url: '/test.png?twic=v1/cover=200x200' }
+    twicpics: { url: '/test.png?twic=v1/cover=200x200' },
+    fastly: { url: '/test.png?width=200&height=200&fit=bounds' }
   },
   {
     args: ['/test.png', { width: 200, height: 200, size: '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' }
+    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' }],
     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' }
+    twicpics: { url: '/test.png?twic=v1/contain=200x200/format=jpeg' },
+    fastly: { url: '/test.png?width=200&height=200&format=jpeg&fit=bounds' }
   }
 ]
 
@@ -109,4 +116,26 @@ describe('Providers', () => {
       expect(generated).toEqual(image.twicpics)
     }
   })
+
+  test('fastly', async () => {
+    const providerOptions = {
+      baseURL: ''
+    }
+    const providerDataExpectedkeys = ['runtime', 'runtimeOptions']
+    const providerData = fastly(providerOptions)
+
+    expect(Object.keys(providerData)).toEqual(expect.arrayContaining(providerDataExpectedkeys))
+
+    const isRuntimeExists = await fs.exists(providerData.runtime)
+    expect(isRuntimeExists).toEqual(true)
+
+    const runtime = (await import(providerData.runtime)).default
+    expect(typeof runtime).toEqual('object')
+    expect(typeof runtime.generateURL).toEqual('function')
+
+    for (const image of images) {
+      const generated = runtime.generateURL.call(null, ...image.args, providerData.runtimeOptions)
+      expect(generated).toEqual(image.fastly)
+    }
+  })
 })