feat: imagekit provider implementation and tests (#109)

Co-authored-by: Karan yadav <alucard17>

playground/nuxt.config.ts

@@ -24,6 +24,9 @@ export default {
     imgix: {
       baseURL: 'https://assets.imgix.net'
     },
+    imagekit: {
+      baseURL: 'https://ik.imagekit.io/demo'
+    },
     presets: [
       {
         name: 's50',

playground/pages/index.vue

@@ -34,6 +34,9 @@
 
       <h2>JPEG image on Fastly</h2>
       <NuxtImg provider="fastly" src="/image.jpg" />
+
+      <h2>JPEG image on Imagekit</h2>
+      <NuxtImg provider="imagekit" src="/img/plant.jpeg" />
     </div>
   </div>
 </template>

src/providers/imagekit/index.ts

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

src/providers/imagekit/runtime.ts

@@ -0,0 +1,42 @@
+import { RuntimeProvider, ImageModifiers } from 'types'
+import { createOperationsGenerator } from '~image/utils'
+
+const operationsGenerator = createOperationsGenerator({
+  keyMap: {
+    fit: 'c',
+    width: 'w',
+    height: 'h',
+    format: 'f',
+    quality: 'q',
+    background: 'bg'
+  },
+  valueMap: {
+    fit: {
+      cover: 'maintain_ratio',
+      contain: 'pad_resize',
+      fill: 'force',
+      inside: 'at_max',
+      outside: 'at_least',
+    },
+    background (value) {
+      if (value.startsWith('#')) {
+        return value.replace('#', '')
+      }
+      return value
+    }
+  },
+  joinWith: ',',
+  formatter: (key, value) => `${key}-${value}`
+})
+
+
+export default <RuntimeProvider> {
+  getImage (src: string, modifiers: ImageModifiers, options: any) {
+    debugger
+    let operations = operationsGenerator(modifiers as ImageModifiers)
+    operations = operations.replace('c-pad_resize', 'cm-pad_resize')
+    return {
+      url: options.baseURL + src + '?' + (operations ? `tr=${operations}` : '')
+    }
+  }
+}

test/unit/providers.test.ts

@@ -5,6 +5,7 @@ import cloudinary from '~/src/providers/cloudinary'
 import twicpics from '~/src/providers/twicpics'
 import fastly from '~/src/providers/fastly'
 import imgix from '~/src/providers/imgix'
+import imagekit from '~/src/providers/imagekit'
 
 const images = [
   {
@@ -13,47 +14,53 @@ const images = [
     cloudinary: { url: '/f_auto,q_auto/test' },
     twicpics: { url: '/test.png?twic=v1/' },
     fastly: { url: '/test.png?' },
-    imgix: { url: '/test.png?' }
+    imgix: { url: '/test.png?' },
+    imagekit: { url: '/test.png?' }
   },
   {
     args: ['/test.png', { width: 200 }],
     local: { isStatic: true, url: '/_image/local/remote/_/w_200/test.png' },
     cloudinary: { url: '/f_auto,q_auto,w_200/test' },
     twicpics: { url: '/test.png?twic=v1/cover=200x-' },
     fastly: { url: '/test.png?width=200' },
-    imgix: { url: '/test.png?w=200' }
+    imgix: { url: '/test.png?w=200' },
+    imagekit: { url: '/test.png?tr=w-200' }
   },
   {
     args: ['/test.png', { height: 200 }],
     local: { isStatic: true, url: '/_image/local/remote/_/h_200/test.png' },
     cloudinary: { url: '/f_auto,q_auto,h_200/test' },
     twicpics: { url: '/test.png?twic=v1/cover=-x200' },
     fastly: { url: '/test.png?height=200' },
-    imgix: { url: '/test.png?h=200' }
+    imgix: { url: '/test.png?h=200' },
+    imagekit: { url: '/test.png?tr=h-200' }
   },
   {
     args: ['/test.png', { width: 200, height: 200 }],
     local: { isStatic: true, url: '/_image/local/remote/_/s_200_200/test.png' },
     cloudinary: { url: '/f_auto,q_auto,w_200,h_200/test' },
     twicpics: { url: '/test.png?twic=v1/cover=200x200' },
     fastly: { url: '/test.png?width=200&height=200' },
-    imgix: { url: '/test.png?w=200&h=200' }
+    imgix: { url: '/test.png?w=200&h=200' },
+    imagekit: { url: '/test.png?tr=w-200,h-200' }
   },
   {
     args: ['/test.png', { width: 200, height: 200, fit: 'contain' }],
     local: { isStatic: true, url: '/_image/local/remote/_/f_contain,s_200_200/test.png' },
     cloudinary: { url: '/f_auto,q_auto,w_200,h_200,c_scale/test' },
     twicpics: { url: '/test.png?twic=v1/contain=200x200' },
     fastly: { url: '/test.png?width=200&height=200&fit=bounds' },
-    imgix: { url: '/test.png?w=200&h=200&fit=fill' }
+    imgix: { url: '/test.png?w=200&h=200&fit=fill' },
+    imagekit: { url: '/test.png?tr=w-200,h-200,cm-pad_resize' }
   },
   {
     args: ['/test.png', { width: 200, height: 200, fit: 'contain', format: 'jpeg' }],
     local: { isStatic: true, url: '/_image/local/remote/jpeg/f_contain,s_200_200/test.png' },
     cloudinary: { url: '/f_jpeg,q_auto,w_200,h_200,c_scale/test' },
     twicpics: { url: '/test.png?twic=v1/format=jpeg/contain=200x200' },
     fastly: { url: '/test.png?width=200&height=200&fit=bounds&format=jpeg' },
-    imgix: { url: '/test.png?w=200&h=200&fit=fill&fm=jpeg' }
+    imgix: { url: '/test.png?w=200&h=200&fit=fill&fm=jpeg' },
+    imagekit: { url: '/test.png?tr=w-200,h-200,cm-pad_resize,f-jpeg' }
   }
 ]
 
@@ -169,4 +176,26 @@ describe('Providers', () => {
       expect(generated).toMatchObject(image.imgix)
     }
   })
+
+  test('imagekit', async () => {
+    const providerOptions = {
+      baseURL: ''
+    }
+    const providerDataExpectedkeys = ['runtime', 'runtimeOptions']
+    const providerData = imagekit(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.getImage).toEqual('function')
+
+    for (const image of images) {
+      const generated = runtime.getImage.call(null, ...image.args, providerData.runtimeOptions)
+      expect(generated).toMatchObject(image.imagekit)
+    }
+  })
 })