Skip to content

Commit

Permalink
feat: imagekit provider implementation and tests (#109)
Browse files Browse the repository at this point in the history
Co-authored-by: Karan yadav <alucard17>
  • Loading branch information
Alucard17 authored Dec 6, 2020
1 parent 2522917 commit fa8be15
Show file tree
Hide file tree
Showing 5 changed files with 91 additions and 6 deletions.
3 changes: 3 additions & 0 deletions playground/nuxt.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ export default {
imgix: {
baseURL: 'https://assets.imgix.net'
},
imagekit: {
baseURL: 'https://ik.imagekit.io/demo'
},
presets: [
{
name: 's50',
Expand Down
3 changes: 3 additions & 0 deletions playground/pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 8 additions & 0 deletions src/providers/imagekit/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { ProviderFactory } from 'types'

export default <ProviderFactory> function (providerOptions) {
return {
runtime: require.resolve('./runtime'),
runtimeOptions: providerOptions
}
}
42 changes: 42 additions & 0 deletions src/providers/imagekit/runtime.ts
Original file line number Diff line number Diff line change
@@ -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}` : '')
}
}
}
41 changes: 35 additions & 6 deletions test/unit/providers.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
{
Expand All @@ -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' }
}
]

Expand Down Expand Up @@ -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)
}
})
})

0 comments on commit fa8be15

Please sign in to comment.